@charset "utf-8";
/* =============================================
 shindan
============================================= */

/* 調整 */
@media screen and (min-width:1001px) {
	#generalHeader {
		height: 41px;
	}
}

/* 色パターン */
:root {
	--color1: #66b3ff;
	--color2: #5ce6a1;
	--color3: #ffd766;
	--color4: #b266ff;
}

/* 背景パターン */
.bg_grid {
	background: url(../img/bg_grid.png),
		linear-gradient(#f0f4f7 0%, #fff 50%, #f0f4f7 100%);
	background-size: auto, auto;
	position: relative;
	overflow: hidden;
}

.bg_grid::before {
	content: "";
	width: 200vw;
	height: 200vw;
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(../img/bg_q.png) center no-repeat;
	background-size: contain;
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0.3;
	animation: rotate_grid 100s linear infinite;
}

.main .sec_wrap.bg_grid>.inner {
	width: 90%;
	margin-bottom: var(--size10);
	position: relative;
	line-height: 1.3;
}

@keyframes rotate_grid {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@media screen and (min-width:641px) {
	.bg_grid::before {
		width: 80vw;
		height: 80vw;
	}
}

/* コンテンツ */

.ttl_shidan {
	width: 90%;
	max-width: 600px;
	margin: 0 auto var(--size8);
	text-align: center;
}

.lead_shidan {
	margin-bottom: var(--size8);
	font-family: "UD Shin Go DemiBold";
	font-size: min(4.25vw, 1.5em);
	font-weight: bold;
	text-align: center;
}

.lead_shidan span {
	display: inline-block;
}

.question_list {
	width: 90%;
	margin: 0 auto;
	margin-bottom: var(--size8);
	display: flex;
	flex-wrap: wrap;
	gap: var(--size6) 6%;
}

.hidden-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.image-label {
	width: 47%;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	background: #fff;
	border: 3px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.2s;
}

.image-label img {
	display: block;
	transform: scale(1.05);
	transition: 0.3s;
}

.question_list:has(.hidden-radio:checked) .hidden-radio:not(:checked)+.image-label img {
	filter: grayscale(0.5) brightness(0.5);
	opacity: 0.3;
}

@media screen and (min-width:641px) {
	.ttl_shidan {
		width: 70%;
	}

	.question_list {
		width: 100%;
		flex-wrap: inherit;
		column-gap: 2%;
	}

	.bg_grid::before {
		transform: inherit;
	}

	.image-label {
		width: 100%;
	}
}

.is-selected-1 label[for="q1"] {
	border-color: var(--color1);
}

.is-selected-2 label[for="q2"] {
	border-color: var(--color2);
}

.is-selected-3 label[for="q3"] {
	border-color: var(--color3);
}

.is-selected-4 label[for="q4"] {
	border-color: var(--color4);
}

@media (hover: hover) {
	label[for="q1"]:hover {
		border-color: var(--color1);
	}

	label[for="q2"]:hover {
		border-color: var(--color2);
	}

	label[for="q3"]:hover {
		border-color: var(--color3);
	}

	label[for="q4"]:hover {
		border-color: var(--color4);
	}

	.image-label:hover {
		transform: scale(1.05);
	}
}

.image-label::after {
	content: '\e876';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.5em;
	height: 1.5em;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4vw;
	opacity: 0;
	transform: scale(0);
	transition: 0.3s;
}

.is-selected-1 .image-label::after {
	background-color: var(--color1);
}

.is-selected-2 .image-label::after {
	background-color: var(--color2);
}

.is-selected-3 .image-label::after {
	background-color: var(--color3);
}

.is-selected-4 .image-label::after {
	background-color: var(--color4);
}

.hidden-radio:checked+.image-label::after {
	opacity: 1;
	transform: scale(1);
}

@media screen and (min-width:641px) {
	.image-label::after {
		font-size: min(2vw, 20px);
	}
}

/* btn */

.btn_shindan {
	width: 80%;
	max-width: 400px;
	min-height: 2em;
	padding: 0.75em 0.75em;
	margin: 0 auto var(--size8);
	background: #cccccc;
	box-sizing: border-box;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;
	font-family: "UD Shin Go DemiBold";
	font-size: min(5vw, 1.5em);
	font-weight: bold;
	text-decoration: none;
	pointer-events: none;
	opacity: 0.5;
	transition: .3s;
}

.is-selected-1+.btn_shindan,
.is-selected-2+.btn_shindan,
.is-selected-3+.btn_shindan,
.is-selected-4+.btn_shindan {
	cursor: pointer;
	opacity: 1;
	pointer-events: inherit;
}

.is-selected-1+.btn_shindan {
	background: linear-gradient(#80bfff 0%, #4da6ff 100%);
	box-shadow: 0 4px 10px rgba(102, 179, 255, 0.5), 0 2px 4px rgba(82, 143, 204, 0.5);
}

.is-selected-2+.btn_shindan {
	background: linear-gradient(#73e5ac 0%, #3dcc85 100%);
	box-shadow: 0 4px 10px rgba(92, 230, 161, 0.5), 0 2px 4px rgba(71, 179, 125, 0.5);
}

.is-selected-3+.btn_shindan {
	background: linear-gradient(#ffd766 0%, #ffa366 100%);
	box-shadow: 0 4px 10px rgba(255, 215, 102, 0.5), 0 2px 4px rgba(204, 171, 82, 0.5);
}

.is-selected-4+.btn_shindan {
	background: linear-gradient(#bf80ff 0%, #a64dff 100%);
	box-shadow: 0 4px 10px rgba(191, 128, 255, 0.5), 0 2px 4px rgba(143, 82, 204, 0.5);
}

@media (hover: hover) {
	.is-selected-1+.btn_shindan:hover {
		box-shadow: 0 12px 24px rgba(102, 179, 255, 0.6);
		transform: translateY(-2px);
	}

	.is-selected-2+.btn_shindan:hover {
		box-shadow: 0 12px 24px rgba(92, 230, 161, 0.6);
		transform: translateY(-2px);
	}

	.is-selected-3+.btn_shindan:hover {
		box-shadow: 0 12px 24px rgba(255, 215, 102, 0.6);
		transform: translateY(-2px);
	}

	.is-selected-4+.btn_shindan:hover {
		box-shadow: 0 12px 24px rgba(191, 128, 255, 0.6);
		transform: translateY(-2px);
	}
}

/* =============================================
 result
============================================= */
.result .ttl_shidan {
	width: 65%;
	max-width: 350px;
	margin: 0 auto var(--size8);
}

.result_box {
	margin-bottom: var(--size5);
	background: #fff;
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.05);
}

@media screen and (min-width:801px) {
	.result_box {
		flex-direction: inherit;
	}
}

/* img */
.result_img {
	padding-top: min(4vw, 40px);
	box-sizing: border-box;
}

.type_1 .result_img {
	background: var(--color1) url(../img/bg_your.png) top center no-repeat;
	background-size: 100%;
}

.type_2 .result_img {
	background: var(--color2) url(../img/bg_your.png) top center no-repeat;
	background-size: 100%;
}

.type_3 .result_img {
	background: var(--color3) url(../img/bg_your.png) top center no-repeat;
	background-size: 100%;
}

.type_4 .result_img {
	background: var(--color4) url(../img/bg_your.png) top center no-repeat;
	background-size: 100%;
}

.result_img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 10 / 7;
	object-fit: cover;
	object-position: top;
}

@media screen and (min-width:801px) {
	.result_img {
		width: 45%;
	}

	.type_1 .result_img img {
		aspect-ratio: 10 / 10;
	}
}

/* txt */
.result_txt {
	padding: var(--size6);
}

.result_txt_wrap {
	margin-bottom: var(--size10);
	position: relative;
	z-index: 1;
	text-align: center;
}

.result_txt_wrap::before {
	content: "";
	width: 7em;
	height: 7em;
	position: absolute;
	right: 0;
	top: -5%;
	z-index: -1;
	opacity: 0.5;
}

/**/
.type_1 .result_txt_wrap::before {
	background: url(../img/icon_type_1.png) no-repeat center;
	background-size: contain;
}

.type_2 .result_txt_wrap::before {
	background: url(../img/icon_type_2.png) no-repeat center;
	background-size: contain;
}

.type_3 .result_txt_wrap::before {
	background: url(../img/icon_type_3.png) no-repeat center;
	background-size: contain;
}

.type_4 .result_txt_wrap::before {
	background: url(../img/icon_type_4.png) no-repeat center;
	background-size: contain;
}

/**/
.result_txt_1 {
	margin-bottom: var(--size4);
	font-family: "UD Shin Go Bold";
	font-size: min(5vw, 2em);
	line-height: 1.1;
}

.result_txt_1 .type_name {
	display: block;
	font-size: 2em;
}

/**/
.type_1 .result_txt_1 .type_name {
	color: var(--color1);
}

.type_2 .result_txt_1 .type_name {
	color: var(--color2);
}

.type_3 .result_txt_1 .type_name {
	color: var(--color3);
}

.type_4 .result_txt_1 .type_name {
	color: var(--color4);
}

/**/
.result_txt_1 .type_name .eng {
	position: relative;
	top: 0.05em;
}

.result_txt_2 {
	font-family: "UD Shin Go DemiBold";
	font-size: clamp(1em, 2.5vw, 1.125em);
	font-weight: bold;
	line-height: 1.5;
}

.result_txt_2 span {
	display: inline-block;
}

@media screen and (min-width:801px) {
	.result_txt {
		flex: 1;
	}

	.result_txt_wrap {
		text-align: left;
	}

	.result_txt_wrap::before {
		width: 9em;
		height: 9em;
		top: 0;
		/* transform: translateY(-50%); */
	}

	.result_txt_1 {
		font-size: min(3vw, 2em);
	}
}

/* share sns */
.result .sblink {
	max-width: 400px;
	margin: 0 auto;
	padding-top: 1em;
	position: relative;
	font-size: min(5vw, 1.5em);
}

.result .sblink dl {
	transform: translateY(-1.5em);
}

.result .sblink dt {
	margin-bottom: 1em;
	font-family: "UD Shin Go DemiBold";
}

.result .sblink::before {
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
	background:
		linear-gradient(to right, #ccc 3px, transparent 3px) no-repeat left top,
		linear-gradient(to bottom, #ccc 3px, transparent 3px) no-repeat left top,
		linear-gradient(to left, #ccc 3px, transparent 3px) no-repeat right top,
		linear-gradient(to bottom, #ccc 3px, transparent 3px) no-repeat right top,
		linear-gradient(to right, #ccc 3px, transparent 3px) no-repeat left bottom,
		linear-gradient(to top, #ccc 3px, transparent 3px) no-repeat left bottom,
		linear-gradient(to left, #ccc 3px, transparent 3px) no-repeat right bottom,
		linear-gradient(to top, #ccc 3px, transparent 3px) no-repeat right bottom;
	background-size: 20px 20px;
}

.result .sblink dt span::before,
.result .sblink dt span::after {
	content: none;
}

.result .list_sblink {
	display: flex;
	justify-content: center;
	column-gap: 1em;
	font-size: inherit;
}

.result .list_sblink li {
	margin: 0;
}

.result .list_sblink li a {
	width: 3.25em !important;
	height: 3.25em !important;
	padding: 0.65em !important;
}

@media screen and (min-width:801px) {
	.result .sblink {
		max-width: inherit;
	}
}

@media (hover: hover) {
	.result .list_sblink li a:hover {
		transform: scale(1.1);
	}
}

/* official sns */
.result_official {
	text-align: center;
}

.result_official_logo {
	width: 60%;
	max-width: 270px;
	margin: 0 auto var(--size3);
}

.result_official_txt {
	margin-bottom: var(--size4);
	color: #000;
	font-family: "UD Shin Go Bold";
	font-size: min(6vw, 2.25em);
}

/**/
.result .bnr_list {
	width: 100%;
}

.result .official_x .icon::after,
.result .official_instagram .icon::after,
.result .official_tiktok .icon::after {
	font-size: 1.1em;
}

/* .result .official_x .icon::after {
    content: "X";
} */
.result .official_instagram .icon::after {
	content: "Instagram";
}

.result .official_tiktok .icon::after {
	content: "TikTok";
}

@media screen and (min-width: 1001px) {
	.result .bnr_list.official li a {
		min-height: 4.5em;
	}
}


/* =============================================
 汎用
============================================= */

/* テキスト
------------------------------------ */
.fs_res_s {
	font-size: clamp(0.875em, 2.2vw, 1em) !important;
}

.fs_res_l {
	font-size: clamp(1em, 2.5vw, 1.25em) !important;
}

.fs_res_xl {
	font-size: clamp(1.125em, 2.8vw, 1.5em) !important;
}

/* レイアウト
------------------------------------ */
:root {
	--size2: min(2vw, 12px);
	--size3: min(3vw, 18px);
	--size4: min(4vw, 24px);
	--size5: min(5vw, 30px);
	--size6: min(6vw, 36px);
	--size7: min(7vw, 42px);
	--size8: min(8vw, 48px);
	--size9: min(9vw, 54px);
	--size10: min(10vw, 60px);
}

/* --- Margin --- */

/* Margin Top */
.mt0 {
	margin-top: 0;
}

.mt2 {
	margin-top: var(--size2);
}

.mt3 {
	margin-top: var(--size3);
}

.mt4 {
	margin-top: var(--size4);
}

.mt5 {
	margin-top: var(--size5);
}

.mt6 {
	margin-top: var(--size6);
}

.mt7 {
	margin-top: var(--size7);
}

.mt8 {
	margin-top: var(--size8);
}

.mt9 {
	margin-top: var(--size9);
}

.mt10 {
	margin-top: var(--size10);
}

/* Margin Bottom */
.mb0 {
	margin-bottom: 0;
}

.mb2 {
	margin-bottom: var(--size2);
}

.mb3 {
	margin-bottom: var(--size3);
}

.mb4 {
	margin-bottom: var(--size4);
}

.mb5 {
	margin-bottom: var(--size5);
}

.mb6 {
	margin-bottom: var(--size6);
}

.mb7 {
	margin-bottom: var(--size7);
}

.mb8 {
	margin-bottom: var(--size8);
}

.mb9 {
	margin-bottom: var(--size9);
}

.mb10 {
	margin-bottom: var(--size10);
}

/* Vertical Margin (Top & Bottom) */
.my0 {
	margin-top: 0;
	margin-bottom: 0;
}

.my2 {
	margin-top: var(--size2);
	margin-bottom: var(--size2);
}

.my3 {
	margin-top: var(--size3);
	margin-bottom: var(--size3);
}

.my4 {
	margin-top: var(--size4);
	margin-bottom: var(--size4);
}

.my5 {
	margin-top: var(--size5);
	margin-bottom: var(--size5);
}

.my6 {
	margin-top: var(--size6);
	margin-bottom: var(--size6);
}

.my7 {
	margin-top: var(--size7);
	margin-bottom: var(--size7);
}

.my8 {
	margin-top: var(--size8);
	margin-bottom: var(--size8);
}

.my9 {
	margin-top: var(--size9);
	margin-bottom: var(--size9);
}

.my10 {
	margin-top: var(--size10);
	margin-bottom: var(--size10);
}

/* Margin Auto */
.mxauto {
	margin-left: auto;
	margin-right: auto;
}

/* --- Padding --- */

/* Padding Top */
.pt0 {
	padding-top: 0;
}

.pt2 {
	padding-top: var(--size2);
}

.pt3 {
	padding-top: var(--size3);
}

.pt4 {
	padding-top: var(--size4);
}

.pt5 {
	padding-top: var(--size5);
}

.pt6 {
	padding-top: var(--size6);
}

.pt7 {
	padding-top: var(--size7);
}

.pt8 {
	padding-top: var(--size8);
}

.pt9 {
	padding-top: var(--size9);
}

.pt10 {
	padding-top: var(--size10);
}

/* Padding Bottom */
.pb0 {
	padding-bottom: 0;
}

.pb2 {
	padding-bottom: var(--size2);
}

.pb3 {
	padding-bottom: var(--size3);
}

.pb4 {
	padding-bottom: var(--size4);
}

.pb5 {
	padding-bottom: var(--size5);
}

.pb6 {
	padding-bottom: var(--size6);
}

.pb7 {
	padding-bottom: var(--size7);
}

.pb8 {
	padding-bottom: var(--size8);
}

.pb9 {
	padding-bottom: var(--size9);
}

.pb10 {
	padding-bottom: var(--size10);
}

/* Vertical Padding (Top & Bottom) */
.py0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py2 {
	padding-top: var(--size2);
	padding-bottom: var(--size2);
}

.py3 {
	padding-top: var(--size3);
	padding-bottom: var(--size3);
}

.py4 {
	padding-top: var(--size4);
	padding-bottom: var(--size4);
}

.py5 {
	padding-top: var(--size5);
	padding-bottom: var(--size5);
}

.py6 {
	padding-top: var(--size6);
	padding-bottom: var(--size6);
}

.py7 {
	padding-top: var(--size7);
	padding-bottom: var(--size7);
}

.py8 {
	padding-top: var(--size8);
	padding-bottom: var(--size8);
}

.py9 {
	padding-top: var(--size9);
	padding-bottom: var(--size9);
}

.py10 {
	padding-top: var(--size10);
	padding-bottom: var(--size10);
}

/**/