:root {
	--color1: #f5f5f5;
	--color2: #eff8f9;
	--color3: #22c9dc;
	--color4: #cdd8db;
	--color5: #ffd448;
	--color6: #414141;

	--color7: #bdeff5;
	--color8: #2369db;
	--color9: #00ae7e;
	--color10: #fabf00;
	--color11: #46a6de;
	--color12: #e94d24;

	--border-radius: 1rem;
	--keyword-color: #cdd8db;
	/* === レスポンシブフォントサイズ (大 → 小) === */
	--size1:  clamp(2.6rem, calc(2.5vw + 2rem), 5rem);
	--size2:  clamp(2.2rem, calc(2vw + 1.6rem), 4rem);
	--size3:  clamp(1.5rem, calc(1.5vw + 1.4rem), 3rem);
	--size4:  clamp(1.3rem, calc(1vw + 1.2rem), 2.2rem);
	--size5:  clamp(1.2rem, calc(0.8vw + 1rem), 1.8rem);
	--size6:  clamp(1rem,  calc(0.6vw + 0.9rem), 1.6rem);
	--size7:  clamp(0.9rem, calc(0.5vw + 0.8rem), 1.4rem);
	--size8:  clamp(0.8rem, calc(0.4vw + 0.7rem), 1.2rem);
	--size9:  clamp(0.7rem, calc(0.35vw + 0.6rem), 1.1rem);
	--size10: clamp(0.6rem, calc(0.3vw + 0.55rem), 1rem);
	--size11: clamp(0.55rem, calc(0.25vw + 0.5rem), 0.9rem);
	--size12: clamp(0.5rem, calc(0.25vw + 0.45rem), 0.85rem);
	--size13: clamp(0.45rem, calc(0.2vw + 0.4rem), 0.8rem);
	--size14: clamp(0.4rem, calc(0.2vw + 0.35rem), 0.7rem);
	--size15: clamp(0.35rem, calc(0.15vw + 0.3rem), 0.6rem);
}
html, body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

body {
	font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
	font-weight: 400;
	font-size: var(--size6);
	width: 100%;
	max-width: 2200px;
	min-height: 100vh;
	margin: auto;
	color: var(--color6);
	background-color: var(--color1);
	text-align: center;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}
a {
	text-decoration: none;
}

/* === 説明ブロック === */
.description_block {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	height: 100%;
	margin-left: var(--size7);
	gap: 10px
}
.title_block {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
/* === サブ === */
.sub_text {
	position: absolute;
	top: calc(var(--size9) * -1);
	left: calc(var(--size9) * -1);
	font-size: var(--size1);
	text-align: left;
	font-weight: bold;
	color:var(--color4);
	z-index: -1;
}
/* === メイン === */
.main_text {
	font-size: var(--size4);
	text-align: left;
	font-weight: bold;
	margin: var(--size9) 0 0 var(--size9);
	z-index: 1;
}

/* === 説明 === */
.comment_block {
	width: 100%;
	height: 100%;
	display: grid;
	align-items: center;
	background: white;
	border-radius: var(--border-radius);
	padding: var(--size14) var(--size15) 0;
	gap: var(--size15);
}
.comment {
	font-size: var(--size9);
	font-weight: bold;
	margin-bottom: var(--size10);
}

/* === 入力ボックス === */
.search_block {
	align-items: stretch;
}
.search_box {
	width: 100%;
	min-height: 40px;
	font-size: var(--size6);
	background: var(--color2);
	border:2px solid var(--color3);
}

.search_btn {
	width: 100%;
	min-height: 40px;
	font-size: var(--size6);
	background-color: var(--color3);
	color: white;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--size12);
}

/* === 吹き出しアイコン風 === */
.balloon3 {
	--balloon-w: clamp(1.3rem, 2.2vw, 2.2rem);
	--balloon-h: calc(var(--balloon-w) * 0.75);
	--tail-size: calc(var(--balloon-w) * 0.28);

	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: var(--balloon-w);
	height: var(--balloon-h);
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 50%;
	box-sizing: border-box;
	line-height: 1;
}

.balloon3::before {
	content: "";
	position: absolute;
	left: calc(var(--balloon-w) * -0.07);
	bottom: calc(var(--balloon-h) * -0.24);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: var(--tail-size) 0 var(--tail-size) calc(var(--tail-size) * 1.2);
	border-color: transparent transparent transparent #fff;
	transform: rotate(135deg);
	transform-origin: center;
}

/* === 選択肢 === */
.custom-select-container {
	display: grid;
	gap: var(--size11);
	align-items: stretch;
	width: 100%;
	font-size: var(--size9);
}
.custom-select-container.first-cols {
	margin-top: var(--size10);
	grid-template-columns: repeat(4, 1fr);
}
.custom-select-container.second-cols {
	margin-bottom: var(--size10);
	grid-template-columns: repeat(2, 1fr);
}
.category-group {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: stretch;
	padding: 2.5px;
	margin: 0;
	width: 100%;
	height: 100%;
}

.select-box {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #FFF;
	border: 1px solid var(--keyword-color);
	border-radius: var(--border-radius);
	background-color: var(--keyword-color);
	color: #000;
	padding: var(--size13);
	cursor: pointer;
	box-shadow: var(--shadow);
	transition: all 0.2s ease-in-out;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	word-break: break-word;
	font-weight: bold;
}

.select-box:hover {
	background-color: var(--color5);
	border-color:var(--keyword-color);
	color: white;
	opacity: 0.7;
}

.category {
	padding: var(--size14);
}

.select-box.sub.as-main {
	display: flex;
	width: 100%;
	background-color: var(--main-color);
	color: #fff;
	font-weight: bold;
	border: 2px solid var(--main-color);
}

.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	bottom: auto;
	left: 50%;
	visibility: visible;
	transform: translateX(-50%) translateY(-5px);
	z-index: 10;
	background: white;
	border: 1px solid #ccc;
	border-radius: var(--border-radius);
	padding: 0;
	box-shadow: var(--shadow);
	width: 105%;
	max-width: 280px;
	flex-direction: column;
	max-height: 60vh;
	overflow-y: auto;
	scrollbar-color: #8b8b8b #8b8b8b;
}

.dropdown .select-box {
	margin: 2.5px auto;
	width: 95%;
}

/* === トライアル === */
.traial_block {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.traial {
	width: 100%;
	padding: var(--size10) var(--size11) var(--size10) var(--size6);
	font-size: var(--size5);
	font-weight: bold;
	text-align: center;
	paint-order: stroke;
	-webkit-text-stroke: 5px #FFF;
	text-stroke: 1px #FFF;
	color: var(--color6);
}
.this_service {
	font-size: var(--size4);
	background: linear-gradient(transparent 50%, #FFC000 50%);
	margin: 10px 60px;
}
.usage_block {
	width: 100%;
	height: 100%;
}
.usage_text {
	font-size: var(--size4);
	display: inline-block;
	border-bottom: 5px solid var(--color3);
	padding: 0 20px
	margin-bottom: var(--size10);
}
.hand_icon {
	color: var(--color8);
}
.usage_btn {
	font-size: var(--size8);
	color: var(--color6);
	background-color: var(--color7);
	width: 100% !important;
}

/* === チャットボットブロック === */
.chat_block {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: end;
}

.chat_block:before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid var(--color4);
	border-right-width: 0;
	border-radius: 50% 0 0 50%;
	background-color: #FFF;
	content: "";
	box-shadow: -10px 0px 10px -2px var(--color4);
}

.chat_block .inner {
	width: 62.5%;
	padding-bottom: 10px;
}

/* === チャットボットスペース === */
.bot_space {
	width: 100%;
	min-height: 340px;
	position: relative;
	margin: 0 auto;
	padding-top: 0.5rem;
}

/* === フッター === */
footer {
	background-color: white;
	border-top: 1px solid #dee2e6;
	text-align: center;
	padding: var(--size12) 0;
	width: 100%;
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--size10);
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: var(--size10);
}

.footer-logo img {
	height: 50px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size10);
	padding-right: var(--size10);
}

.footer-links a {
	color: var(--color6);
	text-decoration: none;
	position: relative;
	font-size: var(--size8);
}

.footer-links a:hover {
	color: var(--color3);
}

.footer-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: var(--size11);
	background-color: var(--color3);
	transform: scaleX(0);
	transition: transform 0.2s ease;
	transform-origin: left;
}

.footer-links a:hover::after {
	transform: scaleX(1);
}

/* === 文字色 === */
.blue_text { color: var(--color3); }
.yellow_text { color: var(--color5); }
.yellow_back { background: var(--color5); }

/* スマホ版 */
@media (max-width: 767px) {
	.description_block {
		margin-left: 0;
		gap: var(--size6);
	}
	.sub_text {
		top: calc(var(--size11) * -1);
		left: calc(var(--size13) * -1);
	}
	.main_text {
		font-size: var(--size5);
		margin: 0;
		margin-top: var(--size8);
	}
	.comment_block {
		margin-bottom: var(--size8);
	}
	.search_block {
		gap: var(--size12);
	}
	.chat_block:before {
		border-radius: 0;
		box-shadow: none;
	}
	.chat_block .inner {
		width: 100%;
		padding-bottom: 0;
	}
	.traial {
		width: calc( 100% - var(--size7) * 2);
		margin: var(--size7);
		font-size: var(--size6);
	}
	.this_service {
		font-size: var(--size5);
		margin: 10px;
	}
	.footer-links {
		margin-left: var(--size10);
	}
	.usage_block {
		height: auto;
		margin-bottom: 20px;
	}
}