/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/
body { background: url("../images/index/index-bg.jpg") repeat; background-attachment: fixed; }

body::after { background: url("../images/index/index-bg-02.png") no-repeat top center/contain; z-index: -2; top: 70px; }

.areaBlack { background-color: #222; position: relative; }

.areaBlack::before { content: ''; position: absolute; top: -400px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 calc((100vw - var(--scrollbar)) / 2) 400px calc((100vw - var(--scrollbar)) / 2); border-color: transparent transparent #222 transparent; z-index: -1; }

.areaBlue { background-color: #2d1da3; position: relative; }

.areaBlue::before { content: ''; position: absolute; top: -400px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 calc((100vw - var(--scrollbar)) / 2) 400px calc((100vw - var(--scrollbar)) / 2); border-color: transparent transparent #2d1da3 transparent; }

.areaRed { background-color: #ad2424; position: relative; }

.areaRed::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 calc((100vw - var(--scrollbar)) / 2) 400px calc((100vw - var(--scrollbar)) / 2); border-color: transparent transparent #ad2424 transparent; background: #2d1da3; }

#main .mainPhoto { text-align: center; z-index: 1; position: relative; }

#main .mainPhoto img { -webkit-filter: drop-shadow(0px 0px 200px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 200px rgba(0, 0, 0, 0.5)); }

#main .schedule__inner { width: auto; max-width: 1400px; margin: 0 auto; }

#main .schedule__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; }

#main .schedule__item { width: calc(100% / 3); padding: 60px 40px; position: relative; }

#main .schedule__item:nth-child(2) { background: #ad2424; }

#main .schedule__item::after { content: url(../images/index/arrow.png); position: absolute; right: -20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; }

#main .schedule__item:nth-child(3)::after { content: none; }

#main .schedule__box { z-index: 1; position: relative; }

#main .schedule__area { font-size: 6.6rem; color: transparent; -webkit-text-stroke: 1px #FFF; }

#main .schedule__area span { font-size: 1.6rem; background: #000; padding: .5em 10px; text-shadow: none; color: #fff; margin-bottom: 10px; margin-left: 15px; display: inline-block; vertical-align: middle; -webkit-text-stroke: initial; letter-spacing: 0.2rem; }

#main .schedule__theater { font-size: 1.8rem; padding-top: 1em; }

#main .banner { background: #d3ee1e; padding: 40px 0; }

#main .banner__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

#main .banner__bnr { max-width: 345px; -webkit-box-shadow: 6px 6px 0px 0px black; box-shadow: 6px 6px 0px 0px black; }

#main .banner__bnr + .banner__bnr { margin-left: 10px; }

#main .video { z-index: 1; background: #222; padding: 60px 0; }

#main .video__border1 { width: 778px; margin: 26px auto 0; border: 15px solid #000; position: relative; z-index: 1; }

#main .video__border2 { border: 4px solid #fff; text-align: center; }

#main .video__border2 iframe { display: block; width: 740px; height: 425px; }

#main .video__title { text-align: center; font-size: 2.2rem; font-weight: normal; margin-top: 14px; position: relative; z-index: 1; }

#main .video__sub { text-align: center; position: relative; padding-top: .5em; z-index: 1; }

#main .colum { padding-bottom: 80px; max-width: 1020px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#main .colum__l, #main .colum__r { width: calc((100% - 60px) / 2); }

#main .colum__news { overflow-y: auto; height: 340px; padding-right: 30px; }

#main .colum__news li { color: #fff; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding: 23px 0 5px; position: relative; }

#main .colum__news li::after { content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.8rem; position: absolute; right: 0; bottom: 0; color: #fff; }

#main .colum__news li .newsDate { font-size: 1.8rem; font-style: italic; }

#main .colum__news li .newsTitle { margin-top: 4px; }

#main .colum__news li a { font-weight: normal; padding-right: 30px; display: block; }

#main .colum__news li a .newsTitle { color: #b0c51f; }

#main .colum__news li a .newsDate { color: #fff; }

#main .colum__title { position: relative; }

#main .colum__r { float: right; }

#main .colum__r .colum__title { text-align: right; }

#main .colum__r #twitterBox { margin-top: -35px; }

#main .colum__scroll { border: 4px solid #000; background-color: #222; height: 408px; overflow-x: hidden; -webkit-box-shadow: 8px 8px 0px 0px black; box-shadow: 8px 8px 0px 0px black; }

.introduce { padding: 80px 0 200px; }

.introduce__title { text-align: center; position: relative; margin-bottom: 80px; }

.introduce__titleImg { display: block; }

.introduce__text { text-align: center; font-size: 18px; font-weight: bold; line-height: 2.5; position: relative; margin-bottom: 40px; }

.introduce__text::after { content: ''; background: url(../images/index/border.png) repeat-x bottom; display: block; height: 46px; width: 100%; margin: 0 calc(((100vw - 100%) / 2) * -1); padding: 0 calc(((100vw - 100%) / 2) - 5px); }

.introduce .story { color: #ad2424; background: #fff; border: solid 4px #000; padding: 60px 0; margin: 0 auto; border-radius: 40px; -webkit-box-shadow: 8px 8px 0px 0px black; box-shadow: 8px 8px 0px 0px black; position: relative; }

.introduce .story::before { content: ''; background: url(../images/index/story-bg.png) repeat-y left top/contain; display: inline-block; height: 100%; width: 200px; position: absolute; left: 0px; top: 0; border-radius: 40px; }

.introduce .story::after { content: ''; background: url(../images/index/story-bg.png) repeat-y right top/contain; display: inline-block; height: 100%; width: 200px; position: absolute; right: 0px; top: 0; border-radius: 40px; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }

.introduce .story__title { font-size: 6.6rem; border-bottom: 14px solid #ad2424; padding-left: 40px; margin: 0 100px 26px; position: relative; }

.introduce .story__wrap { background: url(../images/index/hero.png) no-repeat center center/contain; margin: 0 50px; }

.introduce .story__text { text-align: center; font-weight: bold; font-size: 18px; line-height: 2.45; }

.introduce .story__text ruby rt { text-align: left; font-size: 9px; }

@media (max-width: 1400px) { #main .schedule__area { font-size: 40px; }
  #main .schedule__area span { font-size: 1.3rem; } }

@media (max-width: 1000px) { #main .schedule__item { padding: 40px 20px; }
  #main .schedule__area { font-size: 30px; }
  #main .schedule__area span { font-size: 1.2rem; }
  #main .video .inner { padding: 0; } }

/* STYLE MOBILE */
@media (max-width: 799px) { .areaBlue::before { top: -200px; border-width: 0 calc((100vw - var(--scrollbar)) / 2) 200px calc((100vw - var(--scrollbar)) / 2); }
  .areaRed::before { top: -10px; border-width: 0 calc((100vw - var(--scrollbar)) / 2) 200px calc((100vw - var(--scrollbar)) / 2); }
  #main .mainPhoto img { -webkit-filter: none; filter: none; }
  #main .schedule__list { display: block; }
  #main .schedule__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 20px 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  #main .schedule__item::after { content: ''; background: url(../images/index/arrow.png) no-repeat bottom center/cover; display: inline-block; -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 20px; height: 95px; bottom: -50px; left: 45%; top: auto; }
  #main .schedule__box { min-width: 150px; padding-right: 20px; text-align: center; }
  #main .schedule__area { font-size: 33px; line-height: 1; }
  #main .schedule__area span { display: block; margin: 0; width: 100%; padding: 0; font-size: 1rem; line-height: 1.5; }
  #main .schedule__theater { font-size: 1.2rem; padding-top: .5em; }
  #main .banner { display: block; padding: 20px 0; }
  #main .banner__wrap { display: block; }
  #main .banner__bnr { max-width: none; margin: 0 auto; -webkit-box-shadow: none; box-shadow: none; }
  #main .banner__bnr + .banner__bnr { margin: 15px auto 0; }
  #main .video { margin-top: 20px; padding: 0; }
  #main .video__border1 { width: 100%; margin-top: 26px; border-top: 10px solid #000; border-bottom: 10px solid #000; border-left: 10px solid #000; border-right: 10px solid #000; }
  #main .video__border2 { border: 2px solid #fff; }
  #main .video__border2 iframe { width: 100%; height: 182px; }
  #main .video__title { font-size: 2rem; margin-top: 15px; }
  #main .video__sub { padding: 0; }
  #main .areaBlue { padding-top: 10px; }
  #main .areaBlue .inner { padding: 0; }
  #main .areaBlue .colum { overflow: hidden; width: 100%; margin-top: 20px; padding-bottom: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #main .areaBlue .colum__title { z-index: 99; }
  #main .areaBlue .colum__l { width: 100%; margin-bottom: 10px; padding: 0 4%; }
  #main .areaBlue .colum__l .colum__title { margin-right: calc((4% + 10px) * -1); margin-left: auto; width: 188px; }
  #main .areaBlue .colum__news { height: auto; max-height: 270px; padding-right: 0; }
  #main .areaBlue .colum__news li { padding: 15px 0 5px; }
  #main .areaBlue .colum__news li:first-child { padding-top: 0; }
  #main .areaBlue .colum__news li .newsDate { font-size: 1.6rem; }
  #main .areaBlue .colum__news li .newsTitle { margin-top: 3px; }
  #main .areaBlue .colum__r { width: 100%; padding: 0 4%; }
  #main .areaBlue .colum__r .colum__title { width: 234px; margin-left: calc((4% + 20px) * -1); }
  #main .areaBlue .colum__r #twitterBox { margin-top: -20px; z-index: 1; position: relative; }
  #main .areaBlue .colum__scroll { height: 280px; -webkit-overflow-scrolling: touch; overflow: auto; -webkit-box-shadow: none; box-shadow: none; }
  .introduce { padding-bottom: 125px; }
  .introduce__title { max-width: 345px; margin: 0 auto 30px; }
  .introduce__text { font-size: 1.4rem; text-align: left; line-height: 2; margin-bottom: 20px; }
  .introduce__text::after { background-size: 20px; height: 30px; }
  .introduce .story { width: 100%; -webkit-box-shadow: none; box-shadow: none; padding: 30px 0 10px; -webkit-box-shadow: 4px 4px 0px 0px black; box-shadow: 4px 4px 0px 0px black; }
  .introduce .story::before { width: 100px; opacity: .6; }
  .introduce .story::after { width: 100px; opacity: .6; }
  .introduce .story__title { font-size: 4rem; border-bottom: solid 7px #ad2424; padding: 0; margin: 0 20px; text-align: center; }
  .introduce .story__wrap { padding: 30px 15px; margin: 0; background: none; }
  .introduce .story__text { font-size: 1.4rem; line-height: 2; text-align: left; position: relative; z-index: 1; }
  .introduce .story__text ruby rt { font-size: 8px; } }