/* --- セクション余白 (section) --- */
.section-1st {
	margin-top			: 3rem; 
}
section:first-of-type {
	margin-top			: 0; 
}

/* --- アンカーポイント --- */
.anchor-point {
	position			: absolute; 
	left				: 0; 
	visibility			: hidden; 
	top					: -88px; 
	display				: block !important; 
	width				: 0 !important; 
	height				: 0 !important; 
	visibility			: hidden !important; 
}
.section-1st ~ .section-1st .anchor-point {
	top					: -88px; 
}

/* --- 主な用途 (purpose) --- */
.purpose-container {
	display				: flex; 
	flex-wrap			: wrap; 
	justify-content		: center; 
	gap					: 10px; 
	width				: 100%; 
	margin				: 0 auto; 
}
.purpose-item {
	display				: flex; 
	flex-direction		: column; 
	align-items			: center; 
	width				: calc(20% - 10px); 
	min-width			: 120px; 
}
.purpose-item img {
	width				: 100%; 
	height				: auto; 
	aspect-ratio		: 1 / 1; 
	display				: block; 
	border				: thin solid lightgray; 
	border-radius		: 8px; 
	box-shadow			: 2px 2px 4px gainsboro; 
}
.purpose-container span {
	display				: inline-block; 
	margin				: 0.5rem 0.5rem 0; 
	padding				: 0.5rem 1rem; 
	background			: linear-gradient(whitesmoke, white); 
	border				: thin solid lightgray; 
	border-radius		: 8px; 
	box-shadow			: 2px 2px 4px gainsboro; 
	font-weight			: bold; 
	font-size			: clamp(0.75rem, 0.083rem + 2.22vw, 1.5rem); 
	text-align			: center; 
}
.purpose-labels {
	display				: flex; 
	flex-wrap			: wrap; 
	justify-content		: center; 
	width				: 100%; 
	margin-top			: 0.5rem; 
}

/* --- セクション見出し (title) ---*/
.title {
	position			: relative; 
	width				: 100%; 
	background			: whitesmoke; 
	font-size			: clamp(16px, 3.5vw, 20px); 
	font-weight			: bold; 
	text-align			: left; 
	padding				: 0.5rem 1rem 0.5rem 2.5rem; 
	margin-bottom		: 0.5rem; 
	border				: solid thin lightgray; 
	border-left			: none; 
	white-space			: nowrap; 
	position			: relative; 
}
.title::before {
	content				: ""; 
	position			: absolute; 
	left				: 0; 
	top					: -1px; 
	bottom				: -1px; 
	width				: 1.5rem; 
	background			: #0040c0; 
	clip-path			: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%); 
}

/* --- 仕様表 (spec) --- */
.spec {
	width				: 100%; 
	border-collapse		: collapse; 
	letter-spacing		: -0.5px; 
	line-height			: 1.3; 
}
.spec th {
	width				: 20%; 
	border				: solid thin lightgray; 
	text-align			: center; 
	vertical-align		: middle; 
	padding				: 0.75rem 0.5rem; 
	background			: whitesmoke; 
	font-size			: medium; 
	white-space			: nowrap; 
}
.spec td {
	width				: 80%; 
	border				: solid thin lightgray; 
	text-align			: center; 
	vertical-align		: middle; 
	padding				: 0.75rem 0.5rem; 
	font-size			: medium; 
}
.spec td span {
	display				: inline-block; 
}
.comment {
	margin-left			: 1em; 
	text-indent			: -1em; 
	line-height			: 1.4; 
}
.label-group {
	width				: 6.5em; 
	text-align			: right; 
}
.size-group {
	width				: 6.6em;
	text-align			: justify; 
	text-align-last		: justify; 
	font-size			: small; 
	margin-left			: 0.25em;
}
.data-group {
	width				: 11em; 
	text-align			: left; 
}
.spec-group {
	width				: 13.5em; 
	text-align			: left; 
}
.visually-hidden {
	position			: absolute; 
	width				: 1px; 
	height				: 1px; 
	padding				: 0; 
	margin				: -1px; 
	overflow			: hidden; 
	clip				: rect(0, 0, 0, 0); 
	white-space			: nowrap; 
	border				: 0; 
}
abbr {
	text-decoration		: none !important; 
	border-bottom		: none !important; 
}

/* --- オプション・消耗品 (options) --- */
.options {
	display				: flex; 
	flex-wrap			: wrap; 
	justify-content		: flex-start; 
	gap					: 4px; 
	max-width			: 930px; 
	margin				: 0 auto; 
	padding-bottom		: 4rem; 
}
.options a {
	text-decoration		: none; 
	font-weight			: bold; 
	margin-bottom		: 0.5rem; 
	box-sizing			: border-box; 
	display				: flex; 
	flex-direction		: column; 
	width				: 180px; 
	overflow			: visible; 
	min-height			: 220px; 
}
.options img {
	width				: 100%; 
	height				: auto; 
	padding				: 4px; 
	border-radius		: 8px; 
	border				: solid thin lightgray; 
	box-sizing			: border-box; 
	transition			: transform 0.3s ease; 
}
.options p {
	background			: #0040c0; 
	color				: white; 
	border-radius		: 8px; 
	padding				: 0.25rem; 
	margin-top			: 0.5rem; 
	box-shadow			: 0 4px navy; 
	text-align			: center; 
	font-size			: medium; 
	transition			: transform 0.2s, box-shadow 0.2s; 
}
.options a:hover p { 
	box-shadow			: 0 1px navy; 
	transform			: translateY(3px); 
}
.options a:hover img { 
	border				: solid medium #0040c0; 
}
.option_text {
	font-weight			: normal;
	font-size			: small; 
	color				: black;
	text-align			: center;
	margin-top			: 0.5rem; 
	line-height			: 1.2; 
}

/* --- 問合せはこちら (balloon) --- */
.inquiry {
	margin				: 0 auto; 
	text-align			: center; 
}
.inquiry img {
	width				: 100%; 
	height				: auto; 
	max-width			: 720px; 
}
.balloon {
	position			: relative; 
	display				: inline-block; 
	margin				: 3rem 0 1.2rem; 
	padding				: 0.5rem 2rem; 
	min-width			: 120px; 
	max-width			: 100%; 
	color				: black; 
	font-size			: clamp(1rem, 2.5vw, 2rem); 
	background			: white; 
	border				: solid 3px #0040c0; 
	box-sizing			: border-box; 
	border-radius		: 5rem; 
}
.balloon:before {
	content				: ""; 
	position			: absolute; 
	bottom				: -21px; 
	left				: 50%; 
	margin-left			: -15px; 
	border				: 12px solid transparent; 
	border-top			: 12px solid white; 
	z-index				: 2; 
}
.balloon:after {
	content				: ""; 
	position			: absolute; 
	bottom				: -28px; 
	left				: 50%; 
	margin-left			: -17px; 
	border				: 14px solid transparent; 
	border-top			: 14px solid #0040c0; 
	z-index				: 1; 
}
.balloon p {
	margin				: 0; 
	padding				: 0; 
	background			: linear-gradient(transparent 40%, gold 80%); 
}

/* --- レスポンシブ対応 --- */

.sp-only {
	display				: none; /* PCの時は「スマホ用行」を隠す */
}
@media screen and (max-width: 768px) {
	.pc-only {
		display			: none; /* スマホの時は「PC用行」を隠す */
	}
	.sp-only {
		display			: table-row; /* tableの行として表示 */
	}
	.purpose-labels span {
		margin			: 0.5rem; 
		padding			: 0.4rem 0.5rem; 
	}
	.spec th  {
		width			: 100%; 
		display			: block; 
		padding			: 0.75rem 0.5rem; 
		border-bottom	: none; 
	}
	.spec td  {
		width			: 100%; 
		display			: block; 
		padding			: 0.75rem 0.25rem; 
		border-bottom	: none; 
	}
	.spec tr:last-child td {
		border-bottom	: solid thin lightgray; 
	}
	.short-group {
		width			: 8em; 
		text-align		: left; 
	}
	.options {
		padding			: 0 10px; 
		gap				: 4px; 
	}
	.options a {
		width			: calc(33.33% - 3px); 
		min-height		: 189px; 
	}
	.options p {
		font-size		: 0.9em; 
	}
	.option_text {
		font-size		: x-small; 
		letter-spacing	: -0.1em; 
	}
}