@charset "UTF-8";
/**
 * components.css
 * 共通UIコンポーネント（全ページで使う部品）
 *
 * 命名は FLOCSS簡易版 + BEM
 *   c- … コンポーネント
 */

/* ==================================================================
 * 見出し
 *   英字を大きく薄く敷き、その上に日本語をのせる。
 *   参考サイトが英字と日本語を重ねて余白を作っていた構造を、
 *   ミヤケントの配色で作り直したもの。
 * ================================================================== */
.c-heading {
	position: relative;
	margin-bottom: var(--sp-6);
	text-align: center;
}

@media (min-width: 768px) {
	.c-heading {
		margin-bottom: var(--sp-8);
	}
}

.c-heading--left {
	text-align: left;
}

/* 英字は筆記体で大きく取り、日本語見出しに重ねる。
   参考サイトの見出しが軽やかに見えるのは、英字が「ラベル」ではなく
   絵として日本語の上にかぶっているから。 */
.c-heading {
	padding-top: clamp(2.25rem, 8vw, 4.5rem);
}

.c-heading__en {
	position: absolute;
	/* 日本語の頭に軽くかぶる程度に留める。重ねすぎると両方読めなくなる。 */
	top: -.34em;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	display: block;
	font-family: var(--font-script);
	font-size: clamp(2.75rem, 7.5vw, 4.75rem);
	font-weight: 400;
	letter-spacing: .02em;
	line-height: 1;
	color: var(--accent);
	opacity: .55;
	text-transform: lowercase;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

/* 中央から少しずらす。左右対称に置くと途端に説明的になる。 */
@media (min-width: 768px) {
	.c-heading__en {
		left: 50%;
		transform: translateX(-62%) rotate(-2deg);
	}
}

.c-heading--left .c-heading__en {
	left: -.12em;
	transform: rotate(-2deg);
}

/* 濃い面では薄いままだと沈むので、少し濃くする */
.l-section--primary .c-heading__en,
.p-band .c-heading__en {
	opacity: .8;
}

/* 頭文字だけ大文字に戻す（"WORKS" と渡されても "Works" に見える） */
.c-heading__en::first-letter {
	text-transform: uppercase;
}

.c-heading__ja {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading);
	/* SPで長い見出しが1文字だけ次行に落ちないよう、下限を少し下げている */
	font-size: clamp(1.1875rem, 4.6vw, 2.125rem);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .08em;
	color: var(--primary);
}

/* 字間を広くとるのが参考サイトの見出しの特徴。
   横幅に余裕があるPCでだけ、しっかり開ける。 */
@media (min-width: 768px) {
	.c-heading__ja {
		line-height: 1.8;
		letter-spacing: .12em;
	}
}

/* 見出しの下の波線 */
.c-heading .c-deco--wave {
	width: 108px;
	margin: var(--sp-3) auto 0;
	color: var(--accent);
}

.c-heading--left .c-deco--wave {
	margin-inline: 0;
}

/* カタカナの読み。字間を大きく開けて軽さを出す。 */
.c-heading__kana {
	display: block;
	margin-top: var(--sp-3);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .5em;
	/* 字間の分だけ右にずれるので、その分を戻す */
	text-indent: .5em;
	color: var(--gray);
}

.c-heading--left .c-heading__kana {
	text-indent: 0;
}

.c-heading__lead {
	margin-top: var(--sp-4);
	color: var(--gray);
	font-size: .9375rem;
	line-height: 2.1;
	letter-spacing: .08em;
}

/* 濃紺背景のセクション。英字ラベルはアクセント色のまま読める。 */
.l-section--primary .c-heading__ja,
.p-campaign .c-heading__ja {
	color: var(--white);
}

.l-section--primary .c-heading__kana,
.p-campaign .c-heading__kana {
	color: rgba(255, 255, 255, .7);
}

/* ==================================================================
 * アイコン（inc/icons.php）
 *   色は currentColor なので、置いた場所の文字色に自動でそろう。
 * ================================================================== */
.c-icon {
	/* 横並びの中で潰されないようにする（ボタンや電話番号の隣で縮むのを防ぐ） */
	flex: none;
	display: block;
}

/* ==================================================================
 * 手描き風の装飾
 * ================================================================== */
.c-deco {
	display: block;
	line-height: 0;
	pointer-events: none;
}

.c-deco svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* 語句の下に引く線。文字の後ろに回して重ねる。 */
.c-deco--underline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.15em;
	z-index: -1;
	color: var(--accent-soft);
}

.c-deco--arrow {
	width: 34px;
	color: var(--primary);
}

.c-deco--burst {
	width: 46px;
	color: var(--accent);
}

/* 手描き線を引くための入れ物 */
.c-marker {
	position: relative;
	display: inline-block;
	z-index: 0;
}

/* 小見出し（セクション内） */
.c-subheading {
	margin-bottom: var(--sp-4);
	font-size: 1.25rem;
	color: var(--primary);
}

/* ==================================================================
 * ボタン
 * ================================================================== */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 56px;
	padding: var(--sp-3) var(--sp-7);
	border-radius: var(--radius-full);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.4;
	text-align: center;
	letter-spacing: .06em;
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
		color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.c-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

/* 主ボタン */
.c-btn--primary {
	background: var(--primary);
	color: var(--white);
}

.c-btn--primary:hover {
	background: var(--primary-dark);
	color: var(--white);
}

/* LINE（CTAの主役） */
.c-btn--line {
	background: var(--line-green);
	color: var(--white);
}

.c-btn--line:hover {
	background: #05b34c;
	color: var(--white);
}

/* 電話（補助） */
.c-btn--tel {
	background: var(--white);
	color: var(--primary);
	border: 2px solid var(--primary);
}

.c-btn--tel:hover {
	background: var(--primary);
	color: var(--white);
}

/* アクセント */
.c-btn--accent {
	background: var(--accent);
	color: var(--white);
}

.c-btn--accent:hover {
	background: #dd9128;
	color: var(--white);
}

/* 枠線のみ */
.c-btn--ghost {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--border);
}

.c-btn--ghost:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.c-btn--sm {
	min-height: 44px;
	padding: var(--sp-2) var(--sp-5);
	font-size: .875rem;
}

.c-btn--block {
	display: flex;
	width: 100%;
}

/* テキストリンク（→付き） */
.c-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 700;
	color: var(--primary);
}

.c-link-arrow::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width var(--dur) var(--ease);
}

.c-link-arrow:hover::after {
	width: 28px;
}

/* ==================================================================
 * カード
 *   サムネイルの上にラベルを重ね、本文側は点線で区切る。
 * ================================================================== */
.c-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.c-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	box-shadow: var(--shadow-hover);
}

.c-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bg-mist);
}

.c-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.c-card:hover .c-card__media img {
	transform: scale(1.06);
}

/* 画像の上に重ねる工事種別ラベル */
.c-card__media .c-tags {
	position: absolute;
	left: var(--sp-3);
	top: var(--sp-3);
	z-index: 1;
}

.c-card__media .c-tag {
	background: rgba(22, 56, 90, .88);
	color: var(--white);
	backdrop-filter: blur(2px);
}

/* 画像の下辺に薄いグラデーションを敷いて文字を読みやすく */
.c-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient(to top, rgba(15, 41, 67, .35), transparent);
	pointer-events: none;
}

.c-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sp-3);
	padding: var(--sp-5);
}

.c-card__title {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--primary);
}

.c-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	font-size: .8125rem;
	color: var(--gray);
	line-height: 1.6;
}

.c-card__text {
	font-size: .875rem;
	color: var(--gray);
	line-height: 1.9;
}

/* 施工事例カードの地域ラベル */
.c-card__area {
	display: inline-block;
	margin-bottom: var(--sp-2);
	padding: 1px var(--sp-3);
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	font-size: .6875rem;
	font-weight: 700;
	color: #b9791d;
	letter-spacing: .04em;
}

/* スペックは点線で区切る（参考サイトの点線装飾に着想） */
.c-card__spec {
	display: grid;
	gap: 0;
	margin: 0;
	padding-top: var(--sp-3);
	border-top: 1px dashed var(--border-dot);
	font-size: .8125rem;
}

.c-card__spec-row {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: var(--sp-2);
	padding: 5px 0;
	line-height: 1.7;
}

.c-card__spec-row + .c-card__spec-row {
	border-top: 1px dotted var(--border-dot);
}

.c-card__spec dt {
	color: var(--gray);
	font-size: .75rem;
}

.c-card__spec dd {
	margin: 0;
	color: var(--text);
	font-weight: 700;
}

.c-card__date {
	font-family: var(--font-en);
	font-size: .75rem;
	color: var(--gray);
}

/* 「詳細を見る」は右下に寄せる */
.c-card__more {
	margin-top: auto;
	padding-top: var(--sp-3);
	font-size: .8125rem;
	color: var(--accent);
	align-self: flex-end;
}

.c-card:hover .c-card__more::after {
	width: 28px;
}

/* カード全体をリンクにする時 */
.c-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ==================================================================
 * 料金プラン（横1枚の帯）
 * ------------------------------------------------------------------
 * template-parts/parts/plan-card.php の見た目。
 * TOPの料金セクションと料金ページの両方で使う
 * ＝ home.css ではなくここに置く。
 *
 * 構成
 *   濃紺の見出し帯（プラン名・耐久年数）
 *   → 写真 ／ こんな方におすすめ ／ 坪数別の目安価格
 *   → （料金ページのみ）含まれる内容
 *
 * カードを3つ横に並べると金額の面積が足りず読み取れないので、
 * 横幅を使い切って「ぱっと見て分かる」並びにしている。
 * ================================================================== */
.p-plans {
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-6);
}

@media (min-width: 768px) {
	.p-plans {
		gap: var(--sp-7);
	}
}

.p-plan {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: 0 12px 36px rgba(15, 41, 67, .12);
}

/* おすすめは影を強くして、面ごと手前に出す */
.p-plan--recommend {
	box-shadow: 0 18px 48px rgba(15, 41, 67, .22);
}

/* おすすめだけ上辺にオレンジのラインを通す */
.p-plan--recommend::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 5px;
	background: var(--accent);
}

/* ---------- 見出し帯 ----------
   淡い面だと「ただの表」に見えるので、濃紺で受ける。
   プラン名を白抜きにすると、3つ並べたときの見出しの強さがそろう。 */
.p-plan__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: linear-gradient(105deg, var(--primary-dark) 0%, var(--primary) 58%, var(--primary-light) 100%);
	color: var(--white);
}

@media (min-width: 768px) {
	.p-plan__head {
		padding: var(--sp-5) var(--sp-7);
	}
}

.p-plan__head-main {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-width: 0;
}

/* 丸い「オススメ」。少し傾けて、貼った紙のように見せる */
.p-plan__badge {
	flex: none;
	display: grid;
	place-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: var(--accent);
	box-shadow: 0 6px 18px rgba(15, 41, 67, .35);
	color: var(--white);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	transform: rotate(-8deg);
}

@media (min-width: 768px) {
	.p-plan__badge {
		width: 68px;
		height: 68px;
		font-size: .8125rem;
	}
}

.p-plan__lead {
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--accent);
}

@media (min-width: 768px) {
	.p-plan__lead {
		font-size: .875rem;
	}
}

.p-plan__name {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 4.4vw, 1.875rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .08em;
	color: var(--white);
}

/* 保証年数と期待耐用年数。どちらも塗料の種類から自動で入る（手入力欄は無い）。
   ⚠ 別の数字なのでラベルを必ず添えること。 */
.p-plan__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.p-plan__spec {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .14);
	white-space: nowrap;
}

/* 期待耐用年数のほうが数字が大きいので、そちらを立てる */
.p-plan__spec--accent {
	border-color: var(--accent);
	background: var(--accent);
}

.p-plan__spec-label {
	font-size: .6875rem;
	letter-spacing: .06em;
	opacity: .85;
}

.p-plan__spec-value {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* ---------- 本体 ---------- */
.p-plan__body {
	display: grid;
	gap: var(--sp-5);
	padding: var(--sp-5);
}

@media (min-width: 768px) {
	.p-plan__body {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: var(--sp-5) var(--sp-6);
		align-items: start;
		padding: var(--sp-6) var(--sp-7) var(--sp-7);
	}

	/*
	 * 価格表は横いっぱいに置く。
	 * ⚠ 写真・特徴と3列に並べると1列あたり120px程度しか取れず、
	 *   金額が枠からはみ出して読めなくなる。ここは幅を優先する。
	 */
	.p-plan__prices,
	.p-plan__includes {
		grid-column: 1 / -1;
	}
}

/* 広い画面では、写真を左に通しで置き、右に「おすすめの方」→「価格」を積む。
   価格表を横いっぱいに伸ばすと、写真の右に大きな空白が残るため。 */
@media (min-width: 1024px) {
	.p-plan__body {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}

	.p-plan__features {
		grid-row: 1;
		grid-column: 2;
	}

	.p-plan__prices {
		grid-row: 2;
		grid-column: 2;
	}
}

/* 狭い画面では横長に切る。縦を使いすぎると
   金額まで指を何度も動かすことになるため。 */
.p-plan__media {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: var(--bg-soft);
}

@media (min-width: 768px) {
	.p-plan__media {
		aspect-ratio: 4 / 3;
	}
}

/* 広い画面では左の列いっぱいに通す。
   ⚠ この指定は上の aspect-ratio より後に置くこと（後勝ちで打ち消すため）。
   ⚠ grid-row だけ書くと列の自動配置が狂って本文に重なるので
     grid-column も必ずセットで書く。 */
@media (min-width: 1024px) {
	.p-plan__media {
		grid-row: 1 / span 2;
		grid-column: 1;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 260px;
	}
}

.p-plan__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 小見出しは塗りのラベルにする。細い色文字だと本文に埋もれる。 */
.p-plan__label {
	display: inline-block;
	margin-bottom: var(--sp-3);
	padding: 3px var(--sp-3);
	border-radius: var(--radius-full);
	background: var(--primary);
	color: var(--white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
}

.p-plan__features-list {
	display: grid;
	gap: var(--sp-2);
	font-size: .875rem;
}

.p-plan__features-list li {
	position: relative;
	padding-left: 1.9em;
	line-height: 1.8;
}

/* 丸に白のチェック。線だけのチェックより輪郭が出る。 */
.p-plan__features-list li::before {
	content: "";
	position: absolute;
	top: .32em;
	left: 0;
	width: 1.25em;
	height: 1.25em;
	border-radius: var(--radius-full);
	background: var(--accent);
}

.p-plan__features-list li::after {
	content: "";
	position: absolute;
	top: .68em;
	left: .34em;
	width: .52em;
	height: .26em;
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: rotate(-45deg);
}

/* ---------- 坪数別の目安価格 ---------- */
.p-plan__prices {
/*	padding: var(--sp-4);*/
	padding: 10px 0 10px;
	border-radius: var(--radius);
}

/* 狭い画面：1行に「坪数｜金額」／広い画面：坪数を上にして横に並べる
   ⚠ 横並びの切り替えは 900px から。
     坪数が4段階（20/30/40/50坪）あるので、600pxで横に並べると
     1列90px程度しか取れず「200,000円〜」が枠から出る。 */
.p-plan__table {
	display: grid;
	gap: var(--sp-2);
}

@media (min-width: 900px) {
	.p-plan__table {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0;
	}
}

.p-plan__row {
	display: grid;
	grid-template-columns: 34% minmax(0, 1fr);
	overflow: hidden;
	border-radius: var(--radius-sm);
}

@media (min-width: 900px) {
	.p-plan__row {
		grid-template-columns: none;
		border-radius: 0;
	}

	.p-plan__row:first-child {
		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	}

	.p-plan__row:last-child {
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	}
}

.p-plan__size {
	display: grid;
	place-content: center;
	padding: var(--sp-3) var(--sp-2);
	background: var(--primary);
	color: var(--white);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
}

/* ⚠ 金額は途中で折り返させないこと。
   「¥480,00 / 0」のように割れると桁を読み間違える。 */
.p-plan__price {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
/*	background: var(--white);*/
 	background: #f6f6f6;
	font-size: clamp(1.0625rem, 5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--primary);
	text-align: right;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.p-plan__price {
		padding: var(--sp-4) 2px;
		font-size: clamp(1rem, 1.9vw, 1.3125rem);
		text-align: center;
	}
}

/* 3つのときだけ、真ん中（＝いちばん多い坪数）を目立たせる */
.p-plan__row:nth-child(2):nth-last-child(2) .p-plan__size {
	background: var(--accent);
}

.p-plan__row:nth-child(2):nth-last-child(2) .p-plan__price {
	background: var(--accent-soft);
}

.p-plan__table-note {
	margin-top: 18px;
	font-size: .6875rem;
	line-height: 1.7;
	color: var(--gray);
}

/* ---------- 含まれる内容（料金ページのみ） ---------- */
.p-plan__includes {
	padding-top: var(--sp-5);
	border-top: 1px dashed var(--border-dot);
}

.p-plan__includes-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.p-plan__includes-list li {
	padding: 4px var(--sp-3);
	border-radius: var(--radius-full);
	background: var(--bg-mist);
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--primary);
}

/* ==================================================================
 * コンテンツ案内（写真タイル）
 * ------------------------------------------------------------------
 * template-parts/common/site-guide.php の見た目。
 * TOPでは本文の途中、下層ページでは footer.php から出力される
 * ＝ 全ページで使うので home.css ではなくここに置く。
 * ================================================================== */
.p-menu__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}

@media (min-width: 600px) {
	.p-menu__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-4);
	}
}

@media (min-width: 1024px) {
	.p-menu__list {
		grid-template-columns: repeat(5, 1fr);
	}
}

.p-menu__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--white);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.p-menu__link:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	color: var(--white);
}

.p-menu__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--primary);
}

@media (min-width: 600px) {
	.p-menu__media {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1024px) {
	.p-menu__media {
		aspect-ratio: 3 / 4;
	}
}

.p-menu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.p-menu__link:hover .p-menu__media img {
	transform: scale(1.06);
}

/* 写真の上に文字を置くので、下側だけ濃紺を重ねて可読性を確保する */
.p-menu__body {
	position: absolute;
	inset: auto 0 0 0;
	display: grid;
	gap: 2px;
	padding: var(--sp-5) var(--sp-3) var(--sp-4);
	background: linear-gradient(
		180deg,
		rgba(15, 41, 67, 0) 0%,
		rgba(15, 41, 67, .78) 55%,
		rgba(15, 41, 67, .92) 100%
	);
	text-align: center;
}

.p-menu__en {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--accent);
}

.p-menu__label {
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}

/* ==================================================================
 * セクションの区切り（波型・山型）
 *   真横の直線で切らず、なだらかな稜線で次のセクションへ繋ぐ。
 *   色は「次に来るセクションの背景色」を指定する。
 * ================================================================== */
.c-wave {
	/* ⚠ 高さは1か所で持つこと。
	   下の重なり量（margin）がこの値とずれると、谷の先が
	   前のセクションの下辺で切り落とされて三角が潰れる。 */
	--wave-h: clamp(40px, 6vw, 90px);

	position: relative;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}

.c-wave svg {
	display: block;
	width: 100%;
	height: var(--wave-h);
}

/* 下向き（セクションの末尾に置く）
   前のセクションへ「波の高さぶん」まるごと重ねる。
   こうすると波の透明な部分＝前のセクションの色、塗りの部分＝次のセクションの色
   になり、どの形でも先端まできれいに出る。 */
.c-wave--bottom {
	margin-top: calc(var(--wave-h) * -1);
	margin-bottom: -1px; /* 拡大時に境目へ線が出るのを防ぐ */
}

/* 上向き（セクションの先頭に置く。形を上下反転させる） */
.c-wave--top svg {
	transform: scaleY(-1);
}

.c-wave--top {
	margin-bottom: calc(var(--wave-h) * -1);
}

/* 塗りの色＝次のセクションの背景色 */
.c-wave--white path { fill: var(--bg); }
.c-wave--soft path { fill: var(--bg-soft); }
.c-wave--cream path { fill: var(--bg-cream); }
.c-wave--mist path { fill: var(--bg-mist); }
.c-wave--primary path { fill: var(--primary); }
.c-wave--primary-dark path { fill: var(--primary-dark); }

/* ==================================================================
 * ページ左右の破線ライン
 * ------------------------------------------------------------------
 * 画面の両端に細い破線を通して、全体を1枚の紙のように見せる。
 * 装飾なのでクリックは通す。狭い画面では邪魔になるので出さない。
 * ================================================================== */
@media (min-width: 1024px) {
	.l-body::before,
	.l-body::after {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 1px;
		pointer-events: none;
		background-image: repeating-linear-gradient(
			to bottom,
			var(--border-dot) 0 5px,
			transparent 5px 11px
		);
	}

	.l-body::before {
		left: 16px;
	}

	.l-body::after {
		right: 16px;
	}
}

/* ==================================================================
 * 背景の風景（山と木）
 * ================================================================== */
.c-scenery {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: clamp(180px, 26vw, 340px);
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}

.c-scenery svg {
	display: block;
	width: 100%;
	height: 100%;
}

.c-scenery__far  { fill: var(--white); opacity: .5; }
.c-scenery__near { fill: var(--primary-light); opacity: .16; }

.c-scenery__tree {
	fill: none;
	stroke: var(--primary);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .38;
}

.c-scenery--dark .c-scenery__far  { fill: var(--white); opacity: .1; }
.c-scenery--dark .c-scenery__near { fill: var(--white); opacity: .08; }
.c-scenery--dark .c-scenery__tree { stroke: var(--white); opacity: .3; }

/* ==================================================================
 * きらめき（装飾）
 * ================================================================== */
.c-sparkles {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.c-sparkle {
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--white);
	opacity: 0;
	/* 四芒星（とがった十字）の形 */
	clip-path: polygon(
		50% 0%, 58% 42%, 100% 50%, 58% 58%,
		50% 100%, 42% 58%, 0% 50%, 42% 42%
	);
	animation: mk-twinkle 4.5s var(--ease) infinite;
}

.c-sparkle--1 { top: 14%; left: 8%;  animation-delay: 0s; }
.c-sparkle--2 { top: 28%; left: 62%; width: 10px; height: 10px; animation-delay: .8s; }
.c-sparkle--3 { top: 58%; left: 22%; width: 18px; height: 18px; animation-delay: 1.6s; }
.c-sparkle--4 { top: 72%; left: 78%; animation-delay: 2.4s; }
.c-sparkle--5 { top: 40%; left: 90%; width: 10px; height: 10px; animation-delay: 3.2s; }
.c-sparkle--6 { top: 84%; left: 46%; width: 12px; height: 12px; animation-delay: 1.2s; }

@keyframes mk-twinkle {
	0%, 100% { opacity: 0; transform: scale(.3); }
	50%      { opacity: .8; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.c-sparkle {
		animation: none;
		opacity: .5;
	}
}

/* ==================================================================
 * 八角形バッジ
 * ------------------------------------------------------------------
 * 角を落とした八角形。頂点を少しずつ不揃いにして、
 * 定規で描いた図形ではなく、手で切った紙のように見せる。
 * 筆記体のラベルは上辺から飛び出させて重ねる。
 * ================================================================== */
.c-badge-oct {
	position: relative;
	display: grid;
	place-content: center;
	gap: 4px;
	/* スマホではこれが主導線になるので、画面幅に対して大きく取る */
	width: min(62vw, 240px);
	height: min(62vw, 240px);
	padding: var(--sp-6) var(--sp-4) var(--sp-5);
	color: var(--primary);
	text-align: center;
	transition: transform var(--dur) var(--ease);
}

@media (min-width: 768px) {
	.c-badge-oct {
		gap: 3px;
		width: 196px;
		height: 196px;
		padding: var(--sp-5) var(--sp-4) var(--sp-4);
	}
}

/* 面は疑似要素で持たせる。文字は形の外にも置けるようにするため。 */
.c-badge-oct::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bg-cream);
	box-shadow: 0 10px 30px rgba(15, 41, 67, .28);
	clip-path: polygon(
		31% 0%, 70% 1%, 100% 29%, 99% 71%,
		69% 100%, 30% 99%, 1% 70%, 0% 30%
	);
}

.c-badge-oct:hover {
	transform: scale(1.04) rotate(-1.5deg);
	color: var(--primary);
}

/* 筆記体は上辺からはみ出させて、面と重ねる */
.c-badge-oct__en {
	position: absolute;
	top: -.72em;
	right: -.12em;
	font-family: var(--font-script);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--white);
	text-shadow: 0 2px 14px rgba(15, 41, 67, .75);
	transform: rotate(-8deg);
	pointer-events: none;
}

.c-badge-oct__title {
	font-family: var(--font-heading);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: .1em;
}

@media (min-width: 768px) {
	.c-badge-oct__title {
		font-size: 1.0625rem;
	}
}

.c-badge-oct__note {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-family: var(--font-heading);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--line-green);
}

.c-badge-oct__note svg {
	flex: none;
}

@media (min-width: 768px) {
	.c-badge-oct__note {
		font-size: .6875rem;
	}
}

.c-badge-oct__text {
	margin-top: var(--sp-2);
	max-width: 15em;
	font-size: .6875rem;
	line-height: 1.75;
	letter-spacing: 0;
	color: var(--gray);
}

@media (min-width: 768px) {
	.c-badge-oct__text {
		font-size: .625rem;
	}
}

/* ==================================================================
 * タグ・ラベル
 * ================================================================== */
.c-tag {
	display: inline-block;
	padding: 2px var(--sp-3);
	border-radius: var(--radius-full);
	background: var(--bg-soft);
	color: var(--primary);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.8;
}

.c-tag--accent {
	background: var(--accent);
	color: var(--white);
}

.c-tag--primary {
	background: var(--primary);
	color: var(--white);
}

.c-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* ==================================================================
 * 下層ページのヒーロー
 * ================================================================== */
.c-page-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 200px;
	padding-block: var(--sp-8);
	background: var(--primary);
	color: var(--white);
	text-align: center;
	overflow: hidden;
}

@media (min-width: 768px) {
	.c-page-hero {
		min-height: 280px;
	}
}

.c-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.c-page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
}

.c-page-hero__inner {
	position: relative;
	z-index: 1;
}

.c-page-hero__title {
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	color: var(--white);
}

/* 英字サブはタイトルの下にピル型で置く（見出しの主役は日本語） */
.c-page-hero__en {
	display: inline-block;
	margin-top: var(--sp-4);
	padding: 2px var(--sp-5);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--radius-full);
	font-family: var(--font-en);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.9;
	color: var(--white);
	text-transform: uppercase;
}

/* ==================================================================
 * パンくず
 * ================================================================== */
.c-breadcrumb {
	padding-block: var(--sp-3);
	background: var(--bg-soft);
	font-size: .75rem;
	color: var(--gray);
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}

.c-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.c-breadcrumb__item:not(:last-child)::after {
	content: "／";
	color: var(--border);
}

.c-breadcrumb__item a:hover {
	color: var(--primary);
	text-decoration: underline;
}

.c-breadcrumb__item[aria-current="page"] {
	color: var(--primary);
	font-weight: 700;
}

/* ==================================================================
 * アコーディオン（FAQ）
 * ================================================================== */
.c-accordion {
	display: grid;
	gap: var(--sp-3);
}

.c-accordion__item {
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.c-accordion__q {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) var(--sp-5);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.7;
	text-align: left;
	color: var(--primary);
	list-style: none;
	cursor: pointer;
}

/* <summary> の既定マーカーを消す */
.c-accordion__q::-webkit-details-marker {
	display: none;
}

.c-accordion__q::marker {
	content: "";
}

.c-accordion__mark {
	flex: none;
	font-family: var(--font-en);
	font-size: 1.125rem;
	color: var(--accent);
	line-height: 1.5;
}

.c-accordion__icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 6px;
	margin-left: auto;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	transition: transform var(--dur) var(--ease);
}

.c-accordion__icon::after {
	transform: rotate(90deg);
}

.c-accordion__item[open] .c-accordion__icon::after {
	transform: rotate(0);
}

/* 高さをアニメーションさせる要素。
   ⚠ ここに padding を付けないこと。閉じても padding 分の高さが残ってしまう。
   余白は内側の __a-inner に持たせている。 */
.c-accordion__a {
	font-size: .9375rem;
	color: var(--text);
}

.c-accordion__a-inner {
	display: flex;
	gap: var(--sp-3);
	margin: 0 var(--sp-5);
	padding: var(--sp-4) 0 var(--sp-5);
	border-top: 1px solid var(--border);
}

/* ==================================================================
 * ページャー
 * ================================================================== */
.c-pager {
	margin-top: var(--sp-8);
}

.c-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.c-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: .875rem;
	color: var(--primary);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-pager .page-numbers:hover,
.c-pager .page-numbers.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.c-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ==================================================================
 * 定義テーブル（会社概要・施工事例スペック）
 * ================================================================== */
.c-table {
	border-top: 1px solid var(--border);
}

.c-table__row {
	display: grid;
	gap: var(--sp-1);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
	.c-table__row {
		grid-template-columns: 200px 1fr;
		gap: var(--sp-5);
		padding: var(--sp-5) var(--sp-2);
	}
}

.c-table__label {
	font-weight: 700;
	font-size: .875rem;
	color: var(--primary);
}

.c-table__value {
	font-size: .9375rem;
}

/* ==================================================================
 * 空状態
 * ================================================================== */
.c-empty {
	padding: var(--sp-8) var(--sp-5);
	border: 1px dashed var(--border);
	border-radius: var(--radius);
	background: var(--bg-soft);
	text-align: center;
	color: var(--gray);
	font-size: .9375rem;
}

/* ==================================================================
 * アニメーション初期状態
 *   JSが有効（html.js-ready）な時だけ適用する。
 *   → JSが落ちても本文が消えない（設計書 §7）
 * ================================================================== */
.js-ready [data-anim] {
	opacity: 0;
	will-change: transform, opacity;
}

.js-ready [data-anim="fade-up"] {
	transform: translateY(24px);
}

.js-ready [data-anim="fade"] {
	transform: none;
}

/* GSAPが読み込めなかった場合の保険。
   anim.js が <html> に .no-gsap を付けるので、必ず表示される。 */
.js-ready.no-gsap [data-anim] {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	.js-ready [data-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
 * GSAPが無いときのスクロール演出（CSSだけ）
 *
 * ブラウザ側のスクロール連動アニメーションを使う。
 * JSもライブラリも要らないので、GSAPを置いていない今の状態でも動く。
 * 対応していないブラウザでは、最初から表示されたままになる（崩れない）。
 *
 * ⚠ GSAPを置いた場合は html.js-ready が付き、こちらは無効になる。
 * ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html:not(.js-ready) [data-anim] {
			animation: mk-enter linear both;
			animation-timeline: view();
			/* 画面に入り始めてから 45% 進むまでで出現しきる */
			animation-range: entry 0% entry 45%;
		}

		html:not(.js-ready) [data-anim="fade"] {
			animation-name: mk-enter-fade;
		}

		/* 子要素を少しずつ遅らせて出す */
		html:not(.js-ready) [data-anim="stagger"] {
			animation: none;
		}

		html:not(.js-ready) [data-anim="stagger"] > * {
			animation: mk-enter linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		html:not(.js-ready) [data-anim="stagger"] > :nth-child(2) { animation-range: entry 4% entry 59%; }
		html:not(.js-ready) [data-anim="stagger"] > :nth-child(3) { animation-range: entry 8% entry 63%; }
		html:not(.js-ready) [data-anim="stagger"] > :nth-child(4) { animation-range: entry 12% entry 67%; }
		html:not(.js-ready) [data-anim="stagger"] > :nth-child(5) { animation-range: entry 16% entry 71%; }
		html:not(.js-ready) [data-anim="stagger"] > :nth-child(n+6) { animation-range: entry 20% entry 75%; }
	}

	@keyframes mk-enter {
		from { opacity: 0; transform: translateY(40px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes mk-enter-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}