@charset "UTF-8";

/* ================================================================
   ORIGINAL CALENDAR | base.css
   法人向けオリジナルカレンダー制作サービスサイト
   ----------------------------------------------------------------
   全ページで共通利用するCSS。
   デザイントークン・リセット・共通コンポーネントに加え、
   全ページに出る Header / Footer もここで管理する。
   ページ固有のセクションは書かない（TOPは top.css / コラムは column.css）。

   - 設計: FLOCSS / BEM  ( l- : Layout / c- : Component / p- : Project / u- : Utility )
   - 記法: 通常CSS（ネストなし）・IDセレクタ不使用・!important 原則不使用
   - 方針: モバイルファースト（SPを既定値とし、PC差分を min-width:768px に集約）
   - 前提: WordPress オリジナルテーマ化（wp_enqueue_style で最初に読み込む）

   目次
     1. CSS変数（デザイントークン）
     2. モダンリセット
     3. HTML / body
     4. 基本タイポグラフィ
     5. 画像・リンク・フォーム等の基本要素
     6. レイアウト共通クラス
     7. 汎用コンポーネント
     8. アクセシビリティ
     9. レスポンシブ（PC差分）
    10. Header（全ページ共通）
    11. Footer（全ページ共通）
    12. Contact（導入コピー＋埋め込みフォーム／TOP・フォームページ共通）
    13. Fixed CTA（1279px以下で画面下部に追従する2ボタン）
   ================================================================ */


/* ================================================================
   1. CSS変数（デザイントークン）
   ================================================================ */
:root {

	/* ------------------------------------------------------------
	   Color
	   低彩度・暖色寄り。紫（primary）はCTA・見出しアクセント・
	   小さなUIに限定し、面で多用しない。
	   ------------------------------------------------------------ */
	--color-primary: #5146C8;        /* ブランドカラー：CTA・英字ラベル・アイコン */
	--color-primary-dark: #4239A4;   /* primary のホバー用濃色（白文字とのコントラストは上がる方向） */
	--color-primary-soft: #fdfcff;   /* 極薄の紫：面で敷ける唯一の primary 系（フロー帯の内側背景等） */
	--color-secondary: #F2EFE8;      /* 生成り：セクション背景・面のアクセント */
	--color-accent: #D6A84B;  
	--color-warm: #FF664A;        /* ゴールド：装飾罫・アイコン等の小面積専用（後述の注意書き参照） */


	--color-text-main: #28282D;      /* 本文・見出し */
	--color-text-sub: #66635F;       /* 補足文・キャプション */

	--color-bg-main: #FDFCF8;        /* 暖色白：サイト全体の地色 */
/*
	--color-bg-sub: #F2EFE8;          生成り：セクション背景 
	--color-bg-muted: #F4F4F1;       薄いグレー：控えめな区切り背景 
	--color-bg-light: #FbF8F2; 
*/

	--color-bg-sub:   #F7EFE4; 
 	--color-bg-muted: #F3EAE0;
  	--color-bg-light: #FCF7F0;     

	--color-border: #DDD8CF;         /* 罫線・フォーム枠 */
	--color-white: #FFFFFF;

	/* ダーク面（フッター等）専用。
	   --color-primary は --color-dark 上では 2.23:1 しかなく文字色に使えないため、
	   ダーク面用の明るい紫を別トークンとして持つ。 */
	--color-dark: #23252E;              /* ダーク背景（フッター等） */
	--color-border-on-dark: #3A3D48;    /* ダーク面の細い罫線 */
	--color-text-on-dark: #C9CAD0;      /* ダーク面の補足文・リンク */
	--color-primary-on-dark: #8F87E8;   /* ダーク面のブランドアクセント（文字にも使える明度） */

	--color-focus: var(--color-primary); /* フォーカスリング */

	/* [コントラスト基準 / WCAG 2.1 AA]
	   OK  --color-primary   on --color-white    = 6.77:1  （白抜き文字・リンク文字ともに可）
	   OK  --color-text-main on --color-bg-main  = 13.9:1
	   OK  --color-text-sub  on --color-bg-main  = 5.83:1  （補足文サイズでも可）
	   OK  --color-text-main on --color-primary-soft = 12.9:1
	   OK  --color-text-sub  on --color-primary-soft = 5.47:1
	   OK  --color-white     on --color-dark    = 15.3:1
	   OK  --color-text-on-dark    on --color-dark = 9.33:1
	   OK  --color-primary-on-dark on --color-dark = 4.94:1
	   NG  --color-primary   on --color-dark    = 2.23:1
	       → ダーク面で紫を文字に使う場合は --color-primary-on-dark を用いる。
	         --color-primary はダーク面では装飾罫等の小面積UIに限定する。
	   NG  --color-accent    on --color-white    = 2.19:1
	       → --color-accent は本文・リンク等の「文字色」には使用しないこと。
	         装飾罫・アイコン・バッジ等の小面積UI専用トークンとして扱う。 */

	/* ------------------------------------------------------------
	   Font family
	   Webフォント未読込環境でも破綻しないフォールバック順。
	   本文はゴシック体、見出し（h1〜h3）は明朝体を基本とする。

	   読み込むウェイト（HTMLの Google Fonts URL と対で管理する）
	     Noto Sans JP  : 400 / 500 / 700
	     Noto Serif JP : 500 のみ
	   明朝を1ウェイトに絞っているのは、日本語フォントがサブセット分割配信で
	   1ウェイトあたり数百KBあるため。明朝に 400・600・700 を指定しても
	   500 の字面が使われるだけなので、CSS側でも 500 以外は書かないこと。
	   ------------------------------------------------------------ */
	--font-family-base:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;

	--font-family-serif:
		"Noto Serif JP",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		"YuMincho",
		serif;

	/* ------------------------------------------------------------
	   Font size
	   xs〜3xl のスケールは全ブレイクポイントで固定値。
	   PC/SPで可変にするのは意味づけ変数（section-title）のみ。
	   ------------------------------------------------------------ */
	--font-size-xs: 0.65rem;      /* ---：注釈・キャプション */
	--font-size-sm: 0.875rem;     /* 14px：補足文・小さめ本文 */
	--font-size-md: 1rem;         /* 16px：本文基準 */
	--font-size-lg: 1.125rem;     /* 18px：リード文・小見出し */
	--font-size-xl: 1.375rem;     /* 22px：見出し（中） */
	--font-size-2xl: 1.75rem;     /* 28px：見出し（大）／SPのセクションタイトル */
	--font-size-3xl: 2.5rem;      /* 40px：PCのセクションタイトル・FV見出し */

	/* 意味づけ変数（PCで再定義。9.レスポンシブ 参照） */
	--font-size-section-title: var(--font-size-2xl); /* セクション日本語見出し */
	--font-size-section-label: var(--font-size-xs);  /* セクション英字ラベル */
	--font-size-lead: var(--font-size-sm);           /* セクション説明文 */

	/* ------------------------------------------------------------
	   Line height / Letter spacing
	   ------------------------------------------------------------ */
	--line-height-base: 1.8;      /* 本文：日本語の可読性を優先 */
	--line-height-heading: 1.4;   /* 見出し */
	--line-height-tight: 1.3;     /* 英字ラベル・ボタン等の詰まった行 */

	--letter-spacing-base: 0.02em;
	--letter-spacing-heading: 0.04em;
	--letter-spacing-wide: 0.16em; /* 英字ラベル用 */

	/* ------------------------------------------------------------
	   Space
	   ------------------------------------------------------------ */
	--space-xs: 0.5rem;   /* 8px  */
	--space-sm: 1rem;     /* 16px */
	--space-md: 1.5rem;   /* 24px */
	--space-lg: 2rem;     /* 32px */
	--space-xl: 3rem;     /* 48px */
	--space-2xl: 5rem;    /* 80px */

	/* セクション上下の大きな余白。
	   セクションCSS側は px を直書きせず、常に --section-space を使う。
	   （--section-space は 9.レスポンシブ で PC 値に切り替わる） */
	--section-space-pc: 100px;
	--section-space-sp: 64px;
	--section-space: var(--section-space-sp);

	/* ------------------------------------------------------------
	   Container
	   通常コンテンツ 1080px / FV等のワイド領域 1280px
	   ------------------------------------------------------------ */
	--container-max-width: 1080px;
	--container-wide-max-width: 1280px;
	--container-gutter: 20px;   /* 左右の安全余白（PCで 40px に切替） */

	/* ------------------------------------------------------------
	   Radius / Shadow / Motion / Decoration
	   角丸・影は「静かで上質」を損なわないよう最小限に留める。
	   ------------------------------------------------------------ */
	--radius-sm: 2px;
	--radius-md: 4px;

	--shadow-sm: 0 1px 2px rgba(40, 40, 45, 0.06);
	--shadow-md: 0 4px 16px rgba(40, 40, 45, 0.08);

	--transition-base: 0.25s ease;

	--decor-line-width: 40px;   /* 小見出し左の装飾罫の長さ */

	/* Header / FV / メニューで共有する値。
	   --hairline はセクション側（Customize / Cases）で再定義している箇所があり、
	   そちらはブロック内の値が優先される。 */
	--hairline: 1px;                  /* 細い罫線の太さ */
	--cta-gap: 0.75rem;               /* 並ぶ2つのCTAの間隔（12px） */
}


/* ================================================================
   2. モダンリセット
   ================================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

ul,
ol {
	list-style: none;
}

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

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

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

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

table {
	border-collapse: collapse;
	border-spacing: 0;
}

address {
	font-style: normal;
}


/* ================================================================
   3. HTML / body
   ================================================================ */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   4. 基本タイポグラフィ
   h1〜h3：明朝体（--font-family-serif）
   h4〜h6：ゴシック体（body から継承）
   本文はゴシック体を基本とする。
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	/* ゴシックの太字は重く見えるため 500 に統一（明朝の h1〜h3 も 500） */
	font-weight: 500;
}

/* 明朝体は同じ font-weight でも細く見えるため 500〜600 に留める */
h1, h2, h3 {
	font-family: var(--font-family-serif);
	font-weight: 500;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-sm); }
h6 { font-size: var(--font-size-sm); }

p {
	line-height: var(--line-height-base);
}

strong,
b {
	font-weight: 500;
	text-decoration: underline;
}

em {
	font-style: normal;
	font-weight: 500;
}

small {
	display: inline-block;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

sub,
sup {
	font-size: 0.7em;
	line-height: 1;
}


/* ================================================================
   5. 画像・リンク・フォーム等の基本要素
   ================================================================ */

/* ---- Link ---------------------------------------------------- */
a {
	transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
	color: var(--color-primary);
}

/* 本文中のリンクは下線を維持（リンクであることを色以外でも伝える）。
   リスト内は「サイト外へ出るリンク」だけが対象。
   サイト内のページも絶対URL（https://ori-cal.net/...）で書いているため、
   自ドメインを除外しないとナビ・フッター・パンくずまで下線が付いてしまう。 */
p > a,
li > a[href^="http"]:not([href*="ori-cal.net"]) {
	text-underline-offset: 0.2em;
}

/* ---- Image --------------------------------------------------- */
img {
	/* 画像が主役のサイトのため、地色は極力ニュートラルに */
	/* background-color: var(--color-bg-muted); */
	vertical-align: bottom;
}

figure img {
	width: 100%;
}

/* ---- Form ---------------------------------------------------- */
input,
textarea,
select {
	width: 100%;
	min-height: 48px;   /* タップ領域の下限を確保し、select との高さを揃える */
	padding: 0.75rem var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	color: var(--color-text-main);
	line-height: var(--line-height-tight);
	transition: border-color var(--transition-base);
}

input:hover,
textarea:hover,
select:hover {
	border-color: var(--color-text-sub);
}

textarea {
	min-height: 8rem;
	line-height: var(--line-height-base);
	resize: vertical;
}

select {
	cursor: pointer;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-text-sub);
	opacity: 1; /* Firefox の既定の減光を打ち消す */
}

/* チェックボックス・ラジオは幅100%の対象外 */
input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;   /* 上の 48px 下限をここでは打ち消す */
	padding: 0;
	vertical-align: -0.2em;
	cursor: pointer;
	accent-color: var(--color-primary);
}

label {
	cursor: pointer;
}

/* ---- Focus --------------------------------------------------- */
/* キーボード操作時のみフォーカス位置を明示（マウス操作時は表示しない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}


/* ================================================================
   6. レイアウト共通クラス
   ================================================================ */

/* 左右パディングの分だけコンテンツ幅が痩せないよう、
   gutter を max-width に足し込む。
   PC（gutter 40px）: 外形 1160px / 実質コンテンツ 1080px
   SP（gutter 20px）: 左右 20px の安全余白を確保 */
.l-container {
	width: 100%;
	max-width: calc(var(--container-max-width) + var(--container-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* FV・背景写真など、ワイドに見せたい領域だけで使用（実質 1280px） */
.l-container--wide {
	max-width: calc(var(--container-wide-max-width) + var(--container-gutter) * 2);
}

/* 内側で入れ子にする際、gutter の二重適用を避けるための素通しコンテナ */
.l-container--flush {
	padding-inline: 0;
}

/* セクションの上下余白。px 直書きの代わりに必ずこれを使う */
.l-section {
	padding-block: var(--section-space);
}

.l-section--bg-sub {
	background-color: var(--color-bg-sub);
}

.l-section--bg-muted {
	background-color: var(--color-bg-muted);
}


/* ================================================================
   7. 汎用コンポーネント
   ================================================================ */

/* ---- Section title ------------------------------------------- */
/* 想定マークアップ:
   <div class="c-section-title">
     <span class="c-section-title__en">PRODUCT LINEUP</span>
     <h2 class="c-section-title__ja">7つの商品スタイル</h2>
     <p class="c-section-title__lead">説明文</p>
   </div>                                                          */
.c-section-title {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.c-section-title__en {
	display: block;
	margin-bottom: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-label);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
	/* letter-spacing の分だけ右に寄るのを打ち消す */
	text-indent: var(--letter-spacing-wide);
}

/* h2 以外（p / span）で組んでも成立するよう書体を明示 */
.c-section-title__ja {
	font-family: var(--font-family-serif);
	font-size: var(--font-size-section-title);
	font-weight: 500;
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-main);
}

.c-section-title__lead {
	margin-top: var(--space-md);
	font-size: var(--font-size-lead);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

/* 説明文の <br> はPCの行長に合わせた改行位置。
   SPで残すと、折り返しの途中に改行が入って
   「ざま。」のように数文字だけの行ができてしまう。
   SPでは解除し、行長が足りる768px以上で復帰させる（9.レスポンシブ）。 */
.c-section-title__lead br {
	display: none;
}

/* 左寄せが必要なセクション向け */
.c-section-title--left {
	text-align: left;
}

/* ---- Button --------------------------------------------------- */
/*
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 48px;              /* タップ領域の下限を確保 
	padding: 0.875rem var(--space-xl);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-size-md);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-base),
		border-color var(--transition-base),
		color var(--transition-base);
}
*/
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 48px;              /* タップ領域の下限を確保*/ 
	padding: 0.875rem var(--space-xl);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: #3b4583;
	color: var(--color-white);
	font-size: var(--font-size-md);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-base),
		border-color var(--transition-base),
		color var(--transition-base);
}
.c-btn:hover {
	background-color: #252b53;
	color: var(--color-white);
}

.c-btn:disabled,
.c-btn[aria-disabled="true"] {
	background-color: var(--color-border);
	color: var(--color-text-sub);
	cursor: not-allowed;
}

/* 枠線タイプ（副次的な導線用） */
.c-btn--outline {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.c-btn--outline:hover {
	background-color: #252b53;
	color: var(--color-white);
}

/* 幅いっぱい（SPのCTA等） */
.c-btn--block {
	display: flex;
	width: 100%;
}

/* 小サイズ（ヘッダー内の小さなUI等） */
.c-btn--sm {
	min-height: 40px;
	padding: 0.5rem var(--space-md);
	font-size: var(--font-size-sm);
}

/* ---- ヘッダー・FV・メニューのCTA ------------------------------ */
/* 右端に「\203A」を出す導線ボタン。枠線を primary で塗り、
   下の --sample（枠線あり）と並べても輪郭や寸法がずれないようにする。
   置き場所（幅・余白・表示可否）は .p-header__cta / .p-hero__cta 側の役割。 */
.c-btn--cta::after {
	content: "\203A";   /* › */
	margin-inline-start: auto;   /* 余白があるときはボタンの右端へ寄る */
	line-height: 1;
}
/*
.c-btn--cta:not(.c-btn--sample) {
	border-color: var(--color-primary);
}

/* hoverは背景と同じ primary-dark にし、濃い背景の外に明るい輪郭を残さない 
.c-btn--cta:not(.c-btn--sample):hover {
	border-color: var(--color-primary-dark);
}
*/
.c-btn--cta:not(.c-btn--sample) {
	border-color: #3b4583;
}

/* hoverは背景と同じ primary-dark にし、濃い背景の外に明るい輪郭を残さない */
.c-btn--cta:not(.c-btn--sample):hover {
	border-color: #3b4583;
}

/* ---- 用紙サンプル請求ボタン ---------------------------------- */
/* 白地＋primaryの文字。塗りボタンと並べたときに白く浮かせたいので、
   .c-btn--outline（背景transparent）ではなくこの配色を使う。
   ヘッダー・FV・ハンバーガーメニューのどこに置いても同じ見た目になる。
   hoverは色を変えず、ボタン全体をわずかに透かす。 */
/*
   .c-btn--sample {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-primary);
	transition: opacity var(--transition-base);
}

.c-btn--sample:hover {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-primary);
	opacity: 0.6;
}
*/
   .c-btn--sample {
	background-color: var(--color-white);
	border-color: #3b4583;
	color: #3b4583;
	transition: opacity var(--transition-base);
}

.c-btn--sample:hover {
	background-color: var(--color-white);
	border-color: #3b4583;
	color: #3b4583;
	opacity: 0.6;
}

/* ================================================================
   8. アクセシビリティ
   ================================================================ */

/* 視覚的に隠し、スクリーンリーダーには読ませる */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* アイコンのみのボタン・リンクが小さくなりすぎないための下限 */
.c-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* 動きを減らす設定への配慮。
   全称セレクタは詳細度 0 のため、!important なしでは後続のどのルールにも
   負けて設定が無効化される。本ファイルで !important を使うのはここだけ。 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ================================================================
   9. レスポンシブ（PC差分：min-width 768px）
   SPの値は上記で既定済み。ここではPCの差分のみを記述する。
   ================================================================ */
@media (min-width: 768px) {

	/* ---- トークンの再定義 ------------------------------------ */
	:root {
		--section-space: var(--section-space-pc);
		--container-gutter: 40px;
		--font-size-section-title: var(--font-size-3xl);
		--font-size-lead: var(--font-size-md);
	}

	/* ---- タイポグラフィ -------------------------------------- */
	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }
	h4 { font-size: var(--font-size-lg); }
	h5 { font-size: var(--font-size-md); }
	h6 { font-size: var(--font-size-md); }

	/* ---- コンポーネント -------------------------------------- */
	.c-section-title {
		margin-bottom: var(--space-2xl);
	}

	.c-section-title__lead {
		margin-top: var(--space-lg);
	}

	/* PCは1行の文字数が足りるので、カンプの改行位置を復帰させる */
	.c-section-title__lead br {
		display: inline;
	}

	.c-btn {
		min-height: 56px;
		padding: var(--space-sm) var(--space-2xl);
	}

	/* --sm は上の .c-btn より後に書く必要がある。
	   同じ詳細度のため、先に書くと PC の .c-btn に打ち消されてしまう。 */
	.c-btn--sm {
		min-height: 40px;
		padding: var(--space-xs) var(--space-md);
		font-size: var(--font-size-sm);
	}
}


/* ================================================================
   10. Header（全ページ共通）
   ページ最上部に置かれ、スクロール後もそのまま上端に残る。
   ブレイクポイントは3段階。
     SP     〜767px    ロゴ＋ハンバーガー
     Tablet 768〜1279  ロゴ＋ナビ
     PC     1280px〜   ロゴ＋ナビ＋CTA
   ハンバーガーはSP専用。assets/js/main.js の PC_QUERY（768px）と必ず対で変更する。
   ================================================================ */
/* ヘッダーの影の切り替え判定にだけ使う目印。
   ページ最上部（ドキュメントのy=0）に1pxだけ置き、
   これが画面外へ出たかどうかで assets/js/main.js が判定する。
   絶対配置なのでフローに参加せず、高さも見た目も変えない。 */
.p-header__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

.p-header {
	/* SPハンバーガーの3本線。ボタン自体（.c-icon-btn の44×44）とヘッダー高は変えず、
	   中の線だけを一回り大きくするための値。線の間隔は線幅に合わせて広げている。 */
	--menu-bar-width: 1.75rem;    /* 28px */
	--menu-bar-offset: 0.5rem;    /* 上下の線の距離 8px */

	position: sticky;
	top: 0;
	z-index: 10;   /* 本文より前面・base.css のスキップリンク(100)より背面 */
	background-color: var(--color-white);
	border-bottom: var(--hairline) solid var(--color-border);
	transition: box-shadow var(--transition-base);
}

/* ページ最上部から離れた後の状態。assets/js/main.js が付与する。
   高さ・ロゴサイズ・背景は変えず、境界をわずかに強めるだけに留める。
   （クラスが付かなくても border-bottom があるので見え方は破綻しない） */
.p-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.p-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-xs);
}

/* ロゴ。高さで基準を取り、幅は画像の比率に任せる */
.p-header__logo {
	flex: 0 0 auto;
	display: block;
}

.p-header__logo img {
	width: auto;
	height: 1.5rem;
	background-color: transparent;   /* base.css の img 地色を打ち消す */
}

/* ---- グローバルナビ ------------------------------------------ */
/* SP（767px以下）だけ閉じた状態。ハンバーガーで開くとヘッダー直下に展開する
   （開閉は main.js。展開時の見た目は下の @media (max-width: 767px) にまとめている）。
   768px以上はハンバーガーをやめ、ヘッダーへ直接ナビを並べる。 */
.p-header__nav {
	display: none;
}

.p-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.p-header__nav-link {
	display: inline-block;
	padding-block: var(--space-xs);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	color: var(--color-text-main);
}

/* 現在地の表し方は2種類。
   --current … 今開いているページ（HTMLに直接付ける固定の状態）。色＋太さで示す。
   .is-current … TOPで表示中のセクション。assets/js/main.js が付け外しする。
                 スクロールのたびに太さが変わると項目の幅が動くため、色だけ変える。
   色は --color-primary（白背景で 6.77:1 / AA 適合）。
   色変化のトランジションは base.css の a { transition: color } が担当する。 */
.p-header__nav-link--current {
	font-weight: 700;
	color: var(--color-primary);
}

.p-header__nav-link.is-current {
	color: var(--color-primary);
}

/* ---- ヘッダーCTA（2ボタン） --------------------------------- */
/* 1279px以下はヘッダーにCTAを置かない（HTMLは残す）。
   SPはメニュー内の .p-header__menu-actions、TabletはHero内の .p-hero__actions が担う。
   ボタンの高さ・角丸・文字サイズは base.css の .c-btn / .c-btn--sm。 */
.p-header__actions {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	gap: var(--cta-gap);
}

/* 左右paddingを詰め、ナビと同じ行に収まるようにする */
.p-header__cta {
	padding-inline: var(--space-sm);
}

/* ラベルの「無料」だけPCで出す（SPはCTAごと非表示）。
   display:none はアクセシビリティツリーからも外れるため、
   読み上げが二重にならない。 */
.p-header__cta-free {
	display: none;
}

/* ---- ハンバーガーメニュー内のCTA（SP専用） ------------------ */
/* 既定で隠し、SPでメニューが開いたときだけ出す
   （表示指定は後述の @media (max-width: 767px) 内）。
   768px以上のナビには出さない（TabletはHero内のCTAが担う）。 */
.p-header__menu-actions {
	display: none;
}


/* ---- ハンバーガーボタン（PCでは非表示） ---------------------- */
/* .c-icon-btn で 44×44 のタップ領域は base.css 側が担保 */
.p-header__menu {
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-header__menu-bar,
.p-header__menu-bar::before,
.p-header__menu-bar::after {
	display: block;
	width: var(--menu-bar-width);
	height: var(--hairline);
	background-color: var(--color-text-main);
}

.p-header__menu-bar {
	position: relative;
}

.p-header__menu-bar::before,
.p-header__menu-bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.p-header__menu-bar::before {
	top: calc(var(--menu-bar-offset) * -1);
}

.p-header__menu-bar::after {
	top: var(--menu-bar-offset);
}

/* 開いた状態は3本線→×。状態の正は button の aria-expanded なので、
   クラスではなく属性セレクタで見た目を切り替える（JSは属性の更新だけ）。 */
.p-header__menu-bar,
.p-header__menu-bar::before,
.p-header__menu-bar::after {
	transition:
		top var(--transition-base),
		transform var(--transition-base),
		background-color var(--transition-base);
}

.p-header__menu[aria-expanded="true"] .p-header__menu-bar {
	background-color: transparent;
}

.p-header__menu[aria-expanded="true"] .p-header__menu-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.p-header__menu[aria-expanded="true"] .p-header__menu-bar::after {
	top: 0;
	transform: rotate(-45deg);
}


/* ---- ドロップダウンメニュー（767px以下だけの状態） ----------- */
/* モバイルファースト（min-width）の例外。開閉UIはSPにしか存在しないため、
   768px以上で1つずつ打ち消さず max-width に閉じ込めている。
   main.js の PC_QUERY（min-width:768px）と対で管理する。 */
@media (max-width: 767px) {

	/* ヘッダー直下に全幅で展開する。.p-header は position:sticky なので
	   絶対配置の基準になり、追加の position 指定は不要。 */
	.p-header.is-nav-open .p-header__nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: var(--space-xs) var(--container-gutter) var(--space-sm);
		border-bottom: var(--hairline) solid var(--color-border);
		background-color: var(--color-white);
		box-shadow: var(--shadow-md);
	}

	.p-header.is-nav-open .p-header__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* 項目間は細い罫線だけで区切る（カードにはしない） */
	.p-header.is-nav-open .p-header__nav-item + .p-header__nav-item {
		border-top: var(--hairline) solid var(--color-border);
	}

	/* タップ領域を確保しつつ、本文と同じ読みやすさにする */
	.p-header.is-nav-open .p-header__nav-link {
		display: block;
		padding-block: var(--space-sm);
		font-size: var(--font-size-md);
	}

	/* ナビ項目の下にCTA2つを縦積みで置く。上の細い罫線で区切る。
	   width:fit-content で内容幅（長い方のラベル）に合わせ、
	   margin-inline:auto で中央へ。2つのボタンはグリッドの stretch で同じ幅に揃う。 */
	.p-header.is-nav-open .p-header__menu-actions {
		display: grid;
		gap: var(--cta-gap);
		width: fit-content;
		max-width: 100%;
		margin-top: var(--space-sm);
		margin-inline: auto;
		padding-top: var(--space-sm);
		border-top: var(--hairline) solid var(--color-border);
	}

	/* ---- 狭い端末でロゴがはみ出さないようにする ---------------- */
	/* 320px級の端末で横スクロールが出ないよう、足りないぶんだけロゴを縮める
	   （ハンバーガーは44pxのまま。360px以上では従来どおり 252×24px）。 */
	.p-header__logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.p-header__logo img {
		/* 幅を明示するのは、フレックスの基準幅を確定させるため。
		   width:auto ＋ max-width:100% だけだと
		   「親の幅→画像の幅→親の幅」の循環になり0pxに潰れる。
		   15.75rem は高さ24px相当の実寸（viewBox 304.7×29 ＝ 比率10.507）。 */
		width: 15.75rem;
		height: auto;
		max-width: 100%;
	}

	/* メニュー展開中は背面のスクロールを止める
	   （クラスは assets/js/main.js が body に付け外しする） */
	body.is-nav-open {
		overflow: hidden;
	}

	/* メニュー内に同じ2つのCTAが出るので、開いている間は下部の帯を隠す
	   （場所取りの .p-fixed-cta は残したまま、貼り付く方だけ消す） */
	body.is-nav-open .p-fixed-cta__inner {
		display: none;
	}
}


/* ================================================================
   Header : Tablet差分（min-width 768px）
   ----------------------------------------------------------------
   Header : SPと同じ「ロゴ＋ハンバーガー」。ナビ・ヘッダーCTAは出さない。
            PCヘッダーを無理に縮小せず、1280pxまで待つ。
   Header : ハンバーガーをやめ、ヘッダーへナビを直接置く。ヘッダーCTAは出さない
            （2つのCTAはHero内へ小サイズで載せる）。
            768〜1023pxはロゴ＋ナビが1行に収まらないため、ナビを2段目へ折り返す。
   Hero   : 画像が hero_tablet.webp（横位置構図）へ切り替わるため、
            SPの「上に重ねる」から「左40%に重ねる」へ組み替える。
            .p-hero__inner を 40:60 の2カラムにし、左カラムのコピー面を
            画像の高さいっぱいに伸ばして横グラデーションで写真へ溶かす。
            この2カラム重ねの土台はPCとも共通で、1280px以上では
            カラム比（46:54）と文字サイズだけを 6. で上書きしている。
            4ポイント帯は画像の真下のまま（重ねない）。
   ================================================================ */
@media (min-width: 768px) {

	/* ---- ヘッダー：ロゴ＋ナビ（ハンバーガーなし） ------------- */
	/* ロゴ・ナビを一回り小さくしてヘッダーをコンパクトにしたことで、
	   768pxでもロゴ（約90px）＋ナビ（約470px）が1行に収まる。
	   ヘッダーCTAはこの幅では出さない（Hero内のCTAが担う）。 */
	.p-header__inner {
		gap: var(--space-md);
	}

	.p-header__menu {
		display: none;
	}

	.p-header__nav {
		display: block;
		margin-inline-start: auto;   /* ロゴの右へ寄せる */
	}

	.p-header__nav-list {
		justify-content: flex-end;
		gap: 0.72em;
	}

	.p-header__nav-link {
		font-size: 0.85em;
	}

	/* ロゴは横組み（logo-yoko.svg）をSP専用にしたため、
	   768px以上は縦組みの logo.svg。
	   PC（2.5rem＝40px）より一回り小さい 2rem＝32px にする
	   （137×49 の比率で幅は約90px）。 */
	.p-header__logo img {
		height: 2rem;
	}
}



/* ================================================================
   Header : Tablet差分（min-width 1024px）
   1セルの幅が足りるようになるので4特徴を横1列にする。
   ================================================================ */
@media (min-width: 1024px) {

	/* ---- ヘッダー：ナビ項目の間隔だけ広げる ------------------ */
	.p-header__nav-list {
		gap: var(--space-md);
	}
}



/* ================================================================
   Header : PC差分（min-width 1280px）
   ----------------------------------------------------------------
   ここで初めて「ロゴ＋グローバルナビ＋CTA」のヘッダーと、
   コピーをFV画像へ重ねるHeroに切り替える。
   画像の見せ方（width:100% / height:auto の全体縮小）はPCでも変えない。
   ================================================================ */
@media (min-width: 1280px) {

	/* ---- ヘッダー -------------------------------------------- */
	/* 上下 16px + CTA 40px = 72px。カンプのコンパクトな高さに合わせる */
	.p-header__inner {
		gap: var(--space-lg);
		padding-block: var(--space-sm);
	}

	.p-header__logo img {
		height: 2.5rem;
	}

	.p-header__nav {
		display: block;
		margin-inline: auto;   /* ロゴとCTAの間で中央寄りに配置 */
	}

	/* Tabletで一段小さくしたナビ文字を戻す */
	.p-header__nav-link {
		font-size: var(--font-size-sm);
	}

	/* 1279px以下で隠していたヘッダーCTAをPCで表示する */
	.p-header__actions {
		display: flex;
	}

	/* 2ボタンを並べる前提で、左右paddingは md ではなく sm に留める */
	.p-header__cta {
		padding-inline: var(--space-sm);
	}

	/* contents にすると span 自体のボックスが消え、「無料」と「見積もり・相談」が
	   ひと続きのテキストとして1つの匿名フレックスアイテムにまとまる。
	   inline のままだと .c-btn の gap(8px) が語の途中に入ってしまう。 */
	.p-header__cta-free {
		display: contents;
	}

	.p-header__menu {
		display: none;
	}
}


/* ================================================================
   11. Footer（全ページ共通）
   ----------------------------------------------------------------
   ダーク面のため、文字の紫は --color-primary-on-dark を使う
   （--color-primary は --color-dark 上で 2.23:1。装飾罫など小面積UI専用）。
   ================================================================ */

/* ================================================================
   1. フッター枠
   ================================================================ */
.p-footer {
	padding-block: var(--space-2xl) var(--space-lg);
	background-color: var(--color-dark);
	color: var(--color-text-on-dark);
}

/* SP：ブランド情報は全幅、リンクグループは横2カラム。
   アコーディオンにはせず、そのまま展開して並べる。 */
.p-footer__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-md);
}

.p-footer__brand {
	grid-column: 1 / -1;
}

/* 白ロゴを別ファイルで持たず、単色の logo.svg をフィルターで白へ置き換える
   （brightness(0) で黒に潰してから invert(1) で反転＝必ず #FFF になる）。
   多色ロゴになった場合は白抜きSVGを別途用意すること。 */
.p-footer__logo-image {
	width: 8.5rem;   /* 136px。カンプのフッターロゴ幅に合わせる */
	height: auto;
	filter: brightness(0) invert(1);
}

/* ---- リンク共通 ---------------------------------------------- */
/* base.css の a:hover は --color-primary だが、ダーク面では 2.23:1 で
   読めなくなるため、このブロック内は白へのホバーに上書きする。 */
/* SPは2カラムで1列163pxのため12px。
   14pxだと「特定商取引法に基づく表記」（171px）が折り返す。
   768px以上はカラム幅に余裕が出るので14pxへ戻す。 */
.p-footer__link {
	display: inline-block;
	padding-block: var(--space-xs);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	color: var(--color-text-on-dark);
}

.p-footer__link:hover {
	color: var(--color-white);
}


/* ================================================================
   2. ブランド情報
   ================================================================ */

.p-footer__description {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-on-dark);
	text-wrap: pretty;
}


/* ================================================================
   3. リンクグループ
   ================================================================ */

/* h2 の既定は明朝（base.css）。フッターの小見出しはゴシックで組む */
.p-footer__group-title {
	font-family: var(--font-family-base);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-white);
}

/* 見出し下のブランドカラーの細い横線（装飾のみ） */
.p-footer__group-title::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: var(--space-xs);
	background-color: var(--color-primary);
}

.p-footer__list {
	margin-top: var(--space-sm);
}


/* ================================================================
   4. 最新記事
   ================================================================ */

/* カードUIにはせず、小さなラベル＋テキストリンクで通常リンクと区別する */
.p-footer__articles-label {
	margin-top: var(--space-md);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-primary-on-dark);
}

.p-footer__articles {
	margin-top: var(--space-xs);
}

/* 記事タイトルは折り返す前提。行間を本文寄りにして可読性を確保する */
.p-footer__articles .p-footer__link {
	line-height: var(--line-height-base);
}


/* ================================================================
   5. 最下部（コピーライト・SNS）
   ================================================================ */

.p-footer__bottom {
	display: grid;
	gap: var(--space-md);
	justify-items: center;
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-on-dark);
}

.p-footer__copyright {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-on-dark);
}

.p-footer__social {
	display: flex;
	gap: var(--space-sm);
}

/* タップ領域（44px）は base.css の .c-icon-btn が確保する */
.p-footer__social-link {
	color: var(--color-text-on-dark);
}

.p-footer__social-link:hover {
	color: var(--color-white);
}

/* 後からSVGを入れる領域。差し替えてもレイアウトが動かないよう寸法を確保する */
.p-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.p-footer__social-icon > svg,
.p-footer__social-icon > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ================================================================
   Footer : タブレット差分（min-width 768px）
   4カラムにすると1カラム124pxまで痩せて「特定商取引法に基づく表記」等が
   折り返すため、この幅では2カラムに留める。
   ================================================================ */
@media (min-width: 768px) {

	.p-footer__inner {
		gap: var(--space-xl);
	}

	.p-footer__link {
		font-size: var(--font-size-sm);
	}

	/* ブランド情報も1カラム分に戻す（[ブランド][各セクション] / [コラム][会社]） */
	.p-footer__brand {
		grid-column: auto;
	}

	/* ロゴは字間を広く取っているため、サイズを上げるとブランド列で折り返す。
	   カンプも約18pxのため SP と同じサイズのままにする。 */

	.p-footer__bottom {
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-items: start;
		margin-top: var(--space-2xl);
		padding-top: var(--space-md);
	}

	.p-footer__social {
		justify-self: end;
	}
}


/* ================================================================
   Footer : PC差分（min-width 1024px）
   ブランド情報＋3リンクグループの4カラムにする。
   ================================================================ */
@media (min-width: 1024px) {

	/* ブランド情報を他グループより広く取る（1080px 時に約28%） */
	.p-footer__inner {
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	}
}


/* ================================================================
   12. Contact（導入コピー＋埋め込みフォーム）
   ----------------------------------------------------------------
   TOPの最終CTAと、サンプル請求・お問い合わせの各フォームページで共有する。
   SP : 導入コピー（生成りのカード）の下にフォーム
   PC : 左に導入コピー40% ／ 右にフォーム60%（1280px幅の内側で止める）
   フォームは Contact Form 7 を置いたWordPressの固定ページを iframe で読み込む。
   iframeは中身の高さを自分では取れないため、埋め込み先から postMessage で
   高さを受け取り、assets/js/main.js の initContactEmbed() が height を更新する。
   ================================================================ */

/* ================================================================
   1. セクション枠
   ================================================================ */
.p-final-contact {
	/* iframeで埋め込むCF7フォームの高さ（フォールバック）。
	   iframeは中身の高さを自分では取れないため、JSが実測値を受け取るまでの
	   初期値であり、JS無効時の最終的な高さでもある。
	   埋め込み先のフォームは内容なりに伸びる（高さ固定・内側スクロールは廃止）ので、
	   実測に近い値を置いてJS反映時の高さの跳ねを小さくする。
	   実測（問い合わせフォーム）: iframe幅335px＝1706px ／ 648px＝1576px。
	   サンプル請求はこれより低い（335px＝1525px ／ 648px＝1413px）ため、
	   高い方の問い合わせに合わせている。
	   足りない場合はiframe自身がスクロールするだけで、内容は欠けない。
	   フォームの項目を増減したらここも見直す。 */
	--form-embed-height: 1750px;

	padding-block: var(--section-space);
	background-color: var(--color-bg-sub);

	/* 固定ヘッダーがある場合のアンカー着地位置（ヘッダー高に合わせて調整） */
	scroll-margin-block-start: var(--space-lg);
}

/* 全体の最大幅。左右の安全余白はグリッドの両端カラム側で確保する
   （4.〜5. のレスポンシブ 参照）。 */
.p-final-contact__inner {
	display: grid;
	gap: var(--space-xl);
	max-width: var(--container-wide-max-width);
	margin-inline: auto;
}

/* SP：導入コピーのまとまりを生成りのカードにする。
   左右の安全余白は SP ではカードとフォームの各ブロック側に持たせる。 */
.p-final-contact__body {
	margin-inline: var(--container-gutter);
	padding: var(--space-xl) var(--space-md);
	background-color: var(--color-bg-sub);
}

/* .p-final-contact__form {
	margin-inline: var(--container-gutter);
} */

/* WordPress（Contact Form 7を置いた固定ページ）の埋め込み。
   高さは上の --form-embed-height が初期値。実際の高さは埋め込み先から
   postMessage で受け取り、assets/js/main.js の initContactEmbed() が
   style="height:○○px" として上書きする（インラインなのでここより優先される）。
   base.css の iframe { height: auto } を打ち消す役割も兼ねる。 */
.p-final-contact__iframe {
	display: block;
	width: 100%;
	height: var(--form-embed-height);
	border: 0;
	/* 埋め込み先ページの地色をそのまま見せる（生成りの上に白いカードが乗る） */
	background-color: transparent;
	/* JSで高さが決まった瞬間にガタつかないよう、わずかに補間する */
	transition: height var(--transition-base);
}

/* 高さの変化はレイアウトを動かすため、動きを減らす設定では補間しない */
@media (prefers-reduced-motion: reduce) {

	.p-final-contact__iframe {
		transition: none;
	}
}


/* ================================================================
   2. テキスト
   ================================================================ */

.p-final-contact__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-label);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
}

/* SPは28pxだと1行12文字しか入らず、禁則処理で最終行に1文字だけ残るため22px。
   768px以上で28px。1024px以上は左カラムが40%幅になるため28pxのままにする。 */
.p-final-contact__title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
	text-wrap: pretty;
}

.p-final-contact__text {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
	text-wrap: pretty;
}

/* SPは1行の文字数が足りず、PC想定の改行位置（<br>）を残すと
   「も、」だけが1行になるなど半端な折り返しが出るため解除する。
   768px以上で復帰させる（4.レスポンシブ 参照）。 */
.p-final-contact__title br,
.p-final-contact__text br {
	display: none;
}


/* ================================================================
   3. 電話での導線
   ----------------------------------------------------------------
   フォームをiframe化した際に、フォーム内にあった電話案内が無くなったため
   導入コピーの下（.p-final-contact__body の中）へ置いている。
   カード・枠線は付けず、余白と装飾罫だけで «別の導線» であることを示す。
   ================================================================ */
.p-final-contact__tel {
	margin-top: var(--space-xl);
}

/* 左に短いブランドカラーの罫を伸ばす英字ラベル。
   .c-section-title__en と同じ字送りで、セクション見出しとトーンを揃える。 */
.p-final-contact__tel-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-label);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
}



/* 書体・サイズは base.css の h3（明朝／SP 18px・PC 22px）をそのまま使う。
   ここでは上の余白だけを足す。 */
.p-final-contact__tel-title {
	margin-top: var(--space-xs);
	color: var(--color-text-main);
	font-size: var(--font-size-lg);
}

/* 電話番号。SPからそのまま発信できるよう a[href^="tel:"] にしている。
   p の直下に置くと base.css の p > a で下線が付くため、
   ブロック要素としてそのまま並べている。
   白背景での --color-primary は 6.77:1 で AA 適合。 */
.p-final-contact__tel-number {
	display: inline-block;
	margin-top: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-2xl);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-primary);
}

/* base.css の a:hover は --color-primary で、元の色と同じため変化が出ない。
   ホバーしたことが分かるよう濃色側へ寄せる。 */
.p-final-contact__tel-number:hover {
	color: var(--color-primary-dark);
}

.p-final-contact__tel-hours {
	margin-top: var(--space-xs);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}



/* ================================================================
   Contact : タブレット差分（min-width 768px）
   縦積みのまま、文字サイズと改行位置だけをPC寄りにする。
   ================================================================ */
@media (min-width: 768px) {

	/* iframeが広がって1行の文字数が増えるぶん、フォールバック高さを下げる
	   （実測 iframe幅648px＝1576px） */
	.p-final-contact {
		--form-embed-height: 1620px;
	}

	/* 1行の文字数が足りるようになるため、カンプの改行位置を復帰させる */
	.p-final-contact__title br,
	.p-final-contact__text br {
		display: inline;
	}

	.p-final-contact__title {
		font-size: var(--font-size-2xl);
	}

	.p-final-contact__text {
		font-size: var(--font-size-md);
	}

	.p-final-contact__body {
		padding: var(--space-2xl) var(--space-xl);
	}

	/* 1行の幅に余裕が出るので、番号をカンプのサイズ（40px）へ上げる。
	   1024px以上でも左カラム（1080pxの40%＝432px）に収まる。 */
	.p-final-contact__tel-number {
		font-size: var(--font-size-3xl);
	}
}


/* ================================================================
   Contact : PC差分（min-width 1024px）
   左に導入コピー、右にフォームの横並びに切り替える。
   768〜1023px では左右に割ると見出し1行（13文字）が収まらず
   折り返しが増えるため、この幅から適用する。
   ================================================================ */
@media (min-width: 1024px) {

	.p-final-contact {
		background-color: var(--color-bg-sub);
	}

	/* 4カラム（左余白／導入コピー40%／フォーム60%／右余白）。
	   列間の余白は gap ではなくコピー側の padding で取る（gapは4列すべてに効いて幅が痩せる）。
	   フォームが縦に長いので align-items は center にせず start で上端を揃える。 */
	.p-final-contact__inner {
		grid-template-columns:
			minmax(var(--container-gutter), 1fr)
			[text-start] minmax(0, calc(var(--container-max-width) * 0.4))
			[text-end form-start] minmax(0, calc(var(--container-max-width) * 0.6)) [form-end]
			minmax(var(--container-gutter), 1fr);
		align-items: start;
		gap: 0;
	}

	/* PCではカードにせず、セクション背景の上に直接置く */
	.p-final-contact__body {
		grid-column: text-start / text-end;
		margin-inline: 0;
		padding: 0 var(--space-lg) 0 0;
		background-color: transparent;
	}

	.p-final-contact__form {
		grid-column: form-start / form-end;
		margin-inline: 0;
	}
}


/* ================================================================
   13. Fixed CTA（1279px以下の画面下部に追従する2ボタン）
   ----------------------------------------------------------------
   1280px以上ではヘッダーに2つのCTAが並ぶため、この帯は出さない。
   それ未満（SP・Tablet）はヘッダーCTAが無いので、ここが常設の導線になる。

   構造は2層。
     .p-fixed-cta        … 通常フローに置き、帯と同じ高さの «場所取り» をする
                            （最後のコンテンツが帯に隠れないようにするため）
     .p-fixed-cta__inner … 実際に画面下へ貼り付く方（position: fixed）

   body に padding を足す方式にしないのは、この帯を置かないページにも
   余白が出てしまうため。場所取りをHTML側に持たせることで、
   帯を入れたページだけが自動的にその分の高さを確保する。

   置き場所：</footer> の直後（body の最後）。
   ================================================================ */
.p-fixed-cta {
	/* ボタン48px（.c-btn の min-height）＋ 上下padding 8px×2。
	   768px以上は .c-btn が56pxになるぶん高くなる（下のメディアクエリ参照）。 */
	--fixed-cta-height: 4rem;

	/* 帯とぴったり同じ高さにする。上の細罫（--hairline）と、
	   iPhoneのホームインジケータぶん（safe-area）も足す。 */
	height: calc(
		var(--fixed-cta-height)
		+ var(--hairline)
		+ env(safe-area-inset-bottom, 0px)
	);
}

.p-fixed-cta__inner {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9;   /* ヘッダー（10）より背面。メニューを開いたとき帯が上に来ない */

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cta-gap);
	padding: var(--space-xs) var(--space-sm);
	padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));

	/* 白地＋上の細罫。下に写真が来ても白抜きボタンが読めるようにする */
	border-top: var(--hairline) solid var(--color-border);
	background-color: var(--color-white);
}

/* 半分の幅にラベル＋矢印を収めるため、.c-btn の既定より文字と左右余白を詰める
   （高さ48pxはそのままなのでタップ領域は確保される） */
.p-fixed-cta__button {
	padding-inline: var(--space-xs);
	font-size: var(--font-size-sm);
}

/* .c-btn--cta の矢印は既定で margin-inline-start:auto によりボタン右端へ寄る。
   この帯では2つのボタン幅が揃っているぶん、ラベルが左に取り残されて見えるため、
   auto を解除して「ラベル＋矢印」をひとまとまりで中央に置く
   （中央寄せ自体は .c-btn の justify-content: center が担当）。 */
.p-fixed-cta__button::after {
	margin-inline-start: 0;
}


/* ================================================================
   Fixed CTA : Tablet差分（min-width 768px）
   ================================================================ */
@media (min-width: 768px) {

	.p-fixed-cta {
		--fixed-cta-height: 4.5rem;   /* .c-btn が56pxになるぶん */
	}

	/* 画面幅いっぱいに引き伸ばさず、2ボタンを中央にまとめる */
	.p-fixed-cta__inner {
		grid-template-columns: repeat(2, minmax(0, 20rem));
		justify-content: center;
		gap: var(--space-sm);
	}

	.p-fixed-cta__button {
		padding-inline: var(--space-md);
		font-size: var(--font-size-md);
	}
}


/* ================================================================
   Fixed CTA : PC差分（min-width 1280px）
   ヘッダーに同じ2つのCTAが出るので、帯ごと消す（場所取りも不要）。
   ================================================================ */
@media (min-width: 1280px) {

	.p-fixed-cta {
		display: none;
	}
}


/* ================================================================
   セクション下部の▼
   ================================================================ */

/* 各セクションを手前から順に重ねて潜り込みを防ぐ */
main > section {
  position: relative;
}
main > section:nth-of-type(1) { z-index: 9; }
main > section:nth-of-type(2) { z-index: 8; }
main > section:nth-of-type(3) { z-index: 7; }
main > section:nth-of-type(4) { z-index: 6; }
main > section:nth-of-type(5) { z-index: 5; }
main > section:nth-of-type(6) { z-index: 4; }
main > section:nth-of-type(7) { z-index: 3; }
main > section:nth-of-type(8) { z-index: 2; }
main > section:nth-of-type(9) { z-index: 1; }

/* 尖りのあるセクションの下余白（現状のバランスを維持） */
.c-divider-bottom {
  position: relative;
  padding-bottom: calc(var(--section-space, 100px) + 20px) !important;
}

/* 直後のセクションの上余白（現状のバランスを維持） */
.c-divider-bottom + section,
.c-divider-bottom + .l-section {
  padding-top: calc(var(--section-space, 100px) + 40px) !important;
}

/* 下向きの尖り本体 */
.c-divider-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, calc(100% - 0.5px));

  /* 横幅は維持 */
  width: clamp(140px, 26vw, 340px);

  /* ▼▼ 尖りを少し浅めに戻して調整（85px → 50px） ▼▼ */
  height: clamp(28px, 4.2vw, 50px);

  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  z-index: 2;
}

/* スマホ表示時 */
@media (max-width: 768px) {
  .c-divider-bottom {
    padding-bottom: calc(var(--section-space, 60px) + 15px) !important;
  }
  .c-divider-bottom + section,
  .c-divider-bottom + .l-section {
    padding-top: calc(var(--section-space, 60px) + 25px) !important;
  }
  .c-divider-bottom::after {
    width: clamp(120px, 35vw, 180px);
    height: 20px; /* スマホ側も少し浅く戻す */
  }
}

/*改行指示*/
.tab-only {
	display:none;
}
@media (min-width: 768px) and (max-width: 1279px) {
	.tab-only {
		display:block;
	}
}