/* 1. テーブル表示 */
.book-table-wrap {
    overflow-x: auto;
    margin-bottom: 40px;
}

.book-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    min-width: 600px;
}

.book-table th,
.book-table td {
    border-bottom: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

.book-table th {
    background: #f7f7f7;
    font-weight: bold;
    white-space: nowrap;
}

.book-table__cell--no {
    width: 5%;
    text-align: center;
    color: #555;
}

.book-table__cell--date {
    width: 20%;
    white-space: nowrap;
    color: #555;
}

.book-table__cell--title {
    width: auto;
    font-weight: bold;
}

.book-table__note {
    font-size: 0.8em;
    font-weight: normal;
    color: #888;
    margin-left: 5px;
}

/* バッジスタイル */
.book-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 5px;
    font-size: 0.8em;
    color: #fff;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: normal;
    line-height: 1.2;
}

.book-badge--orange {
    background-color: #f39c12;
    /* 外伝など */
}

.book-badge--red {
    background-color: #e74c3c;
    /* 短編集など */
}

.book-badge--blue {
    background-color: #3498db;
    /* その他 */
}




/* スマホ対応 */
@media (max-width: 600px) {

    /* 既存のブロック化スタイルを削除し、横スクロールに任せるため空にするか、調整が必要な部分のみ記述 */
    .book-table th,
    .book-table td {
        white-space: nowrap;
        /* 改行させない */
        font-size: 0.85em;
        /* フォントサイズ調整 */
        padding: 10px;
    }
}


/* =========================================
   シリーズ作品の書籍をリストで表示する
========================================= */

/* --- Block: .series-list --- */
.book-series {
    background-color: #fdfdfd;
    /* 背景色：ごく薄いグレー */
    border-top: 5px solid #f29e37;
    /* 上部のオレンジ色の線 */
    padding: 4vw;
    margin: 0 0 60px 0;
}

/* --- Element: List Items --- */
.book-series__items {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: number-counter;
}

.book-series__item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #ccc;
    /* 点線 */
}

/* 連番のデザインと生成 */
.book-series__item::before {
    /* カウンターを1つ進めて表示する */
    counter-increment: number-counter;
    content: counter(number-counter);

    /* 円形のデザイン */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    /* 円の幅 */
    height: 24px;
    /* 円の高さ */
    background-color: #6e655d;
    /* ボタンと同じ色 */
    color: #fff;
    /* 数字の色 */
    border-radius: 50%;
    /* 丸くする */
    font-size: 12px;
    font-weight: bold;
    margin-right: 15px;
    /* テキストとの余白 */
    flex-shrink: 0;
    /* 画面が狭くなっても円が潰れないようにする */
}

.book-series__title {
    margin-top: 0 !important;
}

/* 最後のアイテムの下線が必要ない場合は以下を有効化 */
/* .series-list__item:last-child { border-bottom: none; } */


/* --- Element: Footer & Button --- */
.book-series__footer {
    margin: 40px 0 0 0;
    text-align: center;
}


/* =========================================
   書籍情報をステップ（フロー）で表示する
========================================= */

/* --- ステップ全体の枠 --- */
.book-flow {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    counter-reset: flow-count;
    /* カウンター名もユニークに変更 */
}

/* 各ステップの行 */
.book-flow__item {
    display: flex;
    position: relative;
    counter-increment: flow-count;
    /* 番号を1つ進める */
}

/* --- 左側：マーカーエリア --- */
.book-flow__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
    /* タイトルとの距離 */
    min-width: 40px;
}

/* 丸数字 */
.book-flow__number {
    width: 40px;
    height: 40px;
    background-color: #8a766b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex-shrink: 0;
    /* スマホでつぶれないようにする */
    z-index: 1;
    line-height: 1;
}

/* 自動で数字を入れる設定 */
.book-flow__number::before {
    content: counter(flow-count);
}

/* 縦の点線 */
.book-flow__line {
    width: 1px;
    flex-grow: 1;
    border-left: 2px dotted #ccc;
    margin: 5px 0;
    min-height: 20px;
    /* ステップ間の最低距離 */
}

/* 最後のステップだけ線を消す */
.book-flow__item:last-child .book-flow__line {
    display: none;
}

/* --- 右側：コンテンツエリア --- */
.book-flow__body {
    flex: 1;
    padding-bottom: 60px;
    /* 次のステップまでの余白 */
}

/* 最後のステップは余白なし */
.book-flow__item:last-child .book-flow__body {
    padding-bottom: 0;
}

/* タイトル設定 */
.book-flow__title {
    min-height: 40px;
    /* 丸の高さに合わせる */
    display: flex;
    align-items: center;
    /* 垂直中央揃え */
    margin-top: 0 !important;
    /* テーマの余白を打ち消す */
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    word-break: break-word;
    /* スマホではみ出し防止 */
    margin-bottom: 15px;
    /* book-detailとの間隔を少し確保 */
}


/* =========================================
   1冊の書籍情報を表示する
========================================= */

/* 外枠 */
.book-detail {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- 商品情報エリア --- */
.book-detail__body {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
}

/* 画像設定 */
.book-detail__visual {
    margin: 0;
    /* 余計な余白を消す */
}

.book-detail__cover {
    width: 200px;
    /* PCでの画像幅 */
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* テキストエリア */
.book-detail__content {
    flex: 1;
}

.book-detail__title {
    margin: 0 0 15px 0;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.25em;
    /* 見出しらしく少し大きく */
}

.book-detail__meta {
    margin-bottom: 20px;
}

.book-detail__type2-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.book-detail__type2 {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8em;
    background-color: #f1f1f1;
    color: #666;
    border-radius: 20px;
    border: 1px solid #ddd;
    line-height: 1.2;
    font-weight: normal;
}

.book-detail__summary p {
    line-height: 1.8;
    margin: 0;
}

/* --- ショップリンクエリア --- */
.book-purchase {
    margin-bottom: 20px;
}

/* 「ショップで探す」ラベル */
.book-purchase__label {
    margin: 0 0 10px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ボタンを並べる枠 */
.book-purchase__links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

/* --- ボタン共通設定 --- */
.shop-link,
.btn-back,
.btn-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 15px;
    border-radius: 4px;
    transition: opacity 0.3s;
    box-sizing: border-box;
    line-height: 1.2;
    cursor: pointer;
}

.shop-link:hover,
.btn-back:hover,
.btn-link:hover {
    opacity: 0.8;
}

/* --- ショップボタン（元のデザインを踏襲） --- */
.shop-link {
    background-color: #706860;
    color: #fff !important;
    /* テーマの上書き */
    flex: 1;
}

/* ショップ別カラー */
.shop-link--amazon {
    background-color: #ff9900;
    color: #fff !important;
}

.shop-link--rakuten {
    background-color: #bf0000;
    color: #fff !important;
}

.shop-link--yahoo {
    background-color: #ff0033;
    color: #fff !important;
}

/* --- 戻るボタン --- */
.book-detail__nav {
    /* 必要ならここに余白など */
}

.btn-back,
.btn-link {
    width: 100%;
    background-color: #fff;
    color: #555 !important;
    border: 2px solid #706860;
}

/* --- スマホ用レスポンシブ（768px以下） --- */
@media (max-width: 768px) {
    .book-detail__body {
        flex-direction: column;
        align-items: center;
    }

    .book-detail__cover {
        width: 100%;
        max-width: 240px;
        margin-bottom: 20px;
    }

    .book-purchase__links {
        flex-direction: column;
        gap: 15px;
    }

    .shop-link {
        width: 100%;
    }
}