/* ===========================
   CSS カスタムプロパティ（デザイントークン）
=========================== */
:root {
    /* ── カラーパレット ── */
    --clr-ink:        #1a1a2e;   /* ヘッダー・深い紺 */
    --clr-ink-sub:    #12122a;   /* ナビ背景 */
    --clr-accent:     #e8a838;   /* ゴールド */
    --clr-accent2:    #c4a060;   /* ゴールド（薄） */
    --clr-brown:      #9b7355;   /* ミドルブラウン */
    --clr-brown-lt:   #c4a07a;   /* ライトブラウン */
    --clr-bg:         #ede8df;   /* ページ背景 */
    --clr-surface:    #f5ede0;   /* カード面 */
    --clr-surface2:   #faf5ec;   /* テーブル背景 */
    --clr-text:       #2c1a0e;   /* 本文 */
    --clr-text-mid:   #6b4c30;   /* 中程度テキスト */
    --clr-text-muted: #8a6a4a;   /* 薄テキスト */
    --clr-border:     #e8dece;   /* ボーダー */
    --clr-rakuten:    #bf0000;   /* 楽天赤 */

    /* ── タイポグラフィ ── */
    --font-serif: 'Noto Serif JP', 'Hannari', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', serif;
    --font-sans:  'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;

    /* ── シャドウ・角丸 ── */
    --shadow-card:  0 4px 24px rgba(0,0,0,0.14);
    --shadow-hover: 6px 12px 20px rgba(0,0,0,0.45);
    --radius:       6px;
    --radius-pill:  20px;
}

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

body {
    font-family: var(--font-serif);
    background-color: var(--clr-bg);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='washi'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68 0.28' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23washi)' opacity='0.09'/%3E%3C/svg%3E"),
        linear-gradient(160deg, rgba(255,252,245,0.35) 0%, rgba(220,205,185,0.2) 100%);
    color: var(--clr-text);
    line-height: 1.8;
}

/* ナビゲーション・ボタン類はゴシック体を維持 */
.site-header, .publisher-nav-wrap, .label-subnav,
button, input, select, .pub-nav-link, .label-subnav-link,
.pub-pill, .share-btn, .reload-btn, .kw-tag,
.sort-select, .pagination a, .header-search,
.main-search, .hint, .result-count, .page-info {
    font-family: var(--font-sans);
}

/* ===========================
   ヘッダー
=========================== */
.site-header {
    background-color: var(--clr-ink);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.site-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.site-title {
    color: white;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: bold;
    white-space: nowrap;
    font-family: var(--font-serif);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
}

.site-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    margin: 0;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.header-bookmark-link {
    color: #e8a838;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0.85;
}

.header-bookmark-link:hover {
    opacity: 1;
}

.header-bookmark-count {
    font-size: 0.82rem;
    font-weight: 400;
    margin-left: 4px;
    opacity: 0.85;
}


.header-search {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 250px;
    max-width: 480px;
}

/* ドロップダウン＋テキスト入力を一体化したフィールド */
.search-field {
    display: flex;
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.search-type-select {
    padding: 0 8px;
    border: none;
    border-right: 1px solid #ddd;
    background: #f0f0f0;
    color: #333;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.search-type-select:focus {
    outline: none;
}

.header-search input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
    font-size: 0.95rem;
    background: #fff;
}

.header-search input:focus {
    outline: none;
}

.header-search button,
.main-search button {
    padding: 8px 16px;
    background-color: var(--clr-accent);
    color: var(--clr-ink);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.header-search button:hover,
.main-search button:hover {
    background-color: #d4942a;
}

/* ===========================
   メインコンテンツ
=========================== */
.main-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* ===========================
   トップページ（ヒーローエリア）
=========================== */
.hero {
    text-align: center;
    padding: 60px 20px 40px;
}

.hero h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.hero p {
    color: #555;
    margin-bottom: 24px;
    font-size: 1.05rem;
}

.main-search {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.main-search input {
    width: 480px;
    max-width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 6px;
}

.hint {
    font-size: 0.9rem;
    color: #777;
}

/* ===========================
   検索結果ページ
=========================== */
.search-result-header {
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.search-result-header h2 {
    font-size: 1.1rem;
    color: #1a1a2e;
}

.search-result-header p {
    color: #aaa;
    font-size: 0.85rem;
}

/* ===========================
   ソートバー（検索結果・キーワードページ）
=========================== */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sort-bar-back {
    display: inline-flex;
    align-items: center;
    color: #1a1a2e;
    opacity: 0.55;
    margin-right: 2px;
    vertical-align: middle;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.sort-bar-back:hover {
    opacity: 1;
}

.sort-bar-title {
    font-size: 1.05rem;
    color: #1a1a2e;
    font-weight: normal;
    flex: 1;
}

.result-count {
    font-size: 0.85rem;
    color: #888;
    margin-left: 8px;
}

.sort-form {
    margin-left: auto;
}

.sort-select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    color: #333;
}

.sort-select:hover {
    border-color: #1a1a2e;
}

/* ===========================
   ページング
=========================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    padding: 16px;
}

.pagination a {
    color: #1a1a2e;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    transition: background 0.15s, color 0.15s;
}

.pagination a:hover {
    background: #1a1a2e;
    color: white;
    border-color: #1a1a2e;
}

.page-info {
    color: #666;
    font-size: 0.9rem;
}

/* ===========================
   出版社内検索フォーム
=========================== */
.publisher-search {
    margin-bottom: 24px;
}

.publisher-search-form {
    display: flex;
    gap: 8px;
}

.publisher-search-form .search-field {
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.15s;
}

.publisher-search-form .search-field:focus-within {
    border-color: #1a1a2e;
}

.publisher-search-form input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    font-size: 0.95rem;
    border: none;
    border-radius: 0;
    font-family: var(--font-sans);
    background: #fff;
}

.publisher-search-form input[type="text"]:focus {
    outline: none;
}

.publisher-search-form button {
    padding: 10px 20px;
    background-color: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    white-space: nowrap;
    font-family: var(--font-sans);
    transition: background 0.15s;
}

.publisher-search-form button:hover {
    background-color: #2a2a4a;
}

.search-scope-link {
    color: #1a1a2e;
    text-decoration: none;
    border-bottom: 1.5px solid #c4a060;
}

.search-scope-link:hover {
    color: #c4a060;
}

/* ===========================
   出版社から探す（トップページ）
=========================== */
.publisher-browse {
    background: #f5f0e8;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.publisher-browse-title {
    font-size: 0.82rem;
    color: #999;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.publisher-browse-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pub-pill {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    color: #2c2c2c;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.88rem;
    border: 1px solid #e0d8cc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.pub-pill:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

/* ===========================
   フェアパネル（書店風）
=========================== */
.fair-panel {
    background: #fdf6e8;
    border: 3px solid #b8922a;
    position: relative;
    padding: 22px 32px 16px;
    text-align: center;
    margin-bottom: 16px;
}
.fair-panel::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid #c4a060;
    pointer-events: none;
}
.fair-panel .fair-heading {
    font-size: 1.45rem;
    font-weight: 700;
    color: #2c1a0e;
    margin: 0 0 6px;
    padding-left: 0;
    border-left: none;
    justify-content: center;
}
.fair-panel .fair-see-all {
    margin: 4px 0 0;
    text-align: center;
}
.fair-panel--search {
    margin: 0 0 0;
}
.fair-panel--search .fair-panel-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #2c1a0e;
    margin: 0 0 4px;
    letter-spacing: 0.03em;
}
.fair-panel--search .fair-panel-count {
    font-size: 0.85rem;
    color: #8a6a4a;
    margin: 0;
}

/* ===========================
   トップページ　ランダム表示
=========================== */
.featured-section {
    margin-top: 36px;
}

.reload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #c4a060;
    background: transparent;
    color: #c4a060;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.reload-btn:hover {
    background: #c4a060;
    color: #fff;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.reload-btn--spinning {
    animation: spin 0.6s linear infinite;
    pointer-events: none;
}

.fair-keyword {
    color: #c4a060;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fair-see-all {
    font-size: 0.83rem;
    text-align: right;
    margin: -8px 0 14px;
}

.fair-see-all a {
    color: #c4a060;
    text-decoration: none;
}

.fair-see-all a:hover {
    text-decoration: underline;
}

/* ===========================
   書籍グリッド（表紙棚）
   表紙を主役に。テキストはホバー時のみ表示。
=========================== */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.book-card {
    text-decoration: none;
    color: inherit;
    /* カードを基準にオーバーレイを重ねます */
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    /* ホバー時に本が浮き上がるような影の変化 */
    box-shadow: 3px 5px 10px rgba(0,0,0,0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.book-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 6px 12px 20px rgba(0,0,0,0.45);
}

/* 表紙画像：カードの全面を占める */
.book-cover {
    width: 100%;
    aspect-ratio: 2 / 3;   /* 文庫本の縦横比 */
    object-fit: cover;
    display: block;
}

/* 表紙なしの場合の代替ブロック */
.no-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: linear-gradient(160deg, #3a2e22, #5a4535);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    color: #fff;
}

.no-cover-title {
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    color: #f0e8d8;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    font-family: "游明朝", "YuMincho", serif;
}

.no-cover-author {
    font-size: 0.62rem;
    color: rgba(240, 220, 190, 0.7);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    font-family: var(--font-sans);
}

/* ホバー時に表紙の下半分から浮かび上がるテキストオーバーレイ */
.book-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 下から上へのグラデーション背景 */
    background: linear-gradient(to top, rgba(10,10,20,0.92) 0%, rgba(10,10,20,0.6) 70%, transparent 100%);
    padding: 28px 10px 10px;
    /* 通常時は非表示 */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ホバー時にオーバーレイを表示 */
.book-card:hover .book-info {
    opacity: 1;
    transform: translateY(0);
}

.book-title {
    font-size: 0.82rem;
    font-weight: bold;
    line-height: 1.35;
    color: #fff;
    margin-bottom: 3px;
}

.book-author {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
}

.no-result {
    color: #888;
    text-align: center;
    padding: 60px 20px;
    font-size: 1rem;
}

/* ===========================
   検索結果シェルフ（book_detailページ上部の固定バー）
=========================== */
.result-shelf {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: #0f0f1f;  /* ヘッダーより少し暗くして区別 */
    display: flex;
    align-items: center;
    padding: 6px 0;
}

/* 横スクロールするコンテナ */
.shelf-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 5px;
    padding: 4px 6px;
    flex: 1;
    /* スクロールバーを隠す */
    scrollbar-width: none;
}
.shelf-track::-webkit-scrollbar {
    display: none;
}

/* 個々の表紙サムネイル */
.shelf-item {
    flex-shrink: 0;
    display: block;
    width: 50px;
    opacity: 0.65;
    transition: opacity 0.15s, transform 0.15s;
    border-radius: 2px;
}
.shelf-item:hover {
    opacity: 1;
    transform: scale(1.1);
    z-index: 1;
    position: relative;
}

/* 現在表示している本をゴールドの枠で強調 */
.shelf-item.shelf-current {
    opacity: 1;
    outline: 2px solid #e8a838;
    outline-offset: 2px;
}

.shelf-item img, .shelf-no-cover {
    width: 50px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.shelf-no-cover {
    background: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    color: #999;
}

/* 左右の矢印ボタン */
.shelf-arrow {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    padding: 0 10px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}
.shelf-arrow:hover {
    color: white;
}

/* ===========================
   戻るリンク
=========================== */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    color: #1a1a2e;
}

/* ===========================
   作品詳細ページ ── ヒーローエリア
=========================== */
.detail-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
}

/* 表紙をぼかした全面背景 */
.detail-hero::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--cover-url);
    background-size: cover;
    background-position: center top;
    filter: blur(22px);
    transform: scale(1.15);
}

/* 暖色の暗いオーバーレイ */
.detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 14, 6, 0.68);
}

/* 表紙なしのフォールバック */
.detail-hero.no-cover-hero::before {
    background-image: none;
    background-color: #3a2010;
    filter: none;
}

.detail-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding: 40px 28px 32px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
}

.detail-cover-hero {
    position: relative;
    flex-shrink: 0;
}

.detail-cover-hero img {
    width: 180px;
    border-radius: 3px;
    box-shadow: 6px 10px 28px rgba(0,0,0,0.65);
    display: block;
}

.back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
    transition: background 0.15s;
}

.back-icon:hover {
    background: rgba(255,255,255,0.32);
}

.detail-cover-placeholder {
    width: 180px;
    height: 270px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.detail-hero-info {
    flex: 1;
    padding-bottom: 4px;
}

.detail-hero-title {
    font-size: 1.65rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 8px;
}

.detail-hero-series {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
}

.detail-hero-author {
    font-size: 1.0rem;
    color: rgba(255,255,255,0.82);
    margin-bottom: 6px;
}

.detail-hero-meta {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
}

/* ===========================
   作品詳細ページ ── コンテンツカード
=========================== */
.detail-card {
    background: var(--clr-surface);
    max-width: 860px;
    margin: 28px auto 48px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 32px 36px 36px;
}

/* キーワードタグ一覧 */
.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.kw-tag {
    display: inline-block;
    padding: 4px 13px;
    border: 1.5px solid #9b7355;
    border-radius: 20px;
    color: #9b7355;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.kw-tag:hover {
    background: #9b7355;
    color: #fff;
}

/* あらすじ */
.detail-synopsis h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9b7355;
    margin-bottom: 14px;
    border-left: 3px solid #c4a07a;
    padding-left: 10px;
}

.detail-synopsis p {
    line-height: 2.0;
    color: #2c1a0e;
    font-size: 0.96rem;
}

/* あらすじ内のキーワードリンク */
.detail-synopsis a {
    color: #8b5e3c;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.detail-synopsis a:hover {
    background-color: rgba(155, 115, 85, 0.15);
    border-radius: 2px;
}

/* あらすじ「続きを読む」リンク */
.synopsis-continue {
    color: #bf0000;
    text-decoration: none;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.synopsis-continue:hover {
    text-decoration: underline;
}

/* アクションボタン行 */
.detail-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.rakuten-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #bf0000;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
}

.rakuten-btn:hover {
    background-color: #990000;
}

/* ブックマークボタン */
.bm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    border: 1.5px solid #9b7355;
    border-radius: 4px;
    color: #9b7355;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.bm-btn:hover {
    background: #f5ede0;
}

.bm-btn--on {
    background: #9b7355;
    color: #fff;
    border-color: #9b7355;
}

.bm-btn--on:hover {
    background: #7a5a3e;
    border-color: #7a5a3e;
}

.back-link-inline {
    color: #9b7355;
    text-decoration: none;
    font-size: 0.88rem;
}

.back-link-inline:hover {
    color: #2c1a0e;
}

/* 書誌情報（折りたたみ） */
.detail-meta-collapse {
    margin-top: 24px;
    border-top: 1px solid rgba(155,115,85,0.2);
    padding-top: 16px;
}

.detail-meta-collapse summary {
    cursor: pointer;
    color: #b09070;
    font-size: 0.82rem;
    user-select: none;
}

.detail-meta-collapse summary:hover {
    color: #9b7355;
}

.book-meta-small {
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #6b4c30;
}

.book-meta-small th {
    text-align: left;
    padding: 5px 16px 5px 0;
    color: #b09070;
    width: 80px;
}

.book-meta-small td {
    padding: 5px 0;
    color: #2c1a0e;
}

/* ===========================
   ヒーロー内の著者・シリーズリンク
=========================== */
.detail-hero-author a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
    transition: border-bottom-color 0.15s;
}
.detail-hero-author a:hover {
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

.detail-hero-series a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
    transition: color 0.15s, border-bottom-color 0.15s;
}
.detail-hero-series a:hover {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* ===========================
   同シリーズストリップ
=========================== */
.series-strip {
    margin-top: 28px;
    border-top: 1px solid rgba(155, 115, 85, 0.2);
    padding-top: 20px;
}

.series-strip-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.series-strip-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9b7355;
    border-left: 3px solid #c4a07a;
    padding-left: 10px;
    font-weight: normal;
}

.series-strip-all {
    font-size: 0.8rem;
    color: #9b7355;
    text-decoration: none;
    margin-left: auto;
    white-space: nowrap;
}
.series-strip-all:hover {
    color: #2c1a0e;
}

.series-strip-books {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(155,115,85,0.3) transparent;
}

.series-strip-item {
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    width: 72px;
    opacity: 0.72;
    transition: opacity 0.15s, transform 0.15s;
}
.series-strip-item:hover {
    opacity: 1;
    transform: translateY(-4px);
}
.series-strip-item.series-current {
    opacity: 1;
    outline: 2px solid #9b7355;
    outline-offset: 2px;
    border-radius: 3px;
}

.series-strip-item img,
.series-strip-nocover {
    width: 72px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}
.series-strip-nocover {
    background: linear-gradient(145deg, #c8b99a, #a89070);
}

.series-strip-title-text {
    font-size: 0.68rem;
    color: #6b4c30;
    margin-top: 5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================
   出版社ナビゲーション（カルーセル）
=========================== */
.publisher-nav-wrap {
    background-color: #12122a;
    display: flex;
    align-items: stretch;
    position: relative;
}

.publisher-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.publisher-nav::-webkit-scrollbar {
    display: none;
}

.pub-nav-arrow {
    background: #12122a;
    color: #b0b8cc;
    border: none;
    padding: 0 10px;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
    z-index: 1;
}

.pub-nav-arrow:hover {
    color: #fff;
    background: #2a2a4a;
}

.pub-nav-link {
    color: #b0b8cc;
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    padding: 7px 14px;
    border-right: 1px solid #2a2a4a;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.pub-nav-link:hover {
    background-color: #2a2a4a;
    color: #ffffff;
}

.pub-nav-active {
    background-color: #2a2a4a;
    color: #e8c87a;
    font-weight: bold;
}

/* ===========================
   レーベルサブナビ（出版社ページ用ヘッダー下段）
=========================== */
.label-subnav {
    background-color: #1e1e3a;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid #2a2a4a;
}

.label-subnav-link {
    color: #9ab0cc;
    text-decoration: none;
    font-size: 0.80rem;
    white-space: nowrap;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid #3a3a5a;
    transition: background 0.15s, color 0.15s;
}

.label-subnav-link:hover {
    background-color: #2a2a4a;
    color: #fff;
}

.label-subnav-active {
    background-color: #e8c87a;
    color: #1a1a2e;
    border-color: #e8c87a;
    font-weight: bold;
}

/* ===========================
   出版社ページ：レーベルナビ
=========================== */
.label-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.label-nav-link {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.88rem;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background 0.15s;
}

.label-nav-link:hover {
    background: rgba(255,255,255,0.3);
}

.label-nav-active {
    background: #e8c87a;
    color: #1a1a2e;
    border-color: #e8c87a;
    font-weight: bold;
}

.publisher-label-name {
    margin-top: 8px;
    font-size: 0.95rem;
    opacity: 0.8;
}

/* ===========================
   キーワード管理画面
=========================== */
.admin-kw-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.admin-kw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.admin-kw-title {
    font-size: 1.1rem;
    color: #1a1a2e;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-kw-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-kw-search,
.admin-kw-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}

.admin-kw-input {
    flex: 1;
    min-width: 160px;
    padding: 7px 12px;
    border: 1px solid #c8b89a;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
    font-family: inherit;
}

.admin-kw-select {
    padding: 7px 10px;
    border: 1px solid #c8b89a;
    border-radius: 4px;
    font-size: 0.85rem;
    background: #fff;
    cursor: pointer;
}

.admin-btn {
    padding: 7px 14px;
    border: 1px solid #c8b89a;
    border-radius: 4px;
    background: #f5ede0;
    color: #3a2e20;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.admin-btn:hover          { background: #e8d8c0; }
.admin-btn--add           { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.admin-btn--add:hover     { background: #2d2d50; }
.admin-btn--delete        { background: transparent; color: #b44; border-color: #e4a0a0; font-size: 0.8rem; padding: 4px 10px; }
.admin-btn--delete:hover  { background: #fde; }
.admin-btn--reload        { color: #4a7a4a; border-color: #8fba7a; }
.admin-btn--clear         { color: #888; }
.admin-btn--file          { color: #4a6a9a; border-color: #9ab0d0; }

.admin-kw-table {
    width: 100%;
    border-collapse: collapse;
    background: #faf5ec;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.9rem;
}

.admin-kw-table th {
    background: #1a1a2e;
    color: #e8a838;
    padding: 10px 14px;
    text-align: left;
    font-weight: normal;
    font-size: 0.85rem;
}

.admin-kw-table td {
    padding: 8px 14px;
    border-bottom: 1px solid #e8dece;
}

.admin-kw-table tr:last-child td { border-bottom: none; }
.admin-kw-table tr:hover td      { background: #f5ede0; }

.admin-kw-word a {
    color: #1a1a2e;
    text-decoration: none;
}

.admin-kw-word a:hover { text-decoration: underline; color: #c4a060; }

.admin-kw-source {
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e8dece;
    color: #5a4a3a;
}

.admin-kw-source--manual          { background: #dde8f0; color: #2a4a6a; }
.admin-kw-source--auto-ner        { background: #e8f0dd; color: #3a5a2a; }
.admin-kw-source--auto-location   { background: #f0e8dd; color: #6a4a2a; }

/* ===========================
   フッター
=========================== */
.site-footer {
    text-align: center;
    padding: 24px;
    color: #aaa;
    font-size: 0.85rem;
    margin-top: 60px;
    border-top: 1px solid #ddd;
}

.site-footer a {
    color: #aaa;
}

.footer-share {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
}

.share-btn--x {
    background: #000;
    color: #fff;
}

.share-btn--x:hover {
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.share-btn--copy {
    background: #f0e8d8;
    color: #2c2c2c;
    border: 1px solid #d8ccc0;
}

.share-btn--copy:hover {
    background: #e8dcc8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.share-btn--copied {
    background: #4caf50 !important;
    color: #fff !important;
    border-color: #4caf50 !important;
}

/* ===========================
   書籍詳細ページ ── 地名地図セクション
=========================== */
.detail-map-section {
    margin-top: 28px;
    border-top: 1px solid rgba(155, 115, 85, 0.2);
    padding-top: 20px;
}

/* 見出し（あらすじセクションと同スタイル） */
.detail-map-section h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9b7355;
    margin-bottom: 12px;
    border-left: 3px solid #c4a07a;
    padding-left: 10px;
    font-weight: normal;
}

/* 検出した地名のタグ一覧 */
.detail-map-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.detail-map-place-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #f0e4d0;
    border: 1px solid #c4a07a;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #7a5030;
    font-family: var(--font-sans);
}

/* 地図本体 */
#detailMap {
    width: 100%;
    height: 320px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d8ccc0;
}

@media (max-width: 480px) {
    #detailMap { height: 240px; }
}

/* ===========================
   キーワード追加ポップアップ（テキスト選択時）
=========================== */
.kw-add-popup {
    position: fixed;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a2e;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    white-space: nowrap;
    font-family: var(--font-sans);
}

.kw-add-popup strong {
    color: #e8c87a;
}

.kw-add-btn {
    padding: 4px 12px;
    background: #e8a838;
    color: #1a1a2e;
    border: none;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.kw-add-btn:hover {
    background: #d4942a;
}

.kw-btn-remove {
    background: #7a2020;
    color: #fff;
}

.kw-btn-remove:hover {
    background: #5a1818;
}

.kw-add-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}

.kw-add-close:hover {
    color: #fff;
}

.kw-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    white-space: nowrap;
}

.kw-toast--ok   { background: #2d6a2d; color: #fff; }
.kw-toast--info { background: #555; color: #fff; }

/* ===========================
   タブレット対応（768px以下）
=========================== */
@media (max-width: 768px) {
    .main-content {
        padding: 16px 14px;
    }

    .detail-hero-inner {
        padding: 32px 20px 24px;
        gap: 20px;
    }

    .detail-cover-hero img {
        width: 150px;
    }

    .detail-card {
        margin: 20px 16px 40px;
        padding: 28px 24px 32px;
    }
}

/* ===========================
   スマートフォン対応（480px以下）
=========================== */
@media (max-width: 480px) {

    /* ── ヘッダー ──────────────── */
    .site-header {
        padding: 10px 14px;
        gap: 10px;
    }

    .site-title {
        font-size: 1.1rem;
    }

    .header-search {
        min-width: 0;
        flex: 1 1 100%; /* 検索ボックスを2行目に落として全幅に */
        order: 3;
    }

    .header-search input {
        font-size: 0.9rem;
        padding: 9px 10px;
    }

    .header-search button {
        padding: 9px 14px;
        font-size: 0.88rem;
    }

    .header-bookmark-link {
        font-size: 0.82rem;
        padding: 6px 0;
    }

    /* 出版社ナビ：タップしやすい高さに */
    .pub-nav-link {
        padding: 10px 12px;
        font-size: 0.80rem;
    }

    .pub-nav-arrow {
        padding: 0 8px;
        min-width: 32px;
    }

    /* レーベルサブナビ */
    .label-subnav {
        padding: 6px 10px;
        gap: 5px;
    }

    .label-subnav-link {
        padding: 6px 10px;
        font-size: 0.77rem;
    }

    /* ── トップページ・ヒーロー ──── */
    .hero {
        padding: 28px 16px 24px;
    }

    .hero h1 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .hero p {
        font-size: 0.92rem;
        margin-bottom: 16px;
    }

    .main-search {
        flex-direction: column;
        gap: 8px;
    }

    .main-search input {
        width: 100%;
        font-size: 1rem;
        padding: 12px 14px;
    }

    .main-search button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    .hint {
        font-size: 0.82rem;
    }

    .publisher-browse {
        padding: 16px 14px;
    }

    .pub-pill {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    /* ── 書籍グリッド ────────────
       モバイルでは常にタイトル・著者を表示する
       （ホバーが使えないため）
    ── */
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 8px;
    }

    .book-card:hover {
        transform: none; /* モバイルではタップなのでアニメを無効化 */
    }

    /* ── ソートバー ──────────────── */
    .sort-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 14px;
    }

    .sort-form {
        margin-left: 0;
    }

    .sort-select {
        font-size: 0.85rem;
    }

    /* ── 詳細ページ ─────────────── */
    .detail-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 16px 20px;
        gap: 14px;
    }

    .detail-cover-hero img {
        width: 110px;
    }

    .back-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .detail-hero-title {
        font-size: 1.15rem;
    }

    .detail-hero-author {
        font-size: 0.92rem;
    }

    .detail-card {
        margin: 12px 8px 32px;
        padding: 20px 16px 24px;
    }

    .keyword-tags {
        gap: 6px;
        margin-bottom: 18px;
    }

    .kw-tag {
        padding: 5px 11px;
        font-size: 0.78rem;
    }

    /* アクションボタンは縦並びに */
    .detail-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .rakuten-btn {
        text-align: center;
        padding: 12px 16px;
        font-size: 0.92rem;
    }

    .bm-btn {
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.92rem;
    }

    .back-link-inline {
        text-align: center;
        display: block;
        padding: 8px 0;
    }

    /* ── ページング ──────────────── */
    .pagination {
        gap: 10px;
        margin-top: 24px;
    }

    .pagination a {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    /* ── シェルフ ───────────────── */
    .shelf-item {
        width: 44px;
    }

    .shelf-item img, .shelf-no-cover {
        width: 44px;
    }
}

/* ===========================
   探索カード（トップページ）
=========================== */
.explore-section {
    margin-top: 40px;
    margin-bottom: 8px;
}

.explore-section-title {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--clr-brown);
    border-left: 3px solid var(--clr-brown-lt);
    padding-left: 10px;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-weight: normal;
}

.explore-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.explore-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px 18px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--clr-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s;
    text-align: center;
}

.explore-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
    background: #fff;
}

.explore-card-icon {
    font-size: 2rem;
    line-height: 1;
}

.explore-card-label {
    font-size: 0.88rem;
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--clr-ink);
    line-height: 1.3;
}

.explore-card-desc {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-family: var(--font-sans);
    line-height: 1.4;
}

/* ===========================
   書籍詳細 2カラムレイアウト（PC）
=========================== */
.detail-two-col {
    margin-top: 4px;
}

@media (min-width: 769px) {
    .detail-two-col {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 36px;
        align-items: start;
    }

    .detail-left {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .detail-right {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 20px;
    }

    /* 右カラムの書誌情報は初期から展開 */
    .detail-right .detail-meta-collapse {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    /* 右カラムの地図は少し高くする */
    .detail-right #detailMap {
        height: 260px;
    }
}

/* ===========================
   地図ボトムシート（スマホ）
=========================== */

/* ドラッグハンドル */
.bs-handle {
    width: 44px;
    height: 5px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    margin: 10px auto 6px;
    flex-shrink: 0;
    cursor: grab;
}

/* ボトムシート本体 - map_books.html の .map-sidebar を拡張 */
@media (max-width: 600px) {
    .map-sidebar {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        width: 100% !important;
        height: 75vh;
        border-radius: 16px 16px 0 0;
        border-top: none !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.22);
        transform: translateY(calc(100% - 0px));
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 500;
    }

    /* ピーク状態：ハンドル+ヘッダーだけ見える */
    .map-sidebar.bs-peek {
        transform: translateY(calc(100% - 68px));
    }

    /* ハーフ状態：半分見える */
    .map-sidebar.bs-half {
        transform: translateY(35%);
    }

    /* フル状態：全部見える */
    .map-sidebar.bs-full,
    .map-sidebar.open {
        transform: translateY(0);
    }

    .map-sidebar .sidebar-book-list {
        overflow-y: auto;
        flex: 1;
    }

    /* 地図が地点タップ時の暗幕 */
    .map-backdrop {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.15);
        z-index: 400;
    }
    .map-backdrop.show { display: block; }
}

/* ボトムシート開閉時のアニメーション */
.map-sidebar {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 関連作品セクション */
.related-books-section {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 24px 48px;
}

.related-books-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--clr-text-mid);
    border-left: 4px solid var(--clr-accent);
    padding-left: 12px;
    margin-bottom: 20px;
}