/* ================================================
   CSS Variables（カスタムプロパティ）
================================================ */
:root {
    /* ========== カラーパレット ========== */
    /* 墨 */
    --color-theme-dark: #323E50;
    /* 白練 */
    --color-theme-light: #F3F3F2;

    /* 紺青 */
    --color-primary: #192F60;
    /* 灰青 */
    --color-secondary: #C0C6C9;
    /* 苔色 */
    --color-success: #69821B;
    /* 深緋 */
    --color-danger: #C9171E;
    /* 金色 */
    --color-warning: #E6B422;
    /* 勿忘草色 */
    --color-info: #89C3EB;
    /* 白練 */
    --color-light: #F3F3F2;
    /* 鉄黒 */
    --color-dark: #232323;

    /* ========== ボーダーカラー ========== */
    --color-border: #C0C6C9;

    /* 水色 */
    --bg-primary: #D1EBEF;
    /* 月白 */
    --bg-secondary: #EAF4FC;
    /* 白緑 */
    --bg-success: #D6E9CA;
    /* 虹色 */
    --bg-danger: #f6bfbc;
    /* 女郎花 */
    --bg-warning: #f2f2b0;
    /* 白藍 */
    --bg-info: #c1e4e9;
    /* 白練 */
    --bg-light: #F3F3F2;
    /* 灰青 */
    --bg-dark: #C0C6C9;
    /* 白 */
    --bg-white: #FFFFFF;


    /* ========== 和風カラー ========== */
    /* 和紙 */
    --color-washi: #fffffc;
    /* 墨 */
    --color-sumi: #232323;
    /* 紅 */
    --color-kurenai: #b20024;
    /* 藍 */
    --color-ai: #082752;
    /* 黄土 */
    --color-oudo: #c39043;
    /* 黄檗色 */
    --color-kihada: #fef263;
    /* 天色 */
    --color-ama: #0083c6;
    /* 朽葉色（アクセント） */
    --color-kuchiba: #917347;
    /* 白茶（薄いアクセント） */
    --color-shiracha: #e8dcd0;

    /* ========== 派生カラー（和風ベース） ========== */
    /* アクセント：黄土ベース */
    --color-accent: var(--color-oudo);
    --color-accent-hover: var(--color-kuchiba);
    --color-accent-light: var(--color-shiracha);
    /* 背景系 */
    --color-bg: var(--color-washi);
    --color-bg-light: var(--bg-light);
    --color-bg-dark: var(--color-secondary);
    /* その他 */
    --color-white: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.15);
    --color-focus-ring: rgba(195, 144, 67, 0.2);
    --color-primary-dark: var(--color-ai);

    /* ========== タイポグラフィ ========== */
    --font-family-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    --font-family-head-title: "Hina Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --font-family-mincho: "Hina Mincho", "Noto Serif JP", serif;
    --font-family-icon: "Font Awesome 6 Free";


    --color-text: var(--color-theme-dark);
    --color-text-light: #666;
    --color-text-muted: #999;
    --color-text-inverse: var(--color-light);
    --color-text-link: #1E50A2;


    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    --h1: 3rem;
    --h2: 2.5rem;
    --h3: 2.0rem;
    --h4: 1.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    --en-scale: 0.9;
    --en-letter-spacing: 0.03em;
    --en-line-height: 1.25;

    /* ========== スペーシング ========== */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* ========== レイアウト ========== */
    --container-max: 1240px;
    --header-height: 60px;
    --sidebar-width: 280px;

    /* ========== ボーダー・角丸 ========== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;

    /* ========== シャドウ ========== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* ========== トランジション ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ========== Z-index ========== */
    --z-dropdown: 100;
    --z-header: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-mobile-menu: 2000;

    /* ========== ナビゲーション ========== */
    --nav-bg: var(--color-theme-dark);
    --nav-bg-hover: var(--color-sumi);
    --nav-text: var(--color-white);
    --nav-padding: 0.6rem 1.0rem;
    --megamenu-border-width: 3px;
    --mobile-menu-width: 80%;
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --megamenu-bg: rgba(8, 39, 82, 0.85);
    --megamenu-link-bg: var(--color-theme-dark);
    --megamenu-bg-hover: rgba(8, 39, 82, 0.95);


    /* ========== ブレイクポイント ========== 
     ※メディアクエリでは変数使用不可、参照用
     xs: 小型スマホ（1列表示）
     md: モバイル/タブレット境界、ハンバーガー切替
     lg: タブレット、ナビ文字サイズ調整、グリッド3列
     xl: PC、ナビpadding調整
  ========================================== */
    --breakpoint-xs: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1280px;
}


/* ================================================
Parts
================================================ */
/* ボタン類 */
.btn {
    border-radius: var(--border-radius-sm);
    padding: var(--space-xs) var(--space-md);
    display: block;
    text-align: center;
}

.btn:hover {
    text-decoration: none;
    filter: brightness(1.8);
    transition: var(--transition-base);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-text);
}

.btn-info {
    background: var(--color-info);
    color: var(--color-text);
}

.btn-light {
    background: var(--color-light);
    color: var(--color-text);
}

.btn-dark {
    background: var(--color-dark);
    color: var(--color-text-inverse);
}

.btn-primary-outline {
    border: 2px solid var(--color-primary);
    color: var(--color-text);
}

.btn-secondary-outline {
    border: 2px solid var(--color-secondary);
    color: var(--color-text);
}

.btn-success-outline {
    border: 2px solid var(--color-success);
    color: var(--color-text);
}

.btn-danger-outline {
    border: 2px solid var(--color-danger);
    color: var(--color-text);
}

.btn-warning-outline {
    border: 2px solid var(--color-warning);
    color: var(--color-text);
}

.btn-info-outline {
    border: 2px solid var(--color-info);
    color: var(--color-text);
}

.btn-light-outline {
    border: 2px solid var(--color-light);
    color: var(--color-text);
}

.btn-dark-outline {
    border: 2px solid var(--color-dark);
    color: var(--color-text);
}

/* ================================================
   Modern CSS Reset
================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-theme-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.en {
    font-size: calc(1em * var(--en-scale));
    letter-spacing: var(--en-letter-spacing);
    line-height: var(--en-line-height);
}

/* リンク */
a {
    color: var(--color-text-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* リスト */
ul, ol {
    list-style: none;
}

/* 画像・メディア */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* フォーム要素 */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

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

/* テーブル */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* その他 */
blockquote, q {
    quotes: none;
}

address {
    font-style: normal;
}

/* フォーカス時のアウトライン（アクセシビリティ） */
:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* スクロールバー（Webkit系） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}

/* ================================================
   Layout
================================================ */
main {
    flex: 1;
    padding: 2rem 0;
}

footer.site-footer {
    background-color: var(--color-theme-dark);
    color: var(--nav-text);
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
}

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

/* ================================================
   Header
================================================ */
.site-header {
    background-color: var(--color-theme-dark);
    background-image: url('../images/header_bg_motif.png');
    background-repeat: repeat;
    background-blend-mode: soft-light;
    padding: var(--space-md) var(--space-xl) 0;
    color: var(--nav-text);
    position: relative;
    /* メガメニューの基準点 */
    z-index: var(--z-header);
}

.site-header h1 {
    font-family: var(--font-family-head-title);
    text-align: center;
    font-size: var(--font-size-2xl);
}
.site-header h1 .en {
    display: block;
    font-size: 60%;
    margin-top: var(--space-xs);
}

@media screen and (max-width: 768px) {
    .site-header {
        padding: var(--space-md);
    }
}

.site-title {
    color: var(--nav-text);
    font-size: var(--font-size-xl);
    margin: 0;
}

/* ================================================
   Footer
================================================ */
.copyright {
    font-size: var(--font-size-sm);
}
.copyright .en {
    display: block;
    font-size: 80%;
    margin-top: var(--space-xs);
}