@charset "utf-8";
/* **************************************************************************************************
 0px 〜
************************************************************************************************** */
/* ------------------------------
reset
------------------------------ */
html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

#quiz_content,
#quiz_content div,
#quiz_content span,
#quiz_content object,
#quiz_content iframe,
#quiz_content h1,
#quiz_content h2,
#quiz_content h3,
#quiz_content h4,
#quiz_content h5,
#quiz_content h6,
#quiz_content p,
#quiz_content blockquote,
#quiz_content pre,
#quiz_content a,
#quiz_content abbr,
#quiz_content acronym,
#quiz_content address,
#quiz_content code,
#quiz_content del,
#quiz_content dfn,
#quiz_content em,
#quiz_content img,
#quiz_content q,
#quiz_content dl,
#quiz_content dt,
#quiz_content dd,
#quiz_content ol,
#quiz_content ul,
#quiz_content li,
#quiz_content fieldset,
#quiz_content form,
#quiz_content label,
#quiz_content legend,
#quiz_content table,
#quiz_content caption,
#quiz_content tbody,
#quiz_content tfoot,
#quiz_content thead,
#quiz_content tr,
#quiz_content th,
#quiz_content td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

#quiz_content {
	line-height: 1.5;
	background: #fff;
	margin: 0;
}

#quiz_content table {
	border-collapse: separate;
	border-spacing: 0;
}

#quiz_content caption,
#quiz_content th,
#quiz_content td {
	text-align: left;
	font-weight: 400;
}

#quiz_content blockquote:before,
#quiz_content blockquote:after,
#quiz_content q:before,
#quiz_content q:after {
	content: "";
}

#quiz_content blockquote,
#quiz_content q {
	quotes: "" "";
}

#quiz_content a img {
	border: none;
}

#quiz_content article,
#quiz_content aside,
#quiz_content canvas,
#quiz_content details,
#quiz_content figcaption,
#quiz_content figure,
#quiz_content footer,
#quiz_content header,
#quiz_content hgroup,
#quiz_content menu,
#quiz_content nav,
#quiz_content section,
#quiz_content summary {
	display: block;
}

/* ------------------------------ */

#quiz_content {
	height: 100%;
	min-height: 100%;
	font-size: 3.2vw;
	line-height: 1.6;
	letter-spacing : 0.02em;
	-webkit-text-size-adjust: none;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 500;
	width: 100%;
	color: #222222;
	background-color: #fff;
}

#quiz_content * {
	box-sizing: border-box;
}

#quiz_content img {
	max-width: 100%;
	width: 100%;
	vertical-align: top;
	display: block;
}

#quiz_content .set_cursor {
	cursor: pointer;
}

/* //////////////////////////////////////////////////////////////////
view
////////////////////////////////////////////////////////////////// */
#quiz_content .view_sp {
	display: block;
}

#quiz_content .view_pc {
	display: none;
}

/* //////////////////////////////////////////////////////////////////
quiz_content
////////////////////////////////////////////////////////////////// */
#quiz_content {
	width: 100%;
	background-image: url("../img/bg.jpg");
	background-size: contain;
	background-repeat: repeat-y;
}

/* //////////////////////////////////////////////////////////////////
content
////////////////////////////////////////////////////////////////// */
#quiz_content #content {
}

#scenes {
}

#scenes #title_belt {
	background-color: #fff;
	z-index: 1000;
	position: relative;
	box-shadow: 0 1.5vw 1.5vw 0 rgba(85, 114, 112, 0.10);
}

#scenes #title_belt .inner_content {
	padding: 2vw 0;
}

#scenes #title_belt #btn_to_top {
	width: 18vw;
	position: absolute;
	top: 2.7vw;
	left: 2vw;
	background-color: #fff;
	color: #a9a9a9;
	border: 1px solid #dbdbdb;
	border-radius: 1.2vw;
	font-size: 2.5vw;
	text-align: center;
	padding: 1.2vw 0 1.0vw 3vw;
}

#scenes #title_belt #btn_to_top::after {
	content: "＜";
	position: absolute;
	top: 48%;
	right: auto;
	left: 1vw;
	transform: translateY(-50%) scale(0.8, 1.0);
}

#scenes #title_belt #btn_to_top:hover {
	opacity: 0.8;
}

#scenes #title_belt p {
	color: #21b3a9;
	font-weight: bold;
	text-align: center;
	font-size: 5vw;
}

#scenes .scene {
}

#scenes .scene .basic_btn {
	width: 90vw;
	margin: 0 auto;
	transition: 0.1s all;
	position: relative;
	text-align: center;
	line-height: 1.0;
	font-weight: bold;
	border: 0.9vw solid #000000;
	background-color: #b0f4e7;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.12),
				inset 0 0.8vw 0 0 rgba(255, 255, 255, 1.00),
				inset 0 -1.0vw 0 0 rgba(111, 198, 187, 1.00);
	font-size: 6.5vw;
	letter-spacing : 0.02em;
	border-radius: 10vw;
	padding: 5.0vw 0 5.2vw;
	text-shadow: 0 0.9vw 0 rgba(70, 178, 168, 0.30);
}

#scenes .scene .basic_btn::after {
	content: "＞";
	position: absolute;
	top: 48%;
	right: 4vw;
	left: auto;
	transform: translateY(-50%) scale(0.8, 1.0);
}

#scenes .scene .basic_btn.reverse {
	padding-left: 5vw;
}

#scenes .scene .basic_btn.reverse::after {
	content: "＜";
	position: absolute;
	top: 48%;
	right: auto;
	left: 4vw;
	transform: translateY(-50%) scale(0.8, 1.0);
}

#scenes .scene .basic_btn.hover {
	transition: 0.1s all;
	background-color: #27beb4;
	color: #fff;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.12),
				inset 0 0.8vw 0 0 rgba(255, 255, 255, 0.70),
				inset 0 -1.0vw 0 0 rgba(0, 0, 0, 0.28);
	text-shadow: 0 0.9vw 0 rgba(0, 0, 0, 0.10);
}

#scenes .scene.question {
}

#scenes .scene .question_top {
	background-color: #e7f5f4;
	padding: 4vw 0 4.5vw;
}

#scenes .scene .question_top p {
	text-align: center;
	font-weight: bold;
	font-size: 4.8vw;
	margin-top: 2vw;
}

#scenes .scene .question_top p.notice {
	font-size: 3.8vw;
	color: #fff;
	padding: 1.5vw;
	background-color: #ec7aad;
	margin: 3vw auto 0;
	width: 85vw;
}

#scenes .scene .choices_area {
}

#scenes .scene .choices_area.type_single {
}

#scenes .scene .choices_area.type_plural {
}

#scenes .scene .choices_area.type_plural .basic_btn.go_to_answer {
	margin-bottom: 10vw;
}

#scenes .scene .choices_area ul {
	padding: 10vw 7vw;
	list-style: none;
}

#scenes .scene .choices_area ul li {
	position: relative;
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
	border: 0.8vw solid #000000;
	background-color: #fff;
	border-radius: 2.5vw;
	font-size: 4.8vw;
	padding: 4.5vw 0;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(211, 239, 237, 1.00);
}

#scenes .scene .choices_area ul li.hover {
	color: #21b3a9;
	border-color: #21b3a9;
	background-color: #fff;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(211, 239, 237, 1.00);
}

#scenes .scene .choices_area ul li:nth-of-type(n+2) {
	margin-top: 8vw;
}

#scenes .scene .choices_area ul li .icon {
	display: block;
	width: 14vw;
	height: 14vw;
	position: absolute;
	top: -6vw;
	left: -6vw;
}

#scenes .scene .choices_area ul li .check_def {
	display: block;
	width: 8vw;
	height: 8vw;
	position: absolute;
	top: 7vw;
	right: 4vw;
}

#scenes .scene .choices_area ul li .check {
	display: block;
	width: 8vw;
	height: 8vw;
	position: absolute;
	top: 7vw;
	right: 4vw;
	display: none;
}

/* 選択 */
#scenes .scene .choices_area ul li.selected {
}

/* 答え */
#scenes .scene .choices_area ul li.right {
}

/* グレー */
#scenes .scene .choices_area ul li.gray {
	opacity: 0.7;
	color: #c3c3c3;
	border-color: #c4c4c4;
	background-color: #f4f4f4;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(231, 231, 231, 1.00);
}

#scenes .scene .choices_area ul li.gray_x {
	opacity: 0.7;
	color: #c3c3c3;
	border-color: #c4c4c4;
	background-color: #f4f4f4;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(231, 231, 231, 1.00);
}

#scenes .scene .choices_area ul li.gray_x.gray_with_check .check_def {
	display: none;
}

#scenes .scene .choices_area ul li.gray_x.gray_with_check .check.check_04 {
	display: block;
}

#scenes .scene .choices_area ul li.gray_x.gray_with_x .check_def {
	display: none;
}

#scenes .scene .choices_area ul li.gray_x.gray_with_x .check.check_05 {
	display: block;
}

/* ピンク */
#scenes .scene .choices_area ul li.pink {
	color: #ec7aad;
	border-color: #ec7aad;
	background-color: #fff;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(245, 236, 240, 1.00);
}

#scenes .scene .choices_area ul li.pink.pink_with_check {
}

#scenes .scene .choices_area ul li.pink.pink_with_check .check_def {
	display: none;
}

#scenes .scene .choices_area ul li.pink.pink_with_check .check.check_03 {
	display: block;
}

#scenes .scene .choices_area ul li.pink.pink_with_x {
}

#scenes .scene .choices_area ul li.pink.pink_with_x .check_def {
	display: none;
}

#scenes .scene .choices_area ul li.pink.pink_with_x .check.check_05 {
	display: block;
}

/* グリーン */
#scenes .scene .choices_area ul li.green {
	color: #21b3a9;
	border-color: #21b3a9;
	background-color: #fff;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(211, 239, 237, 1.00);
}

#scenes .scene .choices_area ul li.green_x {
	opacity: 0.7;
	color: #75bab5;
	border-color: #75bab5;
	background-color: #f0f8f7;
	box-shadow: 0 1.4vw 0 0 rgba(0, 0, 0, 0.10),
				inset 0 -0.8vw 0 0 rgba(211, 239, 237, 1.00);
}

#scenes .scene .choices_area ul li.green .check_def {
	display: none;
}

#scenes .scene .choices_area ul li.green .check.check_02 {
	display: block;
}

#scenes #question_movie_area {
	margin-top: -4vw;
}

#scenes #question_movie_area .head {
	background-color: #21b3a9;
	color: #fff;
	font-size: 4.8vw;
	text-align: center;
	padding: 1.5vw 0;
	font-weight: bold;
}

#scenes #question_movie_area .movie {
	text-align: center;
	padding: 3vw 5vw 10vw;
	color: red;	/* 注釈 */
	background-color: #e7f5f4;
}

#scenes .scene .point_area {
	background-color: #fbf3f7;
	margin-top: 6vw;
	padding-bottom: 3vw;
}

#scenes .scene .point_area .point_area_layout {
	display: flex;
	justify-content: space-between;
	padding: 0 3.5vw 0 2.5vw;
}

#scenes .scene .point_area .character {
	width: 16vw;
	margin-top: -4vw;
}

#scenes .scene .point_area .point_content {
	width: 77vw;
	margin-top: -2vw;
}

#scenes .scene .point_area .point_content .head {
	width: 53vw;
	margin: 0 auto;
}

#scenes .scene .point_area .point_content .comment {
	margin-top: 2vw;
}

#scenes .scene .point_area .point_content .comment .comment_top {
}

#scenes .scene .point_area .point_content .comment .comment_middle {
	background-image: url("../img/point_pop_02.png");
	background-size: 100% auto;
	background-repeat: repeat-y;
	width: 100%;
	height: 35vw;
	position: relative;
	font-weight: bold;
}

#scenes .scene .point_area .point_content .comment .comment_middle p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	padding: 0 6.0vw 0.8vw 9.0vw;
	letter-spacing : 0.05em;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}

#scenes .scene .point_area .point_content .comment .comment_bottom {
}

#scenes .scene.question .basic_btn.btn_scene_change {
	margin-top: 8vw;
	margin-bottom: 6vw;
}

#scenes .youtube_wrap {
	position: relative;
	width: 100%;
}

#scenes .youtube_wrap:before {
	content:"";
	display: block;
	padding-top: 56.25%;
}

#scenes .youtube_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 1vw 1vw 5vw 0 rgba(0,0,0,0.08);
}

/* ----------
scene_opening
---------- */
#scenes #scene_opening {
	padding: 8vw 0 12vw;
}

#scenes #scene_opening .copy {
}

#scenes #scene_opening .title {
	margin: 6vw auto 0;
	position: relative;
}

#scenes #scene_opening .title .head {
}

#scenes #scene_opening .title .brain {
	position: absolute;
	top: -8vw;
	right: 2vw;
	width: 36vw;
}

#scenes #scene_opening .about {
	position: relative;
	margin: 3vw auto 0;
}

#scenes #scene_opening .basic_btn {
	margin-top: 6vw;
}

/* ----------
scene_about
---------- */
#scenes #scene_about {
	padding: 8vw 0;
}

#scenes #scene_about .head {
}

#scenes #scene_about .movie_area {
	background-color: #e7f5f4;
	width: 90vw;
	margin: 6vw auto 0;
	padding: 5vw;

}

#scenes #scene_about .movie_area p {
	text-align: center;
	font-weight: bold;
}

#scenes #scene_about .movie {
	text-align: center;
	color: red;	/* 注釈 */
	margin-top: 5vw;
}

#scenes #scene_about .basic_btn {
	margin-top: 6vw;
}

/* ----------
scene_q_01
---------- */
#scenes #scene_q_01 {
	padding-bottom: 8vw;
}

/* ----------
scene_q_02
---------- */
#scenes #scene_q_02 {
	padding-bottom: 8vw;
}

/* ----------
scene_q_03
---------- */
#scenes #scene_q_03 {
	padding-bottom: 8vw;
}

/* ----------
scene_q_04
---------- */
#scenes #scene_q_04 {
	padding-bottom: 8vw;
}

/* ----------
scene_q_05
---------- */
#scenes #scene_q_05 {
	padding-bottom: 8vw;
}

/* ----------
scene_ending
---------- */
#scenes #scene_ending {
	 padding-bottom: 12vw;
}

#scenes #scene_ending .results {
}

#scenes #scene_ending .results .result {
}

#scenes #scene_ending .results .result .result_copy {
	padding: 5vw 5vw 4vw;
	background-image: url("../img/result_copy_bg.jpg");
	background-size: 5%;
}

#scenes #scene_ending .results .result .result_copy img {
	width: 560px;
	margin: 0 auto;
}

#scenes #scene_ending .results .result .result_img {
	background-color: #e7f5f4;
}

#scenes #scene_ending .btn_scene_change.go_to_top {
	margin-top: 8vw;
}