/* ========================================
   ゼファー文庫専用CSS
   ======================================== */

/* ヒーロー画像のサイズ調整 */
body.page-bunko .hero-background img {
    max-width: 400px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center top; /* 元の方針に戻す */
}

/* ヘッダーとの重なりを防ぐための余白調整 */
body.page-bunko .hero-background {
    margin-top: 20px; /* 変更前へ戻す */
}

/* ヘッダー固定分の上余白を bunko ページだけ増やす（重なり解消） */
body.page-bunko main {
    padding-top: 120px !important; /* 共通:100px → bunko:120px */
}

@media (max-width: 879px) {
    body.page-bunko main {
        padding-top: 110px !important; /* 共通:90px → bunko:110px */
    }
}

/* ゼファー文庫ページのセクション余白調整 */
/* ヒーロー直後の#aboutセクションは他ページ（1-2sai, preschool, exam）と同じ設定 */
/* 新レイアウトに合わせた余白設定 */
.page-bunko #about {
    padding-bottom: 60px !important; /* 国語力の重要性と同じ余白に */
}

/* #serviceセクションの余白を標準に */
.page-bunko #service {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

/* --- Zephyr文庫ページ専用スタイル --- */

/* 上部：ハイライトテキストと画像の2列表示 */
.page-bunko .bunko-intro-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start; /* テキストを画像の上端に合わせる */
    margin-bottom: 40px;
}

/* 下部：残りのテキストのみ1列表示 */
.page-bunko .bunko-intro-bottom {
    max-width: 100%;
    margin-bottom: 0 !important;
    margin-top: -38px; /* 1cm(約38px)上に移動してバランス調整 */
}

/* ハイライトテキストのスタイル */
.page-bunko .bunko-text-highlight {
    line-height: 2;
}

.page-bunko .bunko-text-highlight p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 2;
}

.page-bunko .bunko-intro-bottom p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.page-bunko .bunko-image img {
    width: 100%;
    max-height: 400px; /* 高さ制限を追加 */
    object-fit: cover; /* アスペクト比を保ちながらサイズ調整 */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    /* 下駄箱をマスキング - 下部15%を切り取り */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 85%);
    margin-bottom: 0 !important;
}

.page-bunko .bunko-service {
    /* margin-bottomは自然な間隔を保つため削除 */
}

.page-bunko .service-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.page-bunko .service-text h3 {
    color: var(--main-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
    border-left: none;
    padding-left: 0;
    border-bottom: 4px solid var(--main-color);
    padding-bottom: 10px;
}

/* 「月替わりおすすめ本の紹介」は全デバイスで中央揃えに統一済み */

.page-bunko .service-text p {
    margin-bottom: 15px;
    line-height: 1.8;
    font-size: 1.1rem;
}

.page-bunko .service-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.page-bunko .bunko-philosophy {
    /* margin-bottomは自然な間隔を保つため削除 */
}

.page-bunko .philosophy-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.page-bunko .philosophy-text p {
    margin-bottom: 20px;
    line-height: 1.8;
    font-size: 1.1rem;
}

.page-bunko .philosophy-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* --- 本は面白い。本を読もう。セクション --- */
.page-bunko .reading-message-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右均等な幅に変更 */
    gap: 40px;
    align-items: center;
    margin-top: 20px;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.page-bunko .reading-message-text p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-color);
    text-align: left;
    margin: 0;
    font-weight: 500;
}

.page-bunko .reading-message-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.page-bunko .reading-message-image img {
    width: 100%; /* テキストエリアの幅に完全に合わせる */
    max-width: none; /* 最大幅制限を削除 */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.page-bunko .reading-message-image img:hover {
    transform: scale(1.05);
}

.page-bunko .bunko-gallery {
    margin-bottom: 30px;
}

.page-bunko .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.page-bunko .image-container-with-popup {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.page-bunko .image-container-with-popup:hover {
    transform: translateY(-5px);
}

.page-bunko .image-container-with-popup img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.page-bunko .image-container-with-popup:hover img {
    transform: scale(1.05);
}

.page-bunko .popup-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.page-bunko .image-container-with-popup:hover .popup-text {
    transform: translateY(0);
}

.page-bunko .popup-text p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* 見出しイラスト設定 */
body.page-bunko #service .section-title::before {
    content: '';
    position: absolute;
    background-image: url('../images/book-closed.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(-15deg);
    width: 80px;
    height: 80px;
    left: 0;
    top: 50%;
    z-index: -1;
    opacity: 0.7;
}

body.page-bunko #service .section-title::after {
    content: '';
    position: absolute;
    background-image: url('../images/book-open.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(15deg);
    width: 80px;
    height: 80px;
    right: 0;
    top: 50%;
    z-index: -1;
    opacity: 0.7;
}

/* #philosophy セクションの見出しイラスト設定 */
body.page-bunko #philosophy .section-title::before {
    content: '';
    position: absolute;
    background-image: url('../images/book.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(-15deg);
    width: 80px;
    height: 80px;
    left: 0;
    top: 50%;
    z-index: -1;
    opacity: 0.7;
}

body.page-bunko #philosophy .section-title::after {
    content: '';
    position: absolute;
    background-image: url('../images/star.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) rotate(15deg);
    width: 80px;
    height: 80px;
    right: 0;
    top: 50%;
    z-index: -1;
    opacity: 0.7;
}

/* レスポンシブ対応 */
@media (max-width: 879px) {
    /* モバイル表示の見切れ防止 */
    .page-bunko .container {
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* モバイル表示でのセクション間隔調整 */
    .page-bunko #about {
        padding-bottom: 28px !important; /* 数ミリ縮小（38px → 28px） */
    }
    
    .page-bunko #service {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    
    /* モバイルでの下部テキスト調整 */
    .page-bunko .bunko-intro-bottom {
        margin-top: -25px; /* モバイルでは少し控えめに調整 */
    }
    
    /* 新しい構造用のモバイル設定 */
    .page-bunko .bunko-intro-top {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .page-bunko .bunko-intro-bottom {
        margin-bottom: 20px;
    }
    
    .page-bunko .service-content,
    .page-bunko .philosophy-content {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* 本文文字サイズ拡大（"一回り" 約+8%） */
    .page-bunko .bunko-text-highlight p,
    .page-bunko .bunko-intro-bottom p,
    .page-bunko .service-text p,
    .page-bunko .philosophy-text p,
    .page-bunko .reading-message-text p {
        font-size: 1.08rem;
        line-height: 1.85;
    }
    /* 段落間隔をやや詰める */
    .page-bunko .bunko-text-highlight p:not(:last-child),
    .page-bunko .bunko-intro-bottom p:not(:last-child),
    .page-bunko .service-text p:not(:last-child),
    .page-bunko .philosophy-text p:not(:last-child) {
        margin-bottom: 16px;
    }
    
    .page-bunko .service-text h3 {
        font-size: 1.3rem;
    }
    
    .page-bunko .reading-message-content {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 15px;
        padding: 15px 10px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .page-bunko .reading-message-text p {
        font-size: 1.1rem;
        text-align: center;
    }

    .page-bunko .reading-message-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
    }
    
    .page-bunko .reading-message-image {
        width: 100%;
        max-width: 100%;
    }
    
    /* モバイル表示での画像サイズ調整 */
    .page-bunko .bunko-image img {
        max-height: 250px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* モバイル表示でのテキスト調整 */
    .page-bunko .bunko-text,
    .page-bunko .service-text,
    .page-bunko .philosophy-text {
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* モバイル表示での見出しイラストサイズ調整 */
    /* 見出し両脇イラストの見切れ防止（内側へ & 少し縮小） */
    body.page-bunko #service .section-title::before {
        width: 52px !important;
        height: 52px !important;
        left: 0 !important;
        transform: translateY(-50%) rotate(-12deg);
    }
         body.page-bunko #service .section-title::after {
         width: 52px !important;
         height: 52px !important;
         right: 0 !important;
         transform: translateY(-50%) rotate(12deg);
     }
     
     /* #philosophy セクションのモバイル表示調整 */
     body.page-bunko #philosophy .section-title::before {
         width: 52px !important;
         height: 52px !important;
         left: 0 !important;
         transform: translateY(-50%) rotate(-12deg);
     }
     
     body.page-bunko #philosophy .section-title::after {
         width: 52px !important;
         height: 52px !important;
         right: 0 !important;
         transform: translateY(-50%) rotate(12deg);
     }
    
    .page-bunko .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .page-bunko .image-container-with-popup img {
        height: 200px;
    }
}