@charset "UTF-8";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; }

html { font-size: 62.5%; }
@media screen and (max-width: 800px) { html { font-size: 2.1111111111vw; } }

body { font-family: "Noto Sans JP", YuGothicM, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-size: 1.8rem; -webkit-text-size-adjust: 100%; }

li { list-style: none; }

img { max-width: 100%; vertical-align: bottom; }
img[usemap] { height: auto; }

video { max-width: 100%; }

a:hover { text-decoration: none; }

button { padding: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: 1.8rem; cursor: pointer; }

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="submit"], input[type="button"], textarea, select { font-family: inherit; font-size: 1.8rem; }

.only-pc { display: block; }
@media screen and (max-width: 800px) { .only-pc { display: none; } }

.only-sp { display: none; }
@media screen and (max-width: 800px) { .only-sp { display: block; } }

img.only-pc, span.only-pc { display: inline; }
@media screen and (max-width: 800px) { img.only-pc, span.only-pc { display: none; } }
img.only-sp, span.only-sp { display: none; }
@media screen and (max-width: 800px) { img.only-sp, span.only-sp { display: inline; } }

table.only-pc { display: table; }
@media screen and (max-width: 800px) { table.only-pc { display: none; } }
table.only-sp { display: none; }
@media screen and (max-width: 800px) { table.only-sp { display: table; } }

.js-tel { color: #000 !important; text-decoration: none; cursor: default; }

.pagetop { position: fixed; bottom: 20px; right: 20px; z-index: 9999; opacity: 0; transition: all .5s; transform: translateY(100px); }
.pagetop.is-show { opacity: 1; transform: translateY(0); }

.inner { width: 100%; max-width: 1410px; margin-inline: auto; padding-inline: 20px; }
@media screen and (max-width: 800px) { .inner { padding-inline: 1.5rem; } }

.container { line-height: 1.6; }

.guide { padding: 100px 0 160px; background-color: #E8FBFF; }
.guide .guide-ttl { max-width: 898px; margin: 0 auto 20px; }
.guide .guide-lead { margin-bottom: 50px; text-align: center; }
.guide .guide-banner { display: flex; justify-content: space-between; column-gap: 25px; }
@media screen and (max-width: 800px) { .guide .guide-banner { column-gap: 1rem; } }
.guide .guide-banner .guide-banner-slider { flex: 1; overflow: hidden; }
.guide .guide-banner .guide-banner-slider .swiper-slide { text-align: center; }
.guide .guide-banner .guide-banner-btn { width: 60px; }
@media screen and (max-width: 800px) { .guide .guide-banner .guide-banner-btn { width: 3.5rem; } }
.guide .guide-banner .guide-banner-btn._prev img { transform: scale(-1, 1); }
.guide .guide-banner .swiper-button-lock { display: block; visibility: hidden; }

.footer { padding: 5px; background-color: #2AB3D2; color: #fff; font-size: 1.2rem; font-weight: 600; text-align: center; }

.modal-sec { display: none; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); }
.modal-sec .modal-in { position: absolute; top: 0; left: 0; padding: 20px; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow-y: auto; }
@media screen and (max-width: 800px) { .modal-sec .modal-in { padding: 2rem 1.5rem; } }
.modal-sec .modal-con { position: relative; width: 100%; max-width: 800px; margin: auto; padding: 20px; border-radius: 24px; background-color: #fff; }
.modal-sec .modal-close { position: absolute; top: 20px; right: 20px; }
@media screen and (max-width: 800px) { .modal-sec .modal-close { top: 1.5rem; right: 1.5rem; } }
.modal-sec .modal-close .ico { width: 4.6rem; }
@media screen and (max-width: 800px) { .modal-sec .modal-close .ico { width: 4rem; } }
.modal-sec .rule-sec { max-width: 680px; margin-inline: auto; line-height: 1.6; }
.modal-sec .rule-sec .rule-head { margin-bottom: 10px; padding-inline: 40px; }
@media screen and (max-width: 800px) { .modal-sec .rule-sec .rule-head { padding-inline: 4rem; } }
.modal-sec .rule-sec .rule-head .rule-head-in { display: flex; justify-content: center; align-items: center; column-gap: 5.2521008403%; max-width: 476px; margin-inline: auto; }
.modal-sec .rule-sec .rule-head .rule-head-in ._l, .modal-sec .rule-sec .rule-head .rule-head-in ._r { width: 20.1680672269%; }
.modal-sec .rule-sec .rule-head .rule-head-in ._ttl { width: 46.4285714286%; margin-right: 2.1008403361%; }
.modal-sec .rule-sec .rule-lead { margin-bottom: 20px; font-size: 2.2rem; text-align: center; }
@media screen and (max-width: 800px) { .modal-sec .rule-sec .rule-lead { font-size: 1.8rem; } }
.modal-sec .rule-sec .rule-result { margin-bottom: 40px; font-size: 2rem; font-weight: 700; }
@media screen and (max-width: 800px) { .modal-sec .rule-sec .rule-result { font-size: 1.8rem; } }
.modal-sec .rule-sec .rule-result .rule-result-ttl { padding: 10px 0 3px; border-top-left-radius: 16px; border-top-right-radius: 16px; background-color: #0056BC; color: #fff; text-align: center; }
.modal-sec .rule-sec .rule-result .rule-result-con { display: grid; row-gap: 5px; padding: 20px; border: 3px solid #0056BC; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
@media screen and (max-width: 800px) { .modal-sec .rule-sec .rule-result .rule-result-con { row-gap: 10px; } }
.modal-sec .rule-sec .rule-result .rule-result-con dl { display: flex; justify-content: center; align-items: center; column-gap: 40px; }
@media screen and (max-width: 800px) { .modal-sec .rule-sec .rule-result .rule-result-con dl { flex-direction: column; row-gap: 3px; } }
.modal-sec .rule-sec .rule-result .rule-result-con dl dt { display: flex; width: 8em; }
.modal-sec .rule-sec .rule-result .rule-result-con dl dt .ico { width: 3.1rem; }
.modal-sec .rule-sec .rule-result .rule-result-con dl dt span { flex: 1; text-align: right; }

.js-modalopen { overflow: hidden; }

.ico { display: inline-flex; justify-content: center; align-items: center; width: 1em; line-height: 0; }
.ico::before { width: 100% !important; }

.ico-info::before { content: url("../img/common/ico_info.svg"); }

.ico-close::before { content: url("../img/common/ico_close.svg"); }

.ico-gold::before { content: url("../img/common/ico_gold.svg"); }

.ico-silver::before { content: url("../img/common/ico_silver.svg"); }

.ico-bronze::before { content: url("../img/common/ico_bronze.svg"); }

.ico-gold-result::before { content: url("../img/common/ico_gold_result.svg"); }

.ico-silver-result::before { content: url("../img/common/ico_silver_result.svg"); }

.ico-bronze-result::before { content: url("../img/common/ico_bronze_result.svg"); }

.main { background: url("../img/common/title_bg.png"); }

.article { position: relative; display: flex; justify-content: center; align-items: center; min-height: 900px; padding: 40px 0 40px; overflow: hidden; background: url("../img/common/title_bg001.svg") no-repeat left top/40.9375% auto, url("../img/common/title_bg002.svg") no-repeat right top/36.9791666667% auto, url("../img/common/title_bg003.svg") no-repeat left bottom/27.1875% auto, url("../img/common/title_bg004.svg") no-repeat right bottom/46.0416666667% auto; }
@media screen and (max-width: 960px) { .article { padding-top: 100px; align-items: initial; } }
@media screen and (max-width: 800px) { .article { padding-top: 18vw; } }
.article::before, .article::after { content: ''; position: absolute; top: 50%; pointer-events: none; }
.article::before { left: 50%; width: 143px; aspect-ratio: 143 / 343; margin: -154px 0 0 -600px; background: url("../img/common/title_ph001.svg") no-repeat center center/contain; }
.article::after { right: 50%; width: 163px; aspect-ratio: 163 / 380; margin: -90px -606px 0 0; background: url("../img/common/title_ph002.svg") no-repeat center center/contain; }
.article .logo { position: absolute; top: 0; left: 0; z-index: 20; justify-content: center; align-items: center; display: flex; width: 300px; aspect-ratio: 30 / 13; background-color: #fff; cursor: pointer; pointer-events: none; opacity: 0; transition: all .5s; }
@media screen and (max-width: 1400px) { .article .logo { width: 200px; } }
@media screen and (max-width: 800px) { .article .logo { width: 40vw; } }
.article .logo img { width: 83.3333333333%; }
.article .inner { position: relative; z-index: 10; }
.article._game .logo, .article._result .logo { pointer-events: all; opacity: 1; }
.article._game .title-sec, .article._result .title-sec { display: none; }
.article._game .stage-sec._game { position: static; pointer-events: all; opacity: 1; }
.article._game .stage-sec._game._answer .stage-question { display: none; }
.article._game .stage-sec._game._answer .stage-answer { display: block; }
.article._game .stage-sec._result { display: block; }
.article._result .stage-sec._game { display: none; }
.article._result .stage-sec._result { display: block; position: static; pointer-events: all; opacity: 1; }

.title-sec .title-logo { max-width: 874px; margin: 0 auto 30px; }
.title-sec .title-lead { margin-bottom: 30px; text-align: center; }
.title-sec .title-nav { display: flex; justify-content: space-between; column-gap: 10px; max-width: 800px; margin-inline: auto; }
.title-sec .title-nav ._l { width: ppercentage(201/800); margin-top: 6px; }
.title-sec .title-nav ._r { width: ppercentage(204/800); margin-top: 6px; }
.title-sec .title-nav nav { width: 100%; max-width: 260px; }
.title-sec .title-nav nav ul { display: grid; row-gap: 15px; margin-bottom: 24px; }
.title-sec .title-nav nav button { width: 100%; }
.title-sec .title-nav nav .title-btn { pointer-events: none; opacity: 0.5; }
.title-sec .title-nav nav .title-btn._active { pointer-events: all; opacity: 1; }
.title-sec .title-nav nav .title-info { display: flex; justify-content: center; column-gap: 10px; padding: 10px; border-radius: 2em; background-color: #0056BC; color: #fff; font-weight: 700; }
.title-sec .title-nav nav .title-info .ico { width: 2.6rem; }

.stage-sec { position: absolute; max-width: 860px; margin-inline: auto; pointer-events: none; opacity: 0; transition: all .5s; }
.stage-sec._result { display: none; }
.stage-sec .stage-ttl { width: 150px; margin-left: 40px; }
.stage-sec .stage-con { position: relative; }
.stage-sec .stage-fig { position: absolute; top: 0; right: 0; }
.stage-sec .stage-in { border-width: 4px; border-style: solid; border-radius: 24px; overflow: hidden; }
.stage-sec .stage-in .stage-q { display: flex; column-gap: 30px; padding: 25px 256px 25px 36px; color: #fff; font-weight: 700; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-q { padding: 2rem; } }
.stage-sec .stage-in .stage-q .stage-q-no { font-size: 2.8rem; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-q .stage-q-no { font-size: 2rem; } }
.stage-sec .stage-in .stage-q .stage-q-txt { flex: 1; min-height: 3.5em; padding-top: 8px; font-size: 2.6rem; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-q .stage-q-txt { font-size: 1.8rem; } }
.stage-sec .stage-in .stage-a { padding: 34px 36px 44px; background-color: #fff; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a { padding: 2rem; } }
.stage-sec .stage-in .stage-a .stage-a-con { display: flex; align-items: center; column-gap: 20px; margin-bottom: 20px; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con { flex-direction: column-reverse; align-items: initial; row-gap: 2rem; } }
.stage-sec .stage-in .stage-a .stage-a-con figure { flex: 1; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con figure { width: 80%; margin-inline: auto; } }
.stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel { display: grid; row-gap: 8px; width: 61.5384615385%; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel { width: 100%; } }
.stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button { width: 100%; padding: 20px 10px 15px 15px; border-radius: 12px; background-color: #FBF145; font-size: 2.6rem; font-weight: 700; text-align: left; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button { font-size: 2rem; } }
.stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button:hover { background-color: #5BE5FC; }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button:hover { background-color: #FBF145; } }
@media screen and (max-width: 800px) { .stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button:active { background-color: #5BE5FC; } }
.stage-sec .stage-in .stage-a .stage-a-con .stage-a-sel button span { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.stage-sec._stage1 .stage-fig { margin: -63px 40px 0 0; }
@media screen and (max-width: 800px) { .stage-sec._stage1 .stage-fig { width: 11rem; margin: -11rem 1rem 0 0; } }
.stage-sec._stage1 .stage-in { border-color: #1F9880; }
.stage-sec._stage1 .stage-in .stage-q { background-color: #0AB592; }
.stage-sec._stage2 .stage-fig { margin: -23px 31px 0 0; }
@media screen and (max-width: 800px) { .stage-sec._stage2 .stage-fig { width: 13rem; margin: -10rem 1rem 0 0; } }
.stage-sec._stage2 .stage-in { border-color: #E98A20; }
.stage-sec._stage2 .stage-in .stage-q { background-color: #FCAD0A; }
.stage-sec._stage3 .stage-fig { margin: -23px 40px 0 0; }
@media screen and (max-width: 800px) { .stage-sec._stage3 .stage-fig { width: 14rem; margin: -9.5rem 1rem 0 0; } }
.stage-sec._stage3 .stage-in { border-color: #BD1C02; }
.stage-sec._stage3 .stage-in .stage-q { background-color: #E23B0E; }
.stage-sec .stage-step { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media screen and (max-width: 800px) { .stage-sec .stage-step { display: grid; grid-template-columns: repeat(5, auto); gap: 1rem; } }
.stage-sec .stage-step li { width: 3.6rem; aspect-ratio: 1 / 1; border-radius: 4px; background-color: #BBE8EF; font-size: 2.2rem; font-weight: 700; text-align: center; }
.stage-sec .stage-step li._correct { background-color: #FF38A6; color: #fff; }
.stage-sec .stage-step li._incorrect { background-color: #0036FF; color: #fff; }
.stage-sec .stage-answer { display: none; }
.stage-sec .stage-answer .stage-answer-head { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.stage-sec .stage-answer .stage-answer-head .stage-answer-head-in { display: flex; align-items: center; margin-inline: auto; }
.stage-sec .stage-answer .stage-answer-con { padding: 40px 20px 44px; border-width: 4px; border-style: solid; border-top: none; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; background-color: #fff; }
.stage-sec .stage-answer .stage-answer-con .stage-answer-ttl { margin-bottom: 40px; font-size: 3.2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 800px) { .stage-sec .stage-answer .stage-answer-con .stage-answer-ttl { font-size: 2.4rem; } }
.stage-sec .stage-answer .stage-answer-con .stage-answer-ttl:has(br) { text-align: left; }
.stage-sec .stage-answer .stage-answer-con .stage-answer-txt { flex: 1; padding-left: 10px; font-size: 2.2rem; font-weight: 700; }
@media screen and (max-width: 800px) { .stage-sec .stage-answer .stage-answer-con .stage-answer-txt { font-size: 1.8rem; } }
.stage-sec .stage-answer .stage-answer-con .stage-answer-exp { display: flex; margin-bottom: 25px; }
@media screen and (max-width: 800px) { .stage-sec .stage-answer .stage-answer-con .stage-answer-exp { row-gap: 20px; flex-direction: column-reverse; } }
.stage-sec .stage-answer .stage-answer-con .stage-answer-exp figure { width: 235px; padding-inline: 1rem; text-align: center; }
@media screen and (max-width: 800px) { .stage-sec .stage-answer .stage-answer-con .stage-answer-exp figure { width: 100%; } }
.stage-sec .stage-answer .stage-answer-con .stage-answer-btn { display: block; width: 100%; max-width: 240px; margin: 0 auto 70px; }
.stage-sec .stage-answer._correct .stage-answer-head { background-color: #FF38A6; }
.stage-sec .stage-answer._correct .stage-answer-head .stage-answer-head-in { max-width: 531px; transform: translateX(-9px); }
.stage-sec .stage-answer._correct .stage-answer-head .stage-answer-head-in ._l { width: 23.352165725%; transform: translateY(-25px); }
.stage-sec .stage-answer._correct .stage-answer-head .stage-answer-head-in ._r { width: 21.8455743879%; transform: translateY(-13px); }
.stage-sec .stage-answer._correct .stage-answer-head .stage-answer-head-in ._ttl { width: 53.2956685499%; margin-right: 8px; }
.stage-sec .stage-answer._correct .stage-answer-con { border-color: #FF38A6; }
.stage-sec .stage-answer._incorrect .stage-answer-head { background-color: #0036FF; }
.stage-sec .stage-answer._incorrect .stage-answer-head .stage-answer-head-in { max-width: 600px; transform: translateX(28px); }
.stage-sec .stage-answer._incorrect .stage-answer-head .stage-answer-head-in ._l { width: 15.6666666667%; transform: translateY(-14px); }
.stage-sec .stage-answer._incorrect .stage-answer-head .stage-answer-head-in ._r { width: 20.3333333333%; transform: translateY(-4px); }
.stage-sec .stage-answer._incorrect .stage-answer-head .stage-answer-head-in ._ttl { width: 62.1666666667%; margin-right: 11px; }
.stage-sec .stage-answer._incorrect .stage-answer-con { border-color: #0036FF; }
.stage-sec .stage-result .stage-result-in { margin-bottom: 30px; padding: 40px 40px 64px; border-width: 4px; border-style: solid; border-radius: 24px; background-color: #fff; }
@media screen and (max-width: 800px) { .stage-sec .stage-result .stage-result-in { padding-inline: 2rem; } }
.stage-sec .stage-result .stage-result-in .stage-result-head { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 20px; font-weight: 700; }
.stage-sec .stage-result .stage-result-in .stage-result-head .ico { width: 7.8rem; }
@media screen and (max-width: 800px) { .stage-sec .stage-result .stage-result-in .stage-result-head .ico { width: 6rem; } }
.stage-sec .stage-result .stage-result-in .stage-result-head small { margin-right: 20px; font-size: 2.8rem; }
@media screen and (max-width: 800px) { .stage-sec .stage-result .stage-result-in .stage-result-head small { font-size: 2.4rem; } }
.stage-sec .stage-result .stage-result-in .stage-result-head div { font-size: 5.4rem; line-height: 1; }
@media screen and (max-width: 800px) { .stage-sec .stage-result .stage-result-in .stage-result-head div { font-size: 3.4rem; } }
.stage-sec .stage-result .stage-result-in .stage-result-fig { text-align: center; }
.stage-sec .stage-result .stage-result-in .stage-result-label { max-width: 682px; margin: 0 auto 20px; }
.stage-sec .stage-result .stage-result-in .stage-result-txt { font-size: 2.2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 800px) { .stage-sec .stage-result .stage-result-in .stage-result-txt { font-size: 1.8rem; } }
.stage-sec .stage-result._gold .stage-result-in { border-color: #D39B38; }
.stage-sec .stage-result._silver .stage-result-in { border-color: #C6C6C6; }
.stage-sec .stage-result._gold .stage-result-in { border-color: #C15B4D; }
.stage-sec .stage-result .stage-result-btn { display: block; width: 100%; max-width: 290px; margin-inline: auto; }

.clearfix { zoom: 1; }
.clearfix::before { content: ""; display: table; }
.clearfix::after { content: ""; display: table; clear: both; }

.js-anime-fadein { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-fadein.js-anime-on { animation-name: fadeIn; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.js-anime-slide { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slide.js-anime-on { animation-name: slide; }

@keyframes slide { 0% { opacity: 0; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); } }
.js-anime-slideleft { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slideleft.js-anime-on { animation-name: slideLeft; }

@keyframes slideLeft { 0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); } }
.js-anime-slideright { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slideright.js-anime-on { animation-name: slideRight; }

@keyframes slideRight { 0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); } }
@media print { .js-anime-fadein, .js-anime-slide, .js-anime-slideleft, .js-anime-slideright { opacity: initial; } }

/*# sourceMappingURL=style.css.map */