/* 検索結果ページ専用のスタイル */

/* トップページと共通のスタイルがあればここにコピーするか、共通CSSファイルにまとめる */

/* ロゴとタイトルを囲むコンテナ */
.title-with-logo {
    display: flex;
    align-items: center; /* 垂直方向中央寄せ */
    justify-content: center; /* 水平方向中央寄せ */
    margin: 10px auto 0 auto; /* 上下マージンと中央寄せを調整 */
}


/* コンテナ内のh2 */
.title-with-logo h2 {
    margin: 0; /* デフォルトマージンをリセット */
}


.title-text2{
    margin-bottom: 0;
}

.section-wide-white{
    padding-top: 0;
    padding-bottom: 0;
}
.search-box {
    margin-bottom: 10px;
}

.section_hr{
    border-top: 1px solid #ccc;
    background: none;
    height: 0;
/*    width: 85%;*/
    margin: 40px auto;
}

/* 検索結果サマリーとページネーションのスタイル */
.search-summary {
    margin: 0 auto 0 auto;
    max-width: 850px;
    font-size: 1.4rem !important;
}


.search-summary .pagination {
    justify-content: left; /* ページネーションを左寄せ */
}

.search-summary .pagination li a,
.search-summary .pagination li span {
    padding: 8px 0; /* クリック領域の水平方向パディングをゼロに */
    font-size: 1.4rem !important; /* ページネーションの文字サイズをさらに大きく */
}
.search-section {
    text-align: center;
    margin: 40px auto 20px auto; /* 上下マージンと中央寄せを調整 */
}
.search-form {
    display: inline-block;
    margin-bottom: 20px;
    line-height: 0; /* インライン要素の基準線をリセット */
}
.search-form input[type="text"] {
    width: 400px; /* 検索窓の幅を調整 */
    padding: 10px;
    margin-right: 10px;
    vertical-align: middle; /* 上下のずれを修正 */
}
.search-form button {
    padding: 0 20px;
    font-size: 16px; /* 文字サイズを明示的に指定 */
    font-weight: normal; /* 太さをnormalに */
    vertical-align: middle; /* 上下のずれを修正 */
    line-height: normal; /* 行の高さを標準に戻す */
}
.genre-list {
    text-align: center;
    margin-top: 0; /* 上部マージンは維持 */
    padding-top: 0;
}
.genre-list h4 {
    margin-bottom: 20px;
}
.genre-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.genre-list li {
    display: inline-block;
    margin: 0 10px 5px 0;
    /* padding, border, border-radius, cursor は .genre-button に移動 */
}

.genre-link { /* genre-buttonからgenre-linkに変更 */
    display: inline-block; /* インラインブロック要素に */
    margin: 0 5px; /* ジャンル間のスペース */
    color: #333; /* デフォルトの文字色 */
    text-decoration: none; /* 下線を削除 */
    font-size: 14px; /* 文字サイズを小さく */
    font-weight: normal; /* 文字太さはnormalに */
}

/* 選択されたジャンルリンクのスタイル */
.genre-link.active {
    font-weight: bold; /* 太文字 */
    font-size: 1.2em;
    transform: translateY(-6px);
}


.title-with-logo,
    .search-section {
        padding: 0 5px;
    }
/* ページ最上部の画像スタイル */
/* 検索結果コンテナのパディングをリセット */
.search-results.content {
    padding: 0;
}

/* ページ最上部の画像スタイル */
.search-results .top-image {
    margin: 0 auto 40px auto; /* 上下左右のマージンを調整（下部マージンを広げる） */
    padding: 0; /* パディングをゼロに */
    display: block; /* 中央寄せのためにブロック要素に */
    max-width: 100%; /* コンテナ幅に合わせる */
    height: auto;
}

/* 画像要素自体のスタイルをリセット */
.search-results .top-image img {
    display: block;
    margin: 0;
    padding: 0;
}


/* 各書籍のカードスタイル */
.search-results-list {
    margin: 20px auto 0 auto;
    max-width: 850px;
    padding-left: 10px;
    padding-right: 10px;
}

.book-card {
    display: flex; /* 画像と詳細を横並びに */
    border: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 20px;
    align-items: flex-start; /* 上端を揃える */
}

.book-image {
    flex-shrink: 0; /* 画像が縮小されないように */
    margin-right: 20px;
    width: 300px; /* 画像の固定幅を約2倍に */
    height: auto;
}

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

.book-details {
    flex-grow: 1; /* 詳細部分が残りのスペースを占める */
}

.book-details p {
    margin-bottom: 5px; /* 各詳細項目の下部マージン */
    line-height: 1.5;
    display: flex; /* 追加 */
    flex-wrap: wrap; /* 追加 */
}

.book-details strong {
    display: inline-block; /* ラベルと値を揃えるために */
    width: 120px; /* ラベルの幅を固定 */
    margin-right: 10px;
    flex-shrink: 0; /* 追加：ラベルが縮小されないように */
}

.book-details a {
    word-break: break-all; /* URLが長い場合に改行 */
}

hr {
    margin: 30px 0; /* 各書籍カード間の区切り線のマージン */
}

/* 画面右下のCakePHPロゴを非表示にする */
body::after,
footer::after {
    background-image: none !important;
}

@media (max-width: 767px) {
    .container {
        margin: 0 !important;
        padding: 0 !important;
    }
    .search-form {
        display: block;
        margin-bottom: 10px; /* ボタンとの間に隙間を追加 */
    }

    .search-form input[type="text"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px; /* ボタンとの間に隙間を追加 */
    }

    .search-form button {
        width: 100%;
    }
    .search-summary .pagination {
        flex-wrap: wrap;
    }
    .search-summary .pagination li {
/*        margin: 5px;*/ /* 要素間のマージンを追加 */
    }
    .book-card {
        flex-direction: column;
    }
    .book-image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px; /* 画像の下にスペースを追加 */
    }
    .search-summary {
        padding-left: 10px;
        padding-right: 10px;
    }
    .search-summary {
        padding-left: 10px;
        padding-right: 10px;
    }
    .genre-list {
        margin-top: 0;
    }
    .genre-list h4 {
        margin-bottom: 0;
    }
}

.main {
    max-width: 1280px;
    margin: 0 auto; /* 中央寄せのため追加 */
}

.container {
    padding: 0 20px;
}

@media (max-width: 767px) {
    .main {
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        padding: 0 10px;
    }
}

.pagination a {
    line-height: 1.2rem;
    min-width: 1.5rem;
}

/* ツールチップのスタイル */
.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; /* ツールチップがマウスイベントをブロックしないようにする */
    opacity: 0;
    transition: opacity 0.2s;
}

.tooltip.show {
    opacity: 1;
}