@charset "UTF-8";

/*!
 * MUNI KYOTO - Base Styles
 * 役割：CSS変数・リセット・タイポグラフィ・基本要素
 * 依存：reset.css、google-font-poppins
 *
 * @package MuniKyoto
 */

/* 依存ファイルは functions.php の wp_enqueue_style() で管理する。
   @import は使用しない。 */

/* ==================================================
   CSS 変数定義
================================================== */

:root {
	/* カラー */
	--color-text-sub: #fff;                            /* ダーク背景上のテキスト用純白（コントラスト確保） */
	--color-text-main: #333;
	--color-subtitle: #D4BFAF;
	--color-accent: #756B66;
	--color-accent-hover: #5E5652;
	--color-accent-glow: rgb(102 93 82 / .2);          /* フォーカスリング用 */
	--color-background: #F2F2F2;
	--color-bg-emphasis: #F8F6F2;
	--color-bg-overlay: rgb(0 0 0 / .8);
	--color-link: #2A6F97;
	--color-shadow: rgb(0 0 0 / .3);                   /* モーダル・強調UI */
	--color-shadow-medium: rgb(0 0 0 / .15);           /* カード・ドロップダウン */
	--color-shadow-subtle: rgb(0 0 0 / .05);           /* ヘッダー・軽微な浮き上がり */
	--color-card: #FAF6F2;
	--color-border: #E0E0E0;
	--color-success: #6CAE7E;
	--color-error: #D9534F;
	--color-white: #FAFBF9;                            /* 広い背景領域用オフホワイト（眩しさ抑制） */
	--color-header-bg: rgb(255 255 255 / .9);          /* ヘッダー背景：半透明白（blur効果と併用） */
	--color-footer-border: rgb(255 255 255 / .2);      /* フッター区切り線 */
	--color-footer-text-muted: rgb(255 255 255 / .7);  /* フッターコピーライト文字 */
	--color-text-shadow: rgb(0 0 0 / .7);              /* FV キャッチコピー用テキストシャドウ */

	/* コンテナ幅 */
	--container-max-width: 110rem;

	/* 余白 */
	--spacing-unit-small: 0.8rem;   /* ボタン間・細かいUI・行間の微調整 */
	--spacing-unit-medium: 1.6rem;  /* 段落間・カード内の基本パディング */
	--spacing-unit-large: 2.4rem;   /* 文字ブロックの上下など */
	--spacing-unit-xlarge: 4rem;    /* 大見出し周り・写真とテキストの間 */
	--section-padding-y: 6rem;      /* セクション全体の上下パディング */
	--section-margin-bottom: 12rem; /* セクション同士の間隔 */

	/* フォント */
	--font-base: "游明朝", "Yu Mincho", serif;  /* 本文・見出し共通 */
	--font-menu: "Poppins ExtraLight", sans-serif;

	/* フォントサイズ */
	--font-size-base: 1.6rem;
	--font-size-small: 1.4rem;
	--font-size-xsmall: 1.2rem;
	--font-size-large: 1.8rem;
	--font-size-xl: 2.4rem;

	/* トランジション */
	--transition-speed-fast: 0.2s;
	--transition-speed-medium: 0.3s;
	--transition-speed-slow: 0.5s;
	--transition-timing-ease: ease;
	--transition-timing-ease-in-out: ease-in-out;

	/* z-index */
	--z-header: 800;
	--z-header-sp: 1000;
	--z-sp-logo: 10001;
	--z-lang-switcher: 900;
	--z-lang-toggle: 910;
	--z-lang-dropdown: 920;
	--z-reserve-dropdown: 930;
	--z-modal: 9999;
	--z-sp-footer: 99999;
	--z-sp-nav: 100000;
	--z-hamburger-open: 100001; /* 開いた状態のハンバーガーを sp-nav より前面に出す */
	--z-reserve-menu: 100001;  /* SP 予約メニュー（sp-nav と同レベル） */

	/* 行間 */
	--line-height-base: 1.8;
	--line-height-tight: 1.3;

	/* 角丸 */
	--border-radius-sm: 0.4rem;
	--border-radius-md: 0.8rem;
	--border-radius-lg: 1.6rem;

	/* ボーダー */
	--border-width: 1px;
}

/* ==================================================
   ボックスモデル・基本要素
================================================== */

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

/* iOS のタップ時ハイライト（灰色フィルター）を全要素で無効化 */
* {
	-webkit-tap-highlight-color: transparent !important;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	-webkit-touch-callout: none;
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-base);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	box-sizing: border-box; /* reset.css が max-width / height / display を担当 */
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
}

/* ==================================================
   タイポグラフィ
================================================== */

h1 {
	font-size: var(--font-size-xl);
}

h2 {
	font-size: 2.0rem;
}

h3 {
	font-size: var(--font-size-large);
}

h4 {
	font-size: var(--font-size-base);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-base);
	font-weight: bold;
	line-height: 1.4;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Gutenberg の色指定を優先させる */
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-heading h5,
.wp-block-heading h6 {
	color: inherit !important;
}

.wp-block-heading.has-accent-color {
	color: var(--color-accent) !important;
}

td h4 {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

p {
	font-size: var(--font-size-base);
	margin-bottom: var(--spacing-unit-small);
}

strong {
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.03em;
}

/* ==================================================
   モバイル対応（768px 以下）
================================================== */

@media (max-width: 768px) {
	:root {
		--spacing-unit-medium: 1.2rem;
		--spacing-unit-large: 1.6rem;
		--spacing-unit-xlarge: 2.4rem;
		--section-margin-bottom: 6rem;
		--font-size-base: 1.4rem;
		--font-size-small: 1.3rem;
		--font-size-xsmall: 1.2rem;
		--font-size-large: 1.6rem;
		--font-size-xl: 2.4rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.5;
		margin-top: 0.7em;
		margin-bottom: 0.7em;
	}

	h1 {
		font-size: var(--font-size-xl);
	}

	h2 {
		font-size: 1.8rem;
	}

	h3 {
		font-size: 1.6rem;
	}

	p {
		line-height: 1.8;
		margin-bottom: var(--spacing-unit-medium);
	}
}