@charset "utf-8";
/***
* main
**************************************/
main {
	position: relative;
	overflow-x: clip;
	background-color: var(--color-base);
}
html.mback {
	background-color: #000;
}

/***
* common
**************************************/
/* ユーザーボイス　横スクロール */
.scroll_container {
	display: flex;
	width: 100%;
	gap: calc(var(--winW) * 8);
	overflow-x: auto;
	padding: calc(var(--winW) * 0) calc(var(--winW) * 10) calc(var(--winW) * 10) calc(var(--winW) * 10);
	-ms-overflow-style: none; /* IE, Edge */
	scrollbar-width: none; /* Firefox */
	cursor: grab;
	position:relative;
}
.scroll_container.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.scroll_container::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}
.card {
	width: calc(var(--winW) * 268);
	height: calc(var(--winW) * 180);
	flex-shrink: 0;
	padding: calc(var(--winW) * 0) calc(var(--winW) * 19) calc(var(--winW) * 25);
	border: calc(var(--winW) * 1) solid #F7F7F7;
	background: #FFF;
	box-shadow: 0 calc(var(--winW) * 4) calc(var(--winW) * 8) 0 rgba(0, 0, 0, 0.16);
	position: relative;
	display: flex;
	align-items: center;
}
.comment {
	font-size: calc(var(--winW) * 12);
	line-height: 1.6;
	letter-spacing: 0.12em;
	color: #333333;
	margin-top: 0;
}
.user_info {
	display: flex;
	align-items: center;
	color: #2273BA;
	font-size: calc(var(--winW) * 10);
	position: absolute;
	bottom: calc(var(--winW) * 20);
}
.user_icon {
	margin-right: calc(var(--winW) * 8);
	width: calc(var(--winW) * 16.32);
}

.scroll_right {
	width: calc(var(--winW) * 115);
	margin-left: calc(var(--winW) * 10);
	position: absolute;
	bottom: calc(var(--winW) * 8);
}
.scroll_right.bt {
	bottom: calc(var(--winW) * -22);
}
.fave .scroll_right {
	position: unset;
	bottom: unset;
}


@media screen and (min-width: 769px) {
	.scroll_container {
		gap: calc(var(--winW) * 16);
		padding: calc(var(--winW) * 0) calc(var(--winW) * 60) calc(var(--winW) * 20) calc(var(--winW) * 60);
	}
	.card {
		width: calc(var(--winW) * 400);
		height: calc(var(--winW) * 210);
		padding: calc(var(--winW) * 0) calc(var(--winW) * 30) calc(var(--winW) * 30);
	}
	.comment {
		font-size: calc(var(--winW) * 16);
	}
	.user_info {
		font-size: calc(var(--winW) * 14);
	}
	.user_icon {
		margin-right: calc(var(--winW) * 8);
		width: calc(var(--winW) * 16.824);
	}
	.scroll_right {
		width: calc(var(--winW) * 200);
		margin-left: calc(var(--winW) * 60);
		bottom: calc(var(--winW) * 26);
	}
	.scroll_right.bt {
		bottom: calc(var(--winW) * -46);
	}
	.fave .scroll_right {
		position: unset;
		bottom: unset;
	}
}

/***
* floating-menu
**************************************/
.floating-menu {
	position: fixed;
	bottom: calc(var(--winW) * 10);
	left: 50%;
	transform: translate(-50%, 100%);
	width: calc(var(--winW) * 370);
	background-color: #2273BA;
	z-index: 100;
	visibility: hidden;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
	border-radius: calc(var(--winW) * 3);
}
.floating-menu.is-visible {
	transform: translate(-50%, 0);
	visibility: visible;
}
.floating-menu__list {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.floating-menu__list li {
	flex: 1;
	text-align: center;
}
.floating-menu__list a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(var(--winW) * 42);
	color: #ffffff;
	text-decoration: none;
	font-size: calc(var(--winW) * 10);
	letter-spacing: 0.05em;
	transition: background-color 0.2s;
}
.floating-menu__list a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.floating-menu__list a::before {
	content: "";
	display: inline-block;
	width: calc(var(--winW) * 22);
	height: calc(var(--winW) * 22);
	margin-right: calc(var(--winW) * 9);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.icon-catalog::before {
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.3799 7.46582H13.0756C12.9007 7.46582 12.7617 7.60929 12.7617 7.78414C12.7617 7.959 12.9007 8.10247 13.0756 8.10247H16.3799C16.5547 8.10247 16.6937 7.959 16.6937 7.78414C16.6937 7.60929 16.5547 7.46582 16.3799 7.46582Z' fill='white'/%3E%3Cpath d='M16.3799 10.5859H13.0756C12.9007 10.5859 12.7617 10.7294 12.7617 10.9043C12.7617 11.0791 12.9007 11.2226 13.0756 11.2226H16.3799C16.5547 11.2226 16.6937 11.0791 16.6937 10.9043C16.6937 10.7294 16.5547 10.5859 16.3799 10.5859Z' fill='white'/%3E%3Cpath d='M16.3799 12.1416H13.0756C12.9007 12.1416 12.7617 12.2851 12.7617 12.4599C12.7617 12.6348 12.9007 12.7783 13.0756 12.7783H16.3799C16.5547 12.7783 16.6937 12.6348 16.6937 12.4599C16.6937 12.2851 16.5547 12.1416 16.3799 12.1416Z' fill='white'/%3E%3Cpath d='M13.0756 9.65813H15.0572C15.2321 9.65813 15.3711 9.51466 15.3711 9.33981C15.3711 9.16495 15.2321 9.02148 15.0572 9.02148H13.0756C12.9007 9.02148 12.7617 9.16495 12.7617 9.33981C12.7617 9.51466 12.9007 9.65813 13.0756 9.65813Z' fill='white'/%3E%3Cpath d='M7.91327 17.1631C6.67584 16.4323 4.83763 16.0601 2.44796 16.0601H0.97739V7.33986C0.97739 7.07085 0.762185 6.84668 0.488695 6.84668C0.215205 6.84668 0 7.06637 0 7.33986V16.5488C0 16.8178 0.219689 17.0375 0.488695 17.0375H2.44796C5.20079 17.0375 6.66687 17.5621 7.41561 18.006C7.49183 18.0508 7.57701 18.0732 7.66668 18.0732C7.83257 18.0732 7.99845 17.988 8.08812 17.8356C8.22711 17.6024 8.15089 17.3021 7.91327 17.1631Z' fill='white'/%3E%3Cpath d='M20.7875 6.84668C20.5184 6.84668 20.2988 7.06637 20.2988 7.33986V16.0601H18.8282C16.443 16.0601 14.6048 16.4323 13.3629 17.1631C13.1297 17.3021 13.049 17.6024 13.1925 17.8356C13.2822 17.9925 13.4481 18.0732 13.614 18.0732C13.6991 18.0732 13.7843 18.0508 13.865 18.006C14.6138 17.5621 16.0798 17.0375 18.8327 17.0375H20.7919C21.0609 17.0375 21.2851 16.8178 21.2851 16.5488V7.33986C21.2851 7.07085 21.0654 6.84668 20.7919 6.84668H20.7875Z' fill='white'/%3E%3Cpath d='M19.3124 14.5854V4.48869C19.3124 4.21969 19.0972 4 18.8282 4C13.5333 4 11.991 4 10.6459 5.14776C9.67303 4.17037 7.7855 4 2.45021 4C2.1812 4 1.95703 4.21969 1.95703 4.48869V14.5854C1.95703 14.8544 2.17672 15.0786 2.44573 15.0786C9.37264 15.0786 10.1393 16.854 10.1528 16.9123C10.1572 16.9258 10.1662 16.9392 10.1707 16.9527C10.1752 16.9796 10.1886 17.0065 10.2021 17.0289C10.2155 17.0558 10.2335 17.0827 10.2514 17.1051C10.2693 17.123 10.2828 17.141 10.3007 17.1589C10.3276 17.1813 10.359 17.2037 10.3859 17.2261C10.4038 17.2351 10.4173 17.2441 10.4307 17.253C10.4756 17.271 10.5159 17.2844 10.5607 17.2934C10.5697 17.2934 10.5787 17.2979 10.5876 17.3024H10.6101C10.6101 17.3024 10.628 17.3068 10.637 17.3068C10.6504 17.3068 10.6683 17.3068 10.6818 17.3068C10.7087 17.3068 10.7356 17.2889 10.7625 17.2844C10.7804 17.2799 10.7939 17.2755 10.8118 17.271C10.8522 17.2575 10.8836 17.2351 10.9149 17.2127C10.9284 17.2037 10.9418 17.1948 10.9553 17.1858C10.9822 17.1589 11.0091 17.132 11.027 17.0961C11.0405 17.0782 11.0494 17.0647 11.0584 17.0468C11.0763 17.0154 11.0853 16.984 11.0988 16.9527C11.0988 16.9392 11.1077 16.9302 11.1122 16.9168C11.1212 16.8854 11.8609 15.0831 18.8237 15.0831C19.0927 15.0831 19.3124 14.8634 19.3124 14.5899V14.5854ZM8.72254 11.1242H4.68296C4.50811 11.1242 4.36912 10.9807 4.36912 10.8059C4.36912 10.631 4.50811 10.4875 4.68296 10.4875H8.72254C8.89739 10.4875 9.03638 10.631 9.03638 10.8059C9.03638 10.9807 8.89739 11.1242 8.72254 11.1242ZM4.36912 9.25011C4.36912 9.07525 4.50811 8.93178 4.68296 8.93178H7.98725C8.16211 8.93178 8.3011 9.07525 8.3011 9.25011C8.3011 9.42496 8.16211 9.56843 7.98725 9.56843H4.68296C4.50811 9.56843 4.36912 9.42496 4.36912 9.25011ZM8.72254 8.00819H4.68296C4.50811 8.00819 4.36912 7.86472 4.36912 7.68987C4.36912 7.51502 4.50811 7.37155 4.68296 7.37155H8.72254C8.89739 7.37155 9.03638 7.51502 9.03638 7.68987C9.03638 7.86472 8.89739 8.00819 8.72254 8.00819ZM11.1301 15.518L11.1212 6.35381C11.1526 6.22379 11.3947 4.98187 18.3395 4.98187V14.1012C14.2103 14.1864 12.2869 14.5988 11.1346 15.518H11.1301Z' fill='white'/%3E%3C/svg%3E%0A");
}
.icon-search::before {
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9888 3C7.12843 3 4 6.27904 4 10.2128C4 14.5507 9.18013 18.362 10.6214 19.5091C10.839 19.6827 11.1414 19.6827 11.359 19.5091C12.8003 18.362 17.9804 14.5507 17.9804 10.2128C17.9776 6.27904 14.8492 3 10.9888 3ZM10.9549 5.91186C12.8427 5.91186 14.445 7.17566 14.9933 8.91765H14.349C13.829 7.52292 12.5036 6.52952 10.9549 6.52952C9.40622 6.52952 8.08363 7.52292 7.56081 8.91765H6.91647C7.4619 7.17566 9.06709 5.91186 10.9549 5.91186ZM10.9549 14.5535C9.11513 14.5535 7.54386 13.3523 6.95887 11.6758H7.61168C8.16558 13.0022 9.45426 13.933 10.9549 13.933C12.4555 13.933 13.7442 13.0022 14.2981 11.6758H14.9509C14.3659 13.3495 12.7975 14.5535 10.9549 14.5535ZM15.2533 11.1464H6.5717C6.11105 11.1464 5.74084 10.7678 5.74084 10.2981C5.74084 9.82849 6.11388 9.44992 6.5717 9.44992H15.2561C15.7168 9.44992 16.087 9.82849 16.087 10.2981C16.087 10.7678 15.7139 11.1464 15.2561 11.1464H15.2533Z' fill='white'/%3E%3C/svg%3E%0A");
}
.icon-estimate::before {
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8005 8.49575C11.9675 8.49575 12.9134 9.44169 12.9134 10.6087C12.9134 11.7757 11.9675 12.7217 10.8005 12.7217C9.63343 12.7217 8.68749 11.7757 8.68749 10.6087C8.68749 9.44169 9.63343 8.49575 10.8005 8.49575ZM3.65094 7.73053H4.62613C4.94931 7.73053 5.20469 7.96976 5.25543 8.27862L6.69216 5.98037C7.03028 5.43945 7.61143 5.09874 8.24851 5.06628C9.09311 5.02209 9.94351 5 10.7985 5C11.6541 5 12.5045 5.02209 13.3483 5.06567C13.9854 5.09889 14.5667 5.43945 14.9046 5.98037L16.344 8.28319C16.3933 7.97235 16.6502 7.73053 16.9746 7.73053H17.9498C18.3087 7.73053 18.6 8.02187 18.6 8.38071V9.03089C18.6 9.38973 18.3087 9.68107 17.9498 9.68107H17.6326C17.8394 10.1641 17.9498 10.6841 17.9498 11.2135L17.9538 17.4827C17.9538 17.8416 17.6624 18.1329 17.3036 18.1329H16.0034C15.6446 18.1329 15.3532 17.8416 15.3532 17.4827V15.964C13.8528 16.1032 12.3353 16.1825 10.7985 16.1825C9.26423 16.1825 7.74933 16.1032 6.2515 15.9648V17.4829C6.2515 17.8417 5.96016 18.1331 5.60132 18.1331H4.30112C3.94228 18.1331 3.65094 17.8417 3.65094 17.4829L3.64698 11.2136C3.64698 10.6844 3.75821 10.1644 3.96422 9.68122H3.65018C3.29134 9.68122 3 9.38988 3 9.03104V8.38086C3.00061 8.02202 3.29195 7.73069 3.65079 7.73069L3.65094 7.73053ZM7.43986 10.6086C7.43986 10.8166 7.46515 11.0175 7.50096 11.2152L6.89954 11.7288L7.25 12.5746L8.03473 12.5129C8.26755 12.8497 8.55874 13.1416 8.89548 13.3743L8.83377 14.159L9.6796 14.5095L10.1932 13.9081C10.3903 13.9439 10.5925 13.9692 10.7998 13.9692C11.0078 13.9692 11.2088 13.9439 11.4064 13.9081L11.9201 14.5095L12.7659 14.159L12.7042 13.3743C13.041 13.1416 13.3329 12.8497 13.5656 12.5129L14.3503 12.5746L14.7014 11.7288L14.1 11.2152C14.1358 11.0175 14.1611 10.8167 14.1611 10.6086C14.1611 10.4006 14.1358 10.1996 14.1 10.002L14.7014 9.48831L14.3509 8.64249L13.5662 8.7042C13.3335 8.36745 13.0416 8.07551 12.7048 7.84344L12.7665 7.05811L11.9207 6.70765L11.4071 7.30907C11.2094 7.27326 11.0078 7.24797 10.8005 7.24797C10.5931 7.24797 10.3915 7.27326 10.1939 7.30907L9.68021 6.70765L8.83438 7.05811L8.89609 7.84283C8.55935 8.0749 8.2674 8.36685 8.03534 8.70359L7.25061 8.64188L6.89954 9.48831L7.50096 10.002C7.46515 10.1996 7.43986 10.4012 7.43986 10.6086Z' fill='white'/%3E%3C/svg%3E%0A");
}
@media screen and (min-width: 769px) {
	.floating-menu {
		bottom: calc(var(--winW) * 12);
		width: calc(var(--winW) * 432);
		border-radius: calc(var(--winW) * 3);
	}
	.floating-menu__list a {
		height: calc(var(--winW) * 46);
		font-size: calc(var(--winW) * 11);
	}
}

/***
* global-menu-btn
**************************************/
.global-menu-btn {
	position: fixed;
	top: calc(var(--winW) * 0);
	right: calc(var(--winW) * 0);
	z-index: 999;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: 0.3s;
	color: #fff;
	padding: calc(var(--winW) * 14);
}
.global-menu-btn.theme-white { background:unset; transition: 0.3s; }
.global-menu-btn.theme-blue { background:#2273BA; transition: 0.3s; }
.menu-btn__lines {
	position: relative;
	width: calc(var(--winW) * 32);
	height: calc(var(--winW) * 10);
	margin-bottom: calc(var(--winW) * 6);
}
.menu-btn__lines::before,
.menu-btn__lines::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(var(--winW) * 2);
	background-color: currentColor;
	align-self: stretch;
}
.menu-btn__lines::before { top: 0; }
.menu-btn__lines::after { bottom: 0; }
.menu-btn__text {
	font-size: calc(var(--winW) * 5.5);
	letter-spacing: 70%;
	text-indent:0.5em;
}
@media screen and (min-width: 769px) {
	.global-menu-btn {
		padding: calc(var(--winW) * 16) calc(var(--winW) * 16);
	}
	.menu-btn__lines {
		width: calc(var(--winW) * 40);
		height: calc(var(--winW) * 14);
		margin-bottom: calc(var(--winW) * 10);
	}
	.menu-btn__lines::before,
	.menu-btn__lines::after {
		height: calc(var(--winW) * 3);
	}
	.menu-btn__text {
		font-size: calc(var(--winW) * 7.5);
	}
}

/* =========================================
   背景オーバーレイ（ぼかし）
========================================= */
.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(102,102,102,0.54);
	backdrop-filter: blur(calc(var(--winW) * 15));
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s, visibility 0.4s;
}
.menu-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* =========================================
   ドロワーパネル本体
========================================= */
.menu-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (min-width: 769px) {
	.menu-panel { width: calc(var(--winW) * 424); }
}
.menu-panel.is-active {
	transform: translateX(0);
}

/* =========================================
   閉じるボタン (パネル右上)
========================================= */
.menu-close-btn {
	position: absolute;
	top: calc(var(--winW) * 0);
	right: calc(var(--winW) * 0);
	background: transparent;
	border: none;
	cursor: pointer;
	color: #1e5a99;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(var(--winW) * 14);
}
.close-btn__icon {
	position: relative;
	width: calc(var(--winW) * 32);
	height: calc(var(--winW) * 10);
}
/* ×印の作成 */
.close-btn__icon::before,
.close-btn__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: calc(var(--winW) * 1.5);
	background-color: #2273BA;
}
.close-btn__icon::before { transform: rotate(15deg); }
.close-btn__icon::after { transform: rotate(-15deg); }
.close-btn__text {
	font-size: calc(var(--winW) * 5.5);
	letter-spacing: 50%;
	text-indent:0.5em;
	margin-top: calc(var(--winW) * 5);
}
@media screen and (min-width: 769px) {
	.close-btn__icon {
		width: calc(var(--winW) * 40);
		height: calc(var(--winW) * 14);
		margin-bottom: calc(var(--winW) * 5);
	}
	.close-btn__icon::before,
	.close-btn__icon::after {
		height: calc(var(--winW) * 3);
	}
	.close-btn__text {
		font-size: calc(var(--winW) * 7.5);
	}
}

/* =========================================
   パネル内のコンテンツ・リンク
========================================= */
.menu-content {
	padding: calc(var(--winW) * 66) calc(var(--winW) * 35) calc(var(--winW) * 0);
	flex-grow: 1;
	overflow-y: auto;
}
.menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-list li {
	border-bottom: calc(var(--winW) * 1) solid #D9D9D9;
}
.menu-list a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--winW) * 12);
	padding: calc(var(--winW) * 20) calc(var(--winW) * 10);
	text-decoration: none;
	position: relative;
	transition: 0.5s;
}
.menu-list a::before {
	position:absolute;
	right: calc(var(--winW) * 10);
	top: 50%;
	transform: translateY(-50%);
	content: "";
	display: inline-block;
	width: calc(var(--winW) * 17.23);
	height: calc(var(--winW) * 17.23);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='12' viewBox='0 0 19 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.75708L16.6998 5.75708' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M12 0.530306L17.2287 5.75903L12 11.012' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
.menu-list a.menu_link_01 {
	color:#2273BA;
}
.menu-list a.menu_link_02 {
	color:#188889;
}
.menu-list a.menu_link_03 {
	color:#766EAF;
}
.menu-list a:hover {
	transition: 0.5s;
	opacity:0.7;
}
.point-label {
	font-size: calc(var(--winW) * 11.35);
}
.point-title img {
	height: calc(var(--winW) * 26.17);
	width: auto;
}

/* =========================================
   パネル下部（フッター）
========================================= */
.menu-footer {
	padding: calc(var(--winW) * 10) calc(var(--winW) * 35) calc(var(--winW) * 35);
	background: #ffffff;
}
.menu-footer a {
	transition: 0.5s;
}
.menu-footer a:hover {
	transition: 0.5s;
	opacity:0.7;
}

/***
* kv
**************************************/
.kv {
	width: 100%;
	background-color: #fff;
	position: relative;
}
.kv_img {

}
.kv_car_img{
	width: calc(var(--winW) * 332.68);
	position: absolute;
	left: 50%;
	bottom: calc(var(--winW) * -53);
	transform: translateX(-50%);
}
.notice_area {
	position:absolute;
	bottom: calc(var(--winW) * -140);
	left:0;
	font-size: calc(var(--winW) * 10);
	line-height:140%;
	letter-spacing: calc(5em / 140);
	padding: 0 calc(var(--winW) * 20);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--winW) * 4);
}
.notice {
	display:flex;
	align-items: flex-start;
	gap:0;
	justify-content: center;
	flex-direction: row;
}
.notice_title {
	white-space: nowrap;
}
.notice_text {
	width:auto;
}

@media screen and (min-width: 769px) {
	.kv_car_img{
		width: calc(var(--winW) * 684);
		left: 48%;
		bottom: calc(var(--winW) * -130);
		transform: translateX(-50%);
	}
	.notice_area {
		left:unset;
		right: calc(var(--winW) * 18);
		bottom: calc(var(--winW) * 18);
		font-size: calc(var(--winW) * 10);
		padding: 0 0;
		gap: calc(var(--winW) * 4);
		color:#fff;
		width: calc(var(--winW) * 507);
	}
	.notice {
		display:flex;
		align-items: flex-start;
		gap:0;
		justify-content: center;
		flex-direction: row;
	}
}

/***
* result
**************************************/
.result {
	padding-top: calc(var(--winW) * 164);
	position: relative;
}
/*--point--*/
.point {
	padding-bottom: calc(var(--winW) * 40);
	padding-top: calc(var(--winW) * 20);
	position: relative;
}
.point_title_l1, .point_title_l2 {
	background-color: #2273BA;
}
.point_title {
	z-index:2;
	display: flex;
	flex-direction: column;
}
.point_title_l1 {
	color: #fff;
	padding: calc(var(--winW) * 8) calc(var(--winW) * 12);
	width: fit-content;
}
.point_title_l1 p {
	font-size: calc(var(--winW) * 20);
	letter-spacing: calc(5em / 100);
}
.point_title_l2 {
	color: #fff;
	padding: calc(var(--winW) * 8) calc(var(--winW) * 12);
	width: fit-content;
}
.point_title_l2 p {
	font-size: calc(var(--winW) * 20);
	letter-spacing: calc(5em / 100);
}


.point_text {
	display: flex;
	flex-direction: column;
	color: #fff;
	background-color: #2273BA;
	padding: calc(var(--winW) * 8) 0 calc(var(--winW) * 8) calc(var(--winW) * 12);
	gap: calc(var(--winW) * 16);
	margin-bottom: calc(var(--winW) * 22);
	width: calc(var(--winW) * 192);
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(5em / 100);
}
.point_text span {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #fff;
	width: calc(var(--winW) * 62);
	height: calc(var(--winW) * 32);
}
.point_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(var(--winW) * 12);
	font-size: calc(var(--winW) * 18);
	letter-spacing: calc(5em / 100);
	line-height:100%;
	width: calc(var(--winW) * 300);
	margin:0 auto;
}
.point_content_rank {
	font-size: calc(var(--winW) * 18);
	letter-spacing: calc(5em / 100);
	line-height:100%;
	margin-bottom: calc(var(--winW) * 9);
}
.point_content_rank_text {
	margin-left: calc(var(--winW) * 0);
	display: flex;
	align-items: flex-end;
	gap: calc(var(--winW) * 8.71);
	padding-bottom: calc(var(--winW) * 10);
	background-image: repeating-linear-gradient(90deg, #D9D9D9, #D9D9D9 calc(var(--winW) * 5), transparent calc(var(--winW) * 5), transparent calc(var(--winW) * 7.9));
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 100% calc(var(--winW) * 1.45);
}
.point_rank {
	width: calc(var(--winW) * 30.48);
}
/*
.arrow {
	position: absolute;
	width: calc(var(--winW) * 16.88);
	top: 50%;
	transform: translateY(-50%);
	left: calc(var(--winW) * -24.88);
}

.point_content div::after {
	content: "";
	position: absolute;
	background-color: #D9D9D9;
	left: calc(var(--winW) * -25);
	bottom: calc(var(--winW) * -8);
	width: calc(var(--winW) * 221);
	height: calc(var(--winW) * 1);
}
*/
.point_1 {
	color: #2273BA;
}
.point_2 {
	color: #60C1C2;
}
.point_3 {
	color: #8FC0D9;
}
@media screen and (min-width: 769px) {
	.result {
		padding-top: calc(var(--winW) * 168);
	}
	/*--point--*/
	.point {
		padding-bottom: calc(var(--winW) * 123);
		display: flex;
		margin:0 auto;
		width: calc(var(--winW) * 797);
	}
	.point_title {
		position: absolute;
		left: calc(var(--winW) * 0);
		top: calc(var(--winW) * -33);
	}
	.point_title_l1 {
		padding: calc(var(--winW) * 20) calc(var(--winW) * 30);
	}
	.point_title_l1 p {
		font-size: calc(var(--winW) * 32);
	}
	.point_title_l2 {
		padding: calc(var(--winW) * 20) calc(var(--winW) * 30);
	}
	.point_title_l2 p {
		font-size: calc(var(--winW) * 32);
	}
	.point_text {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: calc(var(--winW) * -33);
		left:0;
		color: #fff;
		background-color: #2273BA;
		padding: calc(var(--winW) * 20) 0 calc(var(--winW) * 20) calc(var(--winW) * 30);
		gap: calc(var(--winW) * 40);
		margin-bottom: calc(var(--winW) * 0);
		width: calc(var(--winW) * 395);
		font-size: calc(var(--winW) * 32);
	}
	.point_text span {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #fff;
		width: calc(var(--winW) * 135);
		height: calc(var(--winW) * 72);
	}
	.point_content {
		gap: calc(var(--winW) * 24);
		padding-left: calc(var(--winW) * 0);
		font-size: calc(var(--winW) * 26);
		flex-direction: row;
		gap: calc(var(--winW) * 59);
		width: calc(var(--winW) * 797);
	}
	.point_content_rank {
		font-size: calc(var(--winW) * 26);
		margin-bottom: calc(var(--winW) * 10);
	}
	.point_content_rank_text {
		margin-left: calc(var(--winW) * 0);
		gap: calc(var(--winW) * 12);
		padding-bottom: calc(var(--winW) * 18);
	}
	.point_rank {
		width: calc(var(--winW) * 42);
	}


/*
	.point_content div {
		position: relative;
		margin-left: calc(var(--winW) * 49.76);
	}
	.arrow {
		position: absolute;
		width: calc(var(--winW) * 33.76);
		left: calc(var(--winW) * -49.76);
	}
	.point_content div::after {
		content: "";
		position: absolute;
		background-color: #D9D9D9;
		left: calc(var(--winW) * -50);
		bottom: calc(var(--winW) * -14);
		width: calc(var(--winW) * 586);
		height: calc(var(--winW) * 2);
	}
*/
}

/*--circle--*/

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.pie-chart-container {
	position: absolute;
	right: calc(var(--winW) * 15);
	bottom: calc(var(--winW) * 18);
    width: calc(var(--winW) * 186);
    height: calc(var(--winW) * 186);
}

.pie-chart {
    --bg-color: #ffffff;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
	border: calc(var(--winW) * 4) solid #fff;
    background: conic-gradient(
        #1e70b9 0% 58%,
        #7db5e7 58% 81%,
        #6ec3bd 81% 91%,
        #c1c9cf 91% 100%
    );
}
/* --- 白い境界線のスタイル --- */
.line {
    position: absolute;
    top: 0;
    /* 中央を合わせるため、50%から「線の太さの半分」を引く計算 */
    left: calc(50% - (var(--winW) * 1.5));
    width: calc(var(--winW) * 3);
    height: 50%;
    background-color: var(--bg-color);
    transform-origin: bottom center;
    z-index: 1;
}

.line-1 { transform: rotate(0deg); }
.line-2 { transform: rotate(208.8deg); }
.line-3 { transform: rotate(291.6deg); }
.line-4 { transform: rotate(327.6deg); }

/* --- アニメーション用マスク --- */
.pie-chart::after {
    content: '';
    position: absolute;
    inset: calc(var(--winW) * -1); /* ジャギ隠し用の-1pxも可変に */
    border-radius: 50%;
    background: conic-gradient(transparent var(--angle), var(--bg-color) 0);
    z-index: 2;
}

/* JavaScriptでスクロール連動させる場合のアニメーションクラス */
.pie-chart.is-active::after {
    animation: sweep 1.5s ease-in-out forwards;
}
@keyframes sweep {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}
/* --- テキストラベル --- */
.label {
    position: absolute;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    align-items: baseline;
}
.label span {
    /* emは親要素（数字部分）のフォントサイズに連動して可変するのでそのまま */
    font-size: calc(var(--winW) * 12.46);
    margin-left: calc(var(--winW) * 2);
}

/* 各数値をcalcに置き換え */
.label-58 {
	top: 58%;
	left: 73%;
	font-size: calc(var(--winW) * 36);
}
.label-23 {
	top: 59%;
	left: 21%;
	font-size: calc(var(--winW) * 29.08);
 }
.label-10 {
	top: 26%;
	left: 22%;
	font-size: calc(var(--winW) * 22.15);
 }
.label-9  {
	top: 13%;
	left: 40%;
	font-size: calc(var(--winW) * 22.15);
 }
@media screen and (min-width: 769px) {
	@property --angle {
	    syntax: '<angle>';
	    initial-value: 0deg;
	    inherits: false;
	}

	.pie-chart-container {
		position: absolute;
		right: calc(var(--winW) * 390);
		bottom: calc(var(--winW) * 87.5);
	    width: calc(var(--winW) * 400);
	    height: calc(var(--winW) * 400);
	}
	/* JavaScriptでスクロール連動させる場合のアニメーションクラス */
	.pie-chart.is-active::after {
	    animation: sweep 1.5s ease-in-out forwards;
	}
	@keyframes sweep {
	    0% { --angle: 0deg; }
	    100% { --angle: 360deg; }
	}
	.label span {
	    /* emは親要素（数字部分）のフォントサイズに連動して可変するのでそのまま */
	    font-size: calc(var(--winW) * 27.39);
	    margin-left: calc(var(--winW) * 3);
	}

	/* 各数値をcalcに置き換え */
	.label-58 {
		top: 58%;
		left: 73%;
		font-size: calc(var(--winW) * 79.12);
	}
	.label-23 {
		top: 59%;
		left: 21%;
		font-size: calc(var(--winW) * 63.91);
	 }
	.label-10 {
		top: 26%;
		left: 22%;
		font-size: calc(var(--winW) * 48.69);
	 }
	.label-9 {
		top: 13%;
		left: 40%;
		font-size: calc(var(--winW) * 48.69);
	}
}
 /*--fave--*/
.fave {
	padding-top: calc(var(--winW) * 30);
	background-color: #7DB6E8;
}
.fave_text_small {
	color: #fff;
	text-align: center;
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(20em / 100);
	margin-bottom: calc(var(--winW) * 15.43);
}
.fave_text {
	color: #fff;
	text-align: center;
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(20em / 100);
	margin-bottom: calc(var(--winW) * 15.43);
}
.fave_text span {
	color: #fff;
	font-size: calc(var(--winW) * 36);
	letter-spacing: calc(5em / 100);
}
.fave_swiper {
	margin-bottom: calc(var(--winW) * 29);
}
.large_text {
	width: calc(var(--winW) * 360);
	margin: 0 auto;
	margin-bottom: calc(var(--winW) * -3);
}
.fave .scroll_container_outer {
	margin-bottom: calc(var(--winW) * 29);
}
@media screen and (min-width: 769px) {
	.fave {
		padding-top: calc(var(--winW) * 66);
	}
	.fave_text_small{
		font-size: calc(var(--winW) * 20);
		margin-bottom: calc(var(--winW) * 24);
	}
	.fave_text {
		font-size: calc(var(--winW) * 32);
		margin-bottom: calc(var(--winW) * 55);
	}
	.fave_text span {
		color: #fff;
		font-size: calc(var(--winW) * 60);
	}
	.fave_swiper {
		margin-bottom: calc(var(--winW) * 52);
	}
	.large_text {
		width: calc(var(--winW) * 720);
		margin: 0 auto;
		margin-bottom: calc(var(--winW) * -3);
	}
	.fave .scroll_container_outer {
		margin-bottom: calc(var(--winW) * 52);
	}
}
/*--charm---*/
.charm {
	padding-top: calc(var(--winW) * 24);
	padding-bottom: calc(var(--winW) * 36);
}
.charm_s {
	color: #2273BA;
	text-align: center;
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(20em / 100);
	line-height: calc(26 / 16);
	margin-bottom: calc(var(--winW) * 18);
}
.charm_b {
	color: #2273BA;
	text-align: center;
	font-size: calc(var(--winW) * 36);
	letter-spacing: calc(5em / 100);
	line-height: calc(43 / 36);
	margin-bottom: calc(var(--winW) * 24);
}
.anker {
	display: flex;
	justify-content: center;
	gap: calc(var(--winW) * 10);
}
.anker_link{
	width: calc(var(--winW) * 110);
	height: calc(var(--winW) * 108);
}
.anker_link a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	color: #fff;
	font-size: calc(var(--winW) * 20);
	letter-spacing: calc(10em / 100);
	line-height: calc(26 / 20);
}
.anker_link.color1 {
	background-color: #7DB6E8;
}
.anker_link.color2 {
	background-color: #60C1C2;
}
.anker_link.color3 {
	background-color: #BEBAD9;
}
.number {
	position: absolute;
	color: #fff;
	font-size: calc(var(--winW) * 10);
	letter-spacing: calc(5em / 100);
	top: calc(var(--winW) * 7);
	left: calc(var(--winW) * 7);
}
.down_arrow {
	position: absolute;
	width: calc(var(--winW) * 8);
	bottom: calc(var(--winW) * 9.68);
	left: 50%;
	transform: translateX(-50%);
}
@keyframes arrow-down {
	0% {
		/* 最初は元の位置 */
		transform: translate(-50%, 0%);
	}
	50% {
		/* 自分の横幅100%分、↓にスライド */
		transform: translate(-50%, 100%);
	}
	100% {
		/* 元の位置に戻る */
		transform: translate(-50%, 0%);
	}
}
.anker_link:hover .down_arrow {
	animation: arrow-down 1.2s;
	animation-iteration-count: infinite;
}
@media screen and (min-width: 769px) {
	.charm {
		padding-top: calc(var(--winW) * 50);
		padding-bottom: calc(var(--winW) * 70);
	}
	.charm_s {
		font-size: calc(var(--winW) * 20);
		line-height: calc(32 / 20);
		margin-bottom: calc(var(--winW) * 18);
	}
	.charm_b {
		font-size: calc(var(--winW) * 60);
		letter-spacing: calc(5em / 100);
		line-height: calc(72 / 60);
		margin-bottom: calc(var(--winW) * 44);
	}
	.anker {
		display: flex;
		justify-content: center;
		gap: calc(var(--winW) * 15);
	}
	.anker_link{
		width: calc(var(--winW) * 390);
		height: calc(var(--winW) * 100);
	}
	.anker_link a {
		flex-direction: row;
		font-size: calc(var(--winW) * 30);
		line-height: calc(39 / 30);
	}
	.number {
		font-size: calc(var(--winW) * 14);
		top: calc(var(--winW) * 12);
		left: calc(var(--winW) * 14.29);
	}
	.down_arrow {
		position: absolute;
		width: calc(var(--winW) * 16);
		right: calc(var(--winW) * 35);
		left: unset;
		top: 50%;
		transform: translateY(-50%);
	}
	@keyframes arrow-down {
		0% {
			transform: translateY(-50%);
		}
		50% {
			transform: translateY(50%);
		}
		100% {
			transform: translateY(-50%);
		}
	}
}

/***
* point（共通）
**************************************/
.type_point {
	padding-top: calc(var(--winW) * 20);
}

.type_point_main {
	position:relative;
	margin-right: calc(var(--winW) * 20);
	padding-bottom: calc(var(--winW) * 56);
}
.type_point_main_img_label {
	color:#fff;
	font-size: calc(var(--winW) * 11.35);
	letter-spacing: 10%;
	line-height:100%;
	position:absolute;
	left:0;
	top: calc(var(--winW) * -20);
	border-bottom-right-radius: calc(var(--winW) * 5);
	height: calc(var(--winW) * 37);
	width: auto;
	padding: calc(var(--winW) * 16) calc(var(--winW) * 16) calc(var(--winW) * 10);
}
.type_point_main_img_txt {
	color:#fff;
	font-size: calc(var(--winW) * 16);
	letter-spacing: 10%;
	line-height:140%;
	position:absolute;
	left:0;
	top: calc(var(--winW) * 102);
	width:100%;
	text-align:center;
}
.type_point_main_img_typo {
	position:absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	top: calc(var(--winW) * 134);
}
@media screen and (min-width: 769px) {
	.type_point {
		padding-top: calc(var(--winW) * 50);
	}
	.type_point_main {
		margin-right: calc(var(--winW) * 66);
		padding-bottom: calc(var(--winW) * 84);
	}
	.type_point_main_img_label {
		font-size: calc(var(--winW) * 24);
		top: calc(var(--winW) * -50);
		height: calc(var(--winW) * 86);
		padding: calc(var(--winW) * 42) calc(var(--winW) * 40) calc(var(--winW) * 20);
	}
	.type_point_main_img_txt {
		font-size: calc(var(--winW) * 26);
		top: calc(var(--winW) * 279);
	}
	.type_point_main_img_typo {
		top: calc(var(--winW) * 340);
	}
}
.feeling_point {
	padding-left: calc(var(--winW) * 20);
	padding-bottom: calc(var(--winW) * 26);
}
.feeling_point_inner {
	background:#fff;
	padding: calc(var(--winW) * 85) 0 calc(var(--winW) * 43);
	position:relative;
	width:100%;
	height: calc(var(--winW) * 297);
}
.feeling_point_title {
	position:absolute;
	left: calc(var(--winW) * -20);
	top: calc(var(--winW) * 20);
	z-index:2;
	display: flex;
	flex-direction: column;
}
.feeling_point_title_l1 {
	color: #fff;
	padding: calc(var(--winW) * 8) calc(var(--winW) * 20);
	width: fit-content;
}
.feeling_point_title_l1 p {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(5em / 100);
}
.feeling_point_title_bold {
	font-size: calc(var(--winW) * 24);
}
.feeling_point_title_l2 {
	color: #fff;
	padding: calc(var(--winW) * 8) calc(var(--winW) * 20);
	width: fit-content;
}
.feeling_point_title_l2 p {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(5em / 100);
}
.circular_graph {
	position:absolute;
	right: calc(var(--winW) * 8);
	top: calc(var(--winW) * -33);
	z-index:2;
	width: calc(var(--winW) * 140);
	height: calc(var(--winW) * 140);
}
.circular-progress {
	position: relative;
	width: calc(var(--winW) * 140);
	height: calc(var(--winW) * 140);
}
.progress-ring {
	transform: rotate(-90deg);
	width: calc(var(--winW) * 140);
	height: calc(var(--winW) * 140);
}
.progress-ring__circle {
	stroke-width: calc(var(--winW) * 13);
	fill: #fff;
	cx: calc(var(--winW) * 70);
	cy: calc(var(--winW) * 70);
	r: calc(var(--winW) * 62);
	transition: stroke-dashoffset 1.5s ease-out;
	stroke-linecap: butt;
	width: calc(var(--winW) * 140);
	height: calc(var(--winW) * 140);
}
.progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: sans-serif;
	display: flex;
	align-items: baseline;
}
.progress-integer {
	font-size: calc(var(--winW) * 41.99);
}
.progress-fraction {
	font-size: calc(var(--winW) * 20);
	margin-left: calc(var(--winW) * 2);
}
.progress-unit {
	font-size: calc(var(--winW) * 14.6);
	margin-left: calc(var(--winW) * 2);
}

.point_feeling_img {
	position:absolute;
	width: calc(var(--winW) * 300);
	left: 50%;
	transform: translate(-50%, 0%);
}
.feeling_voice_inner {
	position:relative;
	background:#EEE9DD;
	height: calc(var(--winW) * 243);
}
.feeling_voice_question {
	background:#EEE9DD;
	width: max-content;
	padding: calc(var(--winW) * 14) calc(var(--winW) * 22);
	position:absolute;
	top: calc(var(--winW) * -14);
	left: 50%;
	transform: translate(-50%, 0%);
	border-radius: calc(var(--winW) * 50);
	letter-spacing: calc(5em / 100);
	font-size: calc(var(--winW) * 14);
	text-align:center;
	line-height:140%;
}
.feeling_voice_icon {
	position:absolute;
	top: calc(var(--winW) * -27);
	left: calc(var(--winW) * 10);
	width: calc(var(--winW) * 67);
}
.type_point .scroll_container {
	position:absolute;
	top: calc(var(--winW) * 32);
	left: calc(var(--winW) * 0);
}
@media screen and (min-width: 769px) {
	.feeling_point {
		padding-left: calc(var(--winW) * 66);
		padding-bottom: calc(var(--winW) * 86.5);
	}
	.feeling_point_inner {
		padding: calc(var(--winW) * 71) 0 calc(var(--winW) * 64);
		height: calc(var(--winW) * 545);
	}
	.feeling_point_title {
		left: calc(var(--winW) * -66);
		top: calc(var(--winW) * 41);
	}
	.feeling_point_title_l1 {
		padding: calc(var(--winW) * 16) calc(var(--winW) * 40);
	}
	.feeling_point_title_l1 p {
		font-size: calc(var(--winW) * 32);
	}
	.feeling_point_title_bold {
		font-size: calc(var(--winW) * 48);
	}
	.feeling_point_title_l2 {
		padding: calc(var(--winW) * 16) calc(var(--winW) * 40);
	}
	.feeling_point_title_l2 p {
		font-size: calc(var(--winW) * 32);
	}
	.circular_graph {
		right: calc(var(--winW) * 110);
		top: calc(var(--winW) * -62);
		width: calc(var(--winW) * 340);
		height: calc(var(--winW) * 340);
	}
	.circular-progress {
		width: calc(var(--winW) * 340);
		height: calc(var(--winW) * 340);
	}
	.progress-ring {
		width: calc(var(--winW) * 340);
		height: calc(var(--winW) * 340);
	}
	.progress-ring__circle {
		stroke-width: calc(var(--winW) * 35);
		cx: calc(var(--winW) * 170);
		cy: calc(var(--winW) * 170);
		r: calc(var(--winW) * 150);
		width: calc(var(--winW) * 340);
		height: calc(var(--winW) * 340);
	}
	.progress-text {
	}
	.progress-integer {
		font-size: calc(var(--winW) * 104.97);
	}
	.progress-fraction {
		font-size: calc(var(--winW) * 42.28);
		margin-left: calc(var(--winW) * 4);
	}
	.progress-unit {
		font-size: calc(var(--winW) * 36.51);
		margin-left: calc(var(--winW) * 4);
	}
	.point_feeling_img {
		width: calc(var(--winW) * 878);
	}
	.feeling_voice_inner {
		height: calc(var(--winW) * 344);
	}
	.feeling_voice_question {
		padding: calc(var(--winW) * 24) calc(var(--winW) * 45);
		top: calc(var(--winW) * -24);
		border-radius: calc(var(--winW) * 50);
		font-size: calc(var(--winW) * 24);
		line-height:100%;
	}
	.feeling_voice_icon {
		top: calc(var(--winW) * -54.5);
		left: calc(var(--winW) * 60);
		width: calc(var(--winW) * 134);
	}
	.type_point .scroll_container {
		top: calc(var(--winW) * 63);
		left: calc(var(--winW) * 0);
	}
}

.recommend_point {
	padding-left: calc(var(--winW) * 20);
	padding-bottom: calc(var(--winW) * 22);
}
.recommend_point_inner {
	background:#EEE9DD;
	padding: calc(var(--winW) * 26) 0 calc(var(--winW) * 30);
}
.recommend_point_txt {
	background:#fff;
	padding: calc(var(--winW) * 8) calc(var(--winW) * 12);
	font-size: calc(var(--winW) * 16);
	line-height:100%;
	letter-spacing: 20%;
	width: fit-content;
	margin:0 auto;
	margin-bottom: calc(var(--winW) * 20);
}
.recommend_point_info {
	text-align: center;
	margin-bottom: calc(var(--winW) * 24);
}
.recommend_point_info h2 {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 0 calc(var(--winW) * 10) 0;
}
.recommend_point_typo {
	width: calc(var(--winW) * 166.85);
	margin-right: calc(var(--winW) * 10.15);
	margin-bottom: calc(var(--winW) * 3);
}
.recommend_point_info span.text_color {
	font-size: calc(var(--winW) * 36);
	margin-right: calc(var(--winW) * 2);
	line-height:120%;
	letter-spacing: 5%;
}
.recommend_point_info span.text_gray {
	font-size: calc(var(--winW) * 16);
	line-height:120%;
	letter-spacing: 5%;
}
.recommend_point_sub_title {
	font-size: calc(var(--winW) * 16);
	line-height:120%;
	letter-spacing: 5%;
	text-indent:1em;
}
.recommend_point_sub_title_top {
	font-size: calc(var(--winW) * 16);
	line-height:120%;
	letter-spacing: 5%;
	margin-bottom: calc(var(--winW) * 6);
}
.recommend_point_img {
	width: calc(var(--winW) * 300);
	margin:0 auto;
	margin-bottom: calc(var(--winW) * 30);
}
.recommend_point_voice {
	position:relative;
	height: calc(var(--winW) * 180);
}
.recommend_voice_icon {
	position: absolute;
	top: calc(var(--winW) * -59);
	left: calc(var(--winW) * 10);
	width: calc(var(--winW) * 67);
}
.recommend_point_voice .scroll_container {
	top: calc(var(--winW) * 0) !important;
}
@media screen and (min-width: 769px) {
	.recommend_point {
		padding-left: calc(var(--winW) * 66);
		padding-bottom: calc(var(--winW) * 86.5);
	}
	.recommend_point_inner {
		padding: calc(var(--winW) * 50) 0 calc(var(--winW) * 70);
	}
	.recommend_point_txt {
		padding: calc(var(--winW) * 10.5) calc(var(--winW) * 15.75);
		font-size: calc(var(--winW) * 21);
		margin-bottom: calc(var(--winW) * 36);
	}
	.recommend_point_info {
		margin-bottom: calc(var(--winW) * 40);
	}
	.recommend_point_info h2 {
		margin: 0 0 calc(var(--winW) * 12) 0;
	}
	.recommend_point_typo {
		width: calc(var(--winW) * 288.01);
		margin-right: calc(var(--winW) * 13);
		margin-bottom: calc(var(--winW) * 6.62);
	}
	.recommend_point_info span.text_color {
		font-size: calc(var(--winW) * 60);
		margin-right: calc(var(--winW) * 7);
	}
	.recommend_point_info span.text_gray {
		font-size: calc(var(--winW) * 24);
	}
	.recommend_point_sub_title {
		font-size: calc(var(--winW) * 24);
	}
	.recommend_point_sub_title_top {
		font-size: calc(var(--winW) * 24);
		margin-bottom: calc(var(--winW) * 12);
	}
	.recommend_point_img {
		width: calc(var(--winW) * 878);
		margin-bottom: calc(var(--winW) * 50.5);
	}
	.recommend_point_voice {
		height: calc(var(--winW) * 210);
	}
	.recommend_voice_icon {
		position: absolute;
		top: calc(var(--winW) * -118);
		left: calc(var(--winW) * 60);
		width: calc(var(--winW) * 134);
	}
	.recommend_point_voice .scroll_container {
		top: calc(var(--winW) * 0) !important;
	}
}

.point_link_btn {
	padding-bottom: calc(var(--winW) * 36);
}
.btn-wrap {
	display: block;
	cursor: pointer;
	width: calc(var(--winW) * 300);
	margin:0 auto;
	border-radius: calc(var(--winW) * 3);
	transition : 0.5s;
}
.btn {
	display: grid;
	justify-content: center;
	align-items: center;
	padding: calc(var(--winW) * 22) calc(var(--winW) * 0);
	text-align: center;
	text-decoration: none;
	position: relative;
	font-size: calc(var(--winW) * 14);
	letter-spacing: calc(5em / 100);
	width:100%;
	background-color: #fff;
	border-radius: calc(var(--winW) * 3);
	transition : 0.5s;
}
.btn::after {
	content: '';
	display: block;
	width: calc(var(--winW) * 20);
	height: calc(var(--winW) * 20);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: calc(var(--winW) * 16.5);
	transition : 0.5s;
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 20);
}
.btn-wrap:hover .btn {
	transform: translateY(calc(var(--winW) * 4));
	color: #fff;
	box-shadow: none;
	transition : 0.5s;
}
.btn-wrap:hover .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	transition : 0.5s;
}
@media screen and (min-width: 769px) {
	.point_link_btn {
		padding-bottom: calc(var(--winW) * 86.5);
	}
	.btn-wrap {
		width: calc(var(--winW) * 472);
	}
	.btn {
		padding: calc(var(--winW) * 30) calc(var(--winW) * 0);
		font-size: calc(var(--winW) * 20);
	}
	.btn::after {
		width: calc(var(--winW) * 25);
		height: calc(var(--winW) * 20);
		right: calc(var(--winW) * 20);
		background-size: calc(var(--winW) * 25);
	}
	.btn-wrap:hover .btn {
		transform: translateY(calc(var(--winW) * 6));
	}
	.btn-wrap:hover .btn::after {
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	}
}

/***
* point01
**************************************/
.type_point01 {
	background:#7DB6E8;
}
.type_point01 .type_point_main_img_label {
	background:#7DB6E8;
}
.type_point01 .type_point_main_img_typo {
	width: calc(var(--winW) * 250);
}
.type_point01 .feeling_point_title_l1,
.type_point01 .feeling_point_title_l2 { background-color: #2273BA; }

.type_point01 .progress-ring__circle {
	stroke: #2789DF;
}
.type_point01 .progress-text {
	color: #2789DF;
}
.type_point01 .recommend_point_txt {
	color:#2273BA;
}
.type_point01 .recommend_point_info span.text_color {
	color:#2273BA;
}
.type_point01 .btn {
	border: calc(var(--winW) * 1) solid #2273BA;
	box-shadow: 0 calc(var(--winW) * 4) 0 0 #2273BA;
	color: #2273BA;
}
.type_point01 .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
.type_point01 .btn-wrap:hover .btn {
	background-color: #2273BA;
}
@media screen and (min-width: 769px) {
	.type_point01 .type_point_main_img_typo {
		width: calc(var(--winW) * 625);
	}
	.type_point01 .btn {
		border: calc(var(--winW) * 2) solid #2273BA;
		box-shadow: 0 calc(var(--winW) * 6) 0 0 #2273BA;
	}
}
/***
* point02
**************************************/
.type_point02 {
	background:#60C1C2;
}
.type_point02 .type_point_main_img_label {
	background:#60C1C2;
}
.type_point02 .type_point_main_img_typo {
	width: calc(var(--winW) * 328.62);
}
.type_point02 .feeling_point_title_l1,
.type_point02 .feeling_point_title_l2 { background-color: #188889; }

.type_point02 .progress-ring__circle {
	stroke: #00999B;
}
.type_point02 .progress-text {
	color: #00999B;
}
.type_point02 .recommend_point_txt {
	color:#188889;
}
.type_point02 .recommend_point_info span.text_color {
	color:#188889;
}
.type_point02 .btn {
	border: calc(var(--winW) * 1) solid #188889;
	box-shadow: 0 calc(var(--winW) * 4) 0 0 #188889;
	color: #188889;
}
.type_point02 .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23188889' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23188889' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
.type_point02 .btn-wrap:hover .btn {
	background-color: #188889;
}

@media screen and (min-width: 769px) {
	.type_point02 .type_point_main_img_typo {
		width: calc(var(--winW) * 821.55);
	}
	.type_point02 .btn {
		border: calc(var(--winW) * 2) solid #188889;
		box-shadow: 0 calc(var(--winW) * 6) 0 0 #188889;
	}
}
/***
* point03
**************************************/
.type_point03 {
	background:#BEBAD9;
}
.type_point03 .type_point_main_img_label {
	background:#BEBAD9;
}
.type_point03 .type_point_main_img_typo {
	width: calc(var(--winW) * 254.52);
}
.type_point03 .feeling_point_title_l1,
.type_point03 .feeling_point_title_l2 { background-color: #766EAF; }

.type_point03 .progress-ring__circle {
	stroke: #8C83CD;
}
.type_point03 .progress-text {
	color: #8C83CD;
}
.type_point03 .feeling_voice_inner {
	height: calc(var(--winW) * 262);
}
.type_point03 .feeling_voice_icon {
	top: calc(var(--winW) * -8);
}
.type_point03.type_point .scroll_container {
	top: calc(var(--winW) * 51);
}
.type_point03 .recommend_point_txt {
	color:#766EAF;
}
.type_point03 .recommend_point_info span.text_color {
	color:#766EAF;
}
.type_point03 .btn {
	border: calc(var(--winW) * 1) solid #766EAF;
	box-shadow: 0 calc(var(--winW) * 4) 0 0 #766EAF;
	color: #766EAF;
}
.type_point03 .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23766EAF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23766EAF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
.type_point03 .btn-wrap:hover .btn {
	background-color: #766EAF;
}

@media screen and (min-width: 769px) {
	.type_point03 .type_point_main_img_typo {
		width: calc(var(--winW) * 636.32);
	}
	.type_point03 .feeling_voice_inner {
		height: calc(var(--winW) * 344);
	}
	.type_point03 .feeling_voice_icon {
		top: calc(var(--winW) * -54.5);
	}
	.type_point03.type_point .scroll_container {
		top: calc(var(--winW) * 63);
	}
	.type_point03 .btn {
		border: calc(var(--winW) * 2) solid #766EAF;
		box-shadow: 0 calc(var(--winW) * 6) 0 0 #766EAF;
	}
}


/***
* grade_list
**************************************/
.grade_list {
	background:#EEE9DD;
	padding: calc(var(--winW) * 30) calc(var(--winW) * 20) calc(var(--winW) * 47);
}
.grade_list h2 {
	font-size: calc(var(--winW) * 16);
	line-height:160%;
	letter-spacing: 20%;
	text-align:center;
	margin-bottom: calc(var(--winW) * 8);
}
.grade_list h2 p {
	font-size: calc(var(--winW) * 36);
	line-height:120%;
	letter-spacing: 5%;
	text-indent: 0.5em;
}
.grade_list_ul {
	display:flex;
	flex-direction: column;
	gap: calc(var(--winW) * 15);
}
.grade_list_li {
	position:relative;
	margin-top: calc(var(--winW) * 50);
	background:#fff;
	width:100%;
	border-radius: calc(var(--winW) * 6);
	padding: calc(var(--winW) * 48) calc(var(--winW) * 25) calc(var(--winW) * 30);
}
.grade_img {
	position:absolute;
	top: calc(var(--winW) * -50);
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--winW) * 150);
}
.grade_rank {
	position:absolute;
	top: calc(var(--winW) * -50);
	left: calc(var(--winW) * -50);
	width: calc(var(--winW) * 120);
}
.grade_name {
	font-size: calc(var(--winW) * 20);
	line-height:140%;
	letter-spacing: 0%;
	text-align:center;
}
.grade_link_btn {
	padding-top: calc(var(--winW) * 20);
}
.grade_link_btn .btn-wrap {
	width: 100%;
	border-radius: calc(var(--winW) * 3);
}
.grade_link_btn .btn {
	padding: calc(var(--winW) * 15) calc(var(--winW) * 0);
	font-size: calc(var(--winW) * 14);
	letter-spacing: calc(5em / 100);
	width:100%;
	background-color: #7DB6E8;
	border-radius: calc(var(--winW) * 3);
	transition : 0.5s;
	color:#fff;
	border: calc(var(--winW) * 1) solid #2273BA;
	box-shadow: 0 calc(var(--winW) * 4) 0 0 #2273BA;
}
.grade_link_btn .btn::after {
	content: '';
	display: block;
	width: calc(var(--winW) * 20);
	height: calc(var(--winW) * 20);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: calc(var(--winW) * 8);
	transition : 0.5s;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 20);
}
.grade_link_btn .btn-wrap:hover .grade_link_btn .btn {
	transform: translateY(calc(var(--winW) * 4));
	color: #fff;
	box-shadow: none;
	transition : 0.5s;
}
.grade_link_btn .btn-wrap:hover .grade_link_btn .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	transition : 0.5s;
}

.grade_common_link_btn {
	padding-top: calc(var(--winW) * 34);
}
.grade_common_link_btn .btn-wrap {
	width: calc(var(--winW) * 300);
	border-radius: calc(var(--winW) * 3);
}
.grade_common_link_btn .btn {
	padding: calc(var(--winW) * 10) calc(var(--winW) * 0);
	font-size: calc(var(--winW) * 17);
	line-height:120%;
	letter-spacing: calc(5em / 120);
	width:100%;
	background-color: #fff;
	border-radius: calc(var(--winW) * 3);
	transition : 0.5s;
	color:#2273BA;
	border: calc(var(--winW) * 1) solid #2273BA;
	box-shadow: 0 calc(var(--winW) * 4) 0 0 #2273BA;
}
.grade_common_link_btn .btn::after {
	content: '';
	display: block;
	width: calc(var(--winW) * 20);
	height: calc(var(--winW) * 20);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: calc(var(--winW) * 16.5);
	transition : 0.5s;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%232273BA' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 22);
}
.grade_common_link_btn .btn-wrap:hover .btn {
	transform: translateY(calc(var(--winW) * 4));
	color: #fff;
	box-shadow: none;
	transition : 0.5s;
	background-color:#2273BA;
}
.grade_common_link_btn .btn-wrap:hover .btn::after {
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
	transition : 0.5s;
}


@media screen and (min-width: 769px) {
	.grade_list {
		padding: calc(var(--winW) * 73) calc(var(--winW) * 0) calc(var(--winW) * 86);
	}
	.grade_list h2 {
		font-size: calc(var(--winW) * 16);
		margin-bottom: calc(var(--winW) * 44);
	}
	.grade_list h2 p {
		font-size: calc(var(--winW) * 36);
		margin-top: calc(var(--winW) * 24);
	}
	.grade_list_ul {
		flex-direction: row;
		align-items: stretch;
		gap: calc(var(--winW) * 50);
		width: calc(var(--winW) * 1258);
		margin:0 auto;
	}
	.grade_list_li {
		margin-top: calc(var(--winW) * 50);
		border-radius: calc(var(--winW) * 0);
		padding: calc(var(--winW) * 48) calc(var(--winW) * 25) calc(var(--winW) * 30);
	}
	.grade_img {
		top: calc(var(--winW) * -68);
		width: calc(var(--winW) * 200);
	}
	.grade_rank {
		top: calc(var(--winW) * -50);
		left: calc(var(--winW) * -55);
		width: calc(var(--winW) * 125);
	}
	.grade_name {
		font-size: calc(var(--winW) * 20);
		line-height:140%;
		letter-spacing: 0%;
		text-align:center;
		height: calc(var(--winW) * 62);
	}
	.grade_link_btn {
		padding-top: calc(var(--winW) * 20);
	}
	.grade_link_btn .btn-wrap {
		width: 100%;
		border-radius: calc(var(--winW) * 3);
	}
	.grade_link_btn .btn {
		padding: calc(var(--winW) * 15) calc(var(--winW) * 0);
		font-size: calc(var(--winW) * 14);
		letter-spacing: calc(5em / 100);
		width:100%;
		background-color: #7DB6E8;
		border-radius: calc(var(--winW) * 3);
		transition : 0.5s;
		color:#fff;
		border: calc(var(--winW) * 1) solid #2273BA;
		box-shadow: 0 calc(var(--winW) * 4) 0 0 #2273BA;
	}
	.grade_link_btn .btn::after {
		content: '';
		display: block;
		width: calc(var(--winW) * 20);
		height: calc(var(--winW) * 20);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: calc(var(--winW) * 16.5);
		transition : 0.5s;
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
		background-size: calc(var(--winW) * 18);
	}
	.grade_link_btn .btn-wrap:hover .grade_link_btn .btn {
		transform: translateY(calc(var(--winW) * 4));
		color: #fff;
		box-shadow: none;
		transition : 0.5s;
	}
	.grade_link_btn .btn-wrap:hover .grade_link_btn .btn::after {
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.6958 15.8784L15.5043 4.06991' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M8.48532 3.69727L15.8799 3.69727L15.897 11.1089' stroke='%23FFF' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
		transition : 0.5s;
	}
	.grade_common_link_btn {
		padding-top: calc(var(--winW) * 60);
	}
	.grade_common_link_btn .btn-wrap {
		width: calc(var(--winW) * 472);
	}
	.grade_common_link_btn .btn {
		padding: calc(var(--winW) * 30) calc(var(--winW) * 0);
		font-size: calc(var(--winW) * 20);
		line-height:100%;
		letter-spacing: calc(5em / 100);
		border: calc(var(--winW) * 2) solid #2273BA;
		box-shadow: 0 calc(var(--winW) * 6) 0 0 #2273BA;
	}
	.grade_common_link_btn .btn::after {
		width: calc(var(--winW) * 25);
		height: calc(var(--winW) * 20);
		right: calc(var(--winW) * 20);
		background-size: calc(var(--winW) * 25);
	}
	.grade_common_link_btn .btn-wrap:hover .btn {
		transform: translateY(calc(var(--winW) * 6));
	}
}

/***
* link_banner_list
**************************************/
.link_banner_list {
	padding: calc(var(--winW) * 50) calc(var(--winW) * 20);
}
.link_banner_list_ul {
	display:flex;
	flex-direction: column;
	gap: calc(var(--winW) * 20);
}
.link_banner_list_li {
	width:100%;
}
.link_banner_list_li a {
	transition : 0.5s;
}
.link_banner_list_li a:hover {
	opacity:0.8;
	transition : 0.5s;
}

@media screen and (min-width: 769px) {
	.link_banner_list {
		padding: calc(var(--winW) * 60) calc(var(--winW) * 0);
	}
	.link_banner_list_ul {
		display:flex;
		flex-direction: row;
		gap: calc(var(--winW) * 29);
		width: calc(var(--winW) * 1258);
		margin:0 auto;
	}
	.link_banner_list_li {
		width:100%;
	}
}

.survey_overview {
	padding-top: calc(var(--winW) * 32);
	font-size: calc(var(--winW) * 10);
    line-height: 140%;
    letter-spacing: calc(5em / 140);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--winW) * 4);
}
@media screen and (min-width: 769px) {
	.survey_overview {
	width: calc(var(--winW) * 940);
	margin: 0 auto;
	gap: calc(var(--winW) * 4);
	}
}