/* Common */
/* ============================================ */

html,
body {
  height: 100%;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "Helvetica Neue", "Helvetica", sans-serif;
  font-feature-settings: "palt";
  background-color: #000;
  color: #c3c3c3;
  line-height: 1.5em;
  text-align: center;
}

.pc {
display: inline-block;
}

.sp {
display: none;
}

/* CONENT */
/* ============================================ */

/* content */

#content-wrapper {
padding-bottom:120px;
}

/* wrapper */

#trailer-wrapper,#intro-wrapper,#story-wrapper,#cast-wrapper,#fm-wrapper,#theater-wrapper {
width:100%;
padding:0 3% 0 3%;
margin-bottom: 80px;
color: #f8e29c;
}

/* navi */

#navi-wrapper {
position: fixed;
bottom: 0;
left:0;
width:100%;
border-top: 1px solid #3e3e3e;
background-color: #000;
z-index:10000;
}

#navi-wrapper ul li {
display: inline-block;
padding:15px 20px;
border-top: 4px solid #000;
}

#navi-wrapper ul li img {
width: auto;
height: 46px;
}

#navi-wrapper ul li.on-blue {
border-top: 4px solid #52b8e2;
}

#navi-wrapper ul li.on-pink {
border-top: 4px solid #e3007f;
}

/* menu */

#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:#000;
z-index:15;
display:none;
opacity: 0.95;
}

#menu-wrapper {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:15;
display:none;
}

#menu-flex {
display: flex;
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
align-items: center;  /* 子要素をflexboxにより中央に配置する */
width: 100%;
height:100%;
text-align: center;
}

#inner {
width:100%;
max-width:1200px;
}

#btn-close {
position:absolute;
right:20px;
top:20px;
z-index:100;
cursor: pointer;
}

#btn-menu {
position:fixed;
top:20px;
right:20px;
z-index:10;
display:none;
cursor: pointer;
}

#btn-menu img,
#btn-close img {
width:87px;
height:auto;
}

#menu-flex ul.menu {
color:#fff;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size:26px;
letter-spacing: 0.1em;
z-index:30;
display: block;
margin: 0 auto;
}

#menu-flex ul.menu li a {
color:#f8e29c;
text-decoration: none;
padding:15px 20px;
display: inline-block;
font-weight: normal;
letter-spacing: 0.1em;
}

.menu .sns a {
display: inline-block;
padding: 10px;
}

.menu .sns a img {
width:50px;
height: auto;
}

/* hero */

#hero-container {
width:100%;
margin-bottom: 80px;
text-align: center;
}

#hero-container img.keyart  {
width:100%;
max-width: 1100px
}

#hero-container.snf h1 {
margin-top:-342px;
width: 100%;
}

#hero-container.flash h1 {
margin-top:-500px;
width: 100%;
}

#hero-container.snf h1 img {
width: 63.9vw;
max-width: 703px;
height: auto;
}

#hero-container.flash h1 img {
width: 70.45vw;
max-width: 775px;
height: auto;
}

#hero-container.snf h2 {
margin-top:-10px;
width: 100%;
}

#hero-container.flash h2 {
margin-top:60px;
width: 100%;
}

#hero-container.snf h2 img {
width: 86.81vw;
max-width:955px;
}

#hero-container.flash h2 img {
width: 90.36vw;
max-width:994px;
}

/* trailer */

#trailer-container {
margin: 0 auto;
max-width: 1200px;
}

#youtube-container {
padding:0;
border:solid 1px #3e3e3e;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#trailer-container ul {
margin-top: 30px;
}

#trailer-container ul li {
display: inline-block;
padding:0.9em 2em 1em 2em;
border:2px solid #f6de8f;
border-radius: 100px;
color: #f8e29c;
font-size: 20px;
line-height: 1.0em;
margin: 0 10px 20px 10px;
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
cursor: pointer;
}

#trailer-container ul li.on {
display: inline-block;
padding-top:calc(0.9em + 2px);
padding-right:calc(2em + 2px);
padding-bottom:calc(1em + 2px);
padding-left:calc(2em + 2px);
background: rgb(175,139,39);
background: linear-gradient(90deg, rgba(175,139,39,1) 0%, rgba(247,223,144,1) 50%, rgba(175,139,39,1) 100%);
border:none;
border-radius: 100px;
color: #000;
font-size: 20px;
}

/* intro */

#intro-container {
margin: 0 auto;
max-width: 820px;
}

#intro-container h2 {
margin-bottom: 50px;
text-align: center;
}

#intro-container h2 img {
width: auto;
height:81px;
}

#intro-container h3 {
text-align: center;
margin-bottom: 36px;
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
font-size: 30px;
line-height: 1.33em;
}

#intro-container p {
text-align: left;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 16px;
line-height: 1.85em;
}

/* img-scroll */

#img-scroll-wrapper {
overflow: hidden;
width:100%;
padding:0;
margin-bottom: 80px;
}

#img-scroll-slide-wrapper {
display: flex;
width: 3960px;
}

#img-scroll-slide-wrapper ul {
display: table;
width: 1980px;
}

#img-scroll-slide-wrapper ul li {
display: table-cell;
width: 330px;
}

#img-scroll-slide-wrapper ul li img {
width: 100%;
height: auto;
}

#img-scroll-slide-wrapper {
animation: infinity-loop 30s infinite linear 1s both; /* 無限ループアニメーションの設定 */
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
from {
transform: translateX(0vw);
}
to {
transform: translateX(-1980px);
}
}

/* story */

#story-container {
margin: 0 auto;
max-width: 820px;
}

#story-container h2 {
margin-bottom: 50px;
text-align: center;
}

#story-container h2 img {
width: auto;
height:81px;
}

#story-container p {
text-align: left;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 16px;
line-height: 1.85em;
}

#story-container ul {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

#story-container ul li {
width: 400px;
}

#story-container ul li img {
width: 100%;
height: auto;
}

/* cast fm */

#cast-container,#fm-container {
margin: 0 auto;
max-width: 820px;
}

#cast-container h2,#fm-container h2 {
margin-bottom: 50px;
text-align: center;
}

#cast-container h2 img,#fm-container h2 img {
width: auto;
height:81px;
}

#cast-container h3,#fm-container h3 {
text-align: center;
margin-top: 2em;
margin-bottom: 0.5em;
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
font-size: 20px;
line-height: 1.33em;
}

#cast-container h4,#fm-container h4 {
text-align: center;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro EB","NewRodinPro-EB";
font-size: 30px;
line-height: 1.33em;
}

.cast-pic  {
margin-bottom: 30px;
}

.cast-pic img {
width:250px;
height: auto;
border-radius: 200px;
}

#cast-container p,#fm-container p {
text-align: left;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 16px;
line-height: 1.85em;
}

/* music */

#music-container.snf {
padding:200px 30px 60px 30px;
background-image: url(../img/snf/bg_music.jpg);
}

#music-container.flash {
padding:280px 30px 60px 30px;
background-image: url(../img/flash/bg_music.jpg);
}

#music-container.snf,#music-container.flash  {
border:2px solid #b69f58;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
}

#music-container h3 {
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
font-size: 20px;
margin-bottom: 10px;
}

#music-container h4 {
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 14px;
margin-bottom: 0.2em;
margin-bottom: 40px;
}

#music-container dl {
margin-bottom: 30px;
}

#music-container dt {
font-family: "FOT-ニューロダン Pro DB","NewRodinPro-DB";
font-size: 16px;
line-height: 1.4em;
margin-bottom: 0.4em;
}

#music-container dd {
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 12px;
line-height: 1.4em;
margin-bottom: 0.4em;
opacity: 0.7;
}

a.btn-gold {
display: inline-block;
font-family: "FOT-ニューロダン Pro DB","NewRodinPro-DB";
font-size: 16px;
color: #000;
padding:1em 2em;
background: rgb(175,139,39);
background: linear-gradient(90deg, rgba(175,139,39,1) 0%, rgba(247,223,144,1) 50%, rgba(175,139,39,1) 100%);
outline:none;
border-radius: 100px;
}

/* theater */

#theater-container {
margin: 0 auto;
max-width: 820px;
}

#theater-container h2 {
margin-bottom: 50px;
text-align: center;
}

#theater-container h2 img {
width: auto;
height:81px;
}

#theater-container h3 {
text-align: center;
margin-bottom: 36px;
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
font-size: 30px;
line-height: 1.33em;
}

#theater-container h3 span.break {
display: inline-block;
}

#theater-container h3 span.small {
font-size: 0.8em;
}

#ticket-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width:100%;
margin: 30px 0;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 16px;
}

#ticket-container > div {
margin:0 20px 20px 20px;
}

#ticket-container p {
display: block;
margin-bottom: 0.5em;
}

.notice {
display: block;
text-align: center;
margin: 30px 0;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 12px;
line-height: 1.33em;
opacity: 0.8;
}

#theater-container h4 {
text-align: center;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro B","NewRodinPro-B";
font-size: 22px;
line-height: 1.33em;
}

#theater-container table {
width:100%;
margin-bottom: 40px;
}

#theater-container tr {
border-bottom: 1px solid #3f3a39;
}

#theater-container tr.header {
background-color: #3f3a39;
}

#theater-container td {
padding:1em 1.5em;
line-height: 1.4em;
vertical-align: middle;
}

#theater-container td:nth-of-type(1) {
width: 6em;
}

#theater-container td:nth-of-type(3) {
width: 6em;
}

#theater-container td:nth-of-type(4) {
width: 12em;
}

#theater-container td a {
text-decoration: underline;
}

/* footer */

#footer-container h2 {
margin-bottom: 30px;
}

#footer-container h2 img {
width: 396px;
height: auto;
}

#sns-container {
display: flex;
justify-content: center;
margin-bottom: 60px;
}

#sns-container li {
display: block;
width:157px;
}

#sns-container li a img {
width:108px;
height: auto;
}

#gotheater {
margin-bottom: 60px;
}

#gotheater img {
width:348px;
height: auto;
}

#beling {
text-align: center;
margin-bottom: 30px;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size: 14px;
line-height: 1.7em;
color:#f8e29c;
opacity: 0.8;
max-width: 800px;
display: inline-block;
}

#beling span {
display: inline-block;
}

#copyright {
font-size: 9px;
opacity: 0.6;
}


/* 860以下 */
/* ============================================ */

/* index 860 */

@media only screen and (max-width: 860px) {

.pc {
display: none;
}

.sp {
display: inline-block;
}

/* content 860*/

#content-wrapper {
padding-bottom:20vw;
}

/* wrapper 860 */

#trailer-wrapper,#intro-wrapper,#story-wrapper,#cast-wrapper,#fm-wrapper,#theater-wrapper {
margin-bottom: 12.5vw;
}

/* navi 860 */

#navi-wrapper ul li {
padding:4vw 3.12vw;
}

#navi-wrapper ul li img {
width: auto;
height: 6.5vw;
}

/* menu */

#btn-close {
position:absolute;
right:3.12vw;
top:3.12vw;
z-index:100;
cursor: pointer;
}

#btn-menu {
position:fixed;
top:3.12vw;
right:3.12vw;
z-index:10;
display:none;
cursor: pointer;
}

#btn-menu img,
#btn-close img {
width:13.6vw;
height:auto;
}

#menu-flex ul.menu {
color:#fff;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
font-size:5vw;
letter-spacing: 0.1em;
z-index:30;
display: block;
margin: 0 auto;
}

#menu-flex ul.menu li a {
color:#f8e29c;
text-decoration: none;
padding:3vw 5vw;
display: inline-block;
font-weight: normal;
letter-spacing: 0.1em;
}

.menu .sns a {
display: inline-block;
padding: 3vw;
}

.menu .sns a img {
width:9vw;
height: auto;
}

/* hero 860 */

#hero-container {
margin-bottom: 12.5vw;
}

#hero-container.snf h1 {
margin-top:-27.5vw;
}

#hero-container.flash h1 {
margin-top:-28.12vw;
}

#hero-container.snf h1 img {
width: 92.5vw;
height: auto;
}

#hero-container.flash h1 img {
width: 92.81vw;
height: auto;
}

#hero-container.snf h2 {
margin-top:0;
width: 100%;
}

#hero-container.flash h2 {
margin-top:6.89vw;
}

#hero-container.snf h2 img {
width: 68.9vw;
}

#hero-container.flash h2 img {
width: 68.9vw;
}

/* trailer 860 */

#youtube-container {
padding:0;
}

#trailer-container ul {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 4.68vw;
}

#trailer-container ul li {
display: inline-block;
padding:0.9em 2em 1em 2em;
border-radius: 100vw;
font-size: 3.75vw;
margin: 0 0 3.12vw 0;
}

#trailer-container ul li.on {
font-size: 3.75vw;
}

/* intro 860 */

#intro-container h2 {
margin-bottom: 7.81vw;
text-align: center;
}

#intro-container h2 img {
width: auto;
height:9.37vw;
}

#intro-container h3 {
margin-bottom: 6vw;
font-size: 5vw;
line-height: 1.5em;
}

#intro-container p {
margin-bottom: 6vw;
font-size: 3.43vw;
}

/* img-scroll */

#img-scroll-wrapper {
margin-bottom: 15vw;
}

#img-scroll-slide-wrapper {
display: flex;
width: 600vw;
}

#img-scroll-slide-wrapper ul {
display: table;
width: 300vw;
}

#img-scroll-slide-wrapper ul li {
display: table-cell;
width: 50vw;
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
from {
transform: translateX(0vw);
}
to {
transform: translateX(-300vw);
}
}

/* story 860 */

#story-container {
margin: 0 auto;
max-width: 820px;
}

#story-container h2 {
margin-bottom: 7.81vw;
text-align: center;
}

#story-container h2 img {
width: auto;
height:9.37vw;
}

#story-container p {
margin-bottom: 6vw;
font-size: 3.43vw;
}

#story-container ul {
display: block;
justify-content: space-between;
margin-bottom: 4.68vw;
}

#story-container ul li {
width: 100%;
margin-bottom: 4.68vw;
}

#story-container ul li img {
width: 100%;
height: auto;
}

/* cast fm 860 */

#cast-container,#fm-container {
margin: 0 auto;
max-width: 820px;
}

#cast-container h2,#fm-container h2 {
margin-bottom: 7.81vw;
text-align: center;
}

#cast-container h2 img,#fm-container h2 img {
width: auto;
height:9.37vw;
}

#cast-container h3,#fm-container h3 {
font-size: 4.12vw;
}

#cast-container h4,#fm-container h4 {
margin-bottom: 4.68vw;
font-size: 5.68vw;
line-height: 1.33em;
}

.cast-pic  {
margin-bottom: 4.68vw;
}

.cast-pic img {
width:40vw;
border-radius: 100vw;
}

#cast-container p,#fm-container p {
margin-bottom: 6vw;
font-size: 3.43vw;
}

/* music 860 */

#music-container.snf {
padding:26vw 6vw 10vw 6vw;
background-image: url(../img/snf/bg_music.jpg);
}

#music-container.flash {
padding:45vw 6vw 10vw 6vw;
background-image: url(../img/flash/bg_music.jpg);
background-size: 250vw;
background-position: center top;
}

#music-container.snf,#music-container.flash  {
border:2px solid #b69f58;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
}

#music-container h3 {
font-size: 4.68vw;
margin-bottom: 0.6em;
}

#music-container h4 {
font-size: 3.12vw;
margin-bottom: 2em;
}

#music-container dl {
margin-bottom: 4.68vw;
}

#music-container dt {
font-size: 3.75vw;
}

#music-container dd {
font-size: 2.81vw;
}

#music-container a {
font-size: 3.5vw;
padding:1em 2em 1.2em 2em;
}

/* theater 860 */

#theater-container h2 {
margin-bottom: 7.81vw;
text-align: center;
}

#theater-container h2 img {
width: auto;
height:9.37vw;
}

#theater-container h3 {
margin-bottom: 8vw;
font-size: 6vw;
}

#theater-container h4 {
margin-bottom: 8vw;
font-size: 4.68vw;
}

#theater-container table {
width:100%;
margin-bottom: 8vw;
}

#theater-container td {
font-size:3.43vw;
line-height: 1.4em;
padding:1.2em 0.3em;
}

#theater-container td:nth-of-type(1) {
width: 5em;
}

#theater-container td:nth-of-type(3) {
width: 5em;
}

#theater-container td:nth-of-type(4) {
width: 6em;
}

#theater-container td a {
text-decoration: underline;
}

/* footer 860 */

#footer-container h2 {
margin-bottom: 4vw;
}

#footer-container h2 img {
width: 61.87vw;
height: auto;
}

#sns-container {
display: flex;
justify-content: center;
margin-bottom: 8vw;
}

#sns-container li {
display: block;
width:20vw;
}

#sns-container li a img {
width:16.87vw;
height: auto;
}

#gotheater {
margin-bottom: 6vw;
}

#gotheater img {
width:54.37vw;
height: auto;
}

#beling {
margin-bottom: 5vw;
font-size: 2.5vw;
}

#copyright {
font-size: 2.18vw;
opacity: 0.6;
}

}