@charset "utf-8";
/*
Theme Name: 永遠都コンフォルト
Description: 永遠都コンフォルト のオリジナルテーマ。ビルドツールを使わない素のCSSとPHPで作っている。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: eiento-comfort
*/

/* ==========================================================
   1. 設定
   Figmaの値をそのまま置く。色を変えたいときはここだけ直す。
   ここより下では、カラーコードを直接書かない。
   PCの値を :root に、SPデザイン（800px基準）の値を下の @media に置く。
   ========================================================== */

:root {

	/* ---- 色 ---- */
	--color-text: #262523;           /* 本文 */
	--color-white: #FFFFFF;
	--color-bg: #FFFFFF;             /* ページ全体の背景 */
	--color-blue: #949FEB;           /* 主色。運営代行のサービス色、線・アイコン・ボタン */
	--color-pink: #DFAEE5;           /* 清掃代行のサービス色 */
	--color-pink-deep: #C795CD;      /* 清掃・募集ページの見出しの色 */
	--color-pink-vivid: #DB89E5;     /* TOPのサービスカードの「清掃」の文字 */
	--color-lavender: #B4B6EC;       /* 淡い青紫の装飾 */
	--color-lavender-pale: #D9C6E9;  /* ヘッダーの区切り線、Scroll */
	--color-bg-blue: #EEF0FF;        /* 薄い青の背景 */
	--color-bg-pink: #F4EDFA;        /* 薄いピンクの背景 */
	--color-mauve: #BFADC2;          /* 吹き出し、お知らせのカテゴリーの枠、沿革のボタン */
	--color-line-app: #4ACE80;       /* LINEのボタン */
	--color-yellow: #FFFF6D;         /* 色の濃い背景の上の黄色い文字 */
	--color-marker: #EBEB94;         /* 黄色のマーカー */
	--color-link: #7783D7;           /* ポリシー・記事の箇条書きの文字 */
	--color-gold: #BBA764;           /* スーパーホストの帯、フォームの「必須」の地 */
	--color-required: var(--color-gold);
	--color-error: var(--color-recommend); /* フォームの入力の誤り（枠と「！」）。Figmaに無いので、サイトの赤を使う */
	--color-dot: #4C5386;            /* スライダーのいま表示している点 */
	--color-num-off: #9D9D9D;        /* SPの選ばれる理由のタブの番号（選ばれていないとき） */

	/* ---- 色：運営代行のページだけ（Figmaのまま。2026-09-26 決定 J-1） ---- */
	--color-owners-tag: #787FAF;     /* For Owners の立場のラベルの地、吹き出しの文字 */
	--color-owners-voice: #DFE0EA;   /* For Owners の吹き出しの地、ラベルと問いの文字。料金の準備費用のカードの区切り線 */
	--color-ota-line: #C3C8EB;       /* 予約サイトの枠の線 */
	--color-price-bg: #FAF0ED;       /* 料金：運営開始後の欄の地 */
	--color-price-head: #EBBD94;     /* 料金：ラベル・表の見出しの行・見出しの横の補足 */
	--color-price-line: #E6D5C2;     /* 料金：線・表の罫線 */
	--color-recommend: #ED5659;      /* 料金：おすすめの列 */

	/* ---- 色：清掃代行のページだけ（Figmaのまま） ---- */
	--color-cleaning-owners: #E4DAE5; /* For Owners の欄の地 */
	--color-cleaning-voice: #A87CAD;  /* For Owners の吹き出しの地 */

	/* ---- 色：お知らせ（Figmaのまま） ---- */
	--color-news-tab: #F5F5F5;      /* カテゴリーのボタン（選ばれていないもの） */
	--color-news-date: #AAAAAA;     /* カードの日付 */
	--color-pager-current: #EEEEEE; /* ページ送りの、今のページの地 */
	--color-pager-current-text: #999999; /* ページ送りの、今のページの数字 */
	--color-pager-line: #5C545A;    /* ページ送りの枠と数字 */

	/* ---- 色：文字・線 ---- */
	--color-text-weak: #74716A;      /* パンくずの現在地など、弱めの文字 */
	--color-text-sub: #474343;       /* TOPのお知らせの「一覧を見る」 */
	--color-placeholder: #666666;    /* 入力欄の入力例 */
	--color-input-line: #999999;     /* 入力欄・チェックの枠線 */
	--color-line: #DDDDDD;           /* 区切り線 */
	--color-white-50: rgba(255, 255, 255, 0.5); /* 濃い地の上の区切り線 */
	--color-white-80: rgba(255, 255, 255, 0.8); /* 写真の上の白いフェードの途中 */
	--color-shade: rgba(38, 37, 35, 0.5);        /* TOPのFVの選ばれていないタブ */
	--color-shade-strong: rgba(38, 37, 35, 0.9); /* TOPの Our Work のサムネの地 */
	--color-overlay-strong: rgba(0, 0, 0, 0.8); /* 動画ポップアップの背面 */

	/* ---- グラデーション ---- */
	--gradient-brand: linear-gradient(90deg, var(--color-blue), var(--color-pink)); /* 青（左）→ピンク（右）。帯・主ボタン */

	/* ---- 雛形の部品が使っている名前（部品を書き換えたら消す） ---- */
	--color-primary: var(--color-blue);
	--color-primary-deep: var(--color-text);
	--color-panel: var(--color-bg-pink);
	--color-accent: var(--color-marker);

	/* ---- 書体 ---- */
	/* 英字用フォントを併用するときは、日本語フォントより前に書く */
	--font-base: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--font-en: "EB Garamond", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

	/* ---- 文字サイズ（Figmaのpx ÷ 16） ---- */
	--fs-xs: 0.8125rem;       /* 13px 小さな補足 */
	--fs-caption: 0.875rem;   /* 14px ヘッダーの事業説明、「必須」 */
	--fs-small: 1rem;         /* 16px ナビ、ヘッダーのボタン */
	--fs-body: 1.0625rem;     /* 17px 本文。いちばん多く使う */
	--fs-lead: 1.125rem;      /* 18px ボタン、パンくず、入力欄 */
	--fs-lead-l: 1.25rem;     /* 20px リード */
	--fs-h5: 1.375rem;        /* 22px */
	--fs-h4: 1.5rem;          /* 24px */
	--fs-sub: 1.75rem;        /* 28px 大見出しの下の小見出し（Contactの黄色の文字など） */
	--fs-emph: 1.875rem;      /* 30px 電話番号、フッターのサイト名 */
	--fs-h3: 2rem;            /* 32px 小見出し */
	--fs-catch: 2.25rem;      /* 36px 下層ページのFVのキャッチ */
	--fs-h2: 2.875rem;        /* 46px 大見出し */
	--fs-h1: 3.75rem;         /* 60px 下層ページのh1、TOPのキャッチ */
	--fs-en-label: 3.75rem;   /* 60px セクションの英字ラベル（EB Garamond） */
	--fs-en-hero: 6.25rem;    /* 100px 下層ページのFVの英字 */
	--fs-en-deco: 12.5rem;    /* 200px TOPのAboutの装飾の英字 */

	/* ---- 行間（単位なし。Figmaの行間px ÷ 文字px） ---- */
	--lh-body: 2.235;         /* 17/38 本文 */
	--lh-normal: 2;           /* 17/34 */
	--lh-heading: 1.565;      /* 46/72 大見出し */
	--lh-tight: 1.5;
	--lh-flat: 1;

	/* ---- レイアウト ---- */
	--inner-width: 75rem;          /* 1200px コンテンツ幅 */
	--inner-wide: 87.5rem;         /* 1400px 枠のある箱、FVの文字の列の基準 */
	--inner-gutter: 2rem;          /* 32px 左右の最低余白 */
	--header-gutter: 3.75rem;      /* 60px ヘッダーの左右余白 */
	--header-height: 5.625rem;     /* 90px ヘッダーの高さ */
	--header-height-stuck: 5.625rem; /* 上に貼り付いたときの高さ。Figmaに貼り付いた形は無いので、ふだんと同じ */
	--section-gap: 12.5rem;        /* 200px セクションの上下余白 */

	/* ---- 角丸 ---- */
	--radius-xs: 0.1875rem;    /* 3px 「必須」、チェック */
	--radius-sm: 0.25rem;      /* 4px */
	--radius-md: 0.375rem;     /* 6px カード、吹き出し */
	--radius-lg: 0.625rem;     /* 10px */
	--radius-pill: 62.4375rem; /* 丸い端。実質999px */

	/* ---- 動き ---- */
	--transition-time: 0.3s;
	--transition: var(--transition-time) ease; /* ホバー、メニューの開閉 */
	--fade-duration: 0.6s;     /* メニューの中身のフェードイン */
	--fade-move: 1.5rem;       /* フェードインの移動量（スクロール連動・メニューとも） */
	--reveal-duration: 0.8s;   /* スクロール連動フェードイン（2026-09-30 0.6sから。メインビジュアルに近い、やわらかい出方に） */
	--reveal-ease: cubic-bezier(0.33, 1, 0.68, 1); /* 最初に動いて、最後がゆっくり止まる */

	/* ---- 飾りの動き（2026-09-30 お客様のご要望。中身は「4. 共通パーツ ＞ 飾りの動き」） ---- */
	--split-move: 0.5em;         /* ② 英字が浮かび上がる前の、下にずれている量（文字の大きさの半分） */
	--split-duration: 0.9s;      /* ② 1文字が出る時間 */
	--split-step: 0.06s;         /* ② 次の文字が出始めるまでの間 */
	--wave-interval: 7s;         /* ② 出たあと、もう一度ふわっと動く間隔（2026-10-01） */
	--wave-start: 3s;            /* ② 出てから、最初にもう一度動くまで */
	--wave-move: 0.3em;          /* ② もう一度動くとき、上へ跳ねる高さ（文字の大きさに対して） */
	--flow-interval: 8s;         /* ③ ボタンの色が流れる間隔（そのうち最後の15%＝1.2秒で流れる） */
	--orb-move: 4;               /* ⑤ Our Promise の光の玉が漂う量（front-page.php の dx・dy の何倍か。2026-10-01 1→3→4。大きいほど遠くまで） */
	--orb-pace: 0.45;            /* ⑤ 光の玉が漂う片道の時間（front-page.php の dur の何倍か。2026-10-01 1→0.55→0.45。小さいほど速い） */
	--reason-radius: 5rem;       /* ⑧ Reason の枠の角が、いちばん丸くなったときの丸み（80px） */
	--reason-radius-min: 1.5rem; /* ⑧ いちばん小さくなったときの丸み（24px。真四角にはしない） */
	--marker-duration: 1.1s;     /* ⑨ 黄色のマーカーを引く時間（2つ以上に分かれたマーカーは、つないだ1本を引く時間。動き方は --reveal-ease） */
	--marker-delay: 0.35s;       /* ⑨ 文字がふわっと出始めてから、マーカーを引き始めるまで */
	--tab-hop: 0.75rem;          /* ⑪ TOPのメインビジュアルの、選ばれているタブが上へ跳ねる高さ（12px） */
	--tab-hop-interval: 6s;      /* ⑪ 跳ねる間隔。自動で切り替わる間隔（main.js の FV_INTERVAL 6000）と同じにする */
	--tab-hop-start: 2.9s;       /* ⑪ 選ばれてから跳ねるまで（最初のタブは、タブがふわっと出終わる2.7秒のあと） */

	/* ---- 重なり順 ---- */
	--z-header: 100;
	--z-drawer: 110;
	--z-modal: 200;
}

/* SPの値（800px幅のデザインを基準に、px ÷ 16 で置く）。
   PCの値をそのまま使うと 375px では半分以下の大きさになる。
   「SPデザイン」と書いた値は、FigmaのSPデザイン（home2 の フレーム「800」、node 626:95。
   2026-09-27 にヘッダー・FV・Our Promise まで）の値。ほかの欄もこの値で組む（2026-09-28 ユーザー決定）。
   書いていない値は、PCの実装後に実画面を見て決めた値（docs/06 末尾「この案件での判断」16）。
   PCの大きさが2つの値のあいだにあるものは、SPも前後の値のあいだを取る
   （例：PC 24px→SP 42px、PC 32px→SP 48px なので、PC 28px→SP 45px）。 */
@media (max-width: 1023px) {

	:root {
		--fs-xs: max(1.5rem, 12px);       /* 24px。細い画面でも12pxを下回らない */
		--fs-caption: max(1.5rem, 12px);  /* 24px */
		--fs-small: max(1.75rem, 12px);   /* 28px */
		--fs-body: 2.125rem;              /* 34px */
		--fs-lead: 2.25rem;               /* 36px */
		--fs-lead-l: 2.375rem;            /* 38px */
		--fs-h5: 2.5rem;                  /* 40px */
		--fs-h4: 2.625rem;                /* 42px */
		--fs-sub: 2.875rem;               /* 46px SPデザイン（Service・Our Work の黄色のリード。行間72px）。Our Promise の小見出しは52px */
		--fs-emph: 2.875rem;              /* 46px */
		--fs-h3: 3rem;                    /* 48px */
		--fs-catch: 3.25rem;              /* 52px */
		--fs-h2: 3.625rem;                /* 58px SPデザイン（大見出し） */
		--fs-h1: 4rem;                    /* 64px */
		--fs-en-label: 6.25rem;           /* 100px SPデザイン（セクションの英字ラベル） */
		--fs-en-hero: 7.5rem;             /* 120px */
		--fs-en-deco: 10rem;              /* 160px */

		/* 本文の行間。SPデザインの「34pxの文字に行間70px」（PCは38/17） */
		--lh-body: 2.0588;                /* 70/34 */

		--inner-width: 46.25rem;          /* 740px 内側の幅を固定（SPデザインの左右の余白30px） */
		--inner-wide: 46.25rem;
		--inner-gutter: 1.875rem;         /* 30px */
		--header-gutter: 1.875rem;        /* 30px */
		--header-height: 9.625rem;        /* 154px SPデザイン（上下32px＋ロゴ90px） */
		--header-height-stuck: 7.625rem;  /* 122px 貼り付いたときは上下の余白だけ16pxに詰める（2026-09-28 ユーザー決定） */
		--section-gap: 7.5rem;            /* 120px */
	}
}

/* ==========================================================
   2. リセット・ベース
   ========================================================== */

/* ----------------------------------------------------------
   ルートフォントサイズ
   サイト全体の伸縮はこの2つの指定だけで決まる。ほかの場所で再定義しない。
   PC : 1540px以上で16px固定 → 等比縮小 → 11.44pxで下げ止まり
        係数 1.039vw ＝ 1600 ÷ 1540。1540px は、ヘッダー（左のロゴ・ナビと右のボタン、
        左右の余白60px）と、1400pxの箱が縮めずに入る幅（実測：ナビとボタンのあいだ26px）
        下限 0.715rem のとき本文（1.0625rem）は12.16px。
        下げ止まる1100px以下では、ナビのサービス2項目を外してハンバーガーにする（docs/06 この案件での判断 2）
   SP : 800px幅のデザインを基準に、画面幅に等比で当てはめる（800pxで16px）
   ---------------------------------------------------------- */

:root {
	font-size: clamp(0.715rem, 1.039vw, 1rem);
}

@media (max-width: 1023px) {
	:root {
		/* 800pxのデザインを画面幅にそのまま当てはめる（800 ÷ 50 = 16px）。
		   15pxを引いているのはスクロールバーのぶん。
		   100vw にスクロールバーを含めるブラウザ（Firefox / Safari）では
		   引かないと中身が画面より広くなり、横スクロールが出てしまう。
		   頭打ち・下げ止まりを付けないこと。付けると等比でなくなり、
		   1023px以下のレイアウトが端末ごとに変わってしまう。 */
		font-size: calc((100vw - 15px) / 50);
	}
}

/* ---- リセット ---- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
	/* 中身が短いページでもスクロールバーを出しておく。
	   メニューの開閉でスクロールバーが消えると画面の幅が15pxほど変わり、
	   全体が横へガタッとずれてしまうため。 */
	overflow-y: scroll;
	/* ヘッダーを固定しているので、ページ内リンクの着地点をヘッダーの高さぶん下げる */
	scroll-padding-top: calc(var(--header-height-stuck) + 1rem);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, li {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

/* hidden 属性は、クラスで display を指定していても必ず隠す */
[hidden] {
	display: none !important;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	/* Figmaの字間はデザイン上の見え方。ブラウザの日本語表示では入れない（letter-spacing 禁止） */
	overflow-wrap: anywhere;
	/* 画面の外に置いてあるもの（閉じているスマホメニュー、右端からはみ出す飾り）で
	   横スクロールが出ないようにする。clip なら固定表示のヘッダーには影響しない */
	overflow-x: clip;
}

/* スマホの折り返し。
   段落の最後の行が1〜2文字だけにならないようにするのは、text-wrap: pretty ではなく、最後の数文字を
   <span class="u-sp-nowrap"> で囲んで行う（固定ページは文の中に直接、記事は inc/news.php の mytheme_content_keep_last_chars）。
   text-wrap: pretty は、iPhone の Safari（iOS 26）では段落全体の行の長さをそろえようとして、
   まだ文字が入る所で行を折り返し、右に空きが出たため使わない（2026-09-30。9月27日から使っていた） */
@media (max-width: 1023px) {

	body {
		line-break: strict; /* 「ォ」「ー」などで行を始めない */
	}
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition), opacity var(--transition);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

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

/* 強調。700（太字）は読み込んでいないので、500で強調する */
strong,
b {
	font-weight: 500;
}

/* 見出しは折り返し位置を日本語として自然な場所にする。<br>を減らすため */
h1, h2, h3, h4 {
	font-weight: 500;
	line-height: var(--lh-heading);
	word-break: auto-phrase;
}

/* キーボード操作時だけフォーカスリングを出す */
:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* ---- ユーティリティ ---- */

/* 改行制御。<br> にだけ使う。テキストの出し分けには使わない */
.u-pc-only {
	display: block;
}

.u-sp-only {
	display: none;
}

@media (max-width: 1023px) {
	.u-pc-only {
		display: none;
	}

	.u-sp-only {
		display: block;
	}
}

/* 切りたくない塊 */
.u-nowrap {
	white-space: nowrap;
}

/* スマホでだけ切りたくない塊（段落の最後が「ます。」だけの行にならないように、など） */
@media (max-width: 1023px) {

	.u-sp-nowrap {
		white-space: nowrap;
	}

	/* 真ん中にそろえた見出しの、行の終わりが「、」「。」の行だけを20px右へ寄せて、見た目の真ん中にそろえる
	  （参考資料18の5.の6）。その1行を <span class="u-sp-shift">…</span> で囲む（囲んだ行の後ろは <br>）。
	   見出しの全部の行が「、」「。」で終わるときは、見出しに左の余白40pxを付けるほうが簡単 */
	.u-sp-shift {
		padding-left: 2.5rem; /* 40px（真ん中が20px右へ寄る） */
	}

	/* 長い本文を、スマホでだけ段落に分ける（段落のあいだ50px。TOPの Our Promise の本文と同じ）。
	   段落ひとつを <span class="u-sp-para">…</span> で囲む。PCでは文の続きのまま（改行はPCの <br class="u-pc-only"> のとおり）。
	   段落のあいだにPCの改行（<br>）があることがあるので、「+」ではなく「~」でつなぐ */
	.u-sp-para {
		display: block;
	}

	.u-sp-para ~ .u-sp-para {
		margin-top: 3.125rem; /* 50px */
	}
}

/* 画面には出さず、スクリーンリーダーだけに読ませる。
   .screen-reader-text は WordPress が、.screen-reader-response は Contact Form 7 が出す同じ役割のクラス
   （プラグインのCSSを読み込んでいないので、ここで隠す） */
.u-visually-hidden,
.screen-reader-text,
.screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- 動きを減らす設定への対応 ---- */
/* OS側で「視差効果を減らす」が有効なとき、アニメーションを一括で止める */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================
   3. レイアウト
   ========================================================== */

/* ----------------------------------------------------------
   コンテンツ幅
   ---------------------------------------------------------- */

.l-inner {
	width: var(--inner-width);
	max-width: calc(100% - var(--inner-gutter) * 2);
	margin-inline: auto;
}

/* 1400pxの幅（枠のある箱、FVの文字の列） */
/* 左右の余白はヘッダーと同じにする。画面が狭くなっても、ロゴの左端と枠の左端がそろう */
.l-inner--wide {
	width: var(--inner-wide);
	max-width: calc(100% - var(--header-gutter) * 2);
}

/* SPは内側の幅（740px）をそのまま固定する。
   左右の余白ではなく幅を固定するのは、スクロールバーが出る／出ないで
   中身の幅が変わり、文字の折り返し位置がずれてしまうのを防ぐため。
   余りは margin-inline: auto が左右に振り分ける。 */
@media (max-width: 1023px) {
	.l-inner {
		max-width: 100%;
	}
}

/* ページの本文。ヘッダーはページ先頭のFV（写真）に重ねるので、上の余白は取らない */
.l-main {
	display: block;
}

/* ----------------------------------------------------------
   ヘッダー
   背景なしで、ページ先頭のFV（写真）に重なる。
   FVの目印（.js-header-marker）を通り過ぎると上に貼り付き、背景が白になる
   （.is-stuck は main.js が付ける）。目印が無いページでは最初から貼り付く。
   ---------------------------------------------------------- */

.l-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-header);
	color: var(--color-text);
}

/* 貼り付いたら、白い背景で上からふわりと現れる。
   動かすのは top。ハンバーガーのメニュー（.l-nav）を包む .l-header と .l-header__inner には transform を付けない。
   付けるとそこが position: fixed の基準になり、1100px以下のメニューが画面いっぱいに開かなくなる
   （アニメーションで付けた値も、終わったあとに残る） */
.l-header.is-stuck {
	position: fixed;
	background-color: var(--color-white);
	animation: header-slide-in 0.4s ease both;
}

@keyframes header-slide-in {
	from {
		top: calc(var(--header-height) * -1);
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

.l-header__inner {
	display: flex;
	align-items: center;
	height: var(--header-height);
	padding-inline: var(--header-gutter);
}

/* 貼り付いたときの高さ。PCはふだんと同じで、SPだけ上下の余白を詰めて低くする（1. 設定の --header-height-stuck） */
.l-header.is-stuck .l-header__inner {
	height: var(--header-height-stuck);
}

/* ---- ロゴ・事業説明・サイト名 ---- */

.l-header__brand {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.9375rem; /* 15px */
}

/* ロゴかサイト名（どちらもホームへのリンク）にマウスを載せたら、まとめて薄くする。事業説明の行はリンクではない */
.l-header__brand:has(a:hover) {
	opacity: 0.7;
}

.l-header__logo {
	width: 3.875rem; /* 62px */
	height: auto;
}

/* 事業説明の行。TOP・運営代行・清掃代行・募集では h1（文はページごと。header.php）、ほかのページでは p。
   幅は、どのページでも事業説明（MYTHEME_TAGLINE）と同じにする（文字22.25個分）。
   ページごとの文は短いので、そのままだとページによってナビの位置が横にずれるため。事業説明の文を変えたら、この値も直す */
.l-header__tagline {
	min-width: 22.25em;
	font-size: var(--fs-caption);
	font-weight: 400;
	line-height: var(--lh-flat);
	white-space: nowrap;
}

.l-header__name {
	display: block;
	margin-top: 0.5625rem; /* 9px */
	font-size: 1.5625rem;  /* 25px */
	font-weight: 500;
	line-height: var(--lh-flat);
	white-space: nowrap;
}

/* ロゴとナビのあいだの縦線 */
.l-header__divider {
	flex-shrink: 0;
	width: 1px;
	height: 3rem; /* 48px */
	margin-inline: 1.8125rem 1.875rem; /* 29px 30px */
	background-color: var(--color-lavender-pale);
}

/* ---- グローバルナビ（広い画面） ---- */

/* ハンバーガーのメニューの板と中身の入れ物。広い画面ではレイアウトに関わらせない */
.l-nav__panel,
.l-nav__body {
	display: contents;
}

/* 広い画面でも、板は透明にしておく（display: contents なので、中のナビの見え方は変わらない）。
   1にしておくと、画面の幅が1100px以下へ変わったとき（タブレットを縦に持ち替えたときなど）に、
   閉じたメニューの板が一瞬出て消えてしまう */
.l-nav__panel {
	opacity: 0;
}

.l-nav__list {
	display: flex;
	gap: 1.875rem; /* 30px */
}

.l-nav__link {
	position: relative;
	display: block;
	padding-block: 0.5rem;
	font-size: var(--fs-small);
	line-height: var(--lh-flat);
	white-space: nowrap;
}

.l-nav__link:hover {
	opacity: 0.7;
}

/* 広い画面のリンクの下線（青→ピンクのグラデーション。お問い合わせのボタンと同じ色）。
   2026-10-30 お客様のご依頼「押せることが分からなかった」。ハンバーガーのメニューの中では出さない。
   太さは2px（淡い色なので1pxだと見えにくい）。文字との間は6px（リンクの下の余白8pxの中に置く。ユーザー指摘で4px→6px） */
.l-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--gradient-brand);
}

/* 読み込み直後に、下線を左から右へ引く（0.6秒後から0.7秒。1回だけ）。
   clip-path で隠した部分を開くので、グラデーションの色は伸び縮みしない。「動きを減らす」設定では最初から引いてある */
@media (prefers-reduced-motion: no-preference) {
	.l-nav__link::after {
		clip-path: inset(0 100% 0 0);
		animation: nav-underline-draw 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.6s forwards;
	}
}

@keyframes nav-underline-draw {
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* 色を変える語（header.php の $nav_items）。「運営」＝青、「清掃」＝濃いピンク（各ページの上部の見出しと同じ） */
.l-nav__accent--blue {
	color: var(--color-blue);
}

.l-nav__accent--pink {
	color: var(--color-pink-deep);
}

/* ハンバーガーのメニューにだけ出す項目（広い画面では右のボタンになっている） */
.l-nav__item--sp {
	display: none;
}

/* ハンバーガーのメニューの中にだけ出すもの（英字・右の矢印・お問い合わせの欄） */
.l-nav__en,
.l-nav__arrow,
.l-nav__contact {
	display: none;
}

/* ---- 右のボタン（清掃スタッフ募集・お問い合わせ） ---- */

.l-header__actions {
	display: flex;
	flex-shrink: 0;
	gap: 1.25rem; /* 20px */
	margin-left: auto;
}

.l-header__btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;    /* 6px */
	width: 12.5rem;   /* 200px */
	height: 3.125rem; /* 50px */
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
	color: var(--color-white);
	font-size: var(--fs-small);
	line-height: var(--lh-flat);
	white-space: nowrap;
}

.l-header__btn:hover {
	opacity: 0.7;
}

/* アイコンの大きさは、ボタンの文字に対する比（em）で書く。封筒は文字と同じ16px */
.l-header__btn .c-icon {
	font-size: 1em;
}

/* 枠線だけのボタン（清掃スタッフ募集）。枠と文字をグラデーションにする。アイコンは青 */
.l-header__btn--outline {
	border: 1px solid transparent;
	background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-brand) border-box;
	color: var(--color-blue);
}

/* ほうきは19px（文字16pxの1.19倍） */
.l-header__btn--outline .c-icon {
	font-size: 1.1875em;
}

.l-header__btn--outline .l-header__btn-text {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- ハンバーガーボタン（画面が狭いときだけ表示） ---- */

.c-hamburger {
	display: none;
	position: relative;
	z-index: 2; /* 開いたメニューより上に置き、開いた状態でも押せるようにする */
	width: 2.75rem; /* 44px タップ領域を確保する */
	height: 2.75rem;
	min-width: 44px; /* 細い画面でも指で押せる大きさを残す */
	min-height: 44px;
	margin-left: 1.25rem;
	place-items: center;
}

.c-hamburger__bars,
.c-hamburger__bars::before,
.c-hamburger__bars::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: var(--color-text);
	transition: transform var(--transition), background-color var(--transition);
}

.c-hamburger__bars {
	position: relative;
}

.c-hamburger__bars::before,
.c-hamburger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.c-hamburger__bars::before {
	top: -0.5rem;
}

.c-hamburger__bars::after {
	top: 0.5rem;
}

/* 開いているあいだは×印にする */
.c-hamburger[aria-expanded="true"] .c-hamburger__bars {
	background-color: transparent;
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bars::before {
	transform: translateY(0.5rem) rotate(45deg);
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bars::after {
	transform: translateY(-0.5rem) rotate(-45deg);
}

/* ---- 1100px以下：ナビのサービス2項目を外し、ハンバーガーから開くメニューにする ----
   1100px は、ルートフォントが下限（11.44px）で止まり、ここより狭いとヘッダーが1行に収まらなくなる幅
   （docs/06 この案件での判断 2）。右のボタンは1023px以下になるまでヘッダーに残す。
   この値を変えるときは、main.js の NAV_COLLAPSE_WIDTH も同じ値にする。
   メニューの見た目は、下の「ハンバーガーのメニュー」。 */

@media (max-width: 1100px) {

	.l-header__divider {
		display: none;
	}

	.c-hamburger {
		display: grid;
	}

	/* 開いたメニューの上でも、ロゴは見せておく（×ボタンも同じくメニューより上） */
	.l-header__brand {
		position: relative;
		z-index: 2;
	}

	/* メニューは右のボタンも覆うので、メニューの中には全項目を並べる */
	.l-nav__item--sp {
		display: block;
	}
}

/* ---- 1023px以下（SP）：右のボタンはメニューの中へ ----
   貼り付き方はPCと同じ。TOPではFVの写真の上に透明で重なり、FVを過ぎると白で上に貼り付く
   （2026-09-27 ユーザー指示。参考：nisiogi.jp）。FVの無いページは、読み込んだときから貼り付く */

/* 大きさと位置は、FigmaのSPデザイン（2026-09-27）のとおり。
   ロゴ86px・事業説明24px・サイト名40px。上下の余白は32px（ロゴの上端が y=32）。
   SPは画面の幅に比例して大きさが決まるので、事業説明はどの機種でも1行に収まる。
   貼り付いたときは、ロゴと文字の大きさはそのままで、上下の余白だけ16pxに詰める（2026-09-28 ユーザー決定） */
@media (max-width: 1023px) {

	.l-header__brand {
		flex-shrink: 1;
		min-width: 0;
		gap: 0.9375rem; /* 15px */
	}

	.l-header__logo {
		width: 5.375rem; /* 86px（高さ90px） */
	}

	.l-header__name {
		margin-top: 0.8125rem; /* 13px */
		font-size: 2.5rem;     /* 40px */
	}

	.l-header__actions {
		display: none;
	}

	/* 押せる範囲は44px四方以上。見えている線（52.5px）の右端を、左右の余白30pxの位置にそろえる。
	   押せる範囲は右の余白までは広げるが、画面の外には出さない（320pxでは44pxが余白より大きくなるため） */
	.c-hamburger {
		flex-shrink: 0;
		width: max(5.5rem, 44px);  /* 88px */
		height: max(5.5rem, 44px);
		margin-left: auto;
		margin-right: max(calc((3.28125rem - max(5.5rem, 44px)) / 2), calc(var(--header-gutter) * -1));
	}

	/* 線はFigmaのアイコン（Font Awesome の bars・細字）の形。幅52.5px・太さ3.75px・間隔20.6px、端は丸い */
	.c-hamburger__bars,
	.c-hamburger__bars::before,
	.c-hamburger__bars::after {
		width: 3.28125rem; /* 52.5px */
		height: max(2px, 0.234375rem); /* 3.75px 細くしすぎると消える */
		border-radius: var(--radius-pill);
	}

	.c-hamburger__bars::before {
		top: -1.2875rem; /* 20.6px */
	}

	.c-hamburger__bars::after {
		top: 1.2875rem;
	}

	.c-hamburger[aria-expanded="true"] .c-hamburger__bars::before {
		transform: translateY(1.2875rem) rotate(45deg);
	}

	.c-hamburger[aria-expanded="true"] .c-hamburger__bars::after {
		transform: translateY(-1.2875rem) rotate(-45deg);
	}
}

/* メニュー・ポップアップが開いているあいだ、背面をスクロールさせない。
   html の overflow を変えるとスクロールバーが消えて画面幅が変わってしまうので、
   body ごと固定して「スクロールする中身をなくす」方法で止めている。
   開いたときの位置は main.js が覚えていて、閉じたら元に戻す。 */
body.is-nav-open,
body.is-dialog-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* ----------------------------------------------------------
   ハンバーガーのメニュー（1100px以下）
   画面いっぱいに淡い青→白→淡いピンクの地をふわっと出し、少し遅れて中身を上から順に浮かび上がらせる。
   閉じるときは、全体をふわっと消す。ロゴと×ボタンは、メニューより上に重ねて見せたままにする。
   1024〜1100pxは2列（左：ページへのリンク／右：お問い合わせ）、1023px以下は1列で上から積む。
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

	/* 画面全体を覆う入れ物。閉じているあいだは、下のページを押せるようにしておく */
	.l-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		margin-left: 0;
		pointer-events: none;
	}

	.l-nav.is-open {
		pointer-events: auto;
	}

	/* 地の板。動かさずに、不透明度だけを変えてふわっと出す。
	   上の余白は、ヘッダー（ロゴと×）の下端まで。SPはヘッダーの高さが幅で変わるので、
	   開くたびに main.js が測って --nav-top に入れる */
	.l-nav__panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		padding-top: var(--nav-top, var(--header-height));
		background: linear-gradient(160deg, var(--color-bg-blue), var(--color-white) 50%, var(--color-bg-pink));
		opacity: 0;
		visibility: hidden;
		/* 閉じるときは、消え終わってから隠す */
		transition: opacity var(--transition), visibility 0s linear var(--transition-time);
	}

	/* 開くときは、すぐに見える状態にする。
	   隠れたままだと、開いた直後に最初のリンクへフォーカスを移せない（main.js） */
	.l-nav.is-open .l-nav__panel {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease, visibility 0s;
	}

	/* 中身。画面に収まらないときは、この中だけがスクロールする（ロゴと×には重ならない）。
	   左右は、中身の幅を1200px相当にそろえる（狭いときはヘッダーと同じ余白）。
	   上下は、収まるときは真ん中に置く（safe に対応していないブラウザでは上に寄せる） */
	.l-nav__body {
		display: grid;
		flex: 1;
		grid-template-columns: minmax(0, 1fr) 26.25rem; /* 右のお問い合わせは420px相当 */
		align-items: start;
		align-content: start;
		align-content: safe center;
		column-gap: 6.25rem; /* 100px相当 */
		min-height: 0;
		/* 下を広めにとり、真ん中より少し上に見えるようにする */
		padding: 3.75rem max(var(--header-gutter), calc((100% - 75rem) / 2)) 8.75rem; /* 上 60px 下 140px相当 */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* ---- ページへのリンク ---- */

	.l-nav__list {
		display: block;
		border-top: 1px solid var(--color-lavender-pale);
	}

	.l-nav__item {
		border-bottom: 1px solid var(--color-lavender-pale);
	}

	/* 1項目。左に英字と名前、右に丸い矢印。行ぜんたいを押せる */
	.l-nav__link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 1.25rem; /* 20px相当 */
		padding-block: 2.1875rem; /* 35px相当 */
		font-size: var(--fs-h3); /* 名前は32px相当 */
		line-height: var(--lh-tight);
		white-space: normal;
	}

	/* ハンバーガーのメニューでは、広い画面の下線は出さない（右の丸い矢印で押せると分かる） */
	.l-nav__link::after {
		content: none;
	}

	/* 英字（飾りなので読み上げない。header.php）。
	   小さい文字なので、グラデーションではなく青一色にする（淡いピンクの側が読みにくくなるため） */
	.l-nav__en {
		display: block;
		grid-column: 1;
		margin-bottom: 0.75rem; /* 12px相当 */
		color: var(--color-blue);
		font-family: var(--font-en);
		font-size: var(--fs-lead-l); /* 20px相当 */
		line-height: var(--lh-flat);
		letter-spacing: 0.04em;
	}

	/* 折り返すのは、名前の <wbr> の位置だけ（header.php）。それでも入らないときは、どこででも折り返す */
	.l-nav__name {
		grid-column: 1;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* 右の丸い矢印。大きさは名前の文字に対する比（em）で書く */
	.l-nav__arrow {
		display: grid;
		grid-row: 1 / span 2;
		grid-column: 2;
		place-items: center;
		width: 1.75em;
		height: 1.75em;
		border: 1px solid var(--color-lavender-pale);
		border-radius: 50%;
		color: var(--color-blue);
	}

	.l-nav__arrow .c-icon {
		font-size: 0.5em;
	}

	/* いま見ているページは、丸をグラデーションで塗る */
	.l-nav__link[aria-current="page"] .l-nav__arrow {
		border-color: transparent;
		background: var(--gradient-brand) border-box;
		color: var(--color-white);
	}

	/* ---- お問い合わせ（フォーム・LINE・電話）とSNS ----
	   白い地の箱にまとめ、中身は中央にそろえる */

	.l-nav__contact {
		display: flex;
		flex-direction: column;
		gap: 0.875rem; /* 14px相当 */
		padding: 2.5rem 2.1875rem; /* 40px 35px相当 */
		border-radius: var(--radius-md);
		background-color: var(--color-white);
		text-align: center;
	}

	/* 英字「Contact」。リンクの英字と同じ青 */
	.l-nav__contact-en {
		margin-bottom: 0.375rem; /* 6px相当 */
		color: var(--color-blue);
		font-family: var(--font-en);
		font-size: var(--fs-h3); /* 32px相当 */
		line-height: var(--lh-flat);
		letter-spacing: 0.04em;
	}

	/* お問い合わせ・LINEのボタン。ヘッダーの「お問い合わせ」と同じ形 */
	.l-nav__btn {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
		height: 4.375rem; /* 70px相当 */
		min-height: 44px; /* 細い画面でも指で押せる高さを残す */
		border-radius: var(--radius-pill);
		background: var(--gradient-brand);
		color: var(--color-white);
		font-size: var(--fs-lead-l); /* 20px相当 */
		line-height: var(--lh-flat);
	}

	.l-nav__btn:hover {
		opacity: 0.7;
	}

	.l-nav__btn .c-icon {
		font-size: 1em;
	}

	.l-nav__btn--line {
		background: var(--color-line-app);
	}

	/* LINEのアイコンは余白込みの形なので、少し大きくして見た目をそろえる */
	.l-nav__btn--line .c-icon {
		font-size: 1.3em;
	}

	/* 電話番号と受付時間 */
	.l-nav__tel {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0.5rem; /* 8px相当 */
	}

	.l-nav__tel a {
		display: inline-flex;
		align-items: center;
		gap: 0.3em;
		min-height: 44px;
		font-size: var(--fs-emph); /* 30px相当 */
		font-weight: 500;
		line-height: var(--lh-flat);
	}

	.l-nav__tel a:hover {
		opacity: 0.7;
	}

	.l-nav__tel .c-icon {
		color: var(--color-blue);
		font-size: 0.8em;
	}

	.l-nav__hours {
		color: var(--color-text-sub);
		font-size: var(--fs-small); /* 16px相当 */
		line-height: var(--lh-flat);
	}

	/* SNS。アイコンの大きさは、この欄の文字に対する比（em）で書く（フッターと同じ比） */
	.l-nav__sns {
		display: flex;
		justify-content: center;
		gap: 0.25em;
		margin-top: 0.25rem;
		font-size: var(--fs-h4); /* 24px相当 */
		line-height: var(--lh-flat);
	}

	.l-nav__sns-link {
		display: grid;
		place-items: center;
		width: 2em;
		height: 2em;
		min-width: 44px; /* 指で押せる大きさ */
		min-height: 44px;
	}

	.l-nav__sns-link:hover {
		opacity: 0.7;
	}

	.l-nav__sns-icon--instagram {
		font-size: 0.9375em;
	}

	/* ---- 中身が、上から順にふわっと浮かび上がる ----
	   閉じるときは、板と一緒に消し、消え終わってから元の位置へ戻す */

	.l-nav__item,
	.l-nav__contact {
		opacity: 0;
		transform: translateY(var(--fade-move));
		transition: opacity var(--transition), transform 0s linear var(--transition-time);
	}

	.l-nav.is-open .l-nav__item,
	.l-nav.is-open .l-nav__contact {
		opacity: 1;
		transform: none;
		transition: opacity var(--fade-duration) ease var(--nav-delay), transform var(--fade-duration) ease var(--nav-delay);
	}

	/* 出はじめる時間（開いてから）。0.08秒ずつずらす。項目が4つ以上になったら、ここに足す */
	.l-nav__item,
	.l-nav__contact {
		--nav-delay: 0.39s;
	}

	.l-nav__item:nth-child(1) {
		--nav-delay: 0.15s;
	}

	.l-nav__item:nth-child(2) {
		--nav-delay: 0.23s;
	}

	.l-nav__item:nth-child(3) {
		--nav-delay: 0.31s;
	}
}

/* 1023px以下（SP）：1列にして、上から積む */
@media (max-width: 1023px) {

	.l-nav__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 5rem; /* 40px */
		align-content: start;
		padding: 3.75rem var(--header-gutter) 7.5rem; /* 上 30px 下 60px */
	}

	/* 名前は、320pxでもいちばん長い名前（15文字）が1行に収まる大きさ */
	.l-nav__link {
		column-gap: 2.5rem;    /* 20px */
		padding-block: 2.5rem; /* 40px */
		font-size: var(--fs-h5); /* 40px */
	}

	.l-nav__en {
		margin-bottom: 0.875rem; /* 14px */
		font-size: max(1.875rem, 12px); /* 30px。細い画面でも12pxを下回らない */
	}

	.l-nav__contact {
		gap: 1.5rem;      /* 12px */
		padding: 3.75rem; /* 30px */
	}

	.l-nav__contact-en {
		margin-bottom: 0.5rem;
	}

	.l-nav__btn {
		height: 6.25rem; /* 100px */
		font-size: var(--fs-lead); /* 36px */
	}

	.l-nav__hours {
		font-size: var(--fs-xs); /* 24px */
	}
}

/* 「視差効果を減らす」設定のときは、中身を順にずらさず、板と一緒に出す */
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {

	.l-nav.is-open .l-nav__item,
	.l-nav.is-open .l-nav__contact {
		transition-delay: 0s;
	}
}

/* ----------------------------------------------------------
   フッター
   PC：左にロゴ・事業説明・サイト名・会社情報、右にメニューと公式SNS（上下と区切りに線）、
       左下にコピーライト（右のいちばん下の線と、下の端をそろえる）
   SP：上から「ロゴ → 会社情報 → メニュー → SNS → コピーライト」の順に、中央揃えで積む
   ---------------------------------------------------------- */

.l-footer {
	padding-block: var(--section-gap);
	background-color: var(--color-white);
}

/* 右のメニューは2行ぶんの高さを使い、左の下の行にコピーライトを置く */
.l-footer__inner {
	display: grid;
	grid-template-columns: 1fr 23.8125rem; /* 右のメニューは381px */
	grid-template-rows: auto auto;
	column-gap: 3rem;
}

.l-footer__info {
	grid-column: 1;
	grid-row: 1;
}

.l-footer__side {
	grid-column: 2;
	grid-row: 1 / 3;
}

.l-footer__brand {
	display: flex;
	align-items: center;
	gap: 1.25rem; /* 20px */
	width: fit-content;
}

.l-footer__brand:hover {
	opacity: 0.7;
}

.l-footer__logo {
	width: 5.75rem; /* 92px */
	height: auto;
}

.l-footer__tagline {
	display: block;
	font-size: var(--fs-body);
	line-height: var(--lh-flat);
}

.l-footer__name {
	display: block;
	margin-top: 0.6875rem; /* 11px */
	font-size: var(--fs-emph);
	font-weight: 500;
	line-height: var(--lh-flat);
}

.l-footer__company {
	margin-top: 1.9375rem; /* 31px */
	font-size: var(--fs-body);
	line-height: 1.765; /* 30/17 */
}

/* 右のメニューのいちばん下の線と、下の端をそろえる */
.l-footer__copyright {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	padding-top: 3.875rem; /* 62px */
	font-size: var(--fs-body);
	line-height: var(--lh-flat);
}

.l-footer__copyright small {
	font-size: inherit;
}

/* 行の高さは li に効かせる（a だけに付けると、li が本文の行間のまま高くなる） */
.l-footer__nav-list {
	padding-block: 2.5rem; /* 40px */
	border-block: 1px solid var(--color-line);
	font-size: var(--fs-body);
	line-height: var(--lh-flat);
}

.l-footer__nav-list li + li {
	margin-top: 2.5rem; /* 40px */
}

.l-footer__nav-list a:hover {
	opacity: 0.7;
}

.l-footer__sns {
	display: flex;
	align-items: center;
	gap: 0.5882em; /* アイコンのあいだ（PC 10px） */
	padding-block: 2.5rem; /* 40px */
	border-bottom: 1px solid var(--color-line);
	font-size: var(--fs-body);
	line-height: var(--lh-flat);
}

/* 「公式SNS：」と最初のアイコンのあいだは、PCで5px */
.l-footer__sns-label {
	margin-right: -0.2941em;
}

.l-footer__sns-link {
	display: inline-flex;
}

.l-footer__sns-link:hover {
	opacity: 0.7;
}

/* アイコンの大きさとあいだは、文字（PC 17px）に対する比（em）で書く。
   SPで文字が大きくなると、同じ比率で大きくなる。PCでは Instagram 15px、Threads 16px */
.l-footer__sns-icon--instagram {
	font-size: 0.8824em;
}

.l-footer__sns-icon--threads {
	font-size: 0.9412em;
}

/* ---- 1023px以下（SP）：中央揃えで上から積む ----
   ロゴを上に置き、会社情報は行のあいだを広めにとる（2026-09-26 ユーザー指定。前回の案件 arts のフッターの形） */

@media (max-width: 1023px) {

	.l-footer__inner {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		text-align: center;
	}

	.l-footer__info,
	.l-footer__side,
	.l-footer__copyright {
		grid-column: 1;
		grid-row: auto;
	}

	/* ロゴの下に、事業説明とサイト名を続ける */
	.l-footer__brand {
		flex-direction: column;
		gap: 1.875rem; /* 30px */
		margin-inline: auto;
	}

	.l-footer__logo {
		width: 8.75rem; /* 140px */
	}

	.l-footer__tagline {
		font-size: var(--fs-small);
		line-height: var(--lh-tight);
	}

	.l-footer__name {
		margin-top: 0.75rem; /* 12px */
	}

	/* 行のあいだを広めにとり、【】ごとに少しあける */
	.l-footer__company {
		margin-top: 3.75rem; /* 60px */
		line-height: var(--lh-normal);
	}

	.l-footer__company p + p {
		margin-top: 1.875rem; /* 30px */
	}

	.l-footer__side {
		margin-top: 5rem; /* 80px */
	}

	.l-footer__sns {
		justify-content: center;
	}

	.l-footer__copyright {
		margin-top: 3.75rem; /* 60px */
		padding-top: 0;
		font-size: var(--fs-small);
	}
}

/* ==========================================================
   4. 共通パーツ
   ========================================================== */

/* ----------------------------------------------------------
   アイコン
   assets/icons/ のSVGを mytheme_icon() で出力すると、このクラスが付く。
   大きさは親の font-size で決まる。個別に width を指定しない。
   ---------------------------------------------------------- */

.c-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
}

/* ----------------------------------------------------------
   本文へスキップ
   ---------------------------------------------------------- */

.c-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: calc(var(--z-header) + 1);
	padding: 0.75rem 1.25rem;
	background-color: var(--color-white);
	color: var(--color-primary);
	transform: translateY(-200%);
}

.c-skip-link:focus {
	transform: translateY(0);
}

/* ----------------------------------------------------------
   ボタン
   ---------------------------------------------------------- */

.c-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	min-width: 20rem;    /* 320px */
	min-height: 3.75rem; /* 60px */
	padding-inline: 1.5rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: var(--lh-flat);
	white-space: nowrap;
}

.c-btn:hover {
	opacity: 0.7;
}

/* 枠線だけのボタン */
.c-btn--outline {
	background-color: var(--color-white);
	color: var(--color-primary);
}

@media (max-width: 1023px) {

	.c-btn {
		min-width: 0;
		min-height: 6.25rem; /* 100px */
		padding-inline: 3rem;
		font-size: var(--fs-lead);
	}
}

/* ----------------------------------------------------------
   本文の中のリンク
   ---------------------------------------------------------- */

/* 文字色は本文のまま、下線だけ付ける */
.c-textlink {
	color: var(--color-primary);
	text-decoration: underline;
}

.c-textlink:hover {
	opacity: 0.7;
}

/* 別タブで開く外部リンク。末尾に矢印アイコンが付く */
.c-extlink {
	color: var(--color-primary);
	text-decoration: underline;
}

.c-extlink .c-icon {
	margin-left: 0.25em;
	font-size: 0.85em;
}

.c-extlink:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------
   パンくず
   ---------------------------------------------------------- */

.c-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-caption);
	line-height: var(--lh-flat);
}

.c-breadcrumb a:hover {
	opacity: 0.7;
}

.c-breadcrumb__sep {
	font-size: 0.75em;
	opacity: 0.7;
}

/* ----------------------------------------------------------
   下層ページの上部（パンくず・キャッチ・h1・リード・ボタン・写真・英字）
   template-parts/page-hero.php
   写真のある形（--photo）は、Figmaの下層ページのFV（運営代行 node 240:9 ほか。7ページ共通の形）。
   写真の無い形は、見出しだけの短い形（404・送信完了など、Figmaに上部の無いページ）
   ---------------------------------------------------------- */

/* ページの色（色を変える語・英字・ボタン）。--blue＝運営代行、--pink＝清掃代行。
   清掃代行は、英字とボタンがピンク、色を変える語（「清掃」）だけ濃いピンク（Figma 384:9 のとおり） */
.p-page-hero--blue {
	--hero-color: var(--color-blue);
}

.p-page-hero--pink {
	--hero-color: var(--color-pink);
	--hero-accent: var(--color-pink-deep);
}

/* ---- 写真の無い形 ----
   ヘッダーが最初から上に貼り付くので、その高さぶん上を空ける */
.p-page-hero {
	position: relative;
	padding-block: calc(var(--header-height) + 5rem) 4rem;
}

.p-page-hero__en {
	margin-top: 1.5rem;
	color: var(--hero-color);
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	line-height: var(--lh-flat);
}

.p-page-hero__catch {
	display: block;
	margin-top: 1.5rem;
	font-size: var(--fs-lead-l);
	line-height: var(--lh-heading);
}

/* 上部の大きな見出し。h1 のページと、p のページ（ヘッダーの行が h1 のページ）があるので、
   太さ・行間・折り返し方は h1 の既定に頼らず、ここで決める */
.p-page-hero__title {
	margin-top: 0.5rem;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-heading);
	word-break: auto-phrase;
}

.p-page-hero__name {
	display: block;
}

.p-page-hero__accent {
	color: var(--hero-accent, var(--hero-color));
}

.p-page-hero__lead {
	margin-top: 2rem;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* 見出しを中央に置く版（404・完了ページ） */
.p-page-hero--center {
	text-align: center;
}

.p-page-hero--center .c-breadcrumb {
	justify-content: center;
}

/* ---- 写真のある形（FV） ----
   高さは画面の高さに合わせ、文字の塊を上下の真ん中に置く（TOPのFVと同じ。2026-09-28）。
   画面の高さが970pxのとき、Figmaと同じ位置になる（文字の塊は 229〜741px）。
   上下の余白128pxは、上のヘッダー（90px）と左下の Scroll をよけるため。これより低い画面では、文字が収まる高さで止まる */
.p-page-hero--photo {
	isolation: isolate; /* 写真（z-index: -1）を、この欄の中身の下に置く */
	display: grid;
	align-content: center;
	min-height: 100vh;  /* 下の svh に対応していないブラウザ用 */
	min-height: 100svh; /* スマホ・タブレットでは、ブラウザの上下のバーを除いた高さ */
	padding-block: 8rem; /* 128px */
	overflow: hidden;
}

/* 写真の枠。左端は、文字の列（1400px）の左端から260px右（1920pxで x=520）。右端は画面の右端（TOPのFVと同じ） */
.p-page-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: max(calc(50% - 27.5rem), calc(var(--header-gutter) + 16.25rem));
	left: round(down, max(calc(50% - 27.5rem), calc(var(--header-gutter) + 16.25rem)), 1px);
	z-index: -1;
	animation: fv-fade-in 1s ease backwards;
}

/* 切り抜く位置は、page-hero.php に渡す photo_pos（書かなければ中央） */
.p-page-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-photo-pos, 50% 50%);
}

/* 左へ白くフェードする。写真の枠の左から74%まで（Figmaの 1040 / 1400） */
.p-page-hero__photo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 74.2857%;
	background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white-80) 50%, transparent 100%);
}

.p-page-hero__inner {
	position: relative;
}

/* パンくず（18px。区切りの山括弧は Light、いまいるページは弱い色） */
.p-page-hero--photo .c-breadcrumb {
	gap: 1.0625rem; /* 17px（山括弧の字形の左右の空きと合わせて、文字から20px） */
	font-size: var(--fs-lead);
}

.p-page-hero--photo .c-breadcrumb__sep {
	display: flex; /* アイコンの下の余白を出さない（行の高さを文字と同じ18pxにする） */
	font-size: 1em;
	opacity: 1;
}

.p-page-hero--photo .c-breadcrumb [aria-current] {
	color: var(--color-text-weak);
}

/* 2段目より後ろのリンク（お知らせの記事の「お知らせ」）も弱い色。ホームだけ本文の色（Figma 317:2923） */
.p-page-hero--photo .c-breadcrumb a:not(:first-child) {
	color: var(--color-text-weak);
}

/* パンくずは1行。いまいるページの名前が長いとき（お知らせの記事の題）は、末尾を「…」にする */
.p-page-hero--photo .c-breadcrumb {
	flex-wrap: nowrap;
}

.p-page-hero--photo .c-breadcrumb > * {
	flex-shrink: 0;
}

.p-page-hero--photo .c-breadcrumb [aria-current] {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* お知らせ・ポリシー・お問い合わせ（--gradient）：右下の英字は、青→ピンクのグラデーション（Figma 317:2659 ほか） */
.p-page-hero--gradient .p-page-hero__en {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 写真の無い形（送信完了）では、グラデーションを文字の幅に合わせる */
.p-page-hero--gradient:not(.p-page-hero--photo) .p-page-hero__en {
	width: fit-content;
}

.p-page-hero--center .p-page-hero__en {
	margin-inline: auto;
}

/* キャッチ（36px）とサービス名・ページ名（60px）。Figmaの行間は文字の大きさと同じ。
   キャッチは h1 の中（運営代行）でも、h1 の前の p（キャッチを h1 に含めないページ）でも同じ見た目 */
.p-page-hero--photo .p-page-hero__title {
	margin-top: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-flat);
}

.p-page-hero--photo .p-page-hero__catch {
	margin-top: 0;
	font-size: var(--fs-catch);
	font-weight: 400;
	line-height: var(--lh-flat);
}

/* パンくずの次（キャッチか h1）は80px下 */
.p-page-hero--photo .c-breadcrumb + * {
	margin-top: 5rem; /* 80px */
}

/* キャッチとサービス名のあいだ */
.p-page-hero--photo .p-page-hero__catch + .p-page-hero__name,
.p-page-hero--photo .p-page-hero__catch + .p-page-hero__title {
	margin-top: 2rem; /* 32px */
}

/* お知らせの記事（--article）：h1 は記事の題（60px・行間90px・幅1000pxで折り返す）。
   題のすぐ上に、公開日とカテゴリーの札（2026-09-29 ユーザー決定。Figmaには無いので、一覧のカードの日付と札と同じ形） */
.p-page-hero--article .p-page-hero__title {
	max-width: 62.5rem; /* 1000px */
	line-height: 1.5;   /* 90/60 */
}

.p-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1.25rem; /* 10px 20px */
}

.p-page-hero__date {
	color: var(--color-news-date);
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* 押すと、そのカテゴリーの一覧へ */
.p-page-hero__cat {
	padding: 0.625rem; /* 10px */
	border-radius: var(--radius-sm);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-page-hero__cat:hover {
	opacity: 0.7;
}

.p-page-hero--photo .p-page-hero__meta + .p-page-hero__title {
	margin-top: 1.875rem; /* 30px */
}

.p-page-hero--photo .p-page-hero__lead {
	margin-top: 3.125rem; /* 50px */
	font-size: var(--fs-lead-l);
	line-height: 2.1; /* 42/20 */
}

.p-page-hero__btn {
	margin-top: 3.125rem; /* 50px */
}

/* 右下の大きな英字（EB Garamond 100px）。写真の上に重ねる */
.p-page-hero--photo .p-page-hero__en {
	position: absolute;
	right: var(--header-gutter);
	bottom: 2rem; /* 32px */
	margin-top: 0;
	font-size: var(--fs-en-hero);
	white-space: nowrap;
}

/* Scroll（左下。押すと次の欄へ移動する）。見た目は共通パーツの .c-scroll */
.p-page-hero__scroll {
	position: absolute;
	left: var(--header-gutter);
	bottom: 3.75rem; /* 60px */
}

/* 読み込み直後に、文字を順にふわっと出す（TOPのFVと同じ動き）。
   キャッチは、h1 の外にあるとき（清掃代行）だけ指定する（h1 の中にあるときは h1 ごと出る） */
.p-page-hero--photo .c-breadcrumb,
.p-page-hero--photo .p-page-hero__meta,
.p-page-hero--photo .p-page-hero__inner > .p-page-hero__catch,
.p-page-hero--photo .p-page-hero__title,
.p-page-hero--photo .p-page-hero__lead,
.p-page-hero__btn,
.p-page-hero--photo .p-page-hero__en,
.p-page-hero__scroll {
	animation: fv-fade-in 1.8s ease backwards;
}

.p-page-hero--photo .p-page-hero__lead {
	animation-delay: 0.3s;
}

.p-page-hero__btn {
	animation-delay: 0.6s;
}

.p-page-hero--photo .p-page-hero__en {
	animation-delay: 0.9s;
}

.p-page-hero__scroll {
	animation-delay: 1.2s;
}

/* SP：スマホの作り替えルール（参考資料18）で組んだ形。TOPのSPのFVと同じ組み方で、
   写真（横800×縦680）を上に置いて左と下へ白くフェードさせ、h1（キャッチ38px＋サービス名74px）を写真の下端に重ねる。
   その下に「リード → ボタン（高さ120px）」。パンくずはヘッダーの下（写真の左上の白い所）に置く。
   英字の透かしと Scroll は出さない（SPデザインのTOPのFVと同じ） */
@media (max-width: 1023px) {

	.p-page-hero {
		padding-block: calc(var(--header-height) + 3.75rem) 3.75rem;
	}

	.p-page-hero--photo {
		display: block;
		min-height: 0;
		padding-block: 30.625rem 8.75rem; /* 上490px（h1の上端。TOPのSPのキャッチと同じ）、下140px */
	}

	/* 次の欄も白い地のとき（お問い合わせの相談方法・お知らせの一覧）は、その欄の上の余白（122px）を取らず、
	   上部の下の140pxだけで区切る（2026-09-29 ユーザー指摘「ボタンと Consultation の間の余白が広い」）。
	   運営代行・清掃代行・ポリシーは、次の欄の地に色があって境目が見えるので、そのまま */
	.p-page-hero--photo + .p-contact-ways,
	.p-page-hero--photo + .p-news {
		padding-top: 0;
	}

	/* パンくずは写真の上に重ねるので、文字の列の入れ物は位置の基準にしない（写真の上に出すのは isolation と z-index） */
	.p-page-hero--photo .p-page-hero__inner {
		position: static;
	}

	.p-page-hero__photo {
		left: 0;
		bottom: auto;
		height: 42.5rem; /* 680px */
	}

	/* 切り抜く位置は、page-hero.php に渡す photo_pos_sp（書かなければPCと同じ） */
	.p-page-hero__photo img {
		object-position: var(--hero-photo-pos-sp, var(--hero-photo-pos, 50% 50%));
	}

	/* 左の600px（75%）と下の340px（50%）を白くフェード（TOPのSPのFVと同じ）。
	   上の260px（パンくずの下まで。150pxまでは同じ濃さ）は、page-hero.php に渡す sp_top_fade の濃さで白く薄める（ヘッダーの文字の裏が暗い写真だけ。無ければ薄めない。
	   TOPのなぎさヴィラと同じ考え方。清掃代行・募集は、ヘッダーの行＝h1 の文字の裏に暗い所があるため） */
	.p-page-hero__photo::after {
		width: 100%;
		background:
			linear-gradient(180deg, rgb(255 255 255 / var(--hero-sp-top-fade, 0)) 0, rgb(255 255 255 / var(--hero-sp-top-fade, 0)) 9.375rem, transparent 16.25rem),
			linear-gradient(180deg, transparent 50%, var(--color-white) 100%),
			linear-gradient(90deg, var(--color-white) 0%, var(--color-white-80) 37.5%, transparent 75%);
	}

	/* パンくず（28px）。ヘッダーの下から30px */
	.p-page-hero--photo .c-breadcrumb {
		position: absolute;
		top: calc(var(--header-height) + 1.875rem);
		left: calc((100% - var(--inner-width)) / 2);
		right: calc((100% - var(--inner-width)) / 2);
		gap: 0.625rem; /* 10px（山括弧の字形の左右の空きと合わせて、文字から約14px） */
		font-size: var(--fs-small); /* 28px */
	}

	.p-page-hero--photo .c-breadcrumb + * {
		margin-top: 0;
	}

	/* キャッチ（38px・行間56px）とサービス名（74px・行間106px）。どちらも意味の切れ目で2行（page-hero.php に渡す <br class="u-sp-only">）。
	   サービス名の行間は、TOPのSPのキャッチと同じ106px（90pxでは詰まって見えた。2026-09-28 ユーザー指摘） */
	.p-page-hero--photo .p-page-hero__catch {
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-page-hero--photo .p-page-hero__title {
		font-size: 4.625rem; /* 74px（TOPのSPのキャッチと同じ） */
		line-height: 1.4324; /* 106/74 */
	}

	/* お知らせの記事：題は52px・行間74px（記事の題は長いので、サービス名の74pxより小さく）。公開日と札は28px */
	.p-page-hero--article .p-page-hero__title {
		max-width: none;
		font-size: var(--fs-catch); /* 52px */
		line-height: 1.4231;        /* 74/52 */
	}

	.p-page-hero__date {
		font-size: var(--fs-small); /* 28px */
	}

	.p-page-hero__cat {
		padding: 0.625rem 0.875rem; /* 10px 14px */
		font-size: var(--fs-small); /* 28px */
	}

	.p-page-hero--photo .p-page-hero__catch + .p-page-hero__name,
	.p-page-hero--photo .p-page-hero__catch + .p-page-hero__title {
		margin-top: 1.25rem; /* 20px */
	}

	/* リード（本文と同じ34px）。PCの改行はせず、自然に折り返す */
	.p-page-hero--photo .p-page-hero__lead {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	/* ボタンは幅いっぱい・高さ120px（.c-btn-grad のSP） */
	.p-page-hero__btn {
		margin-top: 3.75rem; /* 60px */
	}

	/* .c-scroll（共通パーツ）が後ろで display を決めているので、ここは強めに書く */
	.p-page-hero--photo .p-page-hero__en,
	.p-page-hero .p-page-hero__scroll {
		display: none;
	}
}

/* ----------------------------------------------------------
   下層ページの本文の入れ物
   ---------------------------------------------------------- */

.p-sub {
	padding-block: var(--section-gap);
}

.p-sub__h2 {
	font-size: var(--fs-h3);
	color: var(--color-primary-deep);
}

.p-sub__h2 + * {
	margin-top: 2rem;
}

/* ----------------------------------------------------------
   セクションのラベル（英字の小さなラベル）
   ---------------------------------------------------------- */

.c-label {
	display: inline-block;
	padding: 0.25rem 1rem;
	border-radius: var(--radius-md);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-caption);
	font-weight: 500;
	line-height: var(--lh-heading);
}

.c-label + * {
	margin-top: 1rem;
}

/* ----------------------------------------------------------
   ページ末尾の Contact の欄（全ページ共通。template-parts/contact.php）
   青→ピンクのグラデーションに、写真を「ソフトライト・不透明度25%」で重ねている。
   写真付きの注記の白い地も「ソフトライト」（どちらもFigmaの合成のまま）
   ---------------------------------------------------------- */

.c-contact {
	position: relative;
	isolation: isolate; /* 合成を、この欄の中だけにとどめる */
	overflow: hidden;
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	background: var(--gradient-brand);
	color: var(--color-white);
	text-align: center;
}

.c-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/contact-bg.webp") center / cover no-repeat;
	opacity: 0.25;
	mix-blend-mode: soft-light;
}

/* 清掃スタッフ募集の「Join Us!」（page-recruit.php）は、背景の写真を替える。
   リードが3行なので、リードと白い箱のあいだは50px（Figmaのとおり。Contact は57px）。
   上部のボタン「清掃スタッフに応募する」で来たときは、この欄の上端を画面の上端にそろえる（上の余白にヘッダーが重なる） */
.c-contact--join {
	scroll-margin-top: calc((var(--header-height-stuck) + 1rem) * -1);
}

.c-contact--join::before {
	background-image: url("assets/images/recruit-join-bg.webp");
}

.c-contact--join .c-contact__methods {
	margin-top: 3.125rem; /* 50px */
}

/* 募集の Join Us! のSP。見出し（2つの文）は58pxだと「」の中で切らないと入らないので、この欄だけ52px・4行。
   リードは「自分の住んでいる地域で募集しているか」（「」を含めて20文字）が1行に入る36px・6行
   （どちらも真ん中。改行の位置は page-recruit.php）。リードと白い箱のあいだは、ほかのページの Contact と同じ60px */
@media (max-width: 1023px) {

	.c-contact--join .c-contact__title {
		font-size: var(--fs-catch); /* 52px */
		line-height: 1.4231;        /* 74/52 */
	}

	.c-contact--join .c-contact__lead {
		font-size: var(--fs-lead); /* 36px */
		line-height: 1.5556;       /* 56/36 */
	}

	.c-contact--join .c-contact__methods {
		margin-top: 3.75rem; /* 60px */
	}
}

.c-contact__en {
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	line-height: var(--lh-flat);
}

.c-contact__title {
	margin-top: 2.3125rem; /* 37px */
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-heading);
}

.c-contact__lead {
	margin-top: 2.3125rem; /* 37px */
	color: var(--color-yellow);
	font-size: var(--fs-sub);
	line-height: 1.643; /* 46/28 */
}

/* 電話・フォーム・LINEの白い箱 */
.c-contact__methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 3.5625rem;   /* 57px */
	padding-block: 3.125rem; /* 50px */
	background-color: var(--color-white);
	color: var(--color-text);
}

.c-contact__method {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 列のあいだの点線（2pxの線と2pxの間。高さ200px） */
.c-contact__method + .c-contact__method::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 12.5rem;
	transform: translateY(-50%);
	background-image: linear-gradient(var(--color-blue) 50%, transparent 50%);
	background-size: 1px 0.25rem;
}

/* アイコンの大きさは、下のラベルの文字（--fs-lead-l）に対する比で決める。PCでは26px（電話は29px）。
   SPでラベルの文字が大きくなると、アイコンも同じ比率で大きくなる。
   箱の高さはどの列も同じにして、ラベルの位置を3列でそろえる */
.c-contact__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(var(--fs-lead-l) * 1.3);    /* PC 26px */
	font-size: calc(var(--fs-lead-l) * 1.3);
}

.c-contact__icon--tel {
	color: var(--color-blue);
	font-size: calc(var(--fs-lead-l) * 1.45); /* PC 29px */
}

.c-contact__icon--form {
	color: var(--color-pink);
}

.c-contact__icon--line {
	color: var(--color-line-app);
}

.c-contact__label {
	margin-top: 1.1875rem; /* 19px */
	font-size: var(--fs-lead-l);
	line-height: var(--lh-flat);
}

.c-contact__tel {
	margin-top: 1.375rem; /* 22px */
	color: var(--color-blue);
	font-size: var(--fs-emph);
	font-weight: 500;
	line-height: var(--lh-flat);
}

.c-contact__tel a:hover {
	opacity: 0.7;
}

.c-contact__hours {
	margin-top: 0.5625rem; /* 9px */
	font-size: var(--fs-xs);
	line-height: var(--lh-flat);
}

.c-contact__btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 20rem;    /* 320px */
	height: 3.75rem; /* 60px */
	margin-top: 1.1875rem; /* 19px */
	padding-inline: 2.0625rem 2.125rem; /* 33px 34px */
	border-radius: var(--radius-pill);
	color: var(--color-white);
	font-size: var(--fs-lead);
	line-height: var(--lh-flat);
}

.c-contact__btn:hover {
	opacity: 0.7;
}

/* 矢印は、ボタンの文字に対する比（em）で書く。PCでは13px（文字18pxの0.72倍） */
.c-contact__btn .c-icon {
	font-size: 0.7222em;
}

.c-contact__btn--form {
	background-color: var(--color-pink);
}

.c-contact__btn--line {
	background-color: var(--color-line-app);
}

/* 写真付きの注記 */
.c-contact__note {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 2.5rem; /* 40px */
	color: var(--color-text);
	text-align: left;
}

.c-contact__note::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--color-white);
	mix-blend-mode: soft-light;
}

/* 写真の枠は箱の高さいっぱいに伸ばす（2026-10-28 に文が4行になり、箱が写真より高くなったため）。
   PCは幅206px（Figma）。文が3行のときは前と同じ150px */
.c-contact__note-photo {
	position: relative;
	flex-shrink: 0;
	align-self: stretch;
	width: 12.875rem; /* 206px */
	min-height: 9.375rem; /* 150px */
}

/* 写真の元の比率は3:2。枠いっぱいに、中央で切り抜いて見せる */
.c-contact__note-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-contact__note-text {
	padding: 1.25rem 1.8125rem; /* 上下20px 左右29px（上下は 2026-10-28 ユーザー指摘「詰まり過ぎ」で足した） */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* 注記の中のリンク（「取材・マスコミ関係者の方はこちら ＞」。2026-10-28）。Our Work の施設ページのリンクと同じ見た目 */
.c-contact__note-link {
	color: var(--color-blue);
	text-decoration: underline;
}

.c-contact__note-link:hover {
	opacity: 0.7;
}

/* SP：SPデザイン（TOPの Service。同じ形の欄）の決まりで組んだ（docs/06 この案件での判断 16）。縦に積む。
   英字・見出し・リードはPCと同じく真ん中。見出しは意味の切れ目で改行（template-parts/contact.php の u-sp-only の <br>）。
   白い箱の中（電話・フォーム・LINE）も真ん中。ボタンはFVのボタンと同じ形（高さ120px・38px・文字と矢印を中央） */
@media (max-width: 1023px) {

	.c-contact {
		padding-block: 7.625rem 8.75rem; /* 上122px（英字の上端まで）、下140px。Service と同じ */
	}

	.c-contact__title {
		margin-top: 3.125rem; /* 50px */
		line-height: 1.5517;  /* 90/58 */
	}

	/* 黄色のリードは46px・行間72px（--fs-sub） */
	.c-contact__lead {
		margin-top: 3.75rem; /* 60px */
		line-height: 1.5652;  /* 72/46 */
	}

	.c-contact__methods {
		grid-template-columns: 1fr;
		row-gap: 4rem;
		margin-top: 3.75rem; /* 60px */
		padding-inline: 1.875rem;
	}

	.c-contact__method + .c-contact__method::before {
		top: -2rem;
		left: 0;
		width: 100%;
		height: 1px;
		transform: none;
		background-image: linear-gradient(90deg, var(--color-blue) 50%, transparent 50%);
		background-size: 0.25rem 1px;
	}

	/* 電話番号は、下のボタン（高さ120px）と釣り合う大きさにする（2026-09-28 ユーザー指摘「大きいほうがいい、バランスが悪い」）。
	   46pxでは上の「お電話でのお問い合わせ」（38px）とほとんど変わらなかった。受付時間も、それに合わせて上げる */
	.c-contact__tel {
		font-size: 4.5rem; /* 72px */
	}

	.c-contact__hours {
		margin-top: 0.75rem; /* 12px */
		font-size: var(--fs-small); /* 28px */
	}

	.c-contact__btn {
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		height: 7.5rem; /* 120px */
		padding-inline: 1.875rem;
		font-size: var(--fs-lead-l); /* 38px */
	}

	.c-contact__btn .c-icon {
		margin-right: -0.25rem; /* 矢印の字形の右の空きのぶん寄せて、文字と矢印の塊を真ん中にそろえる */
	}

	.c-contact__note {
		flex-direction: column;
		align-items: stretch;
	}

	/* SPは横いっぱいに広げ、切り抜かずに写真全体（3:2）を見せる（PCの枠の指定は戻す） */
	.c-contact__note-photo {
		align-self: auto;
		width: auto;
		min-height: 0;
	}

	.c-contact__note-img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.c-contact__note-text {
		padding: 2.5rem 1.875rem; /* 40px 30px */
	}
}

/* ----------------------------------------------------------
   フォーム（Contact Form 7）
   プラグインのCSSは読み込んでいない。入力欄・チェック・エラー表示もここで作る。
   フォームのHTMLは tools/seed-contact-form.php にある。
   Figma お問い合わせ（node 317:1441）：項目名18px（太さ500）＋「必須」の印（40×24・金）→ 15px → 入力欄（1000×60・白・線1px #999）。
   項目のあいだ40px（お問い合わせ種別の下だけ50px）。チェックは20pxの四角（角丸3px）。
   エラー表示・送信中の表示はFigmaに無いので、サイトの色で組んだ（文は 原稿/05 の「05」）
   ---------------------------------------------------------- */

/* Contact Form 7 の隠し項目の入れ物（プラグインのCSSを読み込んでいないので、ここで隠す） */
.c-form .hidden-fields-container {
	display: none;
}

/* 送信のあとの知らせ（入力漏れ・送信エラー）。フォームの先頭に出す */
.c-form .wpcf7-response-output {
	margin: 0 0 2.5rem; /* 下40px */
	padding: 1.25rem 1.875rem; /* 20px 30px */
	border: 1px solid var(--color-error);
	background-color: var(--color-white);
	font-size: var(--fs-lead); /* 18px */
	line-height: var(--lh-normal);
}

.c-form .wpcf7-response-output:empty,
.c-form .wpcf7-form.init .wpcf7-response-output {
	display: none;
}

/* 項目のあいだ */
.c-form__row + .c-form__row {
	margin-top: 2.5rem; /* 40px */
}

.c-form__row--checks + .c-form__row {
	margin-top: 3.125rem; /* 50px */
}

/* お問い合わせ種別は <fieldset>（ブラウザの枠と余白を消す） */
.c-form__row--checks {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

/* 項目名と「必須」の印（高さ24pxの行に、真ん中でそろえる） */
.c-form__head {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
	min-height: 1.5rem; /* 24px */
	padding: 0;
	font-size: var(--fs-lead); /* 18px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.c-form__required {
	display: inline-grid;
	place-items: center;
	height: 1.7143em;          /* 24px（文字14px） */
	padding-inline: 0.4286em;  /* 6px */
	border-radius: var(--radius-xs);
	background-color: var(--color-required);
	color: var(--color-white);
	font-size: var(--fs-caption); /* 14px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.c-form__field {
	margin-top: 0.9375rem; /* 15px */
}

/* Contact Form 7 が入力欄を <span class="wpcf7-form-control-wrap"> で包む */
.c-form__field .wpcf7-form-control-wrap {
	display: block;
}

/* 入力欄（白・線1px #999・角は丸めない） */
.c-form__field input[type="text"],
.c-form__field input[type="email"],
.c-form__field input[type="tel"],
.c-form__field textarea {
	display: block;
	width: 100%;
	height: 3.75rem; /* 60px */
	padding: 0 1.25rem; /* 左右20px */
	border: 1px solid var(--color-input-line);
	border-radius: 0;
	background-color: var(--color-white);
	font-size: var(--fs-lead); /* 18px */
	line-height: var(--lh-flat);
}

/* 複数行（高さ300px。1行目の文字の上端は20px下） */
.c-form__field textarea {
	height: 18.75rem; /* 300px */
	padding-block: 0.8125rem; /* 13px（行間32pxの上の空き7pxと合わせて20px） */
	line-height: 1.7778; /* 32/18 */
	resize: vertical;
}

.c-form__field input::placeholder,
.c-form__field textarea::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

/* ---- チェック（お問い合わせ種別・同意）。本物のチェックは見えなくし、文字の前に四角を描く ---- */

/* 選択肢は見出しの行の26px下に、横に並べ、入りきらなければ折り返す（あいだ横50px・縦21px） */
.c-form__row--checks .c-form__field {
	margin-top: 1.625rem; /* 26px */
}

.c-form__field .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 1.3125rem 3.125rem; /* 縦21px 横50px */
}

.c-form .wpcf7-list-item {
	margin: 0;
}

.c-form .wpcf7-list-item label {
	position: relative;
	display: flex;
	align-items: flex-start;
	cursor: pointer;
}

/* 本物のチェック。見えなくするが、キーボードでは選べる（押すと下の四角の見た目が替わる） */
.c-form .wpcf7-list-item input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	opacity: 0;
}

/* 文字の前の四角（20px・白・線1px #999・角丸3px） */
.c-form .wpcf7-list-item-label {
	position: relative;
	display: inline-block;
	padding-left: 1.875rem; /* 30px（四角20px＋あいだ10px） */
	font-size: var(--fs-lead); /* 18px */
	line-height: 1.1111; /* 20/18（四角と同じ高さ） */
}

.c-form .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.25rem;  /* 20px */
	height: 1.25rem;
	border: 1px solid var(--color-input-line);
	border-radius: var(--radius-xs);
	background-color: var(--color-white);
}

/* 選んだとき：濃いピンクの地に、白のチェックの印（フォームの箱と送信ボタンのピンクに合わせた） */
.c-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
	border-color: var(--color-pink-deep);
	background-color: var(--color-pink-deep);
}

.c-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	top: 0.25rem;      /* 4px */
	left: 0.4375rem;   /* 7px */
	width: 0.375rem;   /* 6px */
	height: 0.6875rem; /* 11px */
	border-right: 2px solid var(--color-white);
	border-bottom: 2px solid var(--color-white);
	transform: rotate(45deg);
}

.c-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label::before {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* 同意（真ん中。「プライバシーポリシー」は下線のリンク） */
.c-form__agree {
	margin-top: 3.125rem; /* 50px */
}

.c-form__agree .wpcf7-list-item label {
	justify-content: center;
}

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

.c-form__agree a:hover {
	opacity: 0.7;
}

/* Cloudflare Turnstile（キーを入れたときだけ出る） */
.c-form__turnstile:not(:empty) {
	margin-top: 1.875rem;
	text-align: center;
}

.c-form__turnstile .wpcf7-turnstile {
	display: inline-block;
}

/* 送信ボタン（360×70・ピンク・文字18px） */
.c-form__submit {
	margin-top: 1.875rem; /* 30px */
	text-align: center;
}

.c-form__submit-btn {
	display: inline-grid;
	place-items: center;
	width: 22.5rem;       /* 360px */
	max-width: 100%;
	min-height: 4.375rem; /* 70px */
	padding: 0.625rem 1.25rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: var(--fs-lead); /* 18px */
	line-height: 1.4444; /* 26/18 */
	transition: opacity var(--transition);
}

.c-form__submit-btn:hover {
	opacity: 0.7;
}

/* 送信中（main.js の12.が付ける）。押し直しで2回送らないよう、押せなくする */
.c-form__submit-btn:disabled {
	opacity: 0.5;
	cursor: wait;
}

.c-form__sending:not(:empty) {
	margin-top: 1.25rem; /* 20px */
	font-size: var(--fs-small);
	line-height: var(--lh-normal);
}

/* ---- 入力の誤り（送信のあと、欄の下に出る） ---- */

/* 入力欄の線を赤く、2pxに見せる（大きさは変えない）。チェックの並びには付けない */
.c-form input.wpcf7-not-valid,
.c-form textarea.wpcf7-not-valid {
	border-color: var(--color-error);
	box-shadow: inset 0 0 0 1px var(--color-error);
}

/* 文は本文の色（読みやすさのため）で、左に赤い線 */
.c-form .wpcf7-not-valid-tip {
	display: block;
	width: fit-content;
	margin-top: 0.625rem; /* 10px */
	padding-left: 0.625rem; /* 10px */
	border-left: 3px solid var(--color-error);
	font-size: var(--fs-small); /* 16px */
	font-weight: 500;
	line-height: var(--lh-normal);
}

/* 同意の誤りは真ん中 */
.c-form__agree .wpcf7-not-valid-tip {
	margin-inline: auto;
}

/* フォームが見つからないときの案内（inc/contact-form.php） */
.c-form__missing {
	padding: 1.5rem;
	border: 1px dashed var(--color-error);
}

/* SP：スマホの作り替えルール（参考資料18の手順10）。項目名34px＋「必須」28px、入力欄は高さ100px・文字34px。
   お問い合わせ種別は1列（押しやすいよう、1つの選択肢の高さを80px以上にして、あいだ20px）。
   同意は左揃え。送信ボタンは箱の幅いっぱい・高さ120px・38px。エラーの文は34px */
@media (max-width: 1023px) {

	.c-form .wpcf7-response-output {
		margin-bottom: 3.125rem; /* 50px */
		padding: 1.875rem;       /* 30px */
		font-size: var(--fs-body); /* 34px */
		line-height: var(--lh-body);
	}

	.c-form__row + .c-form__row,
	.c-form__row--checks + .c-form__row {
		margin-top: 3.125rem; /* 50px */
	}

	.c-form__head {
		gap: 1.25rem; /* 20px */
		min-height: 3rem; /* 48px（「必須」の印の高さ） */
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706; /* 50/34（2行になっても詰まらない） */
	}

	.c-form__required {
		font-size: var(--fs-small); /* 28px（印は48px×高さ） */
	}

	.c-form__field {
		margin-top: 1.25rem; /* 20px */
	}

	.c-form__field input[type="text"],
	.c-form__field input[type="email"],
	.c-form__field input[type="tel"],
	.c-form__field textarea {
		height: 6.25rem; /* 100px */
		padding-inline: 1.875rem; /* 30px */
		font-size: var(--fs-body); /* 34px */
	}

	.c-form__field textarea {
		height: 25rem; /* 400px */
		padding-block: 1.25rem; /* 20px */
		line-height: 1.4706; /* 50/34 */
	}

	.c-form__row--checks .c-form__field {
		margin-top: 1.25rem; /* 20px */
	}

	.c-form__field .wpcf7-checkbox {
		flex-direction: column;
		gap: 1.25rem; /* 20px */
	}

	.c-form .wpcf7-list-item label {
		display: flex;
		align-items: center;
		min-height: 5rem; /* 80px */
	}

	.c-form .wpcf7-list-item input {
		top: 50%;
		width: 2.5rem;
		height: 2.5rem;
		transform: translateY(-50%);
	}

	/* 四角は40px。選択肢の文は34px（2行になっても1行目の頭にそろう）。
	   折り返すのは「・」「、」の後だけにする（「…ご／相談」のように語の途中で切れない。選択肢の文は管理画面の
	   フォームにあり、改行を入れられないため）。iPhone の Safari でも同じ位置で折り返す */
	.c-form .wpcf7-list-item-label {
		padding-left: 3.75rem; /* 60px（四角40px＋あいだ20px） */
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706; /* 50/34 */
		word-break: keep-all;
	}

	.c-form .wpcf7-list-item-label::before {
		top: 50%;
		width: 2.5rem;  /* 40px */
		height: 2.5rem;
		border-radius: 0.375rem; /* 6px */
		transform: translateY(-50%);
	}

	.c-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::after {
		top: 50%;
		left: 0.875rem;  /* 14px */
		width: 0.75rem;  /* 12px */
		height: 1.375rem; /* 22px */
		border-right-width: 4px;
		border-bottom-width: 4px;
		transform: translateY(-65%) rotate(45deg);
	}

	.c-form__agree .wpcf7-list-item label {
		justify-content: flex-start;
	}

	.c-form__submit {
		margin-top: 3.125rem; /* 50px */
	}

	.c-form__submit-btn {
		width: 100%;
		min-height: 7.5rem; /* 120px */
		font-size: var(--fs-lead-l); /* 38px */
	}

	.c-form__sending:not(:empty) {
		margin-top: 1.875rem;
	}

	.c-form .wpcf7-not-valid-tip {
		margin-top: 1.25rem;
		padding-left: 1.25rem; /* 20px */
		border-left-width: 6px;
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706;
	}

	.c-form__agree .wpcf7-not-valid-tip {
		margin-inline: 0;
	}
}

/* ----------------------------------------------------------
   ページ送り（the_posts_pagination）
   Figma お知らせ一覧（node 317:2659）：60px角の箱を30pxあけて並べる。番号は EB Garamond 20px。
   今のページは淡い灰色の地（枠なし）、ほかは白に濃い灰色の枠。前へ・次へは出さない（index.php）
   ---------------------------------------------------------- */

.c-pager {
	margin-top: 6.25rem; /* 100px */
}

.c-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.875rem; /* 30px */
}

.c-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 3.75rem; /* 60px */
	height: 3.75rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--color-pager-line);
	background-color: var(--color-white);
	color: var(--color-pager-line);
	font-family: var(--font-en);
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.c-pager .page-numbers.current {
	border-color: var(--color-pager-current);
	background-color: var(--color-pager-current);
	color: var(--color-pager-current-text);
}

/* 省略の「…」は枠なし */
.c-pager .page-numbers.dots {
	min-width: 0;
	border: none;
	background: none;
}

.c-pager a.page-numbers:hover {
	opacity: 0.7;
}

/* SP：押せる大きさにする（100px角・番号38px。あいだ20px） */
@media (max-width: 1023px) {

	.c-pager {
		margin-top: 3.75rem; /* 60px */
	}

	.c-pager .nav-links {
		gap: 1.25rem; /* 20px */
	}

	.c-pager .page-numbers {
		min-width: 6.25rem; /* 100px。番号は --fs-lead-l（38px） */
		height: 6.25rem;
	}
}

/* ----------------------------------------------------------
   ページの先頭へ戻るボタン（右下。footer.php）
   FVを過ぎてヘッダーが上に貼り付くと、ヘッダーと同じ0.4秒でふわっと出る（main.js が .is-shown を付ける）。
   見た目はヘッダーの「お問い合わせ」と同じ、青→ピンクのグラデーション
   ---------------------------------------------------------- */

.c-page-top {
	position: fixed;
	right: 1.875rem;  /* 30px */
	bottom: 1.875rem; /* 30px */
	z-index: calc(var(--z-header) - 10); /* ヘッダー・メニュー・ポップアップより下 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	width: 3.75rem;  /* 60px */
	height: 3.75rem;
	min-width: 44px; /* 細い画面でも指で押せる大きさを残す */
	min-height: 44px;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: var(--color-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.c-page-top.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.c-page-top.is-shown:hover {
	opacity: 0.7;
}

/* FVの「Scroll」の矢印を、上向きにして使う */
.c-page-top .c-icon {
	font-size: 1rem; /* 16px */
	transform: rotate(180deg);
}

.c-page-top__text {
	font-family: var(--font-en);
	font-size: var(--fs-xs); /* 13px */
	line-height: var(--lh-flat);
}

@media (max-width: 1023px) {

	.c-page-top {
		width: 6rem;  /* 96px */
		height: 6rem;
	}

	.c-page-top .c-icon {
		font-size: 2rem;
	}
}

/* ----------------------------------------------------------
   ポップアップ（<dialog>。TOPの沿革など）
   ボタンの aria-controls で指した <dialog> を main.js が開く。
   ×・「閉じる」・背面の暗いところ・Escキーで閉じる
   ---------------------------------------------------------- */

/* JSが止まったときは、ポップアップを開けないので、開くボタンを隠し、中身をその場に出す（.c-dialog--inline。沿革）。
   Our Work の「詳細を見る＋」は、JSが止まると白い箱がそのまま出るので、ポップアップは閉じたまま */
html:not(.js) .js-dialog-open {
	display: none;
}

html:not(.js) .c-dialog--inline {
	position: static;
	display: block;
	width: auto;
	max-height: none;
	margin: 2.5rem 0 0;
	background-color: transparent;
}

html:not(.js) .c-dialog--inline .js-dialog-close {
	display: none;
}

.c-dialog {
	width: min(56.25rem, calc(100% - 2rem)); /* 900px */
	max-width: none;
	max-height: calc(100% - 4rem);
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-text);
	overscroll-behavior: contain;
}

.c-dialog::backdrop {
	background-color: var(--color-shade);
}

/* 開くときに、下からふわっと出す */
.c-dialog[open] {
	animation: dialog-in 0.3s ease both;
}

.c-dialog[open]::backdrop {
	animation: dialog-fade 0.3s ease both;
}

@keyframes dialog-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

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

.c-dialog__inner {
	position: relative;
	padding: 5rem 6.25rem; /* 80px 100px */
}

/* 右上の×。線2本で描く（44px以上のタップ領域） */
.c-dialog__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 3.5rem;  /* 56px */
	height: 3.5rem;
	min-width: 44px;
	min-height: 44px;
	transition: opacity var(--transition);
}

.c-dialog__close::before,
.c-dialog__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.75rem; /* 28px */
	height: 1px;
	background-color: var(--color-text);
}

.c-dialog__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.c-dialog__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.c-dialog__close:hover {
	opacity: 0.6;
}

.c-dialog__en {
	width: fit-content;
	margin-inline: auto;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-en);
	font-size: 2.5rem; /* 40px */
	line-height: var(--lh-flat);
}

.c-dialog__title {
	margin-top: 1rem;
	font-size: var(--fs-h3);
	line-height: var(--lh-flat);
	text-align: center;
}

.c-dialog__foot {
	margin-top: 3.125rem; /* 50px */
	text-align: center;
}

.c-dialog__btn {
	width: 20rem;    /* 320px */
	height: 3.75rem; /* 60px */
	border: 1px solid var(--color-mauve);
	border-radius: var(--radius-pill);
	color: var(--color-mauve);
	font-size: var(--fs-lead);
	line-height: var(--lh-flat);
	transition: opacity var(--transition);
}

.c-dialog__btn:hover {
	opacity: 0.7;
}

@media (max-width: 1023px) {

	.c-dialog {
		width: var(--inner-width); /* 740px。ページの中身と同じ幅（SPデザインの白い箱の幅）。100%から引くと、機種によって少し広くなる */
	}

	.c-dialog__inner {
		padding: 7rem 3rem 5rem;
	}

	.c-dialog__close {
		width: 5.5rem;
		height: 5.5rem;
	}

	.c-dialog__close::before,
	.c-dialog__close::after {
		width: 3rem;
		height: max(1px, 0.125rem);
	}

	.c-dialog__en {
		font-size: 4rem;
	}

	.c-dialog__btn {
		width: 100%;
		height: 6.25rem;
	}
}

/* ----------------------------------------------------------
   動画のポップアップ（<dialog>。main.js が作る）
   ---------------------------------------------------------- */

.c-modal {
	width: min(60rem, 90vw);
	max-width: none;
	padding: 0;
	border: none;
	background: transparent;
}

.c-modal::backdrop {
	background-color: var(--color-overlay-strong);
}

.c-modal__inner {
	position: relative;
}

.c-modal__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--color-white);
	font-size: 2rem;
	line-height: var(--lh-flat);
}

.c-modal__movie {
	aspect-ratio: 16 / 9;
	background-color: var(--color-overlay-strong);
}

.c-modal__movie iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ポップアップを開いているあいだ、背面を止める */
body.is-modal-open {
	overflow: hidden;
}

/* ----------------------------------------------------------
   ブロックエディタで書いた本文（single.php のお知らせの記事、page.php）
   担当者が管理画面で書く文章が、Figmaのお知らせ詳細（node 317:2923）の形で出る。
   Figmaにあるのは h2（大きい文字）・h3（淡い青の帯）・h4（左に線）・段落だけ。
   箇条書き・リンク・画像・引用・表・区切り線はFigmaに無いので、サイトの色と形で組んだ。
   使えるブロックは inc/news.php の mytheme_news_allowed_blocks() で絞っている。

   前後のあいだは「どの見出しの後か／前か」で決まる（Figmaの値）。
   段落→h2 100px、段落→h3 70px、段落→h4 60px、h2→段落 30px、h3・h4→段落 20px、段落→段落 30px。
   h2 は2行になっても詰まらないよう行間を広げてあるので、そのぶん（上下8px）を余白から引いている。
   ---------------------------------------------------------- */

.c-entry > * + * {
	margin-top: 1.875rem; /* 30px 段落→段落など（Figmaに無い。h2→段落と同じにした） */
}

.c-entry > * + h2 {
	margin-top: 5.75rem; /* 92px（文字の上端まで100px） */
}

.c-entry > * + h3 {
	margin-top: 4.375rem; /* 70px */
}

.c-entry > * + h4 {
	margin-top: 3.75rem; /* 60px */
}

.c-entry > h2 + * {
	margin-top: 1.375rem; /* 22px（文字の下端から30px） */
}

.c-entry > h3 + *,
.c-entry > h4 + * {
	margin-top: 1.25rem; /* 20px */
}

/* 本文が h2 から始まるときは、文字の上端を白い箱の余白（100px）ちょうどに置く */
.c-entry > h2:first-child {
	margin-top: -0.5rem;
}

/* ---- 見出し ---- */

.c-entry h2 {
	font-size: var(--fs-h3); /* 32px */
	line-height: var(--lh-tight); /* 48px */
}

/* 淡い青の帯（1行のとき高さ60px） */
.c-entry h3 {
	padding: 0.5625rem 1.25rem; /* 9px 20px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
	color: var(--color-link);
	font-size: var(--fs-sub); /* 28px */
	line-height: var(--lh-tight); /* 42px */
}

/* 左の線（幅6px。見出しの行数ぶんの長さ） */
.c-entry h4 {
	position: relative;
	padding-left: 1.3125rem; /* 21px（線から文字まで15px） */
	color: var(--color-link);
	font-size: var(--fs-h4); /* 24px */
	line-height: var(--lh-tight); /* 36px */
}

.c-entry h4::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0.375rem;          /* 6px */
	border-radius: 0.1875rem; /* 3px */
	background-color: var(--color-link);
}

/* ---- 文中のリンク ---- */

.c-entry a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.c-entry a:hover {
	opacity: 0.7;
}

/* ---- 箇条書き ----
   1つの項目の中の行間を詰め、項目のあいだを空ける（項目の切れ目が分かるように。参考資料18の5.の12） */

.c-entry ul,
.c-entry ol {
	padding-left: 1.5em;
	line-height: 1.7647; /* 30/17 */
}

.c-entry ul {
	list-style: disc;
}

.c-entry ol {
	list-style: decimal;
}

.c-entry li::marker {
	color: var(--color-link);
}

.c-entry li + li {
	margin-top: 0.625rem; /* 10px */
}

/* ---- 画像 ---- */

.c-entry img {
	border-radius: var(--radius-sm);
}

/* 真ん中にそろえた画像（画像のブロックの「中央揃え」） */
.c-entry .aligncenter {
	margin-inline: auto;
}

.c-entry .aligncenter img {
	margin-inline: auto;
}

.c-entry figcaption {
	margin-top: 0.625rem; /* 10px */
	color: var(--color-text-weak);
	font-size: var(--fs-small);
	line-height: var(--lh-tight);
	text-align: center;
}

/* ---- 引用（淡い青の地に、左の線） ---- */

.c-entry blockquote {
	padding: 1.875rem 2.5rem; /* 30px 40px */
	border-left: 0.375rem solid var(--color-link);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
}

.c-entry blockquote > * + * {
	margin-top: 1.25rem; /* 20px */
}

.c-entry blockquote cite {
	display: block;
	color: var(--color-text-weak);
	font-size: var(--fs-small);
	font-style: normal;
}

/* ---- 表（見出しの行・列は淡い青の地） ---- */

/* 表は横にはみ出さず、入れ物の中でスクロールさせる */
.c-entry .wp-block-table {
	overflow-x: auto;
}

.c-entry table {
	line-height: var(--lh-normal);
}

.c-entry th,
.c-entry td {
	padding: 0.9375rem 1.25rem; /* 15px 20px */
	border: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}

.c-entry th,
.c-entry thead td {
	background-color: var(--color-bg-blue);
	font-weight: 500;
}

.c-entry .wp-block-table figcaption {
	text-align: left;
}

/* ---- 区切り線 ---- */

.c-entry hr {
	height: 1px;
	margin-block: 3.75rem; /* 60px */
	border: none;
	background-color: var(--color-line);
}

/* SP：規約・記事の白いカードの決まり（参考資料18の手順11）。
   見出しは h2 46px・h3 42px（帯）・h4 38px（左の線）、本文34/70。段落のあいだ50px。
   段落→h2 100px・段落→h3 80px・段落→h4 60px、見出し→段落 30px。
   段落→h2・h3 は7つの値に無いが、見出しの階層を余白でも見せるために使う（見出し→段落より広く、段落→段落より広く）。
   箇条書きは34/50で、項目のあいだ20px */
@media (max-width: 1023px) {

	.c-entry > * + * {
		margin-top: 3.125rem; /* 50px */
	}

	.c-entry > * + h2 {
		margin-top: 5.4375rem; /* 87px（文字の上端まで100px） */
	}

	.c-entry > * + h3 {
		margin-top: 5rem; /* 80px */
	}

	.c-entry > h2 + * {
		margin-top: 1.0625rem; /* 17px（文字の下端から30px） */
	}

	.c-entry > h3 + *,
	.c-entry > h4 + * {
		margin-top: 1.875rem; /* 30px */
	}

	.c-entry > h2:first-child {
		margin-top: -0.8125rem; /* 文字の上端を白い箱の余白ちょうどに */
	}

	.c-entry h2 {
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652; /* 72/46 */
	}

	.c-entry h3 {
		padding: 1.125rem 1.875rem; /* 18px 30px（1行のとき高さ100px） */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238; /* 64/42 */
	}

	.c-entry h4 {
		padding-left: 1.875rem; /* 30px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737; /* 56/38 */
	}

	.c-entry h4::before {
		width: 0.5rem;         /* 8px */
		border-radius: 0.25rem; /* 4px */
	}

	.c-entry ul,
	.c-entry ol {
		line-height: 1.4706; /* 50/34 */
	}

	.c-entry li + li {
		margin-top: 1.25rem; /* 20px */
	}

	.c-entry figcaption {
		margin-top: 1.25rem; /* 20px */
	}

	.c-entry blockquote {
		padding: 2.5rem 1.875rem; /* 40px 30px */
		border-left-width: 0.5rem;
	}

	.c-entry th,
	.c-entry td {
		padding: 1.25rem; /* 20px */
	}

	.c-entry hr {
		margin-block: 5rem; /* 80px */
	}
}

/* ----------------------------------------------------------
   スクロールで出すフェードイン
   .js-fade を付けた要素の上端が、画面の上から85%の線まで来ると .is-visible が付く（main.js の4.）。
   同じときに線を越えたもの（横に並ぶカードなど）は、ずらさずに一緒に出る。
   JSが動かない環境では最初から見えたままにする。
   ファーストビュー内の要素には付けない。
   ---------------------------------------------------------- */

.js .js-fade {
	opacity: 0;
	transform: translateY(var(--fade-move));
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}

.js .js-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

	.js .js-fade {
		opacity: 1;
		transform: none;
	}
}

/* ----------------------------------------------------------
   Scroll（FVの左下。押すと次の欄へ移動する）
   TOPと下層ページの上部で使う。置く位置は、それぞれの欄の CSS（.p-fv__scroll・.p-page-hero__scroll）
   ---------------------------------------------------------- */

.c-scroll {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
	color: var(--color-lavender-pale);
	font-family: var(--font-en);
	font-size: var(--fs-small);
	line-height: var(--lh-flat);
}

.c-scroll:hover {
	opacity: 0.7;
}

.c-scroll__icon {
	display: grid;
	place-items: center;
	width: 1.25rem;    /* 20px */
	height: 2.375rem;  /* 38px */
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-lavender-pale);
	color: var(--color-white);
}

/* 矢印を、下へ流れるように動かし続ける */
.c-scroll__icon .c-icon {
	animation: scroll-arrow 2s ease-in-out infinite;
}

@keyframes scroll-arrow {
	0% {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	30%,
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* ----------------------------------------------------------
   セクションの英字ラベル（EB Garamond 60px）
   色は白が基本。--gradient は青→ピンクの文字、--dark は本文の色
   ---------------------------------------------------------- */

.c-section-en {
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	line-height: var(--lh-flat);
}

/* グラデーションは文字の幅に合わせる（中央に置くときは margin-inline: auto） */
.c-section-en--gradient {
	width: fit-content;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.c-section-en--dark {
	color: var(--color-text);
}

/* 白や淡い地の上の英字（下層ページ）。青＝運営代行、ピンク＝清掃代行 */
.c-section-en--blue {
	color: var(--color-blue);
}

.c-section-en--pink {
	color: var(--color-pink);
}

/* ----------------------------------------------------------
   欄の見出し（英字・大見出し・リード）。下層ページで使う
   Figma：英字（EB Garamond 60px）→ 50px → 大見出し（46px）→ 50px → リード（28px・行間46px）。
   大見出しの行間は72px。Figmaで1行の見出しは行間46pxで置いてあるので、上下の余白は
   行間の差の13pxを引いた37pxにする（文字の位置がFigmaと同じになる）。2行の見出しは欄ごとに直す
   --left … 左揃え（Registration）  --white … 色の濃い地の上（運営代行の For Owners・清掃代行の Why Choose Us）
   --pink … 英字がピンク（清掃代行）
   ---------------------------------------------------------- */

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

.c-heading__en {
	color: var(--color-blue);
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	line-height: var(--lh-flat);
}

.c-heading__title {
	margin-top: 2.3125rem; /* 37px */
	font-size: var(--fs-h2);
}

.c-heading__lead {
	margin-top: 2.3125rem; /* 37px */
	font-size: var(--fs-sub);
	line-height: 1.6429; /* 46/28 */
}

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

.c-heading--white .c-heading__en,
.c-heading--white .c-heading__title {
	color: var(--color-white);
}

.c-heading--pink .c-heading__en {
	color: var(--color-pink);
}

/* 英字が青→ピンクのグラデーション（お問い合わせ）。グラデーションは文字の幅に合わせる */
.c-heading--gradient .c-heading__en {
	width: fit-content;
	margin-inline: auto;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 大見出しの中の黄色の文字（For Owners の2行目） */
.c-heading__yellow {
	color: var(--color-yellow);
}

/* SP：スマホの作り替えルール（参考資料18）の値。英字100px → 50px → 大見出し58px（行間90px）→ 50px → リード46px（行間72px） */
@media (max-width: 1023px) {

	.c-heading__title {
		margin-top: 3.125rem; /* 50px */
		line-height: 1.5517;  /* 90/58 */
	}

	.c-heading__lead {
		margin-top: 3.125rem; /* 50px */
		line-height: 1.5652;  /* 72/46 */
	}
}

/* ----------------------------------------------------------
   よくあるご質問（押すと開く。<details> なので JS を使わない）。下層ページで使う
   Figma 運営代行：白・角丸6px。左から「Q」→ 点線 → 質問（22px・青）、右に「＋」（開いているときは「−」）
   --pink … 清掃代行（Figma 384:9）。行の地は淡いピンク、Q・質問・点線・＋は濃いピンク
   ---------------------------------------------------------- */

.c-faq {
	--faq-color: var(--color-blue); /* Q・質問・点線・＋ */
	--faq-row: var(--color-white);  /* 行の地 */
	display: grid;
	gap: 1.25rem; /* 20px */
	width: 70.25rem; /* 1124px */
	max-width: 100%;
	margin-inline: auto;
}

.c-faq--pink {
	--faq-color: var(--color-pink-deep);
	--faq-row: var(--color-bg-pink);
}

.c-faq__item {
	border-radius: var(--radius-md);
	background-color: var(--faq-row);
}

.c-faq__q {
	position: relative;
	display: block;
	min-height: 3.75rem; /* 60px */
	padding: 0.4375rem 3.75rem 0.5625rem 5rem; /* 上7px 右60px（＋の20px＋左右20px） 下9px 左80px */
	color: var(--faq-color);
	font-size: var(--fs-h5); /* 22px */
	font-weight: 500;
	line-height: 2; /* 44/22 */
	list-style: none;
	cursor: pointer;
}

.c-faq__q::-webkit-details-marker {
	display: none;
}

.c-faq__q:hover {
	opacity: 0.7;
}

/* 「Q」の印（EB Garamond） */
.c-faq__mark {
	position: absolute;
	top: 1.0625rem; /* 17px */
	left: 1.375rem; /* 22px */
	font-family: var(--font-en);
	font-weight: 400;
	line-height: var(--lh-flat);
}

/* 「Q」と質問のあいだの点線（2pxずつ） */
.c-faq__q::before {
	content: "";
	position: absolute;
	top: 0.625rem; /* 10px */
	left: 3.75rem; /* 60px */
	width: 1px;
	height: 2.5rem; /* 40px */
	background: repeating-linear-gradient(to bottom, var(--faq-color) 0 2px, transparent 2px 4px);
}

/* 右の「＋」「−」（20px）。開いているときは「−」 */
.c-faq__icon {
	position: absolute;
	top: 1.25rem;   /* 20px */
	right: 1.25rem; /* 20px */
	display: flex;
	font-size: 1.25rem; /* 20px */
}

.c-faq__icon .c-icon {
	vertical-align: top;
}

.c-faq__icon .c-icon:last-child,
.c-faq__item[open] .c-faq__icon .c-icon:first-child {
	display: none;
}

.c-faq__item[open] .c-faq__icon .c-icon:last-child {
	display: inline-block;
}

.c-faq__a {
	padding: 0.3125rem 1.25rem 1.4375rem 5rem; /* 上5px 右20px 下23px 左80px（質問の頭にそろえる） */
	font-size: var(--fs-body);
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：スマホの作り替えルール（参考資料18）の開閉（型O）。質問は38px（Qの印つき・左揃え・3行まで）、右に「＋」40px。
   行の最小の高さは100px、回答は34px（行間70px）、行のあいだは20px。1問目は開いておく */
@media (max-width: 1023px) {

	.c-faq__q {
		min-height: 6.25rem; /* 100px */
		padding: 1.375rem 5.625rem 1.375rem 6.875rem; /* 上下22px 右90px（＋の40px＋左右） 左110px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	/* 「Q」と右の「＋」は、質問の上下の真ん中。点線は質問の行数ぶんの長さ（2行なら2行分。2026-09-28 ユーザー指摘） */
	.c-faq__mark {
		top: 50%;
		left: 1.875rem; /* 30px */
		translate: 0 -50%;
	}

	.c-faq__q::before {
		top: 1.375rem;    /* 22px */
		bottom: 1.375rem; /* 22px */
		left: 5rem;       /* 80px */
		height: auto;
	}

	.c-faq__icon {
		top: 50%;
		right: 1.875rem; /* 30px */
		font-size: 2.5rem; /* 40px */
		translate: 0 -50%;
	}

	.c-faq__a {
		padding: 0 1.875rem 1.875rem 6.875rem; /* 下30px 右30px 左110px（質問の頭にそろえる） */
		line-height: var(--lh-body);
	}
}

/* ----------------------------------------------------------
   黄色のマーカー。文字の行の下のほうに引く。
   行に沿う背景なので、折り返しても崩れない
   ---------------------------------------------------------- */

.c-marker {
	background-image: linear-gradient(transparent 72%, var(--color-marker) 72%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* SP：SPデザインのマーカー（52pxの文字に24pxの帯）。帯の太さは文字の0.46倍で、文字の下端より少し下（0.08倍）まで引く */
@media (max-width: 1023px) {

	.c-marker {
		padding-bottom: 0.08em;
		background-image: linear-gradient(transparent 69.7%, var(--color-marker) 69.7%);
	}
}

/* ----------------------------------------------------------
   グラデーションのボタン（幅320px・高さ60px。文字は左、矢印は右）
   ---------------------------------------------------------- */

.c-btn-grad {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 20rem;    /* 320px */
	height: 3.75rem; /* 60px */
	padding-inline: 2.125rem 2.0625rem; /* 34px 33px */
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
	color: var(--color-white);
	font-size: var(--fs-lead);
	line-height: var(--lh-flat);
}

.c-btn-grad:hover {
	opacity: 0.7;
}

/* 矢印は文字の0.72倍（PCで13px） */
.c-btn-grad .c-icon {
	font-size: 0.7222em;
}

/* 単色の青（下層ページの上部・料金の締めのボタン。Figmaのとおり） */
.c-btn-grad--blue {
	background: var(--color-blue);
}

/* 単色のピンク（清掃代行の上部・対応エリアのボタン。Figmaのとおり） */
.c-btn-grad--pink {
	background: var(--color-pink);
}

/* 文字と矢印を、まとめて真ん中に置く（清掃スタッフ募集の上部のボタン。Figmaのとおり） */
.c-btn-grad--center {
	justify-content: center;
	gap: 0.625rem; /* 10px */
}

/* SP：SPデザインのとおり、幅いっぱい・高さ120px・文字38px。文字と矢印は、まとめて真ん中に置く */
@media (max-width: 1023px) {

	.c-btn-grad {
		justify-content: center;
		gap: 0.5rem; /* 矢印の字形の左の空きと合わせて、文字から14px */
		width: 100%;
		height: 7.5rem; /* 120px */
		padding-inline: 1.875rem; /* 30px */
		font-size: var(--fs-lead-l); /* 38px */
	}

	/* 矢印の字形の右の空きのぶん寄せて、文字と矢印の塊を真ん中にそろえる */
	.c-btn-grad .c-icon {
		margin-right: -0.25rem;
	}
}

/* ----------------------------------------------------------
   飾りの動き（2026-09-30 お客様のご要望「kintone のような、背景や文章にかぶらない位置で動くもの」）
   文字はほぼ止めて、光・色・写真を静かに動かす。1つの欄でずっと動くものは1つまで。
   速さ・量は「1. 設定」の「飾りの動き」の値で変えられる。理由は docs/06 の「この案件での判断」21。
   OSの「視差効果を減らす」設定では、どれも止まる（①③④⑤⑧⑨⑩⑪は「2. リセット・ベース」の一括の止め方で止まり、
   ②は main.js が文字を分けず、ふつうの見出しのまま）。
   ① ページの先頭へ戻るボタンの色が下から上へ流れ、中の矢印が上へ流れる
   ② 英字の見出しと、Service のカードの「運営」「清掃」が、1文字ずつ下から浮かび上がり、そのあとも7秒ごとに上へふわっと跳ねる
     （1文字ずつに分けるのは main.js の4.。「運営」「清掃」は、はじめから表示）
   ③ グラデーションのボタンの色が、8秒に1回、左から右へ流れる
   ④ 青→ピンクの背景（TOPの Service・各ページの Contact）の上で、濃い色のかたまりが流れ続ける
   ⑤ 光の欄（TOPの Our Promise・運営代行の Why Us・募集の About Us）：光の玉が漂う／光の筋が揺れて、明るさが満ち引きする（Why Us は、差し込む光が強まったり弱まったりする）
   ⑥ （欠番。2026-10-01 にやめた）
   ⑦ （欠番。2026-10-01 にやめた）
   ⑧ Reason の枠の角の丸みが、ゆっくり変わる
   ⑨ 黄色のマーカーが、文字が出たあと左から右へ引かれる
   ⑩ About us の上のロゴの桜が、花びら1枚ぶんずつ回っては止まる
   ⑪ TOPのメインビジュアルの、選ばれている施設のタブが、上へふわっと跳ねる
   ---------------------------------------------------------- */

/* ① 戻るボタン。中の矢印は、FVの「Scroll」の矢印と同じ動きで上へ流れる。
   色は、ほかのグラデーションのボタン（③）と同じときに流れる。矢印に合わせて下から上へ（下が青・上がピンク）。
   2026-09-30 の2回目：上下のふわふわはやめた（ユーザー「ふわふわ不要。色の流れは矢印と同じ下から上に」） */
.c-page-top {
	background: linear-gradient(0deg, var(--color-blue), var(--color-pink), var(--color-blue), var(--color-pink)) 50% 0% / 100% 300%;
	animation: btn-flow-up var(--flow-interval) infinite;
}

.c-page-top .c-icon {
	animation: page-top-arrow 2s ease-in-out infinite;
}

@keyframes btn-flow-up {
	0%,
	85% {
		background-position: 50% 0%;
		animation-timing-function: ease-in-out;
	}
	100% {
		background-position: 50% 100%;
	}
}

@keyframes page-top-arrow {
	0% {
		opacity: 0;
		translate: 0 0.5rem;
	}
	30%,
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		translate: 0 -0.5rem;
	}
}

/* ② 1文字ずつの動き。main.js が英字を .c-split__char に分け、英字の塊に .js-split を付ける。
   塊が画面の上から85%の線を越えると .is-visible が付き（ほかの「ふわっと」と同じ）、左の文字から順に浮かび上がる。
   塊そのものの「ふわっと」（.js-fade）は使わない */
.js .js-fade.js-split {
	opacity: 1;
	transform: none;
}

.js-split .c-split__word {
	display: inline-block;
	white-space: nowrap;
}

.js-split .c-split__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(var(--split-move));
	transition: opacity var(--split-duration) var(--reveal-ease), transform var(--split-duration) var(--reveal-ease);
	transition-delay: calc(var(--split-delay, 0s) + var(--i) * var(--split-step));
}

.js-split.is-visible .c-split__char {
	opacity: 1;
	transform: none;
	animation: split-wave var(--wave-interval) var(--reveal-ease) calc(var(--wave-start) + var(--i) * var(--wave-step, var(--split-step))) infinite;
}

/* 出たあとも、--wave-interval（7秒）ごとに、左の文字から順に、上へふわっと跳ねて、そっと着地する（ずっと動いているものを作る）。
   上がるときは、すっと上がって上でゆっくり止まり、下りるときは、ゆっくり動き出してそっと着く。文字は薄くしない。
   2026-10-01 ユーザー「Our Promise がふわっと動くのを定期的に動くようにすると、kintone と同じような動きのあるサイトになりそう」→
   同日「下にもぐって元に戻るのじゃなく、上にふわっとジャンプする感じ。運営・清掃も」で、沈む動きから跳ねる動きに変えた。
   跳ねる高さ・間隔は「1. 設定」の --wave-move・--wave-interval */
@keyframes split-wave {
	0% {
		transform: none;
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	9% {
		transform: translateY(calc(var(--wave-move) * -1));
		animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1);
	}
	24%,
	100% {
		transform: none;
	}
}

/* 青→ピンクの文字（背景を文字の形で切り抜く書き方）は、1文字ずつ動かすと切り抜きが効かなくなるので、
   1文字ずつに同じグラデーションを敷き、塊の中の位置に合わせてずらす（幅と位置は main.js が測る） */
.js .js-split.c-split--clip {
	background: none;
}

.js-split.c-split--clip .c-split__char {
	background: var(--gradient-brand) calc(var(--split-x, 0px) * -1) 0 / var(--split-w, 100%) 100% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 下層ページの上部の英字は、読み込み直後に出す（今までの「ふわっと」と同じ0.9秒あとから） */
.p-page-hero__en.js-split {
	animation: none;
}

.p-page-hero--photo .p-page-hero__en.js-split {
	--split-delay: 0.9s;
}

/* About us は、下の箱（文字と同じ色）の中から浮かび上がって、箱の上に乗るように出す */
.p-about__en.js-split {
	--split-move: 0.7em;
}

/* Service のカードの「運営」「清掃」は、はじめから表示しておき（空いていると違和感があるため）、
   画面に入って1秒後から、定期的に1文字ずつ上へふわっと跳ねる（0.2秒ずつずらす）。
   2026-10-01 ユーザー「最初から空欄だと違和感。初期は表示していて、そこからふわっと、それを定期的に」「上にふわっとジャンプする感じ」 */
.p-service__em.js-split {
	--wave-start: 1s;
	--wave-step: 0.2s;
	--wave-move: 0.4em;
}

.p-service__em.js-split .c-split__char {
	opacity: 1;
	transform: none;
}

/* ③ 色の帯（青→ピンク→青→ピンク）をボタンの3倍の幅で敷き、8秒のうち最後の1.2秒で右へ2つぶん送る。
   送り終わりと始まりは同じ見た目なので、つなぎ目は見えない。ボタンは、どれも同じときに流れる。
   単色の青・ピンクのボタン（--blue・--pink）と、枠線だけのボタン（清掃スタッフ募集）は流さない */
.c-btn-grad:not(.c-btn-grad--blue):not(.c-btn-grad--pink),
.l-header__btn:not(.l-header__btn--outline) {
	background: linear-gradient(90deg, var(--color-blue), var(--color-pink), var(--color-blue), var(--color-pink)) 100% 0 / 300% 100%;
	animation: btn-flow var(--flow-interval) infinite;
}

@keyframes btn-flow {
	0%,
	85% {
		background-position: 100% 0;
		animation-timing-function: ease-in-out;
	}
	100% {
		background-position: 0% 0;
	}
}

/* ④ 背景の色が流れる（TOPの Service・各ページの Contact）。青→ピンクの地の上で、地より濃く鮮やかな色のかたまり（濃い青・あざやかなピンク・紫・明るい青）が4つ、
   それぞれ別の道すじで、片道9〜13秒で流れ続ける。欄の中の <div class="c-aurora"> の span が色のかたまり（Service は front-page.php、Contact は template-parts/contact.php）。
   見出しが白い文字なので、白っぽい色は使わない（後ろを通ると文字が読みにくくなる）。濃い色が通ると、白い文字はむしろ読みやすくなる。
   2026-09-30：Service は地に近い色が17〜23秒で流れ、Contact は色の層が30秒で左右に動くだけだった。
   2026-10-01 ユーザー「Service と Contact の背景の動き、全然わからない」で、色の差を大きく、速くし、Contact も同じ作りにそろえた */
.p-service {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.c-aurora {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.c-aurora span {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: max(var(--size), 70vh);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--color), transparent);
	animation: aurora var(--dur) ease-in-out var(--delay) infinite alternate;
}

/* 色のかたまりの置き方（--x・--y＝中心、--size＝欄の幅に対する大きさ、--mx・--my＝動く量（かたまりの大きさに対して）、--dur＝片道の時間） */
.c-aurora span:nth-child(1) { --x: 12%; --y: 30%; --size: 60%; --color: rgb(98 110 226 / 0.9); --mx: 45%; --my: 30%; --dur: 11s; --delay: -3s; }
.c-aurora span:nth-child(2) { --x: 85%; --y: 30%; --size: 58%; --color: rgb(226 118 214 / 0.8); --mx: -50%; --my: 35%; --dur: 12.5s; --delay: -8s; }
.c-aurora span:nth-child(3) { --x: 45%; --y: 85%; --size: 55%; --color: rgb(158 116 236 / 0.8); --mx: 40%; --my: -45%; --dur: 9.5s; --delay: -5s; }
.c-aurora span:nth-child(4) { --x: 70%; --y: 90%; --size: 50%; --color: rgb(128 168 246 / 0.75); --mx: -45%; --my: -40%; --dur: 13s; --delay: -11s; }

@keyframes aurora {
	0% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(calc(var(--mx) * 0.55), calc(var(--my) * -0.35)) scale(1.18);
	}
	100% {
		transform: translate(var(--mx), var(--my)) scale(0.9);
	}
}

/* Contact は、写真を「ソフトライト」で重ねた層（::before、z-index: -1）の下に、色のかたまりを置く */
.c-contact .c-aurora {
	z-index: -2;
}

/* ⑤ 光の欄。
   TOPの Our Promise：元の写真を「玉を抜いた土台」と「光の玉17個」に分けて重ね（重ねると元の写真と同じ見た目）、玉だけをゆっくり漂わせる
   （2026-09-30 ユーザー「忠実に前回の画像を再現し、あの画像の光の玉が動いている感じに」）。
   土台と玉は、欄いっぱいに写真を敷いたとき（真ん中合わせで欄を覆う＝Figmaの敷き方）と同じ位置・大きさになるよう、
   欄の大きさの単位（cqw・cqh）で置く。玉の場所・大きさ（元の写真 1920×1280 の上のpx）と動く量は front-page.php の $promise_orbs。
   運営代行の Why Us・募集の About Us：同じ作りで、元の写真を「筋を抜いた土台」と「光の筋のまとまり」に分けて重ね、筋だけを揺らす（下の .c-photo-light__ray） */
.c-photo-light {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
}

.c-photo-light__board {
	--bw: 1920; /* 元の写真の幅と高さ（px）。違う大きさの写真のときは、HTML の style で渡す */
	--bh: 1280;
	--board: max(100cqw, calc(var(--bw) / var(--bh) * 100cqh)); /* 写真で欄を覆う幅 */
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--board);
	aspect-ratio: var(--bw) / var(--bh);
	translate: -50% -50%;
	background: center / cover no-repeat;
}

.c-photo-light__orb {
	position: absolute;
	top: calc(var(--y) / var(--bh) * 100%);
	left: calc(var(--x) / var(--bw) * 100%);
	width: calc(var(--w) / var(--bw) * 100%);
	aspect-ratio: var(--w) / var(--h);
	background: center / 100% 100% no-repeat;
	animation:
		orb-drift calc(var(--dur) * var(--orb-pace) * 1s) ease-in-out calc(var(--delay) * var(--orb-pace) * 1s) infinite alternate,
		orb-glow calc(var(--glow) * 1s) ease-in-out calc(var(--delay) * 1s) infinite alternate;
}

/* 漂う道すじは、まっすぐではなく少し弧を描く（途中で、進む向きと直角に少しふくらむ）。量は「1. 設定」の --orb-move 倍 */
@keyframes orb-drift {
	0% {
		translate: 0 0;
		scale: 1;
	}
	50% {
		translate:
			calc((var(--dx) * 0.5 - var(--dy) * 0.3) * var(--orb-move) / var(--bw) * var(--board))
			calc((var(--dy) * 0.5 + var(--dx) * 0.3) * var(--orb-move) / var(--bw) * var(--board));
	}
	100% {
		translate: calc(var(--dx) * var(--orb-move) / var(--bw) * var(--board)) calc(var(--dy) * var(--orb-move) / var(--bw) * var(--board));
		scale: var(--grow);
	}
}

@keyframes orb-glow {
	from {
		opacity: 1;
	}
	to {
		opacity: var(--dim);
	}
}

/* 光の筋の欄（運営代行の Why Us・募集の About Us）：Our Promise の光の玉と同じ作り。元の写真を「筋を抜いた土台」と
   「筋のまとまり（光の元から見た角度で分けたもの）」に分けて重ね（重ねると元の写真と同じ見た目）、土台は止めたまま、
   筋のまとまりだけが、光の元を軸に別々に揺れて少し伸び縮みし、明るさが満ち引きする（長さがそろわないので、同じ組み合わせがなかなか来ない）。
   部品は template-parts/light-rays.php、筋ごとの位置・揺れの角度・秒数は、呼んでいるページ（page-minpaku-daiko.php・page-recruit.php）の配列。
   2026-10-01：写真1枚をまるごと傾けたり寄せたりする形から、ユーザー「Our Promise のようにしたい」でこの形にした */
.c-photo-light__ray {
	position: absolute;
	top: calc(var(--y) / var(--bh) * 100%);
	left: calc(var(--x) / var(--bw) * 100%);
	width: calc(var(--w) / var(--bw) * 100%);
	aspect-ratio: var(--w) / var(--h);
	background: center / 100% 100% no-repeat;
	transform-origin: var(--ox) var(--oy); /* 光の元 */
	animation:
		ray-sway calc(var(--sway) * 1s) ease-in-out calc(var(--delay) * 1s) infinite alternate,
		ray-glow calc(var(--glow) * 1s) ease-in-out calc(var(--delay) * 1s) infinite alternate;
}

@keyframes ray-sway {
	from {
		rotate: calc(var(--rot) * -1);
		scale: 0.96;
	}
	to {
		rotate: var(--rot);
		scale: 1.06;
	}
}

@keyframes ray-glow {
	from {
		opacity: 1;
	}
	to {
		opacity: var(--dim);
	}
}

/* Why Us は、下へ白く溶け込ませる層（.p-whyus::before、z-index: -1）の下に敷く */
.p-whyus .c-photo-light {
	z-index: -2;
}

/* Why Us は、窓から差し込む光の写真。差し込む光は向きがほとんど変わらないので、筋は大きく振らず（1度ほど、ゆっくり）、
   明るさがゆっくり満ち引きし、明るいときほど少し奥まで届く（光の元を軸に伸び縮み）。どの筋も同じ間隔で満ち引きし（雲が流れて光が強まったり弱まったりするように）、
   始まりだけ少しずらす。値は page-minpaku-daiko.php の配列（rot・sway・glow・dim・delay）。
   2026-10-01 ユーザー「Why Us だけ違和感がある。光が差し込むイメージ。自然な形に光が差し込んでいるイメージを作りたい」
   （それまでは About Us と同じ動きで、筋が4〜7度振れ、1〜2割まで薄くなっていた） */
.p-whyus .c-photo-light__ray {
	animation:
		beam-sway calc(var(--sway) * 1s) ease-in-out calc(var(--delay) * 1s) infinite alternate,
		beam-glow calc(var(--glow) * 1s) ease-in-out calc(var(--delay) * 1s) infinite alternate;
}

@keyframes beam-sway {
	from {
		rotate: calc(var(--rot) * -1);
	}
	to {
		rotate: var(--rot);
	}
}

@keyframes beam-glow {
	from {
		opacity: 1;
		scale: 1.03;
	}
	to {
		opacity: var(--dim);
		scale: 0.98;
	}
}

/* About Us の虹色の光は、Figmaでは25%の濃さ。筋の動きが見えるよう、60%にする（Our Promise の玉と同じくらい、見た目が変わる量。2026-10-01 に測った） */
.p-recruit-about .c-photo-light {
	opacity: 0.6;
}

/* ⑥ は欠番（2026-10-01：写真の中をスクロールで動かすのと、Our Promise の写真3枚をスクロールで上下させるのは、ユーザー「やめましょう」でやめた） */

/* ⑦ は欠番（2026-10-01：画面全体の光の動画と、各ページの入口に光を差し込ませる演出は、ユーザーの判断でやめた。経緯は docs/06 の「この案件での判断」21） */

/* ⑧ Reason の枠。角の丸みの大きさがゆっくり変わる（4つとも小さい丸 → 左上と右下が大きい丸 → 4つとも中くらい → 右上と左下が大きい丸 → 4つとも小さい丸。12秒でひとめぐり）。
   いちばん小さいときも角は丸いまま（真四角にはしない）。大きさは「1. 設定」の --reason-radius（いちばん大きい）・--reason-radius-min（いちばん小さい）。
   線（青→ピンク。デザインどおり）は、枠の背景の2枚重ね（「5. トップページ」の .p-reason__box）なので、角の丸みに付いてくる。
   画面の外にあるあいだは止める（main.js の13. が .is-inview を付け外しする）。
   2026-10-01：線を ::before の切り抜き（mask）で描き、英字に z-index を付けていたのをやめ、動きを足す前の書き方に戻した
   （ユーザー「スマホで見た際に Reason が消えている」。英字は1文字ずつ background-clip: text で描くので、実機の Safari で
   切り抜きや重なり順と組み合わさると消える不具合が知られている。手元の Chrome・WebKit では再現しなかった）。
   2026-09-30：角丸＋枠に沿って回る光の筋（3回目）→ 光の筋が「Reason」の文字にかぶったのと、ユーザー「角丸の大きさを変えたり、真四角までしたり、ここで動きを」で、角の丸みの動きにした。
   2026-10-01：ユーザー「真四角にすると微妙なので、角丸の大きさを変える感じで」で、真四角をやめ、いちばん小さいときも24pxの丸みを残した */
.p-reason__box {
	animation: reason-corner 12s ease-in-out infinite paused;
}

.p-reason__box.is-inview {
	animation-play-state: running;
}

@keyframes reason-corner {
	0%,
	100% {
		border-radius: var(--reason-radius-min);
	}
	25% {
		border-radius: var(--reason-radius) var(--reason-radius-min);
	}
	50% {
		border-radius: calc(var(--reason-radius) * 0.6);
	}
	75% {
		border-radius: var(--reason-radius-min) var(--reason-radius);
	}
}

/* ⑨ 黄色のマーカー：文字が「ふわっと」出たあと、左から右へ引く（行が分かれるときは1行目から続けて）。
   1つの「ふわっと」の塊の中にマーカーが2つ以上あるとき（行の途中で分けたもの・次の行へ続くもの）は、
   つないだ1本の線として、1本のときと同じ速さの変化で続けて引く（main.js の14. が、それぞれの始まる時刻・時間・速さの変化を
   --marker-part-delay・--marker-part-duration・--marker-part-ease で渡す）。時間と始まりは「1. 設定」の --marker-duration・--marker-delay。
   2026-10-01：2つ目を1秒あとに別々に引いていたのをやめた（ユーザー「民泊運営のあらゆる不安を解消します。の動きがぎこちない」。
   1つ目が止まりかけてから、2つ目が約3倍の速さで走り出していた）。
   「ふわっと」の付いていない所のマーカーは、はじめから引いてある */
.js .js-fade .c-marker {
	transition: background-size var(--marker-part-duration, var(--marker-duration)) var(--marker-part-ease, var(--reveal-ease)) var(--marker-part-delay, var(--marker-delay));
}

.js .js-fade:not(.is-visible) .c-marker {
	background-size: 0% 100%;
}

/* ⑩ About us の上のロゴの桜（大・中・小）が、花びら1枚ぶん（72度）ずつ、ふわっと回っては止まる（5回で1周。1周すると元と同じ絵）。
   3つは長さと向きを変えて、そろわないようにする。ロゴは template-parts/logo-mark.php（桜は .p-about__sakura の g）。
   2026-10-01 ユーザー「About us の上のロゴの桜の部分を少し回転させて動きをつけると面白そう」 */
.p-about__sakura {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: sakura-turn var(--sakura-dur) ease-in-out var(--sakura-delay) infinite;
}

.p-about__sakura--large {
	--sakura-dur: 21s;
	--sakura-delay: -2s;
}

.p-about__sakura--middle {
	--sakura-dur: 16s;
	--sakura-delay: -9s;
	animation-direction: reverse;
}

.p-about__sakura--small {
	--sakura-dur: 13s;
	--sakura-delay: -5s;
}

@keyframes sakura-turn {
	0%,
	12% {
		transform: rotate(0deg);
	}
	20%,
	32% {
		transform: rotate(72deg);
	}
	40%,
	52% {
		transform: rotate(144deg);
	}
	60%,
	72% {
		transform: rotate(216deg);
	}
	80%,
	92% {
		transform: rotate(288deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ⑪ TOPのメインビジュアルの施設のタブ（スマホは施設のカード）。選ばれているものが、選ばれてから少したつと、
   上へふわっと跳ねて、そっと元の位置に戻る（②の英字と同じ動き）。写真が切り替わる6秒ごとに、次のタブが選ばれて1回跳ねる
   （切り替わりと切り替わりのあいだ。最初のタブは、タブがふわっと出終わってから）。マウスを載せて切り替えが止まっているあいだも、6秒ごとに跳ねる。
   高さ・間隔は「1. 設定」の --tab-hop・--tab-hop-interval・--tab-hop-start。
   2026-10-01 ユーザー「右下の切り替えボタンの選択されているのが、上にふわっと上がって元の位置に戻るみたいな動きがあると面白いかも」 */
.p-fv__tab.is-active {
	animation: tab-hop var(--tab-hop-interval) var(--tab-hop-start) infinite;
}

@keyframes tab-hop {
	0% {
		translate: 0 0;
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	11% {
		translate: 0 calc(var(--tab-hop) * -1);
		animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1);
	}
	28%,
	100% {
		translate: 0 0;
	}
}

/* ----------------------------------------------------------
   FV
   高さは画面の高さに合わせる（2026-09-27 ユーザー指示。参考：nisiogi.jp）。
   施設のタブが画面の下に隠れず、次の欄も見えないようにするため（Figmaの970pxで固定すると、画面によってどちらかが起きる）。
   文字は上下の真ん中に置く（画面の高さが970pxのとき、Figmaと同じ位置になる）。
   写真は右寄せで、左へ白くフェードさせた上に文字を置く。
   写真は約6秒ごとに次の施設へ切り替わる（main.js）
   ---------------------------------------------------------- */

/* 画面がとても低いときは、文字が収まる高さまでは縮めない（そのときだけ、タブが画面の下にかかる）。
   上下の余白128pxは、上のヘッダー（90px）と、左下の Scroll（下から98px）をよけて、30px以上あけるため */
.p-fv {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 100vh;  /* 下の svh に対応していないブラウザ用 */
	min-height: 100svh; /* スマホ・タブレットでは、ブラウザの上下のバーを除いた高さ */
	padding-block: 8rem; /* 128px */
	overflow: hidden;
}

/* 写真の枠。左端は、文字の列（1400px）の左端から260px右（1920pxで x=520）。右端は画面の右端 */
.p-fv__photos {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	/* 1400pxの文字の列の左端から260px右。画面が狭く、文字の列がヘッダーの余白に合わせて
	   内側へ寄るとき（1100px以下）も、文字の列との間を260px相当に保つ */
	left: max(calc(50% - 27.5rem), calc(var(--header-gutter) + 16.25rem));
	/* 左端を整数のpxにそろえる。0.5pxの位置だと、ズームの動きのときに端へ細い線が出る */
	left: round(down, max(calc(50% - 27.5rem), calc(var(--header-gutter) + 16.25rem)), 1px);
	overflow: hidden; /* ズームした写真を枠の外に出さない */
}

/* 左へ白くフェードする。写真の枠の左から74%まで（Figmaの 1040 / 1400） */
.p-fv__photos::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 74.2857%;
	background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white-80) 50%, transparent 100%);
}

/* 写真は重ねておき、表示中のものだけ不透明にする（ふわっと入れ替わる） */
.p-fv__photo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.p-fv__photo.is-active {
	opacity: 1;
	animation: fv-fade-in 1s ease backwards; /* 読み込み直後の1枚目も、ふわっと出す */
}

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

/* ---- 動き（参考：nisiogi.jp。2026-09-26 ユーザー指定） ----
   写真：表示されるたびに、1.2倍から等倍へ6秒かけてゆっくり引く
   文字：読み込み直後に、キャッチ → 説明 → ボタン → タブ → Scroll の順にふわっと出す
   OSの「視差効果を減らす」設定では、どの動きも止まる（2. リセット・ベース） */

.p-fv__photo.is-active img {
	animation: fv-zoom 6s ease both;
}

@keyframes fv-zoom {
	from {
		transform: scale(1.2);
	}
	to {
		transform: scale(1);
	}
}

/* backwards … 出る前（遅らせているあいだ）は透明にしておき、出終わったら元の指定に戻す。
   both にすると出終わったあとも不透明のまま固定され、マウスオーバーで薄くならない */
.p-fv__catch,
.p-fv__lead,
.p-fv__btn,
.p-fv__tabs,
.p-fv__scroll {
	animation: fv-fade-in 1.8s ease backwards;
}

.p-fv__lead {
	animation-delay: 0.3s;
}

.p-fv__btn {
	animation-delay: 0.6s;
}

.p-fv__tabs {
	animation-delay: 0.9s;
}

.p-fv__scroll {
	animation-delay: 1.2s;
}

@keyframes fv-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 文字の列。上下の位置は .p-fv が真ん中に置く */
.p-fv__inner {
	position: relative;
}

.p-fv__catch {
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.5; /* 90/60 */
}

.p-fv__lead {
	margin-top: 1.9375rem; /* 31px */
	font-size: var(--fs-lead-l);
	line-height: 2.1; /* 42/20 */
}

.p-fv__btn {
	margin-top: 3.125rem; /* 50px */
}

/* ---- 施設のタブ（右下） ---- */

.p-fv__tabs {
	position: absolute;
	right: var(--header-gutter);
	bottom: 2.4375rem; /* 39px */
	display: flex;
	gap: 0.625rem; /* 10px */
}

/* 枠線の1pxは、選ばれているタブだけグラデーションで見せる（ほかは白） */
.p-fv__tab {
	position: relative;
	display: flex;
	align-items: center;
	width: 13.75rem; /* 220px */
	height: 5rem;    /* 80px */
	padding-left: 1.1875rem; /* 19px（枠線の1pxと合わせて20px） */
	border: 1px solid transparent;
	background-color: var(--color-white);
	text-align: left;
	isolation: isolate; /* 重なり順（写真 → フェード → 文字 → 暗くする幕）をタブの中で決める */
}

/* 写真は右の120px。文字の側（左）へ白くフェードする */
.p-fv__tab-img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 7.5rem; /* 120px */
	height: 100%;
	object-fit: cover;
}

.p-fv__tab::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 7.5rem;
	background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white-80) 50%, transparent 100%);
}

.p-fv__tab-name {
	position: relative;
	z-index: 2; /* 写真とフェードより上に出す */
	display: block;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.53; /* 26/17 */
}

/* 選ばれていないタブは、全体を暗く沈める */
.p-fv__tab::after {
	content: "";
	position: absolute;
	inset: -1px; /* 枠線の上まで覆う */
	z-index: 3;
	background-color: var(--color-shade);
	transition: opacity var(--transition);
}

.p-fv__tab:hover::after {
	opacity: 0.5;
}

/* 札は施設ページへのリンク（2026-10-30 お客様のご依頼）。マウスを載せたときは、上の ::after が薄くなるだけ（名前の下線は付けない＝ユーザー判断） */

/* 選ばれているタブは、暗くせず、枠と文字をグラデーションにする */
.p-fv__tab.is-active {
	background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-brand) border-box;
}

.p-fv__tab.is-active::after {
	opacity: 0;
}

.p-fv__tab.is-active .p-fv__tab-name {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Scroll（左下。押すと Our Promise へ移動する）。見た目は共通パーツの .c-scroll ---- */

.p-fv__scroll {
	position: absolute;
	left: var(--header-gutter);
	bottom: 3.75rem; /* 60px */
}

/* ---- キャッチの最後の点々 ----
   PCは「・・・」、SPは「…」（どちらもFigmaのとおり。SPは「・・・」だと2行目が1行に入らない） */

.p-fv__dots-sp {
	display: none;
}

/* SP：FigmaのSPデザイン（2026-09-27）のとおり。
   上に写真（横800×縦680）を置き、左と下へ白くフェードさせる。キャッチは写真の下端に重ね、
   その下に「施設のカード → 説明文 → ボタン」と並べる。PCと並びが違うので、格子（grid）で置く。
   ヘッダーは写真の上に透明で重なり、FVを過ぎると白で上に貼り付く（PCと同じ）。
   Scroll は出さない（SPデザインに無い）。写真の自動の切り替えとカードで選ぶ動きはPCと同じ */
@media (max-width: 1023px) {

	.p-fv {
		grid-template-columns: 1fr var(--inner-width) 1fr; /* 中央の列が文字の幅（740px） */
		align-content: start;
		min-height: 0;
		padding-block: 30.625rem 8.75rem; /* 上490px（キャッチの上端）、下140px（Our Promise の背景の上端まで） */
	}

	/* 文字の列の入れ物は使わず、中の3つ（キャッチ・説明文・ボタン）をそれぞれ格子に置く */
	.p-fv__inner {
		display: contents;
	}

	.p-fv__photos {
		bottom: auto;
		left: 0;
		height: 42.5rem; /* 680px */
	}

	/* 下へ白く（上から340pxの所から下端まで）と、左へ白く（左端から600pxまで）。Figmaの2枚のフェードを重ねたもの */
	.p-fv__photos::after {
		width: 100%;
		background:
			linear-gradient(180deg, transparent 50%, var(--color-white) 100%),
			linear-gradient(90deg, var(--color-white) 0%, var(--color-white-80) 37.5%, transparent 75%);
	}

	/* 写真を切り抜くときに残す位置。施設ごとに front-page.php の sp_focus で決める（無ければ中央） */
	.p-fv__photo img {
		object-position: var(--fv-sp-focus, 50% 50%);
	}

	/* 写真の上のほうを白く薄める。ヘッダーの文字の裏が暗い写真だけ（front-page.php の sp_top_fade。無ければ薄めない）。
	   SPデザイン（和ひかり）には無い。なぎさヴィラの軒の上でも、事業説明と三本線が読めるようにするため */
	.p-fv__photo::after {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 12.5rem; /* 200px ヘッダー（154px）の少し下まで */
		background: linear-gradient(180deg, var(--color-white) 0%, transparent 100%);
		opacity: var(--fv-sp-top-fade, 0);
	}

	.p-fv__catch,
	.p-fv__tabs,
	.p-fv__lead,
	.p-fv__btn {
		position: relative; /* 写真より上に出す */
		grid-column: 2;
	}

	/* 1行10文字で、幅740pxちょうど。折り返さない */
	.p-fv__catch {
		grid-row: 1;
		font-size: 4.625rem; /* 74px */
		line-height: 1.4324; /* 106/74 */
		white-space: nowrap;
	}

	.p-fv__dots-pc {
		display: none;
	}

	.p-fv__dots-sp {
		display: inline;
	}

	.p-fv__tabs {
		grid-row: 2;
		right: auto;
		bottom: auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3枚とも240px。名前の長さで幅を変えない */
		margin-top: 2.4375rem; /* 39px */
		animation-delay: 0.3s; /* 上から順にふわっと出す（PCは キャッチ → 説明文 → ボタン → タブ） */
		--tab-hop: 1.25rem; /* 選ばれているカードが跳ねる高さ（20px。カードが縦に長いので、PCの12pxより高く。「飾りの動き」⑪） */
	}

	.p-fv__lead {
		grid-row: 3;
		margin-top: 2.1875rem; /* 35px */
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		animation-delay: 0.6s;
	}

	.p-fv__btn {
		grid-row: 4;
		margin-top: 3.125rem; /* 50px */
		animation-delay: 0.9s;
	}

	/* ---- 施設のカード（横に3枚。写真が上、名前が下） ----
	   色分けはPCのタブと同じ（選ばれているカードはグラデーションの枠と文字、ほかは暗く沈める） */
	.p-fv__tab {
		flex-direction: column;
		align-items: center;
		width: auto;
		height: 18rem; /* 288px */
		padding: 0.5625rem; /* 枠線の1pxと合わせて10px */
		text-align: center;
	}

	.p-fv__tab-img {
		position: static;
		order: -1; /* 写真を名前の上に */
		flex-shrink: 0;
		width: 100%;     /* 220px */
		height: 8.75rem; /* 140px */
	}

	/* PCの写真の左の白いフェードは、SPでは使わない */
	.p-fv__tab::before {
		display: none;
	}

	/* 名前は、写真の下の残りの上下の真ん中。幅は文字に合わせる（グラデーションを文字の幅で掛けるため）。
	   行間はFigmaでは和ひかりだけ46px、ほかは36px。選ばれるカードは自動で替わるので36pxにそろえた。
	   「〜Nagisa Villa」は写真の幅より少し広いので、カードの左右の余白にかかる */
	.p-fv__tab-name {
		margin-block: auto;
		font-size: var(--fs-body); /* 34px */
		line-height: 1.0588;       /* 36/34 */
		white-space: nowrap;
	}

	/* ---- Scroll（SPデザインに無いので出さない） ---- */
	.p-fv__scroll {
		display: none;
	}
}

/* ----------------------------------------------------------
   Our Promise
   ---------------------------------------------------------- */

.p-promise {
	position: relative;
	isolation: isolate;
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	/* 背景の写真は、玉を抜いた土台と光の玉に分けて重ねる（.c-photo-light。「4. 共通パーツ ＞ 飾りの動き」⑤）。
	   ここの指定は、欄の大きさの単位（cqw）が使えないブラウザのときに見える土台 */
	background: url("assets/images/promise-light-base.webp") center / cover no-repeat;
	/* FVの「Scroll」で来たとき、この欄の上端を画面の上端にそろえる。
	   FVを通り過ぎた位置になるので、ヘッダーは上に貼り付く（上の余白189pxに重なる）。
	   html の scroll-padding-top（ヘッダーの高さ＋1rem）を、ここでは打ち消す */
	scroll-margin-top: calc((var(--header-height-stuck) + 1rem) * -1);
}

.p-promise .c-section-en {
	margin-inline: auto;
}

.p-promise__title {
	margin-top: 3.125rem; /* 50px */
	font-size: var(--fs-h2);
	line-height: var(--lh-flat);
	text-align: center;
}

/* ---- 吹き出し（3つ） ---- */

.p-promise__voices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem; /* 30px */
	margin-top: 3.75rem; /* 60px */
}

.p-promise__voice {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 6.25rem; /* 100px */
	padding: 0.5rem 0.625rem; /* 左右10px（Figmaの文字の幅357pxが1行に入るように） */
	border-radius: var(--radius-md);
	background-color: var(--color-mauve);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.882; /* 32/17 */
	text-align: center;
}

/* しっぽ。左は右下向き、中央は真下、右は左下向き（Figmaの図形のとおり） */
.p-promise__voice::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 19.375rem; /* 310px */
	width: 3.125rem; /* 50px */
	height: 1.25rem; /* 20px */
	background-color: var(--color-mauve);
	clip-path: polygon(0 0, 80% 0, 100% 100%);
}

.p-promise__voice:nth-child(2)::after {
	left: calc(50% - 1.25rem);
	width: 2.5rem; /* 40px */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.p-promise__voice:nth-child(3)::after {
	left: 1.25rem; /* 20px */
	clip-path: polygon(20% 0, 100% 0, 0 100%);
}

/* ---- 写真と本文 ---- */

.p-promise__body {
	display: grid;
	grid-template-columns: 26.875rem 1fr; /* 写真の重なり 430px / 本文 680px */
	column-gap: 3.75rem; /* 60px */
	margin-top: 3.1875rem; /* 51px */
	padding-left: 1.875rem; /* 30px */
}

/* 写真3枚を重ねる。重なりの前後は Figma のとおり（和室がいちばん上） */
.p-promise__photos {
	position: relative;
	height: 28.4375rem; /* 455px */
}

.p-promise__photo {
	position: absolute;
	object-fit: cover;
}

.p-promise__photo--1 {
	top: 0;
	left: 0;
	z-index: 3;
	width: 17.5rem;  /* 280px */
	height: 11.25rem; /* 180px */
}

.p-promise__photo--2 {
	top: 9.9375rem;  /* 159px */
	left: 8.875rem;  /* 142px */
	z-index: 1;
	width: 18rem;    /* 288px */
	height: 12rem;   /* 192px */
}

.p-promise__photo--3 {
	top: 20.9375rem; /* 335px */
	left: 1.875rem;  /* 30px */
	z-index: 2;
	width: 12.5rem;  /* 200px */
	height: 7.5rem;  /* 120px */
}

.p-promise__text {
	padding-top: 0.9375rem; /* 15px */
}

.p-promise__sub {
	font-size: var(--fs-sub);
	font-weight: 500;
	line-height: 1.643; /* 46/28 */
}

.p-promise__desc {
	margin-top: 1.875rem; /* 30px */
}

/* SP：FigmaのSPデザイン（2026-09-27）のとおり。
   背景は、同じ写真を縦長に切り抜いた別の画像。英字は中央、見出しは左揃えで「困った」」の後で改行する。
   お悩みは、しっぽの無い箱を縦に並べる。写真3枚は横一列（あいだ1px）。
   小見出しのマーカーは最後の行だけ。本文は3つの段落に分けて、あいだを50px空ける */
@media (max-width: 1023px) {

	.p-promise {
		padding-block: 7.6875rem 7rem; /* 上123px（英字の上端まで）、下112px */
	}

	/* 1行目「民泊運営の様々な「困った」」は幅740pxより14px長い（Figmaでも右の余白にかかっている）。折り返さない */
	.p-promise__title {
		line-height: 1.5517; /* 90/58 */
		text-align: left;
		white-space: nowrap;
	}

	.p-promise__voices {
		grid-template-columns: 1fr;
		gap: 1.25rem; /* 20px */
	}

	.p-promise__voice {
		min-height: 10rem; /* 160px */
		padding: 1rem;
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737; /* 56/38 */
	}

	/* しっぽは出さない */
	.p-promise__voice::after {
		display: none;
	}

	.p-promise__body {
		grid-template-columns: 1fr;
		row-gap: 2.5rem; /* 40px 写真と小見出しのあいだ */
		margin-top: 3.125rem; /* 50px */
		padding-left: 0;
	}

	.p-promise__photos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		height: auto;
	}

	.p-promise__photo {
		position: static;
		width: 100%;
		height: 12.5rem; /* 200px */
	}

	.p-promise__text {
		padding-top: 0;
	}

	.p-promise__sub {
		font-size: 3.25rem; /* 52px */
		line-height: 1.5;   /* 78/52 */
	}

	/* マーカーは最後の行「あらゆる不安を解消します。」だけに引く */
	.p-promise__marker-pc {
		background: none;
	}

	.p-promise__desc {
		margin-top: 3.25rem; /* 52px */
	}

	.p-promise__para {
		display: block;
	}

	.p-promise__para + .p-promise__para {
		margin-top: 3.125rem; /* 50px */
	}
}

/* ----------------------------------------------------------
   Service
   ---------------------------------------------------------- */

.p-service {
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	background: var(--gradient-brand);
	color: var(--color-white);
}

.p-service .c-section-en {
	text-align: center;
}

.p-service__title {
	margin-top: 3.125rem; /* 50px */
	font-size: var(--fs-h2);
	line-height: var(--lh-flat);
	text-align: center;
}

.p-service__lead {
	margin-top: 3.125rem; /* 50px */
	color: var(--color-yellow);
	font-size: var(--fs-sub);
	line-height: 1.643; /* 46/28 */
	text-align: center;
}

.p-service__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem; /* 40px */
	margin-top: 3.75rem; /* 60px */
}

.p-service__card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	color: var(--color-text);
}

.p-service__img {
	width: 100%;
	height: 21.25rem; /* 340px */
	object-fit: cover;
}

/* ボタンはカードの下端にそろえる（本文の長さが違っても位置がそろう） */
.p-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.875rem 3.125rem 3.125rem; /* 30px 50px 50px */
}

/* Figmaでもカードの中の幅（480px）ちょうどの長さ。わずかな差で「民泊・」の後ろで折り返さないようにする */
.p-service__name {
	font-size: var(--fs-h3);
	line-height: var(--lh-flat);
	white-space: nowrap;
}

.p-service__em--daiko {
	color: var(--color-blue);
}

.p-service__em--cleaning {
	color: var(--color-pink-vivid);
}

.p-service__text {
	margin-block: 1.875rem; /* 30px */
}

.p-service__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.625rem; /* 10px */
	height: 3.75rem; /* 60px */
	margin-top: auto;
	border-radius: var(--radius-pill);
	color: var(--color-white);
	font-size: var(--fs-lead);
	line-height: var(--lh-flat);
}

.p-service__btn:hover {
	opacity: 0.7;
}

/* 矢印は文字の0.72倍（PCで13px） */
.p-service__btn .c-icon {
	font-size: 0.7222em;
}

.p-service__btn--daiko {
	background-color: var(--color-blue);
}

.p-service__btn--cleaning {
	background-color: var(--color-pink);
}

/* タブ（スマホだけ）。PCでは出さず、カードを2枚とも並べる */
.p-service__tabs {
	display: none;
}

/* SP：FigmaのSPデザイン（2026-09-28）のとおり。
   見出し・リードはPCと同じく真ん中。カードは「運営代行／清掃代行」のタブで1枚ずつ切り替える（main.js の 3.）。
   タブの文字の色（運営＝青・清掃＝ピンク・代行＝本文の色）は、選んでいてもいなくても同じ。地の色だけ白と灰色で替わる */
@media (max-width: 1023px) {

	.p-service {
		padding-block: 7.625rem 8.75rem; /* 上122px（英字の上端まで）、下140px */
	}

	/* 行の終わりの「、」「。」の右の空きのぶん、20px右に寄せて見た目の真ん中にそろえる（Figmaの位置のとおり） */
	.p-service__title {
		padding-left: 2.5rem;
		line-height: 1.5517; /* 90/58 */
	}

	.p-service__lead {
		margin-top: 3.75rem; /* 60px */
		line-height: 1.5652; /* 72/46 */
	}

	/* タブはJSが動くときだけ出す（JSが止まると切り替えられない。そのときはカードを2枚とも見せる） */
	.js .p-service__tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin-top: 3.75rem; /* 60px */
	}

	.p-service__tab {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.25rem;
		height: 6.25rem; /* 100px */
		border-radius: 0.75rem 0.75rem 0 0; /* 12px */
		background-color: var(--color-line);
		color: var(--color-text);
		font-size: var(--fs-sub); /* 46px */
		font-weight: 500;
		line-height: var(--lh-flat);
	}

	.p-service__tab.is-active {
		background-color: var(--color-white);
	}

	/* 「∨」は文字と同じ大きさ（幅32px） */
	.p-service__tab .c-icon {
		font-size: 1em;
	}

	.p-service__cards {
		display: block;
		margin-top: 0;
	}

	/* 選ばれていないカードは隠す。JSが動かないときは2枚とも見せる */
	.js .p-service__card:not(.is-active) {
		display: none;
	}

	/* 切り替えたときに、ふわっと出す */
	.js .p-service__card.is-active {
		animation: fv-fade-in 0.6s ease;
	}

	.p-service__img {
		height: 27.125rem; /* 434px */
	}

	.p-service__body {
		padding: 1.25rem 2.5rem 3.25rem; /* 上20px 左右40px 下52px */
	}

	.p-service__name {
		font-size: 3.25rem;  /* 52px */
		line-height: 1.4231; /* 74/52 */
		text-align: center;
	}

	.p-service__text {
		margin-block: 1.25rem 1.875rem; /* 上20px 下30px */
	}

	/* SPデザインのボタンには矢印が無い */
	.p-service__btn {
		height: 6.25rem; /* 100px */
		padding-inline: 1rem;
		font-size: var(--fs-body); /* 34px */
	}

	.p-service__btn .c-icon {
		display: none;
	}
}

/* ----------------------------------------------------------
   Reason（選ばれる理由）
   1400pxの枠（グラデーションの線）の中に、理由と写真を左右交互に並べる。
   英字の「Reason」は枠の上の線に重ねる
   ---------------------------------------------------------- */

.p-reason {
	padding-block: 14.25rem 12.5rem; /* 228px（英字の上端まで189px）200px */
}

.p-reason__box {
	position: relative;
	/* 左右は、中身の幅がいつも1200px相当になるように決める（1920pxで100px）。
	   1024〜1100pxで枠が狭くなっても、中身はPCと同じ比率のまま（見出しの改行も同じ）。枠線の1pxを引いている */
	padding: 4.8125rem calc((100% - 75rem) / 2 - 1px) 10.5625rem; /* 上 78px（枠線と合わせて）下 170px */
	border: 1px solid transparent;
	/* 枠の線（青→ピンク）は、背景を2枚重ねて描く（内側＝白、線の所＝グラデーション）。角の丸みが変わっても線が付いてくる。
	   角の丸みの動きは「4. 共通パーツ ＞ 飾りの動き」⑧ */
	background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-brand) border-box;
}

/* 白い地で、枠の線を英字の幅だけ隠す */
.p-reason__en {
	position: absolute;
	top: -2.4375rem; /* 39px 枠の線より上に出す */
	left: 0;
	right: 0;
	width: fit-content;
	margin-inline: auto;
	padding-inline: 1.1875rem; /* 19px */
	background-color: var(--color-white);
}

.p-reason__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	text-align: center;
}

.p-reason__list {
	margin-top: 4.5rem; /* 72px */
}

/* 奇数番目：左に文、右に写真。偶数番目：左に写真、右に文 */
.p-reason__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32.5rem; /* 文 640px / 写真 520px。見出しがはみ出しても列は広げない */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"head img"
		"text img";
	column-gap: 2.5rem; /* 40px */
}

.p-reason__item:nth-child(even) {
	grid-template-columns: 32.5rem minmax(0, 1fr);
	grid-template-areas:
		"img head"
		"img text";
}

.p-reason__item + .p-reason__item {
	margin-top: 4.375rem; /* 70px */
}

.p-reason__head {
	display: flex;
	align-items: flex-start;
	gap: 1.5625rem; /* 25px */
	grid-area: head;
}

/* 番号の四角（120px） */
.p-reason__num {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	width: 7.5rem;
	height: 7.5rem;
	padding: 1.125rem 0 0 1.125rem; /* 18px */
	background-color: var(--color-bg-blue);
	color: var(--color-blue);
	line-height: var(--lh-flat);
}

.p-reason__num-label {
	font-size: var(--fs-caption);
	font-weight: 500;
}

.p-reason__num-value {
	margin-top: -0.25rem; /* 4px Figmaの重なりのとおり */
	font-family: var(--font-en);
	font-size: 5rem; /* 80px */
}

/* 見出しは2行で、改行の位置は決めてある。PCでは行の途中で折り返さない
   （Figmaでも「オーナー様の宿に役立てています。」は列から17pxはみ出している） */
.p-reason__name {
	padding-top: 0.75rem; /* 12px */
	font-size: var(--fs-h3);
	line-height: 1.4375; /* 46/32 */
	white-space: nowrap;
}


.p-reason__text {
	grid-area: text;
	margin-top: 1.25rem; /* 20px */
}

.p-reason__img {
	grid-area: img;
	width: 100%;
	height: 23rem; /* 368px */
	object-fit: cover;
}

/* タブ（スマホだけ）。PCでは出さず、理由を3つとも並べる */
.p-reason__tabs {
	display: none;
}

/* SP：FigmaのSPデザイン（2026-09-28）のとおり。
   枠は左右の余白30pxの位置に置き、中は40px空ける（中身の幅660px）。見出しはPCと同じく真ん中。
   理由は「01／02／03」のタブで1つずつ切り替え（main.js の 3.）、「見出し → 写真 → 本文」の順に並べる。
   番号の帯（選ばれる理由 01）は、タブが番号を兼ねるので出さない */
@media (max-width: 1023px) {

	/* 下はほかの欄（Service・Our Work）と同じ140px。Figmaは239pxだが、広すぎたので詰めた（2026-09-28 ユーザー指摘）。
	   PCも、どの欄も下は200pxでそろっている */
	.p-reason {
		padding-block: 11rem 8.75rem; /* 上176px（英字の上端まで121px＋英字が枠の線より上に出る55px）、下140px */
	}

	.p-reason__box {
		padding: 4.625rem calc(2.5rem - 1px) 2.625rem; /* 上74px（枠線と合わせて75px）左右40px 下42px */
	}

	/* 英字（100px）の上から55pxの所に枠の線が通る。線を隠す白い地は、文字の左右に8pxずつ */
	.p-reason__en {
		top: -3.4375rem; /* 55px */
		padding-inline: 0.5rem;
	}

	.p-reason__title {
		line-height: 1.5517; /* 90/58 */
	}

	/* タブはJSが動くときだけ出す（JSが止まると切り替えられない。そのときは理由を3つとも見せる） */
	.js .p-reason__tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.9375rem; /* 15px */
		margin-top: 2.5rem; /* 40px */
	}

	/* 番号の箱（210×140）。選ばれているものは淡い青の地に青の番号、ほかは灰色 */
	.p-reason__tab {
		position: relative;
		display: grid;
		place-items: center;
		height: 8.75rem; /* 140px */
		padding-bottom: 0.5rem; /* 番号をFigmaの位置（4px上）にそろえる */
		background-color: var(--color-line);
		color: var(--color-num-off);
		font-family: var(--font-en);
		font-size: 6.25rem; /* 100px */
		line-height: 0.8;   /* 80/100 */
		transition: opacity var(--transition);
	}

	.p-reason__tab:hover {
		opacity: 0.7;
	}

	.p-reason__tab.is-active {
		background-color: var(--color-bg-blue);
		color: var(--color-blue);
	}

	.p-reason__tab.is-active:hover {
		opacity: 1;
	}

	/* 選ばれている箱の下の三角（50×25） */
	.p-reason__tab.is-active::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		background-color: var(--color-bg-blue);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.p-reason__list {
		margin-top: 2.5rem; /* 40px（三角の25pxを含む） */
	}

	.p-reason__item,
	.p-reason__item:nth-child(even) {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"head"
			"img"
			"text";
	}

	.p-reason__item + .p-reason__item {
		margin-top: 0;
	}

	/* 選ばれていない理由は隠す。JSが動かないときは3つとも見せる */
	.js .p-reason__item:not(.is-active) {
		display: none;
	}

	/* 切り替えたときに、ふわっと出す */
	.js .p-reason__item.is-active {
		animation: fv-fade-in 0.6s ease;
	}

	.p-reason__head {
		display: block;
	}

	.p-reason__num {
		display: none;
	}

	/* 見出しは真ん中。行の終わりの「。」の右の空きのぶん、20px右に寄せて見た目の真ん中にそろえる（Figmaの位置のとおり）。
	   2行目が中身の幅（660px）より広い理由もあるので、枠の内側いっぱいまで使う */
	.p-reason__name {
		margin-inline: -2.5rem;
		padding: 0 0 0 2.5rem;
		font-size: 2.625rem; /* 42px */
		line-height: 1.5238; /* 64/42 */
		text-align: center;
	}

	/* マーカーは文字の下のほうに18px。最後の「。」の右の空きには引かない（Figmaのとおり） */
	.p-reason__name .c-marker {
		padding-bottom: 0;
		background: linear-gradient(transparent 70.3%, var(--color-marker) 70.3%) no-repeat 0 0 / calc(100% - 0.5em) 100%;
	}

	/* 写真は 640×450 で、中身の幅（660px）の真ん中 */
	.p-reason__img {
		justify-self: center;
		width: 40rem;       /* 640px */
		height: 28.125rem;  /* 450px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-reason__text {
		margin-top: 1.25rem; /* 20px */
	}
}

/* ----------------------------------------------------------
   Our Work（運営している宿）。template-parts/our-work.php
   TOP・運営代行・清掃代行で同じ部品を使う。ここから下はTOPの見た目（type が blue）で、
   白の地の下層ページ（type が light）の違いは、この欄の最後の「白の地の Our Work」にまとめた。
   青の地に写真を「ソフトライト・不透明度25%」で重ね、下のほうは青一色に溶け込ませる。
   矢印・ドットで施設を切り替え、サムネを押すと大きい写真が替わる（main.js）
   ---------------------------------------------------------- */

.p-work {
	position: relative;
	isolation: isolate; /* 合成を、この欄の中だけにとどめる */
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	background-color: var(--color-blue);
	color: var(--color-white);
}

/* 背景の写真（表示している施設の外観）。青の上に「ソフトライト・不透明度25%」で重ねる（Figmaの合成のまま）。
   3施設ぶんを重ねておき、表示している施設のものだけを出す。施設を替えると、1秒でふわっと入れ替わる（main.js の 10.） */
.p-work__bgs {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.25;
	mix-blend-mode: soft-light;
}

.p-work__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.p-work__bg.is-active {
	opacity: 1;
}

/* 下の535pxで、青一色に溶け込ませる（Figma 184:15・184:16） */
.p-work::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: 33.4375rem; /* 535px */
	background: linear-gradient(transparent, var(--color-blue) 17.9375rem); /* 287px */
}

.p-work__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.p-work__title {
	margin-top: 2.3125rem; /* 37px */
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
}

.p-work__lead {
	margin-top: 3.125rem; /* 50px */
	color: var(--color-yellow);
	font-size: var(--fs-lead-l);
	line-height: var(--lh-normal); /* 40/20 */
}

.p-work__arrows {
	display: flex;
	flex-shrink: 0;
	gap: 1.875rem; /* 30px */
	margin-bottom: 0.5625rem; /* 9px */
}

.p-work__arrow {
	display: grid;
	place-items: center;
	width: 3.125rem;  /* 50px */
	height: 3.125rem;
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-blue);
	/* 矢印の字形は22px（丸の約44%）。Figmaは30pxだが、丸に対して大きく見えるため小さくした（2026-09-27 ユーザー指示） */
	font-size: 1.375rem;
	transition: opacity var(--transition);
}

.p-work__arrow:hover {
	opacity: 0.7;
}

.p-work__slides {
	margin-top: 3.125rem; /* 50px */
}

/* ---- 大きい写真・施設名・サムネ ---- */

.p-work__visual {
	position: relative;
	height: 37rem; /* 592px */
}

/* 大きい写真の枠。次の写真を上に重ねて、ふわっと入れ替える（main.js） */
.p-work__photo {
	position: relative;
	height: 100%;
}

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

/* 次の写真。読み込めたら1秒かけて不透明にする（main.js の WORK_FADE と同じ長さ） */
.p-work__main--next {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.p-work__main--next.is-shown {
	opacity: 1;
}

.p-work__tags {
	position: absolute;
	top: 1.875rem; /* 30px */
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem; /* 10px */
}

.p-work__tag {
	display: flex;
	align-items: center;
	height: 2.375rem; /* 38px */
	padding-inline: 0.625rem; /* 10px */
	background-color: var(--color-white);
	color: var(--color-text);
	font-size: var(--fs-lead-l);
	line-height: var(--lh-flat);
}

/* 地名と施設名の札を押すと施設ページへ（2026-10-22 お客様のご依頼）。札の見た目は変えず、名前の後ろに「＞」。
   箱（スマホはポップアップ）の中の「〇〇の施設ページを見る ＞」の文のリンクも、そのまま残している */
.p-work__tags-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem; /* 10px */
	color: inherit;
	text-decoration: none;
}

.p-work__tags-link:hover .p-work__tag {
	opacity: 0.8;
}

.p-work__tag-arrow {
	margin-left: 0.5em;
}

/* サムネの地（右の254px）。写真に「ハードライト・不透明度90%」で重ねる（Figma 184:165） */
.p-work__visual::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 15.875rem; /* 254px */
	background-color: var(--color-shade-strong);
	mix-blend-mode: hard-light;
}

/* サムネは2列。写真の高さいっぱいに段を割るので、枚数が14枚より少ない施設でも下まで埋まる
   （14枚のとき、1枚が 120×80px でFigmaどおり） */
.p-work__thumbs {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.25rem 0.375rem; /* 縦4px 横6px */
	width: 15.875rem;
	padding: 0.25rem; /* 4px */
}

.p-work__thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

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

/* いま大きく出している写真のサムネだけ明るく、ほかは暗く沈める
   （Figmaでは、サムネの地と同じ重ねが1枚目以外のサムネの上にかかっている） */
.p-work__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-shade-strong);
	mix-blend-mode: hard-light;
	transition: opacity var(--transition);
}

.p-work__thumb:hover::after {
	opacity: 0.4;
}

.p-work__thumb[aria-pressed="true"]::after {
	opacity: 0;
}

/* ---- 説明の白い箱 ---- */

.p-work__info {
	padding: 1.875rem; /* 30px */
	background-color: var(--color-white);
	color: var(--color-text);
}

.p-work__award {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 0.9375rem; /* 10px 15px */
	margin-bottom: 0.625rem; /* 10px */
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-work__award-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem; /* 5px */
	height: 1.875rem; /* 30px */
	padding-inline: 0.625rem; /* 10px */
	background-color: var(--color-gold);
	color: var(--color-white);
}

.p-work__award-note {
	color: var(--color-gold);
}

.p-work__link {
	margin-top: 0.625rem; /* 10px */
}

.p-work__link a {
	color: var(--color-blue);
	text-decoration: underline;
}

.p-work__link a:hover {
	opacity: 0.7;
}

/* ---- 施設を切り替えるドット ---- */

.p-work__dots {
	display: flex;
	justify-content: center;
	gap: 0.9375rem; /* 15px */
	margin-top: 1.875rem; /* 30px */
}

.p-work__dot {
	width: 1.125rem;  /* 18px */
	height: 1.125rem;
	border-radius: 50%;
	background-color: var(--color-white);
	transition: background-color var(--transition);
}

.p-work__dot[aria-current="true"] {
	background-color: var(--color-dot);
}

/* スマホだけのもの（見出しの「。」、施設の写真のボタン、「詳細を見る＋」とポップアップ）。PCでは出さない */
.p-work__title-period,
.p-work__picks,
.p-work__more {
	display: none;
}

/* SP：FigmaのSPデザイン（2026-09-28）のとおり。英字・見出しはPCと同じく左揃え。
   施設は、矢印の代わりに上の施設の写真（FVのカードと同じ見た目）とドットで切り替える。
   サムネは写真の下に4列。施設の説明は「詳細を見る＋」で開くポップアップ（front-page.php の $work_info） */
@media (max-width: 1023px) {

	.p-work {
		padding-block: 7.625rem 8.75rem; /* 上122px（英字の上端まで）、下140px */
	}

	.p-work__head {
		display: block;
	}

	.p-work__title {
		margin-top: 3.125rem; /* 50px */
		line-height: 1.5517;  /* 90/58 */
	}

	.p-work__title-period {
		display: inline;
	}

	.p-work__lead {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
		text-align: center;
	}

	.p-work__arrows {
		display: none;
	}

	/* ---- 施設の写真のボタン（240×160が3つ）。選ばれているものは白い枠と下の三角、ほかは暗く沈める ---- */
	/* JSが動くときだけ出す（JSが止まると切り替えられない。そのときは1つ目の施設だけが見える） */
	.js .p-work__picks {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.625rem; /* 10px */
		margin-top: 3.125rem; /* 50px */
	}

	.p-work__pick {
		position: relative;
		height: 10rem; /* 160px */
		padding: 0.625rem; /* 10px 写真は220×140 */
	}

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

	.p-work__pick::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-shade);
		transition: opacity var(--transition);
	}

	.p-work__pick:hover::after {
		opacity: 0.5;
	}

	.p-work__pick[aria-current="true"] {
		background-color: var(--color-white);
	}

	.p-work__pick[aria-current="true"]::after {
		opacity: 0;
	}

	/* 選ばれている写真の下の三角（50×25） */
	.p-work__pick[aria-current="true"]::before {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		background-color: var(--color-white);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.p-work__slides {
		margin-top: 2.1875rem; /* 35px（三角の25pxを含む） */
	}

	/* ---- 大きい写真（740×450）・地名と施設名・サムネ ---- */
	.p-work__visual {
		height: auto;
	}

	.p-work__photo {
		height: auto;
		aspect-ratio: 740 / 450;
	}

	.p-work__tags {
		top: 1.25rem; /* 20px */
	}

	.p-work__tag {
		height: 3.5rem; /* 56px。文字は38px（--fs-lead-l） */
		padding-inline: 0.625rem 0.875rem; /* 10px 14px */
	}

	.p-work__visual::after {
		display: none;
	}

	/* サムネは4列。地はPCと同じ「ハードライト・不透明度90%」の暗い色を、サムネの後ろに敷く */
	.p-work__thumbs {
		position: relative;
		z-index: auto; /* 重なりの区切りを作らない（作ると、地の暗い色が欄の青と合成されない） */
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: auto;
		gap: 0.625rem 0.6875rem; /* 縦10px 横11px */
		width: 100%;
		padding: 0.625rem; /* 10px */
	}

	.p-work__thumbs::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-shade-strong);
		mix-blend-mode: hard-light;
	}

	.p-work__thumb {
		height: auto;
		aspect-ratio: 172 / 115;
	}

	/* ---- 詳細を見る＋（白いボタン）とポップアップ ---- */
	/* JSが動くときだけ出す（JSが止まると、ポップアップを開けないため） */
	.js .p-work__more {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.625rem; /* 10px */
		width: 41.25rem; /* 660px */
		height: 6.25rem; /* 100px */
		margin: 1.875rem auto 0; /* 上30px */
		border-radius: var(--radius-pill);
		background-color: var(--color-white);
		color: var(--color-blue);
		font-size: var(--fs-body); /* 34px */
		line-height: var(--lh-flat);
		transition: opacity var(--transition);
	}

	.p-work__more:hover {
		opacity: 0.7;
	}

	/* 「＋」は文字の0.875倍（30px） */
	.p-work__more .c-icon {
		font-size: 0.875em;
	}

	/* PCの白い箱は出さない（中身はポップアップに出る）。JSが止まったときは、ポップアップを開けないので白い箱を出す */
	.js .p-work__info {
		display: none;
	}

	/* ポップアップの中は、SPデザインの白い箱（幅740px・中40px） */
	.p-work__dialog-inner {
		padding: 2.5rem 2.5rem 2.3125rem; /* 40px 40px 37px */
	}

	.p-work__award {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9375rem; /* 15px */
		margin-bottom: 1.875rem; /* 30px */
	}

	.p-work__award-label {
		gap: 0.625rem; /* 10px */
		height: 3.25rem; /* 52px */
		padding-inline: 0.625rem 0.9375rem; /* 10px 15px */
	}

	.p-work__link {
		margin-top: 0.625rem; /* 10px */
	}

	/* ---- 施設を切り替えるドット（40px） ---- */
	.p-work__dots {
		gap: 1.875rem; /* 30px */
		margin-top: 3.125rem; /* 50px */
	}

	.p-work__dot {
		width: 2.5rem;  /* 40px */
		height: 2.5rem;
	}
}

/* ---- 白の地の Our Work（運営代行・清掃代行のページ。template-parts/our-work.php の type が light） ----
   Figma 運営代行（node 240:9）の Our Work。部品と中身はTOPと同じで、次の所だけ違う。
   ・欄の地は白（施設の外観の写真は重ねない）。英字・見出し・リードは真ん中
   ・矢印は写真の左右（1200pxの枠の外に20px空けて）。白い丸に青い線
   ・説明の箱は淡い青、ドットは淡い青（選ばれているものは青）
   上の余白は0（前の欄の下の余白200pxに続けて、英字を置く。Figmaのとおり） */

.p-work--light {
	padding-block: 0 12.5rem; /* 下200px（ドットの下から、次の欄の英字まで） */
	background-color: var(--color-white);
	color: var(--color-text);
}

.p-work--light::after {
	content: none;
}

.p-work--light .p-work__head {
	display: block;
	text-align: center;
}

/* 見出しの行間は72pxなので、Figmaの50pxから13px引いた37px（見出しの上と同じ） */
.p-work--light .p-work__lead {
	margin-top: 2.3125rem; /* 37px */
	color: var(--color-text);
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
}

/* 矢印を写真の左右に置くための枠 */
.p-work--light .p-work__stage {
	position: relative;
	margin-top: 3.75rem; /* 60px */
}

.p-work--light .p-work__slides {
	margin-top: 0;
}

/* 矢印の丸の上端は、写真の上端から421px（Figmaでは、写真と説明の箱を合わせた高さの真ん中）。
   施設で説明の長さが違っても、動かないように写真の上端から測る */
.p-work--light .p-work__arrows {
	position: absolute;
	top: 26.3125rem;     /* 421px */
	left: -4.375rem;     /* 枠の左端から70px外（丸50px＋すき間20px） */
	right: -4.375rem;
	z-index: 1;
	justify-content: space-between;
	margin: 0;
	pointer-events: none; /* 矢印のあいだは、下の写真を押せるようにする */
}

.p-work--light .p-work__arrow {
	border: 1px solid var(--color-blue);
	pointer-events: auto;
}

.p-work--light .p-work__info {
	background-color: var(--color-bg-blue);
}

.p-work--light .p-work__dot {
	background-color: var(--color-bg-blue);
}

.p-work--light .p-work__dot[aria-current="true"] {
	background-color: var(--color-blue);
}

/* ---- 清掃代行の Our Work（our-work.php の color が pink。形は上の light と同じ） ----
   Figma 清掃代行（node 384:9）。運営代行と次の所だけ違う。
   ・欄の地は淡いピンク。前の欄（対応エリア）の地が白なので、上の余白200pxをこの欄で持つ
   ・説明の箱とドットは白（選ばれているドットは濃いピンク）
   ・矢印と施設ページへのリンクは、運営代行と同じ青のまま（Figmaのとおり） */
.p-work--pink {
	padding-top: 12.5rem; /* 200px */
	background-color: var(--color-bg-pink);
}

.p-work--pink .p-work__info,
.p-work--pink .p-work__dot {
	background-color: var(--color-white);
}

.p-work--pink .p-work__dot[aria-current="true"] {
	background-color: var(--color-pink-deep);
}

/* SP：TOPのSPと同じ組み方（写真のボタン・サムネ4列・「詳細を見る＋」のポップアップ）。
   地が白なので、TOPで白にしていたもの（選ばれている写真のボタンの枠と三角、「詳細を見る＋」）は青で見せる */
@media (max-width: 1023px) {

	.p-work--light {
		padding-block: 0 8.75rem; /* 下140px */
	}

	.p-work--light .p-work__lead {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-work--light .p-work__stage {
		margin-top: 0;
	}

	.p-work--light .p-work__slides {
		margin-top: 2.1875rem; /* 35px（三角の25pxを含む） */
	}

	.p-work--light .p-work__pick[aria-current="true"],
	.p-work--light .p-work__pick[aria-current="true"]::before {
		background-color: var(--color-blue);
	}

	.js .p-work--light .p-work__more {
		border: 1px solid var(--color-blue);
	}

	/* 清掃代行（pink）：上の余白は122px。選ばれている写真のボタンの枠と三角、「詳細を見る＋」の枠は、ドットと同じ濃いピンク */
	.p-work--pink {
		padding-top: 7.625rem; /* 122px */
	}

	.p-work--pink .p-work__pick[aria-current="true"],
	.p-work--pink .p-work__pick[aria-current="true"]::before {
		background-color: var(--color-pink-deep);
	}

	.js .p-work--pink .p-work__more {
		border-color: var(--color-pink-deep);
		color: var(--color-pink-deep);
	}
}

/* ----------------------------------------------------------
   About us（ブランドと会社概要）
   大きな淡い英字「About us」を、ピンクの箱の上端に載せる
   ---------------------------------------------------------- */

.p-about {
	padding-top: 12.5rem; /* 200px */
	text-align: center;
}

.p-about__logo {
	width: 14.375rem;  /* 230px */
	height: 15.125rem; /* 242px Figmaの枠の高さ */
	margin-inline: auto;
}

.p-about__title {
	margin-top: 1.875rem; /* 30px */
	font-size: var(--fs-h2);
	line-height: var(--lh-flat);
}

.p-about__sub {
	width: fit-content;
	margin: 2.5rem auto 0; /* 40px */
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-about__text {
	margin-top: 2.5rem; /* 40px */
}

.p-about__en {
	margin-top: 2.5rem; /* 40px */
	color: var(--color-bg-pink);
	font-family: var(--font-en);
	font-size: var(--fs-en-deco);
	line-height: var(--lh-flat);
	white-space: nowrap;
}

/* 英字の下端（文字が載る線）と箱の上端をそろえる */
.p-about__box {
	margin-top: -1.8125rem; /* 29px */
	/* 左右は、中身の幅がいつも1200px相当になるように決める（1920pxで100px） */
	padding: 3.75rem calc((100% - 75rem) / 2) 6.25rem; /* 上 60px 下 100px */
	background-color: var(--color-bg-pink);
	text-align: left;
}

/* 会社概要・沿革の表 */
.p-about__row {
	display: grid;
	grid-template-columns: 15.25rem 1fr; /* 項目 244px */
	/* 行間34px（2026-10-28 に「その他の活動」の2行の値を足したため、1から2に）。
	   1行の行の高さは前と同じ96px（文字の上下に8.5pxずつ付くぶん、余白を40px 39pxから31.5px 30.5pxに減らした） */
	padding-block: 1.96875rem 1.90625rem; /* 31.5px 30.5px（下の線の1pxと合わせて32px） */
	border-bottom: 1px solid var(--color-line);
	line-height: var(--lh-normal); /* 34/17 */
}

.p-about__history {
	margin-top: 4.375rem; /* 70px */
}

/* 押すと沿革のポップアップが開く */
.p-about__history-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 20rem;    /* 320px */
	height: 3.75rem; /* 60px */
	margin-inline: auto;
	padding-inline: 2.0625rem 1.6875rem; /* 33px 27px */
	border-radius: var(--radius-pill);
	background-color: var(--color-mauve);
	color: var(--color-white);
	font-size: var(--fs-lead);
	line-height: var(--lh-flat);
	transition: opacity var(--transition);
}

.p-about__history-btn:hover {
	opacity: 0.7;
}

/* 沿革（ポップアップの中）。項目の幅を狭め、行のあいだを詰める */
.p-about__table--history {
	margin-top: 2.5rem; /* 40px */
	border-top: 1px solid var(--color-line);
}

.p-about__table--history .p-about__row {
	grid-template-columns: 10rem 1fr; /* 年月 160px */
	padding-block: 1.5rem 1.4375rem; /* 24px 23px（下の線の1pxと合わせて24px） */
	line-height: 1.765; /* 30/17 2行になる月があるので、年月と出来事の行の高さをそろえる */
}


/* SP：SPデザインの決まり（docs/06 この案件での判断 16）で組んだ。
   PCと同じく中央揃え（ロゴ・名前・ことばが並ぶブランドの欄）。
   文は意味の切れ目で改行する（front-page.php の u-sp-only の <br>）。会社概要の箱は、中を30px空ける */
@media (max-width: 1023px) {

	.p-about {
		padding-top: 7.6875rem; /* 123px。ほかの欄の上の余白と同じ */
	}

	/* 英字の下端（文字が載る線）と箱の上端をそろえる（PCの 29/200 と同じ比） */
	.p-about__box {
		margin-top: calc(var(--fs-en-deco) * -0.145);
		padding: 3.75rem 1.875rem 5rem; /* 60px 30px 80px */
	}

	.p-about__row {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		padding-block: 2rem;
		line-height: 1.765;
	}

	.p-about__row dt {
		font-weight: 500;
	}

	/* 値の中に <wbr> があるとき（対応エリア）は、その位置でだけ折り返す（front-page.php の $company）。
	   入りきらないときは、どこででも折り返す */
	.p-about__row dd {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* 文章の値（その他の活動。front-page.php の $company_prose）は、ふつうに折り返す（句読点の位置だけだと行の長さがそろわないため。2026-10-28） */
	.p-about__row dd.p-about__prose {
		word-break: normal;
	}

	/* ボタンはほかと同じ形（幅いっぱい・高さ120px・38px）。文字と「＋」をまとめて真ん中に置く */
	.p-about__history-btn {
		justify-content: center;
		gap: 0.75rem; /* 12px */
		width: 100%;
		height: 7.5rem; /* 120px */
		padding-inline: 1.875rem;
		font-size: var(--fs-lead-l); /* 38px */
	}

	.p-about__table--history .p-about__row {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   NEWS（お知らせの新着3件）
   ---------------------------------------------------------- */

.p-home-news {
	padding-block: 12.5rem; /* 200px */
}

.p-home-news__inner {
	display: grid;
	grid-template-columns: 1fr 53.75rem; /* 一覧 860px */
}

.p-home-news__title {
	margin-top: 1.75rem; /* 28px */
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-flat);
}

.p-home-news__more {
	margin-top: 2.3125rem; /* 37px */
	line-height: var(--lh-flat);
}

.p-home-news__more a {
	color: var(--color-text-sub);
	text-decoration: underline;
}

.p-home-news__more a:hover {
	opacity: 0.7;
}

.p-home-news__list {
	display: grid;
	gap: 0.9375rem; /* 15px */
}

/* 日付 125px ／ カテゴリー 80px ／ 題 ／ 矢印 */
.p-home-news__link {
	display: grid;
	grid-template-columns: 7.8125rem 5rem 1fr auto;
	align-items: center;
	min-height: 6.25rem; /* 100px */
	padding: 1rem 2.5rem; /* 左右40px */
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-pink);
	line-height: var(--lh-flat);
}

.p-home-news__link:hover {
	opacity: 0.7;
}

.p-home-news__cat {
	display: grid;
	place-items: center;
	height: 1.875rem; /* 30px */
	border: 1px solid var(--color-mauve);
	border-radius: 0.9375rem; /* 15px */
	color: var(--color-mauve);
	font-size: var(--fs-small);
}

.p-home-news__cat:empty {
	visibility: hidden;
}

/* お知らせの題はお客様が入れる文なので、長さに関係なく、言葉の切れ目で折り返す（一覧のカードの .p-news__title も同じ。
   ただしスマホの2列のカードは、ふつうに折り返す）。対応していないブラウザ（Safari）では、ふつうに折り返す。
   最後の行が1〜2文字だけにならないようにするのは、題の最後の3文字を .u-nowrap で囲んで行う（inc/news.php の mytheme_news_title_html）。
   text-wrap: pretty は使わない（iPhone の Safari では、まだ文字が入る所で行を折り返し、右に空きが出るため。2026-09-30） */
.p-home-news__name {
	margin-inline: 3.125rem 1.25rem; /* 50px 20px */
	line-height: 1.5; /* 長い題は折り返す */
	word-break: auto-phrase;
}

.p-home-news__icon {
	color: var(--color-mauve);
}

/* SP：SPデザインの決まり（docs/06 この案件での判断 16）で組んだ。
   英字・見出しはPCと同じく左揃え。「一覧を見る」は、一覧の下の右に回す */
@media (max-width: 1023px) {

	.p-home-news {
		padding-block: 7.6875rem 7rem; /* 上123px（英字の上端まで）、下112px */
	}

	.p-home-news__inner {
		grid-template-columns: 1fr;
	}

	/* 見出しの入れ物は使わず、中の3つ（英字・見出し・一覧を見る）を一覧と同じ並びに置く */
	.p-home-news__head {
		display: contents;
	}

	.p-home-news__title {
		margin-top: 3.125rem; /* 50px */
		line-height: 1.5517;  /* 90/58 */
	}

	.p-home-news__list {
		margin-top: 3.75rem; /* 60px */
	}

	.p-home-news__more {
		order: 1; /* 一覧の下へ */
		margin-top: 2.5rem; /* 40px */
		text-align: right;
	}

	.p-home-news__link {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"date cat icon"
			"name name icon";
		gap: 1.5rem 2rem;
		padding-block: 2.5rem;
	}

	.p-home-news__date {
		grid-area: date;
	}

	.p-home-news__cat {
		grid-area: cat;
		width: 8rem;
		height: 3.25rem;
		border-radius: var(--radius-pill);
	}

	/* スマホでは、言葉の切れ目ではなく、ふつうに折り返す（Chrome だけ言葉の切れ目で折り返し、行の右に空きが出ていた。
	   iPhone の Safari は言葉の切れ目の折り返しに対応していないので、ふつうの折り返しにそろえた。2026-09-30） */
	.p-home-news__name {
		grid-area: name;
		margin: 0;
		word-break: normal;
	}

	.p-home-news__icon {
		grid-area: icon;
	}
}

/* ==========================================================
   6. お知らせ（一覧・記事）
   Figma「永遠都コンフォルト」お知らせ一覧（node 317:2659）・お知らせ詳細（node 317:2923）。
   上部は template-parts/page-hero.php（「3. レイアウト」の下層ページの上部。色は gradient）。
   記事の本文の見た目は「4. 共通パーツ」の .c-entry、ページ送りは .c-pager。
   ========================================================== */

/* ----------------------------------------------------------
   一覧（/news/ とカテゴリー別。index.php）
   カテゴリーのボタン → 記事のカード（3列×5段）→ ページ送り
   ---------------------------------------------------------- */

.p-news {
	padding-block: 12.5rem; /* 200px */
}

/* ---- カテゴリーのボタン（選ばれているもの＝青の地に白、ほか＝淡い灰色の地） ---- */

.p-newsnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.875rem; /* 30px */
}

.p-newsnav__item a {
	display: block;
	padding: 0.4375rem 1.875rem; /* 7px 30px（高さ60px） */
	border-radius: var(--radius-sm);
	background-color: var(--color-news-tab);
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: 2.3; /* 46/20 */
}

.p-newsnav__item a:hover {
	opacity: 0.7;
}

.p-newsnav__item.is-current a {
	background-color: var(--color-blue);
	color: var(--color-white);
}

/* ---- 記事のカード（写真 380×264 → 題 → 日付）。カード全体が記事へのリンク ---- */

.p-news__main {
	margin-top: 3.125rem; /* 50px */
}

.p-news__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.125rem 1.875rem; /* 縦50px 横30px */
}

.p-news__card {
	display: block;
}

.p-news__card:hover {
	opacity: 0.7;
}

/* 写真。アイキャッチを真ん中を基準に切り抜く（無いときは共通の絵柄。inc/news.php） */
.p-news__thumb {
	position: relative;
	display: block;
	aspect-ratio: 380 / 264;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

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

/* 写真の左上のカテゴリーの札 */
.p-news__cat {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.625rem; /* 10px */
	border-radius: var(--radius-sm) 0 0 0;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* 題は省略しない（長ければ3行以上になる）。言葉の切れ目で折り返す（.p-home-news__name と同じ） */
.p-news__title {
	display: block;
	margin-top: 0.625rem; /* 10px */
	font-size: var(--fs-lead-l); /* 20px */
	font-weight: 500;
	line-height: 1.9; /* 38/20 */
	word-break: auto-phrase;
}

.p-news__date {
	display: block;
	margin-top: 0.625rem; /* 10px */
	color: var(--color-news-date);
	font-size: var(--fs-body); /* 17px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* 記事が無いとき（Figmaに無い） */
.p-news__empty {
	padding-block: 3.125rem; /* 50px */
	text-align: center;
}

/* SP：スマホの作り替えルール（参考資料18の手順12）。カードは2列（幅365px、写真365×254）。
   カテゴリーのボタンは3つずつ（240×100、あいだ10px）。題34/50・日付28px */
@media (max-width: 1023px) {

	.p-news {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-newsnav__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.625rem; /* 10px */
	}

	.p-newsnav__item a {
		display: grid;
		place-items: center;
		min-height: 6.25rem; /* 100px */
		padding: 0.625rem;
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706; /* 50/34 */
		text-align: center;
	}

	.p-news__main {
		margin-top: 3.75rem; /* 60px */
	}

	.p-news__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 3.75rem 0.625rem; /* 縦60px 横10px */
	}

	.p-news__cat {
		padding: 0.625rem 0.875rem; /* 10px 14px */
		font-size: var(--fs-small); /* 28px */
	}

	/* 2列のカードは1行が9文字ほどで、長い言葉（「宿泊施設運営代行サービス」など）が1行に入らない。
	   言葉の切れ目で折り返すと1行目が短くなりすぎ、行の長さをそろえると会社名「永遠都コンフォルト」が途中で切れやすいので、
	   スマホではふつうに折り返す（2026-09-29 見比べて決めた） */
	.p-news__title {
		margin-top: 1.25rem; /* 20px */
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706; /* 50/34 */
		word-break: normal;
	}

	.p-news__date {
		margin-top: 1.25rem; /* 20px */
		font-size: var(--fs-small); /* 28px */
	}
}

/* ----------------------------------------------------------
   記事（single.php。page.php の本文も同じ形）
   淡い青の地に白い箱（幅1200px・中の余白100px）→「記事一覧へ戻る」→（Contact）
   ---------------------------------------------------------- */

.p-article {
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-blue);
}

.p-article__box {
	padding: 6.25rem; /* 100px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

/* アイキャッチ（本文の先頭。切り抜かず、写真の元の大きさ（最大で箱の幅）で真ん中に。single.php） */
.p-article__eyecatch {
	margin-bottom: 3.75rem; /* 60px */
}

.p-article__eyecatch img {
	margin-inline: auto;
	border-radius: var(--radius-sm);
}

/* 記事一覧へ戻る（青の丸いボタン 360×70・18px） */
.p-article__back {
	margin-top: 6.25rem; /* 100px */
	text-align: center;
}

.p-article__back-btn {
	display: inline-grid;
	place-items: center;
	width: 22.5rem;       /* 360px */
	max-width: 100%;
	min-height: 4.375rem; /* 70px */
	padding: 0.625rem 1.25rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-lead); /* 18px */
	line-height: 1.4444; /* 26/18 */
}

.p-article__back-btn:hover {
	opacity: 0.7;
}

/* SP：白いカード（中の余白40px）。ボタンは型J（660×100・34px） */
@media (max-width: 1023px) {

	.p-article {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-article__box {
		padding: 2.5rem; /* 40px */
	}

	.p-article__eyecatch {
		margin-bottom: 2.5rem; /* 40px */
	}

	.p-article__back {
		margin-top: 3.75rem; /* 60px */
	}

	.p-article__back-btn {
		width: 41.25rem;      /* 660px */
		min-height: 6.25rem;  /* 100px */
		font-size: var(--fs-body); /* 34px */
	}
}

/* ==========================================================
   7. お問い合わせ・完了・404
   お問い合わせ：Figma「永遠都コンフォルト」お問い合わせ（node 317:1441）。page-contact.php
   上部（template-parts/page-hero.php）→ 相談方法 → 電話（淡い青の地）→ フォーム（淡いピンクの箱）→（Contact）。
   フォームの中は「4. 共通パーツ ＞ フォーム」（.c-form）。欄の見出しは .c-heading--gradient
   ========================================================== */

/* ---- 相談方法（青・ピンク・緑のボタン 380×120。あいだ30px） ---- */

.p-contact-ways {
	padding-block: 12.5rem; /* 200px */
}

.p-contact-ways__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem; /* 30px */
	margin-top: 2.9375rem; /* 47px（Figmaの60px。見出しの行間の差の13pxを引く） */
}

.p-contact-ways__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.4545em; /* 10px */
	height: 7.5rem; /* 120px */
	border-radius: var(--radius-md);
	color: var(--color-white);
	font-size: var(--fs-h5); /* 22px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-contact-ways__btn:hover {
	opacity: 0.7;
}

.p-contact-ways__btn--tel {
	background-color: var(--color-blue);
}

.p-contact-ways__btn--form {
	background-color: var(--color-pink);
}

.p-contact-ways__btn--line {
	background-color: var(--color-line-app);
}

/* ---- 電話（淡い青の地。青い線の枠の中に、電話番号と受付時間） ---- */

.p-contact-tel {
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-blue);
}

.p-contact-tel__box {
	margin-top: 3.5625rem; /* 57px（Figmaの70px。見出しの行間の差の13pxを引く） */
	padding: 3.0625rem 1.25rem; /* 49px（線1pxとあわせて50px） */
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-md);
	text-align: center;
}

/* 押すと電話をかけられる（EB Garamond 60px） */
.p-contact-tel__number {
	color: var(--color-blue);
	font-family: var(--font-en);
	font-size: 3.75rem; /* 60px */
	line-height: var(--lh-flat);
}

.p-contact-tel__number a:hover {
	opacity: 0.7;
}

.p-contact-tel__hours {
	margin-top: 1.25rem; /* 20px */
	font-size: var(--fs-lead-l); /* 20px */
	line-height: 2.1; /* 42/20 */
}

/* ---- フォーム（淡いピンクの箱。中の余白100px） ---- */

.p-contact-form {
	padding-block: 12.5rem; /* 200px */
}

.p-contact-form__box {
	margin-top: 3.5625rem; /* 57px（Figmaの70px） */
	padding: 6.25rem; /* 100px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
}

/* ---- 送信完了（page-thanks.php）。Figmaに無いので、お知らせの記事と同じ淡い青の地に白い箱（.p-article） ---- */

.p-thanks__text {
	text-align: center;
}

.p-thanks__text + .p-thanks__text {
	margin-top: 1.875rem; /* 30px */
}

.p-thanks__text a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-thanks__text a:hover {
	opacity: 0.7;
}

/* ---- 404 ---- */

.p-notfound {
	text-align: center;
}

.p-notfound__text {
	line-height: var(--lh-body);
}

.p-notfound__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 3rem;
}

/* SP：スマホの作り替えルール（参考資料18）。欄の上122px・下140px。
   相談方法のボタンは縦に3つ（型I、740×120・38px）。電話番号は72px（Contact の欄と同じ）、受付時間は28px。
   フォームの箱は中の余白40px。完了ページの本文は左揃え（3行以上になるため） */
@media (max-width: 1023px) {

	.p-contact-ways,
	.p-contact-tel,
	.p-contact-form {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-contact-ways__list {
		grid-template-columns: 1fr;
		gap: 1.25rem; /* 20px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-contact-ways__btn {
		font-size: var(--fs-lead-l); /* 38px */
	}

	.p-contact-tel__box {
		margin-top: 3.75rem; /* 60px */
		padding: 2.4375rem 1.875rem; /* 39px（線とあわせて40px） 30px */
	}

	.p-contact-tel__number {
		font-size: 4.5rem; /* 72px */
	}

	.p-contact-tel__hours {
		font-size: var(--fs-small); /* 28px */
		line-height: 1.5714; /* 44/28 */
	}

	.p-contact-form__box {
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem; /* 40px */
	}

	.p-thanks__text {
		text-align: left;
	}

	.p-thanks__text + .p-thanks__text {
		margin-top: 3.125rem; /* 50px */
	}
}

/* ==========================================================
   8. 運営代行（page-minpaku-daiko.php）
   Figma「永遠都コンフォルト」運営代行（node 240:9）。上から
   FV（template-parts/page-hero.php）→ For Owners → Registration → Service → Why Us →
   Our Work（template-parts/our-work.php）→ Pricing → Flow → Area → FAQ →（Contact）。
   配色はFigmaのまま（料金欄のベージュ系も。2026-09-26 決定 J-1）。
   Figmaとの違い（こちらでそろえたもの）：
   ・Service の写真の高さは、業務の数で決まる（Figmaの 01・02 は4px高い）
   ・料金の白い箱の下の余白は38px（Figmaは33・39・38px）。オプションの淡い青の箱の下の余白は28px（現地対応だけ32px）
   ・Flow のカードのあいだは80px（Figmaは Step 03 と 04 のあいだだけ114px。2026-09-28 ユーザー了承）
   ・FAQ の行は真ん中（Figmaは7px左。2026-09-28 ユーザー了承）
   ========================================================== */

/* ----------------------------------------------------------
   For Owners（開業準備中の方／運営中の方）
   青の地。左上に飾りの写真を置き、右と下へ青に溶け込ませる
   ---------------------------------------------------------- */

.p-owners {
	position: relative;
	isolation: isolate; /* 飾りの写真を、この欄の地の上・中身の下に置く */
	overflow: hidden;   /* 狭い画面で、飾りの写真を欄の外に出さない */
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	background-color: var(--color-blue);
	/* FVの「Scroll」で来たとき、この欄の上端を画面の上端にそろえる。
	   html の scroll-padding-top（ヘッダーの高さ＋1rem）を、ここでは打ち消す */
	scroll-margin-top: calc((var(--header-height-stuck) + 1rem) * -1);
}

.p-owners__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 56.25rem;  /* 900px */
	height: 37.5rem;  /* 600px */
}

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

/* 右と下へ、欄の青に溶け込ませる（Figma 247:361・247:363） */
.p-owners__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-blue)),
		linear-gradient(90deg, transparent, var(--color-blue));
}

/* 大見出しは2行（行間72px）。英字から40px（Figmaのとおり） */
.p-owners .c-heading__title {
	margin-top: 2.5rem; /* 40px */
}

.p-owners__block {
	margin-top: 5.625rem; /* 90px（前の白いカードから） */
}

/* 最初の立場（大見出しから88px）。あいだのタブはスマホだけ出る */
.p-owners__tabs + .p-owners__block {
	margin-top: 5.5rem; /* 88px */
}

/* タブ（スマホだけ）。PCでは出さず、2つとも並べる */
.p-owners__tabs {
	display: none;
}

/* 立場のラベル（h3） */
.p-owners__label {
	display: flex;
	align-items: center;
	width: fit-content;
	height: 3.75rem; /* 60px */
	margin-inline: auto;
	padding-inline: 1.25rem; /* 20px */
	border-radius: var(--radius-md);
	background-color: var(--color-owners-tag);
	color: var(--color-owners-voice);
	font-size: var(--fs-emph); /* 30px */
	line-height: var(--lh-flat);
}

/* 問い */
.p-owners__question {
	margin-top: 2.5rem; /* 40px */
	color: var(--color-owners-voice);
	font-size: var(--fs-emph); /* 30px */
	font-weight: 500;
	line-height: var(--lh-flat);
	text-align: center;
}

/* 吹き出し3つ（380×100。しっぽは、真ん中の白いカードのほうを向く） */
.p-owners__voices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem; /* 30px */
	margin-top: 2.875rem; /* 46px */
}

.p-owners__voice {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 6.25rem; /* 100px */
	padding: 1.0625rem 1rem 1.1875rem; /* 17px 16px 19px（Figmaの文字の位置） */
	border-radius: var(--radius-md);
	background-color: var(--color-owners-voice);
	color: var(--color-owners-tag);
	font-size: var(--fs-body);
	line-height: 1.8824; /* 32/17 */
	text-align: center;
}

/* しっぽ（高さ20px）。左の吹き出しは右寄りで右へ、真ん中は下へ、右の吹き出しは左寄りで左へ傾ける（Figmaの形） */
.p-owners__voice::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 1.25rem; /* 20px */
	background-color: var(--color-owners-voice);
}

.p-owners__voice:nth-child(1)::after {
	left: 19.375rem;  /* 310px */
	width: 3.125rem;  /* 50px */
	clip-path: polygon(0 0, 80% 0, 100% 100%);
}

.p-owners__voice:nth-child(2)::after {
	left: calc(50% - 1.25rem);
	width: 2.5rem; /* 40px */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.p-owners__voice:nth-child(3)::after {
	left: 1.25rem;    /* 20px */
	width: 3.125rem;  /* 50px */
	clip-path: polygon(20% 0, 100% 0, 0 100%);
}

/* 白いカード。写真のあるカードは左揃え、無いカードは真ん中 */
.p-owners__card {
	position: relative;
	margin-top: 3.125rem; /* 50px */
	overflow: hidden; /* 写真の角を、カードの角丸に合わせる */
	padding: 1.4375rem 2.1875rem 3.125rem; /* 23px 35px 50px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-text);
	text-align: center;
}

.p-owners__card--photo {
	padding-bottom: 1.75rem; /* 28px */
	text-align: left;
}

/* カードの右の写真（380px）。左へ白くフェードし、本文がその上にかかる */
.p-owners__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 23.75rem; /* 380px */
}

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

.p-owners__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-white), transparent);
}

.p-owners__title,
.p-owners__text,
.p-owners__cases {
	position: relative; /* 写真より上に出す */
}

.p-owners__title {
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
}

.p-owners__text {
	margin-top: 0.6875rem; /* 11px */
	line-height: var(--lh-body);
}

/* 運営中の方のカードの下の、淡い青の箱2つ */
.p-owners__cases {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem; /* 40px */
	margin: 1.875rem 0.9375rem 0; /* 上30px、左右はカードの内側からさらに15px（Figmaの x=410〜1510） */
}

.p-owners__case {
	padding: 0.9375rem 3.125rem 1.6875rem; /* 15px 50px 27px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
}

.p-owners__case-title {
	color: var(--color-blue);
	font-size: 1.5625rem; /* 25px */
	font-weight: 500;
	line-height: 1.84;    /* 46/25 */
	text-align: center;
}

.p-owners__case-text {
	margin-top: 0.625rem; /* 10px */
	line-height: var(--lh-body);
	text-align: left;
}

/* SP：スマホの作り替えルール（参考資料18）で組んだ形。
   「開業準備中の方／運営中の方」は、どちらの中身も1画面を超えるので、タブで1つずつ切り替える（main.js の 3.。.js があるときだけ）。
   タブはPCのラベルの色（選ばれているもの）と吹き出しの色（ほか）で作り、選ばれているものの下に三角。
   中身は「問い → 吹き出し（しっぽの無い箱を縦に）→ 白いカード（見出し → 写真 → 本文 → 淡い青の箱を縦に）」。
   大見出しの黄色の2行目は、リードの大きさ（46px）にする。飾りの写真は、左上に幅400pxで小さく置く（PCと同じ割合） */
@media (max-width: 1023px) {

	.p-owners {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-owners__bg {
		width: 25rem;       /* 400px */
		height: 16.6875rem; /* 267px */
	}

	/* 大見出し：白の2行（58px）は行の終わりが「、」「。」なので、真ん中を20px右へ寄せる。黄色の2行は46px */
	.p-owners .c-heading__title {
		margin-top: 3.125rem;  /* 50px */
		padding-left: 2.5rem;  /* 40px（真ん中が20px右へ寄る） */
	}

	.p-owners .c-heading__yellow {
		display: block;
		margin-top: 1.875rem;     /* 30px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	/* ---- タブ（2つ。高さ100px・あいだ15px） ---- */
	.js .p-owners__tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.9375rem; /* 15px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-owners__tab {
		position: relative;
		display: grid;
		place-items: center;
		height: 6.25rem; /* 100px */
		border-radius: var(--radius-md);
		background-color: var(--color-owners-voice);
		color: var(--color-owners-tag);
		font-size: var(--fs-h4); /* 42px（7文字の名前） */
		font-weight: 500;
		line-height: var(--lh-flat);
		transition: opacity var(--transition);
	}

	.p-owners__tab:hover {
		opacity: 0.7;
	}

	.p-owners__tab.is-active {
		background-color: var(--color-owners-tag);
		color: var(--color-owners-voice);
	}

	.p-owners__tab.is-active:hover {
		opacity: 1;
	}

	/* 選ばれているタブの下の三角（50×25） */
	.p-owners__tab.is-active::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		background-color: var(--color-owners-tag);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.p-owners__block,
	.p-owners__tabs + .p-owners__block {
		margin-top: 3.75rem; /* 60px（JSが動かないときの、立場のあいだ） */
	}

	/* タブがあるときは、三角の下から10px（25px＋10px。問いの行の上の空きと合わせて、見た目は約45px。2026-09-28 ユーザー指摘で詰めた） */
	.js .p-owners__block {
		margin-top: 2.1875rem; /* 35px */
	}

	/* 選ばれていない立場は隠す（JSが動かないときは2つとも見せる） */
	.js .p-owners__block:not(.is-active) {
		display: none;
	}

	/* 立場の名前（JSが動かないときだけ。タブが同じ名前を出すので、タブがあるときは隠す） */
	.p-owners__label {
		height: 5.625rem; /* 90px */
		padding-inline: 1.875rem; /* 30px */
		font-size: var(--fs-h4); /* 42px */
	}

	.js .p-owners__label {
		display: none;
	}

	/* 問い（42px・行間64px） */
	.p-owners__question {
		margin-top: 1.875rem; /* 30px（ラベルから） */
		font-size: var(--fs-h4);
		line-height: 1.5238; /* 64/42 */
	}

	.js .p-owners__question {
		margin-top: 0;
	}

	/* 吹き出し（しっぽの無い箱。幅740px・最小の高さ160px・38px）。問いから30px（2026-09-28 ユーザー指摘で詰めた） */
	.p-owners__voices {
		grid-template-columns: 1fr;
		gap: 1.25rem; /* 20px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-owners__voice {
		min-height: 10rem; /* 160px */
		padding: 1.25rem 1.875rem; /* 20px 30px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-owners__voice::after {
		display: none;
	}

	/* 白いカード（中40px）。見出し → 写真 → 本文 → 淡い青の箱 の順に縦に並べる（写真はHTMLでは先にあるので order で並べ替える。写真は飾りで読み上げない） */
	.p-owners__card,
	.p-owners__card--photo {
		display: flex;
		flex-direction: column;
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem; /* 40px */
		text-align: left;
	}

	/* 見出し（50px・行間74px）。どちらのカードも左揃え（2026-09-28 ユーザー指示）。
	   開業準備中の方の見出しを「開業までの道のりを一つずつ／丁寧にサポートします。」の2行にするため、
	   1行目の13文字が中身の幅（660px）に入る50pxにしている（52pxだと676pxで入らない） */
	.p-owners__title {
		order: 0;
		font-size: 3.125rem; /* 50px */
		line-height: 1.48;   /* 74/50 */
	}

	.p-owners__photo {
		position: static;
		order: 1;
		width: 100%;
		height: 25rem; /* 400px（660×400） */
		margin-top: 1.875rem; /* 30px */
	}

	.p-owners__photo::after {
		display: none;
	}

	.p-owners__text {
		order: 2;
		margin-top: 1.875rem; /* 30px */
	}

	/* 淡い青の箱2つは縦に */
	.p-owners__cases {
		order: 3;
		grid-template-columns: 1fr;
		gap: 1.875rem; /* 30px */
		margin: 3.75rem 0 0; /* 上60px */
	}

	.p-owners__case {
		padding: 2.5rem 1.875rem; /* 40px 30px */
	}

	.p-owners__case-title {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-owners__case-text {
		margin-top: 1.875rem; /* 30px */
	}
}

/* ----------------------------------------------------------
   Registration（住宅宿泊管理業者の登録）
   淡い青の地。右上に飾りの写真を置き、左と下へ地に溶け込ませる
   ---------------------------------------------------------- */

.p-registration {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-blue);
}

.p-registration__bg {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 83rem;     /* 1328px */
	height: 46.25rem; /* 740px */
}

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

/* 左と下へ、欄の淡い青に溶け込ませる（Figma 252:397・252:399） */
.p-registration__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-bg-blue)),
		linear-gradient(90deg, var(--color-bg-blue), transparent);
}

.p-registration__text {
	margin-top: 1.25rem; /* 20px */
	line-height: var(--lh-body);
}

.p-registration .c-heading + .p-registration__text {
	margin-top: 2.5rem; /* 40px */
}

/* 委託が必要な場合（白い箱。幅は中身に合わせる） */
.p-registration__cases {
	width: fit-content;
	margin-top: 1.25rem; /* 20px */
	padding: 0.5625rem 1.25rem 0.6875rem; /* 9px 20px 11px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-blue);
	font-weight: 500;
	line-height: var(--lh-normal); /* 34/17 */
}

.p-registration__cases li {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
}

.p-registration__cases .c-icon {
	flex-shrink: 0;
}

/* 登録番号（白い箱） */
.p-registration__number {
	display: flex;
	align-items: center;
	width: fit-content;
	height: 3.75rem; /* 60px */
	margin-top: 2.25rem; /* 36px */
	padding-inline: 2.125rem 2.0625rem; /* 34px 33px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* SP：スマホの作り替えルール（参考資料18）。英字・大見出しはPCと同じ左揃え。
   写真は欄の上に幅いっぱい（左と下へ地に溶け込ませるのはPCと同じ）。
   大見出しは3行のまま（2行目は幅より14px長いが、2%までなので折り返さず、右の余白にかける。Our Promise と同じ扱い）。
   委託が必要な場合は、1つずつ白い箱（最小の高さ100px）。登録番号は38pxで真ん中、「(」の前でだけ折り返す */
@media (max-width: 1023px) {

	.p-registration {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-registration__bg {
		width: 100%;
		height: 27.875rem; /* 446px（写真の形のまま、幅800px） */
	}

	.p-registration .c-heading__title {
		white-space: nowrap;
	}

	.p-registration .c-heading + .p-registration__text {
		margin-top: 3.125rem; /* 50px */
	}

	.p-registration__cases {
		display: grid;
		gap: 1.25rem; /* 20px */
		width: auto;
		margin-top: 3.75rem; /* 60px */
		padding: 0;
		background: none;
		line-height: 1.4706; /* 50/34 */
	}

	/* チェックの印は1文字分。2行目は文の頭にそろえる */
	.p-registration__cases li {
		display: grid;
		grid-template-columns: auto 1fr;
		align-content: center;
		align-items: start;
		gap: 0.625rem; /* 10px */
		min-height: 6.25rem; /* 100px */
		padding: 1.25rem 1.875rem; /* 20px 30px */
		border-radius: var(--radius-md);
		background-color: var(--color-white);
	}

	.p-registration__cases .c-icon {
		margin-top: calc((1.4706 - 1) * 0.5em);
	}

	.p-registration__cases + .p-registration__text {
		margin-top: 3.125rem; /* 50px */
	}

	.p-registration__number {
		display: block;
		width: auto;
		height: auto;
		min-height: 6.25rem; /* 100px */
		margin-top: 3.75rem; /* 60px */
		padding: 1.375rem 1.875rem; /* 22px 30px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
		text-align: center;
	}

	/* 「(」の前と後ろは、それぞれ途中で折り返さない */
	.p-registration__number span {
		display: inline-block;
	}
}

/* ----------------------------------------------------------
   Service（ご依頼いただける業務 01〜05）
   番号の帯 → 写真と業務の一覧。写真は奇数番目が左・偶数番目が右で、一覧の側へ白くフェードする。
   一覧の文字は、写真の白くなった所にかかる（Figmaのとおり）
   ---------------------------------------------------------- */

.p-duties {
	padding-block: 12.5rem; /* 200px */
}

.p-duties__list {
	margin-top: 3.75rem; /* 60px */
}

.p-duties__item + .p-duties__item {
	margin-top: 3.125rem; /* 50px */
}

/* 番号の帯（h3）。番号（EB Garamond 80px）→ 縦線 → 見出し */
.p-duties__head {
	display: flex;
	align-items: center;
	height: 7.5rem; /* 120px */
	padding-left: 1.3125rem; /* 21px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
	color: var(--color-blue);
}

.p-duties__num {
	flex-shrink: 0;
	width: 4.8125rem; /* 77px（番号の幅をそろえ、縦線と見出しの位置を01〜05で同じにする） */
	font-family: var(--font-en);
	font-size: 5rem; /* 80px */
	font-weight: 400;
	line-height: var(--lh-flat);
}

.p-duties__name {
	position: relative;
	margin-left: 1.375rem;   /* 22px（番号から縦線まで） */
	padding-left: 1.875rem;  /* 30px（縦線から見出しまで） */
	font-size: var(--fs-h3); /* 32px */
	line-height: 1.4375;     /* 46/32 */
}

/* 縦線（高さ90px） */
.p-duties__name::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height: 5.625rem; /* 90px */
	border-left: 1px solid var(--color-blue);
	translate: 0 -50%;
}

/* 写真と一覧。一覧は、写真の端から112px内側にかかる位置から始める（Figmaの x=768） */
.p-duties__body {
	position: relative;
	margin-top: 1.875rem; /* 30px */
	/* 上下は、一覧の最初と最後の行の文字が写真の上端・下端から30pxになる余白（行の高さ38pxの中の文字17pxの位置で計算） */
	padding: 1.21875rem 0 1.28125rem 25.5rem; /* 19.5px 0 20.5px 408px */
}

.p-duties__item--reverse .p-duties__body {
	padding-left: 1.3125rem; /* 21px */
}

.p-duties__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 32.5rem; /* 520px */
	overflow: hidden;
	border-radius: var(--radius-md);
}

.p-duties__item--reverse .p-duties__photo {
	right: 0;
	left: auto;
}

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

/* 一覧の側へ白くフェード（左の写真は右へ、右の写真は左へ） */
.p-duties__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--color-white));
}

.p-duties__item--reverse .p-duties__photo::after {
	background: linear-gradient(90deg, var(--color-white), transparent);
}

.p-duties__items {
	position: relative; /* 写真より上に出す */
	line-height: var(--lh-body); /* 行の高さ38px */
}

.p-duties__items li,
.p-pricing__plan-items li {
	display: flex;
	gap: 0.4375rem; /* 7px */
}

/* 丸のチェック（17px）。1行目の文字の高さの真ん中に置く */
.p-duties__items .c-icon,
.p-pricing__plan-items .c-icon {
	flex-shrink: 0;
	margin-top: calc((var(--lh-body) - 1) * 0.5em);
	color: var(--color-blue);
}

/* 01 の下の「予約サイト」の枠 */
.p-duties__ota {
	margin-top: 3.125rem; /* 50px */
	padding: 1.375rem 2rem 2.375rem; /* 線1pxの内側に 22px 32px 38px */
	border: 1px solid var(--color-ota-line);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	text-align: center;
}

.p-duties__ota-title {
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
}

/* ロゴは2段（上に3つ、下に2つ）。上の段は50px、下の段は30px空ける（Figmaのとおり） */
.p-duties__ota-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.625rem 3.125rem; /* 縦10px 横50px */
	max-width: 61.75rem; /* 988px（上の段の3つがちょうど入る幅） */
	margin: 1.875rem auto 0; /* 上30px */
}

/* 下の段の2つは、左右を10pxずつ詰めて、あいだを30pxにする */
.p-duties__ota-logo:nth-child(n+4) {
	margin-inline: -0.625rem;
}

/* ロゴの表示の幅は page-minpaku-daiko.php の $ota_sites の size（--logo-w で渡す） */
.p-duties__ota-logo img {
	width: var(--logo-w);
	height: auto;
}

/* 掲載の許可が取れていない社は、ロゴの代わりに社名の文字で出す（page-minpaku-daiko.php の $ota_sites） */
.p-duties__ota-name {
	display: block;
	padding: 0.625rem 1.25rem;
	font-size: var(--fs-emph);
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-duties__ota-text {
	margin-top: 1.25rem; /* 20px */
	line-height: var(--lh-body);
}

/* 最後の注記（青い帯） */
.p-duties__note {
	display: grid;
	place-items: center;
	min-height: 7.5rem; /* 120px */
	margin-top: 3.125rem; /* 50px */
	padding: 1.375rem 1rem; /* 22px 16px */
	border-radius: var(--radius-md);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-lead); /* 18px */
	font-weight: 500;
	line-height: 2.1111; /* 38/18 */
	text-align: center;
}

/* SP：スマホの作り替えルール（参考資料18）。業務の一覧は隠さず、01〜05を縦に並べる。
   番号の帯（番号80px＋見出し42px。中身で高さが伸びる）→ 写真（740×450）→ チェックの一覧（1列）。
   リードは意味の切れ目で4行にして真ん中（2026-09-28 ユーザー指示。page-minpaku-daiko.php の <br class="u-sp-only">）。
   予約サイトのロゴは1行に2つ（幅300px）、最後の1つは真ん中 */
@media (max-width: 1023px) {

	.p-duties {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-duties__list {
		margin-top: 3.75rem; /* 60px */
	}

	.p-duties__item + .p-duties__item {
		margin-top: 3.75rem; /* 60px */
	}

	.p-duties__head {
		height: auto;
		min-height: 6.25rem; /* 100px */
		padding: 1.25rem 1.875rem 1.25rem 1.25rem; /* 20px 30px 20px 20px */
	}

	/* 番号（80px）。52pxでは見出しの3行に対して小さかった（2026-09-28 ユーザー指摘） */
	.p-duties__num {
		width: auto;
		font-size: 5rem; /* 80px */
	}

	.p-duties__name {
		margin-left: 1.5625rem;  /* 25px */
		padding-left: 1.5625rem; /* 25px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	/* 縦線は見出しの高さいっぱい */
	.p-duties__name::before {
		top: 0;
		bottom: 0;
		height: auto;
		translate: none;
	}

	.p-duties__body,
	.p-duties__item--reverse .p-duties__body {
		margin-top: 1.875rem; /* 30px */
		padding: 0;
	}

	.p-duties__photo,
	.p-duties__item--reverse .p-duties__photo {
		position: static;
		width: 100%;
		height: 28.125rem; /* 450px */
	}

	.p-duties__photo::after {
		display: none;
	}

	/* 一覧は、1つの項目の中の行間を詰め（50/34）、項目のあいだを20px空ける（項目のあいだ＞行間。2026-09-28 ユーザー指摘） */
	.p-duties__items {
		--lh-body: 1.4706; /* 50/34（チェックの位置の計算にも使う） */
		margin-top: 1.875rem; /* 30px */
	}

	.p-duties__items li + li {
		margin-top: 1.25rem; /* 20px */
	}

	/* ---- 予約サイトの枠 ---- */
	.p-duties__ota {
		margin-top: 3.75rem; /* 60px */
		padding: 2.4375rem; /* 線1pxの内側に39px（あわせて40px） */
	}

	.p-duties__ota-title {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-duties__ota-logos {
		gap: 1.25rem; /* 20px */
		max-width: none;
		margin-top: 1.875rem; /* 30px */
	}

	/* ロゴの枠（300×100）。ロゴは枠に収まる大きさで真ん中に置く */
	.p-duties__ota-logo,
	.p-duties__ota-logo:nth-child(n+4) {
		display: grid;
		place-items: center;
		width: 18.75rem; /* 300px */
		height: 6.25rem; /* 100px */
		margin-inline: 0;
	}

	.p-duties__ota-logo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.p-duties__ota-text {
		margin-top: 1.875rem; /* 30px */
		text-align: left;
	}

	/* 最後の注記（青い帯）。本文の大きさで4行になるので左揃え */
	.p-duties__note {
		display: block;
		min-height: 0;
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem; /* 40px */
		font-size: var(--fs-body); /* 34px */
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ----------------------------------------------------------
   Why Us（自社で宿を営む私たちだからできること）
   全幅の写真（光の差す白い地）を敷き、下へ白に溶け込ませる。白いカード3つ（写真は右・左・右）
   ---------------------------------------------------------- */

.p-whyus {
	position: relative;
	isolation: isolate;
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	/* 背景の光の筋は、template-parts/light-rays.php（土台と筋のまとまりに分けた写真。「4. 共通パーツ ＞ 飾りの動き」⑤の .c-photo-light__ray） */
}

/* 下へ白に溶け込ませる（Figma 265:534） */
.p-whyus::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(transparent, var(--color-white));
}

/* 大見出しは2行（行間72px）。英字から50px（Figmaのとおり） */
.p-whyus .c-heading__title {
	margin-top: 3.125rem; /* 50px */
}

.p-whyus__list {
	display: grid;
	gap: 2.5rem; /* 40px */
	margin-top: 3.125rem; /* 50px */
}

/* 白いカード（1200×220）。写真の側だけ角を丸める */
.p-whyus__card {
	display: flex;
	min-height: 13.75rem; /* 220px */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-whyus__body {
	flex: 1;
	padding: 1.4375rem 2.5rem 1.625rem; /* 23px 40px 26px */
}

/* 見出し（青）。左に縦の棒（6×32） */
.p-whyus__title {
	position: relative;
	padding-left: 1.25rem; /* 20px */
	color: var(--color-blue);
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
}

.p-whyus__title::before {
	content: "";
	position: absolute;
	top: 0.5rem; /* 8px */
	left: 0;
	width: 0.375rem; /* 6px */
	height: 2rem;    /* 32px */
	border-radius: 0.1875rem;
	background-color: var(--color-blue);
}

.p-whyus__text {
	margin-top: 0.6875rem; /* 11px */
	line-height: var(--lh-body);
}

.p-whyus__photo {
	flex-shrink: 0;
	width: 16.875rem; /* 270px */
	height: auto;
	object-fit: cover;
}

/* SP：スマホの作り替えルール（参考資料18）。白いカード3つを縦に並べ、カードの中は「見出し（42px・左に縦線）→ 写真（660×400）→ 本文」。
   写真の位置（右・左）はPCだけのもの。スマホはどのカードも同じ順にする */
@media (max-width: 1023px) {

	.p-whyus {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	/* 背景の光の筋：スマホは欄が縦に長く、真ん中合わせだと写真の真ん中の細い帯だけが見えて、光の筋がほとんど入らない。
	   光の元（写真の左上）のある左端にそろえる（2026-10-01。見出しのまわりで筋が揺れて見える） */
	.p-whyus .c-photo-light__board {
		left: 0;
		translate: 0 -50%;
	}

	.p-whyus .c-heading__title {
		margin-top: 3.125rem; /* 50px */
	}

	.p-whyus__list {
		gap: 1.875rem; /* 30px */
		margin-top: 3.75rem; /* 60px */
	}

	/* 中身（見出し・本文）の入れ物は使わず、見出し・写真・本文をカードの中で並べ替える */
	.p-whyus__card {
		flex-direction: column;
		padding: 2.5rem; /* 40px */
	}

	.p-whyus__body {
		display: contents;
	}

	.p-whyus__title {
		order: 0;
		padding-left: 1.5rem; /* 24px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	/* 縦線は見出しの行数ぶんの長さ（2行なら2行分。行の上下の空き11pxずつを除く。2026-09-28 ユーザー指摘） */
	.p-whyus__title::before {
		top: 0.6875rem;    /* 11px */
		bottom: 0.6875rem; /* 11px */
		width: 0.5rem; /* 8px */
		height: auto;
		border-radius: 0.25rem;
	}

	.p-whyus__photo {
		order: 1;
		width: 100%;
		height: 25rem; /* 400px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-whyus__text {
		order: 2;
		margin-top: 1.875rem; /* 30px */
	}
}

/* ----------------------------------------------------------
   Pricing（料金プラン）
   準備費用（淡い青の地。上は白から）→ 運営開始後（淡いベージュの地。下は白へ）→ オプション（白）
   ---------------------------------------------------------- */

.p-pricing {
	padding-bottom: 12.5rem; /* 200px（上は、前の Our Work の下の余白に続ける） */
}

.p-pricing__tax {
	margin-top: 1.6875rem; /* 27px（Figmaの40px。見出しの行間の差の13pxを引く） */
	line-height: var(--lh-flat);
	text-align: center;
}

/* ---- 準備費用 ---- */

/* 上は60px（Figmaは100px。税別の注記とラベルのあいだが間延びして見えるので詰めた。2026-09-28 ユーザー指摘） */
.p-pricing__prep {
	padding-block: 3.75rem 6.25rem; /* 60px 100px */
	/* 上の500pxで、白から淡い青へ（Figma 585:285） */
	background: linear-gradient(var(--color-white), transparent 31.25rem), var(--color-bg-blue);
}

/* ラベル（h3。青・ベージュ・白に青の線の3種類） */
.p-pricing__label {
	display: flex;
	align-items: center;
	width: fit-content;
	height: 3.75rem; /* 60px */
	margin-inline: auto;
	padding-inline: 1.25rem; /* 20px */
	border-radius: var(--radius-md);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-emph); /* 30px */
	line-height: var(--lh-flat);
}

.p-pricing__label--beige {
	background-color: var(--color-price-head);
}

.p-pricing__label--outline {
	padding-inline: 1.1875rem; /* 19px（線1pxの内側。幅はほかのラベルと同じく文字＋40px） */
	border: 1px solid var(--color-blue);
	background-color: var(--color-white);
	color: var(--color-blue);
}

.p-pricing__lead {
	margin-top: 1.875rem; /* 30px */
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
	text-align: center;
}

/* 準備費用の3つのカード（380px、あいだ30px。高さはいちばん長いものにそろう） */
.p-pricing__plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem; /* 30px */
	margin-top: 1.875rem; /* 30px */
}

.p-pricing__plan {
	padding: 2.5rem 1.875rem 1.75rem; /* 40px 30px 28px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	text-align: center;
}

.p-pricing__plan-name {
	font-size: var(--fs-h3); /* 32px */
	line-height: var(--lh-flat);
}

.p-pricing__plan-desc {
	margin-top: 1.5625rem; /* 25px */
	color: var(--color-blue);
	font-size: var(--fs-h5); /* 22px */
	font-weight: 500;
	line-height: 1.6364; /* 36/22 */
}

/* 金額（26px。「円」は17px） */
.p-pricing__plan-price {
	height: 3.75rem; /* 60px */
	margin-top: 1.875rem; /* 30px */
	background-color: var(--color-bg-blue);
	font-size: 1.625rem; /* 26px */
	font-weight: 500;
	line-height: 3.75rem; /* 箱の高さと同じにして、上下の真ん中に置く */
}

.p-pricing__yen {
	font-size: var(--fs-body); /* 17px */
}

/* 含まれるもの（上に区切り線。行の高さ33px） */
.p-pricing__plan-items {
	--lh-body: 1.9412; /* 33/17（チェックの位置の計算にも使う） */
	margin-top: 1.875rem; /* 30px */
	padding: 1.3125rem 0 0 0.0625rem; /* 上21px（文字が線から30px） */
	border-top: 1px solid var(--color-owners-voice);
	line-height: var(--lh-body);
	text-align: left;
}

/* ---- 運営開始後の管理・運営料金 ---- */

.p-pricing__run {
	padding-block: 6.25rem; /* 100px */
	/* 下の500pxで、淡いベージュから白へ（Figma 585:286） */
	background: linear-gradient(transparent calc(100% - 31.25rem), var(--color-white)), var(--color-price-bg);
}

/* 白い箱（ミニマム管理プラン・月額＋成果報酬プラン・成果報酬プラン） */
.p-pricing__box {
	margin-top: 3.125rem; /* 50px */
	padding: 2.5rem 3.125rem 2.375rem; /* 40px 50px 38px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-pricing__lead + .p-pricing__box {
	margin-top: 1.875rem; /* 30px */
}

/* 見出しの行（見出し・補足・右に金額）。下に線 */
.p-pricing__box-head {
	display: flex;
	align-items: baseline;
	padding-bottom: 1.6875rem; /* 27px */
	border-bottom: 1px solid var(--color-price-line);
}

.p-pricing__box-title {
	font-size: var(--fs-h3); /* 32px */
	line-height: var(--lh-flat);
}

.p-pricing__box-sub {
	margin-left: 1.25rem; /* 20px */
	color: var(--color-price-head);
	font-size: var(--fs-h5); /* 22px */
}

/* 右の金額（「月額」「円〜」は17px、数字は26px） */
.p-pricing__box-price {
	margin-left: auto;
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-pricing__box-num {
	font-size: 1.625rem; /* 26px */
}

.p-pricing__box-text {
	margin-top: 1.1875rem; /* 19px（線から） */
	line-height: var(--lh-body);
}

.p-pricing__box-note {
	margin-top: 1.25rem; /* 20px */
	line-height: var(--lh-body);
}

/* ---- 月額＋成果報酬プランの比較表 ----
   4列（項目・5,000円・10,000円・70,000円）。罫線は1px。おすすめの列（is-recommend）は赤い枠と赤い文字、
   見出しの行は赤の地。行の高さは50px（2行の行は60px）。文字は太字の代わりに500（2026-09-26 決定 J-3） */

.p-pricing__table {
	width: 100%;
	margin-top: 1.875rem; /* 30px */
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	line-height: 1.4118; /* 24/17 */
	text-align: center;
}

.p-pricing__table th,
.p-pricing__table td {
	height: 3.0625rem; /* 49px（線を重ねて、行の間隔が49px。Figmaの50pxの箱を1px重ねて並べた形） */
	padding: 0.3125rem 0.9375rem; /* 5px 15px */
	border-right: 1px solid var(--color-price-line);
	border-bottom: 1px solid var(--color-price-line);
	font-weight: 400;
	vertical-align: middle;
}

.p-pricing__table tr > :first-child {
	border-left: 1px solid var(--color-price-line);
	text-align: left;
}

.p-pricing__table thead th {
	height: 3.125rem; /* 50px（上の線を含む） */
	border-top: 1px solid var(--color-price-line);
	background-color: var(--color-price-head);
	color: var(--color-white);
}

.p-pricing__table .is-recommend {
	position: relative;
	color: var(--color-recommend);
	font-weight: 500;
}

.p-pricing__table thead .is-recommend {
	background-color: var(--color-recommend);
	color: var(--color-white);
}

/* おすすめの列の赤い枠。となりのセルの線の上に重ねる */
.p-pricing__table .is-recommend::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--color-recommend);
	pointer-events: none;
}

/* スマホだけの、月額のタブとプランごとの一覧。PCでは出さず、上の表を出す */
.p-pricing__plan-tabs,
.p-pricing__plan-list {
	display: none;
}

/* 「おすすめ」の札（80×24。下に小さな三角）。表の上端から17px上に出す */
.p-pricing__badge {
	position: absolute;
	top: -1.125rem; /* 見出しのセルの上の線1pxを含めて、表の上端から17px上 */
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 5rem;    /* 80px */
	height: 1.5rem; /* 24px */
	border-radius: 0.1875rem; /* 3px */
	background-color: var(--color-yellow);
	color: var(--color-text);
	font-weight: 500;
	line-height: var(--lh-flat);
	white-space: nowrap;
	translate: -50% 0;
}

.p-pricing__badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 0.375rem);
	width: 0.75rem;  /* 12px */
	height: 0.375rem; /* 6px */
	background-color: var(--color-yellow);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---- オプション ---- */

.p-pricing__option-box {
	margin-top: 2.5rem; /* 40px */
	padding: 2.4375rem 3.0625rem 3.0625rem; /* 線1pxの内側に 39px 49px 49px */
	border: 1px solid var(--color-blue);
	border-radius: var(--radius-md);
}

.p-pricing__option-title {
	padding-left: 1.875rem; /* 30px（淡い青の箱の中の文字の頭にそろえる） */
	font-size: var(--fs-h3); /* 32px */
	line-height: var(--lh-flat);
}

.p-pricing__option-cols + .p-pricing__option-title {
	margin-top: 3.125rem; /* 50px */
}

/* 淡い青の箱。2列（右の列は、箱の左端から579pxの位置で始まる） */
.p-pricing__option-cols {
	display: grid;
	grid-template-columns: 34.3125rem 1fr; /* 549px */
	margin-top: 1.875rem; /* 30px */
	padding: 1.25rem 1.875rem 1.75rem; /* 20px 30px 28px */
	background-color: var(--color-bg-blue);
}

.p-pricing__option-list {
	line-height: var(--lh-body);
}

/* 「・」の後ろの2行目以降は、文字の頭にそろえる */
.p-pricing__option-list li {
	padding-left: 1em;
	text-indent: -1em;
}

.p-pricing__option-list li::before {
	content: "・";
}

.p-pricing__closing {
	margin-top: 3.125rem; /* 50px */
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429;      /* 46/28 */
	text-align: center;
}

.p-pricing__btn-wrap {
	margin-top: 3.125rem; /* 50px */
	text-align: center;
}

/* SP：スマホの作り替えルール（参考資料18）。料金は隠さない。
   準備費用の3カード・3つの箱・オプションは縦に並べる。見出しの横の金額（ミニマム管理プラン）は見出しの下。
   月額＋成果報酬プランの表は、月額のタブ（型R）で1プランずつ「項目｜内容」の一覧にする（最初はおすすめ）。
   タブの色はPCの表の見出しの行と同じ（おすすめは赤、ほかはベージュ）、選ばれていないものは灰色。
   JSが動かないときは、タブを出さずに3プランの一覧を並べる。
   （行ごとの塊＝型Q の案と見比べて、型R に決定。2026-09-28） */
@media (max-width: 1023px) {

	.p-pricing {
		padding-bottom: 8.75rem; /* 140px */
	}

	.p-pricing__tax {
		margin-top: 1.875rem; /* 30px */
		font-size: var(--fs-body); /* 34px */
		line-height: var(--lh-body);
	}

	/* 上は60px（税別の注記とラベルのあいだが間延びしないように。2026-09-28 ユーザー指摘）、下は140px */
	.p-pricing__prep,
	.p-pricing__run {
		padding-block: 3.75rem 8.75rem;
	}

	/* ラベル（46px・高さ80px）とリード（42px）。PCと同じく、ラベルをリードより少し大きくする（PCは30pxと28px。2026-09-28 ユーザー指摘） */
	.p-pricing__label {
		height: 5rem; /* 80px */
		padding-inline: 1.875rem; /* 30px */
		font-size: var(--fs-sub); /* 46px */
	}

	.p-pricing__label--outline {
		padding-inline: 1.8125rem; /* 線1pxの内側に29px */
	}

	.p-pricing__lead {
		margin-top: 1.875rem; /* 30px（PCと同じ） */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	/* ---- 準備費用の3カード（縦） ---- */
	.p-pricing__plans {
		grid-template-columns: 1fr;
		gap: 1.875rem; /* 30px */
		margin-top: 3.125rem; /* 50px */
	}

	.p-pricing__plan {
		padding: 2.5rem; /* 40px */
	}

	.p-pricing__plan-name {
		font-size: var(--fs-sub); /* 46px */
	}

	.p-pricing__plan-desc {
		margin-top: 1.875rem; /* 30px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	/* 金額（52px。「円」は28px） */
	.p-pricing__plan-price {
		height: 7.5rem; /* 120px */
		font-size: 3.25rem; /* 52px */
		line-height: 7.5rem;
	}

	.p-pricing__yen {
		font-size: var(--fs-small); /* 28px */
	}

	/* 項目の中の行間は詰め（50/34）、項目のあいだを20px空ける（Service の一覧と同じ） */
	.p-pricing__plan-items {
		--lh-body: 1.4706; /* 50/34 */
		padding-top: 1.875rem; /* 30px */
	}

	.p-pricing__plan-items li + li {
		margin-top: 1.25rem; /* 20px */
	}

	/* ---- 運営開始後の白い箱 ---- */
	.p-pricing__box {
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem; /* 40px */
	}

	.p-pricing__lead + .p-pricing__box {
		margin-top: 3.125rem; /* 50px（準備費用のカードと同じ） */
	}

	/* 見出し（46px）→ 補足（34px）→ 金額（見出しの下） */
	.p-pricing__box-head {
		display: block;
		padding-bottom: 1.875rem; /* 30px */
	}

	.p-pricing__box-title {
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-pricing__box-sub {
		display: block;
		margin: 0.625rem 0 0; /* 上10px */
		font-size: var(--fs-body); /* 34px */
		line-height: 1.4706;       /* 50/34 */
	}

	.p-pricing__box-price {
		margin-top: 1.875rem; /* 30px */
		font-size: var(--fs-small); /* 28px（「月額」「円〜」） */
	}

	.p-pricing__box-num {
		font-size: 3.25rem; /* 52px */
	}

	.p-pricing__box-text,
	.p-pricing__box-note {
		margin-top: 1.875rem; /* 30px */
	}

	/* ---- 月額＋成果報酬プラン：月額のタブ（型R） ---- */
	.p-pricing__table {
		display: none;
	}

	/* JSが動かないときは、3プランの一覧を並べる（プランの名前つき） */
	.p-pricing__plan-list {
		display: block;
		margin-top: 3.75rem; /* 60px */
	}

	.p-pricing__plan-list-name {
		margin-bottom: 1.25rem; /* 20px */
		font-size: var(--fs-lead-l); /* 38px */
		font-weight: 500;
		line-height: 1.4737;
	}

	.p-pricing__plan-list.is-recommend .p-pricing__plan-list-name {
		color: var(--color-recommend);
	}

	/* タブ（210×140が3つ、あいだ15px）。「おすすめ」の札はタブの上端に重ねる */
	.js .p-pricing__plan-tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.9375rem; /* 15px */
		margin-top: 5.125rem; /* 82px（60px＋札の半分の22px） */
	}

	.p-pricing__plan-tab {
		position: relative;
		display: grid;
		align-content: center;
		justify-items: center;
		gap: 0.5rem; /* 8px */
		height: 8.75rem; /* 140px */
		background-color: var(--color-line);
		color: var(--color-num-off);
		line-height: var(--lh-flat);
		transition: opacity var(--transition);
	}

	.p-pricing__plan-tab:hover {
		opacity: 0.7;
	}

	.p-pricing__plan-tab.is-active {
		background-color: var(--color-price-head);
		color: var(--color-white);
	}

	.p-pricing__plan-tab.is-recommend.is-active {
		background-color: var(--color-recommend);
	}

	.p-pricing__plan-tab.is-active:hover {
		opacity: 1;
	}

	/* 選ばれているタブの下の三角（50×25。タブと同じ色） */
	.p-pricing__plan-tab.is-active::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		background-color: inherit;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	/* 金額（EB Garamond 52px）と「円/月」（28px） */
	.p-pricing__plan-tab-num {
		font-family: var(--font-en);
		font-size: 3.25rem; /* 52px */
	}

	.p-pricing__plan-tab-unit {
		font-size: var(--fs-small); /* 28px */
	}

	/* タブの上端に重ねる「おすすめ」（28px）。下の小さな三角は出さない */
	.p-pricing__plan-tab .p-pricing__badge {
		top: 0;
		width: auto;
		height: 2.75rem; /* 44px */
		padding-inline: 0.9375rem; /* 15px */
		font-size: var(--fs-small); /* 28px */
		translate: -50% -50%;
	}

	.p-pricing__plan-tab .p-pricing__badge::after {
		display: none;
	}

	/* タブがあるときの一覧（三角の下から30px）。選ばれていないプランは隠し、名前はタブに任せる */
	.js .p-pricing__plan-list {
		margin-top: 3.4375rem; /* 55px */
	}

	.js .p-pricing__plan-list:not(.is-active) {
		display: none;
	}

	.js .p-pricing__plan-list-name {
		display: none;
	}

	.p-pricing__plan-list dl {
		border-top: 1px solid var(--color-price-line);
	}

	/* 「項目（左）｜内容（右）」の1行 */
	.p-pricing__plan-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1.25rem; /* 20px */
		min-height: 6.25rem; /* 100px */
		padding-block: 1.25rem; /* 20px */
		border-bottom: 1px solid var(--color-price-line);
		line-height: 1.4706; /* 50/34 */
	}

	.p-pricing__plan-row dd {
		flex-shrink: 0;
		text-align: right;
	}

	/* おすすめのプランの内容は、PCの表と同じく赤 */
	.p-pricing__plan-list.is-recommend dd {
		color: var(--color-recommend);
		font-weight: 500;
	}

	/* ---- オプション ---- */
	.p-pricing__option-box {
		margin-top: 3.125rem; /* 50px（準備費用のカードと同じ） */
		padding: 2.4375rem; /* 線1pxの内側に39px（あわせて40px） */
	}

	.p-pricing__option-title {
		padding-left: 0;
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-pricing__option-cols + .p-pricing__option-title {
		margin-top: 3.125rem; /* 50px */
	}

	/* 2列は1列に（左の列 → 右の列の順） */
	.p-pricing__option-cols {
		grid-template-columns: 1fr;
		margin-top: 1.875rem; /* 30px */
		padding: 1.875rem; /* 30px */
	}

	/* 項目の中の行間は詰め（50/34）、項目のあいだを20px空ける（左の列の最後と右の列の最初のあいだも同じ） */
	.p-pricing__option-list {
		line-height: 1.4706; /* 50/34 */
	}

	.p-pricing__option-list li + li,
	.p-pricing__option-list + .p-pricing__option-list {
		margin-top: 1.25rem; /* 20px */
	}

	/* 締めの文は46pxで4行になるので左揃え（中央は3行まで） */
	.p-pricing__closing {
		margin-top: 3.75rem; /* 60px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
		text-align: left;
	}

	.p-pricing__btn-wrap {
		margin-top: 3.75rem; /* 60px */
	}
}

/* ----------------------------------------------------------
   Flow（ご相談から運営開始までの流れ）
   淡い青の地。右上と左下に飾りの写真。白いカード6つを縦に並べ、あいだに下向きの山形
   ---------------------------------------------------------- */

.p-flow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-blue);
}

.p-flow__bg {
	position: absolute;
	z-index: -1;
}

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

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

/* 右上（736×600）。左と下へ地に溶け込ませる（Figma 299:1258・299:1259） */
.p-flow__bg--top {
	top: 0;
	right: 0;
	width: 46rem;    /* 736px */
	height: 37.5rem; /* 600px */
}

.p-flow__bg--top::after {
	background:
		linear-gradient(90deg, var(--color-bg-blue), transparent),
		linear-gradient(180deg, transparent, var(--color-bg-blue));
}

/* 左下（700×740）。右と上へ地に溶け込ませる。
   Figma のデータ（299:1261・299:1262）の向きではなく、Figma が描いた見た目（上と右が淡く、左下が濃い）に合わせた */
.p-flow__bg--bottom {
	bottom: 0;
	left: 0;
	width: 43.75rem;  /* 700px */
	height: 46.25rem; /* 740px */
}

.p-flow__bg--bottom::after {
	background:
		linear-gradient(90deg, transparent, var(--color-bg-blue)),
		linear-gradient(180deg, var(--color-bg-blue), transparent);
}

.p-flow__list {
	margin-top: 3.5625rem; /* 57px（Figmaの70px。見出しの行間の差の13pxを引く） */
}

/* 白いカード */
.p-flow__step {
	position: relative;
	padding: 2.5rem 1.25rem 2.8125rem; /* 40px 20px 45px */
	background-color: var(--color-white);
	text-align: center;
}

/* カードのあいだは80px。真ん中に下向きの山形（40px） */
.p-flow__step + .p-flow__step {
	margin-top: 5rem; /* 80px */
}

.p-flow__step + .p-flow__step::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 1.25rem); /* 前のカードから20px下 */
	left: calc(50% - 1.09375rem);
	width: 2.1875rem;  /* 35px */
	height: 2.5rem;    /* 40px */
	background-color: var(--color-blue);
	-webkit-mask: url("assets/icons/chevron-down-light.svg") center / contain no-repeat;
	mask: url("assets/icons/chevron-down-light.svg") center / contain no-repeat;
}

/* 「Step 01」の帯（EB Garamond 30px） */
.p-flow__num {
	display: flex;
	align-items: center;
	width: fit-content;
	height: 2.625rem; /* 42px */
	margin-inline: auto;
	padding-inline: 0.9375rem; /* 15px */
	border-radius: var(--radius-sm);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-emph); /* 30px */
	line-height: var(--lh-flat);
}

.p-flow__title {
	margin-top: 0.9375rem; /* 15px */
	color: var(--color-blue);
	font-size: 1.625rem; /* 26px */
	font-weight: 400;
	line-height: 1.6923; /* 44/26 */
}

.p-flow__text {
	margin-top: 0.625rem; /* 10px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：スマホの作り替えルール（参考資料18）の流れ（型N）。白いカードを縦に並べ、あいだに「∨」（幅50px・上下20px）。
   カードの中は「Step の帯（38px）→ 題（42px・真ん中）→ 説明（34px）」。説明は3行を超えるものがあるので、どれも左揃え。
   飾りの写真は右上の1枚だけ小さく残し、左下の1枚はカードの後ろに隠れるので出さない */
@media (max-width: 1023px) {

	.p-flow {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-flow__bg--top {
		width: 28.75rem;    /* 460px */
		height: 23.4375rem; /* 375px */
	}

	.p-flow__bg--bottom {
		display: none;
	}

	.p-flow__list {
		margin-top: 3.75rem; /* 60px */
	}

	.p-flow__step {
		padding: 2.5rem; /* 40px */
	}

	.p-flow__step + .p-flow__step {
		margin-top: 5.625rem; /* 90px（上下20px＋「∨」50px） */
	}

	.p-flow__step + .p-flow__step::before {
		bottom: calc(100% + 1.25rem); /* 20px */
		left: calc(50% - 1.5625rem);
		width: 3.125rem;  /* 50px */
		height: 3.125rem;
	}

	.p-flow__num {
		height: 3.5rem; /* 56px */
		padding-inline: 1.25rem; /* 20px */
		font-size: var(--fs-lead-l); /* 38px */
	}

	.p-flow__title {
		margin-top: 1.875rem; /* 30px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-flow__text {
		margin-top: 1.875rem; /* 30px */
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ----------------------------------------------------------
   Area（対応エリア）
   ---------------------------------------------------------- */

.p-area {
	padding-block: 12.5rem; /* 200px */
}

.p-area__map {
	display: block;
	width: 24.375rem; /* 390px */
	height: auto;
	margin: 2.5rem auto 0; /* 上40px */
}

.p-area__text {
	margin-top: 2.5rem; /* 40px */
	line-height: var(--lh-normal); /* 34/17 */
	text-align: center;
}

/* SP：スマホの作り替えルール（参考資料18）。地図は幅600pxで真ん中。
   本文は1文ずつの段落にして左揃え、あいだを50px空ける（TOPの Our Promise の本文と同じ。2026-09-28 ユーザー指示） */
@media (max-width: 1023px) {

	.p-area__para {
		display: block;
	}

	/* 段落のあいだにPCの改行（<br>）があるので、「+」ではなく「~」でつなぐ */
	.p-area__para ~ .p-area__para {
		margin-top: 3.125rem; /* 50px */
	}

	.p-area {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-area__map {
		width: 37.5rem; /* 600px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-area__text {
		margin-top: 3.125rem; /* 50px */
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ----------------------------------------------------------
   FAQ（よくあるご質問）。開閉の部品は共通パーツの .c-faq
   淡い青の地。左上に飾りの写真を置き、右と下へ地に溶け込ませる
   ---------------------------------------------------------- */

.p-faq {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	background-color: var(--color-bg-blue);
}

.p-faq__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 56.25rem; /* 900px */
	height: 37.5rem; /* 600px */
}

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

/* 右と下へ、欄の淡い青に溶け込ませる（Figma 299:1334・299:1335） */
.p-faq__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-bg-blue)),
		linear-gradient(90deg, transparent, var(--color-bg-blue));
}

.p-faq .c-faq {
	margin-top: 3.9375rem; /* 63px（Figmaの76px。見出しの行間の差の13pxを引く） */
}

/* SP：スマホの作り替えルール（参考資料18）。開閉の形（.c-faq）のSPは共通パーツにある。飾りの写真は左上に幅400pxで小さく置く */
@media (max-width: 1023px) {

	.p-faq {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-faq__bg {
		width: 25rem;       /* 400px */
		height: 16.6875rem; /* 267px */
	}

	.p-faq .c-faq {
		margin-top: 3.75rem; /* 60px */
	}
}

/* ==========================================================
   9. 清掃代行（page-minpaku-cleaning.php）
   Figma「永遠都コンフォルト」清掃代行（node 384:9）。上から
   FV（template-parts/page-hero.php）→ For Owners → Why Choose Us → Service → Flow → Pricing →
   Area（「8. 運営代行」の .p-area に、囲み2つとボタンを足す）→ Our Work（template-parts/our-work.php）→
   FAQ（「8. 運営代行」の .p-faq と同じ形で、色だけ変える）→（Contact）。
   ページの色はピンク（英字・ボタン・線＝--color-pink、見出し・番号・チェック＝--color-pink-deep、淡い地＝--color-bg-pink）。
   Figmaとの違い（こちらでそろえたもの）：
   ・Why Choose Us のカードの下の余白は46px（Figmaは46・40・46px）
   ・料金のオプションの枠の下の余白は30px（Figmaは30・30・18px）
   ・Flow の左下の写真のフェードの向きは、Figmaが描いた見た目（上と右が淡い）に合わせた（運営代行の Flow と同じ）
   ========================================================== */

/* ----------------------------------------------------------
   For Owners（清掃のお悩み）
   淡い紫の地。左上に飾りの写真（左右反転した画像）を置き、右と下へ地に溶け込ませる
   ---------------------------------------------------------- */

.p-cleaning-owners {
	position: relative;
	isolation: isolate; /* 飾りの写真を、この欄の地の上・中身の下に置く */
	overflow: hidden;   /* 狭い画面で、飾りの写真を欄の外に出さない */
	padding-block: 11.875rem 12.5rem; /* 190px 200px */
	background-color: var(--color-cleaning-owners);
	/* FVの「Scroll」で来たとき、この欄の上端を画面の上端にそろえる（運営代行の For Owners と同じ） */
	scroll-margin-top: calc((var(--header-height-stuck) + 1rem) * -1);
}

.p-cleaning-owners__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 62.5rem;     /* 1000px */
	height: 41.6875rem; /* 667px */
}

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

/* 右と下へ、欄の地に溶け込ませる（Figma の Rectangle 389・390） */
.p-cleaning-owners__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-cleaning-owners)),
		linear-gradient(90deg, transparent, var(--color-cleaning-owners));
}

/* 大見出しは2行（行間72px）。英字から40px（Figmaのとおり） */
.p-cleaning-owners .c-heading__title {
	margin-top: 2.5rem; /* 40px */
}

/* 吹き出し3つ（380×100）。しっぽの形と向きは、運営代行の For Owners と同じ */
.p-cleaning-owners__voices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.875rem;       /* 30px */
	margin-top: 3.75rem; /* 60px */
}

.p-cleaning-owners__voice {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 6.25rem; /* 100px */
	padding: 1.0625rem 1rem 1.1875rem; /* 17px 16px 19px（Figmaの文字の位置） */
	border-radius: var(--radius-md);
	background-color: var(--color-cleaning-voice);
	color: var(--color-white);
	font-size: var(--fs-body);
	line-height: 1.8824; /* 32/17 */
	text-align: center;
}

/* しっぽ（高さ20px）。左の吹き出しは右寄りで右へ、真ん中は下へ、右の吹き出しは左寄りで左へ傾ける */
.p-cleaning-owners__voice::after {
	content: "";
	position: absolute;
	top: 100%;
	height: 1.25rem; /* 20px */
	background-color: var(--color-cleaning-voice);
}

.p-cleaning-owners__voice:nth-child(1)::after {
	left: 19.375rem; /* 310px */
	width: 3.125rem; /* 50px */
	clip-path: polygon(0 0, 80% 0, 100% 100%);
}

.p-cleaning-owners__voice:nth-child(2)::after {
	left: calc(50% - 1.25rem);
	width: 2.5rem; /* 40px */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.p-cleaning-owners__voice:nth-child(3)::after {
	left: 1.25rem;   /* 20px */
	width: 3.125rem; /* 50px */
	clip-path: polygon(20% 0, 100% 0, 0 100%);
}

/* 小見出し（32px・行間52px・3行）。吹き出しの下端から40px（しっぽの20pxの下に20px） */
.p-cleaning-owners__title {
	margin-top: 2.5rem; /* 40px */
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.625; /* 52/32 */
	text-align: center;
}

.p-cleaning-owners__text {
	margin-top: 1.875rem; /* 30px */
	line-height: var(--lh-body); /* 38/17 */
	text-align: center;
}

/* SP：スマホの作り替えルール（参考資料18）。飾りの写真は左上に幅400px（運営代行の For Owners と同じ）。
   大見出しは2行で真ん中。2行目（14文字）が幅に入るよう、この見出しだけ52px（1行目は「、」で終わるので、その行だけ右へ寄せる。.u-sp-shift）。
   吹き出しは、しっぽの無い箱を縦に並べる（型E）。
   小見出しは43px・4行で真ん中（ユーザーが決めた改行。いちばん長い2行目の17文字が幅に入る大きさ。
   大見出し52px＞小見出し43px＞吹き出し38px の大小関係になる）。マーカーは、PCと同じ語句（3行目の途中から4行目）に引く。
   本文は自然に折り返して左揃え（2026-09-28〜29 ユーザー指摘で、大見出し2行・小見出しの形を変えた） */
@media (max-width: 1023px) {

	.p-cleaning-owners {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-cleaning-owners__bg {
		width: 25rem;       /* 400px */
		height: 16.6875rem; /* 267px */
	}

	.p-cleaning-owners .c-heading__title {
		margin-top: 3.125rem; /* 50px */
		font-size: 3.25rem;   /* 52px */
		line-height: 1.4231;  /* 74/52 */
	}

	.p-cleaning-owners__voices {
		grid-template-columns: 1fr;
		gap: 1.25rem;        /* 20px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-cleaning-owners__voice {
		min-height: 10rem; /* 160px */
		padding: 1rem;
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-cleaning-owners__voice::after {
		display: none;
	}

	.p-cleaning-owners__title {
		margin-top: 3.125rem; /* 50px */
		font-size: 2.6875rem; /* 43px */
		line-height: 1.4884;  /* 64/43 */
	}

	.p-cleaning-owners__text {
		margin-top: 3.125rem; /* 50px */
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ----------------------------------------------------------
   Why Choose Us（選ばれる3つの理由）
   ピンクの地に白いカード3枚。カードの右に写真（幅480px）を置いて左と下へ白く溶け込ませ、本文がその上にかかる
   ---------------------------------------------------------- */

.p-cleaning-reasons {
	padding-block: 12.6875rem 12.5rem; /* 203px 200px */
	background-color: var(--color-pink);
}

/* 大見出しは2行（行間72px）。英字から50px */
.p-cleaning-reasons .c-heading__title {
	margin-top: 3.125rem; /* 50px */
}

/* タブ（スマホだけ）。PCでは出さず、理由を3つとも並べる */
.p-cleaning-reasons__tabs {
	display: none;
}

.p-cleaning-reasons__list {
	display: grid;
	gap: 3.125rem;       /* 50px */
	margin-top: 4.375rem; /* 70px */
}

.p-cleaning-reasons__card {
	position: relative;
	isolation: isolate; /* 写真を、カードの地の上・文字の下に置く */
	overflow: hidden;   /* 写真の角を、カードの角丸に合わせる */
	padding: 2.5rem 2.5rem 2.875rem 3.125rem; /* 上40px 右40px 下46px 左50px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-cleaning-reasons__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 30rem; /* 480px */
}

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

/* 左と下へ、白く溶け込ませる */
.p-cleaning-reasons__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-white)),
		linear-gradient(270deg, transparent, var(--color-white));
}

/* 番号（80px角）と見出し（2行）を横に並べ、上下の真ん中をそろえる */
.p-cleaning-reasons__head {
	display: flex;
	align-items: center;
	gap: 1.875rem; /* 30px */
}

.p-cleaning-reasons__num {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 5rem;  /* 80px */
	height: 5rem;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
	color: var(--color-pink-deep);
	font-family: var(--font-en);
	font-size: var(--fs-en-label); /* 60px */
	line-height: var(--lh-flat);
}

.p-cleaning-reasons__title {
	color: var(--color-pink-deep);
	font-size: var(--fs-h3); /* 32px */
	font-weight: 500;
	line-height: 1.5; /* 48/32 */
}

/* 本文は番号の左端から（番号の下端から30px） */
.p-cleaning-reasons__text {
	margin-top: 1.5rem; /* 24px */
	line-height: var(--lh-normal); /* 34/17 */
}

.p-cleaning-reasons__note {
	line-height: var(--lh-normal);
}

/* SP：スマホの作り替えルール（参考資料18）。理由は「01／02／03」の番号のタブ（型B。枠の外なので240×140・あいだ10）で
   1つずつ切り替える（main.js の 3.。TOPの Reason と同じ作り）。
   選ばれているタブは、PCの番号の飾りと同じ淡いピンクの地に濃いピンクの番号（欄の地がピンクなので。2026-09-28 ユーザーに確かめる）。
   カードは「見出し → 写真 660×400 → 本文」。番号の飾りは、タブが番号を兼ねるので出さない。写真の白いフェードも出さない */
@media (max-width: 1023px) {

	.p-cleaning-reasons {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	/* 大見出し：白の1行は58px、黄色の2行は46px（運営代行の For Owners と同じ） */
	.p-cleaning-reasons .c-heading__title {
		margin-top: 3.125rem; /* 50px */
	}

	.p-cleaning-reasons .c-heading__yellow {
		display: block;
		margin-top: 1.875rem;     /* 30px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	/* タブはJSが動くときだけ出す（JSが止まると切り替えられない。そのときはカードを3つとも見せる） */
	.js .p-cleaning-reasons__tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.625rem;       /* 10px */
		margin-top: 3.75rem; /* 60px */
	}

	/* 番号の箱（240×140）。選ばれているものは淡いピンクの地に濃いピンクの番号、ほかは灰色（TOPの Reason と同じ灰色） */
	.p-cleaning-reasons__tab {
		position: relative;
		display: grid;
		place-items: center;
		height: 8.75rem; /* 140px */
		padding-bottom: 0.5rem; /* 番号を少し上へ（TOPの Reason と同じ） */
		background-color: var(--color-line);
		color: var(--color-num-off);
		font-family: var(--font-en);
		font-size: 6.25rem; /* 100px */
		line-height: 0.8;   /* 80/100 */
		transition: opacity var(--transition);
	}

	.p-cleaning-reasons__tab:hover {
		opacity: 0.7;
	}

	.p-cleaning-reasons__tab.is-active {
		background-color: var(--color-bg-pink);
		color: var(--color-pink-deep);
	}

	.p-cleaning-reasons__tab.is-active:hover {
		opacity: 1;
	}

	/* 選ばれている箱の下の三角（50×25） */
	.p-cleaning-reasons__tab.is-active::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		background-color: var(--color-bg-pink);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	/* カードのあいだは30px（JSが止まっていて、3つとも並ぶとき） */
	.p-cleaning-reasons__list {
		gap: 1.875rem;       /* 30px */
		margin-top: 3.75rem; /* 60px */
	}

	/* タブがあるときは、三角の下から10px */
	.js .p-cleaning-reasons__tabs + .p-cleaning-reasons__list {
		margin-top: 2.1875rem; /* 35px（三角の25pxを含む） */
	}

	/* 選ばれていない理由は隠す。JSが動かないときは3つとも見せる */
	.js .p-cleaning-reasons__card:not(.is-active) {
		display: none;
	}

	/* 切り替えたときに、ふわっと出す */
	.js .p-cleaning-reasons__card.is-active {
		animation: fv-fade-in 0.6s ease;
	}

	.p-cleaning-reasons__card {
		padding: 2.5rem; /* 40px */
	}

	.p-cleaning-reasons__head {
		display: block;
	}

	.p-cleaning-reasons__num {
		display: none;
	}

	/* 見出しは2行で、2行にぎりぎり収まる大きさ（2026-09-28 ユーザー指示「ギリギリ2行で収まるように大きく」）。
	   01・03 の長い行（18文字）が入るよう、右だけカードの余白の中（40px）まで使い、38px（3つともそろえる） */
	.p-cleaning-reasons__title {
		margin-right: -2.5rem;       /* 40px */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	/* 写真は見出しの下に、中身の幅いっぱい（660×400） */
	.p-cleaning-reasons__photo {
		position: static;
		z-index: auto;
		width: 100%;
		height: 25rem; /* 400px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-cleaning-reasons__photo::after {
		content: none;
	}

	/* 本文は段落に分ける（.u-sp-para。段落のあいだ50px。TOPの Our Promise と同じ）。注記も1つの段落として50px空ける */
	.p-cleaning-reasons__text {
		margin-top: 1.875rem; /* 30px */
		line-height: var(--lh-body);
	}

	.p-cleaning-reasons__note {
		margin-top: 3.125rem; /* 50px */
		line-height: var(--lh-body);
	}
}

/* ----------------------------------------------------------
   Service（基本料金に含まれる作業内容）
   淡いピンクの地に、横長の白いカード3枚（写真300×190＋見出し＋点線＋チェック2列）。写真は1つ目と3つ目が左、2つ目が右
   ---------------------------------------------------------- */

.p-cleaning-service {
	padding-block: 13.375rem 12.5rem; /* 214px 200px */
	background-color: var(--color-bg-pink);
}

.p-cleaning-service__list {
	display: grid;
	gap: 2.5rem; /* 40px */
	margin-top: 3.5625rem; /* 57px（Figmaの70px。見出しの行間の差の13pxを引く） */
}

/* 見出し・点線・チェックの左右は、写真の側が300px（写真の幅。写真が白く溶けた所から文字が始まる。Figmaのとおり）、反対側は50px */
.p-cleaning-service__card {
	position: relative;
	min-height: 11.875rem; /* 190px */
	padding: 1.0625rem 3.125rem 2.3125rem 18.75rem; /* 上17px 右50px 下37px 左300px */
	overflow: hidden; /* 写真の角を、カードの角丸に合わせる */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-cleaning-service__card--reverse {
	padding-inline: 3.125rem 18.75rem; /* 左50px 右300px */
}

/* 写真（300×190）。カードの左（2つ目は右）に重ね、本文のほうへ白く溶け込ませる。
   HTMLでは見出しの下にある（スマホでは見出しの下に出す） */
.p-cleaning-service__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18.75rem; /* 300px */
}

.p-cleaning-service__card--reverse .p-cleaning-service__photo {
	right: 0;
	left: auto;
}

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

.p-cleaning-service__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--color-white));
}

.p-cleaning-service__card--reverse .p-cleaning-service__photo::after {
	background: linear-gradient(270deg, transparent, var(--color-white));
}

/* 見出し（32px・行間46px）。下に点線（見出しから10px） */
.p-cleaning-service__title {
	padding-bottom: 0.625rem; /* 10px */
	background: repeating-linear-gradient(90deg, var(--color-pink) 0 2px, transparent 2px 4px) left bottom / 100% 1px no-repeat;
	color: var(--color-pink-deep);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.4375; /* 46/32 */
}

/* チェック（2列。左の列を上から、次に右の列を上から）。文字17px・行間17px、行のあいだ21px、列のあいだ50px */
.p-cleaning-service__items {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	justify-content: start;
	column-gap: 3.125rem; /* 50px */
	row-gap: 1.3125rem;   /* 21px */
	margin-top: 1.5rem;   /* 24px（点線から25px） */
	line-height: var(--lh-flat);
}

.p-cleaning-service__items li {
	display: flex;
	gap: 0.4375rem; /* 7px */
}

.p-cleaning-service__items .c-icon {
	flex-shrink: 0;
	color: var(--color-pink-deep);
}

.p-cleaning-service__note {
	margin-top: 1.875rem; /* 30px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：スマホの作り替えルール（参考資料18）。一覧は隠さない（手順1）。白いカード（中40px）を縦に3つ、あいだ30px。
   カードの中は「見出し（42px）＋点線 → 写真 660×400 → チェック」。チェックは1列（左の列 → 右の列の順）で、
   項目の中の行間50/34、項目のあいだ20px（5.の12） */
@media (max-width: 1023px) {

	.p-cleaning-service {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-cleaning-service__list {
		gap: 1.875rem;       /* 30px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-cleaning-service__card,
	.p-cleaning-service__card--reverse {
		min-height: 0;
		padding: 2.5rem; /* 40px */
	}

	/* 見出しは1行（2026-09-28 ユーザー指示）。いちばん長い「ゴミの片付け・忘れ物・設備の確認」（16文字）が
	   中身の幅（660px）に入るよう、42pxから少しだけ小さい41px（3つともそろえる） */
	.p-cleaning-service__title {
		padding-bottom: 1.25rem; /* 20px（点線まで） */
		font-size: 2.5625rem;    /* 41px */
		line-height: 1.561;      /* 64/41 */
	}

	.p-cleaning-service__photo,
	.p-cleaning-service__card--reverse .p-cleaning-service__photo {
		position: static;
		width: 100%;
		height: 25rem; /* 400px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-cleaning-service__photo::after {
		content: none;
	}

	.p-cleaning-service__items {
		display: block;
		margin-top: 1.875rem; /* 30px */
		line-height: 1.4706;  /* 50/34 */
	}

	.p-cleaning-service__items li {
		gap: 0.625rem; /* 10px */
	}

	.p-cleaning-service__items li + li {
		margin-top: 1.25rem; /* 20px */
	}

	/* チェックの印は、1行目の文字の高さの真ん中（行間50pxの中の34px） */
	.p-cleaning-service__items .c-icon {
		margin-top: 0.2353em; /* 8px */
	}

	.p-cleaning-service__note {
		margin-top: 3.125rem; /* 50px */
		line-height: var(--lh-body);
	}
}

/* ----------------------------------------------------------
   Flow（清掃当日の4つの工程）
   白の地。右上と左下に飾りの写真（白く溶け込ませる）。Step のカード4枚を横に並べ、あいだに「＞」
   ---------------------------------------------------------- */

.p-cleaning-flow {
	position: relative;
	isolation: isolate; /* 飾りの写真を、この欄の地の上・中身の下に置く */
	overflow: hidden;
	padding-block: 12.5rem; /* 200px */
}

.p-cleaning-flow__photo {
	position: absolute;
	z-index: -1;
	width: 46.25rem; /* 740px */
	height: 37.5rem; /* 600px */
}

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

.p-cleaning-flow__photo::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 右上：左と下へ白く溶け込ませる */
.p-cleaning-flow__photo--top {
	top: 0;
	right: 0;
}

.p-cleaning-flow__photo--top::after {
	background:
		linear-gradient(180deg, transparent, var(--color-white)),
		linear-gradient(270deg, transparent, var(--color-white));
}

/* 左下：上と右へ白く溶け込ませる */
.p-cleaning-flow__photo--bottom {
	bottom: 0;
	left: 0;
}

.p-cleaning-flow__photo--bottom::after {
	background:
		linear-gradient(0deg, transparent, var(--color-white)),
		linear-gradient(90deg, transparent, var(--color-white));
}

/* Step のカード（270×350・ピンクの枠）を横に4枚、あいだ40px */
.p-cleaning-flow__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;         /* 40px */
	margin-top: 3.125rem; /* 50px */
}

.p-cleaning-flow__card {
	position: relative;
	padding: 0 0.875rem 1.375rem; /* 枠の1pxと合わせて、左右15px・下23px */
	border: 1px solid var(--color-pink);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

/* カードのあいだの「＞」（20×90）。あいだ40pxの真ん中・カードの高さの真ん中 */
.p-cleaning-flow__card + .p-cleaning-flow__card::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -1.9375rem; /* 枠の外へ31px（枠の1pxと合わせて、左のカードから10px） */
	width: 1.25rem;   /* 20px */
	height: 5.625rem; /* 90px */
	background-color: var(--color-pink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	translate: 0 -50%;
}

/* 「Step 01」の帯（高さ42px）。枠の上に重ねて、カードの幅いっぱいにする */
.p-cleaning-flow__num {
	margin: -1px -0.9375rem 0; /* 枠の1px＋左右の余白 */
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-emph); /* 30px */
	line-height: 1.4; /* 42/30 */
	text-align: center;
}

/* 題（26px・行間40px・2行・真ん中）。下に点線（題から15px） */
.p-cleaning-flow__title {
	margin-top: 0.625rem;      /* 10px */
	padding-bottom: 0.9375rem; /* 15px */
	background: repeating-linear-gradient(90deg, var(--color-pink) 0 2px, transparent 2px 4px) left bottom / 100% 1px no-repeat;
	color: var(--color-pink-deep);
	font-size: 1.625rem; /* 26px（Figmaのまま。文字の段に無い大きさ） */
	font-weight: 500;
	line-height: 1.5385; /* 40/26 */
	text-align: center;
}

.p-cleaning-flow__text {
	margin-top: 0.625rem; /* 10px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：スマホの作り替えルール（参考資料18）。流れは隠さない（手順1）。カードを縦に並べ（型N）、
   あいだはPCの「＞」を下向きにした三角（50×25。タブの三角と同じ大きさ）を上下20pxで置く。
   カードの中は「Step の帯（38px・高さ56px）→ 題（42px・1行・真ん中）＋点線 → 説明（左揃え）」。
   飾りの写真は、右上を小さく（460×373）残し、左下は出さない（運営代行の Flow と同じ） */
@media (max-width: 1023px) {

	.p-cleaning-flow {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-cleaning-flow__photo--top {
		width: 28.75rem;    /* 460px */
		height: 23.3125rem; /* 373px */
	}

	.p-cleaning-flow__photo--bottom {
		display: none;
	}

	.p-cleaning-flow__list {
		grid-template-columns: 1fr;
		gap: 4.0625rem;      /* 65px（三角の25px＋上下20px） */
		margin-top: 3.75rem; /* 60px */
	}

	.p-cleaning-flow__card {
		padding: 0 2.4375rem 2.4375rem; /* 枠の1pxと合わせて、左右40px・下40px */
	}

	/* カードのあいだの三角は下向き。前のカードから20px下、次のカードの20px上 */
	.p-cleaning-flow__card + .p-cleaning-flow__card::before {
		top: auto;
		bottom: calc(100% + 1.25rem + 1px); /* 20px（枠の1pxの外から） */
		left: calc(50% - 1.5625rem);
		width: 3.125rem;   /* 50px */
		height: 1.5625rem; /* 25px */
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		translate: none;
	}

	/* 「Step 01」は46px・帯の高さ64px（型Hの38pxより大きく。2026-09-28 ユーザー指示「もう少し大きく」） */
	.p-cleaning-flow__num {
		margin-inline: -2.5rem; /* 枠の1px＋左右の余白 */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.3913;      /* 64/46 */
	}

	.p-cleaning-flow__title {
		margin-top: 1.875rem;     /* 30px */
		padding-bottom: 1.25rem;  /* 20px（点線まで） */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-cleaning-flow__text {
		margin-top: 1.25rem; /* 20px（点線から） */
		line-height: var(--lh-body);
	}
}

/* ----------------------------------------------------------
   Pricing（料金）
   淡いピンクの地に白い箱3つ（一棟貸しの料金／「数千円〜」と比べるとき／オプション）
   ---------------------------------------------------------- */

.p-cleaning-price {
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-pink);
}

.p-cleaning-price__box {
	margin-top: 2.5rem; /* 40px */
	padding: 3.125rem;  /* 50px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

/* 最初の箱は、見出しから47px（Figmaの60px。見出しの行間の差の13pxを引く） */
.c-heading + .p-cleaning-price__box {
	margin-top: 2.9375rem; /* 47px */
}

/* 「数千円〜」の箱の下は40px（Figmaのとおり） */
.p-cleaning-price__box--compare {
	padding-bottom: 2.5rem; /* 40px */
}

/* 名前 — 点線 — 料金（右寄せ）の行。行の高さは料金の行間の38px。
   名前（24px）の上端が箱の上端から50pxになるよう、行を7px上げる */
.p-cleaning-price__head {
	display: flex;
	align-items: center;
	margin-top: -0.4375rem; /* -7px */
}

.p-cleaning-price__name {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1.25rem; /* 20px（名前から点線まで） */
	color: var(--color-pink-deep);
	font-size: var(--fs-h4); /* 24px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* 名前から料金までの点線 */
.p-cleaning-price__name::after {
	content: "";
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--color-pink) 0 2px, transparent 2px 4px);
}

.p-cleaning-price__fee {
	flex-shrink: 0;
	margin-left: 1.25rem; /* 20px（点線から料金まで） */
	line-height: var(--lh-body); /* 38/17 */
}

/* 料金の数字だけ24px。行間を詰めないと、行の高さ（38px）が数字の大きさに合わせて広がる */
.p-cleaning-price__num {
	font-size: var(--fs-h4);
	line-height: var(--lh-flat);
}

/* 料金の目安の説明（淡いピンクの箱）。右に写真を置いて左へ地の色に溶け込ませ、本文がその上にかかる */
.p-cleaning-price__detail {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: 2.1875rem; /* 35px（料金の行から） */
	padding: 1.9375rem 2.5rem 2.5rem; /* 上31px 左右40px 下40px */
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-pink);
}

.p-cleaning-price__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 28.125rem; /* 450px */
}

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

.p-cleaning-price__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, transparent, var(--color-bg-pink));
}

.p-cleaning-price__text {
	line-height: var(--lh-normal); /* 34/17 */
}

/* 「数千円〜」と比べるとき */
.p-cleaning-price__subtitle {
	color: var(--color-pink-deep);
	font-size: var(--fs-h4); /* 24px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-cleaning-price__compare {
	margin-top: 1.5625rem; /* 25px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* 「オプション」の帯（淡いピンク・高さ50px） */
.p-cleaning-price__band {
	display: grid;
	place-items: center;
	height: 3.125rem; /* 50px */
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-pink);
	color: var(--color-pink-deep);
	font-size: var(--fs-sub); /* 28px */
	font-weight: 500;
	line-height: var(--lh-flat);
}

/* 分類の見出し（24px・真ん中）。前の枠から40px、帯のすぐ下は30px */
.p-cleaning-price__group {
	margin-top: 2.5rem; /* 40px */
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-flat);
	text-align: center;
}

.p-cleaning-price__band + .p-cleaning-price__group {
	margin-top: 1.875rem; /* 30px */
}

/* オプションの一覧（ピンクの枠の中に2列。左の列を上から、次に右の列を上から）。
   右の列の頭は、枠の左端から579px（Figmaのとおり） */
.p-cleaning-price__options {
	columns: 2;
	column-gap: 3.625rem; /* 58px */
	margin-top: 1.875rem; /* 30px */
	padding: 1.1875rem 1.8125rem 1.8125rem; /* 枠の1pxと合わせて、上20px 左右30px 下30px */
	border: 1px solid var(--color-pink);
	border-radius: var(--radius-sm);
	line-height: var(--lh-body); /* 38/17 */
}

.p-cleaning-price__options li {
	break-inside: avoid;
}

.p-cleaning-price__options li::before {
	content: "・";
}

.p-cleaning-price__note {
	margin-top: 1.875rem; /* 30px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：スマホの作り替えルール（参考資料18）。料金・条件・一覧は隠さない（手順1）。白い箱（中40px）を縦に3つ、あいだ30px。
   ・一棟貸し：名前（46px）の下に料金（見出しの横の額は、見出しの下。手順4）。額は52px、ほかは34px（「（税別）」は条件なので28pxにしない）。点線は出さない
   ・説明の淡いピンクの箱：写真（660×400）を上、本文を下
   ・オプション：帯（42px）→ 分類（38px・真ん中）→ 枠の中の一覧（1列。左の列 → 右の列の順。「・」は1文字分で、2行目以降は文の頭にそろえる） */
@media (max-width: 1023px) {

	.p-cleaning-price {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-cleaning-price__box {
		margin-top: 1.875rem; /* 30px */
		padding: 2.5rem;      /* 40px */
	}

	.c-heading + .p-cleaning-price__box {
		margin-top: 3.75rem; /* 60px */
	}

	/* 名前と料金は真ん中（2026-09-28 ユーザー指示） */
	.p-cleaning-price__head {
		display: block;
		margin-top: 0;
		text-align: center;
	}

	.p-cleaning-price__name {
		display: block;
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-cleaning-price__name::after {
		content: none;
	}

	.p-cleaning-price__fee {
		margin: 1.25rem 0 0; /* 20px */
		line-height: 1.4706; /* 50/34 */
	}

	.p-cleaning-price__num {
		font-size: 3.25rem; /* 52px */
	}

	.p-cleaning-price__detail {
		margin-top: 1.875rem; /* 30px */
		padding: 0 0 2.5rem;  /* 下40px */
	}

	.p-cleaning-price__photo {
		position: static;
		z-index: auto;
		width: 100%;
		height: 25rem; /* 400px */
	}

	.p-cleaning-price__photo::after {
		content: none;
	}

	.p-cleaning-price__text {
		margin-top: 1.875rem;   /* 30px */
		padding-inline: 2.5rem; /* 40px */
		line-height: var(--lh-body);
	}

	/* 見出しは真ん中（2026-09-28 ユーザー指示。「。」で終わる2行目は .u-sp-shift で右へ寄せる）。
	   本文は2つの段落（.u-sp-para。原稿の段落のとおり） */
	.p-cleaning-price__subtitle {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
		text-align: center;
	}

	.p-cleaning-price__compare {
		margin-top: 1.875rem; /* 30px */
		line-height: var(--lh-body);
	}

	.p-cleaning-price__band {
		height: auto;
		min-height: 5rem; /* 80px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-cleaning-price__group {
		margin-top: 3.125rem; /* 50px（前の枠から） */
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-cleaning-price__band + .p-cleaning-price__group {
		margin-top: 1.875rem; /* 30px */
	}

	.p-cleaning-price__options {
		columns: 1;
		margin-top: 1.875rem; /* 30px */
		padding: 1.8125rem 2.4375rem; /* 枠の1pxと合わせて、上下30px 左右40px */
		line-height: 1.4706; /* 50/34 */
	}

	.p-cleaning-price__options li {
		padding-left: 1em;
		text-indent: -1em;
	}

	.p-cleaning-price__options li + li {
		margin-top: 1.25rem; /* 20px */
	}

	.p-cleaning-price__note {
		margin-top: 3.125rem; /* 50px */
		line-height: var(--lh-body);
	}
}

/* ----------------------------------------------------------
   Area（対応エリア）。形は「8. 運営代行」の .p-area。
   清掃代行だけの囲み2つ（淡いピンクの帯の見出し＋本文）と、ボタンを足す
   ---------------------------------------------------------- */

.p-area__notice {
	width: 68.75rem; /* 1100px */
	max-width: 100%;
	margin: 3.75rem auto 0; /* 上60px */
}

/* 帯の高さは50px（1行の行間で、文字を上下の真ん中に置く）。
   grid や flex にすると、中の <span>（スマホで右へ寄せる行）が別々の段に分かれるので、ふつうの箱にする */
.p-area__notice-title {
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-pink);
	color: var(--color-pink-deep);
	font-size: var(--fs-sub); /* 28px */
	font-weight: 500;
	line-height: 1.7857; /* 50/28 */
	text-align: center;
}

.p-area__notice-text,
.p-area__notice-note {
	line-height: var(--lh-normal); /* 34/17 */
	text-align: center;
}

.p-area__notice-text {
	margin-top: 1.25rem; /* 20px */
}

/* 注記は、本文から1行分（34px）あける（Figmaのとおり） */
.p-area__notice-note {
	margin-top: 2.125rem; /* 34px */
}

.p-area__btn-wrap {
	margin-top: 3.125rem; /* 50px */
	text-align: center;
}

/* 文字が長いので、ほかのボタン（320px）より広い360px（Figmaのとおり） */
.p-area__btn {
	width: 22.5rem; /* 360px */
}

/* SP：地図と本文の形は運営代行と同じ（「8. 運営代行」の .p-area のSP）。本文の段落は、清掃代行は意味のまとまりで3つ
   （1文ずつだと7段落になり、余白が多すぎた。2026-09-28 ユーザー指摘。段落の分け方は page-minpaku-cleaning.php）。
   囲みの見出しは42pxで真ん中（2〜3行）。「、」「。」で終わる行は、その行だけ20px右へ寄せる（.u-sp-shift）。
   囲みの本文は左揃え（1つ目は1つの段落、2つ目は本文と注記の2つ）。ボタンは問い合わせの型（型I・幅いっぱい・高さ120px） */
@media (max-width: 1023px) {

	.p-area__notice-title {
		padding: 1.25rem 1.875rem; /* 上下20px 左右30px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-area__notice-text,
	.p-area__notice-note {
		line-height: var(--lh-body);
		text-align: left;
	}

	.p-area__notice-text {
		margin-top: 1.875rem; /* 30px */
	}

	.p-area__notice-note {
		margin-top: 3.125rem; /* 50px（段落のあいだ） */
	}

	.p-area__btn-wrap {
		margin-top: 3.75rem; /* 60px */
	}

	.p-area__btn {
		width: 100%;
	}
}

/* ----------------------------------------------------------
   FAQ（形は「8. 運営代行」の .p-faq と同じ）
   清掃代行は白の地。左上の飾りの写真を、右と下へ白に溶け込ませる。開閉の部品は .c-faq--pink
   --white は清掃スタッフ募集（白の地で、開閉の部品は青。行の地は淡い青）
   ---------------------------------------------------------- */

.p-faq--pink,
.p-faq--white {
	background-color: var(--color-white);
}

.p-faq--white .c-faq {
	--faq-row: var(--color-bg-blue);
}

.p-faq--pink .p-faq__bg::after,
.p-faq--white .p-faq__bg::after {
	background:
		linear-gradient(180deg, transparent, var(--color-white)),
		linear-gradient(90deg, transparent, var(--color-white));
}

/* ==========================================================
   10. プライバシーポリシー（page-privacy.php）
   Figma「永遠都コンフォルト」プライバシーポリシー（node 317:2421）。
   上部は template-parts/page-hero.php（色は gradient）。淡い青の地と白い箱（中の余白100px）は「6. お知らせ」の .p-article。
   項目のあいだ60px、見出し→本文30px、本文→箇条書き→本文20px。原稿の段落は、PCでは空けずに続ける（Figmaのとおり）
   ========================================================== */

/* 見出し（32px）。2行になっても詰まらないよう行間を48pxにし、そのぶん（上下8px）を余白から引いている */
.p-policy__title {
	font-size: var(--fs-h3); /* 32px */
	line-height: var(--lh-tight); /* 48px */
}

/* 最初の見出しは、文字の上端を白い箱の余白（100px）ちょうどに置く */
.p-policy__item:first-child .p-policy__title {
	margin-top: -0.5rem;
}

.p-policy__item + .p-policy__item {
	margin-top: 3.25rem; /* 52px（前の本文の下端から見出しの文字の上端まで60px） */
}

/* 制定日（11項の下。右寄せ。2026-10-31） */
.p-policy__date {
	margin-top: 3.25rem; /* 52px */
	text-align: right;
	line-height: var(--lh-body);
}

.p-policy__title + * {
	margin-top: 1.375rem; /* 22px（見出しの文字の下端から30px） */
}

/* 本文と箇条書きのあいだ */
.p-policy__text + .p-policy__list,
.p-policy__list + .p-policy__text {
	margin-top: 1.25rem; /* 20px */
}

/* 箇条書き（青紫の文字に、丸のチェック17px。印は1行目の高さの真ん中） */
.p-policy__list {
	color: var(--color-link);
}

.p-policy__list li {
	display: flex;
	gap: 0.625rem; /* 10px */
}

.p-policy__list .c-icon {
	flex-shrink: 0;
	margin-top: calc((var(--lh-body) - 1) * 0.5em);
}

/* 11項：項目名（幅170px）と内容の2列。線は無い（Figmaのとおり） */
.p-policy__row {
	display: grid;
	grid-template-columns: 10.625rem 1fr; /* 170px */
	column-gap: 3.75rem; /* 60px */
}

.p-policy__table a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-policy__table a:hover {
	opacity: 0.7;
}

/* SP：規約の白いカードの決まり（参考資料18の手順11）。見出し42px、本文34/70。
   原稿の段落のあいだ50px、項目のあいだ100px（段落より広く。お知らせの記事の段落→h2と同じ）、見出し→本文30px。
   箇条書きは34/50で、項目のあいだ20px（5.の12）。11項は、項目名の下に内容を置く */
@media (max-width: 1023px) {

	.p-policy__title {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238; /* 64/42 */
	}

	.p-policy__item:first-child .p-policy__title {
		margin-top: -0.6875rem; /* 文字の上端を白い箱の余白（40px）ちょうどに */
	}

	.p-policy__item + .p-policy__item {
		margin-top: 5.5625rem; /* 89px（文字の上端まで100px） */
	}

	.p-policy__title + * {
		margin-top: 1.1875rem; /* 19px（文字の下端から30px） */
	}

	.p-policy__text + .p-policy__text {
		margin-top: 3.125rem; /* 50px */
	}

	.p-policy__text + .p-policy__list,
	.p-policy__list + .p-policy__text {
		margin-top: 1.875rem; /* 30px */
	}

	.p-policy__list {
		--lh-body: 1.4706; /* 50/34（チェックの位置の計算にも使う） */
		line-height: var(--lh-body);
	}

	.p-policy__list li {
		gap: 0.5882em; /* 20px */
	}

	.p-policy__list li + li {
		margin-top: 1.25rem; /* 20px */
	}

	/* 11項は一覧と同じく行間を詰め（34/50）、項目名とその内容をひとまとまりに見せる */
	.p-policy__table {
		line-height: 1.4706; /* 50/34 */
	}

	.p-policy__row {
		display: block;
	}

	.p-policy__row + .p-policy__row {
		margin-top: 1.875rem; /* 30px */
	}

	.p-policy__table dt {
		font-weight: 500;
	}
}

/* ==========================================================
   11. 清掃スタッフ募集（page-recruit.php）
   Figma「永遠都コンフォルト」清掃スタッフ募集（node 424:1197）。上から
   上部（template-parts/page-hero.php）→ About Us → 身につくこと → 仕事内容 → 合う方 →
   契約形態と報酬・働き方（同じ淡いピンクの地）→ 募集エリア → よくある質問（「8. 運営代行」の .p-faq・.c-faq）→
   応募方法 → 募集要項 → Join Us!（template-parts/contact.php の .c-contact--join）。
   欄の見出しは .c-heading--gradient。欄の上の余白は、Figmaのとおり欄ごとに違う（189・200・214px）。
   ========================================================== */

/* 淡いピンクの地の表（ある日曜日の流れ・契約形態と報酬）：見出しの行はピンクの地に白の文字、線は淡いピンク */
.p-recruit-table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--fs-body); /* 17px */
	line-height: var(--lh-flat);
}

.p-recruit-table th,
.p-recruit-table td {
	height: 3.125rem; /* 50px */
	padding: 0.25rem 0.9375rem; /* 左右15px */
	border: 1px solid var(--color-bg-pink);
	background-color: var(--color-white);
	font-weight: 400;
	text-align: left;
}

.p-recruit-table thead th {
	background-color: var(--color-pink);
	color: var(--color-white);
}

/* チェックの一覧（丸のチェック＋文。印は1行目の高さの真ん中） */
.p-recruit-job__tasks-list li,
.p-recruit-suits__list li,
.p-recruit-suits__need-list li,
.p-recruit-styles__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.4375rem; /* 7px */
	line-height: var(--lh-flat);
}

.p-recruit-job__tasks-list .c-icon,
.p-recruit-suits__need-list .c-icon,
.p-recruit-styles__list .c-icon {
	flex-shrink: 0;
	color: var(--color-pink-deep);
}

/* SP：スマホの作り替えルール（参考資料18）。表の文字は34px・行間50px、枠の中の余白20px。
   チェックは1列で、項目の中の行間50/34、項目のあいだ20px（5.の12）。印は1行目の文字の高さの真ん中 */
@media (max-width: 1023px) {

	.p-recruit-table {
		line-height: 1.4706; /* 50/34 */
	}

	.p-recruit-table th,
	.p-recruit-table td {
		height: auto;
		padding: 1.25rem; /* 20px */
	}

	.p-recruit-job__tasks-list li,
	.p-recruit-suits__need-list li,
	.p-recruit-styles__list li {
		gap: 0.625rem;       /* 10px */
		line-height: 1.4706; /* 50/34 */
	}

	.p-recruit-job__tasks-list li + li,
	.p-recruit-suits__list li + li,
	.p-recruit-suits__need-list li + li,
	.p-recruit-styles__list li + li {
		margin-top: 1.25rem; /* 20px */
	}

	.p-recruit-job__tasks-list .c-icon,
	.p-recruit-suits__need-list .c-icon,
	.p-recruit-styles__list .c-icon {
		margin-top: 0.2353em; /* 8px（行間50pxの中の34pxの真ん中） */
	}
}

/* ----------------------------------------------------------
   About Us（白の地に、光の写真を不透明度25%で重ねる）
   ---------------------------------------------------------- */

.p-recruit-about {
	position: relative;
	isolation: isolate;
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
	text-align: center;
	/* FVの「Scroll」で来たとき、この欄の上端を画面の上端にそろえる（運営代行の For Owners と同じ） */
	scroll-margin-top: calc((var(--header-height-stuck) + 1rem) * -1);
}

/* 背景の淡い虹色の光は、template-parts/light-rays.php（土台と虹の筋のまとまりに分けた写真。「4. 共通パーツ ＞ 飾りの動き」⑤の .c-photo-light__ray） */

/* この欄だけ、英字と大見出しのあいだが40px（Figmaのとおり） */
.p-recruit-about .c-heading__title {
	margin-top: 1.6875rem; /* 27px（行間の差の13pxを引く） */
}

/* 写真4枚を横一列に（外側の角だけ丸い） */
.p-recruit-about__photos {
	display: flex;
	margin-top: 2.3125rem; /* 37px（Figmaの50px） */
	overflow: hidden;
	border-radius: var(--radius-md);
}

.p-recruit-about__photos li {
	flex: 1 1 0;
}

.p-recruit-about__photos img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.p-recruit-about__title {
	margin-top: 2.5rem; /* 40px */
	font-size: var(--fs-h3); /* 32px */
	line-height: 1.625; /* 52/32 */
}

.p-recruit-about__text {
	margin-top: 1.875rem; /* 30px */
}

/* SP：英字100px → 50px → 大見出し58px → 写真4枚を2列×2段（365×240、あいだ10px）→ 小見出し（46px・4行・真ん中。マーカーは3〜4行目）→
   本文（左揃え・2文ずつの3つの段落）。改行と段落の位置は page-recruit.php。
   大見出し「永遠都コンフォルトについて」（13文字）は幅より14px長いが、1行のまま真ん中に置く（左右に7pxずつ余白へかかる。参考資料18の5.の1） */
@media (max-width: 1023px) {

	.p-recruit-about {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-about .c-heading__title {
		margin: 3.125rem -1rem 0; /* 上50px。左右は16pxずつ広げて、はみ出す1行を真ん中に置く */
		white-space: nowrap;
	}

	.p-recruit-about__photos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem; /* 10px */
		margin-top: 3.75rem; /* 60px */
		overflow: visible;
		border-radius: 0;
	}

	.p-recruit-about__photos img {
		aspect-ratio: 365 / 240;
		border-radius: var(--radius-md);
	}

	.p-recruit-about__title {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-recruit-about__text {
		margin-top: 3.125rem; /* 50px */
		text-align: left;
	}
}

/* ----------------------------------------------------------
   この仕事で身につくこと（淡い青のカード3枚。写真は左・右・左）
   ---------------------------------------------------------- */

.p-recruit-gain {
	padding-block: 11.8125rem 12.5rem; /* 189px 200px */
}

.p-recruit-gain__list {
	display: grid;
	gap: 3.125rem; /* 50px */
	margin-top: 3.5625rem; /* 57px（Figmaの70px） */
}

/* カードの中の並びは「見出し → 写真 → 本文」（スマホの順）。PCは写真（270px）を横に置き、見出しと本文をその隣に積む。
   1つ目・3つ目は写真が左、2つ目は右 */
.p-recruit-gain__card {
	display: grid;
	grid-template-columns: 16.875rem 1fr; /* 写真270px｜文字 */
	grid-template-rows: auto 1fr;
	min-height: 13.75rem; /* 220px */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
}

.p-recruit-gain__card:nth-child(even) {
	grid-template-columns: 1fr 16.875rem;
}

.p-recruit-gain__photo {
	grid-column: 1;
	grid-row: 1 / 3;
}

.p-recruit-gain__card:nth-child(even) .p-recruit-gain__photo {
	grid-column: 2;
}

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

.p-recruit-gain__title,
.p-recruit-gain__text {
	grid-column: 2;
	margin-inline: 2.5rem; /* 40px */
}

.p-recruit-gain__card:nth-child(even) .p-recruit-gain__title,
.p-recruit-gain__card:nth-child(even) .p-recruit-gain__text {
	grid-column: 1;
}

/* 見出しの左の線（6px。見出しの行数ぶんの長さ） */
.p-recruit-gain__title {
	position: relative;
	margin-top: 1.4375rem; /* 23px */
	padding-left: 1.25rem; /* 20px（線から文字まで14px） */
	color: var(--color-blue);
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429; /* 46/28 */
}

.p-recruit-gain__title::before {
	content: "";
	position: absolute;
	top: 0.4375rem;    /* 7px */
	bottom: 0.4375rem;
	left: 0;
	width: 0.375rem;   /* 6px */
	border-radius: 0.1875rem;
	background-color: var(--color-blue);
}

.p-recruit-gain__text {
	margin-top: 0.6875rem;    /* 11px */
	margin-bottom: 1.625rem; /* 26px */
}

/* SP：淡い青のカード3つを縦に（あいだ30px）。カードの中は「見出し（42px・左の線は行数ぶん）→ 写真 660×400 → 本文」。
   写真の左右はPCだけのもの。スマホはどのカードも同じ順（運営代行の Why Us と同じ形） */
@media (max-width: 1023px) {

	.p-recruit-gain {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-gain__list {
		gap: 1.875rem;       /* 30px */
		margin-top: 3.75rem; /* 60px */
	}

	.p-recruit-gain__card {
		display: block;
		min-height: 0;
		padding: 2.5rem; /* 40px */
	}

	.p-recruit-gain__title {
		margin: 0;
		padding-left: 1.5rem;    /* 24px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	/* 縦線は見出しの行数ぶんの長さ（行の上下の空き11pxずつを除く） */
	.p-recruit-gain__title::before {
		top: 0.6875rem;    /* 11px */
		bottom: 0.6875rem; /* 11px */
		width: 0.5rem;     /* 8px */
		border-radius: 0.25rem;
	}

	.p-recruit-gain__photo {
		display: block;
		height: 25rem;        /* 400px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-recruit-gain__text {
		margin: 1.875rem 0 0; /* 上30px */
	}
}

/* ----------------------------------------------------------
   仕事内容（淡いピンクの地に白いカード）
   ---------------------------------------------------------- */

.p-recruit-job {
	padding-block: 13.375rem 12.5rem; /* 214px 200px */
	background-color: var(--color-bg-pink);
}

.p-recruit-job__card {
	margin-top: 3.5625rem; /* 57px（Figmaの70px） */
	padding: 2.5rem 3.125rem 3.125rem; /* 40px 50px 50px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-recruit-job__title {
	color: var(--color-pink-deep);
	font-size: var(--fs-h3); /* 32px */
	line-height: 1.4375; /* 46/32 */
	text-align: center;
}

/* 主な作業（左に「主な作業」、右に2列のチェック。左・右・左・右の順） */
.p-recruit-job__tasks {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 3.125rem; /* 50px */
	min-height: 12.5rem; /* 200px */
	margin-top: 1.875rem; /* 30px */
	padding: 2.5rem; /* 40px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
}

.p-recruit-job__tasks-title {
	align-self: start;
	font-size: 1.625rem; /* 26px（文字の段に無い値。Figmaのとおり） */
	font-weight: 500;
	line-height: var(--lh-flat);
}

.p-recruit-job__tasks-list {
	display: grid;
	grid-template-columns: 23.75rem 1fr; /* 左の列380px */
	align-content: start; /* 箱の高さに合わせて行が伸びないように */
	gap: 1rem 0; /* 縦16px */
}

.p-recruit-job__flow-title {
	margin-top: 3.125rem; /* 50px */
	font-size: var(--fs-sub); /* 28px */
	font-weight: 400;
	line-height: var(--lh-flat);
	text-align: center;
}

.p-recruit-job__flow {
	margin-top: 2rem; /* 32px */
}

.p-recruit-job__flow th:first-child {
	width: 8.75rem; /* 140px */
}

.p-recruit-job__flow thead th {
	font-weight: 500;
}

/* 研修（淡いピンクの箱）。中の並びは「見出し → 写真 → 本文」（スマホの順）。
   PCは写真を箱の右に重ね（左へ箱の地に溶け込ませる）、見出しと本文をその上に置く */
.p-recruit-job__training {
	position: relative;
	min-height: 22.25rem; /* 356px */
	margin-top: 2.25rem; /* 36px */
	padding: 1.875rem 0 2.5rem 2.5rem; /* 30px 0 40px 40px */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
}

.p-recruit-job__training-title,
.p-recruit-job__training-text {
	position: relative;
	z-index: 1;
}

.p-recruit-job__training-title {
	font-size: var(--fs-h4); /* 24px */
	line-height: 1.6667; /* 40/24 */
}

.p-recruit-job__training-text {
	margin-top: 1rem; /* 16px */
}

.p-recruit-job__training-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 25rem; /* 400px */
}

.p-recruit-job__training-photo picture {
	display: block;
	height: 100%;
}

.p-recruit-job__training-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-recruit-job__training-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-bg-pink), transparent);
}

/* SP：白いカード（中40px）の中は「小見出し（46px・2行・真ん中）→ 主な作業（淡いピンクの箱：「主な作業」38px → チェック1列）→
   ある日曜日の流れ（42px）→ 表（2列のまま。参考資料18の手順6）→ 研修の箱（見出し38px・3行 → 写真 660×400 → 本文の2つの段落）」。
   あいだはPCの比のまま、30px（見出し→中身・表→箱）と50px（主な作業→ある日曜日の流れ） */
@media (max-width: 1023px) {

	.p-recruit-job {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-job__card {
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem;     /* 40px */
	}

	.p-recruit-job__title {
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-recruit-job__tasks {
		display: block;
		min-height: 0;
		margin-top: 1.875rem; /* 30px */
		padding: 2.5rem;      /* 40px */
	}

	.p-recruit-job__tasks-title {
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-recruit-job__tasks-list {
		display: block;
		margin-top: 1.875rem; /* 30px */
	}

	.p-recruit-job__flow-title {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-recruit-job__flow {
		margin-top: 1.875rem; /* 30px */
	}

	/* 1列目は「作業終了前」（5文字）が1行に入る幅 */
	.p-recruit-job__flow th:first-child {
		width: 13.75rem; /* 220px */
	}

	.p-recruit-job__training {
		min-height: 0;
		margin-top: 1.875rem; /* 30px */
		padding: 2.5rem 0;    /* 上下40px（写真は箱の幅いっぱい） */
	}

	.p-recruit-job__training-title,
	.p-recruit-job__training-text {
		padding-inline: 2.5rem; /* 40px */
	}

	.p-recruit-job__training-title {
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-recruit-job__training-photo {
		position: static;
		width: 100%;
		height: 25rem;        /* 400px */
		margin-top: 1.875rem; /* 30px */
	}

	.p-recruit-job__training-photo::after {
		content: none;
	}

	.p-recruit-job__training-text {
		margin-top: 1.875rem; /* 30px */
	}
}

/* ----------------------------------------------------------
   こんな方に合う仕事です（白の地。左上に飾りの写真）
   ---------------------------------------------------------- */

.p-recruit-suits {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 12.5rem; /* 200px */
}

/* 左上の飾りの写真（740×600）。右と下へ白に溶け込ませる */
.p-recruit-suits__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 46.25rem; /* 740px */
	height: 37.5rem; /* 600px */
}

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

.p-recruit-suits__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-white)),
		linear-gradient(90deg, transparent, var(--color-white));
}

/* リードは3行（28px・行間46px。.c-heading__lead の大きさのまま） */
.p-recruit-suits .c-heading__lead {
	color: var(--color-text);
}

/* 青い箱（白の文字のチェック4つ。右の写真は、左へ青に溶け込ませる） */
.p-recruit-suits__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 15.75rem; /* 252px */
	margin-top: 3.125rem; /* 50px */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-blue);
}

.p-recruit-suits__list {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.3125rem; /* 21px */
	padding: 3.125rem; /* 50px */
	color: var(--color-white);
	font-size: var(--fs-h5); /* 22px */
	font-weight: 500;
}

.p-recruit-suits__list li {
	gap: 0.625rem; /* 10px */
}

.p-recruit-suits__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 27.9375rem; /* 447px */
}

.p-recruit-suits__photo picture {
	display: block;
	height: 100%;
}

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

.p-recruit-suits__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-blue), transparent);
}

/* 応募に必要な条件（淡い青の箱の中に白い箱） */
.p-recruit-suits__need {
	margin-top: 2.5rem; /* 40px */
	padding: 1.875rem 3.125rem 3.125rem; /* 30px 50px 50px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-blue);
	text-align: center;
}

.p-recruit-suits__need-title {
	color: var(--color-blue);
	font-size: var(--fs-sub); /* 28px */
	line-height: 1.6429; /* 46/28 */
}

/* 1つ目は1行を占め、2つ目と3つ目は2つ目の行に並べる（Figmaのとおり） */
.p-recruit-suits__need-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3.125rem; /* 縦16px 横50px */
	margin-top: 1.875rem; /* 30px */
	padding: 2.5rem 2.5rem 2.5625rem; /* 40px 40px 41px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	text-align: left;
}

.p-recruit-suits__need-list li:first-child {
	flex-basis: 100%;
}

.p-recruit-suits__need-list .c-icon {
	color: var(--color-blue);
}

.p-recruit-suits__note {
	margin-top: 1.875rem; /* 30px */
}

/* SP：左上の飾りの写真は幅400px（運営代行の For Owners と同じ）。
   英字「Who This Role Suits」は100pxだと幅より58px長いので、この欄だけ幅に入る92px（参考資料18の5.の15の考え方）。
   リード（PCは28px・3行）は38px・4行で真ん中（46pxでは2行目が幅に入らず6行になるため）。
   青い箱は「写真 740×450 → チェック（白・38px）」。PCで大きいチェック（22px）なので、ほかのチェック（34px）より1段大きくする。
   応募に必要な条件は淡い青の箱（中40px）に「見出し42px → 白い箱（チェック1列）→ 注記（4行なので左揃え）」 */
@media (max-width: 1023px) {

	.p-recruit-suits {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-suits__bg {
		width: 25rem;     /* 400px */
		height: 20.25rem; /* 324px（740×600 の比） */
	}

	.p-recruit-suits .c-heading__en {
		font-size: 5.75rem; /* 92px */
	}

	.p-recruit-suits .c-heading__lead {
		font-size: var(--fs-lead-l); /* 38px */
		line-height: 1.4737;         /* 56/38 */
	}

	.p-recruit-suits__box {
		display: block;
		min-height: 0;
		margin-top: 3.75rem; /* 60px */
	}

	.p-recruit-suits__photo {
		position: relative;
		width: 100%;
		height: 28.125rem; /* 450px */
	}

	.p-recruit-suits__photo::after {
		content: none;
	}

	.p-recruit-suits__list {
		display: block;
		padding: 2.5rem; /* 40px */
		font-size: var(--fs-lead-l); /* 38px */
	}

	.p-recruit-suits__list li {
		gap: 0.625rem;       /* 10px */
		line-height: 1.4737; /* 56/38 */
	}

	.p-recruit-suits__list .c-icon {
		flex-shrink: 0;
		margin-top: 0.2368em; /* 9px（行間56pxの中の38pxの真ん中） */
	}

	.p-recruit-suits__need {
		margin-top: 1.875rem; /* 30px */
		padding: 2.5rem;      /* 40px */
	}

	.p-recruit-suits__need-title {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-recruit-suits__need-list {
		display: block;
		margin-top: 1.875rem; /* 30px */
		padding: 2.5rem;      /* 40px */
	}

	.p-recruit-suits__note {
		text-align: left;
	}
}

/* ----------------------------------------------------------
   契約形態と報酬・働き方（同じ淡いピンクの地。白いカード）
   ---------------------------------------------------------- */

.p-recruit-work {
	background-color: var(--color-bg-pink);
}

.p-recruit-conditions {
	padding-top: 13.375rem; /* 214px */
}

.p-recruit-styles {
	padding-block: 12.5rem; /* 200px */
}

.p-recruit-work__card {
	margin-top: 3.5625rem; /* 57px（Figmaの70px） */
	padding: 2.5rem 3.125rem 3rem; /* 40px 50px 48px */
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	text-align: center;
}

/* 働き方のカードだけ、見出しから60px（Figmaのとおり） */
.p-recruit-styles__card {
	margin-top: 2.9375rem; /* 47px */
	padding-bottom: 2.625rem; /* 42px */
}

.p-recruit-work__title {
	color: var(--color-pink-deep);
	font-size: var(--fs-h3); /* 32px */
	line-height: 1.625; /* 52/32 */
}

.p-recruit-work__text {
	margin-top: 1.875rem; /* 30px */
}

.p-recruit-conditions__table {
	margin-top: 2.5rem; /* 40px */
}

.p-recruit-conditions__table th:nth-child(1) {
	width: 10.875rem; /* 174px */
}

.p-recruit-conditions__table th:nth-child(2) {
	width: 17.25rem; /* 276px */
}

.p-recruit-conditions__table th:nth-child(3) {
	width: 23.375rem; /* 374px */
}

.p-recruit-work__note {
	margin-top: 1.125rem; /* 18px（Figmaのとおり） */
}

.p-recruit-styles__card .p-recruit-work__note {
	margin-top: 2.1875rem; /* 35px */
}

/* 働き方の箱（左に写真。写真は右へ箱の地に溶け込ませる） */
.p-recruit-styles__box {
	position: relative;
	display: flex;
	min-height: 12.3125rem; /* 197px */
	margin-top: 2.5rem; /* 40px */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
	text-align: left;
}

.p-recruit-styles__photo {
	position: relative;
	flex-shrink: 0;
	width: 18.75rem; /* 300px */
}

.p-recruit-styles__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-recruit-styles__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--color-bg-pink));
}

.p-recruit-styles__list {
	display: grid;
	align-content: start;
	gap: 1rem; /* 16px */
	padding: 2.5rem 2.5rem 2.5rem 0.875rem; /* 写真から14px */
}

/* SP：同じ淡いピンクの地に、2つの欄を続ける（契約形態と報酬の下の140pxで区切り、働き方の上の余白は取らない）。
   白いカード（中40px）は「小見出し（42px・3行・真ん中。「、」「。」で終わる行は .u-sp-shift）→ 本文（左揃え）→ 表・箱 → 注記」。
   契約形態と報酬の表（4列）は、段階ごとのカードにする（帯＝段階、中は「列の名前｜値」。参考資料18の手順6）。
   働き方の箱は「写真 660×400 → チェック1列」 */
@media (max-width: 1023px) {

	.p-recruit-conditions {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-styles {
		padding-block: 0 8.75rem; /* 下140px */
	}

	.p-recruit-work__card,
	.p-recruit-styles__card {
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem;     /* 40px */
	}

	/* 小見出しは42px。働き方の小見出しを3行に収める大きさ（2026-09-29 ユーザー指示「バランスよく3行に」。
	   2行目「清掃案件ごとにLINEで対応できる」が中身の幅660pxに入るのは42pxまで）。
	   同じ部品なので、契約形態と報酬の小見出しも同じ大きさにそろえる */
	.p-recruit-work__title {
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-recruit-work__text {
		margin-top: 1.875rem; /* 30px */
		text-align: left;
	}

	/* 表は段階ごとのカード。列の見出しの行は画面に出さず（読み上げには残す）、値の前に列の名前（data-label）を出す */
	.p-recruit-conditions__table {
		display: block;
		margin-top: 3.125rem; /* 50px */
	}

	.p-recruit-conditions__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.p-recruit-conditions__table tbody,
	.p-recruit-conditions__table tr,
	.p-recruit-conditions__table th,
	.p-recruit-conditions__table td {
		display: block;
	}

	/* PCの列の幅（th:nth-child）を外して、帯をカードの幅いっぱいにする */
	.p-recruit-conditions__table th:nth-child(n) {
		width: auto;
	}

	.p-recruit-conditions__table tr + tr {
		margin-top: 1.875rem; /* 30px */
	}

	/* 帯（段階）。ピンクの地に白の文字（PCの表の見出しの行と同じ色） */
	.p-recruit-conditions__table tbody th {
		padding: 1.25rem; /* 20px */
		border-color: var(--color-pink);
		background-color: var(--color-pink);
		color: var(--color-white);
		font-size: var(--fs-lead-l); /* 38px */
		font-weight: 500;
		line-height: 1.4737;         /* 56/38 */
		text-align: center;
	}

	/* 列の名前（180px）｜値。行の区切りは線 */
	.p-recruit-conditions__table td {
		display: grid;
		grid-template-columns: 11.25rem 1fr; /* 180px */
		column-gap: 1.25rem;                 /* 20px */
		padding: 1.25rem 1.875rem;           /* 20px 30px */
		border-top: none;
	}

	.p-recruit-conditions__table td::before {
		content: attr(data-label);
		color: var(--color-pink-deep);
	}

	.p-recruit-work__note {
		margin-top: 1.25rem; /* 20px */
	}

	.p-recruit-styles__box {
		display: block;
		min-height: 0;
		margin-top: 3.125rem; /* 50px */
	}

	.p-recruit-styles__photo {
		width: 100%;
		height: 25rem; /* 400px */
	}

	.p-recruit-styles__photo::after {
		content: none;
	}

	.p-recruit-styles__list {
		display: block;
		padding: 2.5rem; /* 40px */
	}

	.p-recruit-styles__card .p-recruit-work__note {
		margin-top: 3.125rem; /* 50px */
		text-align: left;
	}
}

/* ----------------------------------------------------------
   募集エリア（千葉県の形と本文）
   ---------------------------------------------------------- */

.p-recruit-area {
	padding-block: 12.5rem; /* 200px */
	text-align: center;
}

.p-recruit-area__title {
	margin-top: 2.3125rem; /* 37px（Figmaの50px） */
	color: var(--color-pink-deep);
	font-size: var(--fs-h3); /* 32px */
	line-height: 1.625; /* 52/32 */
}

.p-recruit-area__map {
	width: 24.375rem; /* 390px（運営代行の地図と同じ。2026-10-22 に千葉県の形から1都3県の形へ替えた） */
	margin: 2.5rem auto 0; /* 40px */
}

.p-recruit-area__text {
	margin-top: 2.5rem; /* 40px */
}

/* SP：小見出しは46px・3行で真ん中（「。」で終わる行は .u-sp-shift）。
   地図は幅600px（運営代行と同じ1都3県の形。2026-10-22 までは千葉県の縦長の形で400px）。
   本文は、PCの3行を3つの段落にして左揃え（あいだ50px。参考資料18の手順9） */
@media (max-width: 1023px) {

	.p-recruit-area {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-area__title {
		margin-top: 3.125rem; /* 50px */
		font-size: var(--fs-sub); /* 46px */
		line-height: 1.5652;      /* 72/46 */
	}

	.p-recruit-area__map {
		width: 37.5rem;      /* 600px（運営代行の地図と同じ） */
		margin-top: 3.75rem; /* 60px */
	}

	.p-recruit-area__text {
		margin-top: 3.125rem; /* 50px */
		text-align: left;
	}
}

/* よくある質問（形は「8. 運営代行」の .p-faq・.c-faq）。開いた1問目の下の余白だけ20px（Figmaのとおり。運営代行は23px） */
.p-recruit-faq .c-faq__a {
	padding-bottom: 1.25rem; /* 20px */
}

/* SP：開閉の形は共通パーツの .c-faq のSP（回答の下は30px）に戻す */
@media (max-width: 1023px) {

	.p-recruit-faq .c-faq__a {
		padding-bottom: 1.875rem; /* 30px */
	}
}

/* ----------------------------------------------------------
   応募方法（淡いピンクの地。白いカード4枚を、下向きの山かっこでつなぐ）
   ---------------------------------------------------------- */

.p-recruit-entry {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 12.5rem; /* 200px */
	background-color: var(--color-bg-pink);
}

/* 右上の飾りの写真（736×600）。左と下へ、欄の淡いピンクに溶け込ませる */
.p-recruit-entry__bg {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 46rem;   /* 736px */
	height: 37.5rem; /* 600px */
}

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

.p-recruit-entry__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent, var(--color-bg-pink)),
		linear-gradient(270deg, transparent, var(--color-bg-pink));
}

.p-recruit-entry__steps {
	margin-top: 3.5625rem; /* 57px（Figmaの70px） */
}

.p-recruit-entry__step {
	position: relative;
	padding: 2.5rem 1.25rem 2.8125rem; /* 40px 20px 45px */
	background-color: var(--color-white);
	text-align: center;
}

/* カードのあいだ80px。真ん中に下向きの山かっこ（40px） */
.p-recruit-entry__step + .p-recruit-entry__step {
	margin-top: 5rem; /* 80px */
}

.p-recruit-entry__arrow {
	position: absolute;
	top: -3.75rem; /* 上のカードから20px */
	left: 50%;
	color: var(--color-pink-deep);
	font-size: 2.5rem; /* 40px */
	line-height: var(--lh-flat);
	transform: translateX(-50%);
}

.p-recruit-entry__arrow .c-icon {
	display: block;
}

/* 「Step 01」の札（116×42・EB Garamond 30px） */
.p-recruit-entry__num {
	display: grid;
	place-items: center;
	width: fit-content;
	min-width: 7.25rem; /* 116px */
	margin-inline: auto;
	height: 2.625rem;   /* 42px */
	padding-inline: 0.625rem;
	border-radius: var(--radius-sm);
	background-color: var(--color-pink-deep);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-emph); /* 30px */
	line-height: var(--lh-flat);
}

.p-recruit-entry__title {
	margin-top: 0.9375rem; /* 15px */
	color: var(--color-pink-deep);
	font-size: 1.625rem; /* 26px（文字の段に無い値。Figmaのとおり） */
	font-weight: 400;
	line-height: 1.6923; /* 44/26 */
}

.p-recruit-entry__text {
	margin-top: 0.625rem; /* 10px */
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：流れ（参考資料18の型N）。白いカード（中40px）を縦に並べ、あいだに「∨」（50px・上下20px）。
   カードの中は「Step の札（46px・高さ64px。清掃代行の Flow と同じ）→ 題（42px・真ん中）→ 説明（34/70）」。
   説明は3行を超えるものがあるので、どれも左揃え（手順8）。右上の飾りの写真は幅460px（運営代行・清掃代行の Flow と同じ） */
@media (max-width: 1023px) {

	.p-recruit-entry {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-entry__bg {
		width: 28.75rem;    /* 460px */
		height: 23.4375rem; /* 375px（736×600 の比） */
	}

	.p-recruit-entry__steps {
		margin-top: 3.75rem; /* 60px */
	}

	.p-recruit-entry__step {
		padding: 2.5rem; /* 40px */
	}

	.p-recruit-entry__step + .p-recruit-entry__step {
		margin-top: 5.625rem; /* 90px（上下20px＋「∨」50px） */
	}

	.p-recruit-entry__arrow {
		top: -4.375rem;      /* 上のカードから20px */
		font-size: 3.125rem; /* 50px */
	}

	.p-recruit-entry__num {
		min-width: 0;
		height: 4rem;             /* 64px */
		padding-inline: 1.25rem;  /* 20px */
		font-size: var(--fs-sub); /* 46px */
	}

	.p-recruit-entry__title {
		margin-top: 1.875rem;    /* 30px */
		font-size: var(--fs-h4); /* 42px */
		line-height: 1.5238;     /* 64/42 */
	}

	.p-recruit-entry__text {
		margin-top: 1.875rem; /* 30px */
		line-height: var(--lh-body);
		text-align: left;
	}
}

/* ----------------------------------------------------------
   募集要項（淡いピンクの箱。項目名｜内容の行を線で区切る）
   ---------------------------------------------------------- */

.p-recruit-details {
	padding-block: 12.5rem; /* 200px */
}

.p-recruit-details__list {
	margin-top: 2.9375rem; /* 47px（Figmaの60px） */
	padding: 5.8125rem 6.25rem 6.25rem; /* 93px 100px 100px */
	border-radius: var(--radius-md);
	background-color: var(--color-bg-pink);
}

.p-recruit-details__row {
	display: grid;
	grid-template-columns: 11.25rem 1fr; /* 項目名の列180px */
	align-items: center;
	padding-block: 2.5rem 2.4375rem; /* 40px 39px（線1pxとあわせて、行の間隔114px） */
}

.p-recruit-details__row:first-child {
	padding-top: 0;
}

.p-recruit-details__row:last-child {
	padding-bottom: 0;
}

.p-recruit-details__row + .p-recruit-details__row {
	border-top: 1px solid var(--color-lavender-pale);
}

.p-recruit-details__row dt {
	color: var(--color-pink-deep);
	font-size: var(--fs-lead-l); /* 20px */
	line-height: var(--lh-flat);
}

.p-recruit-details__row dd {
	line-height: var(--lh-normal); /* 34/17 */
}

/* SP：2列の表（13行）は、項目名の下に内容を置き、行の区切りの線は残す（参考資料18の手順6）。
   淡いピンクの箱（中40px）。項目名38px（濃いピンク）→ 内容34/50。行の上下の余白30px */
@media (max-width: 1023px) {

	.p-recruit-details {
		padding-block: 7.625rem 8.75rem; /* 上122px 下140px */
	}

	.p-recruit-details__list {
		margin-top: 3.75rem; /* 60px */
		padding: 2.5rem;     /* 40px */
	}

	.p-recruit-details__row {
		display: block;
		padding-block: 1.875rem; /* 30px */
	}

	.p-recruit-details__row dt {
		line-height: 1.4737; /* 56/38 */
	}

	.p-recruit-details__row dd {
		margin-top: 0.625rem; /* 10px */
		line-height: 1.4706;  /* 50/34 */
	}
}