@charset "UTF-8";
/*=============================================================

* 童話キャラ診断

	Date: 2024-05-13
	
=============================================================*/
/*------------------------------------

表示確認用

------------------------------------*/
/* 表示確認用

表示確認用 */
/*------------------------------------

ベース

------------------------------------*/
.fsc_gfooter__breadcrumb {
		margin-top: 0;
}
#footercontent .fsc_gfooter__breadcrumb {
		display: none;
}
#wrap_fc ul {
		padding-inline-start: 0;
		list-style: none;
}
#wrap_fc a {
		text-decoration: none;
}
img {
		max-width: 100%;
}
/*------------------------------------

PC ベース

------------------------------------*/
@media (min-width: 800px) {
		body {
				width: 100%;
				overflow-x: hidden;
		}
		.sp_fc {
				display: none;
		}
}
/*------------------------------------

SP ベース

------------------------------------*/
@media (max-width: 801px) {
		body {}
		.contents_fc {
				font-size: 3vw;
		}
		.pc_fc {
				display: none;
		}
}
/*------------------------------------

共通

------------------------------------*/
#wrap_fc {
		width: 100%;
		overflow: hidden;
		text-align: center;
		font-family: "Shuei MaruGo B", sans-serif;
		letter-spacing: 0.15em;
		color: #3b3b3b;
		line-height: 1.7;
}
#wrap_fc .section {}
#main_fc {
		padding-bottom: 6em;
}
#main_fc.top-fc {
		background-image: url(../images/bg_top.jpg);
		background-size: 150%;
		background-position: center top;
}
.inner_fc {
		max-width: 768px;
		margin: 0 auto;
}
/*------------------------------------

ロード画面

------------------------------------*/
#first-load {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 98vh;
		z-index: 10;
}
#first-load .curtain {
		background-image: url(../images/load_curtain.png);
		background-size: 160% 100%;
		background-position: center top;
		background-repeat: repeat-x;
		height: 100%;
		width: 49vw;
		position: absolute;
		top: 0;
		background-position: right;
}
#first-load .curtain::after {
		display: block;
		width: 33%;
		height: 99.3%;
		content: '';
		background: url(../images/load_curtain_side.png) no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		right: -31%;
}
#first-load .curtain.c-right::after {}
#first-load .curtain.c-left {
		left: 0;
}
#first-load .curtain.c-right {
		right: 0;
		transform: scale(-1, 1);
}
#first-load .first-load-logo { /* position: relative; */ /* z-index: 1000; */ /* height: 100%; */ position: absolute;
		top: 46%;
		width: 100%;
		transition: all 0.3s;
}
#first-load .first-load-logo img {
		/* position: absolute; */
		/* top: 42%; */
		width: 81%;
		margin: 0 auto;
		display: block;
		max-width: 600px;
}
.load-fc #first-load .curtain.c-left {
		animation: curtain-anime-left 2.0s both 0.5s;
}
.load-fc #first-load .curtain.c-right {
		animation: curtain-anime-right 2.0s both 0.5s;
}
.load-fc #first-load .first-load-logo {
		animation: fadeout-fc 2.0s both 0.5s;
}
@keyframes fadeout-fc {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}
@keyframes curtain-anime-left {
		0% {
				left: 0;
		}
		100% {
				left: -60vw;
		}
}
@keyframes curtain-anime-right {
		0% {
				right: 0;
		}
		100% {
				right: -60vw;
		}
}
/*------------------------------------

タイトルエリア

------------------------------------*/
#title_fc {
		position: relative;
		padding: 1em 0 2em;
		width: 90%;
		margin: 0 auto;
}
#title_fc .ttl_head {}
#title_fc .ttl_main {}
#title_fc h1.title_txt {
		font-size: 100%;
		margin: 0.8em auto 0.7em;
		width: 95%;
}
#title_fc .ttl_sub {
		width: 58%;
		margin: 0 auto 0.7em;
}
#title_fc .ttl_logo {}
#title_fc .ttl_by {
		width: 32%;
}
#title_fc .ttl_dress {
		width: 29%;
		position: absolute;
		top: 14%;
		right: -1%;
}
/*------------------------------------

ストーリー

------------------------------------*/
#story {
		/* padding-top: 3em; */
}
#story .lead_head {
		width: 32%;
}
ul.story_box {
		color: #cb326d;
		font-size: 90%;
}
ul.story_box li {
		margin: 0 auto;
}
ul.story_box li p {
		line-height: 2;
		margin: 1.5em 0;
}
/*------------------------------------

診断スタート

------------------------------------*/
#start-btn {
		width: 80%;
		margin: 2em auto 2em;
		animation: shindan_btn_anime 3.0s infinite;
}
#start-btn a {}
#start-btn img {
		width: 100%;
}
@keyframes shindan_btn_anime {
		0% {
				transform: scale(1.0);
		}
		50% {
				transform: scale(0.95);
		}
		100% {
				transform: scale(1.0);
		}
}
/*------------------------------------

質問一覧

------------------------------------*/
#Q-box {
		display: none;
		position: relative; /* padding: 1em 0 0; */
}
#Q-list {
		min-height: 120vw;
		margin-bottom: 2em;
}
/*------------------------------------

進捗メーター

------------------------------------*/
#Q-meter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 81%;
		margin: 0 auto 3em;
}
#Q-meter li {
		height: 0.25em;
		width: 100%;
		background: #e1b2b3;
		border-radius: 1em;
		position: relative;
}
#Q-meter li::before {
		display: block;
		width: 0.7em;
		height: 0.7em;
		content: '';
		background: #e1b2b3;
		border: 1px solid #e1b2b3;
		top: -0.25em;
		right: -0.2em;
		position: absolute;
		border-radius: 1em;
		z-index: 1;
		transition: all 0.3s;
}
#Q-meter li::after {
		display: block;
		width: 0%;
		height: 100%;
		content: '';
		background: #cb326d;
		top: 0;
		left: 0;
		position: absolute;
		border-radius: 1em;
		transition: all 0.3s;
}
/* 進捗進む */
#Q-meter li.open::before {
		background: #FFF;
		border: 1px solid #cb326d;
}
#Q-meter li.open::after {
		width: 100%;
}
/*------------------------------------

各質問

------------------------------------*/
.Q-wrap {
		padding: 2em 0 3em;
		display: none;
}
.Q-wrap.open {
		display: block;
}
.Q-wrap .Q-inner {}
/* 質問タイトル */
.Q-ttl {
		color: #cb326d;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 91%;
		margin: 0 auto;
		flex-wrap: wrap;
		font-size: 120%;
}
.Q-ttl img {
		width: 3.5em;
		margin-right: 1em;
}
.Q-ttl p {
		margin: 0;
		line-height: 1.5;
		text-align: left;
}
.Q-ttl::after {
		display: block;
		width: 100%;
		height: 1.5em;
		content: '';
		background: url(../images/q_line.svg) no-repeat center;
		background-size: contain;
}
p.Q-ttl-sub {
		font-size: 70%;
		margin: 0.5em 0 1em;
}
/* 選択肢 */
.select-list {}
.select-list ul {
		text-align: left;
		width: 85%;
		margin: 0 auto;
		font-size: 90%;
}
.select-list ul li {
		margin: 1em auto 0;
		position: relative;
}
.select-list ul li a {
		background: #FFF;
		padding: 0.7em 1em;
		border-radius: 2em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		line-height: 1.3;
		position: relative;
		border: 1px solid #FFF;
		z-index: 1;
}
.select-list ul li a:hover {
		border-color: #cb326d;
		opacity: 1 !important;
}
.select-list ul li a::before {
		display: block;
		width: 1.1em;
		height: 1.1em;
		margin: 0 1em 0 0;
		content: '';
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
}
.select-list ul li::after {
		display: block;
		width: 1.3em;
		height: 1.3em;
		margin: 0 1em 0 0;
		content: '';
		background-image: url(../images/fukidashi_arrow.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		position: absolute;
		bottom: -0.2em;
		left: -0.1em;
}
/* 選択肢別 */
.select-list ul li:nth-child(1) a::before {
		background-image: url(../images/icon_select_a.svg);
}
.select-list ul li:nth-child(2) a::before {
		background-image: url(../images/icon_select_b.svg);
}
.select-list ul li:nth-child(3) a::before {
		background-image: url(../images/icon_select_c.svg);
}
.select-list ul li:nth-child(4) a::before {
		background-image: url(../images/icon_select_d.svg);
}
.select-list ul li:nth-child(5) a::before {
		background-image: url(../images/icon_select_e.svg);
}
/*------------------------------------

質問 EX

------------------------------------*/
#Q-EX {}
#Q-EX .select-list ul li {
		display: none;
}
#Q-EX .select-list ul li.open-Q {
		display: block;
}
/*------------------------------------

ローディング

------------------------------------*/
#loading {
		display: none;
		position: absolute;
		top: 42%;
		width: 100%;
		left: 0;
}
#loading .loading-inner {
		display: flex;
		justify-content: center;
		align-items: flex-end;
}
#loading .loading-main {
		width: 30%;
}
#loading ul.loading-dot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 0 0.3em;
}
#loading ul.loading-dot li {
		animation: load_dot 3.0s infinite linear;
}
#loading ul.loading-dot li:nth-child(2) {
		animation-delay: 0.5s
}
#loading ul.loading-dot li:nth-child(3) {
		animation-delay: 1.0s
}
@keyframes load_dot {
		0% {
				opacity: 0;
		}
		49% {
				opacity: 0;
		}
		50% {
				opacity: 1;
		}
		99% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}
/*------------------------------------

フッター

------------------------------------*/
#footer_fc {
		margin: 2em 0;
}
.link_list {}
.link_list a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: left;
		color: #FFF;
		background: #808080;
		border-radius: 6em;
		font-size: 93%;
		font-weight: bold;
		/* font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif; */
		width: 80%;
		margin: 1em auto;
		padding: 1em 0;
		line-height: 1.5;
		position: relative;
		/* border: 4px solid #e5caa5; */
}
.link_list a::after {
		background-image: url(../images/arrow_w.svg);
		display: block;
		width: 0.6em;
		height: 100%;
		content: '';
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		top: 0;
		right: 1.5em;
}
.link_list a img {
		width: 3em;
		margin-right: 1em;
}
.link_list a span {}
/************************************

PC用

************************************/
@media (min-width: 801px) {
		/*------------------------------------

共通

------------------------------------*/
		#wrap_fc a {
				transition: all 0.3s;
		}
		#wrap_fc a:hover {
				opacity: 0.7;
		}
		/*------------------------------------

共通

------------------------------------*/
		#wrap_fc {
				font-size: 140%;
		}
		#wrap_fc .section {}
		#main_fc {}
		#main_fc.top-fc {
				background-size: 1200px;
		}
		.inner_fc {}
		/*------------------------------------

ロード

------------------------------------*/
		#first-load {}
		#first-load .curtain {
				/* background-size: contain; */
				background-size: 100% 100%;
		}
		#first-load .curtain.c-left {}
		#first-load .curtain.c-right {}
		#first-load .first-load-logo {}
		#first-load .first-load-logo img {}
		#first-load .curtain.c-right::after {
				width: 17%;
				right: -16%;
		}
		/*------------------------------------

タイトルエリア

------------------------------------*/
		#title_fc { /* max-width: 550px; */ padding: 1.5em 0 3em;
		}
		#title_fc .ttl_head {
				width: 90%;
		}
		#title_fc .ttl_main {
				min-height: 600px;
				max-height: 800px;
				height: 100vh;
				width: auto;
		}
		#title_fc h1.title_txt {
				width: 85%;
				font-size: 120%;
		}
		#title_fc .ttl_sub {}
		#title_fc .ttl_logo {}
		#title_fc .ttl_by {
				width: 26%;
		}
		/*------------------------------------

ストーリー

------------------------------------*/
		#story {}
		#story .lead_head {
				width: 25%;
				margin: 0em 0 1em;
		}
		ul.story_box {}
		ul.story_box li {}
		ul.story_box li p {}
		/*------------------------------------

診断スタート

------------------------------------*/
		#start-btn {
				width: 58%;
				margin: 2.5em auto 2em;
		}
		#start-btn a {}
		#start-btn img {}
		/*------------------------------------

質問一覧

------------------------------------*/
		#Q-box {}
		#Q-list {
				min-height: 700px;
		}
		/*------------------------------------

進捗メーター

------------------------------------*/
		#Q-meter {}
		#Q-meter li {}
		#Q-meter li::before {}
		#Q-meter li::after {}
		/* 進捗進む */
		#Q-meter li.open::before {}
		#Q-meter li.open::after {}
		/*------------------------------------

各質問

------------------------------------*/
		.Q-wrap {}
		.Q-wrap.open {}
		.Q-wrap .Q-inner {}
		/* 質問タイトル */
		.Q-ttl {}
		.Q-ttl img {}
		.Q-ttl p {
				font-size: 139%;
		}
		.Q-ttl::after {}
		p.Q-ttl-sub {
				font-size: 85%;
				margin: 0.9em 0 1em;
		}
		/* 選択肢 */
		.select-list {}
		.select-list ul {}
		.select-list ul li {}
		.select-list ul li a {
				padding: 0.9em 1em;
		}
		.select-list ul li a:hover {}
		.select-list ul li a::before {}
		.select-list ul li a::after {}
		/* 選択肢別 */
		.select-list ul li:nth-child(1) a::before {}
		.select-list ul li:nth-child(2) a::before {}
		.select-list ul li:nth-child(3) a::before {}
		.select-list ul li:nth-child(4) a::before {}
		.select-list ul li:nth-child(5) a::before {}
		/*------------------------------------

質問 EX

------------------------------------*/
		#Q-EX {}
		#Q-EX .select-list ul li {}
		#Q-EX .select-list ul li.open-Q {}
		/*------------------------------------

ローディング

------------------------------------*/
		#loading {}
		#loading .loading-inner {}
		#loading .loading-main {}
		#loading ul.loading-dot {}
		#loading ul.loading-dot li {}
		#loading ul.loading-dot li:nth-child(2) {}
		#loading ul.loading-dot li:nth-child(3) {}
		/*------------------------------------

フッター

------------------------------------*/
		#footer_fc {}
		.link_list {
				max-width: 550px;
				margin: 0 auto;
		}
		.link_list a {}
		.link_list a::after {}
		.link_list a img {}
		.link_list a span {}
}