@charset "utf-8";

/*
//
//
// for PC
//
//
*/


/* base */
body{ color: #fff; background:#000 ; background-size: calc(1280/3000*100vw) auto;  }
body{ background:#000 url("../assets/background.webp") no-repeat center top; background-size: cover; }
body{ font-family: YakuHanMPs, "Zen Old Mincho", serif; }
.fnt-bsc{font-family: YakuHanMPs, "Zen Old Mincho", serif; }
.fnt-bsc.noyh{font-family: "Zen Old Mincho", serif;}
.fnt-nrw86{transform: scale(0.86, 1); transform-origin: top left; width: 116.279069%;}

.fnt-ac0{ color:#000; }
.fnt-ac1{ color:#b4a678; }
.fnt-ac2{ color:#e60013; }
.fnt-ac3{ color:#26ff00; }
.fnt-ac4{ color:#ff2c6d; }
.fnt-ac5{ color:#919696; }

.fnt-ts{ text-shadow:-2px 0px 0px #8ffbff,2px 0px 0px #ffea01; }

.ttl1{ color: #000; background-color: #b4a678; padding: .2em .4em; }
.ttl2{ color: #b4a678;}
.ttl3{ color: #b4a678; border:#b4a678 solid 1px; padding: .2em .4em; }
.ttl4{font-weight: normal; line-height: 1.2; padding: .2em .2em .2em .4em; text-align: left; border-bottom: #fff dotted 1px; border-left: #fff solid 3px;}
.ttl5{ color: #000; background: #b4a678; padding: .25em; }

/* ---- common style ---- */
a,a:visited {color: #e60013;}
a:hover,a:active {color: #e60013; }

.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 0.7; cursor: pointer; }
.hv_scale{ display: inline-block; transform: scale(1,1); transform-origin: center center;  }
.hv_scale:hover{ transition: all .05s 0s ease; transform: scale(1.1,1.1); cursor: pointer; }

.ilink{ display: inline-block; padding: 0.6em 1.6em 0.6em 1.6em ; border:#b4a678 solid .2em ; text-decoration: none; font-size: 1em; font-weight: 600; line-height: 1; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #b4a678; background-color: #000; }
.ilink:hover{ text-decoration: none; background-color: #b4a678; color: #fff; }

.inview{ animation:inview 0.4s .2s ease-out both paused; }
.inview-start{ animation:inview-start 0.4s .2s ease-out both running; }
.inview-act{ transform-origin: left top; transition: all .5s ease .1s;  }



.background{ width: 100%; height: 100%; min-height: 100%; position: absolute; top:0; z-index: 1; background: url("../../images/common/background-t2-ptn.webp") repeat center top; background-size: calc(60/3000*100em);  }


.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }
.part-body{ position: relative; background-color: transparent; max-width: 1000px; padding: 0; margin: 0 auto; overflow: visible; z-index: 2; }
.part-body > .inner{  }


/* part */
.cont-header{ position: relative; margin-bottom: 0; }
.cont-header .inner{ width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2; }
.cont-header .title{ width: 80%; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.cont-header .title-logo{ width: 40%; }
.cont-header .title-text{ width: 60%; }
.cont-header .lead-text{ font-size: 2.2em; padding: 1em 2em; text-align: center; line-height: 1.75;  }

.cont-block-main{ padding: 0; position: relative; margin-bottom: 0; background-color: rgba(0, 0, 0, 0); border:rgba(255, 255, 255, 0.1) solid 5px; border:none; }
.cont-block-main .inner{ padding: 1em 8em; margin: 0 auto; text-align: center; }

.season-ttl{ width: 100%; margin-bottom:2em; text-align: center; }
.season-ttl > p{ font-size: 2.4em; font-weight: bold; display: inline-block; background-color: #FFF; color: #000; line-height: 1; margin: 0; padding: .5em 1em; letter-spacing: .1em;}

.season-exp{ font-size: 1.8em; font-weight: bold; display: inline-block; line-height: 1.5; margin: 0 0 2em 0; padding: .25em 1em; letter-spacing: .1em;}

.subcont-ttl{ width: 100%; margin-bottom:2em; text-align: center; }
.subcont-ttl > p{ font-size: 1.7em; font-weight: bold; display: inline-block; line-height: 1; margin: 0; padding: .25em 1em; letter-spacing: .1em;}

.frame-qst{ background-color: #000; border:#b4a678 solid 1px; padding: 3em; margin:0 0 3em 0; text-align: left; position: relative; }

.text-qst-nmb{ font-size: 2em; font-weight: bold; display: inline-block; background-color: #b4a678; color: #000; line-height: 1; margin: 0  0 .5em 0; padding: .25em .5em; letter-spacing: .1em; }
.text-qst-q{ font-size: 1.9em; font-weight: 600; letter-spacing: .1em; color:#b4a678; margin-bottom: 0; }
.text-qst-radio{ display: flex; flex-wrap: wrap; font-size: 1.6em; font-weight: 600; letter-spacing: .1em; margin-top: 1.5em; }
.text-qst-radio .radio{ margin-bottom: .25em; }
.text-qst-radio .qst-radio-col2{ padding-right: 2em; }

.text-qst-answer{ display: flex; flex-wrap: nowrap; font-size: 1.6em; font-weight: 600; letter-spacing: .1em; color:#e60013; }
.text-qst-answer .hd{ padding: .25em; border:#e60013 solid 1px; margin:0 .5em 0 0; }
.text-qst-answer .answer{ padding: .25em;  }

.icon-qst{ width: 5em; text-align: center; position: absolute; right:1em; top:3em; line-height: 0; }
.icon-qst p.correct{ font-size: 5em; font-weight: 600; color:#e60013; }
.icon-qst p.fault{ font-size: 6em; font-weight: 600; }

.btn-a{ text-align: center; margin-bottom:3em;}
.btn-a a{ display: inline-block; font-size: 2em; font-weight: bold; background-color: #e60013; color: #FFF; line-height: 1; margin: 0; padding: 1em 4em; letter-spacing: .1em; text-decoration: none; }
.btn-a a:hover{ background-color: #e60013; transform: scale(1.05); }
.btn-a.dis a{ background-color: #666666; color: #FFF; pointer-events: none; }

.btn-t{ width: 60%; text-align: center; margin:0 auto 3em auto;}
.btn-t a{ display: block; font-size: 2.4em; font-weight: bold; background-color: #fff; color: #000; line-height: 1; margin: 0; padding: .5em; letter-spacing: .1em; text-decoration: none; }
.btn-t a:hover{ background-color: #e60013; transform: scale(1.05); }
.btn-t a span{ display: block; padding-top: 1em; font-size: 0.5em; letter-spacing: 0; }
.btn-t.dis a{ background-color: #666666; color: #FFF; pointer-events: none; }

.answer-count{ text-align: center; margin-bottom:5em;}
.answer-count > p{ font-size: 3em; font-weight: 600; letter-spacing: .1em;}
.answer-count > p > span {color: #e60013;}

.prz-cont{}
.prz-title{ width: 100%; margin-bottom:2em; text-align: center; }
.prz-title > p{ font-size: 2.0em; font-weight: bold; display: inline-block; background-color: #FFF; color: #000; line-height: 1; margin: 0; padding: .5em 1em; letter-spacing: .1em;}
.wp-thm{ width: 40%; margin: 0 auto 2em auto; }


.movie-link{ width: 80%; margin: 0 auto 2em auto; display: flex; justify-content: left; align-items: center; flex-wrap: wrap; background-color: #FFF; border:#DDD solid 2px; padding: .25em; text-decoration: none; position: relative; }
.movie-link::after{ content:"▶︎"; position: absolute; top:1.65em; right:0; z-index: 2; color: #DDD; font-size: 3em; transform: scaleX(.5); }
.movie-link .thumb{ width: 30%; padding: 1em; }
.movie-link .text{ width: 70%; padding: 1em; }
.movie-link .text p{ font-size: 1.7em; letter-spacing: .1em; font-weight: 600; color: #000; margin-bottom: 0; }

.official-link { text-align: center; margin-bottom: 1em; }
.official-link ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; }
.official-link ul li{ list-style-type: none; width: 20em; margin: 1em; padding: 0; }
.official-link ul li img{ border: #CCC solid 1px; }

.cont-footer{ position: relative; margin-bottom: 0;  }
.cont-footer .inner{ padding: 5em 0 1em 0; margin: 0 auto; text-align: center; }
.footer-link{ font-size: 1.4em; margin: 0 auto 2em auto;}
.footer-link a{ color: #FFF; }
.footer-link a:hover{ color: #e60013; }
.copyrihgt{ color: #FFF; text-align: center; font-size: 1em; margin-bottom: 0; padding: 0; }


@media (min-width:1000px) {
body{ font-size: 10px; }
}


/*
//
//
// for Smart Phone
//
//
*/


@media (max-width: 767px) {


/* base */
body{ min-height: 100vh; }

.part-body{ max-width: inherit; }
.part-body > .inner{ padding: 0; }


/* part */
.cont-header{ position: relative; margin-bottom: 0; }
.cont-header .inner{ width: 100%; margin: 0 auto; padding: 1em 0 0 0;  }
.cont-header .title{ margin-bottom: 3em; }
.cont-header .title-logo{ width: 60%; }
.cont-header .title-text{ width: 100%; }
.cont-header .lead-text{ font-size: 1.8em; padding: 3em 1em 1em 1em; text-align: center; line-height: 1.75;  }

.cont-block-main{ border-width: 3px; }
.cont-block-main .inner{ padding: 1em 1em; margin: 0 auto; text-align: center; }

.season-ttl{ margin-bottom:2em; }
.season-ttl > p{ font-size: 1.8em;}

.season-exp{ font-size: 1.4em;  margin: 0 0 2em 0; padding: .25em 1em; }

.subcont-ttl{ margin-bottom:1.5em; }
.subcont-ttl > p{ font-size: 1.4em; }

.frame-qst{ padding: 1.5em; }
.text-qst-nmb{ font-size: 1.8em; margin: 0  0 1em 0; padding: .25em .5em; letter-spacing: .1em; }
.text-qst-q{ font-size: 1.3em;  }
.text-qst-radio{ display: flex; flex-wrap: wrap; font-size: 1.2em; font-weight: 600; letter-spacing: .1em; }
.text-qst-radio .radio{ margin-bottom: .25em; }
.text-qst-radio .radio label{ display: inline; }
.text-qst-radio .qst-radio-col2{ padding-right: 0; width: 100%; }

.text-qst-answer{ font-size: 1.2em; }

.icon-qst{ width: 5em; right:-0.8em; top:1.8em; }
.icon-qst p.correct{ font-size: 3em; }
.icon-qst p.fault{ font-size: 3.5em; }

.btn-a{ margin-bottom:3em;}
.btn-a a{ font-size: 1.4em;  padding: 1em 3em; }

.btn-t{ width: 95%; }
.btn-t a{ font-size: 1.8em; }
.btn-t a span{  padding-top: 1em; font-size: 0.6em; }

.answer-count{ margin-bottom:3em;}
.answer-count > p{ font-size: 2em;}

.prz-title{ width: 100%; margin-bottom:2em; text-align: center; }
.prz-title > p{ font-size: 1.6em; margin: 0; padding: .5em 1em; letter-spacing: .1em;}
.wp-thm{ width: 70%; margin: 0 auto 2em auto; }

.movie-link{ width: 90%; margin: 0 auto 1em auto; justify-content: center; padding: .25em; }
.movie-link:after{ display: none; }
.movie-link .thumb{ width: 100%; padding: .5em; }
.movie-link .text{ width: 100%; padding: 0 .5em .5em .5em; text-align: center; }
.movie-link .text p{ font-size: .8em; letter-spacing: .1em; font-weight: 600; color: #000; margin-bottom: 0; }

.official-link { text-align: center; margin-bottom: 1em; }
.official-link ul li{ width: 60%; margin: .5em; }

.cont-footer .inner{ padding: 3em 0 1em 0;  }
.catch{ font-size: 2em;  }
.copyrihgt{ font-size: .8em; }
}