/* =================================
   COMMON INNER
================================= */

.brand-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

@media screen and (max-width:767px){

  .brand-inner{
    width:calc(100% - 20px);
  }

}

.brand-fv{
  position:relative;
}
.brand-note{
  position:absolute;
  bottom:0px;
  z-index:5;

  font-size:clamp(10px,.8vw,13px);
  line-height:1.5;
  letter-spacing:.04em;
  color:#fff;

  text-shadow:
    0 1px 3px rgba(0,0,0,.8),
    0 3px 8px rgba(0,0,0,.5);
}

.brand-note-left{
  left:0px;
}

.brand-note-right{
  right:0px;
}

/* =================================
   brand intro
================================= */

.brand-intro{
  padding:100px 20px 60px;
}

.brand-intro-inner{
  width:min(1200px,100%);
  margin:0 auto;
  text-align:center;
}


/* =================================
   title
================================= */

.brand-intro-title{
  font-size:clamp(32px, 2.6vw, 56px);
  line-height:1.6;
  letter-spacing:.08em;
  font-weight:400;
  color:#111;
}


/* =================================
   copy
================================= */

.brand-intro-copy{
  margin-top:50px;
}

.brand-intro-copy p{
  font-size:clamp(15px,1.2vw,22px);
  line-height:2.8;
  letter-spacing:.08em;
  color:#111;
}


/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .brand-intro{
    padding:70px 20px;
  }

  .brand-intro-title{
    line-height:1.7;
  }

  .brand-intro-copy{
    margin-top:35px;
  }

  .brand-intro-copy p{
    font-size:14px;
    line-height:2.4;
  }

}


/* =================================
   company
================================= */

.brand-company-section{
  padding:120px 20px 0px;
  background:#000;
}

.brand-company-inner{
  width:min(1200px,100%);
  margin:0 auto;
}


/* =================================
   main
================================= */

.brand-company-main{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:60px;
  align-items:center;
}


/* =================================
   photo
================================= */

.brand-company-photo picture{
  display:block;
}

.brand-company-photo img{
  display:block;
  width:100%;
  height:auto;
}


/* =================================
   text
================================= */

.brand-company-logo img{
  display:block;
  width:min(420px,100%);
  height:auto;
}

.brand-company-copy{
  margin-top:50px;
}

.brand-company-copy p{
  font-size:clamp(15px,1.2vw,22px);
  line-height:2.4;
  color:#fff;
	text-align: justify-all;
}

.brand-company-mark{
  margin-top:60px;
}

.brand-company-mark img{
  display:block;
  width:min(320px,100%);
  height:auto;
}


/* =================================
   works
================================= */

.brand-company-works{
  width:min(980px,100%);
  margin:80px auto 0;
}

.brand-company-works picture{
  display:block;
}

.brand-company-works img{
  display:block;
  width:100%;
  height:auto;
}

.brand-company-works{
  position:relative;
}

.brand-company-works picture{
  display:block;
}

.brand-company-works img{
  display:block;
  width:100%;
}

.works-link{
  position:absolute;
  display:block;
  z-index:2;
  overflow:hidden;

  cursor:pointer;
}


.works-link::before{
  content:"";

  position:absolute;
  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%
  );

  transform:skewX(-12deg);

  opacity:0;
}


/* hover */
.works-link:hover::before{
  animation:glass-flow 1.4s ease;
}


@keyframes glass-flow{

  0%{
    left:-120%;
    opacity:0;
  }

  25%{
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    left:120%;
    opacity:0;
  }

}


.works-danbara{
  left:3%;
  top:10%;
  width:30%;
  height:88%;
}


/* =================================
   fade
================================= */



.brand-company-main{
  transition-delay:0s;
}

.brand-company-works{
  transition-delay:.25s;
}


/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .brand-company-section{
    padding:70px 20px;
  }

  .brand-company-main{
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }

  /* SPは左全部画像 */
  .brand-company-photo img{
    width:100%;
	  margin-top: 20px;
  }

  /* ロゴ非表示 */
  .brand-company-logo{
    display:none;
  }

  /* マーク非表示 */
  .brand-company-mark{
    display:none;
  }

  .brand-company-copy{
    margin-top:0;
  }

  .brand-company-copy p{
    font-size:13px;
    line-height:1.8;
	  text-align: justify-all;
  }

  .brand-company-works{
    width:100%;
    margin-top:45px;
  }

}

/* =================================
   mitsubishi
================================= */

.brand-company-mitsubishi{
  padding:120px 20px;
  background:#000;
}

.brand-company-inner{
  width:min(1200px,100%);
  margin:0 auto;
}


/* =================================
   main
================================= */

.brand-company-mitsubishi .brand-company-main{
  display:grid;
  grid-template-columns:.85fr 1.25fr;
  gap:60px;
  align-items:center;
}


/* =================================
   photo
================================= */

.brand-company-photo picture{
  display:block;
}

.brand-company-photo img{
  display:block;
  width:100%;
  height:auto;
}


/* =================================
   logo
================================= */

.brand-company-mitsubishi .brand-company-logo img{
  display:block;
  width:min(340px,100%);
  height:auto;
}


/* =================================
   copy
================================= */

.brand-company-copy{
  margin-top:50px;
}

.brand-company-copy p{
  font-size:clamp(15px,1.2vw,22px);
  line-height:2.5;
  letter-spacing:.08em;
  color:#fff;
	text-align: justify-all;
}


/* =================================
   mark
================================= */

.brand-company-mark{
  margin-top:60px;
}

.brand-company-mark img{
  display:block;
  width:min(300px,100%);
  height:auto;
}


/* =================================
   works
================================= */

.brand-company-works{
  width:min(980px,100%);
  margin:80px auto 0;
}

.brand-company-works picture{
  display:block;
}

.brand-company-works img{
  display:block;
  width:100%;
  height:auto;
}


/* =================================
   fade
================================= */

.js-scroll-fade,
.brand-company-main,
.brand-company-works{
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show,
.brand-company-main.is-show,
.brand-company-works.is-show{
  transform:translateY(0);
}

.brand-company-works{
  transition-delay:.25s;
}

.brand-company-main{
  transition-delay:0s;
}

.brand-company-works{
  transition-delay:.25s;
}


/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .brand-company-mitsubishi{
    padding:70px 20px;
  }

  .brand-company-mitsubishi .brand-company-main{
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }

  /* SPは左画像にロゴ込み */
  .brand-company-mitsubishi .brand-company-logo{
    display:none;
  }

  .brand-company-mitsubishi .brand-company-mark{
    display:none;
  }

  .brand-company-copy{
    margin-top:0;
  }

  .brand-company-copy p{
    font-size:13px;
    line-height:1.6;
text-align: justify-all;
  }

  .brand-company-works{
    width:100%;
    margin-top:45px;
  }

}

.brand-note a,
.brand-note a:link,
.brand-note a:visited,
.brand-note a:hover,
.brand-note a:focus,
.brand-note a:active{
  color:inherit !important;
  text-decoration:none !important;
}

.brand-note a{
  position:relative;
  color:inherit !important;
  text-decoration:none !important;
  display:inline-block;
}

.brand-note a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;

  width:100%;
  height:1px;

  background:currentColor;

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}

.brand-note a:hover::after{
  transform:scaleX(1);
}