/*
 * TOP 専用（.p-top-*）。is_front_page() のときだけ読む（設計書 §8）。
 * 値は 00-tokens.css の --top-* ほか（XD の実測）。縦の余白はセクションごとに違う（均一にしない）。
 * SP が基本、768px 以上で PC。LINE バナーは 768 以上で横並び（1200 未満は緑の面の幅に比例して中身を縮める）。
 * Concept のカルーセルは SP が 2 枚目を中央に置き、768 以上は XD（1920）の構図を画面幅に比例させて常に 4 枚（1 枚目が左で少し切れる）。
 */
@layer pages {
	/* ---------- TOP 共通 ---------- */
	.p-top__more {
		display: flex;
		justify-content: center;
	}

	/* 記事が 1 件も無い枠 */
	.p-top__empty {
		margin-top: var(--sp-10);
		font-size: var(--fs-lead);
		font-weight: 500;
		text-align: center;
	}

	/* ---------- ヒーロー: 写真の上に見出しと副題を中央に重ねる ---------- */
	.p-top-hero {
		position: relative;
	}

	.p-top-hero__text {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		justify-items: center;
		row-gap: var(--top-hero-sub-gap);
		padding: var(--top-hero-pt) var(--gutter) 0;
		color: var(--c-white);
		font-family: var(--font-serif);
		line-height: var(--lh-tight); /* XD の文字の枠（文字サイズ × 1.2）。SP の 2 行の間隔も 42 = 35 × 1.2 */
		text-align: center;
		text-shadow: var(--top-hero-shadow); /* XD の見出し・副題のドロップシャドウ（写真の上で白文字を読ませる） */
	}

	/*
	 * 字間 .15em（XD）は文字を持つ要素に書く（em は宣言した要素の文字サイズで確定して継承される。親の 16px に書くと 2.4px になる）。
	 * 字間は最後の字の後ろにも付くので、同じ幅を左にも足して見た目の中心を揃える。
	 * palt は切る: XD は字間 .15em で組んでいて palt は掛かっていない。Noto Serif JP が手元にある環境で palt が効くと XD より 5% 短くなる
	 */
	.p-top-hero__title,
	.p-top-hero__sub {
		padding-inline-start: var(--ls-wide);
		letter-spacing: var(--ls-wide);
		font-feature-settings: "palt" 0;
	}

	/*
	 * 狭い画面では 1 行に収まる大きさまで縮める。分母は字数 × 1.15（1 字＋字間）＋左に足した .15（00-tokens.css の --top-hero-*-em）。
	 * − 1px は端数で幅をわずかに超えて折れるのを防ぐ分
	 */
	.p-top-hero__title {
		font-size: min(var(--fs-hero), (100vw - var(--gutter) * 2 - 1px) / var(--top-hero-title-em));
		font-weight: 400;
		line-height: inherit;
	}

	/* 「価値が残る家を、」「福岡で。」の間でだけ折り返す。字間は h1 の .15em を受け継ぐ（10-base の :where(span) の .05em を打ち消す） */
	.p-top-hero__line {
		display: inline-block;
		letter-spacing: inherit;
	}

	.p-top-hero__sub {
		font-size: min(var(--fs-hero-sub), (100vw - var(--gutter) * 2 - 1px) / var(--top-hero-sub-em));
		font-weight: 600;
	}

	/* ---------- News バー: 帯全体を記事へのリンクにし、VIEW MORE（PC）だけ一覧へ ---------- */
	.p-top-news {
		--c-focus: var(--c-white);
		position: relative;
		display: grid;
		grid-template-columns: var(--top-news-title-x) minmax(0, 1fr) auto;
		align-items: center;
		height: var(--top-news-h);
		padding-inline: var(--gutter);
		background: var(--c-primary);
		color: var(--c-white);
	}

	.p-top-news__label {
		font-family: var(--font-en);
		font-size: var(--fs-news-label);
		font-weight: 400;
		line-height: var(--lh-none);
		letter-spacing: var(--ls-none);
	}

	/*
	 * 記事名（リンク）と、お知らせが 0 件のときの「準備中」。
	 * XD のベースラインに合わせて下げる: 中央揃えの箱の上にだけ余白を足すと、その半分だけ下がる（position や translate は ::after の帯全体のリンクの基準を変えるので使わない）
	 */
	.p-top-news__title,
	.p-top-news__empty {
		margin-top: calc(var(--top-news-title-dy) * 2);
		overflow: hidden;
		font-size: var(--fs-news-title);
		line-height: var(--lh-heading);
		letter-spacing: var(--ls-none);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.p-top-news__title::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.p-top-news__more {
		position: relative;
		z-index: var(--z-raise);
		display: flex;
		align-items: center;
		gap: var(--top-news-more-gap);
		margin-left: var(--sp-10);
		font-family: var(--font-viewmore);
		font-size: var(--fs-view-more);
		font-weight: 300;
		line-height: var(--lh-none);
		letter-spacing: var(--ls-none);
	}

	.p-top-news__arrow {
		width: var(--top-news-arrow-w);
	}

	/* ---------- Blog: SP はカルーセル（画面の端まで広げ、左右のカードをはみ出させる）/ PC は 3 列 ---------- */
	.p-top-blog {
		padding-block: var(--top-blog-pt) var(--top-blog-pb);
	}

	/* SP: c-carousel--center（2 枚目を中央・丸の中心を中央のカードの縁に置く）。丸の高さは画像の縦の中央 */
	.p-top-blog__carousel {
		--carousel-item-w: var(--top-blog-card-w);
		--carousel-gap: var(--top-blog-card-gap);
		--carousel-grid-gap: var(--top-blog-card-gap); /* PC の 3 列の間隔（XD: x=360 / 775 / 1190 → 44） */
		--carousel-arrow-size: var(--arrow-sm);
		--carousel-arrow-y: calc(var(--carousel-item-w) * var(--card-blog-img-h) / var(--card-blog-img-w) / 2);
		margin: var(--top-blog-list-gap) calc(var(--gutter) * -1) 0;
	}

	.p-top-blog__more {
		margin-top: var(--top-blog-more-gap);
	}

	/* ---------- Works: 2 列 × 2 行 ---------- */
	.p-top-works {
		--head-lead-x: var(--top-works-lead-x);
		--tag-h: var(--top-works-tag-h);
		padding-block: var(--top-works-pt) var(--top-works-pb);
	}

	.p-top-works__list {
		gap: var(--top-works-row-gap) var(--top-works-col-gap);
		margin-top: var(--top-works-list-gap);
	}

	.p-top-works__more {
		margin-top: var(--top-works-more-gap);
	}

	/* ---------- LINE バナー: SP は画像の下に緑を積む / 768 以上は横並び（画像 572＋緑 628。1200 未満は緑の面の幅に比例して中身を縮める） ---------- */
	.p-top-line {
		padding-block: var(--top-line-pt) var(--top-line-pb);
	}

	/* 中身の縮小式（00-tokens.css の --top-line-body-w）の 100cqi はこのバナーの幅 */
	.p-top-line__banner {
		position: relative;
		display: grid;
		margin-inline: calc(var(--gutter) * -1); /* SP は画面の端まで */
		container-type: inline-size;
	}

	.p-top-line__img {
		width: 100%;
	}

	.p-top-line__body {
		--c-focus: var(--c-white);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--top-line-body-pt) var(--sp-5) var(--top-line-body-pb);
		background: var(--c-primary);
		color: var(--c-white);
		font-weight: 700;
		line-height: var(--lh-tight); /* XD の文字の枠（1 行ずつ）で縦を合わせる */
		text-align: center;
	}

	/* 字間: XD はピル・見出し・黄の文・ボタンが 0、＼…／ と注記が .05em。文字を持つ要素に直接書く（親に書くと 10-base の :where の .05em に負ける） */
	.p-top-line__pill,
	.p-top-line__title,
	.p-top-line__lead,
	.p-top-line__button {
		letter-spacing: var(--ls-none);
	}

	.p-top-line__pill {
		display: grid;
		place-items: center;
		min-width: var(--top-line-pill-w);
		min-height: var(--top-line-pill-h); /* 文字サイズ設定で文字が大きくなったら広がる（XD の寸法は最小値） */
		padding-inline: var(--sp-2);
		border-radius: var(--r-xl);
		background: var(--c-accent);
		font-size: var(--fs-line-pill);
	}

	/* 320 でも 768 の横並びでも 1 行に収める（12 字が緑の面の左右の余白の内側に入る大きさまで縮める） */
	.p-top-line__title {
		margin-top: var(--top-line-title-gap);
		font-size: min(var(--fs-line-title), (var(--top-line-body-w) - var(--sp-5) * 2) / var(--top-line-title-em));
	}

	.p-top-line__lead {
		margin-top: var(--top-line-lead-gap);
		color: var(--c-accent-yellow);
		font-size: var(--fs-line-lead);
	}

	.p-top-line__sub {
		margin-top: var(--top-line-sub-gap);
		font-size: var(--fs-line-sub);
		letter-spacing: var(--ls-base);
	}

	.p-top-line__button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--top-line-arrow-gap);
		min-width: min(var(--top-line-btn-w), 100%); /* XD 273 / 456 は最小値。文字サイズ設定で文字が大きくなったら広がる */
		max-width: 100%;
		min-height: var(--top-line-btn-h);
		margin-top: var(--top-line-btn-gap);
		padding: var(--sp-1) var(--sp-4);
		border-radius: var(--r-xl);
		background: var(--c-line);
		font-size: var(--fs-line-button);
		transition: background-color var(--dur-fast);
	}

	/* バナーのどこを押しても LINE ボタンのリンクになる */
	.p-top-line__button::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.p-top-line__arrow {
		flex: none;
		width: var(--top-line-arrow-w);
	}

	.p-top-line__note {
		margin-top: var(--top-line-note-gap);
		font-size: var(--fs-line-note);
		letter-spacing: var(--ls-base);
	}

	@media (hover: hover) {
		.p-top-line__button:hover {
			background: var(--c-line-hover);
		}
	}

	/* LINE バナーが無い（リンク先 URL 未受領・先方確認 ⑤ の既定・2026-09-27）とき: バナーの上の間（--top-line-pt）を Concept の紙の前に残す（PC は VIEW MORE → 紙が詰まるため。SP は 0 で変わらない） */
	.p-top-works + .p-top-concept {
		margin-top: var(--top-line-pt);
	}

	/* Instagram が無い（アカウント URL 未受領・同上）とき: エリアの枠の下の間（--top-area-pb）と Contact の上の間（--top-contact-pt）が重なって空きすぎるので、Contact 側の上の間を 0 にする（PC 270 → 169・SP 107 → 69。Instagram が戻れば効かない） */
	.p-top-area + .p-top-contact {
		padding-top: 0;
	}

	/* ---------- Concept: 紙の背景・カルーセル（SP は 2 枚目を中央＝c-carousel--center / 768 以上は XD の構図を画面幅に比例させて 4 枚・下の PC） ---------- */
	.p-top-concept {
		--head-lead-x: var(--top-concept-lead-x);
		padding-block: var(--top-concept-pt) var(--top-concept-pb);
	}

	.p-top-concept__carousel {
		--carousel-item-w: var(--top-concept-card-w);
		--carousel-gap: var(--top-concept-gap);
		--carousel-arrow-size: var(--arrow-lg);
		--carousel-arrow-y: calc(var(--carousel-item-w) * var(--top-concept-img-h) / var(--top-concept-img-w)); /* 丸の中心を画像の下端に置く */
		margin-top: var(--top-concept-list-gap);
	}

	.p-top-concept__card {
		display: block;
		height: 100%;
		overflow: hidden;
		padding-bottom: var(--top-concept-card-pb);
		border-radius: var(--r-md);
		background: var(--c-white);
		text-align: center;
	}

	.p-top-concept__img {
		width: 100%;
		aspect-ratio: var(--top-concept-img-w) / var(--top-concept-img-h); /* XD: PC 435×335・SP 239×184 */
		object-fit: cover;
	}

	.p-top-concept__title {
		margin-top: var(--top-concept-title-gap);
		font-size: var(--fs-concept-title);
		font-weight: 700;
		line-height: var(--lh-concept-title);
	}

	.p-top-concept__text {
		margin-top: var(--top-concept-text-gap);
		font-size: var(--fs-concept-text);
		font-weight: 500;
		line-height: var(--lh-concept-text);
	}

	/* ---------- About: 8 枚の写真リンク＋福岡地図 ---------- */
	/* 地図の大きさを画面の幅（100cqi）から出すので、このセクションを幅の基準にする。地図が次の枠に重なるので前に出す */
	.p-top-about {
		--head-lead-x: var(--top-about-lead-x);
		z-index: var(--z-raise);
		overflow-x: clip; /* SP の地図は画面の右にはみ出す（XD どおり）ので、はみ出した分は見せない */
		container-type: inline-size;
		padding-block: var(--top-about-pt) var(--top-about-pb);
	}

	.p-top-about__list {
		gap: var(--top-about-row-gap) var(--top-about-col-gap);
		margin-top: var(--top-about-list-gap);
	}

	.p-top-about__link {
		display: block;
	}

	.p-top-about__img {
		width: 100%;
		aspect-ratio: 1; /* XD: PC 380×380・SP 162×162 */
		border-radius: var(--r-md);
		object-fit: cover;
	}

	.p-top-about__label {
		margin-top: var(--top-about-label-gap);
		font-size: var(--fs-about-label);
		font-weight: 500;
		line-height: var(--lh-about-label);
	}

	/* 地図は高さ 0 の項目から絶対配置する（周りの並びと次のセクションの位置を動かさない） */
	.p-top-about__map {
		position: relative;
		grid-column: 1 / -1;
		height: 0;
	}

	.p-top-about__map-inner {
		position: absolute;
		top: 0;
		right: var(--top-about-map-x);
		width: var(--top-about-map-w);
		margin-top: var(--top-about-map-y);
	}

	.p-top-about__map-img {
		width: 100%;
	}

	.p-top-about__fukuoka {
		position: absolute;
		top: calc(236 / 611 * 100%);  /* XD: 地図の上端から 236（高さ 611） */
		left: calc(303 / 559 * 100%); /* XD: 地図の左端から 303（幅 559） */
		color: var(--c-white);
		font-family: var(--font-en);
		font-size: var(--fs-map-label);
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-none);
	}

	/* hover の下線（段 A のカード・サイトマップと同じ書き方）: News・Concept のカード・About の写真リンク */
	@media (hover: hover) {
		.p-top-news__title:hover,
		.p-top-news__more:hover,
		.p-top-concept__card:hover .p-top-concept__title,
		.p-top-about__link:hover .p-top-about__label {
			text-decoration: underline;
			text-decoration-thickness: var(--bw);
			text-underline-offset: var(--underline-offset);
		}
	}

	/* ---------- 施工対応エリア: 紙の枠 ---------- */
	.p-top-area {
		padding-block: var(--top-area-pt) var(--top-area-pb);
	}

	.p-top-area__box {
		padding: var(--top-area-box-pt) var(--sp-5) var(--top-area-box-pb);
	}

	.p-top-area__title {
		font-size: var(--fs-area-title);
		font-weight: 700;
		line-height: var(--lh-area-title);
	}

	.p-top-area__text {
		max-width: var(--top-area-text-w);
		margin: var(--top-area-title-gap) auto 0;
		font-size: var(--fs-area-text);
		font-weight: 500;
		line-height: var(--lh-area-text);
		word-break: auto-phrase; /* 文節の切れ目で折る（地名の途中で折らない。対応していないブラウザは通常の折り返し） */
	}

	/* ---------- Instagram: 紙の背景・手書き英字の無い見出し・3 列（SP 3 行 / PC 1 行） ---------- */
	.p-top-instagram {
		--fs-h2: var(--fs-h2-insta);
		--head-lead-x: var(--top-insta-lead-x);
		--head-lead-gap: var(--top-insta-lead-gap);
		padding-block: var(--top-insta-pt) var(--top-insta-pb);
	}

	.p-top-instagram__list {
		margin-top: var(--top-insta-list-gap);
	}

	/*
	 * フィード（プラグイン Smash Balloon Instagram Feed の出力: #sb_instagram > #sbi_images > .sbi_item > .sbi_photo_wrap > a.sbi_photo > img）。
	 * 件数（PC 3 件・画面幅 480 未満 9 件）・列数（3 列）はプラグインの設定、ここでは XD の間・縦横比・角丸だけを当てる。
	 * 件数の切り替えはプラグインが画面幅 480 で行う（固定）ので、480〜767 は 3 件（1 行）になる。9 件にそろえて 768 以上で隠す作りにすると、PC で隠した 6 件の写真（約 40 万バイト）も読まれるため採らない（2026-09-28 部長判断）
	 * プラグインの CSS は inc/assets.php でレイヤー plugins（layout より下）に入れてあるので、ここの規則は詳細度にかかわらずプラグインの規則に勝つ。
	 * 格子にはクラスが無い（ID だけ）ので #sbi_images で指す。プラグインの上下の余白 12 は 0 にする（間は XD の --top-insta-col-gap だけ）
	 */
	.p-top-instagram #sbi_images {
		gap: var(--top-insta-col-gap);
		padding: 0;
	}

	.p-top-instagram .sbi_item {
		border-radius: var(--top-insta-radius); /* 角はプラグインの overflow: hidden で切れる */
	}

	/* 1 マスの高さは XD の縦横比（PC 390×487 / SP 3:4）で決める */
	.p-top-instagram .sbi_photo_wrap {
		aspect-ratio: var(--top-insta-ratio);
	}

	/*
	 * a.sbi_photo は枠（.sbi_photo_wrap）いっぱいに重ねる。プラグインの JS はこの style に高さ（設定の縦横比 1:1 から計算した px）を直書きし、
	 * style の直書きは CSS で上書きできないので、上下の最小・最大を枠の 100% に揃えて使われる高さを枠に合わせる
	 */
	.p-top-instagram .sbi_photo {
		position: absolute;
		inset: 0;
		min-height: 100%;
		max-height: 100%;
	}

	/* 写真はマスいっぱいに cover（object-fit: cover と幅 100% はプラグインのまま。高さはプラグインの inherit＝直書きの px を 100% に替える） */
	.p-top-instagram .sbi_photo img {
		height: 100%;
	}

	.p-top-instagram__more {
		margin-top: var(--top-insta-more-gap);
	}

	/* ---------- Contact ---------- */
	.p-top-contact {
		--head-lead-x: var(--top-contact-lead-x);
		padding-block: var(--top-contact-pt) var(--top-contact-pb);
	}

	.p-top-contact__buttons {
		margin-top: var(--top-contact-list-gap);
	}

	/* ================= PC ================= */
	@media (min-width: 768px) {
		/* Blog: カルーセルをやめて 3 列（33-slider.css の c-carousel--grid-pc。矢印は u-sp-only で消える）。SP の画面の端までの広げを戻す */
		.p-top-blog__carousel {
			margin-inline: 0;
		}

		.p-top-line__banner {
			grid-template-columns: 572fr 628fr; /* XD: 画像 572＋緑 628 */
			margin-inline: 0;
		}

		.p-top-line__img {
			height: 100%;
			object-fit: cover;
		}

		.p-top-line__body {
			border-radius: 0 var(--r-md) var(--r-md) 0; /* XD: 右 2 隅 r10 */
		}

		/*
		 * Concept: XD（1920）の構図を画面幅に比例させ、どの幅でもカードを 4 枚見せる（先方修正 2026-09-27）。寸法は 00-tokens.css の --top-concept-*（100cqi × XD の値 / 1920）。
		 * 基準カード（2 枚目）を XD の x=490 の比に置く。無限ループなので 1 枚目（実カード）が左で 7/1920 切れ、4 枚目の右端が画面の右端に来る（XD: x=-7 / 490 / 988 / 1485）。
		 * マークアップの c-carousel--center（SP の 2 枚目中央）は残し、基準位置・丸の大きさ・丸の位置をここで差し替える。100cqi の基準はこのセクション（スクロールバーを含まない幅）
		 */
		.p-top-concept {
			container-type: inline-size;
		}

		.p-top-concept__carousel {
			--carousel-offset: var(--top-concept-x2);
			--arrow-lg: var(--top-concept-arrow);
			--chevron-lg: var(--top-concept-chevron);
			--chevron-stroke-lg: var(--top-concept-chevron-stroke);
		}

		/* 丸の中心を XD の位置の比に置く（前へ: 左端から 480.5 / 次へ: 右端から 489.5）。高さは SP と同じ画像の下端 */
		.p-top-concept__prev {
			left: calc(var(--top-concept-prev-cx) - var(--carousel-arrow-size) / 2);
		}

		.p-top-concept__next {
			right: calc(var(--top-concept-next-cx) - var(--carousel-arrow-size) / 2);
		}

		/*
		 * About の地図: 3 行目の空いた 3 列目から、右端を画面の右端 − 40（XD: 1880）まで伸ばす。
		 * 伸ばす量 = 画面とコンテナの差の半分 − 40（上限 320）。幅は 559 か「列幅＋伸ばす量」の小さい方（狭い画面では 3 列目に収める）
		 */
		.p-top-about__map {
			--map-bleed: min(var(--top-about-map-bleed), max(0px, (100cqi - var(--w-content)) / 2 - var(--gutter)));
			--map-w: min(var(--top-about-map-w), (min(100cqi - var(--gutter) * 2, var(--w-content)) - var(--top-about-col-gap) * 2) / 3 + var(--map-bleed));
			grid-column: auto;
		}

		.p-top-about__map-inner {
			right: calc(var(--map-bleed) * -1);
			width: var(--map-w);
		}

		.p-top-about__fukuoka {
			font-size: min(var(--fs-map-label), var(--map-w) * 32 / 559); /* XD: Fukuoka 32px ÷ 地図の幅 559（地図が縮む幅では比例して縮める） */
		}

		.p-top-area__title {
			text-align: center;
		}

		/* Instagram: 複数画像（カルーセル）の印をプラグインの位置と大きさ（右上 12・24px。1 マスが狭いと 8・18px）から XD の位置と大きさ（白）に替える。SP はプラグインのまま */
		.p-top-instagram .fa-clone {
			top: var(--top-insta-multi-y);
			right: var(--top-insta-multi-x);
			width: var(--top-insta-multi);
			height: var(--top-insta-multi);
			color: var(--c-white);
		}
	}
}