@charset "utf-8";

/*========= ファーストビューのためのCSS ===============*/

/*========= レイアウトのためのCSS ===============*/
#mv {
 position: relative;
}

#mv .mv_wrapper {
 position: relative;
 width: 100%;
 padding: 40px 0 44px 0;
}


#mv .mv_wrapper .series_box {
 position: absolute;
 top: 42%;
 left: 0;
 transform: translateY(-50%) translateX(0%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 z-index: 9;
}

#mv .mv_wrapper .series_box img {
 width: 36px;
 height: 100%;
}

#mv .mv_wrapper .series_box p.series {
 display: none;
}

#mv .mv_inner {
 position: relative;
 width: 1240px;
 max-width: 1240px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
}

#mv .mv_inner h1 {
 font-size:116px;
 font-weight: 900;
 line-height: 1.32;
 margin: 0 0 50px 0;
}

#mv .mv_inner h1 span.pc_title_wrap {
 display: block;
}


#mv .mv_inner p.sub-tit {
 text-align: left;
 font-size: 26px;
 font-weight: 900;
 margin: 0 0 20px 0;
}

#mv .mv_inner .joint_inner {
 display: block;
 position: relative;
 width: 550px;
 height: 120px;
 background: #000000;
 padding: 16px 0 16px 20px;
 border-radius: 10px;
}


#mv .mv_inner p.lead {
 font-size: 20px;
 font-weight: 500;
 line-height: 1.4;
 letter-spacing: 0.05em;
 color: #ffffff;
}

#mv .mv_inner p.lead span {
 font-size: 16px;
}

#mv .mv_inner .img_inner.first {
 position: absolute;
 top: -20px;
 left: 48%;
 width: 160px;
 height: 160px;
}

#mv .mv_inner .img_inner.second {
 position: absolute;
 top: -20px;
 left: 80%;
 width: 160px;
 height: 160px;
}

#mv .mv_inner .img_inner p.img_box {
 width: 160px;
 height: 160px;
 border-radius: 50%;
 background: #f0ff12;
}

#mv .mv_inner .img_inner p.img_box img {
 width: 160px;
 display: block;
 height: 160px;
 border-radius: 50%;
 border: 10px solid #f0ff12;
 box-sizing: border-box;
}

#mv .mv_inner .img_inner p.cap-txt {
 text-align: center;
 padding: 6px 0 0 0;
 font-weight: 500;
}

#mv .mv_inner .img_inner p.cap-txt span {
 font-size: 14px;
}

#mv .mv_kv_inner {
 position: relative;
 width: 620px;
 height: 620px;
}

#mv .joint_inner_tab {
 display: none;
}

@media screen and (max-width: 1239px) {
 #mv .mv_wrapper {
  padding: 20px 0 0 0;
 } 
 
 #mv .mv_inner {
  width: 90%;
 }
 
 #mv .mv_txt_inner, #mv .mv_kv_inner {
  width: 50%;
  height: 100%;
 }
 
 #mv .mv_inner p.sub-tit {
  font-size: 1.966667vw;
 }
 
 #mv .mv_inner h1 {
  font-size: 8.666667vw;
 }
 
 #mv .mv_inner .joint_inner {
  display: none;
 }
 
 #mv .joint_inner_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 40px auto 0;
  background: #000000;
  border-radius: 20px;
  padding: 20px;
 }
 
 #mv .joint_inner_tab p.lead {
  font-size: 1.966667vw;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
 }
 
 #mv .joint_inner_tab p.lead span {
  font-size: 1.466667vw;
 }
 
 #mv .joint_inner_tab .img_inner {
  width: 30%;
  height: 100%;
  margin: 0 2%;
 }
 
 #mv .joint_inner_tab .img_inner.last {
  margin: 0 0 0 0;
 }
 
 #mv .joint_inner_tab .img_inner p.img_box img {
  display: block;
  border-radius: 12px;
 }
 
 #mv .joint_inner_tab .img_inner p.cap-txt {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  padding: 10px 0 0 0;
 }
 
 #mv .joint_inner_tab .img_inner p.cap-txt span {
  font-size: 14px;
 }
 

}


@media screen and (max-width: 812px) {
 #mv .mv_wrapper .series_box img {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0 20px;
 }
 
#mv .mv_wrapper .series_box {
 position: relative;
 top: 0;
 left: 0;
 transform: translateY(0) translateX(0%);
 -webkit- transform: translateY(0%) translateX(0%);
 background: #f0ff12;
 z-index: 9;
}
 
 #mv .mv_wrapper .series_box img {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0 20px;
 }
 
 #mv .mv_inner {
  width: 100%;
  flex-direction: column;
 }
 
 #mv .mv_txt_inner {
  order: 2;
 }
 
 #mv .mv_kv_inner {
  width: 100%;
  height: 100%;
  padding: 30px 30px 50px 30px;
  background: #f0ff12;
 }
 
 #mv .mv_txt_inner {
  width: 90%;
  margin: 40px auto 0;
 }
 
 #mv .mv_inner p.sub-tit {
  font-size: 3.466667vw;
  text-align: center;
 }
 
 #mv .mv_inner h1 {
  font-size: 16.866667vw;
  text-align: center;
 }
 
 #mv .joint_inner_tab {
  width: 90%;
  margin: 0 auto 0;
 }
 
 #mv .joint_inner_tab p.lead {
  font-size: 2.866667vw;
 }
 
 #mv .joint_inner_tab p.lead span {
  font-size: 2.166667vw;
 } 
 
}


@media screen and (max-width: 480px) {
 #mv .mv_wrapper .series_box img {
  width: 80%;
  padding: 20px 0 10px;
 }
 #mv .mv_inner p.sub-tit {
  font-size: 24px;
  line-height: 1.6;
  margin: 0;
 }
 
 #mv .mv_inner h1 {
  margin: 0 0 30px 0;
 }
 
 #mv .joint_inner_tab {
  flex-wrap: wrap;
  border-radius: 10px;
 }
 
 #mv .joint_inner_tab p.lead {
  font-size: 22px;
  text-align: center;
  padding: 0 0 20px 0;
 }
 
 #mv .joint_inner_tab p.lead span {
  font-size: 14px;
 }
 
 #mv .joint_inner_tab .img_inner {
  width: 40%;
  margin: 0 6%;
 }
}

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
 animation-name:bgextendAnimeBase;
 animation-duration:1s;
 animation-fill-mode:forwards;
 position: relative;
 overflow: hidden;/*　はみ出た色要素を隠す　*/
 opacity:0;
}

@keyframes bgextendAnimeBase{
 from {
  opacity:0;
 }

 to {
  opacity:1;  
 }
}

/*中の要素*/
.bgappear{
 animation-name:bgextendAnimeSecond;
 animation-duration:1s;
 animation-delay: 0.6s;
 animation-fill-mode:forwards;
 opacity: 0;
}

@keyframes bgextendAnimeSecond{
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

/*左から右*/
.bgLRextend::before{
 animation-name:bgLRextendAnime;
 animation-duration:1s;
 animation-fill-mode:forwards;
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #000000;/*伸びる背景色の設定*/
}

p.sub-tit .bgLRextend::before{
 background-color: #f0ff12;/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime{
 0% {
  transform-origin:left;
  transform:scaleX(0);
 }
 50% {
  transform-origin:left;
  transform:scaleX(1);
 }
 50.001% {
  transform-origin:right;
 }
 100% {
  transform-origin:right;
  transform:scaleX(0);
 }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
 opacity: 0;
}


@media screen and (max-width: 812px) {
 .bgextend,
 .bgappear,
 .bgLRextend::before {
  animation: none;
  transform: none;
 }
 
 .bgLRextend::before {
  background: transparent;
 }
 
 p.sub-tit .bgLRextend::before {
  display: none;
 }
 
 .bgextend,
 .bgappearTrigger,
 .bgLRextendTrigger{
  opacity: 1;
 }
 
}



/*========= //　ファーストビューのためのCSS 　ここまで   ===============*/