@charset "utf-8";
/* ===================
 reset
=================== */
@import 'html-5-reset-stylesheet.css';
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
/* ===================
 font-family
=================== */
html{
font-size: 62.5%;
}
body{
font-family : -apple-system, "BlinkMacSystemFont", "Noto Sans Japanese", "Yu Gothic" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", osaka, sans-serif;
line-height:1.4;
color:#141414;
/*-webkit-user-select: none;*/
-webkit-text-size-adjust: 100%;
width: 100%;
font-size: 16px; font-size: 1.6rem;
-webkit-text-size-adjust: 100%;
}
*{
  -webkit-appearance: none;
}
@media screen and (min-width: 769px) { 
  body {
    width: 100%;
    min-width: 1140px;
  }
}
/* ===================
 reset-add
=================== */
a:active {
color: #000;
}
a {
color:#141414;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
ol, ul {
list-style: none;
}
img {
max-width:100%;
vertical-align: bottom;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
box-sizing: border-box;
}
/* ===================
 common
=================== */
.nest {
margin: 0 auto;
}
.cf:after {
content: "";
clear: both;
display: block;
}
@media screen and (min-width: 769px) { 
  .nest {
  width: 1140px;
  }
}
/* ===================
 header
=================== */
header{
background: url(../img/header-bg02.png) center center repeat, url(../img/header-bg01.jpg) center center no-repeat;
background-size: auto, cover;
border-bottom: solid 3px #000;
box-shadow: 0px 3px #fff,0px 6px #000;
margin-bottom: 6px;
}
header h1{
margin:0 auto;
padding:5.5vw 0;
width:50%
}
@media screen and (min-width: 769px) { 
  header h1{
  padding:55px 0;
  }
}

/* ===================
 #exp
=================== */
#exp {
  margin-bottom: 3rem;
}

.exp-frame {
  background: #fff;
  border: 2px solid #141414;
  width:100% !important;
  margin:5% 2.9% 20% 0;
  padding: 5% !important;
  position: relative;
  box-sizing: border-box;
  box-shadow: 10px 10px #000 !important;
  font-weight: bold;
  font-size: 110%;
}


/* ===================
 #now
=================== */
#now{
background:url(../img/now-bg.png) 0 0 repeat;
padding:6.5vw 0 12vw;
}
#now h2{
padding:0 0 7vw;
margin:0 auto;
width:60%;
}
#now .sp ul{
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
padding:0 5vw 8vw;
}
#now .sp li{
width:32%
}
#now .sp li a{
display: block;
background: #141414;
padding:3vw 0;
text-align: center;
font-weight: bold;
font-size: 2.6vw;
}
#now .sp li:nth-child(1) a{
color: #3cf;
}
#now .sp li:nth-child(2) a{
color: #ff0;
}
#now .sp li:nth-child(3) a{
color: #FF5290;
}
#now .nest{
display: -webkit-flex;
display: flex;
flex-direction: column;
padding:0 5vw;
}
#now .nest div{
background: #fff;
border: 2px solid #141414;
width:100%;
margin:5% 2.9% 12% 0;
padding:24vw 5% 5%;
position: relative;
box-sizing: border-box;
}
#now .nest div:nth-child(1) {
box-shadow: 10px 10px #3cf;
}
#now .nest div:nth-child(2) {
box-shadow: 10px 10px #ff0;
}
#now .nest div:nth-child(3) {
box-shadow: 10px 10px #FF5290;
margin-bottom: 0;
}
#now .nest div h3{
position: absolute;
top:-8vw;
width:60%;
}
#now .nest div h4{
display: inline-block;
font-size: 21px;
padding:2px 12px 3px 30px;
position: relative;
margin-bottom: 7px;
}
#now .nest div h4::before{
content: '';
display: inline-block;
width: 14px;
height: 20px;
background: url(../img/now-icon01.png) center center no-repeat;
background-size: contain;
top:8px;
left:10px;
position: absolute;
}
#now .nest div h4 + p span{
font-size: 18px;
padding:2px 12px 3px 30px;
position: relative;
font-weight: bold;
}
#now .nest div h4 + p span::before{
content: '';
display: inline-block;
width: 15px;
height: 14px;
background: url(../img/now-icon02.png) center center no-repeat;
background-size: contain;
top:8px;
left:10px;
position: absolute;
}
#now .nest div:nth-child(1) h4,
#now .nest div:nth-child(1) h4 + p span{
background:#3cf;
color:#fff;
}
#now .nest div:nth-child(2) h4,
#now .nest div:nth-child(2) h4 + p span{
background:#ff0;
}
#now .nest div:nth-child(3) h4,
#now .nest div:nth-child(3) h4 + p span{
background:#FF5290;
color:#fff;
margin-bottom: 0;
}
#now h5{
margin:10px 0 7px;
}
#now ul{
font-size:12px;
color:#666;
}
@media screen and (min-width: 425px) { 
  #now .nest div{
    padding-top:110px;
  }
}
@media screen and (min-width: 769px) { 
  #now{
  padding:65px 0 80px;
  }
  #now h2{
  padding:0 0 70px;
  text-align: center;
  }
  #now .nest{
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  flex-direction: row;
  width:1095px;
  padding:0 0 0 5px;
  }
  #now .nest div{
  width:33.33%;
  margin:0 2.9% 0 0; 
  padding:140px 2.2% 2.2%;
  }
  #now .nest div:nth-child(2) {
  margin-top:55px;
  }
  #now .nest div:nth-child(3) {
  margin-right: 0;
  }
  #now .nest div h3{
  top:-35px;
  width:100%;
  }
  #now .nest div h4 + p{
  display: inline-flex;
  }
}
/* ===================
 #movie
=================== */
#movie{
padding:6.5vw 0 3vw;
background: url(../img/movie-bg02.png) center right no-repeat, url(../img/movie-bg01.png) center left no-repeat, url(../img/movie-bg03.png) top left repeat,#141414;
background-size: 30%,30%,200%,auto;
}
#movie h2{
padding:0 0 7vw;
margin:0 auto;
width:60%;
}
#mov-exp {
  width: 100%;
  text-align: center;
  color: #000;
  margin-bottom: 1rem;
  padding-top: 4rem;
}
#mov-exp a {
  color: #000;
  text-decoration: underline;
}
.youtube {
position: relative;
width: 80.7%;
padding-top: 56%;
}
.youtube iframe,.youtube-s iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.youtube{
margin:0 9.65%
}
.youtube-list{
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin: 3vw 9.65%;
}
.youtube-s{
position: relative;
width:24%;
padding-top: 15.6%;
}
@media screen and (min-width: 769px) { 
  #movie{
    padding:65px 0 30px;
    background: url(../img/movie-bg02.png) center right no-repeat, url(../img/movie-bg01.png) center left no-repeat, url(../img/movie-bg03.png) top left repeat,#141414;
    }
    #movie h2{
    padding:0 0 70px;
    text-align: center;
    }
    .youtube-list{
    margin: 35px 9.65%;
    }
}

/* ===================
 footer
=================== */
footer{
background: #141414;
text-align: center;
padding: 0 0 6vw 0;
}
footer li{
display: inline-block;
margin: 0 1.5vw 2.5vw;
vertical-align: middle;
width:20%;
}
footer ul + p{
font-size: 10px;
color:#fff;
}
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
width:60px;
z-index: 10;
}
@media screen and (min-width: 769px) {
  footer{
    padding: 0 0 60px 0;
    }
    footer li{
    margin: 0 15px 25px;
    width:auto
    }
    footer ul + p{
    font-size: 12px;
    }
}

@media all and (min-width:769px){
  .sp {
  display: none;
  }
}
@media all and (max-width: 768px) {
  .pc {
  display: none;
  }
}
@media all and (min-width:426px){
  .b {
  display: none;
  }
}

@media all and (max-width: 425px) {
  #now h5{
  font-size:4.1vw
  }
  #now .nest div h4{
    font-size: 6vw;
    }
  #now .nest div h4 + p span{
  font-size: 4.7vw;
  }
}

/* MOVIE */
.ndfHFb-c4YZDc-Wrql6b {
  display: none !important;
}