@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Noto+Serif+JP:wght@700&display=swap');

/* カラーパレット定義:
    背景色 (Deep Red): #9c2431
    背景マッチ色 (Dark Red): #5c1820
    クリスマス赤 (Vibrant Red): #e74c3c
    クリスマス緑 (Christmas Green): #1e8449  <-- 基本色/アクセント
    アクセント色 (Gold/Yellow): #f1c40f
*/

/* ===========================================
// 1. 基本設定 (Base & Typography)
=========================================== */

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    /* 1. 背景色を #9c2431 に設定 */
    background-color: #9c2431; 
    /* 2. 暗い背景に合わせて文字色を明るく変更 */
    color: #f7f7f7; 
    line-height: 1.6;
}

/* ===========================================
// 2. ヒーローセクション (Hero Section)
=========================================== */

#hero picture {
    width: 100%;
    display: block; 
}

#hero img {
    width: 100%;
    display: block;
    object-fit: cover; 
}

@media (min-width: 768px) {
    #hero {
        max-width: 1200px; 
        height: auto;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }

    #hero img {
        width: 100%; 
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    #hero {
        height: 100vh;
    }

    #hero img {
        height: 100%; 
    }
}

/* ===========================================
// 3. インフォメーションセクション (Information Section)
=========================================== */

#information {
    padding: 80px 20px;
    background: #ffffff; 
    text-align: center;
    max-width: 1200px;
    margin: 8px auto 0 auto;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    color: #333; 
}

.info-list {
    display: flex;
    justify-content: center;
    gap: 40px; 
    flex-wrap: nowrap; 
}

.info-item {
    background: #fff;
    /* 修正点: クリスマスイエローの枠線を追加 */
    border: 3px solid #f1c40f; 
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    text-align: left;
    
    /* 修正点: PC時 (768px以上) 2つ並びを想定したサイズ調整 */
    flex: 1 1 45%; 
    max-width: 45%; 
    /* ブラウザによってはmin-widthも設定すると安定します */
    min-width: 300px; 
}

.info-title {
    font-size: 1.3rem;
    margin-bottom: 8px;
    /* 修正点: Flexコンテナにし、内部要素の配置を制御 */
    display: flex;
    align-items: flex-start; /* アイテムを上端に配置 */
}

.info-number {
    font-size: 1.6rem;
    color: #fff;
    /* 修正点: 背景色をクリスマス赤に */
    background: #e74c3c; 
    /* 修正点: 正円 */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-weight: bold;
    /* Flexアイテムとして縮小しないように */
    flex-shrink: 0; 
}

/* 修正点: タイトルテキスト自体が番号の直下を避けて揃うように */
.info-title .info-title-text {
    flex-grow: 1; /* 残りのスペースを使用 */
    word-break: break-word; /* テキストが長い場合に折り返しを許可 */
}

.info-period {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 12px;
}

.info-desc {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* インフォメーションセクションのレスポンシブ調整 */
@media (max-width: 768px) {
    #information {
        padding: 0 0 30px 0; 
        border-radius: 0; 
    }
    .info-list {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 15px;
        gap: 20px;
    }
    .info-item {
        width: 90%;
        max-width: 400px;
        flex: 0 0 auto; 
    }
}

/* ===========================================
// 4. キャンペーンタイトル
=========================================== */

.campaign-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem; 
    font-weight: 700; 
    line-height: 1.5;
    text-align: center; 
    margin: 40px 0 30px; 

    /* 文字色・罫線を背景色に */
    color: #9c2431; 

    padding: 10px 0;
    border-top: 2px solid #9c2431; 
    border-bottom: 2px solid #9c2431; 
}

@media (max-width: 768px) {
    .campaign-title {
        font-size: 1.5rem; 
        padding: 10px 10px; 
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}


/* ===========================================
// 5. カテゴリーセクション (Category & Item Grid)
=========================================== */

.section-header {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    padding: 28px 0;
    background: linear-gradient(90deg, #b0392b 0%, #9c2431 100%);
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

@media (max-width: 768px) {
    .section-header {
        font-size: 1.8rem;
        padding: 60px 10px 40px;
        max-width: 90%;
    }
}

.category-section-block {
    margin-bottom: 60px;
}

/* カテゴリーごとの見出し */
.section-category-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin: 40px auto 30px;
    color: #f7f7f7; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* 罫線を白に戻す */
    border-bottom: 3px solid #ffffff; 
    padding-bottom: 10px;
    max-width: 800px;
    width: 90%;
}

/* 商品グリッド */
.item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 40px;
}

.item img {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    display: block;
    margin-bottom: 0px;
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
}
.item img:hover {
    transform: scale(1.03);
}

.item p {
    text-align: center;
    font-size: 0.95rem;
    color: #cccccc; 
}

/* item-gridのスマホ調整 */
@media (max-width: 768px) {
    .item-grid {
        padding: 0 20px;
        gap: 15px; 
        margin: 30px auto; 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* 右寄せの注釈スタイル */
.memo-image-note {
    text-align: right;
    max-width: 1200px;
    margin: 0px auto 0px; 
    font-size: 13px;
    color: #cccccc; 
}


/* ===========================================
// 6. カテゴリーアンカーナビゲーション (スイーツ、フード、グッズのボタン)
=========================================== */

.category-anchor-nav {
    display: flex;
    justify-content: center; 
    gap: 15px; 
    margin: 40px auto 40px; 
    padding: 10px 20px;
    max-width: 1000px;
    flex-wrap: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

.category-anchor-nav .nav-item {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 10px 20px;
    
    /* 修正点: 基本色 白、枠線 #1e8449、文字 #1e8449 */
    border: 3px solid #1e8449; 
    color: #1e8449; /* クリスマスグリーン */
    background-color: #ffffff; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
    
    border-radius: 8px; 
    transition: all 0.3s ease;
    white-space: nowrap; 
    flex-shrink: 0;
    flex-grow: 1; 
    text-align: center;
    max-width: 300px;
}

/* ホバー時を基本色に反転 */
.category-anchor-nav .nav-item:hover {
    background-color: #1e8449; 
    color: #ffffff; 
    box-shadow: none; 
}

@media (max-width: 768px) {
    .category-anchor-nav {
        padding: 10px 10px;
        justify-content: flex-start; 
        /* 修正点: gap5pxに */
        gap: 5px; 
    }
    .category-anchor-nav .nav-item {
        font-size: 1rem;
        padding: 8px 16px;
    }
}


/* ===========================================
// 7. メモブロック・下部ボタン (Memo Block & CTA)
=========================================== */

.favorite-memo-block {
    background-color: #ffffff; 
    border: 3px solid #f1c40f; 
    padding: 30px 20px;
    margin: 40px auto;
    max-width: 1200px;
    position: relative;
    border-radius: 5px;
    color: #333; 
}

.favorite-memo-block__inner {
    padding: 10px 0;
}

.favorite-memo-block__heading {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c; 
    margin-bottom: 15px;
    text-align: center;
}

.favorite-memo-block__text {
    text-align: center;
    margin-bottom: 20px;
}

/* One Point! リボン */
.memo-ribbon {
    position: absolute;
    top: -15px;
    right: 20px;
    background-color: #f1c40f; 
    color: #333; 
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 横長ボタンの配置 */
.memo-single-button-area {
    margin-top: 20px;
    text-align: center;
}

/* -------------------------------------------
// CTAボタンの基本スタイル（.bottom-button-link）
------------------------------------------- */
.bottom-button-link {
    display: block; 
    width: 100%;
    padding: 15px 10px;
    /* 基本色 #1e8449 (緑) */
    background-color: #1e8449; 
    color: #ffffff; 
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 4px 0 #135c32; 
    border: 2px solid #1e8449; 
    transition: background-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

/* ホバー時を白背景に反転 */
.bottom-button-link:hover {
    background-color: #ffffff; 
    color: #1e8449; 
    box-shadow: 0 2px 0 #cccccc; 
}


/* 横長ボタンの調整 */
.memo-full-width {
    display: inline-block;
    width: 80%;
    max-width: 400px;
    padding: 15px 20px;
    font-size: 18px;
    height: auto;
    line-height: 1.6;
    border-radius: 5px;
}

/* 768px以下 (スマートフォン対応) */
@media (max-width: 768px) {
    .memo-full-width {
        width: 100%;
        font-size: 16px;
    }
    .memo-single-button-area {
        text-align: center; 
    }
}


/* ===========================================
// 8. 下部固定ボタン (Fixed Buttons)
=========================================== */

/* 固定ボタンのコンテナ */
.fixed-buttons-container {
    position: fixed;
    bottom: 20px; 
    right: 20px; 
    z-index: 9999; 
    display: flex; 
    flex-direction: column;
    align-items: flex-end; 
    gap: 10px; 
}

/* 個別のボタンの共通スタイル */
.fixed-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 30px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* お気に入りメモボタン */
.memo-button {
    background-color: #1e8449; 
    color: #ffffff; 
}

/* 先頭へ戻るボタン（赤基調） */
.top-button {
    background-color: #ffffff; 
    color: #e74c3c; 
}

/* 修正点: PC版のホバーエフェクト（お気に入りボタンと先頭へ戻るボタン） */
@media (min-width: 768px) {
    /* お気に入りボタン ホバー: 白背景/緑文字 */
    .memo-button:hover {
        background-color: #ffffff; 
        color: #1e8449; 
    }

    /* 先頭へ戻るボタン ホバー: 赤背景/白文字 */
    .top-button:hover {
        background-color: #e74c3c; 
        color: #ffffff; 
    }
}


.fixed-button .button-icon {
    font-size: 20px;
    margin-right: 5px;
}

.fixed-button .button-text {
    display: inline;
}

/* 768px以下 (スマートフォン対応) */
@media (max-width: 768px) {
    .fixed-buttons-container {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        flex-direction: row; 
        gap: 0;
        border-top: 1px solid #9c2431; 
        background-color: #ffffff; 
        padding: 5px 0;
        opacity: 0; 
        visibility: hidden; 
        transition: opacity 0.6s ease, visibility 0.3s ease;
    }

    .fixed-buttons-container.is-scrolled {
        opacity: 1;
        visibility: visible;
    }
    
    .fixed-button {
        flex: 1; 
        padding: 8px 0;
        border-radius: 0; 
        box-shadow: none;
        background-color: transparent !important; 
        color: #333; 
        flex-direction: column; 
        font-size: 12px;
        /* 修正点: スマホではホバー効果を完全に無効化 */
        transition: none; 
    }

    /* 修正点: 二つのボタンの間に区分けの線を追加 */
    .memo-button {
        border-right: 1px solid #ddd;
    }
    
    .fixed-button .button-icon {
        font-size: 22px;
        margin-right: 0;
        margin-bottom: 3px;
    }

    /* スマホ固定ボタンの色調整 */
    .memo-button {
        color: #1e8449; 
    }
    .top-button {
        color: #e74c3c; 
    }

    /* 修正点: スマホ時、ホバー時のスタイルを削除（タップ専用） */
    .fixed-buttons-container.is-scrolled .fixed-button:hover {
        background-color: transparent; 
    }
}


/* ===========================================
// 9. フッター (Footer)
=========================================== */

footer {
    text-align: center;
    background: #f7f7f7; 
    padding: 40px 20px;
}
.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
.footer-left, .footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-left img {
    width: 200px;
    margin-bottom: 10px;
}
.footer-left p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333; 
}
.footer-right img {
    width: 200px;
    height: auto;
}

.footer-bottom {
    text-align: center; 
    padding: 20px 40px;
    border-top: 1px solid #eee; 
    margin-bottom: 30px;
    color: #333; 
}

/* 修正点: スマホ時、フッターメニューを縦積み (flex-direction: column) に */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex; 
    justify-content: center; 
}

.footer-nav-list li {
    padding: 0 10px; 
}

.footer-nav-list a {
    color: #333; 
    text-decoration: none;
}

.footer-nav-list a:hover {
    color: #e74c3c; 
}

.footer-nav-line {
    margin-bottom: 10px; 
}

.separator {
    margin: 0 5px; 
    color: #999;
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 30px;
    }
    
    /* 修正点: スマホ時、フッターメニューを縦積みに変更 */
    .footer-nav-list {
        flex-direction: column; /* 縦積みに */
        align-items: center;
        gap: 5px;
    }
    
    .footer-nav-list li {
        padding: 5px 0; /* 上下のパディングで間隔を調整 */
    }
    
    .separator {
        display: none; /* 区切り線を非表示に */
    }
    
    /* footer-bottomのリンクを縦積みにするための追加調整 */
    .footer-bottom .footer-nav-line a {
        display: block; /* リンクをブロック化して縦に並べる */
        padding: 5px 0; /* 間隔調整 */
    }
    
    .footer-bottom .separator {
        display: none; /* 区切り線を非表示に */
    }
    
    .footer-bottom .footer-nav-line {
        margin: 10px 0;
    }
}

/* ===========================================
// 10. ユーティリティクラス (Utility Classes)
=========================================== */

.desktop-only { display: none; }
@media (min-width: 768px) {
    .desktop-only { display: inline; }
    .mobile-only { display: none; }
}

.center-container {
  /* Flexコンテナにする */
  display: flex;
  
  /* 画像を水平方向で中央に寄せる */
  justify-content: center;
  
  /* 画像を垂直方向で中央に寄せる */
  align-items: center;
  
  /* セクションの大きさを定義（確認のために必須） */
  width: 100%;
  height: 300px; /* 例として高さを設定 */
  }


.center-image-flex {
  /* 必要に応じて画像のサイズを設定 */
  max-width: 80%; 
  height: auto;
}