@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */

/* =====================================================================
*    mv
* =================================================================== */
.mv {
	/*	margin: calc(/ 750 * 100%) 0 0;
	/*	padding: calc(707 / 750 * 100%) 0 0;*/
	/* background-color: #170808; */
}

.mv_ttl {
	width: calc(750 / 750 * 100%);
	margin: 0 auto calc(12 / 750 * 100%);
}

.mv_date {
	padding: calc(1200 / 750* 100%) 0 calc(0 / 750* 100%);
}

.mv_date::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(96 / 750 * 100%);
	background-color: #c30809;
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: skewY(-4deg);
	transform: skewY(-4deg);
	position: absolute;
	top: 0;
	left: 0;
}

.mv_date img {
	width: calc(750 / 750 * 100%);
	margin: 0 auto;
}

.mv_img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.mv_end {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(466 / 750 * 100%) 0 0;
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
	z-index: 2;
    z-index: 100;
}

.intro_box01 {
	width: calc(750 / 750 * 100%);
	margin: 0 auto;
	padding: 0 0 calc(60 / 750* 100%);
    background: #0da2e4 url(../images/top/intro/intro_box01_bg.jpg) no-repeat bottom center;
	background-size: contain;
}
.intro_box02{
	width: calc(720 / 750 * 100%);
	margin: 5rem auto;
	padding: calc(60 / 750* 100%) 0 calc(60 / 750* 100%);
    background: url(../images/top/intro/intro_box02_bg.png) no-repeat top center;
	background-size: cover;
	border-radius: 3.2rem;
}
.intro_ttl {
	margin: 0 0 calc(75 / 670 * 100%);
	padding: 0 0 calc(338 / 670 * 100%);
}
.intro_txt{
	width: calc(750 / 750 * 100%);
	margin: 0 auto;
}
.intro_notice {
	width: calc(670 / 750 * 100%);
	margin: 0 auto;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1.409;
}

.intro_notice li {
	text-align: center;
}

.intro_notice li:last-child {
	margin: 0;
} 

.notes{
	color: #fff;
    font-size: 1.6rem;
    font-weight: normal;
}

/* =====================================================================
*    question
* =================================================================== */
.question {
	padding: calc(0 / 750 * 100%) 0 calc(60 / 750 * 100%);
}
.text_hint_note{
	width: calc(648 / 750 * 100%);
	margin: calc(90 / 750* 100%) auto;
}
#question1,#question2,#question3,#question4,#question5 {
    /* background: url(../images/top/question/snow.png) no-repeat top center; */
    background-size: contain;
}

#question6{
	padding: calc(0 / 750 * 100%) 0 calc(300 / 750 * 100%);
}

.question_ttl {
    width: calc(750 / 750* 100%);
    margin: calc(100 / 750* 100%) auto calc(30 / 750* 100%);
}

.answer_ttl{
	width: calc(406 / 750* 100%);
    margin: calc(-220 / 750* 100%) auto calc(0 / 750* 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.hint_ttl{
	width: calc(214 / 750 * 100%);
	margin: calc(0 / 750* 100%) auto calc(-30 / 750* 100%);
}
.choose{
	display: flex;
	justify-content: center;
}
.question_img {
	width: calc(670 / 750 * 100%);
	margin: calc(0 / 750 * 100%) auto calc(0 / 750 * 100%);
}
.question_img img {
	    box-shadow: 0px 0px 10px 2px #00eaff;
}
.question_hint {
	width: calc(200 / 750 * 100%);
	min-height: calc(150 / 750 * 100%);
	margin: calc(10 / 750* 100%);
	padding: 0.8em 0;
	color:#002aff;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	background: #C2F200;
	background: linear-gradient(90deg,rgba(194, 242, 0, 1) 0%, rgba(227, 255, 114, 1) 100%);
	border-radius: 50rem;
	box-shadow: 0px 10px 0px 0px rgba(0,42,255,0.3);
	border: 2px solid #fff;
	align-items: anchor-center;
}
.question_hint span{
	font-size: 2em;
	font-weight: bold;
	color: #ffff00;
	vertical-align: text-bottom;
	margin-left: 0.2em;
}



.question_input {
    position: relative;
    width: calc(640 / 750* 100%);
    margin: calc(15 / 750* 100%) auto;
    padding: calc(10 / 750* 100%) calc(25 / 750* 100%);
    background-color: #fff;
	border-radius: 2rem;
	box-shadow: 0px 0px 10px 2px #00eaff;
	border: 2px solid #fff;
}

.correct{
	background-color: rgb(255 184 184 / 80%);
}

.question_input input {
	width: 100%;
	height: 1em;
	padding: 1.35em 1em;
	color: #333333;
	font-size: 3.4rem;
	font-weight: 300;
	line-height: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 2rem;
	outline: none;
}

.question_input input:focus {
	outline: none;
}

.question_submit {
	position: absolute;
    top: 0;
    right: calc(60 / 420* 100%);
    width: calc(120 / 420* 100%);
}

.question_submit input {
	display: block;
	width: calc(640 / 750 * 100%);
	margin: 0.15em 8rem;
    padding: calc(130 / 750 * 100%) 0;
	background: #EF0A6A;
	background: linear-gradient(180deg, #ef0a6a 0%, rgba(182, 53, 156, 1) 100%);
	background-size: auto 100%;
	border: none;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 0.04em;
	font-size: 3.6rem;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	border-radius: 0 2rem 2rem 0;
}

.question_submit input:focus {
	outline: none;
}

:placeholder-shown {
	color: #333333;
}

::-webkit-input-placeholder {
	color: #333333;
}

:-moz-placeholder {
	color: #333333;
	opacity: 1;
}

::-moz-placeholder {
	color: #333333;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #333333;
}

.question_result {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(300 / 750* 100%);
	/* margin: 0 0 calc(-130 / 750 * 100%); */
}

.question_result li {
	width: 100%;
	padding: 0.8em 0;
	background-color: rgb(255 255 255 / 70%);
	position: absolute;
	bottom: -45rem;
	left: 0;
	color: #EF0A6A;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.last_answer li{
	width: 100%;
	padding: 0.8em 0;
	background-color: rgb(255 255 255 / 70%);
	position: absolute;
	bottom: 0;
	left: 0;
	color: #EF0A6A;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.question_result li#question_result3 {
	padding: 0.8em 0;
	/* background: url(../images/top/question/img_true.png) no-repeat center top;
	background-size: cover; */
	font-size: 2.4rem;
}
.question_answer{
	position: relative;
    z-index: 1;
	border-radius: 0 100vh 100vh 0;
	margin-top: 9rem;
}
.question_answer4{
	position: relative;
    z-index: 1;
	border-radius: 0 100vh 100vh 0;
	margin-top: 7rem;
}
.question_answer_last{
	position: relative;
    z-index: 1;
	border-radius: 0 100vh 100vh 0;
	margin-top: 14rem;
}
.answer{
	font-size: 3.4rem;
}

.hide {
	display: none;
}
.notes_box{
	width: 100%;
	background-color: rgba(39, 109, 169, 0.3);
	padding: 1em;
	border-radius: 0;
	border: 1px solid #ffffff;
}
.notes_box2{
	width: 100%;
	background-color: transparent;
}
.notes_box3{
	width: 100%;
	background-color: transparent;
}
.notes_ttl{
	background-color:  rgba(255, 255, 255, 1);
	color: #1b5185;
	font-size: 3rem;
	font-weight: bold;
	padding: 1em;
	margin-bottom: 1em;
}
.notes_text{
	padding: 2em;
	color: #fff;
	font-size: 2rem;
	line-height: 2;
	background: #fff;
    color: #000;
}
.notes_text2{
	padding: 2em;
	color: #fff;
	font-size: 2rem;
	line-height: 2;
}
.notes_text3{
	padding: 2em;
	color: #fff;
	font-size: 2rem;
	line-height: 2;
}
.notes_box p{
	font-size: 1.8rem;
	line-height: 1.6;
}
.notes_box span{
	color:#ffcc31;
	font-size: 1.3em;
	font-weight: bold;
}
.notes_box2 p{
	font-size: 1.8rem;
	line-height: 1.6;
}
.notes_box2 span{
	color:#ffcc31;
	font-size: 1.3em;
	font-weight: bold;
}
.notes_text_ttl{
	font-size: 1.4em;
}
.notes_text2_ttl{
	font-size: 1.4em;
}
.notes_text3_ttl{
	font-size: 1.4em;
}
.link_text{
	width: 100%;
	margin: 1em auto 0;
	text-align: right;
	font-size: 3rem;
	font-weight: 400;
}
.link_text a{
	color: #002aff;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.question_hint {
		cursor: pointer;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.question_hint:hover {
		opacity: 0.7;
	}
	.question_ttl {
		width: calc(750 / 750* 100%);
		margin: calc(80 / 750* 100%) auto calc(30 / 750* 100%);
		transform: translateX(0);
	}
	.notes_text{
		font-size: 1.4rem;
		line-height: 1.8;
		background: #fff;
		color: #000;
	}
	.notes_text2{
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.notes_text3{
		font-size: 1.4rem;
		line-height: 1.8;
	}
}

.kura2026 {
    width: 90%;
    min-height: calc(150 / 750 * 100%);
    margin: calc(10 / 750 * 100%);
    padding: 0.8em 0;
	color: #002aff;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    background: #C2F200;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    align-items: anchor-center;
	text-align: right;
	font-size: 3rem;
	font-weight: 400;

}

.kura2026 span{
	font-size: 2em;
	font-weight: bold;
	color: #ffff00;
	vertical-align: text-bottom;
	margin-left: 0.2em;
}
@media screen and (min-width: 768px) {
	.kura2026 {
		cursor: pointer;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.kura2026:hover {
		opacity: 0.7;
	}
}