/*
Theme Name: Kekkon Monogatari
Description: 結婚物語。リニューアルサイト
Version: 1.0
*/

/* ==========================================================================
   デザイントークン
   デザインの配色・サイズはここに集約しています。
   色味の微調整は原則このブロックだけを書き換えれば全体に反映されます。
   ========================================================================== */
:root {
	/* --- 配色 --- */
	--color-primary: #e54600;          /* ロゴ・CTAボタンのオレンジ */
	--color-primary-dark: #c33b00;     /* オレンジのホバー時（primary を暗くした色） */
	--color-primary-light: #f6bca3;    /* 矢印など、薄いオレンジ */
	--color-black: #1a1311;            /* ログインボタンの黒 */
	--color-black-hover: #3a2f2b;
	--color-text: #1a1311;             /* 基本の文字色（黒） */
	--color-text-body: #6c635f;        /* 本文用のグレー（カード本文・リード文など） */
	--color-text-muted: #767676;
	--color-bg: #fff;
	--color-utility-bg: #f2f2f2;       /* 上部ユーティリティバーの背景 */
	--color-badge-bg: #9e9e9e;         /* 「全国受付中」バッジ */
	--color-badge-text: #fff;
	--color-border: #e0e0e0;
	--color-border-strong: #ccc;       /* 資料請求ボタンの枠線 */
	--cream: #FEF7F3;

	/* --- フッター --- */
	--color-footer-bg: #fff;
	--color-footer-heading: #1a1311;   /* 見出しの文字 */
	--color-footer-rule: #1a1311;      /* 見出し下のライン・SP行の区切り線 */
	--color-footer-link: #a6a6a6;      /* 子リンクの文字 */
	--color-footer-link-hover: var(--color-primary);
	--color-sns-bg: #fef7f3;           /* SNSボタンの背景（薄オレンジ） */
	--color-tint: #fdf0e8;             /* 薄オレンジの下じき（タグ・ホバーなど） */
	--color-slot-bg: #d8d8d8;          /* 画像未設定時のプレースホルダー */
	--color-submenu-bg: #fff;
	--color-overlay: rgba(0, 0, 0, .5);

	/* --- フォント --- */
	--font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	/* 明朝体：見出し・セクションタイトル用 */
	--font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
	/* Figma の PCMyungjo 用。有償フォントのため同梱していない。
	   assets/fonts/PCMyungjo.woff2 を置くと functions.php が自動で読み込む。
	   置くまでは次の候補（Noto Serif JP）で表示される。 */
	--font-myungjo: "PCMyungjo", "Apple Myungjo", "Nanum Myeongjo", var(--font-mincho);

	/*
	 * --- カードの文字サイズ ---
	 * 「画像＋明朝体のタイトル＋本文＋リンク」という作りのカードは、
	 * ページをまたいで同じ大きさに揃える。
	 * （結婚物語。をもっと知る／ご成婚者の体験談 など）
	 */
	--card-title-size: 20px;
	--card-text-size: 14px;
	--card-link-size: 14px;   /* 「詳しく見る」などのリンク */

	/* --- ヘッダーの高さ --- */
	--header-utility-h-sp: 30px;
	--header-main-h-sp: 48px;
	--header-h-sp: 78px;               /* 上記2つの合計 */

	--header-utility-h-pc: 36px;
	--header-main-h-pc: 60px;          /* ロゴ・TEL・CTA の行 */
	--header-nav-h-pc: 52px;
	--header-h-pc: 148px;              /* 上記3つの合計 */

	/* --- レイアウト --- */
	/*
	 * コンテンツの幅。
	 * ノートパソコン（幅 1280〜1440px）で見たときに広すぎないよう、
	 * デザイン（Figma・1440px）より少し狭くしている。
	 * ここを変えるとサイト全体の幅が一度に変わる。
	 */
	--content-max: 1120px;        /* 通常のセクション */
	--content-max-wide: 1280px;   /* 横いっぱいに見せるセクション */

	--header-inner-max: var(--content-max-wide);
	--header-pad-sp: 12px;
	--header-pad-pc: 24px;

	/* --- 重なり順 --- */
	--z-header: 100;
	--z-drawer: 90;
	--z-overlay: 80;

	--transition-base: .3s cubic-bezier(.22, .61, .36, 1);

	/* details の開閉を高さアニメーションさせるために必要（対応ブラウザのみ） */
	interpolate-size: allow-keywords;
}

/* ==========================================================================
   Web フォント

   Noto Sans JP（ゴシック）と Noto Serif JP（明朝）は
   functions.php から Google Fonts を読み込んでいる。
   閲覧する人のパソコンに同じフォントが入っていなくても、
   同じ見た目になる。

   PCMyungjo（Figma で使われている明朝体）は有償フォントのため
   同梱していない。ライセンスをお持ちの woff2 ファイルを
   assets/fonts/PCMyungjo.woff2 に置くと、functions.php が
   @font-face を自動で出力する。CSS の編集は不要。
   ========================================================================== */

/* ==========================================================================
   ベース
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

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

button {
	font: inherit;
	color: inherit;
}

.l-container {
	max-width: var(--header-inner-max);
	margin-inline: auto;
	padding: 40px var(--header-pad-sp);
}

/* 固定ヘッダーの高さ分だけ本文を下げる */
.l-main {
	padding-top: var(--header-h-sp);
}

.l-footer {
	border-top: 1px solid var(--color-border);
	padding: 24px var(--header-pad-sp);
	text-align: center;
	font-size: 13px;
	color: var(--color-text-muted);
}

@media (min-width: 840px) {
	.l-main {
		padding-top: var(--header-h-pc);
	}

	.l-container {
		padding-inline: var(--header-pad-pc);
	}
}

/* ==========================================================================
   画像プレースホルダー
   assets/img/ に画像を置くまでの間、同じ寸法のグレーの四角形で代用する。
   （ヘッダー・フッター共通）
   ========================================================================== */
.img-slot--empty {
	display: block;
	width: var(--slot-w, 100%);
	height: var(--slot-h, 40px);
	max-width: 100%;
	background-color: var(--color-slot-bg);
	border-radius: 2px;
}

/* ==========================================================================
   アクセシビリティ用ユーティリティ
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 16px;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: var(--color-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
/* PC/SP 改行切り替え */
.sp {
	display: none;
}

.pc {
	display: inline;
}

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

	.pc {
		display: none;
	}
}