:root {
            --bg-color: #fdfaf3;
            --sidebar-bg: #f0e1bd;
            --primary-color: #7d6b5d;
            --text-main: #555555;
            --card-bg: #f5f5f5;
            --card-hover-bg: #ffffff;
            --shadow: 0 8px 18px rgba(90, 70, 50, 0.15);
            --accent-color: #d4a373;
        }

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fdfaf3; /* ← ここで確実に背景色を指定 */
    color: var(--text-main);
    display: flex;
    min-height: 100vh;
    overflow-y: visible; /* 横揺れ防止 */
}

/* タイトル全体の基本設定 */
h1 {
    font-family: 'Patrick Hand', cursive;
    font-size: 2.5rem;
    color: #5c4f45; /* 基本は墨色 */
    text-align: center;
    letter-spacing: 0.12em;
    /* ★ここを追加！ */
    width: 100%;       /* 横幅いっぱいに広がる許可を出す */
    max-width: none;    /* 変な制限を解除 */
    display: block;     /* 独立したブロックにする */
    margin-left: auto;
    margin-right: auto;
}

/* 「P」だけを茜色にする魔法 */
.accent-p {
    color: #a32127; /* 茜色（日本の伝統的な赤） */
    font-weight: bold; /* 少しだけ強調してもオシャレ */
    /* もし落款（ハンコ）っぽくするなら、ほんの少し傾けても面白いです */
    display: inline-block;
    transform: rotate(-10deg); 
    margin-right: -2px; /* 傾けた分、隙間を微調整 */
}

/* --- サイドバー --- */
#sidebar {
    width: 260px; background-color: var(--sidebar-bg);
    padding: 25px 15px; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.05); z-index: 1000;
}
#sidebar h1 { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 30px; text-align: center; }
.nav-group { margin-bottom: 20px; }
.nav-label { font-size: 0.75rem; font-weight: bold; color: rgba(125,107,93,0.6); margin-bottom: 10px; display: block; border-bottom: 1px solid rgba(0,0,0,0.05); }

.nav-item-parent {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    
    /* --- ここを修正 --- */
    padding: 10px 0; /* 上下は10px、左右（左端）は0にする */
    /* ------------------ */
    
    border: none; 
    background: none;
    text-align: left; 
    cursor: pointer; 
    border-radius: 8px;

    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.3px;
    color: var(--primary-color); 
    transition: 0.2s;
}

.nav-item-parent span {
    display: flex;
    align-items: center;
    overflow: hidden;         /* テキストが長い場合に備えて */
    text-overflow: ellipsis;  /* もし限界まで狭まったら「...」にする */
    flex: 1;
}

.nav-item-parent:hover { background: rgba(255,255,255,0.4); }
.sub-menu {
    /* 1. 「ぬるっ」と動かす魔法の呪文 */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 2. 最初は高さを0にして隠す（display: noneはダメ！） */
    max-height: 0; 
    /* 3. はみ出た中身を隠す（絶対に必要です！） */
    overflow: hidden; 
}
.sub-menu.open {
    /* 4. 開いた時の高さを「十分に大きな数値」にする */
    /* アイテムの数に合わせて自動で止まります */
    max-height: 1000px; 
}
.nav-item-sub {
    display: block; width: 100%; padding: 6px 25px; border: none; background: none;
    text-align: left; cursor: pointer; border-radius: 6px; font-size: 0.8rem;
    color: var(--text-main); opacity: 0.8;
}
.nav-item-sub:hover { opacity: 1; background: rgba(255,255,255,0.6); }

/* --- メインコンテンツ --- */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fdfaf3; /* 親と同じ色をここにも念のため敷く */
    min-height: 100vh;
    position: relative;
}

/* --- ホーム画面 --- */
#home-view { max-width: 900px; margin: 40px auto; text-align: center; padding: 0 20px; }
.hero-title { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 25px; }
.search-box { max-width: 600px; margin: 0 auto 40px; }
.search-box input {
    width: 100%; padding: 13px 19px; border-radius: 35px;
    border: 2px solid var(--sidebar-bg); font-size: 1rem; outline: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.home-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
/* Home画面のカテゴリーカード全体の設定 */
.cat-card {
    display: flex; background: white; padding: 25px 15px; border-radius: 15px; flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09); cursor: pointer; transition: 0.3s; text-align: center;
    gap: 3px;
    width: 150px;
    flex: 0 0 auto;
    margin: 1px ;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* ★塗りつぶしアイコンの指定 */
.cat-card .material-symbols-rounded {
  font-variation-settings:
    'FILL' 1,   /* ★1 にすることで完全に塗りつぶされます */
    'wght' 330, /* 線の太さは標準で */
    'GRAD' 0,
    'opsz' 24;
  
  font-size: 45px;  /* カード用なので少し大きめに */
  color:var(--primary-color);
  transition: all 0.3s ease; /* アイコンの動きもぬるっと */
}
        
/* カテゴリー名のスタイル */
.cat-card span:last-child {
    font-size: 14px;
    color: #3a3531;
}
        
/* ★マウスを乗せた時（ホバー）の演出 */
.cat-card:hover .material-symbols-rounded {
    color: #8c6e52;
    transform: scale(1.15) translateY(-3px); /* ぬるっと拡大して少し浮く */
}

/* --- カタログ表示画面 --- */
#catalog-view { display: none; }
.sticky-header {
    position: sticky; top: 0; background: var(--bg-color); z-index: 500;
    padding: 20px 40px 10px; border-bottom: 1px solid var(--sidebar-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.back-to-home { cursor: pointer; color: var(--primary-color); font-weight: bold; margin-bottom: 10px; display: inline-block; font-size: 0.9rem; }
.tag-container { overflow-x: auto; white-space: nowrap; padding-bottom: 10px; scrollbar-width: none; }
.tag-container::-webkit-scrollbar { display: none; } 
.tag-area { display: inline-flex; gap: 8px;  margin-top: -15px ;}
.tag-chip {
    padding: 8px 18px; background: white; border-radius: 20px;
    font-size: 0.8rem; cursor: pointer; border: 1px solid var(--sidebar-bg); 
    font-weight: bold; transition: 0.2s; color: var(--primary-color);
}
.tag-chip.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

.content-body { padding: 20px 40px 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.cheki-card { background-color: var(--card-bg); padding: 12px 12px 18px; border-radius: 10px; box-shadow: var(--shadow); transition: 0.3s; }
.cheki-card:hover { transform: translateY(-5px); background-color: white; }
.photo-area { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; margin-bottom: 8px; cursor: pointer; }
.slide-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; opacity: 0; transition: 0.3s; }
.slide-img.active { opacity: 1; }
.slider-controls { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.slide-btn { background: rgba(0,0,0,0.05); border: none; border-radius: 4px; font-size: 9px; cursor: pointer; padding: 2px 6px; }

.item-name {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center; /* 名前は中央寄せ */
    margin: 8px 0 6px 0; /* 上下に少し余白 */
    color: var(--primary-color);
    line-height: 1.2;
    min-height: 1.8em; /* 2行分確保してアイコンの位置を揃える */
    display: flex;
    align-items: center;
    justify-content: center;
}

.patch-divider {
    grid-column: 1 / -1; /* 横いっぱいに広げる */
    width: 100%;
    margin: 40px 0 20px;
    padding: 10px 15px;
    background: rgba(125, 107, 93, 0.1);
    border-left: 5px solid var(--primary-color);
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
    display: block; /* 確実に表示 */
}

/* モーダル */
.modal { display: none; position: fixed; z-index: 2000; left:0; top:0; width:100%; height:100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.modal.visible { display: flex; }

#modalTitle {
    font-size: 1.4rem;  /* 「ちっちゃすぎ」にならず、かつ収まりの良いサイズ */
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #4a4a4a;     /* 落ち着いた色 */
    
    /* 長い名前でも枠を突き抜けないための設定 */
    word-break: break-all;
    overflow-wrap: break-word;
}

.book-layout {
    position: relative;
    display: flex;
    flex-direction: row; /* 横並びを強制 */
    width: 95vw;
    max-width: 1000px;
    height: 80vh;
    background: #fdfaf3;
    border-radius: 12px;
    overflow: hidden;
}

/* --- 前後ボタンの基本設定 --- */
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15); /* 普段は極めて薄く */
    color: rgba(255, 255, 255, 0.5);       /* 矢印も控えめに */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 滑らかな動き */
}

/* --- マウスホバー時の設定（目に優しく、でも分かりやすく） --- */
.modal-nav:hover {
    background: rgba(255, 255, 255, 0.8);  /* ふわっと白く浮き上がる */
    color: #6670b0;                        /* アイコンにメイン色を灯す */
    transform: translateY(-50%) scale(1.1); /* わずかに大きくして「押せる感」を出す */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* --- デフォルト（広い画面）の設定：モーダルのすぐ外側 --- */
.nav-prev { left: -80px; }
.nav-next { right: -80px; }
        
/* --- 広い画面（1201px以上）：モーダルの外側に配置 --- */
@media (min-width: 1201px) {
    .nav-prev { 
        left: calc(50% - 500px - 80px); /* 500px(モーダル半分) + 80px(余白) */
    }
    .nav-next { 
        right: calc(50% - 500px - 80px); 
    }
}

/* --- 狭い画面（1200px以下）：モーダルの内側へシュッと入る --- */
@media (max-width: 1200px) {
    .nav-prev { 
        left: 20px; 
    }
    .nav-next { 
        right: 20px; 
    }
    .modal-nav {
        /* 内側に入った時は、背景が白っぽいので少しだけ視認性を上げる */
        background: rgba(255, 255, 255, 0.4);
        color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 15px 4px 28px;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    position: relative;
    white-space: nowrap;

    -webkit-mask-image: url('ui/tag-bg.png');
    mask-image: url('ui/tag-bg.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    background-color: #7d6b5d; 
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15));
}

/* 1. メインカテゴリータグ（青紫） */
#modalMainCategory {
    background-color: #6670b0 !important;
}

/* 2. サブカテゴリータグ（赤） */
#modalSubCategory {
    background-color: #7f3030 !important;
}

/* 右側の画像エリア全体 */
.book-right {
    flex: 1; 
    min-width: 0;
    background: #fdfaf3;
    display: flex; 
    flex-direction: column;
    /* --- 【ここが肝】1枚の時は上下左右の「ど真ん中」にする --- */
    align-items: center; 
    justify-content: center; 
    padding: 20px;
    border-right: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.book-left {
    flex: 1;
    min-width: 0;
    padding: 40px 30px;
    overflow-y: auto;
    border-left: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* --- モーダル内の画像エリア（基本：1枚のとき） --- */
#modalPhoto {
    width: 100%; 
    height: 400px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    /* 1枚の時は余計なマージンを消して完全中央を維持 */
    margin: 0; 
}

#mainModalImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* アスペクト比を維持して枠内に収める */
    border-radius: 8px;
}

/* --- 複数枚ある時（JSでクラスが付与された時）の切り替え --- */
.has-multiple-thumbs .book-right {
    /* 複数枚なら「上詰め」に切り替えて、下にサムネイルの場所を空ける */
    justify-content: flex-start; 
    padding-top: 50px; /* 少しだけ上からの位置を調整 */
}

.has-multiple-thumbs #modalPhoto {
    /* 複数枚の時は画像とサムネイルの間に隙間を作る */
    margin-bottom: 20px;
}

/* メイン画像自体の設定（枠の中にどう収まるか） */
#modalPhoto img { 
    max-width: 100%;  /* 枠の幅いっぱいに広がる */
    max-height: 100%; /* 枠の高さいっぱいに広がる */
    object-fit: contain; /* アスペクト比を崩さず、欠けないように収める */
    border-radius: 8px;  /* 以前の4pxより少し丸くすると、今のデザインに馴染みます */
    transition: transform 0.3s ease; /* 切り替え時にふんわりさせる */
}

/* --- 新しいアイコン置き場（カード右下に配置） --- */
.card-flags {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 0px;                 /* アイコン同士をキュッと詰める */
    margin-top: auto;         /* 名前の長さに関わらず下の方に配置 */
    padding-right: 0px;       /* 右に少し余裕をもたせる */
    padding-top: 1px;      /* 下に少し余裕をもたせる */
}

/* --- ひし形の設定（サイズ・色・形は前回のまま） --- */
/* ひし形土台の設定（角丸を追加） */
.flag-diamond {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg); /* ここで◆にする */
    
    /* ★ここを追加：角を丸くする（2px〜3pxくらいが可愛いです） */
    border-radius: 2px; /* 2pxだとほんのり、3pxだとしっかり丸くなります */
    
    /* 以前の設定はそのまま */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.5);
}

/* ダイヤモンド型の枠の中の画像を調整 */
.flag-diamond img {
    width: 17px;      /* アイコンのサイズ（枠に合わせて調整） */
    height: 17px;
    object-fit: contain;
    /* 親要素が45度傾いているので、画像だけ-45度戻して「まっすぐ」に見せる */
    transform: rotate(-45deg);
    
    /* 位置の微調整用（画像がズレて見える場合に使用） */
    position: relative;
    top: -1px; 
    left: -1px;
}

/* 1. 染色可能 (水色〜濃い水色) ← ★色を変更しました */
.flag-dye {background: linear-gradient(135deg, #a0f0ff, #0099cc); /* 爽やかな水色のグラデーション */}
.flag-dye img {width: 17px; height: 17px;}
.flag-market {background: linear-gradient(135deg, #a2d149, #2e7d32);}
.flag-dye img {width: 17px; height: 17px;}
.flag-craft {background: linear-gradient(135deg, #b091d2, #484e7c);}
.flag-craft img {width: 25px; height: 25px; top: -1px; left: -2px;}
.flag-drop {background: linear-gradient(135deg, #7d0f0f, #4e0114); width: 18px; height: 18px;}
.flag-drop img {width: 25px; height: 25px; top: -1px; left: -1px;}    
.flag-pvp {background: linear-gradient(135deg, #a52a2a, #800020); width: 18px; height: 18px;}
.flag-pvp img {top: -1px;  left: 0px;}
.flag-retainer {background: linear-gradient(135deg, #98a3ae, #36454f);}   
.flag-retainer img {width: 23px; height: 23px;}   
.flag-shop {background: linear-gradient(135deg, #ffcb4b, #c37547);}
.flag-shop img {width: 23px; height: 23px;}   
.flag-voyage {background: linear-gradient(135deg, #1e40af, #030712);}


/* カード自体の設定に position: relative を追加（右下配置の基準にするため） */
/* --- チェキカード自体の設定（下側のパディングを少し広げる） --- */
.cheki-card {
    position: relative;
    background-color: var(--card-bg);
    padding: 12px 12px 18px; /* 下側のパディングを18pxから24pxに広げて余白を作る */
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: 0.3s;
    display: flex; /* ★追加：縦並びを制御 */
    flex-direction: column; /* ★追加：縦並びを制御 */
}

 /* カード本体（既存の .cheki-card）に position: relative; を追加 */
.cheki-card {
    position: relative; /* バッジの基準点になります */
    background-color: var(--card-bg);
    padding: 12px 12px 18px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: 0.3s;
}

.badge-new {
    position: absolute;
    top: -10px;  /* 少しはみ出させる */
    left: -10px; /* 少しはみ出させる */
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #6f1616, #b22d2d); /* 深い茜色 ～ 鮮やかな茜色 */
    color: white; /* 刻印の文字色 */
    font-family: 'Times New Roman', serif; /* クラシックなフォント */
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 基本は丸 */
    
    /* 封蝋の「とろっと溶けた」不規則な形を表現 */
    box-shadow: 
        3px 3px 5px rgba(0, 0, 0, 0.47), /* 全体の影 */
        -2px -2px 4px rgba(255, 255, 255, 0.34) inset; /* 内側の光 */
    
    border: 4px solid #f3666656; /* 縁取り */
    z-index: 10;
    text-transform: uppercase;
    transform: rotate(-13deg); /* 少し傾けて「手押し感」を出す */
}

/* 封蝋の中の刻印部分 */
.badge-new::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0); /* 刻印の凹みを表現 */
}

/* サムネイルナビゲーションの基本設定 */
.thumb-nav {
    display: none; 
    gap: 10px;
    margin-top: 15px; /* ★ここでメイン画像との「縦の距離」を調整します */
    justify-content: center;
    width: 100%;
    height: 70px;
}

.thumb-nav img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: 0.2s;
    opacity: 0.6;
    background: #fff; /* 透過画像対策 */
}

.thumb-nav img:hover, 
.thumb-nav img.active {
    border-color: var(--accent-color);
    opacity: 1;
    transform: translateY(-2px); /* 選択中を分かりやすく */
}

/* --- メイン画像の表示設定 --- */
#mainModalImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.1));
}

/* 2. ×ボタンの設定 */
.close-modal {
    position: absolute; /* .book-layout の中での位置を指定 */
    top: 10px;    /* 枠の上から15px */
    right: 15px;   /* 枠の右から15px */
    
    width: 40px;
    height: 40px;
    
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 100; /* 本の中身より上に表示 */
    cursor: pointer;
    transition: all 0.2s ease;
    
}

.close-modal:hover {
    background: #fdfaf3;
    transform: scale(1.1);
}

/* --- 1. 染色・マケボ・製作のグリッド調整 --- */
.status-grid {
    margin: 0 auto 30px; /* 上下0、左右autoで中央寄せ */
    max-width: 400px;    /* 画像の雰囲気に合わせてギュッと絞ります */
    width: 100%;
}
        
.status-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #ccc;
    padding: 10px 5px;   /* 左右のパディングを少し調整 */
    font-size: 1rem;
    color: #555;
}
        
/* 「染色」「製作」などのラベル部分の幅を固定して揃える */
.status-item span:last-child {
    font-weight: bold;
    color: #333;
}

/* セクション全体の器 */
.info-section {
    width: 100%;
    /* 備考の位置を固定するための「最小の高さ」 */
    /* これにより、文字が少なくても備考が上に跳ね上がりません */
    min-height: 100px; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上詰め */
    margin-bottom: 0;
}

/* ✦ 入手方法 ✦ などのタイトル */
.section-title {
    text-align: center;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin: 5px 0 8px !important; /* 他の指定に負けないよう調整 */
    display: block;
}
.section-content {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    padding: 0 15px;
    
    /* 文字が1行の時でも、ある程度の高さを確保してバランスを取る */
    min-height: 3.2em; 
    display: flex;
    align-items: center;    /* 1行の時に上下中央に配置 */
    justify-content: center;
}

/* --- 3. 区切り線（hr）の余白調整 --- */
.modal-divider {
    border: none;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px; /* 点線の間隔 */
    background-repeat: repeat-x;
    margin: 25px auto;
    width: 80%; /* 線を短くして中央寄せ */
}
        
.symbol { color: rgb(160, 179, 104); margin: 0 8px; font-size: 1.1rem; }

/* サイドバーのアイコンとテキストの間に余白を追加 */
.nav-item-parent span i {
    margin-left: 0;   /* 左端に寄せる */
    margin-right: 8px;
    width: 1.2em;
    text-align: center;
}

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    /* --- デザイン担当指定：メインカテゴリー色 --- */
    background-color: #6670b0; 
    color: white;
    /* ------------------------------------------ */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* 少し影を柔らかく */
    z-index: 1500;

    /* 初期状態：少し下に配置してふわっと浮き上がらせる */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 高級感のある動き */
}

/* 表示状態 */
#backToTop.visible {
    opacity: 0.85; /* ほんのり透かして上品に */
    visibility: visible;
    transform: translateY(0);
}

/* ホバー時 */
#backToTop:hover {
    /* --- デザイン担当指定：サブカテゴリー色 --- */
    background-color: #7f3030; 
    /* ------------------------------------------ */
    opacity: 1;
    transform: translateY(-8px); /* 通常時より少し大きく浮かせます */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* サブカテゴリー（タグ）が並んでいる親要素 */
#tag-area {
    display: flex;        /* 横並びにする */
    flex-wrap: wrap;      /* 【重要】幅がいっぱいになったら改行する */
    gap: 10px;            /* タグ同士の上下左右の間隔 */
    padding: 10px;
    justify-content: flex-start; /* 左寄せ（中央寄せなら center） */
}

/* 各タグ（チップ）の調整 */
.tag-chip {
    white-space: nowrap;  /* タグの中の文字自体は改行させない */
    padding: 8px 15px;
    border-radius: 20px;
    /* ...その他のデザイン... */
}

/* パッチの区切り線のスタイル */
.patch-separator {
    grid-column: 1 / -1; /* グリッドの端から端まで突き抜ける設定 */
    width: 100%;
    padding: 10px 0 10px 10px;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color); /* テーマカラーに合わせる */
    border-bottom: 2px solid rgba(125, 107, 93, 0.31); /* 下線を入れて区切りを強調 */
    text-align: left;
}

.patch-separator span {
    display: inline-block;
    padding: 2px 0px;
    border-radius: 4px;
}
/* --- 1. スマホ用メニューボタンの見た目 --- */
#menu-toggle {
    display: none; /* PCでは隠す */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1100;
    background: var(--sidebar-bg);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: var(--primary-color);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* --- 2. 背景の暗転用オーバーレイ --- */
#sidebar-overlay {
    display: none; /* 初期は隠す */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1500; /* サイドバーのすぐ下に配置 */
}

/* ============================================================
   PC・スマホ両対応：表示切り替え ＆ デザイン最終調整
   ============================================================ */

/* --- 1. PC版 (769px以上) の調整 --- */
@media (min-width: 769px) {
    /* PCではサイドバー内の閉じボタン（ヘッダーごと）を完全に消す */
    .sidebar-mobile-header, #menu-close {
        display: none !important;
    }
    /* PCではAmazon風ドットを隠す */
    #modalDots {
        display: none !important;
    }
}

/* --- 2. スマホ・タブレット用 (768px以下) 最終確定版 --- */
@media (max-width: 768px) {
    /* 全体・サイドバー挙動 */
    body { display: block !important; }
    #main-content { margin-left: 0 !important; width: 100% !important; padding-top: 70px !important; }
    
    #menu-toggle { display: flex !important; }
    #sidebar {
        position: fixed !important; top: 0; left: -260px !important;
        width: 260px !important; height: 100vh !important;
        z-index: 5000 !important; transition: transform 0.3s ease !important;
        display: block !important;
        padding-bottom: 150px !important; /* サイドバー自体の底上げ */
        overflow-y: auto;}

    #sidebar.active { transform: translateX(260px) !important; }
    
    #sidebar-overlay.active {
        display: block !important;
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.5); z-index: 4000;
    }

    /* サイドバーの閉じボタン(×)をスタイリッシュに */
    .sidebar-mobile-header {
        display: flex !important;
        justify-content: flex-end; /* 右寄せ */
        padding: 15px;
    }
    #menu-close {
        display: block !important;
        background: none !important; /* 武骨な背景を解除 */
        border: none !important;     /* 枠線を解除 */
        color: var(--primary-color) !important;
        font-size: 2.2rem !important; /* 押しやすく大きく */
        line-height: 1;
        cursor: pointer;
        padding: 0;
        font-family: sans-serif;
    }
    #menu-close:focus { outline: none; }

    /* カタログ2列表示 */
    #grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    /* モーダル：縦並び ＆ 重なり防止 */
    .book-layout {
        flex-direction: column !important; 
        height: 85vh !important;
        width: 95vw !important;
        overflow: hidden !important;
        display: flex !important;
    }

    /* 画像エリア ＆ サムネイル非表示（ドットに切り替え） */
    .book-right {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        border-right: none !important;
        background: #fdfaf3 !important;
        padding-bottom: 0 !important;
    }
    .thumb-nav {
        display: none !important; /* スマホではサムネイルを消す */
    }

    /* Amazon風ドット（インジケーター） */
    #modalDots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
        background: #fdfaf3;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    /* テキストエリア（スクロール可能） */
    .book-left {
        width: 100% !important;
        flex: 1 1 auto !important; 
        overflow-y: auto !important; 
        padding: 15px 20px !important;
        background: var(--bg-color) !important;
    }

    /* 左右切り替えボタン ＆ モーダル閉じボタン */
    .modal-nav {
        position: absolute !important;
        top: 380px !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 50% !important;
        z-index: 6000 !important;
        display: flex !important;
    }
    .nav-prev { left: 10px !important; }
    .nav-next { right: 10px !important; }

    .close-modal {
        top: 10px !important;
        right: 10px !important;
        z-index: 6100;
        background: rgba(255, 255, 255, 0.6) !important;
        border-radius: 50%;
    }
}

@media (max-width: 768px) {
    /* 半円ボタンの共通設定 */
    .modal-nav.semi-circle {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;  /* 幅を少し狭く */
        height: 60px !important; /* 高さを出して縦長に */
        background: rgba(125, 107, 93, 0.6) !important; /* var(--primary-color) の透明版 */
        color: #fff !important;
        border: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 7000 !important;
        transition: opacity 0.3s;
    }
    /* 左側のボタン（右側が盛り上がっている半円） */
    .nav-prev.semi-circle {
        left: 0 !important;
        border-radius: 0 40px 40px 0 !important; /* 右側だけ丸める */
        padding-right: 5px;
    }
    /* 右側のボタン（左側が盛り上がっている半円） */
    .nav-next.semi-circle {
        right: 0 !important;
        border-radius: 40px 0 0 40px !important; /* 左側だけ丸める */
        padding-left: 5px;
    }
    /* アイコンのサイズ調整 */
    .modal-nav.semi-circle span {
        font-size: 20px !important;
    }
    /* 画像に被っても邪魔にならないよう、少し透かす */
    .modal-nav.semi-circle:active {
        background: rgba(125, 107, 93, 0.9) !important;
    }
}

/* --- ロード画面のスタイル --- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 何よりも上に表示 */
    transition: opacity 0.5s ease; /* 消える時のふわっと感 */
}

/* ぐるぐる本体 */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.05); /* 薄いグレーの輪 */
    border-top: 5px solid var(--primary-color); /* サイトのメインカラーに合わせる */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: #666; /* 文字もグレーにして優しく */
    margin-top: 15px;
    font-family: 'Patrick Hand', cursive;
    letter-spacing: 2px;
    font-size: 1.2rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* サブカテゴリーボタンを包む親枠 */
.sub-cat-wrapper {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* 中身がはみ出さないように */
}

/* 「カテゴリーを絞り込む」というヘッダー */
.sub-cat-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
}

/* チップが入るエリア */
.sub-cat-content {
    display: flex; /* 常にflexにしておく */
    flex-wrap: wrap;
    gap: 8px;
    padding: 0; /* 閉じている時は0 */
    max-height: 0; /* 最初は高さを0にする */
    opacity: 0; /* 最初は透明 */
    overflow: hidden; /* はみ出た分を隠す */
    transition: max-height 0.5s ease, opacity 0.6s ease, padding 0.6s ease; /* ここで「ぬるっ」とさせる */
}

.sub-cat-content.open {
    max-height: 300px; /* 十分な高さを指定（中身に合わせて伸びます） */
    opacity: 1;
    padding: 10px 0;
}

/* 開閉スイッチのバー */
.sub-cat-toggle-bar {
    width: 100%;
    height: 20px;
    background-color: rgba(230, 188, 86, 0.35); /* 画像のような落ち着いたベージュ・グレー系 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    margin-top: -4px;
    color: #7d6b5d;
    transition: background-color 0.4s;
}
    
/* 矢印の回転アニメーション */
#sub-cat-arrow {
    font-size: 1rem;
    transition: transform 0.4s ease; /* ここで回転をぬるっとさせる */
    display: inline-block; /* 回転させるために必要 */
}
    
/* 回転状態（クラスが付いた時） */
#sub-cat-arrow.is-rotated {
    transform: rotate(180deg); /* 180度くるっと回す */
}
    
/* 閉じている時は矢印を180度回転させる */
.sub-cat-content:not(.open) + .sub-cat-toggle-bar #sub-cat-arrow {
    transform: rotate(180deg);
}

/* カード全体を基準にする */
.cheki-card {
    position: relative !important;
}

/* ツールチップを表示するためのコンテナ */
.tooltip-container, .flag-diamond {
    position: relative; /* バッジ自体の並びは維持 */
}

/* ★ここが解決策のコア！ */
.fixed-tooltip-content::after, 
.tooltip-trigger::after {
    content: attr(data-tooltip);
    
    /* 親（バッジ）の場所を無視して、カード基準で動くようにする */
    position: absolute; 
    
    /* --- ここが「文字に合わせる」ポイント --- */
    width: max-content;       /* 文字の長さに幅を合わせる */
    max-width: 170px;         /* ただし、長すぎるときはここで改行させる */
    white-space: normal;      /* 基本は改行しない */
    /* max-widthに達したときだけ改行を許可する設定 */
    overflow-wrap: break-word;

    /* 【固定位置の指定】カードの左下からのpxで指定 */
    /* これで、バッジが右にあっても左にあっても、表示場所はここになります */
    bottom: 25px;  /* アイテム名の横あたりの高さ */
    right: 0%;    /* カードの左端からの距離 */
    
    /* 45度回転している世界から「0度」に戻す */
    /* bottom/leftで斜めに動く場合は、ここで -45deg を調整 */
    transform: rotate(0deg) !important; 

    /* --- 見た目（共通） --- */
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    text-align: center;
    z-index: 10000;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

/* ホバーで表示 */
.tooltip-container:hover .fixed-tooltip-content::after,
.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- About Me 全体の部屋 --- */
#about-view {
    position: relative; /* 子要素の基準にする */
    width: 100%;
    height: 100vh; /* 画面いっぱいの高さ */
    overflow: hidden; /* 部屋全体はスクロールさせない */
    background-color: #f7f3e8; /* 以前相談した手紙に合う背景色 */
}

/* --- 1. 背面の固定文字 (Watermark) --- */
.about-watermark {
    position: fixed; /* ★画面に固定！ */
    top: -47px;       /* 上からの位置（ヘッダーがあるなら調整） */
    font-size: 9rem; /* 超巨大 */
    font-weight: bold;
    font-family: 'Patrick Hand', cursive; /* 手書き風 */
    color: rgba(139, 121, 94, 0.17); /* ★超うすーいセピア色 */
    white-space: nowrap; /* 改行しない */
    z-index: 1; /* 手紙より下に置く */
    pointer-events: none; /* 文字をクリックできないようにする（邪魔しない） */
}

/* --- 2. スクロールする手紙エリア（外箱） --- */
.about-letter-scaler {
    position: relative;
    z-index: 2; 
    height: 100%;
    padding: 91px 40px;
    
    /* ★ここが重要！中身が溢れたらスクロールさせる */
    overflow-y: auto; 
    
}

/* --- 2. 手紙の本体 (Card) --- */
.about-letter-card {
    background: white;
    max-width: 800px; /* 横に広がりすぎないように */
    margin: 0 auto;  /* 中央寄せ */
    padding: 50px;
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 10px 30px rgba(139, 121, 94, 0.1); /* ふんわりとした影 */
}

/* 手紙の中の見出しと本文 */
.letter-title {
    font-family: 'Noto Sans JP', sans-serif;
    color: #8b795e;
    border-bottom: 1px dashed #e2d7c5; /* 点線の区切り線 */
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.letter-text {
    color: #4a433b;
    line-height: 2; /* 行間を広げて読みやすく */
    font-size: 1rem;
}

.copyright-section {
    margin-top: -50px;
    padding-top: 25px;
    font-style: italic; /* 少し斜体にするのもお洒落 */
}

/* styles.css に追加するとお洒落になる設定 */

.how-to-item {
    background-color: rgba(139, 121, 94, 0.03); /* ほんの少しだけ色をつける */
    padding: 1px 17px 1px;
    border-radius: 6px;
    margin-top: 10px;
}

.how-to-item strong {
    color: #a8756b;
    line-height: 25px; /* 高さと同じ数値にすると、文字が上下中央にきます */
    text-align: center; /* 左右中央 */
}

/* リンクなどがある場合の色（もし将来的にGitHubやXを載せるなら） */
/* .letter-text a {
    color: #5a79a5;
    text-decoration: underline;
    text-underline-offset: 4px;
}*/

.custom-form {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 29px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}

.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid #ddd; /* 画像のような薄いグレーの枠 */
    border-radius: 4px;
    background-color: #fff;
    font-size: 1rem;
    color: #333;
    outline: none;
    transition: border-color 0.3s;
}

.form-group select:focus,
.form-group textarea:focus {
    border-color: #7d6b5d; /* フォーカス時にサイトのアクセントカラーに */
}

.form-submit-btn {
    background-color: #e0e0e0; /* 画像のような薄いグレー */
    color: #666;
    border: none;
    padding: 10px 60px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s, color 0.3s;
}

.form-submit-btn:hover {
    background-color: #7f3030; /* ホバーで色が変わる */
    color: #fff;
}
.sub-cat-toggle-bar:hover {
    background-color: #dcc6b6;
}