/* ========== 共通設定 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-brown: #2C1505;
    --mid-brown: #4A2208;
    --side-brown: #5A2E0A;
    --gold: #E8C060;
    --gold-mid: #D4A840;
    --gold-dim: #C8A040;
    --gold-line: #B8922A;
    --bg-page: #F5E8C8;
}

body {
    background-color: var(--bg-page);
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}

/* ========== HEADER ========== */
header {
    width: 100%;
    background-color: var(--dark-brown);
    position: relative;
    overflow: hidden;
    border-bottom: 5px solid var(--gold-line);
}

/* 木目ライン */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 79px,
            rgba(61, 32, 8, 0.45) 79px,
            rgba(61, 32, 8, 0.45) 80px);
    pointer-events: none;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px; /* 左右余白を調整 */
    min-height: 160px;
}

/* 両サイド指板装飾 */
.header-inner::before,
.header-inner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    background-color: var(--side-brown);
    background-image:
        repeating-linear-gradient(180deg,
            transparent,
            transparent 31px,
            rgba(58, 26, 4, 0.7) 31px,
            rgba(58, 26, 4, 0.7) 32px),
        repeating-linear-gradient(90deg,
            transparent 7px,
            rgba(184, 146, 42, 0.6) 7px,
            rgba(184, 146, 42, 0.6) 8px,
            transparent 8px,
            transparent 15px,
            rgba(184, 146, 42, 0.6) 15px,
            rgba(184, 146, 42, 0.6) 16px,
            transparent 16px,
            transparent 23px,
            rgba(184, 146, 42, 0.7) 23px,
            rgba(184, 146, 42, 0.7) 24px,
            transparent 24px,
            transparent 31px,
            rgba(184, 146, 42, 0.8) 31px,
            rgba(184, 146, 42, 0.8) 32px);
}

.header-inner::before { left: 0; }
.header-inner::after { right: 0; }

/* サウンドホール装飾 */
.soundhole {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 74, 16, 0.4);
    pointer-events: none;
}

.soundhole::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 0.7px solid rgba(122, 74, 16, 0.3);
}

.soundhole::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: rgba(26, 10, 2, 0.4);
}

.soundhole-left { left: 90px; }
.soundhole-right { right: 90px; }

/* タイトル */
.header-title {
    text-align: center;
    position: relative;
    z-index: 10; /* 装飾より上に配置 */
}

.header-title::before,
.header-title::after {
    content: '';
    display: block;
    height: 0.6px;
    background: rgba(184, 146, 42, 0.5);
    margin-bottom: 14px;
}

.header-title::after {
    margin-bottom: 0;
    margin-top: 14px;
}

.header-title h1 {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Georgia', serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 10px;
    color: var(--gold);
    line-height: 1.2;
}

.header-title p {
    font-family: 'Georgia', serif;
    font-size: 18px;
    letter-spacing: 4px;
    color: var(--gold-dim);
    opacity: 0.85;
    margin-top: 10px;
}

/* ========== NAVBAR ========== */
nav {
    background-color: var(--mid-brown);
    border-bottom: 0.6px solid rgba(184, 146, 42, 0.5);
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* スマホで折り返しを許可 */
    align-items: stretch;
}

nav ul li {
    flex: 1;
    min-width: 120px; /* スマホで極端に狭くなるのを防止 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 44px; /* タップしやすい高さ */
}

nav ul li+li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 0.5px;
    background: rgba(184, 146, 42, 0.4);
}

nav ul li a {
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--gold-mid);
    opacity: 0.95;
    transition: all 0.2s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul li a:hover {
    opacity: 1;
    color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
}

/* ========== RESPONSIVE ========== */

/* タブレット・スマホサイズ調整 */
@media screen and (max-width: 900px) {
    .soundhole {
        display: none; /* 文字と被るためサウンドホールを隠す */
    }
}

@media screen and (max-width: 600px) {
    .header-inner {
        padding: 40px 15px;
    }

    /* サイド指板を少し細く */
    .header-inner::before,
    .header-inner::after {
        width: 30px;
    }

    .header-title h1 {
        font-size: 20px;    /* 文字を小さく */
        letter-spacing: 4px; /* 文字間隔を調整 */
    }

    .header-title p {
        font-size: 10px;
        letter-spacing: 2px;
    }

    nav ul {
        flex-wrap: nowrap; /* 折り返しを禁止して1列にする */
    }

    nav ul li {
        flex: 1;          /* 5等分する */
        min-width: 0;     /* 120pxの制限を解除 */
        border-bottom: none; /* 下線を消す */
    }
    
    nav ul li a {
        font-size: 10px;  /* 文字を少し小さく */
        letter-spacing: 0; /* 文字間隔を詰めて収める */
        padding: 0 2px;
        white-space: nowrap; /* 文字の途中での改行を禁止 */
    }

    /* 境界線の調整（すべての項目の左側に線を引く） */
    nav ul li + li::before {
        display: block; 
    }
}

/* サンプル（ヒント） */
.page-hint {
    text-align: center;
    padding: 32px;
    font-family: 'Georgia', serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(139, 96, 32, 0.5);
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 50px; 
}