@charset "UTF-8";
/* =========================================================
   Onitaiji Entertainment テーマ 基本スタイル
   ※デザイン実装前の土台。トークン（色・フォント）は確定値、
     レイアウトはプレビュー用の最小限のみ。
   デザイン確定値:
   - 背景: 白〜生成りの和紙 #FFFFFF〜#F5F1E8
   - 文字: 墨色 #0d0015
   - 差し色: 朱 #F23C4B ／ 金 #E6B422（鬼が登場する場面のみ）
   - 見出し: 筆文字系 ／ 本文: 明朝
========================================================= */

:root {
	--c-white: #ffffff;
	--c-washi: #f5f1e8;
	--c-sumi: #0d0015;
	--c-shu: #f23c4b;
	--c-gold: #e6b422;
	--font-serif: "Noto Serif JP", serif;
	--font-brush: "Yuji Syuku", serif; /* 筆文字（仮）。デザイン実装時に調整 */
	--font-sans: "Noto Sans JP", sans-serif;
	--width-content: 1200px;
}

/* ---- リセット（最小限） ---- */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* SPでのみ改行させる<br>（PCでは無効。ブレークポイントは他のSP指定と同じ768px） */
.u-sp-br {
	display: none;
}

@media (max-width: 768px) {
	.u-sp-br {
		display: inline;
	}
}

/* スクリーンリーダー用（視覚的に非表示） */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- ベース ---- */
body {
	background-color: var(--c-washi);
	color: var(--c-sumi);
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-brush);
	font-weight: 400;
	line-height: 1.5;
}

.container {
	max-width: var(--width-content);
	margin: 0 auto;
	padding: 60px 20px;
}

.section-title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 40px;
}

.section-btn {
	text-align: center;
	margin-top: 40px;
}

.btn {
	display: inline-block;
	padding: 14px 48px;
	border: 1px solid var(--c-sumi);
	font-family: var(--font-serif);
	transition: opacity 0.3s;
}

.btn:hover {
	opacity: 0.7;
}

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

/* ---- ローディング（デザイン: 00-load.png・TOP初回訪問時のみ3秒表示） ---- */
.loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 40px);
	background-color: #f0ebe0; /* デザインの和紙色 */
	/* 退場: 画面ごと下から上へスライドしてTOPを見せる（2026-08-02指示） */
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.9s;
}

body.is-loaded .loading {
	transform: translateY(-100%);
	visibility: hidden;
}

/* 再訪問者にはロード画面自体を出さない（判定はheader.phpのインラインスクリプト） */
.no-loading .loading {
	display: none;
}

/* 登場: 鬼とドットをふわっと表示（2026-08-02指示） */
.loading__oni,
.loading__dots {
	opacity: 0;
	transform: translateY(24px);
	animation: loading-fadein 1.1s ease-out 0.15s forwards;
}

.loading__dots {
	animation-delay: 0.45s;
}

@keyframes loading-fadein {
	to {
		opacity: 1;
		transform: none;
	}
}

.loading__oni {
	width: min(55vw, 555px);
	height: auto;
}

/* ドットパルス（グレー・2026-08-02指示） */
.loading__dots {
	display: flex;
	gap: 12px;
}

.loading__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #9b958c; /* グレー */
	animation: loading-dot-pulse 1s infinite ease-in-out;
}

.loading__dot:nth-child(2) {
	animation-delay: 0.2s;
}

.loading__dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes loading-dot-pulse {
	0%, 60%, 100% {
		transform: scale(1);
		opacity: 0.45;
	}
	30% {
		transform: scale(1.6);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loading__dot {
		animation: none;
	}

	/* ふわっと登場・スライド退場も無効化（即時表示・フェードのみ） */
	.loading__oni,
	.loading__dots {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.loading {
		transition: opacity 0.4s, visibility 0s 0.4s;
	}

	body.is-loaded .loading {
		transform: none;
		opacity: 0;
	}
}

/* ---- ヘッダー / グローバルナビ（デザイン: navi.png・カンバス1440x100で採寸） ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #000000;
}

/* 左右の余白51px（1440px基準）。バー高さはデザイン100pxの2/3（2026-08-03指示）
   ※SP時は従来どおり64px（clampの下限で維持） */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: clamp(64px, 4.6vw, 67px);
	padding: 0 clamp(16px, 3.5vw, 51px);
}

/* ロゴは幅216px（1440pxの15%）。鬼の顔のみ着色、社名は白 */
.site-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
	transition: opacity 0.3s;
}

.site-header__logo:hover {
	opacity: 0.75;
}

/* ロゴはバー高さ2/3化に合わせて縮小（高さ約58px＝バー67pxに収まる幅184px） */
.site-header__logo img {
	display: block;
	width: clamp(150px, 12.8vw, 184px);
	height: auto;
	padding: 4px 0;
}

.g-nav {
	margin-left: auto;
}

/* 項目間は23px（1440px基準）、文字サイズ19.5px */
.g-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 23px);
	font-size: clamp(13px, 1.35vw, 20px);
	letter-spacing: 0.02em;
	/* 紙芝居3枚目の結び文言と同じAdobe Fontsの筆文字（2026-08-06指示）。
	   読み込み失敗時はサイト標準の筆文字（Yuji Syuku）で表示 */
	font-family: "ta-fuga-fude", var(--font-brush);
	font-weight: 400;
	font-style: normal;
}

.g-nav .menu-item > a {
	display: block;
	padding: 4px 2px;
	color: var(--c-white);
	transition: opacity 0.3s;
}

.g-nav .menu-item > a:hover {
	opacity: 0.65;
}

/* 現在地の項目は朱でうっすら示す（デザインに指定はないがナビの定石として付与） */
.g-nav .current-menu-item > a,
.g-nav .current_page_item > a {
	color: #f0a3a3;
}

/* ハンバーガーボタン（SPでのみ表示） */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	margin-inline: auto;
	background-color: var(--c-white);
	transition: transform 0.35s, opacity 0.2s;
}

/* 開いている間は×印に変形 */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.35s;
}

.nav-overlay.is-open {
	opacity: 1;
}

/* ---- フッター（デザイン: footer.png） ---- */
.site-footer {
	background-color: #ede4da;
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: var(--c-sumi);
	text-align: center;
	padding: clamp(40px, 5vw, 80px) 0 clamp(24px, 3vw, 48px);
}

.site-footer__inner {
	width: min(1315px, 88%);
	margin-inline: auto;
}

/* ナビ（項目間に縦罫）とその上下の横罫 */
.footer-nav {
	border-top: 1px solid rgba(13, 0, 21, 0.55);
	padding-top: clamp(18px, 2.6vw, 40px);
}

.footer-nav .menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: clamp(13px, 1.55vw, 24px);
	letter-spacing: 0.08em;
}

.footer-nav .menu-item {
	position: relative;
	padding: 0 clamp(12px, 2.2vw, 34px);
}

.footer-nav .menu-item + .menu-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.5em;
	background-color: rgba(13, 0, 21, 0.5);
}

.footer-nav a {
	transition: opacity 0.3s;
}

.footer-nav a:hover {
	opacity: 0.65;
}

/* 連絡先3列（フッター専用。TOPのお問い合わせセクションからは2026-08-04に削除） */
.contact-list--footer {
	/* 上余白は従来 .contact-list 側で指定していた値をそのまま引き継いでいる */
	margin: clamp(28px, 3.6vw, 56px) 0 clamp(20px, 2.8vw, 44px);
	padding-bottom: clamp(24px, 3.4vw, 52px);
	border-bottom: 1px solid rgba(13, 0, 21, 0.55);
}

.contact-list--footer .contact-list__icon {
	width: clamp(42px, 5.2vw, 80px);
}

.contact-list--footer .contact-list__label {
	font-size: clamp(10px, 1.15vw, 18px);
}

.contact-list--footer .contact-list__value {
	font-size: clamp(13px, 1.6vw, 25px);
}

.contact-list--footer .contact-list__note {
	font-size: clamp(9px, 1vw, 16px);
}

.site-footer__copyright {
	font-size: clamp(11px, 1.3vw, 20px);
	letter-spacing: 0.04em;
}

/* ---- ページ共通ヘッダー ---- */
.page-header {
	padding: 80px 20px 0;
	text-align: center;
}

.page-header__title {
	font-size: 2.2rem;
}

/* ---- TOP: フルページ紙芝居（FV＋紙芝居3枚・1スクロール1画面送り） ----
   PC・SP共通（2026-07-31指示でSPにも適用）。JS（main.js）が html に .fp-on を
   付与し、各sectionを重ねて translate3d で上下スライドさせる（参考サイトと同方式）。
   JS無効時・prefers-reduced-motion時は .fp-on が付かず通常の縦積みレイアウトになる */
.fp {
	position: relative;
}

.fp-on .fp {
	height: 100vh;
	height: 100svh;
	overflow: visible;
}

.fp-on .fp > section {
	position: absolute;
	inset: 0;
	height: 100%;
	min-height: 0;
	transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* ---- TOP: FV（背景=デザイン案C_Ver07・ロゴ別画像の分離構成） ---- */
.fv {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 480px;
	background-color: #f0ebe0; /* デザイン画像から採色した和紙色 */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fv__bg {
	position: absolute;
	inset: 0;
	background: url(../img/top/fv-bg.webp) center / cover no-repeat;
}

/* ロゴ: 画面の上下左右中央（.fvのflexセンタリング） */
.fv__logo {
	position: relative;
	margin: 0;
	line-height: 0;
}

.fv__logo img {
	width: min(80vw, 560px);
	height: auto;
}

/* スクロール誘導（2026-08-03指示） */
.fv__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 4vh, 46px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--c-sumi);
}

.fv__scroll-text {
	font-family: var(--font-serif);
	font-size: clamp(10px, 1vw, 13px);
	font-weight: 500;
	letter-spacing: 0.28em;
	/* letter-spacingは最終文字の右にも余白が付くため、その分を戻して見た目の中央を揃える */
	text-indent: 0.28em;
	opacity: 0.8;
}

.fv__scroll-line {
	position: relative;
	width: 1px;
	height: clamp(38px, 7vh, 68px);
	background-color: rgba(13, 0, 21, 0.22);
	overflow: hidden;
}

/* 線の中を墨色の帯が上から下へ繰り返し流れる */
.fv__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 45%;
	background-color: var(--c-sumi);
	animation: fv-scroll-flow 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes fv-scroll-flow {
	0% {
		transform: translateY(-100%);
	}
	100% {
		/* 帯の高さ45%基準で線の下端（222%）まで抜けきる */
		transform: translateY(222%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv__scroll-line::after {
		animation: none;
	}
}

@media (max-width: 767px) {
	.fv {
		/* 紙芝居1枚目との間延び防止のため縮める（2026-07-30指示） */
		height: 80vh;
		height: 80svh;
		min-height: 360px;
	}

	/* SP専用の背景素材に差し替え（Material/background-fv-sp.png・2026-08-02指示。PC版は対象外） */
	.fv__bg {
		background-image: url(../img/top/fv-bg-sp.webp);
	}
}

/* ---- TOP: 紙芝居（デザイン: 02-top-fv02A.png〜04-top-fv04.png） ---- */
.story__slide {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 480px;
	overflow: hidden;
	background-color: #f0ebe0;
}

/* デザイン画像を「和紙背景／四隅の装飾／右側のイラスト」の3種に分解して重ねる（2026-08-04指示）。
   従来は画像1枚を contain で表示していたため、画面が3:2より横長だと左右に余白が出ていた。
   和紙だけを cover で全画面に敷き、装飾は画面の四隅、イラストは縦横比を保って右端に置くことで、
   どの画面比率でも余白なしに表示する。 */
.story__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* 装飾・イラストの重ね置き場（テキストより下、和紙より上） */
.story__art {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* 各レイヤーは高さ%（＝画面高に対する比率）で指定し、幅は自動＝縦横比を維持する。
   高さの%はデザイン画像（1536x1024）での各パーツの高さ比率をそのまま使用。
   ※リセットの img { max-width:100% } が効くと縮んでしまうため打ち消す */
.story__art img {
	position: absolute;
	width: auto;
	max-width: none;
}

/* 装飾: 画面の四隅に固定 */
.story__deco--tl { top: 0; left: 0; }
.story__deco--tr { top: 0; right: 0; }
.story__deco--bl { bottom: 0; left: 0; }
.story__deco--br { bottom: 0; right: 0; }

/* メインイラスト: 縦横比を保ったまま画面右端へ（デザインでの位置を踏襲） */
.story__illust {
	top: 0;
	right: 0;
	height: 100%;
}

/* --- 1枚目（02-top-fv02）: 武者と鬼 --- */
.story__slide--1 .story__deco--tl { height: 37.11%; } /* 380/1024 */
.story__slide--1 .story__deco--br { height: 19.73%; } /* 202/1024 */

/* --- 2枚目（03-top-fv03）: 現代の邪気 --- */
.story__slide--2 .story__deco--tl { height: 26.46%; } /* 271/1024 */
.story__slide--2 .story__deco--br { height: 23.44%; } /* 240/1024 */

/* --- 3枚目（04-top-fv04）: 笑う鬼 --- */
.story__slide--3 .story__deco--tl { height: 38.77%; } /* 397/1024 */
.story__slide--3 .story__deco--bl { height: 64.84%; } /* 664/1024 */
.story__slide--3 .story__deco--tr { height: 43.26%; } /* 443/1024 */
.story__slide--3 .story__deco--br { height: 62.89%; } /* 644/1024 */

/* 3枚目の鬼だけは画像の端に接していないため、デザインの余白分だけ内側に置く */
.story__slide--3 .story__illust {
	top: 2.73%;    /* 28/1024 */
	height: 92.77%; /* 950/1024 */
}

/* 画像と同じ3:2の枠を中央に置き、縦書きテキストの%指定を画像基準に合わせる。
   （枠がないと、左右に余白ができたときにテキストだけが画像からずれてしまう） */
.story__inner {
	position: absolute;
	inset: 0;
	margin: auto;
	aspect-ratio: 3 / 2;
	max-width: 100%;
	max-height: 100%;
}

.story__slide--1 .story__bg {
	background-image: url(../img/top/story-01-washi.webp);
}

.story__slide--2 .story__bg {
	background-image: url(../img/top/story-02-washi.webp);
}

.story__slide--3 .story__bg {
	background-image: url(../img/top/story-03-washi.webp);
}

/* テキストは背景画像から除去済み。HTMLの実テキスト（縦書き）を重ねて表示する
   位置・サイズはデザイン画像（1536x1024）の文字組を基準に算出 */
.story__text {
	position: absolute;
	writing-mode: vertical-rl;
	font-family: var(--font-brush);
	/* 縦書きの列の長さは画面の高さに追従させる（背景が高さ基準で伸縮するため） */
	/* 2026-08-13指示: 紙芝居1〜3枚目の導入文を元の1.2倍に拡大（15→18 / 2.9vh→3.48vh / 30→36） */
	font-size: clamp(18px, 3.48vh, 36px);
	line-height: 2.3;
	letter-spacing: 0.12em;
	color: var(--c-sumi);
	white-space: nowrap;
}

.story__text p + p {
	margin-block-start: 0.5em;
}

/* 1枚目: 先頭列の右端=画面の42%（デザインの文字組位置） */
.story__slide--1 .story__text {
	top: 13%;
	right: 58%;
}

/* 2枚目: 先頭列の右端=画面の34%（デザインの文字組位置） */
.story__slide--2 .story__text {
	top: 13%;
	right: 66%;
}

/* 3枚目: 導入文（小・右）＋結びの筆文字（大・左）の2ブロック構成（デザイン=右端49%・上端12%） */
.story__slide--3 .story__text {
	top: 12%;
	right: 51%;
}

/* 導入文の文字サイズは1・2枚目と統一する（2026-08-06指示）。
   .story__text の指定をそのまま継承させるため、ここではfont-sizeを指定しない
   （結びの筆文字だけは下の .story__text-main で個別に指定） */
.story__slide--3 .story__text p {
	line-height: 2;
}

.story__slide--3 .story__text .story__text-main {
	/* Adobe Fonts（Typekit kitId: ufq1fir）の筆文字。ローダーは inc/enqueue.php
	   読み込み失敗時はサイト標準の筆文字（Yuji Syuku）で表示
	   2026-08-06: sicshinyubi-sumojinku → ta-fuga-fude に変更（クライアント支給コード） */
	font-family: "ta-fuga-fude", var(--font-brush);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(24px, 7vh, 72px);
	line-height: 1.3;
	letter-spacing: 0.04em;
	margin-block-start: 0.15em;
}

/* 結びの「鬼」1文字だけ大きく（デザイン準拠） */
.story__text-oni {
	font-size: 1.5em;
}

/* SP: 各スライドとも「上半分＝背景イラスト／下半分＝縦書きテキスト」の上下2分割構成
   （2026-08-02指示。白の半透明オーバーレイは廃止し、テキストはイラストに重ねない） */
@media (max-width: 767px) {
	/* SP: 画像は上半分に別途配置するため、PC用の3:2枠は解除しスライド全体を基準にする */
	.story__inner {
		aspect-ratio: auto;
		max-width: none;
		max-height: none;
	}

	/* SPはSP専用の1枚画像（story-0X-sp.webp）を上半分に敷くため、
	   PC用のレイヤー分解（和紙＋装飾＋イラスト）は使わない（2026-08-04） */
	.story__art {
		display: none;
	}

	/* 背景イラストは画面の上半分いっぱいに表示（3スライド共通）
	   画像はSP用の正方形トリミング版（Material/0X-top-fvXX-background-sp.png・2026-08-02支給） */
	.story__slide--1 .story__bg,
	.story__slide--2 .story__bg,
	.story__slide--3 .story__bg {
		inset: 0 0 auto 0;
		height: 50%;
		background-size: cover;
		background-position: center;
	}

	.story__slide--1 .story__bg {
		background-image: url(../img/top/story-01-sp.webp);
	}

	.story__slide--2 .story__bg {
		background-image: url(../img/top/story-02-sp.webp);
	}

	.story__slide--3 .story__bg {
		background-image: url(../img/top/story-03-sp.webp);
	}

	/* テキスト共通: 画面の下半分に白背景なしで配置（中央揃え）
	   改行位置はPC版と同じ＝<br>のみで折り返す（white-space: nowrapを維持・2026-08-02指示）
	   フォントサイズは従来の1.5倍（2026-08-02指示） */
	.story__text {
		top: 54%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		height: auto;
		padding: 0;
		/* 2026-08-13指示: 元の1.2倍に拡大（18→21.6 / 5.25vw→6.3vw / 19.5→23.4） */
		font-size: clamp(21.6px, 6.3vw, 23.4px);
		line-height: 2.05;
		letter-spacing: 0.08em;
		background-color: transparent;
	}

	.story__slide--1 .story__text,
	.story__slide--2 .story__text,
	.story__slide--3 .story__text {
		top: 54%;
		left: 50%;
		right: auto;
		height: auto;
	}

	.story__slide--3 .story__text {
		padding: 0;
	}

	/* --- 画面高が低い端末での文字切れ対策（2026-08-03指示） ---
	   縦書きのため文字列は下方向に伸びる。画面高が低い端末（アプリ内ブラウザ等）では
	   下端からはみ出して切れるため、テキストの下に必ず100pxの余白を確保し、
	   その残り高さに収まるよう文字サイズを自動的に縮小させる。
	   テキストの開始位置は54%なので、使える高さは (46svh - 100px)。
	   各スライドの係数 = 最長行の文字数 × 1文字あたりの送り（字送り込み）。
	   最小10pxの下限のみ設けている（極端に低い画面でも読める大きさを保つため）。
	   svh非対応ブラウザ向けに、直前の行で従来値のフォールバックを併記。 */
	.story__text {
		--story-text-h: calc(46svh - 100px);
		max-height: var(--story-text-h);
	}

	/* 1〜3枚目の導入文はすべて同じ文字サイズに統一する（2026-08-06指示）。
	   基準は最も行の長い1枚目（最長16文字＝鬼は邪気の象徴とされていました。→ 16 × 1.08em）。
	   3枚とも最も厳しい係数17.3に揃えるため、2・3枚目が下端からはみ出すことはない */
	.story__slide--1 .story__text,
	.story__slide--2 .story__text,
	.story__slide--3 .story__text p {
		/* 2026-08-13指示: 元の1.2倍に拡大（12→14.4 / 5.25vw→6.3vw / 19.5→23.4）
		   ※calc(…/17.3)は「画面高に収める上限」のため据え置き（低い画面でのはみ出し防止） */
		font-size: clamp(14.4px, 6.3vw, 23.4px);
		font-size: max(10px, min(clamp(14.4px, 6.3vw, 23.4px), calc(var(--story-text-h) / 17.3)));
	}

	/* 3枚目のみ、導入文と結びの2ブロックが画面幅375pxに収まるよう列間をわずかに詰める */
	.story__slide--3 .story__text p {
		line-height: 1.9;
	}

	/* 結びは最長9文字（形にする会社です。）。冒頭の「鬼」が1.5emで最も高くなる */
	.story__slide--3 .story__text .story__text-main {
		font-size: 28px;
		font-size: max(10px, min(28px, calc(var(--story-text-h) / 10.5)));
		line-height: 1.8;
	}

	.story__text p + p {
		margin-block-start: 1em;
	}
}

/* ---- TOP: 事業内容（デザイン: 05-top-service.png） ---- */
.top-service {
	background-color: #ede4da;
	/* 公式支給の背景素材（Material/background.webp・2026-08-01差し替え） */
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0;
}

/* 筆文字の大見出し＋朱の筆ストローク */
.section-title--brush {
	font-size: clamp(44px, 7.3vw, 112px);
	letter-spacing: 0.06em;
	margin-bottom: 0;
	line-height: 1.2;
}

.section-title__stroke {
	display: block;
	margin: -6px auto 48px;
	width: min(32vw, 460px);
	height: auto;
	/* 切り出した和紙地を背景に馴染ませる */
	mix-blend-mode: multiply;
}

/* 見出しを画像で掲載する場合（筆文字＋下の筆ストロークを1枚にした透過PNG）
   幅はデザイン基準（カンバス1536pxに対し708px=46%）。原寸を超える拡大はしない */
.section-title--img {
	margin: 0 auto clamp(20px, 2.6vw, 40px);
	line-height: 0;
}

/* 幅は各画像の原寸をデザインカンプ（カンバス1536px幅）の比率で割り出した値。
   原寸を超える拡大はしない。見出しごとに元画像の幅が異なるため個別指定する */
.section-title--img img {
	display: inline-block;
	width: min(46vw, 708px); /* 事業内容 708px */
	height: auto;
}

.section-title--img-works img   { width: min(46vw, 708px); }   /* 事例紹介 708px */
.section-title--img-profile img { width: min(52vw, 800px); }   /* 会社概要 800px */
.section-title--img-news img    { width: min(43.5vw, 668px); } /* お知らせ 668px */
.section-title--img-recruit img { width: min(57vw, 879px); }   /* 採用情報 879px（左右の墨飾り込み） */
.section-title--img-contact img { width: min(65.5vw, 1007px); }/* お問い合わせ 1007px（左右の墨飾り込み） */

/* 下層ページのタイトルはTOPの約77%（従来のテキスト見出し 86px / 112px の比率を踏襲し、
   下層ページ同士でタイトルの大きさが揃うようにする） */
.page-hero .section-title--img img         { width: min(35vw, 545px); }
.page-hero .section-title--img-works img   { width: min(35vw, 545px); }
.page-hero .section-title--img-news img    { width: min(33.5vw, 514px); }
.page-hero .section-title--img-recruit img { width: min(44vw, 677px); }
.page-hero .section-title--img-contact img { width: min(50.5vw, 776px); }
.page-hero .section-title--img-privacy img { width: min(54.5vw, 836px); } /* プライバシーポリシー 1086px（デザイン比70.7%×下層77%） */

/* minmax(0, 1fr)にしないと、折り返さない見出し（nobr-pc）が列幅を押し広げて
   3カードの幅が不揃いになる */
.top-service__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 40px);
}

.service-card {
	background-color: #eee6dd; /* デザインのカード地色 */
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(13, 0, 21, 0.12);
	padding: 28px 22px 24px;
	display: flex;
	flex-direction: column;
}

/* 番号・タイトルは下層の事業内容ページ（.service-row__num/__title）と同じ見た目に統一
   （2026-08-03指示） */
.service-card__head {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 22px);
	margin-bottom: 20px;
	/* タイトルの行数に関わらず3カードの見出しブロック高さを揃える（＝本文の開始位置を上揃えに） */
	min-height: clamp(52px, 5.9vw, 84px);
}

/* 朱の筆円（画像）＋HTML番号 */
.service-card__num {
	flex-shrink: 0;
	width: clamp(52px, 5.9vw, 84px);
	aspect-ratio: 1;
	background: url(../img/top/service-badge.webp) center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	font-family: var(--font-serif);
	font-size: clamp(20px, 2.4vw, 34px);
	font-weight: 600;
	font-style: italic;
}

.service-card__title {
	font-family: var(--font-serif);
	font-weight: 700;
	/* <br>で改行位置が固定されたため、下層ページ（.service-row__title）と完全に同サイズ */
	font-size: clamp(19px, 2.3vw, 32px);
	line-height: 1.45;
}

/* PCのTOPのみの調整（SP・下層ページは対象外・2026-08-03指示）
   ・3つの見出しを0.8倍に縮小（32px × 0.8 = 25.6px、下限も19px × 0.8 ≒ 15px）
   ・「プロモーション＆ブランディング」の<br>による強制改行を解除
     （カード幅に収まらない場合は語中で自然に折り返してよい） */
@media (min-width: 769px) {
	.service-card__title {
		font-size: clamp(15px, 1.84vw, 25.6px);
	}

	.service-card__title--nobr-pc br {
		display: none;
	}
}

.service-card__text {
	font-size: 15px;
	/* 3事業の説明文のみ太字を維持（2026-07-31指示） */
	font-weight: 500;
	line-height: 2;
	text-align: center;
	margin-bottom: 20px;
}

.service-card__ill {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-top: auto;
}

/* 朱の筆はけボタン（公式素材 button.webp＝透過PNG＋HTMLテキスト） */
.btn-brush {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(520px, 86vw);
	padding: 20px 40px;
	background: url(../img/common/button.webp) center / 100% 100% no-repeat;
	color: var(--c-white);
	font-family: var(--font-serif);
	font-size: clamp(16px, 1.6vw, 23px);
	font-weight: 500;
	letter-spacing: 0.18em;
	transition: opacity 0.3s;
}

.btn-brush:hover {
	opacity: 0.85;
}

/* ---- 事例紹介（デザイン: 06-top-works.png） ---- */
.top-works {
	background-color: #ede4da;
	/* 公式支給の背景素材（Material/background.webp・2026-08-01差し替え） */
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0;
}

.works-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.5vw, 22px);
	margin-bottom: clamp(24px, 2.6vw, 40px);
}

.works-tabs__btn {
	display: inline-block;
	padding: 10px 26px;
	border: 0;
	border-radius: 6px;
	background-color: #f6f1ea;
	box-shadow: 0 3px 10px rgba(13, 0, 21, 0.14);
	font-family: var(--font-serif);
	font-size: clamp(13px, 1.15vw, 17px);
	font-weight: 600;
	color: var(--c-sumi);
	cursor: pointer;
	transition: opacity 0.3s;
}

.works-tabs__btn:hover {
	opacity: 0.75;
}

/* アクティブタブ: 朱の筆はけ素材（button.webp）を地に敷く */
.works-tabs__btn.is-active {
	background: url(../img/common/button.webp) center / 100% 100% no-repeat;
	box-shadow: none;
	color: var(--c-white);
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 1.3vw, 20px);
}

.works-card {
	background-color: #f6f1ea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 14px rgba(13, 0, 21, 0.16);
	/* カテゴリ切替アニメーション（スライド移動・フェード） */
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}

.works-card.is-hidden {
	display: none;
}

/* 切替時: 消えるカード（短くフェードアウト） */
.works-card.is-leaving {
	opacity: 0;
	transform: scale(0.94);
	transition-duration: 0.18s, 0.18s;
	pointer-events: none;
}

/* 切替時: 現れるカードの初期状態（このクラスを外すとフェードイン） */
.works-card.is-entering {
	opacity: 0;
	transform: scale(0.94);
}

/* グリッドの高さ変化アニメーション（JSがインラインheightを付与した間だけ有効）
   overflow はカードの影を切らないよう、アニメーション中のみ隠す */
.works-grid {
	transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.works-grid.is-animating {
	overflow: hidden;
}

/* カード中身。外部リンクありは<a>、なしは<div>で出力される（2026-08-05・詳細ページ廃止） */
.works-card__body {
	display: block;
	transition: opacity 0.3s;
}

/* ホバーの反応はリンクのある事例だけに出す */
a.works-card__body:hover {
	opacity: 0.85;
}

.works-card__thumb {
	aspect-ratio: 420 / 218;
	overflow: hidden;
	background-color: var(--c-washi);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.works-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* カテゴリラベル: 画像とタイトルの間に表示（2026-08-05指示） */
.works-card__category {
	background-color: #830401;
	color: #ffffff;
	font-size: clamp(11px, 1vw, 14px);
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 6px 20px;
	margin: 0;
}

.works-card__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(15px, 1.35vw, 21px);
	line-height: 1.5;
	padding: 16px 20px 2px;
}

/* クライアント名は事例名の0.7倍のフォントサイズ（2026-08-03指示） */
.works-card__client {
	font-size: clamp(10.5px, 0.945vw, 14.7px);
	color: rgba(13, 0, 21, 0.75);
	padding: 0 20px 18px;
}

/* ---- TOP: 会社概要（デザイン: 07-top-profile.webp） ---- */
.top-company {
	background-color: #ede4da;
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0;
}

/* 見出し下のストロークは会社概要のみ幅が狭い（デザイン準拠） */
.section-title__stroke--company {
	width: min(24vw, 360px);
	margin-bottom: 40px;
}

/* テーブル・プロフィールを収める内側の幅（デザイン: セクション幅の約64%） */
.company-inner {
	width: min(1000px, 92%);
	margin-inline: auto;
}

.company-table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid rgba(13, 0, 21, 0.32);
}

.company-table th,
.company-table td {
	border: 1px solid rgba(13, 0, 21, 0.32);
	padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.6vw, 26px);
	vertical-align: middle;
	font-weight: 400;
	font-size: clamp(13px, 1.15vw, 17px);
	line-height: 1.8;
}

/* 項目列: 中央揃え・字間を広めに（デザイン準拠） */
.company-table th {
	width: 20%;
	text-align: center;
	letter-spacing: 0.28em;
	text-indent: 0.28em; /* letter-spacingの右余りを相殺して中央に見せる */
	white-space: nowrap;
}

.company-table td {
	text-align: left;
}

.company-table__list li {
	position: relative;
	padding-left: 1.4em;
}

.company-table__list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

/* ---- プロフィール ---- */
/* 写真の高さを本文ブロックに合わせる＝上端・下端とも揃う（2026-08-03指示）
   stretchで写真を本文の高さまで伸ばし、幅は元画像の縦横比なりに決まる */
.profile {
	display: flex;
	align-items: stretch;
	gap: clamp(24px, 4vw, 60px);
	margin-top: clamp(30px, 3.5vw, 56px);
}

/* 幅は明示する（未指定だと画像の原寸1206pxで列が確定し、本文が潰れてしまうため）。
   高さはstretchで本文に合わせ、画像はその枠を満たす */
.profile__photo {
	flex-shrink: 0;
	width: clamp(180px, 22vw, 300px);
	margin: 0;
}

.profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.profile__body {
	flex: 1;
}

/* 見出し「プロフィール」（筆文字＋横線を1枚にした透過PNG） */
.profile__title {
	display: flex;
	align-items: center;
	margin-bottom: clamp(14px, 1.8vw, 28px);
	line-height: 0;
}

.profile__title img {
	width: min(31vw, 477px);
	height: auto;
}

/* 採用情報のリード文（.recruit__lead）と同じ文字サイズに揃える（2026-08-03指示） */
.profile__text {
	font-size: clamp(12px, 1.5vw, 23px);
	line-height: 2;
}

/* ---- TOP: お知らせ（デザイン: 08-top-news.png） ---- */
.top-news {
	background-color: #ede4da;
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0;
}

.section-title__stroke--news {
	width: min(23vw, 345px);
	margin-bottom: clamp(24px, 3vw, 48px);
}

/* リスト＋ボタンを収める内側の幅（デザイン: セクション幅の約73%） */
.news-inner {
	width: min(1115px, 92%);
	margin-inline: auto;
}

.news-list {
	border-top: 1px solid rgba(13, 0, 21, 0.55);
}

.news-list__item {
	border-bottom: 1px solid rgba(13, 0, 21, 0.55);
}

.news-list__item > a {
	display: flex;
	align-items: center;
	padding: clamp(16px, 3.1vw, 48px) 0;
	transition: opacity 0.3s;
}

.news-list__item > a:hover {
	opacity: 0.65;
}

.news-list__date {
	flex-shrink: 0;
	width: 27%;
	padding-left: 5%;
	/* リンクテキストは他ページと同じ標準サイズ（2026-08-03指示） */
	font-size: 1rem;
	letter-spacing: 0.02em;
}

/* 日付とタイトルの間の短い縦罫（デザイン準拠） */
.news-list__title {
	position: relative;
	padding-left: 4.5%;
	font-size: 1rem;
	line-height: 1.6;
	/* タイトルは常に1行表示。長い場合は末尾を「…」で省略（2026-08-12指示）
	   .news-list__link が flex のため、残り幅を占有＋min-width:0で省略を有効化する */
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news-list__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 2.2em;
	background-color: rgba(13, 0, 21, 0.5);
}

.top-news .section-btn {
	margin-top: clamp(28px, 3.6vw, 56px);
}

/* ---- TOP: 採用情報（デザイン: 09-top-recruit.png） ---- */
.top-recruit {
	background-color: #ede4da;
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0 0;
	overflow: hidden;
}

.top-recruit .container {
	padding-bottom: 0;
}

/* 見出しと左右の墨飾り（採用情報・お問い合わせ共通） */
.recruit__head,
.contact__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 30px);
}

.recruit__spark,
.contact__spark {
	width: clamp(38px, 7.5vw, 120px);
	height: auto;
	mix-blend-mode: multiply;
}

.contact__spark {
	width: clamp(30px, 6vw, 95px);
}

.section-title__stroke--recruit {
	width: min(30vw, 460px);
	margin-bottom: clamp(20px, 2.6vw, 40px);
}

/* キャッチコピー（大）とリード文（小） */
.recruit__copy {
	text-align: center;
	font-size: clamp(17px, 2.55vw, 40px);
	line-height: 1.75;
	margin-bottom: clamp(14px, 1.6vw, 26px);
}

.recruit__lead {
	text-align: center;
	font-size: clamp(12px, 1.5vw, 23px);
	line-height: 1.9;
}

/* イラスト帯（画面幅いっぱい）＋重ねて置くボタン */
.recruit__visual {
	position: relative;
}

/* イラストは透過PNGのため乗算合成は不要（2026-08-01に透過版へ差し替え）
   支給画像は上26.5%・下11%が透明の余白のため、負マージンで詰める
   （%マージンは幅基準のため、画像の縦横比1.953で換算した値を指定） */
.recruit__ill {
	display: block;
	width: 100%;
	height: auto;
	margin-top: -11.5%;
}

/* 支給画像は下11%が透明の余白。その内側に食い込ませて
   イラスト下端にボタンが重なるデザインを再現する（%は画像高さ基準） */
.recruit__btn {
	position: absolute;
	left: 50%;
	bottom: 5.4%;
	transform: translateX(-50%);
	margin: 0;
	width: max-content;
}

.recruit__btn .btn-brush {
	min-width: min(455px, 76vw);
	padding: clamp(10px, 1.3vw, 20px) clamp(20px, 3vw, 46px);
}

/* ---- TOP: お問い合わせ（デザイン: 10-top-contact.png） ---- */
/* 連絡先3列を削除した分（2026-08-04）、下の余白を広げてデザインの比率に合わせる。
   デザイン（1535x834）でのボタン下端〜セクション下端は217px。
   .container の上下padding 60px を差し引いた 157px（=10.2vw）をセクション側に持たせる。
   背景プレートは 100% 100% で伸縮するため、余白を戻さないと四隅の飾りが潰れる */
.top-contact {
	background-color: #ede4da;
	background-image: url(../img/common/background.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: clamp(40px, 5vw, 80px) 0 clamp(50px, 10.2vw, 163px);
}

.section-title__stroke--contact {
	width: min(29vw, 440px);
	margin-bottom: clamp(20px, 2.8vw, 44px);
}

.contact__copy {
	text-align: center;
	font-size: clamp(16px, 2.2vw, 34px);
	line-height: 1.7;
	margin-bottom: clamp(20px, 2.8vw, 44px);
}

/* 封筒アイコン付きボタン（デザイン準拠で幅広） */
.btn-brush--mail {
	gap: clamp(10px, 1.3vw, 20px);
	min-width: min(780px, 88vw);
	padding: clamp(14px, 1.9vw, 30px) clamp(20px, 3vw, 46px);
}

.btn-brush__icon {
	flex-shrink: 0;
	width: clamp(22px, 2.7vw, 42px);
	height: auto;
}

/* 連絡先3列（間に縦罫）。現在はフッターのみで使用 */
.contact-list {
	display: grid;
	/* 電話ブロック削除に伴い3列→2列（所在地・メール）に変更（2026-09-07指示）。
	   残った2項目を空きスペースなく均等に配置する */
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

.contact-list__item {
	position: relative;
	padding: 0 clamp(8px, 1.5vw, 24px);
}

.contact-list__item + .contact-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8%;
	width: 1px;
	height: 84%;
	background-color: rgba(13, 0, 21, 0.45);
}

/* アイコンは透過PNGのため乗算合成は不要（2026-08-01に透過版へ差し替え） */
.contact-list__icon {
	width: clamp(48px, 6.2vw, 96px);
	height: auto;
	margin: 0 auto clamp(10px, 1.2vw, 18px);
}

.contact-list__label {
	font-size: clamp(11px, 1.25vw, 19px);
	letter-spacing: 0.06em;
	margin-bottom: clamp(6px, 0.9vw, 14px);
}

.contact-list__value {
	font-size: clamp(14px, 1.75vw, 27px);
	line-height: 1.5;
}

.contact-list__value a {
	transition: opacity 0.3s;
}

.contact-list__value a:hover {
	opacity: 0.7;
}

.contact-list__note {
	font-size: clamp(10px, 1.1vw, 17px);
	margin-top: clamp(4px, 0.5vw, 8px);
}

/* ---- 記事詳細 ---- */
/* ---- お知らせ記事詳細（デザイン: 22-news-page.png） ---- */
/* 背景: PCは横長の共通素材。SPは縦長素材（メディアクエリで上書き） */
.page-body--news-single {
	background-image: url(../img/common/background.webp);
}

.news-article {
	margin-top: clamp(24px, 3.4vw, 54px);
	/* 本文の1行が長くなりすぎないよう、PCでは横幅を約800pxに制限して中央寄せ（2026-08-12指示） */
	max-width: 800px;
	margin-inline: auto;
}

.news-article__date {
	display: block;
	color: var(--c-shu);
	font-size: clamp(14px, 1.3vw, 20px);
	letter-spacing: 0.08em;
}

.news-article__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(20px, 2.6vw, 38px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0.4em 0 0;
}

/* タイトル下の区切り罫（デザイン準拠） */
.news-article__header {
	padding-bottom: clamp(16px, 2.2vw, 34px);
	border-bottom: 1px solid rgba(13, 0, 21, 0.35);
	margin-bottom: clamp(24px, 3.4vw, 54px);
}

.news-article__content {
	font-size: clamp(14px, 1.3vw, 20px);
	line-height: 2.2;
}

.entry-content > * + * {
	margin-top: 1.2em;
}

/* ---- 下層ページ共通（デザイン: 11-service.png 他） ---- */
/* 公式支給の縦長ページ用背景素材（Material/background-page.webp・2026-08-02差し替え） */
.page-body {
	background-color: #ede4da;
	background-image: url(../img/common/background-page.webp);
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding-bottom: clamp(40px, 5vw, 80px);
}

.page-hero {
	text-align: center;
	padding: clamp(24px, 3.4vw, 54px) 20px 0;
}

.page-hero .section-title--brush {
	font-size: clamp(38px, 5.6vw, 86px);
}

.section-title__stroke--page {
	width: min(20vw, 240px);
	margin-bottom: clamp(14px, 1.8vw, 28px);
}

/* ---- SEO用テキストh1（2026-08-17指示・header.phpで全ページ共通出力） ----
   デザイン上の見出しは筆文字画像のため、テキストのh1は背景の裏に隠して画面には見せない */
.seo-page-title {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

/* ---- お問い合わせ: プライバシーポリシー同意チェック（2026-08-17追加） ----
   フォーム本体はContact Form 7の管理画面で編集（[acceptance privacy-policy]タグを使用）
   ラベル列なし・チェックボックスと文言をフォーム幅に対して中央寄せで表示する
   ※.form-row（2カラムのグリッド定義）より前に書かれているため、
   　クラスを重ねて詳細度を上げて1カラム化を確実に効かせる */
.form-row.form-row--acceptance {
	grid-template-columns: 1fr;
}

.form-row.form-row--acceptance .form-row__field {
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-row--acceptance .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	cursor: pointer;
}

.form-row--acceptance input[type="checkbox"] {
	width: 1.2em;
	height: 1.2em;
	accent-color: var(--c-shu);
	cursor: pointer;
}

.form-row--acceptance a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- プライバシーポリシー（2026-08-13作成） ---- */
/* 背景はご指定の縦長素材（Material/background-page-sp.png と同一素材のwebp版）をPC・SP共通で使用 */
.page-body--privacy {
	background-image: url(../img/common/background-page-sp.webp);
}

.privacy {
	max-width: 800px;
	margin: clamp(24px, 3.4vw, 54px) auto 0;
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 2;
}

.privacy__intro {
	margin-bottom: clamp(28px, 3.4vw, 48px);
}

.privacy__section + .privacy__section {
	margin-top: clamp(28px, 3.4vw, 48px);
}

.privacy__heading {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(17px, 1.6vw, 22px);
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding-bottom: 0.4em;
	border-bottom: 1px solid rgba(13, 0, 21, 0.35);
	margin-bottom: 0.8em;
}

.privacy__section p + p,
.privacy__section p + .privacy__list {
	margin-top: 0.8em;
}

.privacy__list {
	list-style: disc;
	padding-left: 1.6em;
}

.privacy__list a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.privacy__date {
	margin-top: clamp(28px, 3.4vw, 48px);
	/* 2026-08-17指示: 左寄せに変更 */
	text-align: left;
}

/* パンくず */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.9em;
	font-size: clamp(12px, 1.15vw, 16px);
	letter-spacing: 0.08em;
	padding-bottom: clamp(12px, 1.5vw, 22px);
	border-bottom: 1px solid rgba(13, 0, 21, 0.4);
}

.breadcrumb a {
	transition: opacity 0.3s;
}

.breadcrumb a:hover {
	opacity: 0.65;
}

.breadcrumb__sep {
	color: rgba(13, 0, 21, 0.55);
}

.breadcrumb__current {
	color: var(--c-shu);
}

/* ---- 事業内容ページ: 3事業（左右交互） ---- */
.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(24px, 3vw, 44px) 0;
	border-bottom: 1px solid rgba(13, 0, 21, 0.4);
}

/* 偶数ブロックはテキストを左・画像を右に */
.service-row--reverse .service-row__ill {
	order: 2;
}

.service-row__ill {
	margin: 0;
}

.service-row__ill img {
	width: 100%;
	height: auto;
	/* 切り出した和紙地を背景に馴染ませる */
	mix-blend-mode: multiply;
}

.service-row__head {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 22px);
	margin-bottom: clamp(12px, 1.6vw, 24px);
}

/* 朱の筆円（TOPと共通素材）＋HTMLの番号 */
.service-row__num {
	flex-shrink: 0;
	width: clamp(52px, 5.9vw, 84px);
	aspect-ratio: 1;
	background: url(../img/top/service-badge.webp) center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	font-family: var(--font-serif);
	font-size: clamp(20px, 2.4vw, 34px);
	font-weight: 600;
	font-style: italic;
}

.service-row__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(19px, 2.3vw, 32px);
	line-height: 1.45;
}

.service-row__text {
	font-size: clamp(13px, 1.4vw, 19px);
	line-height: 2.1;
}

/* ---- 事業内容ページ: ご依頼の流れ ---- */
.flow {
	margin-top: clamp(36px, 4.6vw, 72px);
}

/* 見出しの左右に伸びる短い横線 */
.flow__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2vw, 30px);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(20px, 2.3vw, 32px);
	margin-bottom: clamp(18px, 2.2vw, 34px);
}

.flow__title::before,
.flow__title::after {
	content: "";
	width: clamp(30px, 4.4vw, 62px);
	height: 1px;
	background-color: rgba(13, 0, 21, 0.7);
}

.flow__list {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 18px);
}

.flow__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 2.1fr);
	align-items: center;
	gap: clamp(10px, 1.8vw, 28px);
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 3px 10px rgba(13, 0, 21, 0.07);
	padding: clamp(12px, 1.5vw, 22px) clamp(14px, 2vw, 30px);
}

/* 番号どうしをつなぐ朱の縦線 */
.flow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(clamp(14px, 2vw, 30px) + clamp(24px, 2.6vw, 37px));
	top: 50%;
	width: 2px;
	/* 次のアイテムの番号中央まで届かせる（自身の下半分＋行間＋次の上半分） */
	height: calc(100% + clamp(10px, 1.2vw, 18px));
	background-color: var(--c-shu);
	z-index: 0;
}

.flow__num {
	position: relative;
	z-index: 1;
	width: clamp(48px, 5.2vw, 74px);
	aspect-ratio: 1;
	background: url(../img/top/service-badge.webp) center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	/* 番号は「01〜05」表記のイタリック（2026-08-13指示）。
	   3事業の番号バッジ（.service-row__num）と同じ書体・斜体に統一 */
	font-family: var(--font-serif);
	font-size: clamp(20px, 2.2vw, 31px);
	font-weight: 600;
	font-style: italic;
	line-height: 1;
}

.flow__name {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(15px, 1.65vw, 23px);
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.flow__text {
	font-size: clamp(11px, 1.15vw, 16px);
	line-height: 1.9;
}

/* ---- 採用情報ページ（デザイン: 31-recruit.png） ---- */
.recruit-message {
	text-align: center;
	margin-top: clamp(28px, 3.6vw, 56px);
}

/* イラスト帯: 透過余白（上26.5%・下11%）を負マージンで詰める（TOPと同素材） */
.recruit__visual--page .recruit__ill {
	margin-bottom: -5.6%;
}

/* 募集要項見出し（筆文字＋左右の墨点＋下線を1枚にした透過PNG） */
.recruit-outline__head {
	text-align: center;
	margin-bottom: clamp(24px, 3vw, 48px);
	line-height: 0;
}

/* 下層カンプ（1024px幅）上の実寸326px＝31.8%。原寸を上限に縮小のみ
   PC/SPとも左右中央寄せ（2026-08-02指示） */
.recruit-outline__head img {
	display: block;
	width: min(32vw, 326px);
	height: auto;
	margin-inline: auto;
}

/* 募集要項テーブル（外枠＋中罫のあるボックス型） */
.recruit-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid rgba(13, 0, 21, 0.6);
	background-color: rgba(255, 255, 255, 0.55);
	font-size: clamp(13px, 1.3vw, 20px);
	line-height: 1.8;
}

.recruit-table th,
.recruit-table td {
	border: 1px solid rgba(13, 0, 21, 0.6);
	padding: clamp(12px, 1.4vw, 22px) clamp(14px, 2vw, 32px);
	vertical-align: middle;
	font-weight: 400;
}

.recruit-table th {
	width: clamp(9em, 22%, 13em);
	text-align: center;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.recruit-table td {
	text-align: left;
}

.recruit-table__list li {
	position: relative;
	padding-left: 1.1em;
}

.recruit-table__list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

.recruit-outline__btn {
	margin-top: clamp(32px, 4vw, 64px);
}

/* ---- お問い合わせページ（デザイン: 41-contact.png） ---- */
.section-title__stroke--contact {
	width: min(30vw, 460px);
	margin-bottom: clamp(20px, 2.6vw, 40px);
}

.contact-lead {
	text-align: center;
	font-size: clamp(15px, 1.75vw, 27px);
	letter-spacing: 0.08em;
	margin: clamp(28px, 3.6vw, 56px) 0 clamp(24px, 3vw, 48px);
}

/* フォームカード（デザインから採寸: カード地#fbfaf8・左右余白5.35%・角丸）
   フォーム本体はContact Form 7が出力する。項目のマークアップ雛形はREADME参照 */
.contact-form {
	background-color: #fbfaf8;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(13, 0, 21, 0.07);
	padding: clamp(6px, 1.4vw, 20px) clamp(18px, 5.3vw, 62px) clamp(28px, 4vw, 56px);
}

.contact-form__placeholder {
	text-align: center;
	color: rgba(13, 0, 21, 0.5);
	padding: 2em 0;
}

/* CF7のラッパーは素通し（カード側でレイアウトするため余白を持たせない） */
.contact-form .wpcf7 {
	margin: 0;
}

/* エラー時のスクリーンリーダー用テキストは視覚的に隠す（読み上げには残す） */
.contact-form .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* フォーム行（ラベル+バッジ | 入力欄）。
   デザイン採寸: ラベル列26.3% / 入力列73.7%、行間は1pxの破線 */
.form-row {
	display: grid;
	grid-template-columns: minmax(0, 26.3%) 1fr;
	align-items: center;
	gap: 0;
	padding: clamp(14px, 1.95vw, 28px) 0;
}

.form-row + .form-row {
	border-top: 1px dashed #ddd9d5;
}

.form-row--textarea {
	align-items: start;
}

.form-row__label {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding-right: 1em;
	font-size: clamp(13px, 1.3vw, 20px);
	letter-spacing: 0.1em;
	font-weight: 500;
}

/* お問い合わせ内容の行はラベルの下にバッジを置く（デザイン準拠） */
.form-row--textarea .form-row__label {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7em;
	padding-top: clamp(8px, 1.2vw, 18px);
}

/* 任意/必須バッジ（デザインから採色） */
.form-badge {
	flex-shrink: 0;
	font-size: clamp(10px, 0.9vw, 14px);
	letter-spacing: 0.14em;
	line-height: 1;
	padding: 0.45em 0.8em;
	border-radius: 3px;
	color: var(--c-white);
}

.form-badge--optional {
	background-color: #a39d9b;
}

.form-badge--required {
	background-color: #b03e3a;
}

/* 入力欄（CF7が挿入する .wpcf7-form-control-wrap も全幅にする） */
.contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	display: block;
	width: 100%;
	background-color: var(--c-white);
	border: 1px solid #d0cfd5;
	border-radius: 5px;
	padding: clamp(11px, 1.9vw, 26px) clamp(12px, 1.5vw, 22px);
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.15vw, 18px);
	line-height: 1.5;
	color: var(--c-sumi);
	box-shadow: inset 0 1px 3px rgba(13, 0, 21, 0.04);
}

.contact-form textarea {
	min-height: clamp(170px, 20vw, 300px);
	resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid rgba(176, 62, 58, 0.5);
	outline-offset: 1px;
}

/* 送信ボタン（朱の筆はけ素材。input/button要素にも効くようリセット） */
.form-submit {
	position: relative;
	text-align: center;
	margin-top: clamp(24px, 3vw, 48px);
}

.contact-form .btn-brush,
.contact-form input[type="submit"] {
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* CF7が送信ボタンの直後に出すスピナーは、レイアウトを崩さないよう絶対配置 */
.contact-form .wpcf7-spinner {
	position: absolute;
	margin: 0 0 0 12px;
	top: 50%;
	transform: translateY(-50%);
}

/* CF7のバリデーションメッセージ */
.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5em;
	font-size: 0.85em;
	color: #b03e3a;
}

.contact-form .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: 0.8em 1.2em;
	border: 1px solid #b03e3a;
	border-radius: 5px;
	font-size: clamp(13px, 1.1vw, 16px);
	text-align: center;
}

/* 入力エラーのある欄を朱の枠線で示す */
.contact-form .wpcf7-not-valid {
	border-color: #b03e3a;
}

/* ---- CF7デフォルト出力向けのレイアウト（2026-08-03・実フォームのマークアップに対応）
   CF7管理画面のフォームは <label>ラベル文言＋入力欄</label> が並ぶ素の構造のため、
   labelをグリッド行化してデザイン（41-contact.png）の「ラベル列｜入力列」を再現する。
   ※ラベル文言のテキストはグリッドの匿名アイテムとして1列目に配置される */
.contact-form .wpcf7-form > label {
	display: grid;
	grid-template-columns: minmax(0, 26.3%) 1fr;
	align-items: center;
	gap: 0 clamp(12px, 2vw, 32px);
	padding: clamp(14px, 1.95vw, 28px) 0;
	font-size: clamp(13px, 1.3vw, 20px);
	letter-spacing: 0.1em;
	font-weight: 500;
	line-height: 1.6;
}

/* 行間の破線区切り（デザイン準拠） */
.contact-form .wpcf7-form > label + label {
	border-top: 1px dashed #ddd9d5;
}

/* お問い合わせ内容（textarea行）はラベルを上寄せ */
.contact-form .wpcf7-form > label:has(textarea) {
	align-items: start;
}

.contact-form .wpcf7-form > label:has(textarea) .wpcf7-form-control-wrap {
	margin-top: 0.2em;
}

/* 隠しフィールドのfieldsetがレイアウトに影響しないようにする */
.contact-form .hidden-fields-container {
	display: none;
}

/* 送信ボタン: 朱の筆はけ素材で中央配置（btn-brushクラスがない素のsubmitにも適用） */
.contact-form input[type="submit"] {
	display: block;
	min-width: min(520px, 86vw);
	margin: clamp(24px, 3vw, 48px) auto 0;
	padding: 20px 40px;
	background: url(../img/common/button.webp) center / 100% 100% no-repeat;
	border: 0;
	color: var(--c-white);
	font-family: var(--font-serif);
	font-size: clamp(16px, 1.6vw, 23px);
	font-weight: 500;
	letter-spacing: 0.18em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.3s;
}

.contact-form input[type="submit"]:hover {
	opacity: 0.85;
}

/* ---- スクロール連動フェードイン（全ページ共通・付与はJS） ---- */
.js-fade {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.js-fade.is-inview {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- 送信完了（デザイン: 42-contact-thanks.png） ---- */
/* 背景: PCは横長の共通素材。SPは縦長素材（メディアクエリで上書き） */
.page-body--thanks {
	background-image: url(../img/common/background.webp);
}

/* 本文はページ中央に大きく余白を取って配置（デザイン準拠） */
.thanks-message {
	text-align: center;
	padding: clamp(60px, 12vw, 200px) 0 clamp(40px, 8vw, 140px);
	font-size: clamp(15px, 1.6vw, 24px);
	letter-spacing: 0.08em;
	line-height: 2;
}

.thanks-message p + p {
	margin-top: 1.6em;
}

.thanks-btn {
	margin-bottom: clamp(40px, 6vw, 100px);
}

/* ---- 404 ---- */
.notfound-text {
	text-align: center;
}

/* ---- お知らせ一覧ページ（デザイン: 21-news.png） ---- */
/* 下層は全幅リストのためTOP用の内側幅指定を解除 */
.news-inner--page {
	width: 100%;
}

.news-list--page {
	border-top-color: rgba(13, 0, 21, 0.4);
}

.news-list--page .news-list__item {
	border-bottom-color: rgba(13, 0, 21, 0.4);
}

.news-list--page .news-list__date {
	width: 24%;
	padding-left: 7%;
}

/* 一覧ページのリンクテキストは他ページと同じ標準サイズ（16px・2026-08-03指示）
   ※TOPのお知らせセクションはデザインどおり大きいままにする */
.news-list--page .news-list__date,
.news-list--page .news-list__title {
	font-size: 1rem;
}

.news-empty {
	text-align: center;
	padding: clamp(40px, 6vw, 90px) 0;
}

/* ---- ページネーション（デザイン: 21-news.png） ---- */
.pagination {
	margin-top: clamp(32px, 4vw, 64px);
	text-align: center;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 1.6vw, 26px);
	font-size: clamp(14px, 1.3vw, 20px);
	letter-spacing: 0.06em;
}

.pagination .page-numbers {
	transition: opacity 0.3s;
}

.pagination a.page-numbers:hover {
	opacity: 0.65;
}

/* 数字は正円で揃え、現在ページのみ朱の円で白抜き */
.pagination .page-numbers:not(.prev):not(.next):not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, 2.6vw, 40px);
	height: clamp(30px, 2.6vw, 40px);
	border-radius: 50%;
}

.pagination .page-numbers.current {
	color: var(--c-washi);
	background-color: #a3282e; /* デザインの朱円（暗めの朱） */
}

.pagination .page-numbers.dots {
	letter-spacing: 0.2em;
}

/* ---- レスポンシブ（暫定。デザイン実装時に精査） ---- */
@media (max-width: 768px) {
	.top-service__cards,
	.contact-info {
		grid-template-columns: 1fr;
	}

	/* SP: 事例紹介カードは2カラム（2026-08-06指示。PC版は3カラムのまま現状維持） */
	.works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* SP: フォームはラベルと入力欄を縦積みに */
	.form-row,
	.contact-form .wpcf7-form > label {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* SP: 横長の背景プレート（3:2）の代わりに、縦長のページ用素材を各セクションに敷く
	   （Material/background-page.webp・2026-08-02指示） */
	.top-service,
	.top-works,
	.top-company,
	.top-news,
	.top-recruit,
	.top-contact {
		background-image: url(../img/common/background-page.webp);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	/* SP: 縦に長い事業内容は縦長比率（1:3）の専用素材を使用
	   （Material/background-section.webp・2026-08-02指示） */
	.top-service {
		background-image: url(../img/common/background-section.webp);
	}

	/* SP: 事例紹介はSP用のページ背景素材を使用（2026-08-04指示・同日差し替え）
	   ※対象はTOPのセクションのみ。下層の事例紹介ページ（.page-body--works）は対象外 */
	.top-works {
		background-image: url(../img/common/background-page-sp.webp);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	/* SP: 画像見出しはPCの比率のままだと小さすぎるため、従来のテキスト見出しと
	   同等の見え方になるよう拡大する（PC比 約1.5倍。ただし画面端に触れないよう90vw上限） */
	.section-title--img img         { width: 70vw; } /* 事業内容 */
	.section-title--img-works img   { width: 70vw; }
	.section-title--img-profile img { width: 79vw; }
	.section-title--img-news img    { width: 66vw; }
	.section-title--img-recruit img { width: 87vw; }
	.section-title--img-contact img { width: 90vw; }
	.section-title--img-privacy img { width: 90vw; }

	/* SP: 募集要項見出しは32vwだと小さすぎるため拡大（中央寄せは共通指定のまま） */
	.recruit-outline__head img {
		width: 60vw;
	}

	/* SP: 下層ページのタイトルはTOPの約86%（従来のテキスト見出し 38px / 44px の比率） */
	.page-hero .section-title--img img         { width: 60vw; }
	.page-hero .section-title--img-works img   { width: 60vw; }
	.page-hero .section-title--img-news img    { width: 57vw; }
	.page-hero .section-title--img-recruit img { width: 75vw; }
	.page-hero .section-title--img-contact img { width: 77vw; }

	.site-footer {
		background-image: none;
	}

	/* ---- SP: グローバルナビをハンバーガーメニューに ---- */
	.nav-toggle {
		display: flex;
	}

	/* 右から滑り込むパネル。閉じている間はフォーカスが入らないよう visibility も切る */
	.g-nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;
		width: min(300px, 82vw);
		height: 100svh;
		margin-left: 0;
		padding: clamp(80px, 22vw, 110px) 28px 40px;
		background-color: #000000;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.35s ease, visibility 0.35s;
	}

	.g-nav.is-open {
		transform: none;
		visibility: visible;
	}

	.g-nav .menu {
		display: block;
		font-size: 16px;
	}

	.g-nav .menu-item + .menu-item {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.g-nav .menu-item > a {
		padding: 18px 4px;
		letter-spacing: 0.08em;
	}

	/* メニューを開いている間は背面のスクロールを止める */
	body.is-nav-open {
		overflow: hidden;
	}

	/* SP: フッターナビは2列相当で折り返し、縦罫は詰める */
	.footer-nav .menu-item {
		padding: 4px clamp(10px, 4vw, 18px);
	}

	/* SP: 事業内容・採用情報・事例紹介ページはSP専用の背景素材に差し替え
	   （Material/background-page-sp.webp・2026-08-02指示、2026-08-03に事例紹介追加。
	     PC版・お知らせ等の他の下層ページは対象外） */
	.page-body--service,
	.page-body--recruit,
	.page-body--works {
		background-image: url(../img/common/background-page-sp.webp);
	}

	/* SP: お問い合わせページのみ縦長比率（1:3）のセクション用素材を使用（2026-08-03指示） */
	.page-body--contact {
		background-image: url(../img/common/background-section.webp);
	}

	/* SP: お知らせ記事詳細・送信完了は縦長のページ用素材を使用（2026-08-03指示） */
	.page-body--news-single,
	.page-body--thanks {
		background-image: url(../img/common/background-page.webp);
	}

	/* SP: 事業内容ページは画像とテキストを縦積み（左右交互は解除。2026-08-06指示でこの形に戻した） */
	.service-row {
		grid-template-columns: 1fr;
	}

	.service-row--reverse .service-row__ill {
		order: 0;
	}

	.service-row__text br,
	.flow__text br {
		display: none;
	}

	/* SP: 流れは番号＋ステップ名を1行、説明文はその下に置く。
	   説明文は2列目（番号の右）に揃え、番号をつなぐ赤線と重ならないようにする（2026-08-02指示） */
	.flow__item {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px 14px;
	}

	.flow__text {
		grid-column: 2;
	}

	/* 赤線は自分の番号中央（上端24px）から次カードの番号中央まで届かせる
	   （+22px = カード間の隙間10px + 次カードの上余白12px + 番号半径24px - 自身の上端24px の残差） */
	.flow__item:not(:last-child)::after {
		height: calc(100% + 22px);
		top: 24px;
	}

	/* SP: 連絡先は3列だと窮屈なため縦積み（縦罫→横罫） */
	.contact-list {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.contact-list__item + .contact-list__item {
		padding-top: 24px;
	}

	.contact-list__item + .contact-list__item::before {
		left: 10%;
		top: 0;
		width: 80%;
		height: 1px;
	}

	/* SP: 採用情報はイラスト帯が細くなるため、ボタンは帯の下に置く */
	.recruit__btn {
		position: static;
		transform: none;
		width: auto;
		margin: 16px 0 0;
		text-align: center;
	}

	.recruit__visual {
		padding-bottom: 24px;
	}

	/* PCデザイン準拠の改行は解除し、画面幅に応じて自然に折り返す */
	.recruit__lead br {
		display: none;
	}

	/* SP: お知らせは日付を上・タイトルを下に積む */
	.news-list__item > a {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.news-list__date {
		width: auto;
		padding-left: 0;
	}

	.news-list__title {
		padding-left: 0;
	}

	.news-list__title::before {
		display: none;
	}

	/* SP: 会社概要テーブルは項目列を広げ、プロフィールは写真を上に積む */
	.company-table th {
		width: 6.5em;
		letter-spacing: 0.1em;
		text-indent: 0.1em;
	}

	/* SP: 縦積みのため、PCの高さ合わせ（stretch）は解除して従来の幅指定に戻す */
	.profile {
		flex-direction: column;
		align-items: center;
	}

	.profile__photo {
		width: min(60vw, 220px);
	}

	.profile__photo img {
		width: 100%;
		height: auto;
	}

	.profile__title {
		justify-content: center;
	}

	/* SP: 「プロフィール」見出し画像が小さいため2倍に（2026-08-03指示） */
	.profile__title img {
		width: 62vw;
	}

	/* SP: PCと同じ位置の<br>で改行させ、文字サイズは1.2倍にする（2026-08-03指示）
	   （<br>の無効化は解除。長い行は画面幅に収まらず自然折り返しが追加で入る） */
	.profile__text {
		font-size: calc(clamp(12px, 1.5vw, 23px) * 1.2);
	}

}