/* ------------------------------
   基本レイアウト
--------------------------------*/
.book-content {
    max-width: 960px;   /* 一定以上の幅は中央寄せ */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
}

/* 左側画像ブロック */
.book-left {
    float: left;
    width: 310px;
    margin-right: 20px;
}

.book-left img {
    display: block;
    width: 100%;
    height: auto;
}

/* 右側テキストブロック */
.lfloat {
    float: left;
    width: calc(100% - 330px); /* 画像幅+マージンを引く */
}

/* タイトル・副題・書誌情報 */
.book-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.book-abst {
    font-size: 18px;
    margin: 0 0 12px 0;
}

.book-info {
    font-size: 14px;
    margin: 0 0 12px 0;
}

/* 目次テーブル */
.book-index {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.book-index th,
.book-index td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

/* ------------------------------
   モバイル対応
--------------------------------*/
@media screen and (max-width: 767px) {
    /* 左右フロート解除して縦並び */
    .book-left,
    .lfloat {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }

    /* 画像は中央寄せで縮小 */
    .book-left img {
        display: block;
        margin: 0 auto 15px auto;
        max-width: 100%;
        height: auto;
    }

    /* タイトル・説明文は左寄せ */
    .book-title,
    .book-abst,
    .book-info {
        text-align: left;
    }

    /* 目次テーブルを折り返し対応 */
    .book-index {
        display: table;
        width: 100%;
        table-layout: auto;       /* セル幅自動調整 */
        overflow-x: visible;      /* 横スクロール抑制 */
    }

    .book-index th,
    .book-index td {
        white-space: normal;      /* テキスト折り返し */
        word-wrap: break-word;    /* 長い単語も折り返す */
    }

    /* マージン調整 */
    .margin-l20 {
        margin-left: 0 !important;
    }
}

/* ------------------------------
   clearfix対応
--------------------------------*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}