@charset "UTF-8";
@import url('playback.css');
@import url('loopSlide.css');

/* ========================================================================

  /special/css/add.css

======================================================================== */

/************************************************************************
  .fadeIn
************************************************************************/
.fadeIn { opacity:0; }

.fadeIn.is-show {
opacity:1;
animation-delay:2s;
animation-name:fadeIn2;
animation-duration:1.5s;
animation-fill-mode:both;
}

.fadeIn.is-view { opacity:1; }
/************************************************************************
  .mv__mask
************************************************************************/
.mv__mask { background-image:none; }
.mv__bg { background-image:url('../img/common/bg.png'); }
.mv { background-color:#1a150e; }
/************************************************************************
  .fv__box
************************************************************************/
.fv__box { padding-top:0; }
.fv__box .content { height:100vh; position:relative; display:flex; align-items:center; justify-content:center; }
.fv__box .content .box {  }

.fv__box .content h2 { margin-bottom:calc(-75/840*100vh); width:calc(775px /2); position:relative; top:calc(-75/840*100vh); }
.fv__box .content .lead { margin:auto auto calc(-66/840*100vh); width:calc(800px /2); position:relative; top:calc(-66/840*100vh); }
.fv__box .content .fv__bottom { margin-bottom:calc(-9/840*100vh); position:relative; top:calc(-9/840*100vh); bottom:auto; left:auto; right:auto; }

.fv__box .content .fv__cap { width:auto; height:auto; }
.fv__box .content .fv__cap picture { transition-delay:2s; }
.fv__box .content .fv__cap img { transition-delay:2s; }

#btn-broadcast {  }
#btn-broadcast img { width:calc(1067px /2); }

#btn-part3 img { width:calc(1067px /2); }


h1.fv__ttl.is-show {
animation-delay:1s;
animation-name:fadeIn2;
animation-duration:1.5s;
animation-fill-mode:both;
}
h2.fv__ttl.is-show {
animation-delay:1.5s;
animation-name:fadeIn2;
animation-duration:1.5s;
animation-fill-mode:both;
}

.fv.js-splash-fadeIn-parent.is-show .js-fadeIn { transition-delay:2.5s; }


/* ============ smart phone ============ */
@media (max-width:768px){
.fv { background-color:#000000; }
.fv__box .content { height:auto; min-height:100vh; min-height:calc(var(--vh2, 1vh) * 100); }
.fv__box .content h1 { width:calc(781/750*100vw); }
.fv__box .content h2 { margin-bottom:calc(-113/750*100vw); width:calc(493/750*100vw); top:calc(-113/750*100vw); }
.fv__box .content .lead { margin-bottom:calc((40 - 50)/750*100vw); width:calc(579/750*100vw); position:relative; top:calc(-50/750*100vw); }

.fv__box .content .fv__bottom { margin-bottom:calc(100/750*100vw); top:calc(-33/750*100vw); }
#btn-broadcast img { width:calc((1328/2)/750*100vw); }
#btn-part3 img { width:calc(664/750*100vw); }

}
/************************************************************************
  #dl-btn
************************************************************************/
ul#dl-btn { margin-bottom:calc(-16/840*100vh); display:flex; justify-content:center; position:relative; top:calc(-16/840*100vh); z-index:1; }
ul#dl-btn li { margin-right:10px; display:flex; }

#dl-btn-as { width:161px; }
#dl-btn-gp { width:162px; }
#dl-btn-wp { margin-right:0; width:197px; }

/* ============ smart phone ============ */
@media (max-width:768px){
ul#dl-btn li { margin-bottom:calc(12/750*100vw); margin-right:calc(20/750*100vw); display:flex; }
ul#dl-btn li:last-child { margin-right:0; }

#dl-btn-as { width:calc(285/750*100vw); }
#dl-btn-gp { width:calc(286/750*100vw); }
#dl-btn-wp { display:none !important; }
}
/************************************************************************
  #loopSlide
************************************************************************/
#loopSlide { position:absolute; top:0; bottom:0; right:0; left:0; z-index:-1; }
.loopSlide ul li { height:50vh; }
#loopSlide::before { content:''; width:100%; height:100%; background:url('../img/fv/bg.png') no-repeat; background-size:cover; position:absolute; top:0; bottom:0; right:0; left:0; z-index:2; }
#loopSlide::after { content:''; width:100%; height:100%; background:url('../img/fv/bg_shadow.png') no-repeat; background-size:cover; position:absolute; top:0; bottom:0; right:0; left:0; z-index:1; }

#loopSlide.fadeIn.is-show {
animation-delay:0s;
animation-name:fadeIn2;
animation-duration:1.5s;
animation-fill-mode:both;
}
.loopSlide ul.slide-u li { width:calc(524/1280*100%); }
.loopSlide ul.slide-b li { width:calc(291/1280*100%); }
.loopSlide ul li.slide-u-002 { width:calc(291/1280*100%); }

/* ============ smart phone ============ */
@media (max-width:768px){
.loopSlide ul li { height:calc(571/750*100vw); }
.loopSlide ul.slide-u li { width:calc(812/750*100vw); }
.loopSlide ul.slide-b li { width:calc(399/750*100vw); }
.loopSlide ul li.slide-u-002 { width:calc(399/750*100vw); }

.loopSlide ul.slide-b { position:relative; }
.loopSlide ul.slide-b::after { content:''; width:100%; height:calc(121/750*100vw); background:url('../img/fv/bg_shadow_bottom_sp.png') repeat-x bottom center; background-size:auto 100%; position:absolute; bottom:0; }

}
/************************************************************************
  #latest
************************************************************************/
#latest { min-height:100vh; background:url('../img/latest/bg.png') no-repeat top center; box-sizing:border-box; }
#latest h2 { width:calc(1160px /2); }
#latest p { margin:auto; width:858px; }

/* ============ smart phone ============ */
@media (max-width:768px){
#latest { min-height:initial; height:calc(914/750*100vw); background-image:url('../img/latest/bg_sp.png'); background-size:100% auto; }
#latest h2 { margin-bottom:calc(25/750*100vw); width:calc(667/750*100vw); }
#latest p { width:calc(710/750*100vw); }
}
/************************************************************************
  #playback
************************************************************************/
#playback { padding-bottom:150px; background:url('../img/playback/bg.png') no-repeat top center; }
#playback h2 { margin-bottom:50px; width:calc(1160px /2); }

/* ul.playback-art */
ul.playback-art { margin:auto; width:1050px; display:flex; flex-wrap:wrap; }
ul.playback-art li { margin:auto 15px 15px 0; width:340px; height:240px; background:url('../img/playback/bg_playback_item.png') no-repeat; text-align:center; display:flex; align-items:center; justify-content:center; }
ul.playback-art li:nth-child(3n) { margin-right:0; }

ul.playback-art li img { width:182px; }
ul.playback-art li.landscape img { width:260px; }

/*
ul.playback-art li:nth-child(12) a { pointer-events:none; }
ul.playback-art li:nth-child(13) a { pointer-events:none; }
ul.playback-art li:nth-child(14) a { pointer-events:none; }
ul.playback-art li:nth-child(15) a { pointer-events:none; }
ul.playback-art li:nth-child(16) a { pointer-events:none; }
*/
.playback .Slider__box { margin-bottom:0; }


.playbackModal__item--1 .playbackModal__copy,
.playbackModal__item--2 .playbackModal__copy {
  display:flex;
  flex-direction:row-reverse;
}
.playbackModal__item--1 ._strings,
.playbackModal__item--2 ._strings {
  display:flex;
  flex-direction:column;
}
.playbackModal__item--1 ._strings--2,
.playbackModal__item--2 ._strings--2 {
  margin-top:3.6em;
}
.playbackModal__item--2 ._rb._1 {
  top:7em;
  right:-0.5em;
}
.playbackModal__item--4 ._rb._1 {
  top:13.5em;
  right:-0.5em;
}
.playbackModal__item--5 ._rb._1 {
  top:4.5em;
  right:-0.5em;
}

/* ============ smart phone ============ */
@media (max-width:768px){
#playback { padding-bottom:calc(150/750*100vw); }
#playback h2 { margin-bottom:calc(50/750*100vw); width:calc(470/750*100vw); }

ul.playback-art { width:calc(678/750*100vw); justify-content:center; }
ul.playback-art li { margin:auto calc(18/750*100vw) calc(15/750*100vw) 0; width:calc(310/750*100vw); height:calc(233/750*100vw); }
ul.playback-art li:nth-child(3n) { margin-right:calc(15/750*100vw); } 
ul.playback-art li:nth-child(2n) { margin-right:0; }

ul.playback-art li img { width:calc(174/750*100vw); }
ul.playback-art li.landscape img { width:calc(252/750*100vw); }

.playbackModal__ttl img { height:auto; }
}
/************************************************************************
  #mainStory
************************************************************************/
#mainStory { margin:auto; padding:110px 0 150px; max-width:1280px; background:url('../img/mainStory/bg_mainStory.png') no-repeat center top #1e190d; text-align:center; position:relative; }
#mainStory::before { content:''; margin:auto; width:100%; height:3px; background:url('../img/mainStory/border_mainStory.png') no-repeat center top; display:block; position:absolute; top:0; right:0; left:0; }
#mainStory h2 { margin:auto auto 90px; width:calc(1078px /2); }

/* ul */
#mainStory ul {  }
#mainStory ul li { margin:auto auto 60px; padding:85px 70px 50px; width:calc(2180px /2); height:calc(1156px /2); /*background-color:rgba(255,255,255,0.95);*/ background-repeat:no-repeat; background-size:cover; /*border:10px outset rgba(255,255,255,0.1); box-shadow:0px 0px 20px 15px rgba(105,90,73,0.9);*/ box-sizing:border-box; position:relative; }
#mainStory ul li:last-child { margin-bottom:0; }
/*#mainStory ul li::before { content:''; width:1050px; height:540px; background:rgba(255,255,255,0.1); background-color:rgba(52,47,36,0.95); box-shadow: 0px 0px 10px 5px rgb(105 90 73 / 90%); position:absolute; top:-10px; left:-10px; z-index:-1; }*/
#mainStory ul li.reverse .flex p.pict { order:2; }
#mainStory ul li.reverse .flex p.text { order:1; }

#mainStory ul li .flex { margin-bottom:30px; }
#mainStory ul li .flex p:nth-child(1) { margin-right:10px; }
#mainStory ul li p.pict { width:480px; }
#mainStory ul li p.text { margin:auto; background-repeat:no-repeat; background-size:100% auto; text-align:center; font-size:0; }
#mainStory ul li p.banner { margin:auto; width:calc(620px /2); }
#mainStory ul li p.banner a:hover img { transform:translate(5px,0); }
#mainStory ul li h3 { margin:auto auto 45px; }

/* #column-6 */
#mainStory ul li#column-6 { background-image:url('../img/mainStory/bg_column_006.png'); }
#mainStory ul li#column-6 h3 { width:calc(1270px /2); }
#mainStory ul li#column-6 p.text { width:calc(429px /2); height:calc(296px /2); background-image:url('../img/mainStory/text_006.png'); }

/* #column-5 */
#mainStory ul li#column-5 { background-image:url('../img/mainStory/bg_column_005.png'); }
#mainStory ul li#column-5 h3 { width:calc(1274px /2); }
#mainStory ul li#column-5 p.text { width:calc(634px /2); height:calc(290px /2); background-image:url('../img/mainStory/text_005.png'); }
#mainStory ul li#column-5 p.text { width:calc(574px /2); height:calc(192px /2); background-image:url('../img/mainStory/text_005.png'); }

/* #column-4 */
#mainStory ul li#column-4 { background-image:url('../img/mainStory/bg_column_004.png'); }
#mainStory ul li#column-4 h3 { width:calc(1128px /2); }
#mainStory ul li#column-4 p.text { width:calc(634px /2); height:calc(290px /2); background-image:url('../img/mainStory/text_004.png'); }

/* #column-3 */
#mainStory ul li#column-3 { background-image:url('../img/mainStory/bg_column_003.png'); }
#mainStory ul li#column-3 h3 { width:calc(1133px /2); }
#mainStory ul li#column-3 p.text { width:calc(704px /2); height:calc(415px /2); background-image:url('../img/mainStory/text_003.png'); }

/* #column-2 */
#mainStory ul li#column-2 { background-image:url('../img/mainStory/bg_column_002.png'); }
#mainStory ul li#column-2 h3 { width:calc(1346px /2); }
#mainStory ul li#column-2 p.text { width:calc(792px /2); height:calc(414px /2); background-image:url('../img/mainStory/text_002.png'); }

/* #column-1 */
#mainStory ul li#column-1 { height:calc(1016px /2); background-image:url('../img/mainStory/bg_column_001.png'); }
#mainStory ul li#column-1 h3 { width:calc(674px /2); }
#mainStory ul li#column-1 p.text { width:calc(668px /2); height:calc(247px /2); background-image:url('../img/mainStory/text_001.png'); }


.flex { display:flex; align-items:center; justify-content:space-between; } 

/* ============ smart phone ============ */
@media (max-width:768px){
#mainStory { padding:calc(100/750*100vw) 0 calc(150/750*100vw); background-image:url('../img/mainStory/bg_mainStory_sp.png'); background-size:100% auto; z-index:-2; }
#mainStory::before { display:none; }
#mainStory h2 { margin-bottom:calc(70/750*100vw); width:calc((940/2)/750*100vw); }
#mainStory ul li { margin:auto auto 0; padding:calc(70/750*100vw); width:calc((1436/2)/750*100vw); height:calc((1896/2)/750*100vw); }
#mainStory ul li h3 { margin-bottom:calc(25/750*100vw); }

#mainStory ul li .flex { margin-bottom:calc(30/750*100vw); flex-direction:column; }
#mainStory ul li p.text { width:auto; text-align:center; /*line-height:calc(54/32); font-size:calc(28/750*100vw);*/ }
#mainStory ul li p.pict { margin-bottom:calc(30/750*100vw); width:calc(580/750*100vw); }

#mainStory ul li.reverse .flex p.pict { order:1; }
#mainStory ul li.reverse .flex p.text { order:2; }

/* #column-6 */
#mainStory ul li#column-6 { height:calc(948/750*100vw); background-image:url('../img/mainStory/bg_column_006_sp.png'); }
#mainStory ul li#column-6 h3 { width:calc((885/2)/750*100vw); }
#mainStory ul li#column-6 p.text { width:calc(326/750*100vw); height:calc(215/750*100vw); background-image:url('../img/mainStory/text_006_sp.png'); }

/* #column-5 */
#mainStory ul li#column-5 { height:calc(878/750*100vw); background-image:url('../img/mainStory/bg_column_005_sp.png'); }
#mainStory ul li#column-5 h3 { width:calc((890/2)/750*100vw); }
#mainStory ul li#column-5 p.text { width:calc(432/750*100vw); height:calc(143/750*100vw); background-image:url('../img/mainStory/text_005_sp.png'); }

/* #column-4 */
#mainStory ul li#column-4 { height:calc(934/750*100vw); background-image:url('../img/mainStory/bg_column_004_sp.png'); }
#mainStory ul li#column-4 h3 { width:calc((730/2)/750*100vw); }
#mainStory ul li#column-4 p.text { width:calc(477/750*100vw); height:calc(198/750*100vw); background-image:url('../img/mainStory/text_004_sp.png'); }

/* #column-3 */
#mainStory ul li#column-3 { height:calc(1055/750*100vw); background-image:url('../img/mainStory/bg_column_003_sp.png'); }
#mainStory ul li#column-3 h3 { width:calc((736/2)/750*100vw); }
#mainStory ul li#column-3 p.text { width:calc(530/750*100vw); height:calc(308/750*100vw); background-image:url('../img/mainStory/text_003_sp.png'); }

/* #column-2 */
#mainStory ul li#column-2 { height:calc(1068/750*100vw); background-image:url('../img/mainStory/bg_column_002_sp.png'); }
#mainStory ul li#column-2 h3 { width:calc((878/2)/750*100vw); }
#mainStory ul li#column-2 p.text { width:calc(596/750*100vw); height:calc(308/750*100vw); background-image:url('../img/mainStory/text_002_sp.png'); }

/* #column-1 */
#mainStory ul li#column-1 { height:calc(799/750*100vw); background-image:url('../img/mainStory/bg_column_001_sp.png'); }
#mainStory ul li#column-1 h3 { width:calc((484/2)/750*100vw); }
#mainStory ul li#column-1 p.text { width:calc(503/750*100vw); height:calc(149/750*100vw); background-image:url('../img/mainStory/text_001_sp.png'); background-size:100% auto; }

}
/************************************************************************
  .footer
************************************************************************/
.footer { background-image:none; }
.footer__nav { margin-top:0; }

/* ============ smart phone ============ */
@media (max-width:768px){
.footer__copyright { font-size: 2.8vw; }
}