/*ヒーロー*/
.hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 600px;

}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*グラデーション*/
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 35%,
            rgba(255, 255, 255, 0.70) 62%,
            rgba(255, 255, 255, 0.88) 100%
        );
        pointer-events: none;
}

/*ヒーロー文字*/
.hero-content {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: max(4%, calc((100% - 1200px) / 2));
    transform: translateY(-50%);
    width: 480px;
    max-width: 90%;
}

.hero-label {
    margin: 0 0 12px;
    color: #c87932;
    font-family: "Times New Roman", serif;
    font-size: 20px;
    font-style: italic;
    letter-spacing: 0.04em;
}

.hero h1 {
    margin: 0 0 22px;
    color: #3b2a20;
    font-size: clamp(
        38px,
        4vw,
        60px
    );
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.08em;
}

.hero-description {
    margin: 0 0 3px;
    color: #332820;
    font-size: 15px;
    line-height: 2.2;
    margin-bottom: 20px;
}

/*メインボタン*/

.main-botton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-width: 180px;
    padding: 14px 26px;
    border-radius: 30px;
    background-color: #70421f;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.1em;
    box-shadow: 0 8px 20px rgba(80, 45, 20, 0.18);
    transition: transform 0.3s ease,
                background-color 0.3s ease,
                box-shadow 0.3s ease;
}

.main-botton span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.main-botton:hover {
    background-color: #3b2a20;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(80, 45, 20, 0.25);
}

.main-botton:hover span {
    transform: translateY(5px);
}

/*共通セクション*/
.section-inner {
    width: min(
        calc(100%-80px),
        1200px
    );
    margin: 0 auto;
}

.section-label {
    margin: 0 0 10px;
    color: #c87932;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.18em;
}

.section-heading h2,
.center-heading h2 {
    margin: 0;
    color: #3b2a20;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.section-heading > p:last-child {
    margin-top: 18px;
    color: #75685d;
    font-size: 14px;
    line-height: 2.1;
}

/*季節セクション*/
.season-section {
    padding: 100px 0;
    background-color: #fcfaf6;
}

.season-section .section-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1090px;
    margin: 0 auto;
}

.season-heading {
    flex-shrink: 0;
    width: 320px;
}



/*季節リンク*/
.season-list {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.season-item {
     width: 155px;       
    height: 155px;     
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e5ddd2;
    border-radius: 50%;   
    background-color: #ffffff;
    font-size: 13px;
    box-sizing: border-box; 
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.season-item:hover {
    transform: translateY(-8px);
    border-color: #e6b273;
    box-shadow: 0 10px 30px rgba(70, 45, 25, 0.08);
}

.season-icon img{
    width: 50px;
}

.season-item .arrow {
    margin-top: 3px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.season-item:hover .arrow {
    transform: translateX(5px);
}

/*おすすめレシピ*/

/*カードを囲むリンクがデザインに影響しないようにするお守り */
.recipe-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


.recommend-section {
    padding: 110px 20px;
    background-color: #f8f5ee;
}

.recommend-section .section-inner {
    max-width: 1050px;
    margin: 0 auto;
}

.center-heading {
    margin-bottom: 45px;
    text-align: center;
}

.center-heading .section-label {
    margin-bottom: 5px;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/*レシピカード*/
.recipe-card {
    background-color: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5ddd2;
    box-shadow: 0 4px 12px rgba(60, 40, 20, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.recipe-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 30px rgba(70, 45, 25, 0.08);
}

/*レシピ画像*/
.recipe-image {
    position: relative;
    overflow: hidden;
}

.recipe-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/*カテゴリー*/
.recipe-category {
    position: absolute;
    top: 12px; 
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.92);
    color: #70421f;
    font-size: 11px;
    letter-spacing: 0.05em; 
}

/*カード本文*/
.recipe-content {
    padding: 20px;
}

.recipe-content h3 {
    margin: 0 0 10px;
    color: #3b2a20;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
}

.recipe-content p {
    min-height: 50px;
    margin: 0 0 14px;
    color: #75685d;
    font-size: 12px;
    line-height: 1.8;
}

/*季節タグ*/
.recipe-season {
    display: inline-block;
    width: max-content;
    margin-right: auto;
    padding: 3px 12px;
    border-radius: 20px;
    background-color: #f3e6d3;
    color: #70421f;
    font-size: 10px;
    letter-spacing: 0.08em;
}

/*セクションボタン*/
.section-button {
    margin-top: 45px; 
    text-align: right; 
}


/*ニュースレター・読みもの*/
.information-section {
    padding: 80px 0 100px;
    background-color: #fcfaf6;
}

.information-section .section-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/*ニュースレター*/
.newsletter {
    padding: 45px;
    background-color: #f1e5d3;
    border-radius: 14px;
}

.newsletter h2 {
    margin: 0 0 15px;
    color: #3b2a20;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.7;
}

.newsletter > p:not(.section-label) {
    margin-bottom: 25px;
    color: #75685d;
    font-size: 13px;
}

/*メールフォーム*/
.newsletter form {
    display: flex;
    gap: 10px;
}

.newsletter input {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    border: none;
    border-radius: 8px;
    outline: none;
    background-color: #ffffff;
    font-size: 13px;
}

.newsletter input::placeholder {
    color: #aaa;
}

.newsletter button {
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background-color: #70421f;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter button:hover {
    background-color: #3b2a20;
}

/*読みもの*/
.articles {
    padding: 15px 0;
}

.articles h2 {
    margin: 0 0 18px;
    color: #3b2a20;
    font-size: 28px;
    font-weight: 500;
}

.article-item {
    min-height: 65px;
    padding: 15px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e5ddd2;
    color: #332820;
    font-size: 13px;
    transition: color 0.3s ease;
}

.article-item:first-of-type {
    border-top: 1px solid #e5ddd2;
}

.article-item > span:last-child {
    font-family: Arial, sans-serif;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.article-item:hover {
    color: #c87932;
}

.article-item:hover > span:last-child {
    transform: translateX(5px);
}


/* ==========================================================================
   タブレット用の調整（画面幅 601px 〜 1024px）
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 1024px) {

        /* 💡 ヒーローエリア：タブレット画面（601px〜1024px）では横並び・右寄せを維持 */
    .hero {
        min-height: 500px; /* 💡 高さを少しコンパクトに調整 */
        height: 500px;
    }

    .hero-image {
        height: 100%;
    }

    /* 💡 グラデーションの白味をタブレットの幅に合わせて少し手前に引く調整 */
    .hero::after {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 20%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 255, 255, 0.92) 100%
        );
    }

    /* 💡 文字ブロックを中央に浮かさず、画面の右側に正しく配置します */
    .hero-content {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: 10% !important;             /* 💡 画面右端からの距離 */
        transform: translateY(-50%);
        width: 350px; 
    }

    .hero-content h1,
    .hero-content .hero-label,
    .hero-content .hero-description {
        text-align: right;        /* 💡 テキストを右寄せにして、右側のラインを綺麗に揃えます */
    }
    
    .hero-content .header-button {
        float: right;             /* 💡 ボタン自体も右側にぴったり配置させます */
        margin-top: 15px;
    }

    .hero h1 {
        font-size: clamp(28px, 4vw, 38px); /* 💡 文字サイズをタブレット用に一回り縮小 */
        line-height: 1.45;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.8;
    }

    .main-botton {
        margin: 0; /* 💡 センター寄せを解除 */
    }


    /* 💡 季節セクションの親の箱自体も、確実に画面の「真ん中」に寄せる設定 */
    .season-section .section-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 30px;
    }

    .site-logo {
        margin-right: 0;
    }

    .global-nav ul {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 💡 タブレット画面（601px以上）で4つの丸を確実に画面のど真ん中（センター）に配置する設定 */
    .season-list {
        display: flex;
        flex-direction: row;
        justify-content: center; /* 💡 4つの丸を中央揃えにします */
        gap: 20px;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    .season-item {
        flex-shrink: 0;
        width: 135px;
        height: 135px;
        padding: 15px 8px;
        font-size: 12px;
    }

    .season-icon img {
        width: 42px;
    }

    /* おすすめレシピ：縦横2列 */
    .recommend-section .recipe-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .recommend-section .recipe-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .recommend-section .recipe-content {
        padding: 20px;
        text-align: left;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .recommend-section .recipe-content p {
        min-height: auto !important;
        margin-bottom: 14px;
        flex: 1;
    }


    /* 読みもの・ニュースレターの縦並び */
    .information-section .section-inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .articles {
        margin: 0 20px;
    }

    /* フッターのセンター寄せ */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }
}

/* ==========================================================================
   スマホ専用の調整（モバイルL〜S：画面幅 600px 以下）
   ========================================================================== */
@media screen and (max-width: 600px) {


    /* ヒーローエリア（メインビジュアル）の調整 */
    .hero {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
    }

    .hero-image {
        height: 260px;
    }

    .hero::after {
        background: none;
    }

    .hero-content {
        position: static;
        transform: none;
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        padding: 30px 20px;
        text-align: center;
        box-sizing: border-box;
    }

    /* ヒーローのメイン見出し（h1） */
    .hero h1 {
        font-size: clamp(20px, 5.5vw, 28px);
        line-height: 1.5;
        letter-spacing: 0.04em;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .main-botton {
        margin: 0 auto;
    }

    /* 季節セクション：タイトルと説明文のセンター配置 */
    .season-section .section-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .season-heading {
        width: 100%;
    }

    .season-section .section-heading h2 {
        font-size: clamp(20px, 5.5vw, 26px);
        line-height: 1.4;
        letter-spacing: 0.06em;
    }

    .season-heading p:last-child br {
        display: none;
    }

    /* スマホ画面（600px以下）では、丸の形を壊さず「左端からキレイに横スクロール」させる */
    .season-section {
        overflow: visible;
    }

    .season-list {
        display: grid;                  /* グリッドレイアウトを開始 */
        grid-template-columns: repeat(2, 1fr); /* 横に2列（均等に半分ずつ）並べる */
        gap: 20px;                      /* 丸と丸の間のスキマ（縦横共通） */
        justify-items: center;          /* 2列の枠の中で丸を中央に寄せる */
        width: 100%;                    /* 横幅いっぱいに広げる */
        margin-top: 20px;               /* タイトルとの間の余白（必要に応じて調整） */
    }


    .season-list::-webkit-scrollbar {
        display: none; /* スクロールバー非表示 */
    }

    .season-item {
        flex-shrink: 1;                 /* 横スクロール用の設定を解除 */
        width: 130px;                   /* 丸のサイズ（画面幅に合わせて少し大きめに調整可） */
        height: 130px;
        padding: 15px 6px;
        box-sizing: border-box;         /* サイズ計算を狂わせないためのお守り */
        margin: 0 auto;                 /* 念のため中央配置 */
    }

    /* 丸枠の中のテキスト調整 */
    .season-item span:not(.season-icon):not(.arrow) {
        font-size: 11px;
        letter-spacing: 0;
        white-space: nowrap;
        display: block;
    }

    .season-icon img {
        width: 34px;
        height: auto;
    }
    
    .season-item .arrow {
        font-size: 14px;
        margin-top: 0;
    }

    /* おすすめレシピ：縦横2列 */
    .recipe-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .recipe-content {
        padding: 12px;
        text-align: left;
    }

    .recipe-content h3 {
        font-size: 15px;
    }

    /* 読みもの・ニュースレター */
    .information-section .section-inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

     .articles {
        margin: 0 20px;
    }

    /* フッター */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .footer-nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
}


/* ==========================================================================
   ニュースレター専用：トースト通知（ポップアップ）のデザイン
   ========================================================================== */
.toast-notification {
    position: fixed;
    bottom: 30px; 
    right: 30px;
    background-color: #70421f; 
    color: #ffffff;
    padding: 16px 28px;
    border-radius: 50px; 
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 30px rgba(70, 45, 25, 0.2);
    z-index: 9999;  
    
    /* ふわっと現れるアニメーションの設定 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;      /* クリックを邪魔しない設定 */
}

/* JavaScriptによってこのクラスが追加された瞬間、画面にふわっと現れます */
.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* スマホ画面（600px以下）のときは、画面の下中央に大きく表示させる調整 */
@media screen and (max-width: 600px) {
    .toast-notification {
        bottom: 20px;
        right: 20px;
        left: 20px;            /* 左右を固定して横いっぱいに広げます */
        text-align: center;
        padding: 14px 20px;
        font-size: 13px;
    }
}