/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

html{font-size: 3.75vw;}
body{
    /*background: url(../img/sp_bottom_bg.jpg) bottom center / 100% auto no-repeat, #000; */
    background: #000;
    color: #fff;
    font-family:  'Noto Serif JP', serif;
    font-size: 100%;
    font-size: 3.75vw;
    line-height: 1.7;
    letter-spacing: 0.01em;
    /*letter-spacing: calc( 1em / 1000 * 60 );*/
}
body.fixed{ position: fixed; }
/*body.fixed .wrapper{ display: none; }*/


.bg-yellow{ background: #fff600; }
.bg-gray{ background: #e1e1e1; }
.bg-gray2{ background: #dddddd; }
.bg-dark{ background: #4c4c4c}
.fill_b{ color: #000; }

.pc{ display: none; }


.svg_box{ display: none; }

a{ transition: 0.3s; }
a:hover{ opacity: 0.6 }




@media screen and (max-width: 900px) {
  @media (orientation: landscape){
    html{ font-size: 2.1vw; }
    body{ font-size: 2.1vw; }

  }

}

@media screen and (min-width: 900px) {
    
    .sp{ display: none; }
    .pc{ display: block; }
}


.mainsld-texts { position: absolute; bottom: 0; left: 0; width: 100%}
.mainsld-texts_transition { transform: translateX(0) translateZ(0); will-change: opacity, transform; animation: textOut cubic-bezier(.55, .085, .68, .53) .75s forwards; opacity: 1}
.mainsld-texts_transition-0 { animation-delay: 0s}
.mainsld-texts_transition-1 { animation-delay: .05s}
.mainsld-texts_transition-2 { animation-delay: .1s}
.mainsld-texts_transition-3 { animation-delay: .15s}
.mainsld-texts_transition-4 { animation-delay: .2s}
.mainsld-texts_transition-5 { animation-delay: .25s}
.mainsld-texts_transition-6 { animation-delay: .3s}

@keyframes textIn {
  0% { transform: translateY(40px) translateZ(0); opacity: 0 }
  to { transform: translateY(0) translateZ(0); opacity: 1}
}

@keyframes textOut {
  0% { transform: translateY(0) translateZ(0); opacity: 1 }
  to { transform: translateY(-40px) translateZ(0); opacity: 0}
}

@keyframes blink{
  0%{ opacity:1 } 50%{ opacity:.2 } to { opacity:1 }
}

@media screen and (min-width: 900px) {
.banner img{
width: 60%;
height: auto;
}
	}

.banner img{
width: 70%;
height: auto;
	text-align: center;
	margin:0 auto;
}

#banner{
	text-align: center;
	margin:0 auto;
}


/* ==========================================================================
   ALL
   ========================================================================== */

body.fixed .wrapper{ opacity: 0; transition: 0.3s; }
.wrapper{ width: 100vw; overflow: hidden; position: relative; opacity: 1; }


p{ font-size: 3.2vw; line-height: 1.75; }


.sectionRotation{ position: relative; transform: rotate(-2.50deg); background: #0e0e0e; overflow: hidden; width: 110vw; left: -5vw; margin-top: -5vw; height: auto; z-index: 1000;}
.sectionRotation .section_inner{ transform: rotate(2.50deg); padding-top: 5vw; width: 110vw; margin-left: 4.5vw; position: relative;}

.sectionRotationBG{ transform: rotate(-2.50deg); position: absolute; height: calc(100% + 10vw); background: #000; overflow: hidden; width: 120vw; left: -10vw; margin: 0; top: -5vw;}
.sectionRotationBG.prodBG{ width: 120vw; left: -8vw; margin: 0; top: -5vw;}
.sectionRotationBG .section_inner{
/*background: url(../img/TeaserBG.jpg) top center / 100% auto no-repeat;*/
margin-top: 0vw; padding: 11vw 0; transform: translate(0, 0) rotate(2.50deg); height: calc( 100% + 10vw) ;/* background-attachment: fixed;*/
/*transition: 0.1s;*/
}
.sectionRotationBG .section_inner > div{
/*background: url(../img/TeaserBG.jpg) top center / 100% auto no-repeat;*/
margin-top: 0vw; transform: translate(0, 0); height: calc( 100vh + 10vw) ;
}
.sectionRotationBG .section_inner > div img{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform: translate3d(0,0,0); margin-top: 40%;
}
.storyPage .sectionRotationBG .section_inner > div img,
.onairPage .sectionRotationBG .section_inner > div img{ margin-top: 0%;}

.sectionRotationBG.prodBG .section_inner{ margin-left: 10vw; }
.sectionRotation_contents{ position: relative; padding: 3.125vw 0; z-index: 1000; }

.BgTwinContents_section .sectionRotationBG{ background: #670f1b; }
.BgTwinContents_section .sectionRotationBG .section_inner{
/*background: url(../img/originalContentsBG.jpg) top 10vw center / auto 100% no-repeat, #670f1b;*/ /*background-attachment: fixed;*/ }
.BgTwinContents_section .sectionRotationBG .section_inner > div{
background: /*url(../img/originalContentsBG.jpg) top -5vw center / 100% auto no-repeat,*/ #670f1b;
transform: translate(0, 0); height: calc( 100% + 10vw) ; margin-top: -20vw; 
}
.BgTwinContents_section .sectionRotationBG .section_inner > div img{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform: translate3d(0,0,0); margin-top: 0%;
}
.introPage .BgTwinContents_section .sectionRotationBG .section_inner > div img{ margin-top: -80%;}
.storyPage .BgTwinContents_section .sectionRotationBG .section_inner > div img,
.onairPage .BgTwinContents_section .sectionRotationBG .section_inner > div img{ margin-top: -40%;}
.youtubeBOX { position: relative; width: 100%; padding-top: 56.25%;}
.youtubeBOX iframe { 
  position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;
}




/* ==========================================================================
   PARTS
   ========================================================================== */

.slide-img img{
  display: block;
}



/* ==========================================================================
   TOP
   ========================================================================== */



.mainVisial_section{ position: relative; z-index: 1000; height: 140vw;}
.mainVisial_SLD{
  width: 100vw; opacity: 1;
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mainVisial_txt{ position: absolute; top: 0; left: 0vw; width: 100vw; height: 100%;z-index: 1000;}
/*.mainVisial_txt div{width: 26.666vw; position: absolute;}*/

.mainVisial_txtLeft{ left: -8vw; top: 24.3vw; }
.mainVisial_txtRight{ right: -8vw; top: 3.26vw; }

.mainVisial_txtLeft img,
.mainVisial_txtRight img{
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.0;
}

.mainVisial_txtRight.alphaIn img{
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1.0;
}
.mainVisial_txtLeft.alphaIn img{
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
  opacity: 1.0;
}

.mainVisial_txt clipPath{ stroke: none; }

.sectionTitle{background: url(../img/titleBG.png) center center / auto 100% no-repeat; height: 17.36vw; text-align: center; margin-bottom: 5.333vw; }
.sectionTitle img{ height: 14.63vw; width: auto; margin-top: 4.9vw; }

.title_section{ height: 56vw; position: relative; z-index: 1; margin-top: -5vw; }
.title_section .videoBG{  }
.videoBG{background: #000;}
.videoBG video{ position: absolute; height: 100%; width: auto; top: 0; left: 50%; transform: translateX( -50%); opacity: 0.3; }
.title_section .site_logo{ height: 24vw; position: absolute; top: 50%; left: 50%; transform: translateY( -50%) translateX(-50%) ;}
.title_section .site_logo img{ height: 100%; width: auto; }



.Teaser_section{ position: relative; z-index: 1000; /*margin-top: -5vw;*/ }



.videoBox{ width: 89.333vw; margin: 6.66vw auto 0; }
.videoBox video{ width: 100%; height: auto; }

.btnBox{ text-align: center; margin-top: 8vw; font-size: 0; }
.btnBox a{ color: #fff; display: inline-block; line-height: 1; font-size: 3.733vw; padding: 0.8em 2em; border: 1px solid #fff; }


.videoBG_Area{ position: relative; margin-top: -5vw; }
.videoBG_Area .videoBG{height: 100%;}


.mainCast_section{  }
.section{ padding: 10.6vw 5.8vw; position: relative; }
.section + .section{ padding: 0 5.8vw 10.6vw; }

.mainCast_section{ text-align: center; padding-top: 20vw; }
.mainCast_section p{ margin: 6.66vw auto 0; font-size: 0.6rem; }

.ShareSNS{ text-align: center; margin: 6.66vw auto 0; font-size: 0; }
.ShareSNS li{ width: 12.26vw; display: inline-block; margin: 0 3.33vw; }
.ShareSNS li a{ display: block; width: 12.26vw; height: 12.26vw; background: #fff;  width: 10vw; height: 10vw;}
.ShareSNS li a.tw{ background: url(../img/shareBtn_TW.png) center center / cover; }
.ShareSNS li a.line{ background: url(../img/shareBtn_LINE.png) center center / cover; }
.ShareSNS li a.fb{ background: url(../img/shareBtn_FB.png) center center / cover; }

.siteFooter{ background: url(../img/footerBG.jpg) top center / 100% auto; text-align: center; padding: 5vw 0 3.333vw; position: relative; z-index: 1010 }
.siteFooter p{font-size:2.666vw; margin-top: 2vw; font-family: sans-serif; }

.LinkSNS{ font-size: 0; margin-bottom: 3.5vw;  }
.LinkSNS li{ height: 7.2vw; margin: 0 2.5333vw; display: inline-block; }
.LinkSNS li a img{ height: 100%; width: auto; }

.copywright{ color: #646464; margin-top: 4vw; font-family: sans-serif; margin-left: 5.333vw; padding-bottom: 5.333vw; font-size: 2.666vw; position: relative; }
.copywright p{font-size:2.666vw; }
.para-item{ transform: translate3d(0, 0, 0); }
.para-item img{ transform: translate3d(0, 0, 0); }


@media screen and (min-width: 900px) {
.para-item{ display: none; }
  .mainVisial_section{ height: 56.25vw; }
  .mainVisial_txt div{width: 14.375vw;  top: 0vw;}
  .mainVisial_txtLeft{ left: 5vw; }
  .mainVisial_txtRight{ right: 5vw; }

  .section + .section{ padding: 0 5.8vw 4.375vw; }

  .title_section{ height: auto; }
  .title_section .videoBG{ height: auto }

  .videoBG video{ position: absolute; height: auto; width: 100%; top: 50%; left: 50%; transform: translateX( -50%) translateY( -50%); }
  .title_section .site_logo{ height: 20vw; }

  .sectionTitle{ background: url(../img/titleBG_pc.png) center center / auto 100% no-repeat; height: 7.875vw; padding-top: 1vw; margin-bottom: 4.37vw; margin-bottom: 0;}
  .sectionTitle img{ height: 9vw; width: auto; margin: 0 auto 0; }

  .sectionRotationBG .section_inner{ background: url(../img/introContentsBG_pc.jpg) top center / 100% auto no-repeat; background-attachment: fixed; margin-top: -3vw;}
  .BgTwinContents_section
  .sectionRotationBG .section_inner{ background: url(../img/originalContentsBG_pc.jpg) top 10vw center / 100% auto no-repeat; background-attachment: fixed; }

  .videoBox{ width: 52.5vw; margin: 2.5vw auto 0; }

  .btnBox{ text-align: center; margin-top: 3.125vw;}
  .btnBox a{ font-size: 1vw; padding: 0.8em 2em; }

  .sectionRotation_contents{ padding: 2.4vw 0; }
  .pc.inline{ display: inline; }
  p{ font-size: 1.25vw; line-height: 2.1 }

  .section{ padding: 16vw 12.5vw 5vw; position: relative; }

  .videoBG_Area .videoBG video { position: absolute; height: 100%; width: auto; }
  
  .mainCast_section p{ margin: 3.125vw auto 0; font-size: 1.25vw; }

  .ShareSNS { margin: 3.125vw auto 0;}
  .ShareSNS li{ width: 3.375vw; display: inline-block; margin: 0 0.875vw; }
  .ShareSNS li a{ display: block; width: 3.375vw; height: 3.375vw; background: #fff;}
  
  .siteFooter{ background: url(../img/footerBG.jpg) top center / auto 100%; text-align: center; padding: 2.875vw 0 0; height:9.6875vw;}
  .siteFooter p{font-size:0.6vw; margin-top: 1.5vw;}
  .LinkSNS{margin-bottom: 1.875vw; }
  .LinkSNS li{ height: 2vw; margin: 0 1.25vw; display: inline-block; font-size: 0;}

  .copywright{font-family: sans-serif; margin-left: 5.333vw; padding-bottom: 1.375vw; margin-top: 0; }
  .copywright p{  font-size: 0.6875vw;}

}




.underVisial_section{ height: 62.6vw; }
.underVisial_section h1{ width: 51.8vw; position: absolute; top: 50%; left: 50%; transform: translateX( -50%) translateY( -38%);font-size: 0;}
.underVisial_section figure{ font-size: 0; }

.videoBG{ font-size: 0; }
.videoBG_section{ position: relative; }
.videoBG_section video{ position: relative; width: 100%; height: auto }

.BgMoonContents_section{ background: url(../img/introContentsBG.jpg) top center / 100% auto no-repeat; position: relative; z-index: 1; padding: 10.6vw 5.8vw; }


.BgTwinContents_section{
  background: url(../img/originalContentsBG.jpg) top center / 100% auto no-repeat, #67111b; position: relative;
  padding: 8.4vw 5.3vw 28vw;
}
.contents_txtRead{ font-size: 4.8vw; line-height: 1.5; margin-top: 5.333vw; }
.contents_txtRead + p{ margin-top: 5.333vw; }

.BgTwinContents_section h3{ font-size: 4.8vw; text-align: center; margin-top: 5.333vw; line-height: 1; color: #cf525f;}
.blockTitle{ font-size: 4.8vw; text-align: center; margin-top: 5.333vw; line-height: 1;}
.writerBox{}
.writerBox figure{ width: 32vw; overflow: hidden; display: inline-block; vertical-align: top; margin-top: 4.666vw;}
.writer_date{ display: inline-block; vertical-align: top; margin-left: 4.8vw; width: 48vw; margin-top: 5.333vw; width: 100%; margin-left: 0;}
.writer_date ruby{ font-size: 6.666vw; margin-top: -2.6vw; display: block; }
.writer_date rt{ font-size: 36%; margin-bottom: -.5em; /*transform: translateY(.5em);*/ }

.writer_date p + p{ margin-top: 1vw; }


.novel{ margin-top: 4.666vw;}
.novelBox{ clear: both; margin-top: 13.333vw;}
.novelBox figure{ margin-top: 4.666vw;}

.inner960{ position: relative; z-index: 1000; text-align: left;}
.inner1080{ position: relative; z-index: 1000; }
.chart{ position: relative; z-index: 1000; }



@media screen and (min-width: 900px) {
  .inner960{ width: 62.5vw; margin: 0 auto; }
  .inner1080{ width: 67.5vw; margin: 0 auto; }

  .underVisial_section { height: 29.375vw;}
  .underVisial_section h1{ width: 27.75vw;}
  .BgMoonContents_section{ padding: 6.25vw 12.5vw 5vw;}

  .contents_txtRead{ font-size: 2.25vw; line-height: 1.5; margin-top: 4.375vw; }
  .contents_txtRead + p{ margin-top: 2.5vw; font-size: 1.25vw;  }

  .BgMoonContents_section{ background: url(../img/introContentsBG_pc.jpg) top center / 100% auto no-repeat; }
  .BgMoonContents_section p{  margin-right: auto; margin-left: auto; }

  .videoBG_section{ height: 38.125vw; height: 40vw;  overflow: hidden;}
  .videoBG_section .videoBG video { position: absolute; height: auto; width: 100vw; top: 50%; left: 50%; transform: translateX( -50%) translateY( -50%);}


  .BgTwinContents_section{ background: url(../img/originalContentsBG_pc.jpg) top -10vw center / 100% auto no-repeat, #67111b; position: relative; padding: 1vw 5.3vw 13vw;}
  .BgTwinContents_section h3{ font-size: 1.75vw; margin-top: 2.5vw; }
  .blockTitle{ font-size: 1.75vw; margin-top: 2.5vw; }
  .novel{ margin-top: 2vw;}
  .novelBox{ margin-top: 5vw;}
  .writerBox figure{margin-top: 3.125vw; width: 18.75vw; font-size: 0;}
  .writer_date{margin-top: 3.125vw; width: 38.75vw; margin-left: 0vw;}
  .writer_date ruby{ font-size: 3vw; }
  .novelBox figure { margin-top: 3.125vw;}
  .writer_date p + p{ margin-top: 0vw; }

}

.episodeArea{ background: #000; color: #fff; padding-top: 4.3vw; padding-bottom: 6.66vw }
.episodeArea .swiper-slide{ opacity: 0!important; }
.episodeArea .swiper-slide-active{ opacity: 1!important; }
/*.episodeTab{ display: none; }
.episodeTab.active{ display: block!important; }*/
.episodeBox{ background: #000; padding-top: 1vw;}
.episodeTitle{ text-align: center; font-size: 4.8vw;}

.episodeTitle.ruby{ margin-top: -0.7em; }
.episodeTitle rt{margin-bottom: -.5em; transform: translateY(.5em);}
.episodeFig{
  position: relative;
  margin-top: 5.3vw; font-size: 0;
  height: calc( (100vw - 10.6vw) / 16 * 9 );
}
.episodeFig img{height: calc( (100vw - 10.6vw) / 16 * 9 );}

.episodeTxt_Area{ margin-top: 5.3vw;  padding: 0 5.3vw 0 }
.episodeBtn{ text-align: center; font-size: 0; margin-top: 5.3vw; position: relative;}
.episodeBtn li{
  display: inline-block; background: #960c1a; border: 1px solid #960c1a;
  border-radius: 50%; width: 5.8vw; height: 5.8vw; line-height: calc( 5.8vw - 2px); text-align: center; font-size: 2.9vw;
  padding: 0; opacity: 1; letter-spacing: 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0px; outline: none;}
.episodeBtn li + li{margin-left: 2vw!important;}
.episodeBtn li.active{ background: none; }
.episodeBtn li.swiper-pagination-bullet-active{ background: none; }

.chapterBtnArea{ font-size: 0; margin-top: 2.66vw; }
.chapterBtn{
  display: inline-block; width: 27vw; border: 1px solid #fff; background: #fff; color: #960c1a; text-align: center; border-radius: 4px;
  font-size: 3.2vw; margin: 1.3vw; height: 8vw; line-height: calc(8vw - 4px); box-sizing: border-box;
}
.chapterBtn.active{ color: #fff; background: none; }

.broadcast{ width: 64.8vw; margin: 0 auto; display: block; }
.wowowBtn{ width: 54.13vw; margin: 6.66vw auto 0; display: block; }
.textCosn{ width: 54.4vw; margin: 10.6vw auto; display: block; }

@media screen and (min-width: 900px) {
  .story_txtBox{margin-top: 2.666vw;}
  .episodeArea{ background: #000; color: #fff; padding: 2.75vw 3.75vw 3.75vw; padding-bottom: 2.5vw; margin-top: 2.666vw; }
  .episodeTitle{ text-align: center; font-size: 2.125vw;}
  .episodeTitle.ruby{ margin-top: -0.55em; margin-bottom: -0.05em; }
  .episodeFig{ margin-top: 2.125vw; height: calc( (60vw - 7.5vw) / 16 * 9 ); }
  .episodeFig img{ height: calc( (60vw - 7.5vw) / 16 * 9 ); }
  .episodeTxt_Area { margin-top: 2vw; padding: 0; font-size: 1vw;}

  .episodeBtn li{  width: 2.25vw; height: 2.25vw; font-size: 1vw; line-height: calc(2.25vw - 2px); padding:  0;  }
  .episodeBtn li + li{margin-left: 2vw!important;}

  .chapterBtnArea{ font-size: 0; margin-top: 1.125vw; margin-right: -0.625vw; margin-right: -0.625vw;margin-left: -0.625vw; }
  .chapterBtn{
    display: inline-block; width: 10.8vw; border: 1px solid #fff; background: #fff; color: #960c1a; text-align: center; border-radius: 4px;
    font-size:1vw; margin: 0.53vw; height: 3vw; line-height: 3vw; box-sizing: border-box;
  }

  .broadcast{ width: 27.34vw; margin: 4.6875vw auto 0; display: block; }
  .wowowBtn{ width: 22.5vw; margin: 1.7vw auto 0; display: block; }
  .textCosn{ width: 22.5vw; margin: 5.625vw auto; display: block; }

}


.title{ font-size: 4.8vw; text-align: center; margin-top: 5.333vw; line-height: 1;}
.bd_article{ margin-top: 5.3vw ; }
.bdProdFig{ width: 40vw; float: left; margin-right: 4vw; }
.bd_article h1{ font-size: 4vw; padding: 0.3em 0.4em ; line-height: 1.4; background: rgba(255, 255, 255, 0.3); border-bottom: 1px solid #fff; margin-left: 44vw; }
.bdProdDate time{ font-size: 4vw; margin-top: 3vw; display: block;}

#tab01 .bd_article .sp h1{ width: 100%; margin-left: 0; margin-bottom: 4vw;}


.price{ margin-top: 3vw; font-size: 1.6vw; margin-left: 44vw; margin-bottom: 1em;   }
.price h2{ border: 1px solid #fff; padding: 0.08em 0.8em ; display: inline-block; }
.price p{ font-size: 2.6vw; line-height: 1.5;}

.price p + h2{ margin-top: 2.666vw; }

.detail{ font-size: 2vw; }
.detail p{ font-size: 2.666vw; margin-top: 2vw; line-height: 1.1;}


.detailFig{ background: #2b2b2b; margin-top: 4vw; padding: 2.66vw 1.33vw; text-align: center; font-size: 0;}
.detailFig figcaption{ font-size: 2.666vw; line-height: 1; }
.detailFig figure img{ margin-top: 2vw; height: 27vw; width: auto; }
.detailFig figure{padding: 0 1.33vw; display: inline-block; width: auto;}

.products04 .detailFig figure img{ margin-top: 3vw; height: auto; width: 100%; }
.products05 .detailFig figure img{ margin-top: 3vw; height: auto; width: 100%; }

.bd_article + .bd_article{ margin-top: 17.333vw; }
.rental_scl{ background: #383833; padding: 5.333vw; margin-top: 2.66vw;}
.rental_scl dl{ line-height: 1; font-size: 0; }
.rental_scl dl dt,
.rental_scl dl dd{ font-size: 3.2vw; display: inline-block; vertical-align: top; line-height: 1;}
.rental_scl dl dt{ width: 30%; }
.rental_scl dl dd{ width: 68%; }
.rental_scl dl dd + dt,
.rental_scl dl dd + dt + dd{ margin-top: 2.666vw; }
.rental_txt{ font-size: 2.666vw; margin-top: 2.66vw;}

@media screen and (min-width: 900px) {
  .title{font-size: 1.75vw; margin-top: 2.5vw;}

  .bd_article{ margin-top: 3.75vw; font-size: 0; }
  .bdProdFig{ width: 39.0625%; float: none; display: inline-block; vertical-align: top; margin-right: 3.125%;}
  .bdProdDate{ display: inline-block; width: 57%; vertical-align: top;}
  .bdProdDate.sp{ display: none;}
  .bd_article h1{ font-size: 2.125vw; font-size: 1.625vw; padding: 0.3em 0.4em 0.4em ; line-height: 1; background: rgba(255, 255, 255, 0.3); border-bottom: 1px solid #fff; margin-left: 0; }
  .bdProdDate time{ font-size: 1.625vw; margin-top: 1vw; }
  .price{ margin-top: 1vw; font-size: 1vw; margin-left: 0;}
  .price p{ font-size: 1vw; line-height: 1.5; margin-top: 0.5em;}
  .price p + h2{ margin-top: 1vw; }
  .detail{ font-size: 0.875vw; margin-top: 1vw; }
  .detail p{ font-size: 0.875vw; margin-top: 0.7vw; line-height: 1.4;}
  .price h2 { padding: 0.1em 0.8em 0.3em; font-size: 1vw; line-height: 1;}

  .detailFig{ margin-top: 1.875vw; padding: 2.5vw 1.875vw;}
  .detailFig figcaption{ font-size: 1vw; }
  .detailFig figure{ padding: 0 0.625vw; }
  .detailFig figure img{ margin-top: 0.625vw; height: 18vw }

  .bd_article + .bd_article{ margin-top: 5vw; }

  .rental_scl{ padding: 1.875vw; }
  .rental_txt { font-size: 0.875vw; margin-top: 2.5vw;}

  .rental_scl dl dt,
  .rental_scl dl dd{ font-size: 1.25vw; }
  .rental_scl dl dt{ width: 20%; }
  .rental_scl dl dd{ width: 78%; }
  .rental_scl dl dd + dt,
  .rental_scl dl dd + dt + dd{ margin-top: 1.25vw; }

}

@media screen and (max-width: 480px) {
 .price{ margin-top: 1vw; font-size: 1.8vw; margin-left: 0; margin-bottom: 3em;  }
	}

.character_section{ background: url(../img/introContentsBG.jpg) top center / 100% auto no-repeat; position: relative; z-index: 1; padding: 10.6vw 0 0; }
.characterList{ margin: 13.33vw 4vw 0; font-size: 0; }
.characterBox,
.characterBoxNoImg{
  margin: 2vw 0 0; padding: 0 2.666vw ; display: inline-block; box-sizing: border-box; width: 33.86vw; vertical-align: top; position: relative;}
.characterBox.characterBoxW{ width: 49.8%; margin: 0vw 0 0;   }
.characterBoxNoImg .characterName{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 30vw;}

.characterName{ text-align: center; font-size: 2.8vw; letter-spacing: -0.08em; margin-top: 1.333vw;  }
.characterName p{line-height: 1.4; font-size: 2.6vw; letter-spacing: -0.15em;}
.characterName span{ font-size: 0.54em }


@media screen and (min-width: 900px) {
  .chartMap{ padding: 0vw 0 3vw; margin: 3.75vw 3.4375vw 0;}
}


.gMenu_btn{ position: fixed; top: 0;  left: 0; width: 11.46vw; height: 11.46vw; background:  rgba( 0, 0 , 0, 0.6); display: block; z-index: 10000; cursor: pointer; }
.gMenu_btn span{ width: 58.14%; height: 0.5333vw; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: calc((100% - 58.14%) / 2); }
.gMenu_btn span:before,
.gMenu_btn span:after{ content: ""; display: block; position: absolute; width: 100%; height: 0.5333vw; background: #fff; }
.gMenu_btn span:before{ top: -1.6vw; }
.gMenu_btn span:after{ bottom: -1.6vw }

.close_btn{ position: fixed; top: 0;  left: 0; width: 11.46vw; height: 11.46vw; background:  rgba( 0, 0 , 0, 0.6); display: block; z-index: 10010; cursor: pointer;}
.close_btn span{ width: 58.14%; height: 2px; position: absolute; top: 50%; transform: translateY(-50%); left: calc((100% - 58.14%) / 2); }
.close_btn span:before,
.close_btn span:after{ content: ""; display: block; position: absolute; width: 100%; height: 2px; background: #fff; }
.close_btn span:before{ transform: rotate(45deg); }
.close_btn span:after{ transform: rotate(-45deg);}


.gMenu_nv{
  position: fixed; top: 0; left: 0; width: 100%; z-index: 10001;
  background: url(../img/menu_BG.jpg) top center / auto 110% , #000;
  text-align: center; height: 100vh; padding: 14.666vw 0; display: none;
}
.gMenu_nv nav li{ height: 4.26vw; position: relative;}
/*.gMenu_nv nav li.nav07{  height: 5.733vw; }*/
.gMenu_nv nav li img{ height: 100%; width: auto; }

.gMenu_nv nav li + li{ margin-top: 6.4vw; }
.gMenu_nv .LinkSNS { margin-top: 8vw;}

.gMenu_nv:before{ content: ""; height: 100%; width: 0; display: inline-block; vertical-align: middle;  }
.gMenu_nv_inner{ display: inline-block; vertical-align: middle; width: 80%;  }
.gMenu_nv .siteLogo{ width: 56.53vw; position: relative; height: 10vh; margin: 13.333vw auto 0;}
.gMenu_nv nav li a img{ opacity: 0.4; }
.gMenu_nv nav li a[href*=".html"] img{opacity: 1; cursor: pointer;}
.gMenu_nv nav li a[href*="twitter"] img{opacity: 1; cursor: pointer;}

.pageTop{ position: absolute; width: 11.2vw; background: #000; height: 9.31vw; right: 0; bottom: 36vw; z-index: 10000;}
.pageTop a{ display: block; width: 100%; height: 100%; position: relative; font-size: 0; }
.pageTop a:after,
.pageTop a:before{
  content: ""; width: 5.8vw; height: 2px; background: #fff; display: block;
  transform: translateX(-50%) translateY(-50%);
  position: absolute; top: 50%; left: 50%; 
}

.pageTop a:after{ transform: translateX(-50%) translateY(-50%) rotate( 45deg); left: 68%; }
.pageTop a:before{ transform: translateX(-50%) translateY(-50%) rotate( -45deg); left: 32%; }


.allVideoBG{ width: 100vw; height: 100vh; overflow: hidden; position: fixed; background: #000; z-index: 0;}
.allVideoBG video{height: 100vh; width: auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; opacity: 0.3;}

@media screen and (min-width: 900px) {

  .gMenu_btn{ width: 5.375vw; height: 5.375vw;}
  .gMenu_nv{background: url(../img/menu_BG.jpg) top center / auto 100% , #000; padding: 0;}
  .gMenu_nv nav{ width: 49.75vw; margin: 0 auto; font-size: 0;}
  .gMenu_nv nav li{ height: 1.5vw; display: inline-block; vertical-align: top; margin: 0 2.25vw; ;}

  .gMenu_btn span{ height: 4px; }
  .gMenu_btn span:before{ top: -12px; height: 4px;}
  .gMenu_btn span:after{ bottom: -12px; height: 4px;}

  /*.gMenu_nv nav li.nav07{  height: 1.875vw;  vertical-align: top; }*/
  .gMenu_nv nav li + li { margin-top: 0vw;}
  .gMenu_nv nav li + li:before{ content: ""; height: 1.875vw; width: 3px; background: #fff; position: absolute; left: calc(-2.25vw - 1px);  }
  .gMenu_nv nav li.nav05:before{ content: ""; display: none; }
  .gMenu_nv nav li.nav05,
  .gMenu_nv nav li.nav06,
  .gMenu_nv nav li.nav07,
  .gMenu_nv nav li.nav08 {margin: 3.125vw 2.6vw 0;}
  .gMenu_nv nav li + li.nav06:before,
  .gMenu_nv nav li + li.nav07:before,
  .gMenu_nv nav li + li.nav08:before{ left: calc(-2.6vw - 1px);  }
  .gMenu_nv nav li a{  }
  .gMenu_nv nav li img { display: block;}
  .gMenu_nv_inner { padding-top: 16vw;}

  .gMenu_nv .LinkSNS{ margin-top: 3.125vw; }
  .gMenu_nv .siteLogo { width: 33.125vw; margin: 9.375vw auto 0; height: auto;}

  .close_btn{ width: 5.375vw; height: 5.375vw;}


  .pageTop{ position: absolute; width: 4.25vw; background: #000; height: 2.5vw; right: 5vw; bottom: 14vw; z-index: 10000;}
  .pageTop a{ display: block; width: 100%; height: 100%; position: relative; font-size: 0; }
  .pageTop a:after,
  .pageTop a:before{ content: ""; width: 1.875vw; height: 2px;}

  .pageTop a:after{ left: 66%; }
  .pageTop a:before{ left: 35%; }

  .close_btn span{ height: 4px; }
.close_btn span:before,
.close_btn span:after{  height: 4px; }

}



.logo_area{ position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 1); z-index: 10000;transition: 1s; }
.logo_area.remove{ opacity: 0; }
.logo_area.remove.none{ display: none; }

.pageLogo{ position: absolute; top: 158vw; left: 50%; width: 90vw; transform: translate(-50%, -50%); z-index: 400; opacity: 0; transition: 0.2s ease-in-out;}
.pageLogo.active{ top: 160vw; width: 78vw; opacity: 1;}

.logo_area .pageLogo{ top: 50%; width: 60vw; opacity: 1; z-index: 10000;}
.logo_area .pageLogo img{ transform: translate(0, 0) scale(0.8); }



.logo_area.logoIn .pageLogo img{
  transform: translate(0px, 0px) scale(1.0);
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity:1;
}
.logo_area.logoIn2 .pageLogo img{
  transform: translate(0px, -240px) scale(1.0);
  -webkit-transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  opacity:1;
}

.logo_area.logoOut .pageLogo img{
  transform: translate(0px, 0px) scale(1.25);
  opacity:0;
}


.loader{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; transition: 1s;z-index: 11000; }
.loader.remove{ opacity: 0; }
.loader.remove.none{ display: none; }
.mov_area{ width: 100vw; height: 100vh; overflow: hidden; }
/*.mov_area video{
  width: 100vw; height: auto;
  position: fixed; left: 50%; top: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translateX( -50%) translateY( -50%);
}
*/
/*.mov_area video{
  width: 100vw; height: auto; object-fit: fill;
  position: fixed; left: 0; top: 0; min-width: 100vw; min-height: 100vh; width: 100vw; height: 100vh;
}*/
.waiting_area{ width: 100vw; height: 100vh; overflow: hidden; background: #222; position: absolute; top: 0; left: 0; transition: 0.7s; }
.waiting_area.remove{ opacity: 0; }


@media screen and (min-width: 900px) {
  .pageLogo{  top: 68vw; width: 50vw;}
  .pageLogo.active{ top: 68vw; width: 45vw;}

  .logo_area .pageLogo{ top: 50%; opacity: 1; width: 50vw;}
}

.fountainTextG_p{left: 50%; top: 50%; transform: translateX( -50%) translateY( -55%); display: block; position: absolute;}
#fountainTextG{
  width: auto;
  margin:auto;
  
}

.fountainTextG{
  color:rgb(0,0,0);
  color: #333;
  font-family:Arial;
  font-size:24px;
  text-decoration:none;
  font-weight:normal;
  font-style:normal;
  float:left;
  animation-name:bounce_fountainTextG;
    -o-animation-name:bounce_fountainTextG;
    -ms-animation-name:bounce_fountainTextG;
    -webkit-animation-name:bounce_fountainTextG;
    -moz-animation-name:bounce_fountainTextG;
  animation-duration:2.09s;
    -o-animation-duration:2.09s;
    -ms-animation-duration:2.09s;
    -webkit-animation-duration:2.09s;
    -moz-animation-duration:2.09s;
  animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
  transform:scale(.5);
    -o-transform:scale(.5);
    -ms-transform:scale(.5);
    -webkit-transform:scale(.5);
    -moz-transform:scale(.5);
}#fountainTextG_1{
  animation-delay:0.75s;
    -o-animation-delay:0.75s;
    -ms-animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
}
#fountainTextG_2{
  animation-delay:0.9s;
    -o-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
}
#fountainTextG_3{
  animation-delay:1.05s;
    -o-animation-delay:1.05s;
    -ms-animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
}
#fountainTextG_4{
  animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -ms-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
}
#fountainTextG_5{
  animation-delay:1.35s;
    -o-animation-delay:1.35s;
    -ms-animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
}
#fountainTextG_6{
  animation-delay:1.5s;
    -o-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
}
#fountainTextG_7{
  animation-delay:1.64s;
    -o-animation-delay:1.64s;
    -ms-animation-delay:1.64s;
    -webkit-animation-delay:1.64s;
    -moz-animation-delay:1.64s;
}




@keyframes bounce_fountainTextG{
  0%{
    transform:scale(1);
    color: #222;
  }

  100%{
    transform:scale(.5);
    color:rgb(255,255,255);
  }
}

@-o-keyframes bounce_fountainTextG{
  0%{
    -o-transform:scale(1);
    color:#222;
  }

  100%{
    -o-transform:scale(.5);
    color:rgb(255,255,255);
  }
}

@-ms-keyframes bounce_fountainTextG{
  0%{
    -ms-transform:scale(1);
    color:#222;
  }

  100%{
    -ms-transform:scale(.5);
    color:rgb(255,255,255);
  }
}

@-webkit-keyframes bounce_fountainTextG{
  0%{
    -webkit-transform:scale(1);
    color:#222;
  }

  100%{
    -webkit-transform:scale(.5);
    color:rgb(255,255,255);
  }
}

@-moz-keyframes bounce_fountainTextG{
  0%{
    -moz-transform:scale(1);
    color:#222;
  }

  100%{
    -moz-transform:scale(.5);
    color:rgb(255,255,255);
  }
}




.mainVisial_SLD .swiper-slide img{
  -webkit-transition: all 1.0 cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.1,1.1);
  opacity: 0.0;
}
.mainVisial_SLD .swiper-slide-prev img{
  -webkit-transition: all 1.0 cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.1,1.1);
  opacity: 0.0;
}
.mainVisial_SLD .swiper-slide-active img{
  -webkit-transition: all 4.0s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 4.0s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(1.01,1.01);
  opacity: 1.0;
}
.mainVisial_SLD .swiper-slide-next img{
  transform: scale(1.25,1.25);
  opacity: 1.0;
}
.mainVisial_SLD .swiper-slide.enIn img{
  transform: scale(1.25,1.25);
  opacity: 1.0;
}


/*

.logoOut {
  transform: translate(0px, 0px) scale(1.25);
  opacity:0;
}
.logoIn {
  transform: translate(0px, 0px) scale(1.0);
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity:1;
}
.logoIn2 {
  transform: translate(0px, -240px) scale(1.0);
  -webkit-transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  opacity:1;
}*/

.topScaleDownOut {
  transform: scale(1.25,1.25);
  opacity: 1.0;
}
.topScaleDownIn {
  -webkit-transition: all 4.0s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 4.0s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(1.0,1.0);
  opacity: 1.0;
}
.topScaleDownIn2 {
  -webkit-transition: all 1.0 cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.1,1.1);
  opacity: 0.0;
}


.alphaOut {
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.0;
}
.alphaIn {
  -webkit-transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1.0;
}







  .txt01Area{
    padding: 5vw; display: inline-block; position: absolute; top: 20vw; right: -5vw; /*filter:
    drop-shadow(0vw 0vw 3vw rgb(255, 255, 255)); filter: glow(color=#ffffff,strength=5px);*/
    /*transform: translateZ(0);*/ height: 67.333vw;
  }
  .txt01{
    width: 8.5333vw; /*filter: drop-shadow(0vw 0vw 3vw rgb(255, 255, 255)); filter: glow(color=#ffffff,strength=5px);*/
    /*transform: translateZ(0);*/ height: 100%;
  }

  .mainsld-texts { position: absolute; bottom: 0; left: 0; width: 100%}
  .txt01 g g{
    /*transform: translateZ(0);*/
    -webkit-transition: all 1.0s /*cubic-bezier(0.25, 0.46, 0.45, 0.94)*/;
     transition: all 1.0s /*cubic-bezier(0.25, 0.46, 0.45, 0.94)*/;
     opacity: 0.0;
  }
  .txt01Area.alphaIn g g{ opacity: 1.0;}
  .txt01 g.txt01Box1 g{ transition-delay: 0s; animation-delay: 0s;} 
  .txt01 g.txt01Box2 g{ transition-delay: .2s; animation-delay: .1s;}
  .txt01 g.txt01Box3 g{ transition-delay: .4s; animation-delay: .2s;}
  .txt01 g.txt01Box4 g{ transition-delay: .6s; animation-delay: .3s;}
  .txt01 g.txt01Box5 g{ transition-delay: .8s; animation-delay: .4s;}
  .txt01 g.txt01Box6 g{ transition-delay: 1.0s; animation-delay: .5s;}
  .txt01 g.txt01Box7 g{ transition-delay: 1.2s; animation-delay: .6s;}



  .txt02Area{
    padding: 5vw; display: inline-block; position: absolute; top: 40vw; left: -5vw;
    height: 66.8vw;
    /*transform: translateZ(0);*/
  }
  .txt02{
    width: 8.5333vw; height: 100%;
    /*transform: translateZ(0);*/
  }
  .txt02 g g{
    /*transform: translateZ(0);*/
    -webkit-transition: all 1.0s /*cubic-bezier(0.25, 0.46, 0.45, 0.94)*/;
     transition: all 1.0s /*cubic-bezier(0.25, 0.46, 0.45, 0.94)*/;
     opacity: 0.0;/*filter: drop-shadow(0vw 0vw 3vw rgb(255, 255, 255)); filter: glow(color=#ffffff,strength=5px);*/
  }
  .txt02Area.alphaIn g g{ opacity: 1.0;}
  .txt02 g.txt02Box1 g{ transition-delay: 0s; animation-delay: 0s;} 
  .txt02 g.txt02Box2 g{ transition-delay: .2s; animation-delay: .1s;}
  .txt02 g.txt02Box3 g{ transition-delay: .4s; animation-delay: .2s;}
  .txt02 g.txt02Box4 g{ transition-delay: .6s; animation-delay: .3s;}
  .txt02 g.txt02Box5 g{ transition-delay: .8s; animation-delay: .4s;}
  .txt02 g.txt02Box6 g{ transition-delay: 1.0s; animation-delay: .5s;}
  .txt02 g.txt02Box7 g{ transition-delay: 1.2s; animation-delay: .6s;}



  @media screen and (min-width: 900px) {
  .mainVisial_txt .txt01Area{ padding: 5vw; display: inline-block; position: absolute; top: 2.75vw; right: 5.4vw; width: 15.125vw; height: 49.9375vw;}
  .txt01{ width: 5.125vw; height: 100%; filter: drop-shadow(0vw 0vw 3vw rgb(255, 255, 255));}
  .mainVisial_txt .txt02Area{ padding: 5vw; display: inline-block; position: absolute; top: 2.75vw; left: 5.4vw; width: 15.125vw; height: 48.8125vw;}
  .txt02{ width: 5.125vw; height: 100%; filter: drop-shadow(0vw 0vw 3vw rgb(255, 255, 255));}

  }




.chartMap{ font-size: 0; position: relative; }
.chartNav{ margin: 0 1.333vw; font-size: 0; padding: 10vw 0 10vw; background: #000;}
.chartNavBtn{ padding: 0 0.2666vw; width: 20%; display: inline-block;}

.chartModalArea{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000;  display: none;}
.chartModalArea.on{ display: block; }
.chartOverlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8);  }

.chartModalAreaInner{ position: absolute; top: 50%; left: 0; transform: translate( 0, -50%); }
.chartModal{height: 110.666vw; max-height: 100vh; display: none;}
.chartModal.on{ display: block; }
.chartModal01{ background: url(../img/modal01bg.jpg) top center / auto 100%;  }
.chartModal02{ background: url(../img/modal02bg.jpg) top center / auto 100%;  }
.chartModal03{ background: url(../img/modal03bg.jpg) top center / auto 100%;  }
.chartModal04{ background: url(../img/modal04bg.jpg) top center / auto 100%;  }
.chartModal05{ background: url(../img/modal05bg.jpg) top center / auto 100%;  }
.chartModalTtl{ height: 28.8vw; text-align: center; }
.chartModalTtl img{ height: 100%; width: auto; }

.chartModalImg{ margin-top: -5.3333vw; padding: 0 5.3333vw; }
.chartModalTxt{ padding: 5.3333vw; }

.chartClose{ width: 7.2vw; height: 7.2vw; background: #000; top: 0; right: 0; position: absolute; z-index: 10010; }
.chartClose span{ width: 7.2vw; height: 7.2vw; }
.chartClose span:before,
.chartClose span:after{
  content: "";
  height: 1px; background: #fff; width: 62.962%; position: absolute; top: 50%; left: 50%;
}
.chartClose span:before{ transform: translate( -50%, -50%) rotate( 45deg); }
.chartClose span:after{transform: translate( -50%, -50%) rotate( -45deg); }

.chartNavBtnImg{ position: absolute; opacity: 1; width: 4.8vw; height: 4.8vw; display: block; cursor: pointer;}

.chartNavBtnImg01{background: url(../img/kamon01_off.png) center center / cover; right: 1.25vw; top: 1.25vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg02{background: url(../img/kamon02_off.png) center center / cover; left: 1.25vw; top: 40.25vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg03{background: url(../img/kamon03_off.png) center center / cover; right: 1.25vw; top: 40.25vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg04{background: url(../img/kamon04_off.png) center center / cover; left: 1.25vw; top: 1.25vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg05{background: url(../img/kamon05_off.png) center center / cover; right: 1.25vw; top: 58vw; width: 5.25vw; height: 5.25vw;}

.chartModalBtn{ position: absolute; opacity: 0; width: 1vw; height: 1vw; display: block; cursor: pointer; background: rgba(255, 255, 255, 0.5); transition: 0.3s;}
.chartModalBtn:hover{ opacity: 0.2; }
.chartModalBtn-ran{ left: 49.0625vw; top: 18vw; width: 13.125vw; height: 16.25vw; }
.chartModalBtn-wayushen{ left: 30.875vw; top: 41.625vw; width: 13.125vw; height: 16.25vw; }
.chartModalBtn-ran1{ left: 49.12vw; top: 2.3vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ran2{ left: 59.2vw; top: 2.3vw; width: 7.375vw; height: 9vw;  }
.chartModalBtn-ran3{ left: 75.625vw; top: 22.6875vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-ran4{ left: 68.5vw; top: 7vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-ran5{ left: 79.75vw; top: 7vw; width: 7.375vw; height: 9vw;  }
.chartModalBtn-jan1{ left: 3.75vw; top: 46.75vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jan2{ left: 17.3vw; top: 46.75vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jan3{ left: 3.75vw; top: 66.25vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jan4{ left: 17.3vw; top: 66.25vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-nie1{ left: 48.925vw; top: 41.625vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-nie2{ left: 62.625vw; top: 41.625vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-wen1{ left: 34.875vw; top: 20.78vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-wen2{ left: 34.875vw; top: 2.15vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-wen3{ left: 19vw; top: 2.15vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-wen4{ left: 14.875vw; top: 23vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-wen5{ left: 2.125vw; top: 23vw; width: 11.5vw; height: 6.5vw; }
.chartModalBtn-wen6{ left: 23.5vw; top: 23vw; width: 10.125vw; height: 6.5vw; }
.chartModalBtn-jin1{ left: 48.925vw; top: 59.5vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jin2{ left: 62.625vw; top: 59.5vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jin3{ left: 76.25vw; top: 59.5vw; width: 9.25vw; height: 11.25vw; }
.chartModalBtn-jin4{ left: 65.15vw; top: 76.2vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-jin5{ left: 43vw; top: 76.2vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-jin6{ left: 51.25vw; top: 80.625vw; width: 10.5vw; height: 4.75vw; }
.chartModalBtn-ext1{ left: 1vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ext2{ left: 10.75vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ext3{ left: 21.25vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ext4{ left: 73.125vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ext5{ left: 31.75vw; top: 94.1875vw; width: 7.8125vw; height: 5vw; }
.chartModalBtn-ext6{ left: 42.6275vw; top: 94.1875vw; width: 7.8125vw; height: 5vw; }
.chartModalBtn-ext7{ left: 52.3125vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }
.chartModalBtn-ext8{ left: 62.875vw; top: 92.1875vw; width: 7.375vw; height: 9vw; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.chartNavBtnImg02{background: url(../img/kamon02_off.png) center center / cover; left: 1.25vw; top: 43vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg03{background: url(../img/kamon03_off.png) center center / cover; right: 1.25vw; top: 43vw; width: 5.25vw; height: 5.25vw;}
.chartNavBtnImg05{background: url(../img/kamon05_off.png) center center / cover; right: 1.25vw; top: 63vw; width: 5.25vw; height: 5.25vw;}
	}

.chartNavBtnImg01:hover{background: url(../img/kamon01_on.png) center center / cover;}
.chartNavBtnImg02:hover{background: url(../img/kamon02_on.png) center center / cover;}
.chartNavBtnImg03:hover{background: url(../img/kamon03_on.png) center center / cover;}
.chartNavBtnImg04:hover{background: url(../img/kamon04_on.png) center center / cover;}
.chartNavBtnImg05:hover{background: url(../img/kamon05_on.png) center center / cover;}


@media screen and (min-width: 900px) {
  .chartNav{ display: none; }
  .chartClose{ width: 3.375vw; height: 3.375vw; background: #000; top: 0; right: 0; position: absolute; }

  .chartModalAreaInner{width: 100%;}
  .chartModal{height: 830px; height: auto; width: 100%;}
  .chartModalImg{ width: 60vw; margin: 0 auto; padding: 0; }
  .chartModalTtl{ height: 13.4375vw; }
  .chartModal01 { background: url(../img/modal01bg.jpg) cover;}
  .chartModalTxt{ width: 60vw; margin: 1.875vw auto 0; padding: 0; min-height: 13.75vw;}
}


.musicDirectedBox figure{padding: 0 8vw;}

@media only screen and (max-width: 750px) {}
@media screen and (min-width: 900px) {
  .musicDirectedBox{ font-size: 0; margin-top: 3.75vw; }
  .musicDirectedBox figure{ width: 50%; padding: 0 1.25vw 0 0; display: inline-block; }
  .musicDirectedBox .writer_date{ width: auto; display: inline-block; margin-top: 0; padding: 0 0 0 1.25vw; margin-top: -1.2%;}
  .musicDirectedBox .writer_date ruby{ font-size: 2.875vw; margin-top: 0; }
}



.listBtnArea{ text-align: center; margin-bottom: 10vw; }
.listBtn a{ font-size: 3.7333vw; display: inline-block;; border: 1px solid #fff; padding: 0.92em 3.35em; line-height: 1; color: #fff;  }

.characterSlider{ margin-bottom: 8vw; }
.castModalAreaInner{ position: relative; z-index:  }
/*.chartModalAreaInner{ position: absolute; top: 50%; left: 0; transform: translate( 0, -50%); }*/
.chartModalArea{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000;  display: none; overflow: scroll;}
.chartModalArea.on{ display: block; }

.castModalSlider{display: none;}
.castModalSlider.on{ display: block; }
.castModalSlider .swiper-container { width: 100%; height: auto;}
.castModalSlider .swiper-wrapper{ overflow: hidden; }


.castModalTtl{ font-size: 8vw;}

.castModal-ran .castModalTtl{ color: #6285a2;}
.castModal-ext .castModalTtl{ color: #000;}
.castModal-jin .castModalTtl{ color: #a68a58;}
.castModal-nie .castModalTtl{ color: #424242;}
.castModal-wen .castModalTtl{ color: #650d05;}
.castModal-way .castModalTtl{ color: #584672;}

.castModalTtl > ruby{ text-shadow:0px 0px 5px #fff, 0px 0px 2px #fff, 0px 0px 3px #fff, 0px 0px 1px #fff;}
.castModalTtl ruby span{display: block;}
.castModalTtl rt{ font-size: 0.38em; }
.castModalHeader{ text-align: center; line-height: 1; padding: 4vw 0;}
.castModal-ran .castModalHeader{ background: #3a719b; }
.castModal-ext .castModalHeader{ background: #000; }
.castModal-jin .castModalHeader{ background: #a68a58;}
.castModal-nie .castModalHeader{ background: #424242;}
.castModal-wen .castModalHeader{ background: #650d05;}
.castModal-way .castModalHeader{ background: #584672;}

.castName{ font-size: 0.7em; display: inline-block;text-shadow:0px 0px 2px rgba(255, 255, 255, 0.8), 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 0px 1px rgba(255, 255, 255, 0.8);}
.castName rt{letter-spacing: -0.05em; font-size: 0.5em; text-align: center;}

.castModalContents{ padding: 5.3vw; }
.castModalTxtArea{  padding: calc( 2.666vw - 0.375em ) 2.666vw; border: 1px solid #fff;}
div + .castModalTxtArea{ margin-top: 5.3vw;}
.castModal-ran .castModalContents{ background: url(../img/castModalBg01.jpg ) top center / 100% auto; }
.castModal-ext .castModalContents{ background: url(../img/castModalBg-ext.jpg ) top center / 100% auto; }
.castModal-jin .castModalContents{ background: url(../img/castModalBg-jin.jpg ) top center / 100% auto; }
.castModal-nie{ background: url(../img/castModalBg-nie.jpg ) top center / cover; }
/*.castModal-nie .castModalContents{ background: url(../img/castModalBg-nie.jpg ) top center / 100% auto; }*/
.castModal-way{ background: url(../img/castModalBg-wayushen_pc.jpg ) top center / cover; }
.castModal-wen{ background: url(../img/castModalBg-wen_pc.jpg ) top center / cover; }



.castModal figure{ font-size: 0; }
.castModalActerTxtBox{ background: rgba(63, 76, 87, 0.7); padding: calc( 2.666vw - 0.375em ) 2.666vw;}
.castModal-jin .castModalActerTxtBox{ background: rgba(138, 106, 48, 0.7);}
.castModal-way .castModalActerTxtBox{ background: rgba(89, 73, 117, 0.7);}
.castModal-wen .castModalActerTxtBox{ background: rgba(100, 41, 36, 0.7);}


div + .castModalActerTxtBox{ margin-top: 5.3vw; }
.castModalActerTxtBox h2{ font-size: 3.2vw; }
div + .castModalVideo{ margin-top: 5.3vw; }
.castModalVideo video{ width: 100%; height: auto; }
.castModalActerFamilyName{ height: 19.333vw; width: auto; text-align: center; margin: 5.3vw auto; }
.castModalActerFamilyName img{ height: 100%; width: auto; }

.swiper-button-prev{ position: fixed; left: 0; top: calc(100vh); margin: 0;  transform: translate(0, -100%); transition: 0.3s; width: 12.266vw; height: 12.266vw; background: #000; }
.swiper-button-prev:after{ content: ""; width: 30%; height: 30%; position: absolute; border-left: 1px solid #fff; border-bottom: 1px solid #fff;transform: rotate(45deg); margin-left: 0.5vw;}
.swiper-button-next{ position: fixed; right: 0; top: calc(100vh); margin: 0; transform: translate(0, -100%); transition: 0.3s; left: auto; width: 12.266vw; height: 12.266vw; background: #000;}
.swiper-button-next:after{ content: ""; width: 30%; height: 30%; position: absolute; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-135deg); margin-right: 0.5vw;}

.swiper-button-prev:focus,
.swiper-button-next:focus{ outline: none; }

.ran .swiper-button-next,
.ran .swiper-button-prev{ background: rgba( 32, 98, 149, 0.7); }

.way .swiper-button-next,
.way .swiper-button-prev{ background: rgba( 97, 73, 137, 0.7); }

.wen .swiper-button-next,
.wen .swiper-button-prev{ background: rgba( 98, 21, 16, 0.7); }

.nie .swiper-button-next,
.nie .swiper-button-prev{ background: rgba( 23, 39, 37, 0.7); }

.jin .swiper-button-next,
.jin .swiper-button-prev{ background: rgba( 132, 100, 42, 0.7); }

.ext .swiper-button-next,
.ext .swiper-button-prev{ background: rgba( 0, 0, 0, 0.7); }

.chartClose {
    width: 7.2vw;
    height: 7.2vw;
    background: #000;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 100;
}


@media only screen and (min-width: 900px) {
  .castModal{ font-size: 0; }
  .castModalImg{ height: 100vh; display: inline-block; width: 47.5vw; }
  .castModalImg img{ height: 100%; width: auto; opacity: 0;}
  .castModalImg{ background: url(../img/castMNodalImg001.jpg) center center / cover; }
  .castModal_ran4 .castModalImg{ background: url(../img/castModalImg-ran4.jpg) center center / cover; }
  .castModal_jin1 .castModalImg{ background: url(../img/castModalImg-jin1.jpg) center center / cover; }
  .castModal_nie1 .castModalImg{ background: url(../img/castModalImg-nie1.jpg) center center / cover; }
  .castModal_way .castModalImg{ background: url(../img/castModalImg-wayushen.jpg) center center / cover; }
  .castModal_wen1 .castModalImg{ background: url(../img/castModalImg-wen1.jpg) center center / cover; }
  .castModal_ext1 .castModalImg{ background: url(../img/castModalImg-ext1.jpg) center center / cover; }
  .castModal_ext3 .castModalImg{ background: url(../img/castModalImg-ext3.jpg) center center / cover; }

  #castModalRan01 .castModalImg{ background: url(../img/castModalImg-kosoran1.jpg) center center / cover; }
  #castModalWay01 .castModalImg{ background: url(../img/castModalImg-unmu1.jpg) center center / cover; }
  #castModalRan02 .castModalImg{ background: url(../img/castModalImg-kosoran2.jpg) center center / cover; }
  #castModalRan03 .castModalImg{ background: url(../img/castModalImg-kosoran3.jpg) center center / cover; }
  #castModalRan04 .castModalImg{ background: url(../img/castModalImg-kosoran4.jpg) center center / cover; }
  #castModalRan05 .castModalImg{ background: url(../img/castModalImg-kosoran5.jpg) center center / cover; }
  #castModalRan06 .castModalImg{ background: url(../img/castModalImg-kosoran6.jpg) center center / cover; }
  #castModalWay02 .castModalImg{ background: url(../img/castModalImg-unmu2.jpg) center center / cover; }
  #castModalWay03 .castModalImg{ background: url(../img/castModalImg-unmu3.jpg) center center / cover; }
  #castModalWay04 .castModalImg{ background: url(../img/castModalImg-unmu4.jpg) center center / cover; }
  #castModalWay05 .castModalImg{ background: url(../img/castModalImg-unmu5.jpg) center center / cover; }
  #castModalNie01 .castModalImg{ background: url(../img/castModalImg-nie1.jpg) center center / cover; }
  #castModalNie02 .castModalImg{ background: url(../img/castModalImg-nie2.jpg) center center / cover; }
  #castModalWen01 .castModalImg{ background: url(../img/castModalImg-kizan1.jpg) center center / cover; }
  #castModalWen02 .castModalImg{ background: url(../img/castModalImg-kizan2.jpg) center center / cover; }
  #castModalWen03 .castModalImg{ background: url(../img/castModalImg-kizan3.jpg) center center / cover; }
  #castModalWen04 .castModalImg{ background: url(../img/castModalImg-kizan4.jpg) center center / cover; }
  #castModalJin01 .castModalImg{ background: url(../img/castModalImg-ranryou1.jpg) center center / cover; }
  #castModalJin02 .castModalImg{ background: url(../img/castModalImg-ranryou2.jpg) center center / cover; }
  #castModalJin03 .castModalImg{ background: url(../img/castModalImg-ranryou3.jpg) center center / cover; }
  #castModalJin04 .castModalImg{ background: url(../img/castModalImg-ranryou4.jpg) center center / cover; }
  #castModalJin05 .castModalImg{ background: url(../img/castModalImg-ranryou5.jpg) center center / cover; }
  #castModalExt01 .castModalImg{ background: url(../img/castModalImg-other1.jpg) center center / cover; }
  #castModalExt02 .castModalImg{ background: url(../img/castModalImg-other2.jpg) center center / cover; }
  #castModalExt03 .castModalImg{ background: url(../img/castModalImg-other3.jpg) center center / cover; }
  #castModalExt04 .castModalImg{ background: url(../img/castModalImg-other4.jpg) center center / cover; }
  #castModalExt05 .castModalImg{ background: url(../img/castModalImg-other5.jpg) center center / cover; }
  #castModalExt06 .castModalImg{ background: url(../img/castModalImg-other6.jpg) center center / cover; }



































  .chartClose{ width: 3.375vw; height: 3.375vw; background: #000; top: 0; right: 0; position: absolute; }
  
  .castModalContents{
    display: inline-block;
    width: calc(100vw - 100vh / 6 * 5);
    width: calc( 100vw - 47.6vw); vertical-align: top; padding:1.875vw 2.5vw;
    height: 100vh; position: relative;
  }
  .castModalContentsScl{ overflow-y: scroll; margin-top: 1.25vw; padding: 0 10px 1.25vw 0; height: calc( 100vh - 52.4vw * 0.5625 - 52.4vw * 0.112 - 1.875vw - 1.25vw) }
  .castModalVideo{ position: absolute; left: 0; bottom: 0; width: 100%; }
  .castModalTtl{ font-size: 3vw; line-height: 1; }
  .castMeta{
    margin-top: 0; font-size: 0.875vw;
    display: inline-block; width: 35%; vertical-align: top; min-width: 150px;}
  .castMeta p{ font-size: 0.875vw; }
  .castModalTxtArea { padding: 1vw 1.25vw; font-size: 0.875vw; display: inline-block; width: 64%; vertical-align: top;}
  .castModalPtn02 .castModalTxtArea { width: 100%; }
  div + .castModalTxtArea{ margin-top: 0; }
  .castModalTxtArea p{font-size: 0.875vw; }
  div + .castModalActerTxtBox{ margin-top: 1.25vw; }
  div + .castModalVideo{ margin-top: 1.25vw; }
  .castModalActerTxtBox{ padding: 1vw 1.25vw; }
  .castModalActerTxtBox h2{ font-size: 1vw; }
  .castModalActerTxt{font-size: 0.875vw;}



  .castModalActerFamilyName{ height: 9.0625vw; position: absolute; bottom: 2vw; margin: 0;}
  .swiper-button-prev{ width: 4.125vw; height: 4.125vw;}
  .swiper-button-next{ width: 4.125vw; height: 4.125vw;}

}


/*スクロールバー全体*/
.castModalContentsScl::-webkit-scrollbar {
    width: 8px;
}
/*スクロールバーの軌道*/
.castModalContentsScl::-webkit-scrollbar-track {
  border-radius: 0px;
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 1);
}

/*スクロールバーの動く部分*/
.castModalContentsScl::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0px;
  box-shadow:0 0 0 0px rgba(255, 255, 255, .3);
}

.castModal-ran .castModalContentsScl::-webkit-scrollbar-thumb { background-color: #222f35}

.slidLoad{
  position: absolute; top: 0 ;left: 0; width:  0; overflow: hidden;
  height: 100vh; background: #000; z-index: 10020; transition: 0.5s;
}
.slidLoad.start{ width: 100vw; }
.slidLoad.out{ left: auto; right: 0; width: 0; }

.ran .slidLoad{ background: #164569; }
.way .slidLoad{ background: #584672; }
.wen .slidLoad{ background: #672620; }
.nie .slidLoad{ background: #4f5857; }
.jin .slidLoad{ background: #ad9361; }
.ext .slidLoad{ background: #000; }

.familyLogo{
  position: absolute; top: 50%; left: 50%; width: 32vw; height: 32vw; transform: translate(-50%, -50%); transition: 0.5s;  margin-left: 50vw;
}
.slidLoad.start .familyLogo{ margin-left: 0;}
.slidLoad.start.out .familyLogo{ margin-left: -50vw;}

.ran .familyLogo{ background: url(../img/loadingKamon-ran.png) center center / 100% 100% no-repeat; }
.way .familyLogo{ background: url(../img/loadingKamon-way.png) center center / 100% 100% no-repeat;  }
.wen .familyLogo{ background: url(../img/loadingKamon-wen.png) center center / 100% 100% no-repeat;  }
.nie .familyLogo{ background: url(../img/loadingKamon-nie.png) center center / 100% 100% no-repeat;  }
.jin .familyLogo{ background: url(../img/loadingKamon-jin.png) center center / 100% 100% no-repeat;  }
.ext .familyLogo{ display: none; }


.dictionaryNav ul{ font-size: 0; margin: 0 -0.372%; }
.dictionaryNav li{ width: 19.9%; display: inline-block; padding: 0.372%;}
.dictionaryNav li a{
  background: #fff; color: #000; text-align: center; position: relative;
  width: 100%; display: block; border-radius: 2px; font-size: 0.7rem;
  padding: 0 0 17%;
}
.dictionaryNav li a:after {
    content: ""; width: 10%; height: 0; padding-top: calc(10% - 1px);
    display: block; border-right: 1px solid #000; border-bottom: 1px solid #000; position: absolute;
    bottom: 20%; left: 50%; transform: translate(-50%, 0) rotate(45deg);
}

.dictionaryListTitle{ margin-top: 5.333vw; }
.dictionaryListContents{ font-size: 0; margin: 0 -1.333vw; }
.dictionaryContentBox{ width: 49.9%; padding: 1.333vw; display: inline-block; box-sizing: border-box;}
.dictionaryContentBox span{ border: 1px solid #fff; display: block; width: 100%; text-align: center; color: #fff; font-size: 3.2vw;}

.dictionaryModalSlider { position: absolute; top: 50%; transform: translateY( -50%); width: 100vw; }
.dictionaryModalContentBox{ background: #232323; padding: 10.6666vw 5.333vw 13.333vw; }
.dictionaryModalContentBoxTitle{ text-align: center; font-size: 7.46vw; }

.dictionaryModalSlider .swiper-button-prev{ position: absolute; right: auto; left: 0; top: auto; bottom: 0; transform: translate(0, 0); }
.dictionaryModalSlider .swiper-button-next{ position: absolute; right: 0; top: auto; bottom: 0; transform: translate(0, 0); }



@media only screen and (min-width: 900px) {
  .dictionaryNav li{ width: 9.9%; display: inline-block; padding: 0.372%;}
  .dictionaryNav li a{ font-size: 0.3rem; }
  .dictionaryListContents { margin: 0 -0.8163%;}
  .dictionaryContentBox { width: 24.9%; padding: 0.8163%;}
  .dictionaryList{ margin-top: 3.75vw;}
  .dictionaryContentBox span { font-size: 0.3rem; padding: 2.8%;}
  .dictionaryListTitle { margin-top: 1.875vw; font-size: 0.3rem;}

  .dictionaryModalContentBoxTitle{ font-size: 3.5vw; }
  .dictionaryModalContentBox { padding: 6.25vw 6.35vw 9.375vw;}

  .familyLogo{width: 11.25vw; height: 11.25vw; }
}



.musicVideoSldBox video{ width: 100%; }
.musicVideoNav{ margin: 0 -1.333vw;  font-size: 0;}
.musicVideoNavBtn{ width: 100%; padding: 0 1.333vw; margin-top: 2.666vw; display: inline-block; box-sizing: border-box; }
.musicVideoNavBtn span{
  color: #960c1a; display: block; background: #fff; border: 1px solid #fff; border-radius: 2px; text-align: center; font-size: 3vw;
  line-height: 1.4; padding: 1vw 0 1.3vw;
}
.musicVideoNavBtn.active span{ background: none; color: #fff; }

@media only screen and (min-width: 900px) {
  .musicVideoNavBtn { width: 49.9%; padding: 0 0.625vw; margin-top: 1.25vw;}
  .musicVideoNavBtn span{ font-size: 1vw; padding: 0.4vw 0 0.6vw;}
}



.tbNav{
  width: 100%;
  border-bottom: 1px solid #575757;
}
.tbNav ul{
  display: flex;
  padding: 0 3vw;
}
.tbNavTab{
  width: calc( 50% - 1px);
  background: #232323;
  font-size: 1rem;
  height: 2.55em;
  line-height: 2.55em;
  text-align: center;
  border-radius: 2px 2px 0 0;
}
.tbNavTab.active{
  background: #575757;
}
.tbNavTab + .tbNavTab{
  margin-left: 2px;
}


@media only screen and (min-width: 900px) {
  .tbNav ul{
    padding: 0 23.33%;
  }
  .tbNavTab{
    margin-top: 3.88vw;
    font-size: 18px;
  }
}


.tab{ display: none; opacity: 0;}
.tab.on{ display: block; opacity: 1;}

@media only screen and (min-width: 900px) {
  .tab{ padding: 0 2%; }
}