@charset "utf-8";

/* =========================================================
   基本
========================================================= */
body{
    margin:0;
    padding:0;
    background:#fff;
    color:#111;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS Mincho",serif;
    line-height:1.75;
}

/* 全体リンク：落ち着いた青 / hover でやや濃く（タイトル以外） */
a{
    color:#2f4f7f;          /* 通常リンク色 */
    text-decoration:none;
}
a:hover{
    color:#1d355d;          /* hover 時：少し濃く */
    text-decoration:none;   /* 下線などの装飾は付けない */
}

#container{
    width:92%;
    max-width:1100px;
    margin:0 auto;
}

/* =========================================================
   header
========================================================= */
.header{
    text-align:right;
    padding:25px 0 10px;
}
.header a{
    font-size:14px;
}

/* =========================================================
   title
========================================================= */
.main-title{
    text-align:center;
    font-size:36px;
    font-weight:600;
    letter-spacing:2.5px;
    margin:28px 0 24px;
}
/* タイトルのみリンク色を本文色に固定 */
.main-title a{
    color:#222;
}
.main-title a:hover{
    color:#222;
}

/* =========================================================
   search
========================================================= */
.search-block{
    text-align:center;
    margin-bottom:32px;
}
.search-form{
    display:inline-flex;
    gap:10px;
    width:85%;
    max-width:800px;
}
.search-form input[type=text]{
    flex:1;
    padding:10px 14px;
    font-size:15px;
    border:1px solid #ccc;
    border-radius:4px;
}
.search-form button{
    padding:10px 18px;
    font-size:15px;
    border:1px solid #aaa;
    background:#fff;
    border-radius:4px;
    cursor:pointer;
}

/* 検索結果のサマリ行 */
.contents{
    margin-top:10px;
}
.search-summary{
    margin:0 0 18px;
    font-size:15px;
}

/* =========================================================
   index / search 一覧カード
========================================================= */
.band-card{
    border:1px solid #e1e1e1;
    border-radius:6px;
    background:#fff;
    padding:18px 22px;
    margin-bottom:22px;
}
.band-header{
    font-size:15.5px;
    margin-bottom:8px;
    line-height:1.9;
}
.band-meta{
    font-weight:bold;
    margin-right:4px;
}

/* 帯文本文（index / search 共通） */
.band-box{
    background:#f7f7f7;
    border-left:3px solid #dadada;
    padding:8px 16px 10px;   /* 上下の余白をバランス良く */
    box-sizing:border-box;
}
.band-box p{
    margin:0;               /* p のマージンを完全に殺す */
    font-size:16px;         /* 一覧用：やや小さめ */
    line-height:1.78;
    white-space:normal;     /* 改行は nl2br(<br>) に任せる */
}

/* 詳細・一覧問わず、帯文テキストはマージンをゼロに統一 */
.band-page-body p,
.band-text{
    margin:0;
}

/* 「詳細を見る →」リンク */
.band-link{
    margin-top:9px;
    text-align:right;
    font-size:14px;
}

/* =========================================================
   search.php 専用：帯文カード 2カラム（PC：6:4）
========================================================= */

.band-card-search-inner{
    display:flex;
    gap:18px;
}

/* 左カラム（推薦者／書籍名／帯文本文） */
.band-card-search-main{
    flex:0 0 65%;
    max-width:65%;
}

/* 右カラム（ISBN／種別／ID） */
.band-card-search-side{
    flex:0 0 35%;
    max-width:35%;
    font-size:13.5px;
    line-height:1.8;
    border-left:1px solid #eee;
    padding-left:14px;
}
.band-card-search-side .band-meta-row{
    margin-bottom:4px;
}
/* 右カラム内のラベルは meta-label を再利用 */
.band-card-search-side .meta-label{
    font-weight:bold;
}

/* =========================================================
   index 固有
========================================================= */
.random-section{
    margin-bottom:34px;
}
.random-section h2{
    font-size:20px;
    margin:0 0 16px;
    font-weight:600;
}

.section-border{
    border-bottom:1px solid #dedede;
    margin:45px 0 38px;
}

.two-column{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:50px;
}
.left-column,
.right-column{
    width:45%;
    font-size:15px;
}
.two-column h2{
    font-size:20px;
    margin-bottom:14px;
    font-weight:600;
}

/* =========================================================
   Band 詳細ページ
========================================================= */
.band-page-card{
    border:1px solid #e1e1e1;
    border-radius:6px;
    background:#fff;
    padding:22px 28px;
    margin-top:28px;
}
.band-page-recommender,
.band-page-book{
    font-size:17px;
    margin-bottom:10px;
    line-height:1.92;
}

/* 帯文本文（band.php 専用） */
.band-page-body{
    background:#f7f7f7;
    border-left:3px solid #dadada;
    padding:12px 18px 12px;   /* 上下を 2px 詰めた設定 */
    font-size:19px;
    line-height:1.84;
    white-space:normal;       /* こちらも <br> だけを改行として扱う */
}

/* 下メタ情報 */
.band-page-meta{
    margin-top:8px;
    font-size:15px;
}
.meta-label{
    font-weight:bold;
}

/* 前後ナビ */
.band-page-nav{
    text-align:center;
    font-size:15px;
    margin-top:22px;
}
/* リンクあり */
.band-page-nav a{
    margin:0 10px;
}
/* リンクなし（span）は淡いグレーで「非リンク」を明示 */
.band-page-nav span{
    margin:0 10px;
    color:#b7b7b7;
}

/* 「検索にもどる」「トップページへ」中央寄せ */
.band-page-back{
    text-align:center;
    margin-top:20px;
}
.band-page-back a{
    display:block;
    margin:3px 0;
    font-size:15px;
}

/* =========================================================
   ページネーション
========================================================= */
.pagination{
    text-align:center;
    margin:38px 0 25px;
    font-size:14.5px;
}
.pagination a,
.pagination span{
    display:inline-block;
    padding:4px 10px;
    margin:0 4px;
    border:1px solid #bbb;
    border-radius:3px;
}
.pagination a:hover{
    background:#000;
    color:#fff;
    border-color:#000;
}
.pagination .current{
    background:#444;
    color:#fff;
    border-color:#444;
}
.pagination .disabled{
    color:#aaa;
    background:#f5f5f5;
    border-color:#eee;
}

/* =========================================================
   footer
========================================================= */
.footer{
    text-align:center;
    padding:32px 0 22px;
    font-size:13.8px;
    color:#666;
    margin-top:55px;
    border-top:1px solid #e5e5e5;
}
.footer a{
    margin-left:16px;
    color:#555;          /* フッターはやや抑えた色から */
}
.footer a:hover{
    color:#1d355d;       /* 他リンクと同系統の濃い青へ */
}

/* =========================================================
   about / sitemap / topics 共通レイアウト
   （静的ページの横幅・タイトル・リード文など）
========================================================= */

/* ページ上部の現在位置表示 */
.breadcrumb{
    margin-top:25px;
    margin-bottom:14px;
    font-size:14px;
    color:#666;
}
.breadcrumb a{
    font-size:14px;
}

/* ページ全体カード（about / sitemap / topics / topics article） */
.about-page,
.sitemap-page,
.topics-page,
.topics-article-page{
    margin-top:0;
}

/* 内側の横幅を共通化して行長を抑える */
.about-inner,
.sitemap-inner,
.topics-inner,
.topics-article-inner{
    max-width:880px;
    margin:0 auto;
}

/* 各ページのメインタイトル */
.about-title,
.sitemap-title,
.topics-title,
.topics-article-title{
    font-size:22px;
    font-weight:600;
}

/* タイトルごとの微調整（余白） */
.about-title,
.sitemap-title,
.topics-title{
    margin:0 0 8px;
}
.topics-article-title{
    margin:0 0 4px;
}

/* リード文（about / sitemap / topics 共通） */
.about-lead,
.sitemap-lead,
.topics-lead{
    margin:0;
    font-size:15px;
    line-height:1.9;
    color:#333;
}

/* 各ページのヘッダー（位置はページごとに若干違うが構造上は共通） */
.about-header,
.sitemap-header,
.topics-header,
.topics-article-header{
    margin-bottom:18px;
}
.topics-article-header{
    margin-bottom:14px;
}

/* セクション見出し（about / sitemap / topics 共通） */
.about-section-heading,
.sitemap-section-heading,
.topics-section-heading{
    margin:0 0 4px;
    font-size:17px;
    font-weight:600;
    color:#222;
}

/* 戻りリンクの共通スタイル */
.about-back,
.sitemap-back,
.topics-back,
.topics-article-back{
    margin-top:22px;
    text-align:right;
    font-size:14px;
}

/* =========================================================
   about（このサイトについて）
========================================================= */

.about-section{
    margin-top:22px;
}
.about-section-body{
    margin:0;
    font-size:15px;
    line-height:1.9;
}

/* 1. サイト概要：薄い囲みでブロック感だけ出す */
.about-overview .about-def-list{
    margin:8px 0 0;
    padding:10px 14px 8px;
    border:1px solid #ededed;
    border-radius:4px;
    background:#fafafa;
}
.about-def-row{
    margin-bottom:9px;
}
.about-def-list dt{
    font-weight:bold;
    font-size:15px;
    color:#333;
}
.about-def-list dd{
    margin:2px 0 0;
    padding-left:1.4em;
    font-size:15px;
    line-height:1.9;
}

/* 2. このサイトで出来ること：主役の強調ブロック */
.about-feature-box{
    background:#f7f9fc;
    border-left:3px solid #2f4f7f;
    padding:10px 14px 11px;
    border-radius:4px;
}
.about-feature-list{
    margin:0;
    padding-left:1.2em;
    font-size:15px;
    line-height:1.9;
}
.about-feature-list li{
    margin-bottom:4px;
}

/* 3. 使い方：小見出しごとに軽く区切る */
.about-usage{
    margin-top:24px;
}
.about-subblock{
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid #f0f0f0;
}
.about-subblock:first-of-type{
    margin-top:6px;
    padding-top:0;
    border-top:none;
}
.about-subheading{
    margin:0 0 4px;
    font-size:15.5px;
    font-weight:600;
    color:#333;
}

/* =========================================================
   sitemap（サイトマップ）
========================================================= */

.sitemap-section{
    margin-top:20px;
}

.sitemap-list,
.topics-list{
    margin:4px 0 0 1.2em;
    padding:0;
    font-size:15px;
    line-height:1.9;
}
.sitemap-list li,
.topics-list li{
    margin-bottom:4px;
}

/* =========================================================
   topics（トピックス記事一覧）
========================================================= */

.topics-section{
    margin-top:18px;
}

/* =========================================================
   topics article（トピックス個別記事）
========================================================= */

.topics-article-meta{
    margin:0;
    font-size:14px;
    color:#666;
}

.topics-article-body{
    font-size:15px;
    line-height:1.9;
}
.topics-article-body p{
    margin:0 0 10px;
}
.topics-article-body ul{
    margin:0 0 10px 1.2em;
    padding:0;
}
.topics-article-body li{
    margin-bottom:2px;
}

/* =========================================================
   responsive（タブレット?スマホ）
========================================================= */
@media (max-width:768px){

    #container{
        width:96%;
    }

    /* ヘッダー・タイトルを少しコンパクトに */
    .header{
        padding:18px 0 6px;
    }
    .header a{
        font-size:13px;
    }

    .main-title{
        font-size:28px;
        margin:20px 0 18px;
        letter-spacing:2px;
    }

    /* 検索フォームをフル幅寄りに */
    .search-block{
        margin-bottom:26px;
    }
    .search-form{
        width:100%;
        max-width:none;
    }

    /* 帯文カード（index / search） */
    .band-card{
        padding:14px 14px;
        margin-bottom:18px;
    }
    .band-header{
        font-size:15px;
        margin-bottom:6px;
    }
    .band-box{
        padding:8px 12px 9px;
    }

    /* search.php 専用 2 カラム → 縦並び */
    .band-card-search-inner{
        flex-direction:column;
    }
    .band-card-search-main,
    .band-card-search-side{
        max-width:100%;
        flex:0 0 100%;
    }
    .band-card-search-side{
        border-left:none;
        border-top:1px solid #eee;
        padding-left:0;
        padding-top:8px;
        margin-top:4px;
    }

    /* index：ピックアップ見出しなどを少しコンパクトに */
    .random-section{
        margin-bottom:26px;
    }
    .random-section h2{
        font-size:18px;
        margin-bottom:12px;
    }

    /* index の 2 カラムは縦並びに */
    .two-column{
        flex-direction:column;
        gap:28px;
    }
    .left-column,
    .right-column{
        width:100%;
    }

    /* 詳細ページカード */
    .band-page-card{
        padding:18px;
        margin-top:22px;
    }
    .band-page-recommender,
    .band-page-book{
        font-size:16px;
        margin-bottom:8px;
    }
    .band-page-body{
        font-size:18px;
    }
    .band-page-meta{
        font-size:14px;
        line-height:1.8;
    }
    .band-page-nav{
        font-size:14px;
        margin-top:18px;
    }
    .band-page-back a{
        font-size:14px;
    }

    /* 静的ページ（about / sitemap / topics / topics article）は横幅をフルに */
    .about-inner,
    .sitemap-inner,
    .topics-inner,
    .topics-article-inner{
        max-width:100%;
    }
}

/* ---------------------------------------------------------
   スマホ縦持ち向け（さらに小さい画面）
--------------------------------------------------------- */
@media (max-width:480px){

    body{
        font-size:14px;
        line-height:1.8;
    }

    .header{
        text-align:left;
        padding:12px 0 4px;
    }
    .header a{
        font-size:12.5px;
    }

    .main-title{
        font-size:24px;
        margin:16px 0 14px;
        letter-spacing:1.5px;
    }

    /* 検索フォームを縦並びに */
    .search-block{
        margin-bottom:20px;
    }
    .search-form{
        flex-direction:column;
        gap:8px;
    }
    .search-form button{
        width:100%;
        padding:9px 0;
    }

    /* 帯文カードまわり */
    .band-card{
        padding:12px 12px;
        margin-bottom:16px;
    }
    .band-box{
        padding:7px 10px 8px;
    }
    .band-box p{
        font-size:15px;
        line-height:1.7;
    }
    .band-link{
        font-size:13px;
        margin-top:7px;
    }

    /* 詳細ページ（band.php） */
    .band-page-card{
        padding:16px 12px;
    }
    .band-page-recommender,
    .band-page-book{
        font-size:16px;
    }
    .band-page-body{
        font-size:17px;
    }
    .band-page-meta{
        font-size:13.5px;
    }
    .band-page-nav{
        font-size:13.5px;
    }

    /* 下部 2 カラム（index） */
    .two-column{
        gap:18px;
    }

    /* パンくず・戻るリンクなどは少し小さめに */
    .breadcrumb,
    .about-back,
    .sitemap-back,
    .topics-back,
    .topics-article-back{
        font-size:13px;
    }

    /* フッターもスマホ用に軽く */
    .footer{
        font-size:12.5px;
        padding:24px 0 18px;
        margin-top:40px;
    }
}