@charset 'utf-8';
@import url("https://fonts.googleapis.com/css?family=Lato:700i,900");

/* reset */
*, ::before, ::after { background-repeat: no-repeat; -webkit-box-sizing: inherit; box-sizing: inherit; }
::before, ::after { text-decoration: inherit; vertical-align: inherit; }
html { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, footer, header, nav, section { display: block; }
body { margin: 0; }
figcaption, figure, main { display: block; }
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }
nav ol, nav ul { list-style: none; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
b, strong { font-weight: inherit; font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg { fill: currentColor; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }
[hidden] { display: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 100%; font-weight: normal; }
blockquote, figure, p { margin: 0; }
dl, dd, ol, ul { margin: 0; padding: 0; }
ul { list-style: none; }
i { font-style: normal; }

/* base */
html { font-size: 50%; }
@media screen and (min-width:1280px) {
  html { font-size: 62.5%; }
}
body { font-family: ryo-gothic-plusn, sans-serif; font-size: 16px; line-height: 1; color: #000; background: #fff; -webkit-font-feature-settings: "liga", "clig", "palt"; font-feature-settings: "liga", "clig", "palt"; }
@media (-webkit-min-device-pixel-ratio:2) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
::-moz-selection { background: #f3ed40; color: #fff; text-shadow: none; }
::selection { background: #f3ed40; color: #fff; text-shadow: none; }
a, a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #8d8927; -webkit-transition: all 0.2s; transition: all 0.2s; }
img[src$=".svg"] { width: 100%; height: auto; }

/*fade*/
body { 
    animation: fadeIn 0.8s ease-in-out  0s 1 normal;
    -webkit-animation: fadeIn 0.8s ease-in-out 0s 1 normal; }
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* common */
p:not([class]) { line-height: 2; }
p:not([class]):nth-last-child(n+2) { margin-bottom: 1em; }
.sxn-heading { font-family: 'Lato', sans-serif; font-size: 3.2rem; font-weight: 900; letter-spacing: 0.03em; line-height: 2; text-align: center; }
.sxn-heading.-bg { background: url("../img/heading-bg.png") center center no-repeat; background-size: 23rem; }
.sxn-heading.-line { border-top: 4px solid #000; border-bottom: 4px solid #000; }
.q-mark { display: inline-block; padding-left: 0.1em; font-size: 105%; line-height: 1; -webkit-transform: scale(1.25, 1); transform: scale(1.25, 1); }
.lead-copy { font-size: 2.4rem; font-weight: 700; color: #000; letter-spacing: 3.13%; text-align: center; line-height: 1.67; }
.text-small { font-size: 14px; letter-spacing: 0.03em; line-height: 2; text-align: justify; }
.text-attention { font-weight: 800; color: #d73a03; letter-spacing: 3.13%; text-align: center; }
.col-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
@media screen and (max-width:767px) {
  .col-wrapper > .c2 { width: 100%; }
  .col-wrapper > .c2:nth-child(n+2) { margin-top: 7.72%; }
  .col-wrapper > .c4 { width: 50%; }
}
@media screen and (min-width:768px) {
  .col-wrapper > .c2 { width: 48.33%; }
  .col-wrapper > .c4 { width: 25%; }
  .col-wrapper > .-l { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; }
}
.stripe-block { background-image: -webkit-repeating-linear-gradient(#f1f1f1 0px, #f1f1f1 1px, #fff 1px, #fff 4.9rem); background-image: repeating-linear-gradient(#f1f1f1 0px, #f1f1f1 1px, #fff 1px, #fff 4.9rem); }
.grid-block { background-color: #e9e341; background-image: linear-gradient(#e0da40 1px, transparent 0), linear-gradient(90deg, #e0da40 1px, transparent 0); background-size: 1.2rem 1.2rem; background-repeat: repeat; }
.sns-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.sns-links > .item { width: 38px; height: 38px; }
.sns-links > .item:nth-child(n+2) { margin-left: 12px; }
.sns-links > .item > a { display: block; padding: 15%; border-radius: 50%; background-color: #000; }
.sns-links > .item > a:hover { background-color: #8d8927; }

/* header */
.nav-container { position: fixed; z-index: 100; width: 100%; }
@media screen and (max-width:1023px) {
  .nav-container > .nav-wrapper { position: absolute; top: -100vh; width: 100%; height: 100vh; opacity: 0; }
  .nav-container .contents-nav { margin-top: 56px; margin-bottom: 32px; }
  .nav-container > .nav-btn { position: absolute; top: 0; right: 0; z-index: 102; }
}
@media screen and (min-width:1024px) {
  .nav-container { height: 72px; overflow: hidden; }
}
.contents-nav > .item { font-family: 'Lato', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: 0.03em; text-align: center; }
.contents-nav a, .contents-nav a:link, .contents-nav a:visited { color: #000; }
.contents-nav a:hover, .contents-nav a:active { color: #8d8927; }
@media screen and (max-width:1023px) {
  .contents-nav > .item { font-size: 18px; margin-top: 24px; }
  .nav-btn { width: 48px; height: 40px; display: block; cursor: pointer; background-color: #f3ed40; }
  .nav-btn > .icon { position: absolute; top: 20px; left: 50%; margin-left: -12px; width: 24px; height: 1px; display: block; background-color: #000; }
  .nav-btn > .icon::before, .nav-btn > .icon::after { background-color: #000; display: block; content: ''; -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); }
  .nav-btn > .icon::before { position: absolute; top: 0; left: 0; width: 24px; height: 1px; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  .nav-btn > .icon::after { position: absolute; top: 0; right: 0; width: 24px; height: 1px; -webkit-transform: translateY(6px); transform: translateY(6px); }
}
@media screen and (min-width:1024px) {
  .nav-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px 8.33%; background-color: #f3ed40; }
  .contents-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: auto; width: 100%; }
  .contents-nav > .item { margin-right: 3.77%; }
}
@media screen and (max-width:1023px) {
  .-active .nav-wrapper { top: 0; opacity: 1; background-color: rgba(243, 237, 64, 0.9); -webkit-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); }
  .-active .nav-btn > .icon { background-color: transparent; }
  .-active .nav-btn > .icon::before { width: 24px; -webkit-transform: translateY(0) rotate(45deg) scale(1); transform: translateY(0) rotate(45deg) scale(1); }
  .-active .nav-btn > .icon::after { width: 24px; -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
}
.sxn-header { position: relative; }
.sxn-header > a .badge { position: absolute; right: 0; }
.sxn-header > a .bnr { position: absolute; right: 0; }
@media screen and (max-width:767px) {
  .sxn-header { margin: 0 8.53% 8.53%; }
  .sxn-header > .img { margin: 0 auto; width: 60.13%; display: block; }
  .sxn-header > .txt { margin-top: 6.43%; margin-bottom: 7.72%; }
  .sxn-header .trailer { margin-top: 2.5%; width: 54.02%; }
  .sxn-header .ticket > img { margin-top: 2.5%; width: 54.02%; }
  .sxn-header > a .badge { bottom: 5%; width: 38.59%;  }
  .sxn-header > a .bnr { position: relative; right: initial; }
}
@media screen and (min-width:768px) {
  .sxn-header { margin-left: 5.56%; margin-right: 4.58%; }
  .sxn-header > .img { position: absolute; right: 0; width: 51.31%; }
  .sxn-header > .logo, .sxn-header > .txt { width: 48.69%; }
  .sxn-header > .logo { padding-top: 4.59%; }
  .sxn-header > .txt { margin: 3.28% 0; }
  .sxn-header .trailer { margin-left: 0%; margin-bottom: 3.61%; width: 23.67%; }
  /*.sxn-header .ticket { margin-left: 0.31%; }*/
  .sxn-header .ticket > img { width: 13.77%; vertical-align: top; }
  .sxn-header .ticket:hover { opacity: 0.8; }
  .sxn-header > a .badge { bottom: 17.28%; width: 15.15%; }
  .sxn-header > a .bnr { bottom: 4.28%; width: 16.15%; right: -0.56%; }
}
@media screen and (min-width:1024px) {
  .sxn-header { margin-left: 8.33%; margin-right: 6.94%; padding-top: 72px; }
}
.trailer-btn { display: inline-block; background-color: #f3ed40; font-weight: 700; color: #140402; letter-spacing: 0.31em; text-align: center; }
.trailer-btn.black { background: #140402; color: #fff; letter-spacing: 0em;}
.trailer-btn:hover { background-color: rgba(243, 237, 64, 0.8); }
.trailer-btn.black:hover { background-color: rgba(64, 64, 64, 0.8); }
@media screen and (max-width:767px) {
  .trailer-btn { padding-top: 4.82%; padding-bottom: 4.82%; font-size: 4.8vw; }
}
@media screen and (min-width:768px) {
  .trailer-btn { padding-top: 1.23%; padding-bottom: 1.23%; font-size: 1.25vw; }
}

/* slide */
.slider-wrapper { width: 100%; height: 33.33vw !important; overflow: hidden; }

/* intro */
.sxn-intro { margin: 0 auto; }
.sxn-intro > .lead-copy { margin-top: 4rem; margin-bottom: 3.2rem; }
@media screen and (max-width:767px) {
  .sxn-intro { width: 82.93%; padding-top: 4rem; padding-bottom: 4rem; }
  .sxn-intro > .col-wrapper { margin-bottom: 4rem; }
}
@media screen and (min-width:768px) {
  .sxn-intro { width: 88.89%; padding-top: 6.4rem; padding-bottom: 6.4rem; }
  .sxn-intro > .col-wrapper { margin-bottom: 6.4rem; }
}
@media screen and (min-width:1024px) {
  .sxn-intro { width: 83.33%; }
  .sxn-intro > .awards-list { margin: 0 auto; width: 80%; }
}
.awards-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
@media screen and (max-width:767px) {
  .awards-list > .item { margin: 0.64%; }
  .awards-list > .item:nth-child(1) { width: 54.98%; }
  .awards-list > .item:nth-child(2) { width: 39.55%; }
  .awards-list > .item:nth-child(3) { width: 46.3%; }
  .awards-list > .item:nth-child(4) { width: 51.13%; }
  .awards-list > .item:nth-child(5) { width: 21.22%; }
  .awards-list > .item:nth-child(6) { width: 24.12%; }
  .awards-list > .item:nth-child(7) { width: 25.08%; }
  .awards-list > .item:nth-child(8) { width: 23.47%; }
}
@media screen and (min-width:768px) {
  .awards-list > .item { margin: 7px; }
  .awards-list > .item:nth-child(1) { width: 48.54%; }
  .awards-list > .item:nth-child(2) { width: 34.27%; }
  .awards-list > .item:nth-child(3) { width: 32.71%; }
  .awards-list > .item:nth-child(4) { width: 35.83%; }
  .awards-list > .item:nth-child(5) { width: 17.29%; }
  .awards-list > .item:nth-child(6) { width: 20.83%; }
  .awards-list > .item:nth-child(7) { width: 20.83%; }
  .awards-list > .item:nth-child(8) { width: 19.17%; }
}

/* story */
.sxn-story { margin: 0 auto; }
@media screen and (max-width:767px) {
  .sxn-story { width: 82.93%; padding-top: 4rem; padding-bottom: 4rem; }
  .sxn-story > .col-wrapper { margin-top: 4rem; }
}
@media screen and (min-width:768px) {
  .sxn-story { width: 88.89%; padding-top: 6.4rem; padding-bottom: 8rem; }
  .sxn-story > .col-wrapper { margin-top: 6.4rem; }
}
@media screen and (min-width:1024px) {
  .sxn-story { width: 83.33%; }
}

/* how cheating */
.sxn-how { position: relative; border: 4px solid #000; border-top-width: 0; background: url("../img/how-bg.png") 0 0 repeat; background-size: 258px; }
.sxn-how > .lead-copy { margin-bottom: 1em; }
@media screen and (max-width:767px) {
  .sxn-how { margin: 4rem auto; width: 91.47%; padding-bottom: 4rem; }
  .sxn-how > .col-wrapper { margin: 2.4rem 4.66% 3.2rem; }
  .sxn-how > .ornament-pen, .sxn-how > .ornament-signature { display: none; }
}
@media screen and (min-width:768px) {
  .sxn-how { margin: 8rem auto; width: 88.89%; padding-bottom: 6.4rem; }
  .sxn-how > .col-wrapper { margin: 4rem 5.42% 6.4rem; }
  .sxn-how > .ornament-pen { position: absolute; top: 1.2rem; right: 1.33%; width: 14.58%; }
  .sxn-how > .ornament-signature { position: absolute; bottom: -0.8rem; left: -3.33%; width: 23.67%; mix-blend-mode: multiply; }
  p.center img { max-width: 360px; }
}
@media screen and (min-width:1024px) {
  .sxn-how { width: 83.33%; }
  p.center img { max-width: 400px; }
}
.method-card { padding: 1.4rem 1.4rem 3.2rem 1.4rem; background-color: #fff; }
.method-card > img { width: 100%; }
.method-card > .method { margin: 2.4rem 0 1.2rem; font-size: 2rem; font-weight: 700; letter-spacing: 0.03em; text-align: center; }
.method-card > .rating { font-size: 2rem; font-weight: 700; color: #f8e71c; letter-spacing: 0.03em; text-align: center; }
.method-card > .rating > span { color: #c5c5c5; }
p.center img { text-align: center; margin: 1.2em auto; display: block; }
/* cast */
.sxn-cast { margin: 0 auto; }
@media screen and (max-width:767px) {
  .sxn-cast { width: 82.93%; padding-top: 4rem; padding-bottom: 4rem; }
}
@media screen and (min-width:768px) {
  .sxn-cast { width: 88.89%; padding-top: 4rem; padding-bottom: 8rem; }
}
@media screen and (min-width:1024px) {
  .sxn-cast { width: 83.33%; }
}
.profile-card { padding: 4rem 0; border-bottom: 4px solid #000; }
.profile-card > .title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.profile-card > .name { font-size: 18px; font-weight: 500; color: #ac9f00; letter-spacing: 0.03em; line-height: 1.56; }
.profile-card > .name > span { padding-right: 1em; font-weight: 700; color: #000; }
.profile-card > .role { margin: 0.8rem 0 2.4rem; font-size: 14px; font-weight: 500; color: #878787; letter-spacing: 0.03em; }
.profile-card .message { margin: 3.2rem 0 1.6rem; font-family: 'Lato', sans-serif; font-style: italic; font-size: 14px; font-weight: 700; color: #c52100; letter-spacing: 0.03em; }
.profile-card.-staff { border-bottom-color: #f3ed40; }
.profile-card.-staff > .text-small { margin-top: 2.4rem; }
@media screen and (max-width:767px) {
  .profile-card > .name > span { display: block; }
  .profile-card > .portrait { margin-bottom: 2.4rem; }
}
@media screen and (min-width:768px) {
  .profile-card { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
  .profile-card > .title, .profile-card > .name, .profile-card > .role { width: 100%; }
  .profile-card > .portrait { margin-right: auto; width: 25%; }
  .profile-card > .txt { width: 72.5%; }
}

/* theater */
.sxn-theater { margin: 0 auto; }
@media screen and (max-width:767px) {
  .sxn-theater { width: 82.93%; padding-top: 3.2rem; padding-bottom: 4rem; }
  .sxn-theater > .sxn-heading { margin-bottom: 1.6rem; }
}
@media screen and (min-width:768px) {
  .sxn-theater { width: 88.89%; padding-top: 4rem; padding-bottom: 6.4rem; }
  .sxn-theater > .sxn-heading { margin-bottom: 2.4rem; }
}
@media screen and (min-width:1024px) {
  .sxn-theater { width: 61.11%; }
}
.schedule-table { width: 100%; }
.schedule-table th { font-weight: 500; text-align: left; }
.schedule-table .area { text-align: center; }
@media screen and (max-width:767px) {
  .schedule-table th, .schedule-table td { display: inline-block; }
  .schedule-table .head { display: none; }
  .schedule-table .area { display: block; padding: 0.8rem 1.6rem; background-color: #000; color: #fff; }
  .schedule-table .city, .schedule-table .tname, .schedule-table .tel, .schedule-table .tdate { width: 100%; padding: 0.4rem; }
  .schedule-table .city::before, .schedule-table .tname::before, .schedule-table .tel::before, .schedule-table .tdate::before { font-size: 12px; width: 5em; display: inline-block; }
  .schedule-table .city { padding-top: 1.6rem; }
  .schedule-table .city::before { content: '都道府県:'; }
  .schedule-table .tname::before { content: '劇場名:'; }
  .schedule-table .tel::before { content: 'TEL:'; }
  .schedule-table .tdate { padding-bottom: 1.6rem; border-bottom: 1px solid #000; }
  .schedule-table .tdate::before { content: '公開日:'; }
}
@media screen and (min-width:768px) {
  .schedule-table { border-top: 1px solid #000; }
  .schedule-table th, .schedule-table td { padding: 1.6rem; border-bottom: 1px solid #000; }
  .schedule-table .head { background-color: #000; color: #fff; }
  .schedule-table .head th { padding: 0.8rem 1.6rem; }
  .schedule-table .city { width: 34.09%; text-align: center; }
}

/* footer */
.footer-container > .sns-links { margin: 4rem 0 3.2rem; }
.footer-container > .credit, .footer-container > .copyright { font-size: 12px; color: #343434; letter-spacing: 0.04em; text-align: center; line-height: 2em; }
.footer-container > .logo { margin: 1.6rem auto; width: 106px; }
@media screen and (max-width:767px) {
  .footer-container { margin: 6.4rem auto; width: 82.93%; }
}
@media screen and (min-width:768px) {
  .footer-container { margin: 8rem auto; width: 83.33%; }
  .footer-container > .ticket { margin: 0 auto; max-width: 600px; display: block; }
  .footer-container > .ticket:hover { opacity: 0.8; }
}

/* helper */

/* typo */
._center { text-align: center !important; }
._left { text-align: left !important; }
._right { text-align: right !important; }

/* layout */
._m0 { margin: 0 !important; }
._mt0 { margin-top: 0 !important; }
._mb0 { margin-bottom: 0 !important; }
._p0 { padding: 0 !important; }
._pt0 { padding-top: 0 !important; }
._pb0 { padding-bottom: 0 !important; }
._cf::before, ._cf::after { content: " "; display: table; }
._cf::after { clear: both; }
._pull-rt { float: right !important; }
._pull-lt { float: left !important; }

/* responsive */
._pc { display: none; }
@media screen and (min-width:768px) {
  ._pc { display: inline-block; }
  ._sp { display: none; }
}

/* comment */

.comment-text b { background: #F3ED40; font-size: 1.1em; }

.sxn-comment {
    width: 83.33%;
    margin: 0 auto;
}

#comment ul.comment-wrap{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 6rem 0 2.5rem;
}

#comment li.comment-order {
	width: 49%;
	background: rgba(233,227,65,.5);
    display: flex;
    flex-direction:column;
    margin-bottom: 1.5em;
    padding: 2.5rem;
}

#comment h3.comment-h3 {
	margin-top: 1.7rem;
    font-weight: 700;
    color: #000;
    order: 2;
    text-align: right;
}

#comment p.comment-text {
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 2;
    text-align: justify;
    order: 1;
}

@media screen and (max-width:767px) {
	#comment ul.comment-wrap{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
    flex-direction:column;
}
#comment li.comment-order{
	width: 100%;
}
	
	}