@charset 'UTF-8';

#page > header {position:relative; z-index:2; padding:5rem 0 0;}
#page > header > h1 {
	width:50rem; height:0; margin:0 auto; padding:14rem 0 0; 
	background:url(../20220601/images/header_title.png) center center no-repeat; background-size:contain; overflow:hidden;}

@media screen and (max-width:599px) {
#page > header {margin:0 -2rem; padding:2.5rem 0 0;}
#page > header > h1 {width:auto; margin:0 1rem 0 0; padding:10.5rem 0 0;}
}

#page > .background {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1;}
#page > .background > div {opacity:0; transition:opacity 1s ease-in-out;}
#page > .background > .background01 {
	display:block; width:150rem; height:106rem; position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% - 10rem)); 
	background:url(../20220601/images/background_01.png) center center no-repeat; background-size:contain;}
#page > .background > .background02 {display:block; width:max(140rem, 100vw); position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);}
#page > .background > .background02::before, 
#page > .background > .background02::after  {display:block; content:''; position:absolute;}
#page > .background > .background02::before {left:0; top:0; width:30rem; height:55rem; background:url(../20220601/images/background_02_l.png) 0 0 no-repeat; background-size:cover;}
#page > .background > .background02::after  {right:0; bottom:0; width:32rem; height:55rem; background:url(../20220601/images/background_02_r.png) right bottom no-repeat; background-size:cover;}
#page > .background > .background03 {display:block; width:max(140rem, 100vw); position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);}
#page > .background > .background03::before, 
#page > .background > .background03::after  {display:block; content:''; position:absolute;}
#page > .background > .background03::before {left:0; top:0; width:43rem; height:83rem; background:url(../20220601/images/background_03_l.png) 0 0 no-repeat; background-size:cover;}
#page > .background > .background03::after  {right:0; bottom:0; width:45rem; height:80rem; background:url(../20220601/images/background_03_r.png) right bottom no-repeat; background-size:cover;}

#page[data-current="start"]    > .background > .background01, 
#page[data-current^="q"]       > .background > .background02, 
#page[data-current="congrats"] > .background > .background03 {opacity:1;}

@media screen and (max-width:599px) {
#page > .background {}
#page > .background > div {}
#page > .background > .background01 {width:auto; height:226.5625vw; left:0; right:0; top:0; bottom:0; transform:none; background-image:url(../20220601/images/background_01_sp.png);}
#page > .background > .background02 {width:auto; height:203.125vw; left:0; right:0; top:20vw; transform:none; background:url(../20220601/images/background_02_sp.png) center center no-repeat; background-size:cover;}
#page > .background > .background02::before, 
#page > .background > .background02::after  {display:none;}
#page > .background > .background03 {width:auto; height:203.125vw; left:0; right:0; transform:none; background:url(../20220601/images/background_03_sp.png) center center no-repeat; background-size:cover;}
#page > .background > .background03::before, 
#page > .background > .background03::after  {display:none;}
}

#page > .result {
	display:flex; justify-content:center; align-items:center; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; 
	background:rgba(253,240,217,0.6); font-size:5.8rem; font-weight:bold; line-height:1; animation:result 2s forwards;}
#page > .result.correct {color:#ef6b57;}
#page > .result.correct::after {
	display:block; content:''; width:44.3rem; height:44.3rem; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; margin:auto; 
	border:3rem solid #f59f92; border-radius:100rem;}
#page > .result.incorrect {color:#006a40; animation-duration:3s;}
#page > .result.incorrect::before, 
#page > .result.incorrect::after {
	display:block; content:''; width:3rem; height:51rem; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; margin:auto; 
	background:#90c693; overflow:hidden;}
#page > .result.incorrect::before {transform:rotate(45deg);}
#page > .result.incorrect::after  {transform:rotate(-45deg);}

@media screen and (max-width:599px) {
#page > .result  {font-size:2.9rem;}
#page > .result.correct {}
#page > .result.correct::after {width:80vw; height:80vw; border-width:1.5rem;}
#page > .result.incorrect {}
#page > .result.incorrect::before, 
#page > .result.incorrect::after {width:1.5rem; height:70vw;}
#page > .result.incorrect::before {transform:rotate(45deg);}
#page > .result.incorrect::after  {transform:rotate(-45deg);}
}

@keyframes result {
0%   {opacity:0;}
30%  {opacity:1;}
70%  {opacity:1;}
100% {opacity:0;}
}

#page > .correction {
	display:flex; justify-content:center; align-items:center; min-width:58rem; min-height:9rem; position:absolute; left:50%; top:50%; z-index:3; 
	padding:1rem 4rem; box-sizing:border-box; border-radius:2rem; transform:translate3d(-50%,6rem,0); 
	background:#006a40; color:#fff; font-size:5.8rem; font-weight:bold; line-height:1; white-space:nowrap; animation:result 3s forwards;}

@media screen and (max-width:599px) {
#page > .correction {min-width:28rem; min-height:14.5vw; padding:1.5vw 6vw; border-radius:1rem; transform:translate3d(-50%,3rem,0); font-size:28px; font-size:8.75vw;}
#page > .correction.q3 {font-size:18px; font-size:5.625vw;}
}

@keyframes correction {
0%   {opacity:0;}
30%  {opacity:1;}
70%  {opacity:1;}
100% {opacity:0;}
}


#page .list {position:relative; z-index:2;}
#page .list > .entry {position:relative; padding:5rem 0 10rem;}
#page .list > .entry > h1 {display:table; margin:0 auto 0.5em; padding:0 0.4em 0.1em; border-bottom:1px solid currentColor; font-size:2rem; line-height:1;}
#page .list > .entry > h1 b {display:inline-block; padding:0 0.2em; font-size:4.8rem; font-family:var(--font-en);}
#page .list > .entry > strong {
	background:linear-gradient(#f9db94, #f9db94) 85% 85%/100% 0.7rem no-repeat; 
	font-size:4.4rem; line-height:1.7;}
#page .list > .entry > ul {display:flex; justify-content:space-between; width:100rem; height:24rem; margin:3.5rem auto 0; font-size:4.2rem; line-height:1.4;}
#page .list > .entry > ul > li {flex:0 0 31rem; display:flex;}
#page .list > .entry > ul > li > input {display:none;}
#page .list > .entry > ul > li > label {
	display:flex; justify-content:center; align-items:center; width:100%; border-radius:2rem; box-shadow:0 1rem 2rem 0 rgba(0,0,0,0.3); 
	background:#ddd; color:#aaa; cursor:pointer;}
#page .list > .entry > ul > li > input:checked + label {background-color:#f59f92; color:var(--color-main-negative);}
#page .list > .entry > .next {margin:7rem auto 0; box-shadow:0 1rem 2rem 0 rgba(0,0,0,0.3); cursor:pointer;}
#page .list > .entry > .next.disabled {opacity:0.5; pointer-events:none;}

@media screen and (max-width:599px) {
#page .list > .entry {padding:5rem 0 10rem;}
#page .list > .entry > h1 {margin-bottom:1rem; padding:0 0.4em 0.1em; font-size:1.6rem;}
#page .list > .entry > h1 b {font-size:3.2rem;}
#page .list > .entry > strong {font-size:1.8rem;}
#page .list > .entry > ul {display:block; width:auto; height:auto; margin:-2rem auto 0; padding:3rem 0 0; font-size:2.4rem;}
#page .list > .entry > ul > li {margin:2rem 0 0;}
#page .list > .entry > ul > li > input {}
#page .list > .entry > ul > li > label {padding:0.55em; border-radius:1rem; box-shadow:0 0.5rem 1rem 0 rgba(0,0,0,0.3); background:var(--color-main-negative); color:#eb7f61;}
#page .list > .entry > ul > li > input:checked + label {color:var(--color-main-negative);}
#page .list > .entry > .next {margin:4.5rem auto 0;}
#page .list > .entry > .next.disabled {}
}


#start {padding:2rem 0 10rem;}
#start > h1 {display:table; margin:0 auto; line-height:1.5;}
#start > h1 small {display:block; font-size:2.4rem;}
#start > h1 strong {
	background:linear-gradient(#f9db94, #f9db94) 85% 85%/100% 0.7rem no-repeat; 
	font-size:5.2rem; font-weight:inherit;}
#start > strong {display:table; position:relative; margin:3.5rem auto 0; padding:0 3.5rem; font-size:2.4rem; line-height:1.9;}
#start > strong::before,
#start > strong::after  {display:block; content:''; width:0.2rem; position:absolute; top:0; bottom:0; background:currentColor;}
#start > strong::before {left:0; transform:rotate(-30deg);}
#start > strong::after  {right:0; transform:rotate(30deg);}
#start > .image {width:71rem; margin:2rem auto 0;}
#start > .image > img {display:block; width:100%; height:auto;}
#start > .next {margin:5rem auto 0; box-shadow:0 1rem 2rem 0 rgba(0,0,0,0.3); cursor:pointer;}

@media screen and (max-width:599px) {
#start {padding:0.5rem 0 5.5rem;}
#start > h1 {margin:1rem auto 0; line-height:1.35;}
#start > h1 small {margin:0 0 0.3rem; font-size:1.6rem;}
#start > h1 strong {font-size:2.8rem;}
#start > strong {margin:3rem auto 0; padding:0 6rem; font-size:1.6rem; line-height:1.8;}
#start > strong::before,
#start > strong::after  {width:0.2rem; top:0.3rem; bottom:0.3rem;}
#start > strong::before {}
#start > strong::after  {}
#start > .image {width:80.3571%; margin:2rem auto 0;}
#start > .image > img {}
#start > .next {margin:5rem auto 0; box-shadow:0 1rem 2rem 0 rgba(0,0,0,0.3); cursor:pointer;}
}


#congrats {padding:2rem 0 10rem;}
#congrats > h1 {display:table; margin:0 auto; line-height:1.5;}
#congrats > h1 small {display:block; font-size:2.4rem;}
#congrats > h1 strong {
	display:block; background:linear-gradient(transparent 80%, #f6c64f 80%, #f6c64f 92%, transparent 92%); 
	font-size:5.2rem; font-weight:inherit;}
#congrats > .image {width:31rem; margin:2.5rem auto 0; border-radius:2rem; box-shadow:0 0 4rem 2rem rgba(255,255,255,0.8);}
#congrats > .image > img {display:block; width:100%; height:auto;}
#congrats > .vote {margin:3rem auto 0; box-shadow:0 1rem 2rem 0 rgba(0,0,0,0.3); cursor:pointer;}

@media screen and (max-width:599px) {
#congrats {padding:0.5rem 0 5.5rem;}
#congrats > h1 {margin:1rem auto 0; line-height:1.35;}
#congrats > h1 small {margin:0 0 0.3rem; font-size:1.8rem;}
#congrats > h1 strong {font-size:2.8rem;}
#congrats > .image {width:80.3571%; margin:3rem auto 0; border-radius:1rem;}
#congrats > .image > img {}
#congrats > .vote {margin:4rem auto 0;}
}


#page .fac-gallery {}
#page .fac-gallery-nav {}
#page .fac-gallery-nav > button {display:none;}
#page .fac-gallery-nav > ol {top:0; bottom:auto; opacity:0; transition:opacity 0.5s ease-in-out;}
#page .fac-gallery-nav > ol::after {
	display:block; content:''; width:44rem; height:0.2rem; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; margin:auto; background:#c8cdb3;}
#page .fac-gallery-nav > ol > li {width:14rem; pointer-events:none;}
#page .fac-gallery-nav > ol > li::after {background-color:#c8cdb3;}
#page .fac-gallery-nav > ol > li.fac-gallery--selected::after {background-color:var(--color-sub);}
#page .fac-gallery-nav > ol > li:first-child, 
#page .fac-gallery-nav > ol > li:last-child {display:none;}
#page[data-current^="q"] .fac-gallery-nav > ol {opacity:1;}

@media screen and (max-width:599px) {#page .fac-gallery {}
#page .fac-gallery {margin:0 -2rem;}
#page .fac-gallery-item {margin:0 2rem;}
#page .fac-gallery-nav {}
#page .fac-gallery-nav > button {}
#page .fac-gallery-nav > ol {top:1rem;}
#page .fac-gallery-nav > ol::after {width:auto; left:6rem; right:6rem;}
#page .fac-gallery-nav > ol > li {width:7rem;}
#page .fac-gallery-nav > ol > li::after {width:1rem; height:1rem;}
#page .fac-gallery-nav > ol > li.fac-gallery--selected::after {}
#page .fac-gallery-nav > ol > li:first-child, 
#page .fac-gallery-nav > ol > li:last-child {}
#page[data-current^="q"] .fac-gallery-nav > ol {}

}