/* --- セクション余白 (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; 
}
.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 th span {
    display				: inline; 
}
.spec td span {
	display				: inline-block; 
}
.comment {
	margin-left			: 1em; 
	text-indent			: -1em; 
	line-height			: 1.4; 
	color				: dimgray; 
}
.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; 
}

/* リスト全体のコンテナ */
.presenter-spec-block {
    display: table;
    margin: 0 auto;
    text-align: left;
}

/* 構造を整理：dl全体にflexをかけず、dt/ddの並びを制御 */
.presenter-spec-list {
    margin: 0;
    padding: 0;
}

/* 各行のまとまり（divで括るのが現代的な書き方） */
.presenter-spec-list > div {
    display: flex;
    margin-bottom: 4px;
    align-items: flex-start;
}

.presenter-spec-list > div:last-child {
    margin-bottom: 0;
}

.presenter-spec-list dt {
    font-weight: bold;
    white-space: nowrap;
    width: 10em;
    flex-shrink: 0;
    text-align: right;
    color: #222;
}

/* コロンが必要ならここで一括制御可能 */
.presenter-spec-list dt::after {
    content: "：";
}

.presenter-spec-list dd {
    margin: 0;
    flex: 1;
}




/* --- オプション・消耗品 (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; 
}

/* --- タスキ PC・共通設定 --- */
.options a.is-new {
    position: relative;
    overflow: hidden;
    display: block;
}

.options a.is-new::before {
    content: "NEW!";
    position: absolute;
    top: 10px;
    right: -25px;
    width: 100px;
    background-color: #ff0000;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 25px;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.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%); 
}
.l-group {
	width	: 22em;
	text-align	: right;
	white-space	: nowrap;
}
.r-group {
	width	: 22em;
	text-align	: left;
	white-space	: nowrap;
}
/* --- レスポンシブ対応 --- */

.sp-only {
	display				: none; 
}
@media screen and (max-width: 768px) {
	.pc-only {
		display			: none; 
	}
	.sp-only {
		display			: table-row; 
	}
	.purpose-container {
		display			: block; 
		text-align		: center; 
	}
	.purpose-item {
		display			: inline;  
		width			: auto; 
		min-width		: 0; 
		margin			: 0; 
	}
	.purpose-container span {
		display			: inline-block; 
		margin			: 0.3rem; 
		padding			: 0.4rem 0.6rem; 
		font-size		: 0.85rem; 
	}
	.purpose-labels {
		display			: inline; 
		margin-top		: 0; 
	}
	.purpose-labels span {
		margin			: 0.5rem; 
		padding			: 0.4rem 0.5rem; 
	}
	.spec th  {
		width			: 100%; 
		display			: block; 
		padding			: 0.5rem 0; 
		border-bottom	: none; 
	}
	.spec td  {
		width			: 100%; 
		display			: block; 
		padding			: 0.7rem 0; 
		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		: 160px; 
	}
	.options p {
		font-size		: 0.9em; 
	}
	.option_text {
		font-size		: x-small; 
		letter-spacing	: -0.1em; 
	}
/* タスキ */
    .options a.is-new::before {
        top: 5px;            /* 上からの位置を少し詰める */
        right: -20px;        /* 右からの位置を少し詰める */
        width: 70px;         /* タスキの長さを短く */
        font-size: 9px;      /* 文字を小さく */
        line-height: 18px;   /* タスキの幅（太さ）を細く */
    }

    .presenter-spec-list > div {
        flex-direction: column;
        margin-bottom: 1rem;
    }
    
    .presenter-spec-list > div:last-child {
        margin-bottom: 0;
    }
    
    .presenter-spec-list dt {
        width: 100%;
        font-size: 0.9em;
        text-align: left;
        padding-left: 0.5rem;
    }
    
    .presenter-spec-list dd {
        font-size: 0.9em;
        padding-left: 1rem;
        /* text-indentよりpaddingの方が崩れにくいです */
    }

	.l-group,.r-group {
		width	: 11.5em;
	}

}