/* ======================================= 
   ファイル名: breakfast-section.css
   朝食セクション用スタイル（修正決定版）
   ======================================= */

/* セクション全体：背景を「上部が青・下部が白」に塗り分ける */
.breakfast-section {
    /* linear-gradientを使い、上から700pxまでを青、それ以降を透明（白）に設定 */
    background: linear-gradient(to bottom, #12458f 0, #12458f 640px, transparent 640px, transparent 100%);
    color: #fff;
    text-align: center;
    padding: 60px 20px 0;
    position: relative;
    font-family: "Yu Mincho", "游明朝体", serif;
}

/* テキスト部分ラッパー */
.breakfast-section .text-wrapper {
    max-width: 850px;
    margin: 0 auto 50px;
}

/* 小見出し */
.breakfast-section .subtitle {
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* タイトル */
.breakfast-section .title-ja {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 8px;
}

.breakfast-section .title-en {
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-bottom: 20px;
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
    padding-bottom: 6px;
}

/* 説明文 */
.breakfast-section .description {
    font-size: 13px;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
    font-weight: 500;
}

/* 大きい画像：青と白の境目に配置 */
.breakfast-section .main-image {
    margin: 60px auto 0;
    max-width: 1200px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 修正後：数値を小さく、透明度を薄く */
    border-radius: 6px;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* 下部のエリア：ここからは背景が白になる前提の配色 */
.breakfast-section .small-images-wrapper {
    max-width: 750px;
    margin: 20px auto 50px;    /* 20pxまで縮める */
    display: flex;
    justify-content: center;
    gap: 20px;
}

.breakfast-section .small-images-wrapper img {
    width: calc((100% / 3) - 13.3px);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    display: block;
}

/* 詳しくはこちらボタン：白背景の上に来るため、青文字・青枠に固定 */
.breakfast-section .plans-link-wrapper {
    padding-bottom: 100px;
}

.breakfast-section .btn-detail {
    display: inline-block;
    padding: 12px 50px;
    font-size: 16px;
    font-weight: 600;
    color: #12458f !important;           /* 強制的に青文字 */
    border: 2px solid #12458f !important; /* 強制的に青枠 */
    background-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.breakfast-section .btn-detail:hover {
    background-color: #12458f !important;
    color: #fff !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .breakfast-section {
        /* スマホは画像が縦に並ぶため、青背景の範囲を広げるか調整が必要 */
        background: linear-gradient(to bottom, #12458f 0, #12458f 470px, transparent 470px, transparent 100%);
        padding: 40px 15px 0;
    }

    .breakfast-section .title-ja { font-size: 28px; }
    .breakfast-section .description { font-size: 12px; }

    .breakfast-section .small-images-wrapper {
        flex-direction: column;
        max-width: 100%;
        margin-top: 40px;
    }

    .breakfast-section .small-images-wrapper img {
        width: 100%;
    }
}