@charset "utf-8";
/*------------------------  common.css  ------------------------*/


/*------------  reset  ------------*/
*, *::before, *::after { box-sizing: border-box; }
* { padding: 0; margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
form { margin: 0; padding: 0; }
li { list-style-type: none; }
img { border: none; width: 100%; vertical-align: bottom; }
a { color: #fff; text-decoration: none; opacity: 1; }
a:hover { color: #fff; text-decoration: none; opacity: .6; transition: .3s; }
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background-color: transparent; padding: 0; }



/*------------  body  ------------*/
body { background-color: #000; font-family: 'Noto Sans JP', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 400; font-size: 16px; color: #fff; letter-spacing: .02em; }



/*------------  load-fade  ------------*/
.load-fade { opacity: 0; visibility: hidden; transition: all 1.2s; }
.load-fade.is-show { opacity: 1; visibility: visible; }



/*------------  header  ------------*/
#header { width: 100%; background: #000; z-index: 5; }
#header .header-inner { display: flex; align-items: center; margin: 0 auto; padding: 0 2%; height: 80px; }
#header .logo { display: flex; align-items: center; width: 80px; z-index: 7; }
.menu-btn { display: none; pointer-events: none; }

#header .header-gnav { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 20px; }
#header .header-gnav .gnav { display: flex; align-items: center; }
#header .header-gnav .gnav .nav { padding: 0 20px; font-weight: 700; font-size: 16px; line-height: 1.4; }
#header .header-gnav .gnav .nav a { display: block; padding: 5px; }
#header .header-gnav .gnav .nav a span { display: block; font-size: 13px; }
#header .header-gnav .sns { display: flex; align-items: center; }
#header .header-gnav .sns .icon { margin: 0 4px; width: 36px; }
#header .header-gnav .sns .icon a { display: block; padding: 5px; }

@media screen and (max-width: 1020px) {
  #header .header-inner { height: 76px; }
  #header .logo { width: 76px; }
  #header .header-gnav { padding: 0 0 0 10px; }
  #header .header-gnav .gnav .nav { padding: 0 12px; font-size: 15px; }
}

@media screen and (max-width: 800px) {
  #header .header-inner { padding: 0 12px; width: 100%; height: 58px; }
  #header .logo { width: 58px; }
 
  .menu-btn { display: block; pointer-events: all; position: absolute; top: 6px; right: 6px; width: 46px; height: 46px; text-align: center; cursor: pointer; z-index: 7; }
  .menu-btn .bar { display: block; position: absolute; width: 22px; height: 2px ; left: 12px; background: #fff; }
  .menu-btn .bar:nth-of-type(1) { top: 15px; transition: .3s; }
  .menu-btn .bar:nth-of-type(2) { top: 22px; }
  .menu-btn .bar:nth-of-type(3) { top: 29px; transition: .3s; }
  .menu-btn.active .bar:nth-child(1) { top: 22px; transform: rotate(45deg); transition: .3s; }
  .menu-btn.active .bar:nth-child(2) { top: 22px; opacity: 0; }
  .menu-btn.active .bar:nth-child(3) { top: 22px; transform: rotate(-45deg); transition: .3s; }
 
  #header .header-gnav { display: none; position: absolute; top: 0; left: 0; width: 100%; padding: 0; background: #000; z-index: 6; }

  #header .header-gnav .gnav { display: block; padding: 64px 5% 24px; width: 100%; }
  #header .header-gnav .gnav .nav { padding: 0; width: 100%; font-size: 16px; }
  #header .header-gnav .gnav .nav a { display: block; padding: 18px 6px; height: auto; border-bottom: 1px solid #333; }
  #header .header-gnav .gnav .nav a span { display: inline-block; margin-right: 14px; font-size: 13px; }
  #header .header-gnav .sns { justify-content: center; padding: 0 3% 40px; }
  #header .header-gnav .sns .icon { margin: 0 6px; }
}



/*------------  main-logo  ------------*/
.main-logo { padding: 60px 0 110px; }
.main-logo .logo { margin: 0 auto; width: 540px; }

@media screen and (max-width: 1020px) {
  .main-logo { padding: 50px 0 100px; }
  .main-logo .logo { width: 500px; }
}

@media screen and (max-width: 800px) {
  .main-logo { padding: 40px 0 80px; }
  .main-logo .logo { width: 82%; max-width: 360px; }
}



/*------------  main-visual  ------------*/
.main-visual { padding: 20px 0 40px; }
.main-visual .visual { margin: 0 auto; max-width: 1220px; }
.main-visual .visual .pc { display: block; }
.main-visual .visual .sp { display: none; }

@media screen and (max-width: 800px) {
  .main-visual { padding: 12px 0 26px; }
  .main-visual .visual .pc { display: none; }
  .main-visual .visual .sp { display: block; }
}



/*------------  program  ------------*/
.program { padding: 90px 0 110px; border-top: 1px solid #333; }
.program .program-inner { position: relative; margin: 0 auto; padding: 0 5%; max-width: 1080px; }
.program .photo { position: absolute; top: 0; right: 0; width: 52%; }
.program .title-block { padding: 10% 0; }
.program .title-block .title-box { position: relative; margin: 0 0 50px; padding-left: 94px; font-weight: 700; line-height: 1.3; }
.program .title-block .title-box .vol { position: absolute; top: 0; left: 0; width: 72px; }
.program .title-block .title-box .title { font-size: 26px; }
.program .title-block .title-box .schedule { padding: 7px 0 0; font-size: 22px; }
.program .title-block .title-box .schedule span { margin: 0 0 0 .2em; font-weight: 500; font-size: 16px; }
.program .title-block .bnr { max-width: 230px; }
.program .movie-block { margin: 0 auto; padding: 60px 0 80px; max-width: 800px; }
.program .movie-block .hd { padding: 0 0 20px; font-weight: 700; font-size: 22px; line-height: 1.3; }
.program .movie-block .movie { position: relative; padding-top: 56.25%; width: 100%; }
.program .movie-block .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.program .txt-block { display: flex; }
.program .txt-block .hd { padding: 0 0 10px; font-weight: 700; font-size: 22px; line-height: 1.3; }
.program .txt-block .txt { font-size: 15px; line-height: 2; letter-spacing: .04em; }
.program .txt-block .txt span { display: inline-block; }
.program .txt-block .story { flex-basis: 62%; padding: 0 6% 0 0; }
.program .txt-block .team { flex-basis: 38%; }
.program .txt-block .team .cast { padding: 0 0 30px; }
.program .txt-block .team .staff { padding: 0; }

@media screen and (max-width: 1020px) {
  .program .title-block { padding: 9% 0; }
  .program .title-block .title-box { padding-left: 88px; }
  .program .title-block .title-box .vol { width: 68px; }
  .program .title-block .title-box .title { font-size: 24px; }
  .program .title-block .title-box .schedule { padding: 7px 0 0; font-size: 20px; }
  .program .title-block .title-box .schedule span { font-size: 15px; }
  .program .title-block .bnr { max-width: 210px; }
  .program .movie-block { padding: 50px 0 70px; }
  .program .movie-block .hd { font-size: 20px; }
  .program .txt-block .hd { font-size: 20px; }
}

@media screen and (max-width: 800px) {
  .program { padding: 45px 0 50px; }
  .program .photo { position: relative; top: inherit; right: inherit; width: 100%; }
  .program .title-block { padding: 28px 0 40px; }
  .program .title-block .title-box { margin: 0 0 30px; padding-left: 70px; }
  .program .title-block .title-box .vol { width: 56px; }
  .program .title-block .title-box .title { font-size: 20px; }
  .program .title-block .title-box .schedule { padding: 6px 0 0; font-size: 16px; }
  .program .title-block .title-box .schedule span { font-size: 14px; }
  .program .title-block .bnr { max-width: 190px; }
  .program .movie-block { padding: 0 0 40px; }
  .program .movie-block .hd { padding: 0 0 16px; font-size: 17px; }
  .program .txt-block { display: block; }
  .program .txt-block .hd {  padding: 0 0 8px; font-size: 17px; }
  .program .txt-block .txt { font-size: 14px; }
  .program .txt-block .story { padding: 0 0 30px; }
}



/*------------  footer  ------------*/
#footer { padding: 70px 0 70px; border-top: 1px solid #333; }

@media screen and (max-width: 800px) {
  #footer { padding: 50px 0 50px; }
}


/*------------  footer-bnr  ------------*/
.footer-bnr { display: flex; justify-content: center; padding: 0 0 40px; }
.footer-bnr .bnr { width: 280px; }
.footer-bnr .bnr a { display: block; }

@media screen and (max-width: 800px) {
  .footer-bnr { padding: 0 0 25px; }
  .footer-bnr .bnr { width: 230px; }
}


/*------------  footer-sns  ------------*/
.footer-sns { display: flex; justify-content: center; padding: 0 0 36px; }
.footer-sns .sns { display: flex; align-items: center; }
.footer-sns .sns .icon { margin: 0 12px; width: 48px; }
.footer-sns .sns .icon a { display: block; padding: 5px; }

@media screen and (max-width: 800px) {
  .footer-sns { padding: 0 0 22px; }
  .footer-sns .sns .icon { margin: 0 10px; width: 40px; }
}


/*------------  copyright  ------------*/
.copyright { display: block; text-align: center; }
.copyright p { padding: 0 0 6px; font-size: 14px; line-height: 1.5; }

@media screen and (max-width: 800px) {
  .copyright p { padding: 0 0 6px; font-size: 13px; }
}