@charset "utf-8";

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


/* base */
body{ color: #000; background:#fff url("../images/bg-pattern.png") repeat center top; background-size: calc(1280/3000*100vw) auto;  }

.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; }
.part-body > .inner{  }


/* part */
.cont-header{ position: relative; margin-bottom: 0; }
.cont-header .inner{ width: 100%; margin: 0 auto; padding: 2em 0 0 0; position: relative; z-index: 2; }
.cont-header .title{ font-size: 1em; text-align: center; margin-bottom: 4em; position: relative; }
.cont-header .title p{ width: 75%; margin: 0 auto; }
.cont-header .lead-text{ padding: 3em 2em; text-align: center; line-height: 2; color:#000;  }

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

.season-ttl{ width: 100%; margin-bottom:4em; text-align: center; }
.season-ttl > p{ font-size: 2em; font-weight: bold; display: inline-block; background-color: #000; color: #FFF; line-height: 1; margin: 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: #FFF; border:#000 solid 1px; padding: 3em; text-align: left; border-top:none; position: relative; }
.frame-qst.upper{ border-top: #000 solid 1px;}
.text-qst-q{ font-size: 1.9em; font-weight: 600; letter-spacing: .1em; color:#a3003e; margin-bottom: 1.5em; }
.text-qst-radio{ display: flex; flex-wrap: wrap; font-size: 1.6em; font-weight: 600; letter-spacing: .1em; }
.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:#e4007f; }
.text-qst-answer .hd{ padding: .25em; border:#e4007f solid 1px; margin:0 .5em 0 0; }
.text-qst-answer .answer{ padding: .25em;  }

.icon-qst{ width: 5em; text-align: center; position: absolute; right:.25em; top:2.5em; line-height: 0; }
.icon-qst p.correct{ font-size: 5em; font-weight: 600; color:#e4007f; }
.icon-qst p.fault{ font-size: 6.5em; 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: #a3003e; color: #FFF; line-height: 1; margin: 0; padding: 1em 4em; letter-spacing: .1em; text-decoration: none; }
.btn-a a:hover{ background-color: #e5005a; transform: scale(1.1); }
.btn-a.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: #a3003e;}

.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; }
.catch{ text-align: center; font-size: 3em; font-weight: 600; letter-spacing: .1em; margin-bottom: 1em; }
.copyrihgt{ 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{ background-size: calc(1280/3000*100vw) auto; }

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


/* 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: 2em; }
.cont-header .title p{ width: 90%; }
.cont-header .lead-text{ padding: 3em 2em; text-align: center; line-height: 2; color:#000;  }

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

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

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

.frame-qst{ padding: 1.5em; }
.text-qst-q{ font-size: 1.3em; margin-bottom: 1.5em; }
.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:-1.15em; top:1.5em; }
.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; }

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

.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; }
}