body {
    font-family: 'Playfair Display', 'Times New Roman', serif, 'Hiragino Mincho ProN', serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    color: #4a4a4a;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

header {                                        /* ヘッダー */
    background-color: #1a1a2e;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    position: sticky;                           /* 固定 */
    top: 0;
    z-index: 100;
}

.header-container {                 /*ヘッダーの設定*/
    max-width: 1000px;              /*ヘッダーの高さ*/
    margin: 0 auto;                 /*外部余白(配置)の設定*/
    display: flex;                  /*要素を横並びにする手法*/
    justify-content: space-between; /*左右両端の要素と要素数に応じた均等配置*/
    align-items: center;            /*上下を中心揃え*/
    padding: 15px 20px;             /*内部余白(配置)の設定*/
}

.logo {                                     /*ロゴ設定*/
    font-family: 'Great Vibes', cursive;    /*フォント指定*/
    font-size: 28px;                        /*フォントサイズ指定*/
    color: #d4af37;                       /*カラー指定*/
    text-decoration: none;                  /*装飾の解除(リンクの青線をなくす)*/
}

.menu-trigger {             /*メニュー設定*/
    background: none;       /*背景無*/
    border: none;           /*枠線無*/
    color: #d4af37;       /*カラーして*/
    cursor: pointer;        /*カーソルが上に来ると指マークになる*/
    display: flex;          /*横並び*/
    align-items: center;    /*縦方向中心揃え*/
    gap: 10px;              /*間隔指定*/
    z-index: 10000;         /*重なり順序*/
    padding: 10px;          /*クリック領域を広げる*/
}

.menu-text {                    /*メニューの文字設定*/
    font-size: 14px;            /*フォントサイズ*/
    font-weight: bold;          /*文字を強調*/
    letter-spacing: 0.1em;      /*少し文字間隔を空けて読みやすく*/
    text-transform: uppercase;  /*大文字にする*/
}

.menu-icon {                            /*メニューアイコン(ハンバーガーマーク)の設定*/
    position: relative;                 /*この要素を基準とする*/
    width: 24px;                        /*幅*/
    height: 18px;                       /*高さ*/
    display: flex;                      /*横並び*/
    flex-direction: column;             /*flexを縦に変換*/
    justify-content: space-between;     /*均等に配置*/
}

.menu-icon span {                   /*menu-iconクラス内のspan設定*/
    display: block;                 /*箱化*/
    width: 100%;                    /*幅*/
    height: 2px;                    /*高さ*/
    background-color: #d4af37;    /*背景色*/
    transition: all 0.3s ease;      /*すべてのアニメーションを0.3秒でease(遅早遅)設定*/
    transform-origin: center;       /*アニメーションの変わる起点*/
}

/* バツ印への変形 〇かつ〇でmenu-iconクラスの1番目のspan*/
.menu-trigger.is-open .menu-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-trigger.is-open .menu-icon span:nth-child(2) { opacity: 0; }
.menu-trigger.is-open .menu-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- サイドメニュー --- */
#js-nav-menu {                                      /*ナビメニュー*/
    position: fixed;                                /*固定化*/
    top: 0;                                         
    right: -300px;                                  /*画面外に配置*/
    width: 260px;                                   
    height: 100vh;                                  /*画面の高さの100%*/
    background-color: rgba(26, 26, 46, 0.98);     
    transition: right 0.4s ease;                    /*rightが変わったときアニメーション*/
    z-index: 9999;                                  /*重なり順*/
    padding: 80px 20px;                             /*クリック領域拡大*/
}

#js-nav-menu.active {       /*activeになったとき*/
    right: 0 !important;    /*rightを0にする*/
}

#js-nav-menu ul {       /*リスト設定*/
    list-style: none;   /*自動で付く「・」を削除*/
    padding: 0;         /*左側の余白をなくす*/
}

#js-nav-menu ul li {                                        /*タグ設定*/
    margin: 20px 0;                                         /*上下に余白*/
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);     /*項目の下に線*/
}

#js-nav-menu ul li a {      /*リンク設定*/
    text-decoration: none;  /*デフォルト設定を削除*/
    color: #d4af37;       
    font-size: 18px;       
    display: block;         /*ブロックがリンクになる*/
}

#js-nav-menu ul li a::after {   /* ナビゲーションメニュー内のリンクすべてに「＞」を付ける */
    content: ">";               /* 表示する文字 */
    float: right;               /* 右寄せにする */
    color: #d4af37;           /* 矢印の色（お好みで調整してください） */
    font-size: 0.9em;           /* 少しだけ文字より小さくするとバランスが良いです */
    margin-right: 10px;         /* メニューの右端から少し離す */
}

/* パララックス背景 */
.parallax-bg {
    position: fixed;                                /*背景固定*/
    top: 0;                                         
    left: 0;                                        
    width: 100%;                                    
    height: 180vh;                                  /*180%大きくする*/
    background-image: url('img/background.png');    
    background-size: cover;                         
    background-position: center top;                
    background-repeat: no-repeat;                   
    filter: blur(8px);                              /*ぼかし*/
    transform: translateY(0) scale(1.05);           /*105%拡大*/
    z-index: -2;                                    /*最下層*/
    will-change: transform;                         
}

.scroll-top {                       /*TOPの表示設定*/
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background-color: #d4af37;    /* ゴールド */
    color: #fff;
    display: flex;
    flex-direction: column;         /* 縦並びにする */
    justify-content: center;
    align-items: center;
    border-radius: 50%;             /* 丸みを少し抑えるとおしゃれです */
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    font-size: 10px;                /* TOPの文字サイズ */
    font-weight: bold;
    text-transform: uppercase;
}   

.scroll-top::before {                   /* 上向きの矢印（＜を90度回転させた形） */
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);          /* 90度回転させて上向きに */
    margin-bottom: 4px;                 /* TOPの文字との隙間 */
}

.scroll-top.is-visible {    /*TOPの表示開始設定*/
    opacity: 1;
    visibility: visible;
}

footer {                            /*フッター*/
    background-color: #1a1a2e;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    border-top: 1px solid #333;
    margin-top: 50px;
}

main {                  /*main設定*/
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    min-height: 60vh;
}

.hero {
    background: linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)), url('img/background.png');
    background-size: cover;
    padding: 30px 20px 30px 20px;
    text-align: center;
    border-radius: 8px;
    margin: 10px auto 40px auto;
    max-width: 900px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-sizing: border-box;
}

.card {
    background: url('https://www.transparenttextures.com/patterns/clean-gray-paper.png'), #ffffff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    margin-bottom: 50px;
}