/* ==========================================================================
   wa-press / ichimai.css — 一枚（スクロールなし）
   --------------------------------------------------------------------------
   画面がどんな寸法でも、1画面に収めきる。スクロールを起こさない。

   難しいのは「収める」ことそのものではなく、
   縦長・横長・低い画面のどれでも版面として成立させること。
   ここでやっていることは4つ。

     1. 高さの単位を dvh にする
        iOS の Safari はスクロールでツールバーが伸縮し、vh がずれる。
        dvh（動的ビューポート）なら実際に見えている高さに追従する。
        未対応環境には svh → vh の順に落とす。

     2. 縦書きの器を画面の高さに結ぶ
        --wa-fit-space を dvh で与えると、tategaki.js が実測して
        字の大きさを合わせる。画面が低くなれば字も小さくなる。

     3. 画面が低いときは縦組みを諦める
        横向きのスマートフォンでは行長が取れない。
        読めないものを見せるより、素直に横組みへ降りる。

     4. セーフエリアを避ける
        iPhone のノッチとホームバーの領域に文字を置かない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スクロールを起こさない
   -------------------------------------------------------------------------- */

html:has(body.wa-ichimai-page),
body.wa-ichimai-page {
	block-size: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

/* :has 未対応の保険。body 側だけでもスクロールは止まる */
body.wa-ichimai-page {
	position: fixed;
	inset: 0;
}

.wa-ichimai {
	block-size: 100vh;   /* 古い環境 */
	block-size: 100svh;  /* ツールバーが出ている状態を基準に */
	block-size: 100dvh;  /* 実際に見えている高さに追従（最優先） */

	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	overflow: hidden;

	padding-block-start: env(safe-area-inset-top);
	padding-block-end: env(safe-area-inset-bottom);
	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. 舞台 — 残り全部を使って中央に組む
   -------------------------------------------------------------------------- */

.wa-ichimai__stage {
	min-block-size: 0;   /* grid 項目が内容で膨らむのを止める */
	display: grid;
	place-items: center;
	inline-size: 100%;
	padding-block: clamp(0.5rem, 2vh, 2rem);
}

.wa-ichimai__inner {
	inline-size: 100%;
	align-items: center;
}

/*
   縦書きの器を画面の高さに結ぶ。
   ヘッダーと足元、上下の余白を引いた残りが、そのまま行長の上限になる。
*/
.wa-ichimai {
	--wa-fit-space: min(58dvh, 30rem);
	--wa-fit-min: 15px;
}

.wa-ichimai__title {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;
	letter-spacing: 0.2em;
	line-height: 1.35;
	margin-block: 0;

	/* 標題だけは少し大きく。画面の高さに素直に連動させる */
	font-size: clamp(1.5rem, 6.2dvh, 3.25rem);
}

/*
   標題の右に細い朱の縦罫を添える。会社概要の柱と同じ約束にして、
   ページが変わっても同じ体系に見えるようにする。

   縦組みの中では block 軸が横向き（右→左）になるので、
   「右辺の罫」は border-block-start で引く。
*/
.wa-ichimai__title {
	position: relative;
	padding-block-start: 1.1em;
}

.wa-ichimai__title::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0.1em;
	block-size: 0;
	border-block-start: 2px solid var(--wp--preset--color--accent);
}

.wa-ichimai__content {
	min-inline-size: 0;
	flex: 1 1 auto;
}

.wa-ichimai__foot {
	padding-block: clamp(0.5rem, 1.6vh, 1.25rem);
}

/* --------------------------------------------------------------------------
   3. 中身の寸法も画面に連動させる
   -------------------------------------------------------------------------- */

.wa-ichimai .wa-contact {
	margin-block-end: 0;
	inline-size: 100%;
}

.wa-ichimai .wa-contact__note {
	font-size: clamp(0.95rem, 2.3dvh, 1.375rem);
	max-inline-size: min(26rem, 46dvh);
}

.wa-ichimai .wa-contact__mail {
	font-size: clamp(0.95rem, 2.4dvh, 1.375rem);
	margin-block: 0.5em;
	padding-block: 0.6em;
}

.wa-ichimai .wa-contact__content p,
.wa-ichimai__content p {
	margin-block: 0.5em;
}

/* --------------------------------------------------------------------------
   4. 画面が低いときは縦組みを諦める
   --------------------------------------------------------------------------
   横向きのスマートフォン（高さ 430px 前後）では行長が取れない。
   縦組みのまま字だけ小さくしても読めないので、横組みへ降りる。
   -------------------------------------------------------------------------- */

@media (max-height: 30rem) {
	.wa-ichimai__title {
		writing-mode: horizontal-tb;
		font-size: clamp(1.25rem, 5.5dvh, 2rem);
		letter-spacing: 0.12em;
		padding-block-start: 0;
		padding-block-end: 0.4em;
	}

	/* 横組みに降りたら、罫も見出しの下に横で引く */
	.wa-ichimai__title::after {
		inset-block: auto 0;
		inset-inline: 0 auto;
		inline-size: 3rem;
		block-size: 0;
		border-block-start: 2px solid var(--wp--preset--color--accent);
	}

	.wa-ichimai .wa-contact__note {
		writing-mode: horizontal-tb;
		max-inline-size: 34rem;
		font-size: clamp(0.8rem, 4dvh, 1rem);
	}

	.wa-ichimai__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(0.35rem, 1.5dvh, 0.75rem);
	}

	/* 低い画面では連絡先も一列に積む。横並びにすると2段に折れて溢れる */
	.wa-ichimai .wa-contact {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(0.35rem, 1.5dvh, 0.75rem);
		inline-size: 100%;
	}

	.wa-ichimai .wa-contact > .wp-block-group {
		inline-size: 100%;
		max-inline-size: 40rem;
	}

	.wa-ichimai .wa-contact__mail {
		font-size: clamp(0.85rem, 4dvh, 1.1rem);
		margin-block: 0.3em;
		padding-block: 0.4em;
	}

	.wa-ichimai__foot,
	.wa-ichimai__stage {
		padding-block: clamp(0.25rem, 1dvh, 0.75rem);
	}

	/*
	   低い画面ではヘッダーと足元を極限まで詰める。

	   横向きのスマートフォンは高さ 390px しかなく、
	   通常のヘッダー（119px）だけで画面の三割を使ってしまう。
	   本文に渡せる高さを増やすため、ここでは寸法を全部落とす。
	*/
	.wa-ichimai__foot {
		padding-block: 0.2rem;
	}

	.wa-ichimai__foot p {
		font-size: 0.6875rem;
		margin-block: 0;
	}

	/* 本文の寸法も落とす。読める下限は保つ */
	.wa-ichimai .wa-contact__note {
		font-size: clamp(0.75rem, 3.4dvh, 0.95rem);
		line-height: 1.7;
	}

	.wa-ichimai__content p {
		margin-block: 0.25em;
		line-height: 1.7;
	}

	.wa-ichimai__content .has-sho-font-size {
		font-size: 0.6875rem;
	}
}

/* --------------------------------------------------------------------------
   5. 幅が狭いとき（縦向きのスマートフォン）
   --------------------------------------------------------------------------
   横に3列（標題・縦書きの一文・連絡先）は入らない。
   標題と一文は縦書きのまま右に寄せ、連絡先はその下に置く。
   -------------------------------------------------------------------------- */

@media (max-width: 700px) and (min-height: 30rem) {
	/*
	   標題は右の柱のまま。その左に、縦書きの一文と連絡先を上下に積む。
	   一文と連絡先を横に並べると、幅 390px では連絡先が細い柱になって
	   何行にも折れ、画面から溢れる。
	*/
	.wa-ichimai {
		--wa-fit-space: min(34dvh, 21rem);
	}

	.wa-ichimai__inner {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: clamp(0.75rem, 3vw, 1.5rem);
	}

	.wa-ichimai .wa-contact {
		flex-wrap: wrap;
		row-gap: clamp(0.75rem, 2.5dvh, 1.5rem);
		inline-size: 100%;
	}

	.wa-ichimai .wa-contact > .wp-block-group {
		min-inline-size: 0;
		flex: 1 1 100%;
	}

	.wa-ichimai .wa-contact__note {
		max-inline-size: min(19rem, 32dvh);
		font-size: clamp(0.85rem, 1.9dvh, 1.05rem);
	}

	.wa-ichimai .wa-contact__mail {
		font-size: clamp(0.85rem, 2dvh, 1.05rem);
	}

	.wa-ichimai__title {
		font-size: clamp(1.35rem, 4.6dvh, 2.25rem);
	}
}