/* 全体 */
body {
    background-image: url("../images/base04.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f7f4ee; /* 画像が読み込まれないときの保険 */

    font-family: 'Noto Serif JP', serif;
    /* 他のスタイルはそのままでOK */
}


/* ヘッダー */
.site-header {
    background-color: #2c2c2c;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    letter-spacing: 0.1em;
}

/* ナビゲーション全体 */
.global-nav {
    background-color: #3b3b3b;
    position: relative;
}

/* ナビゲーションリスト */
.global-nav ul {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* リンク */
.global-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.global-nav a:hover {
    color: #d4b483;
}

/* ハンバーガーボタン */ 
.nav-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 2rem; 
    color: #fff; 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    z-index: 100; 
    cursor: pointer; 
}

/* ヒーロー画像 */
.hero {
    background-image: url("images/hero.jpg"); /* 差し替えOK */
    background-size: cover;
    background-position: center;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    font-size: 2rem;
}



/* コンテンツ */
/* コンテンツ */
.content {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.content {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85); /* ← 白い下地で読みやすく */
    border-radius: 10px; /* 角を少し丸くして柔らかく */
    backdrop-filter: blur(2px); /* 背景を少しぼかして上品に */
}


/* 各セクションの余白を調整して読みやすく */
.section {
    margin-bottom: 60px; /* セクション同士の間隔を広げて「誠実」な余裕を */
}

.section h2 {
    border-left: 4px solid #d4b483;
    padding-left: 15px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}
/* フッター */
.site-footer {
    background-color: #2c2c2c;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin-top: 40px;
    font-size: 0.9rem;
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .nav-toggle {
        display: block;
    }

    .global-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        background-color: #3b3b3b;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        display: none;
    }

    .global-nav ul.active {
        display: flex;
    }
}