:root {
            --bg-gradient: linear-gradient(135deg, #FCE4EC 0%, #FFEBEE 100%);
            --accent-color: #D81B60;
            --sub-accent: #80CBC4;
            --text-color: #4A4A4A;
            --carnation-url: url('https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/lp/mothersday/carnation.webp');
            --petal-url: url('https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/lp/mothersday/petal.webp');
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
/* 1. すべてのリンクからデフォルトの下線を消す */
a {
    text-decoration: none;
    color: inherit; /* 親要素の文字色を継承させる */
}

/* 2. 商品名（target-lead）の下線デザインは維持したい場合 */
/* 現在のコードで .target-lead span に underline が設定されているため、
   そこだけは「意図したデザイン」として残ります。 */
.target-lead span {
    text-decoration: underline;
    text-decoration-color: var(--sub-accent);
    text-underline-offset: 6px;
}

/* 3. 商品カード全体がリンクになっているため、ホバー時の挙動を調整（任意） */
.product-card:hover {
    text-decoration: none; /* ホバーしても線を出さない */
    opacity: 0.9;
}

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 60px; /* 固定ナビの高さ分 */
        }

        body {
            font-family: 'Noto Serif JP', serif;
            color: var(--text-color);
            background: var(--bg-gradient);
            background-attachment: fixed;
            overflow-x: hidden;
            line-height: 1.8;
        }

      /* --- カテゴリナビゲーションの修正 --- */
.category-nav {
    position: -webkit-sticky; /* Safari対応 */
    position: sticky;
    top: 0;
    width: 100%;
    background: #ffffff; /* 透明度をなくすと文字が重ならず見やすくなります */
    z-index: 9999; /* 他の要素より前面に */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 浮いている感じを出すための影 */
}
        .nav-container {
            display: flex;
            max-width: 900px;
            margin: 0 auto;
        }
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 16px 5px;
            text-decoration: none;
            font-size: 13px;
            letter-spacing: 0.05em;
            color: #888;
            border-left: 1px solid #eee;
            transition: all 0.3s ease;
            font-family: 'Playfair Display', serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-item:last-child { border-right: 1px solid #eee; }
        .nav-item:hover, .nav-item.active {
            background-color: var(--sub-accent);
            color: #fff;
        }

        /* --- 花びらアニメーション --- */
        .petal-base {
            position: fixed; z-index: 5; pointer-events: none;
            background-image: var(--petal-url); background-size: contain;
            background-repeat: no-repeat; will-change: transform;
        }
        .petal-fall { top: -120px; opacity: 0.6; }
        .petal-static { z-index: 2; opacity: 0.4; filter: blur(1px); }

        @keyframes fall {
            0% { top: -120px; transform: translateX(0) rotate(0deg); }
            100% { top: 110vh; transform: translateX(200px) rotate(720deg); }
        }
        @keyframes sway {
            0% { transform: translateX(-80px); }
            100% { transform: translateX(80px); }
        }

/* --- レイアウトの修正 --- */
.wrapper { 
    position: relative; 
    width: 100%; 
    padding: 0 0 0; /* ★ 最後の 80px を 0 に変更 */
    display: flex; 
    justify-content: center; 
    overflow: hidden;
}

/* --- 最後のセクションが背景を隠すように調整 --- */
.product-group:last-of-type {
    padding-bottom: 100px; /* ★ フッターの代わりに、セクション内の下余白を広げて安定させます */
    margin-bottom: 0;
}
        
        .side-carnation {
            position: absolute; width: 400px; height: 600px;
            background-image: var(--carnation-url); background-size: contain;
            background-repeat: no-repeat; pointer-events: none; z-index: 1;
            opacity: 0.8; filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.05));
        }
        .side-left { top: 100px; left: calc(50% - 550px); transform: rotate(-15deg); }
        .side-right { bottom: 0; right: calc(50% - 650px); transform: rotate(15deg) scaleX(-1); }

        .container {
            width: 90%;
            max-width: 900px;
            background: transparent; 
            position: relative; z-index: 10;
        }

        .hero { 
            padding: 80px 20px 60px; 
            text-align: center; 
            background: rgba(255, 255, 255, 0.7); 
            backdrop-filter: blur(2px);
            border-radius: 4px 4px 0 0;
        }
        .hero-title {
            font-family: 'Playfair Display', serif; font-size: clamp(40px, 10vw, 80px); font-style: italic;
            color: #E91E63; line-height: 1.1; margin-bottom: 10px;
        }
.hero-title-jp {
        display: block;
        font-family: 'Noto Serif JP', serif;
        font-size: clamp(18px, 4vw, 28px); /* 英語より小さく設定 */
        font-style: normal;
        font-weight: 600;
        color: #E91E63;
        letter-spacing: 0.1em;
        margin-top: 5px;
    }

    /* スマホ表示の微調整 */
    @media (max-width: 768px) {
        .hero-title { font-size: 48px; }
        .hero-title-jp { font-size: 16px; }
    }

/* ギフト説明文の基本スタイル（PC） */
.gift-description {
    font-size: 16px; /* PCでは少し大きく */
    color: #666;
    line-height: 1.8;
    margin-top: -10px;
}

/* PCでは改行タグを無効化 */
.sp-only {
    display: none;
}

/* info-banner内の点線を削除（前回の修正の反映） */
.info-banner {
    background: #ffffff; 
    padding: 50px 20px; 
    text-align: center;
    border-top: 1px dashed var(--accent-color);
}
        
/* --- リボンラベルのデザイン修正 --- */
.ribbon-label {
    position: absolute;
    top: 20px;
    left: -10px;
    z-index: 10;
    background: #ED437D;
    color: #fff;
    padding: 10px 20px 10px 25px; /* 余白の調整 */
    font-size: 18px; /* 「母の日ギフト限定！」のサイズ */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
    display: inline-block;
}

/* --- カード裏面の補足（PC・スマホ共通の土台） --- */
.card-back-info {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    padding: 0 10px;
}

.card-back-box {
    display: flex;
    flex-direction: row; /* スマホ・PC共通で横並び */
    align-items: center;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #FCE4EC;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    max-width: 580px;
    width: 100%;
    /* PC用の余白設定 */
    padding: 25px 40px;
    gap: 30px;
}

.card-back-thumb {
    width: 140px;    /* PCサイズ */
    height: auto;
    flex-shrink: 0;  /* 画像が潰れるのを防ぐ */
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.08));
}

.card-back-content {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.card-back-desc {
    font-size: 15px; /* PCサイズ */
    color: #D81B60;
    font-weight: 600;
    line-height: 1.5;
}

.card-back-note {
    display: block;
    font-size: 11px; /* PCサイズ */
    color: #999;
    font-weight: normal;
    margin-top: 10px; /* ★文章間の間隔 */
    line-height: 1.4;
}

/* --- ここからがスマホ専用の調整 (@media) --- */
@media (max-width: 768px) {

.pc-only { 
        display: none !important; /* スマホでは改行タグを完全に消す */
    }

    .card-back-box {
        /* 横並び(row)は維持しつつ、隙間と余白をスマホ用に狭める */
        padding: 15px 8px; 
        gap: 8px;
    }
    
    .card-back-thumb {
        width: 80px; /* スマホでは画像を小さくして横幅を確保 */
    }

    .card-back-desc {
        font-size: 12px; /* 文字を少し小さく */
    }

    .card-back-note {
        font-size: 9px;  /* 注釈をさらに小さく */
        margin-top: 5px; /* スマホでは間隔を少しだけ詰める */
    }
}

/* 2行目の「メッセージカード...」のスタイル */
.ribbon-label span {
    font-size: 20px; /* さらに大きく */
    display: block;
    font-weight: 800;
}

/* リボンの右側の切れ込み（文字量に合わせて高さ100%に追従） */
.ribbon-label::after {
    content: '';
    position: absolute;
    top: 0;
    right: -14px;
    border-style: solid;
    /* 上下のボーダー幅を50%にすることで、リボンの高さが変わっても常に中央が凹みます */
    border-width: calc(3.4em * 0.5 + 8px) 0 calc(3.4em * 0.5 + 8px) 15px; 
    border-color: transparent transparent transparent #ED437D;
    height: 0;
}

/* リボンの左側の折り返し（影の部分） - ここが消えないよう固定 */
.ribbon-label::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    border-width: 0 10px 10px 0;
    border-style: solid;
    border-color: transparent #b56b7c transparent transparent;
}

        /* 追加：画像コンテナのスタイル */
        .image-container {
            position: relative;
    max-width: 800px; /* PCサイズを大きく維持 */
    margin: 0 auto 30px;
    border-radius: 0 8px 8px 8px; /* 左上だけリボンに合わせて角を立てる */
    overflow: visible; /* ★重要: リボンをはみ出させるためにvisibleにする */
}
        .image-container img {
            width: 100%; /* コンテナの幅に合わせる */
            height: auto; /* アスペクト比を維持 */
            display: block; /* 画像の下の隙間をなくす */
        }
/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
.gift-description {
        font-size: 13px; /* スマホは元のサイズを維持 */
        line-height: 1.6;
    }

    /* スマホの時だけ改行を復活させる */
    .sp-only {
        display: block;
        content: "";
        margin-top: 0;
    }
    
    /* info-bannerの余白微調整 */
    .info-banner {
        padding: 40px 15px;
    }
    .ribbon-label {
        top: -20px;      /* 15pxから10pxへ変更し、より上部へ */
        left: -8px;     /* 折り返し位置의微調整 */
        padding: 5px 12px 5px 15px; /* 上下余白をさらに詰めました */
        font-size: 11px; /* 圧迫感を減らすためわずかに縮小 */
        line-height: 1.2;
    }

    .ribbon-label span {
        font-size: 13px; 
        margin-top: 1px;
    }

    /* 右側の切れ込み（リボンが細くなった分、さらに数値を調整） */
    .ribbon-label::after {
        border-width: 19px 0 19px 10px; /* 合計高さ38px前後にフィット */
        right: -10px;
    }

    /* 左側の折り返し影 */
    .ribbon-label::before {
        border-width: 0 8px 8px 0;
    }
}
        /* --- セクションデザイン --- */
        .product-group { padding: 60px 40px; background: rgba(255, 255, 255, 0.96); }
        .group-haircare { background: linear-gradient(to bottom, rgba(255,255,255,0.96), #FFF0F5, rgba(255,255,255,0.96)); }
        .group-fragrance { background: linear-gradient(to bottom, rgba(255,255,255,0.96), #F0F8FF, rgba(255,255,255,0.96)); }
        .group-bathbody { background: linear-gradient(to bottom, rgba(255,255,255,0.96), #FFFFF0, rgba(255,255,255,0.96)); }

        .section-title {
            font-size: 22px; margin-bottom: 40px; text-align: center;
            position: relative; padding-bottom: 15px; letter-spacing: 0.1em;
        }
/* 1. タイトル自体の設定を調整 */
.section-title {
    font-size: 22px;
    margin-bottom: 60px; /* 下との余白を少し広げる */
    text-align: center;
    position: relative;
    padding-bottom: 25px; /* ラインが表示されるスペースを確保 */
    letter-spacing: 0.1em;
    overflow: visible !important; /* はみ出しを許可する */
}

/* セクションタイトルのラインを大きく・太く表示 */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -35px;  /* 位置をさらに下げて、文字と重ならないように調整 */
    left: 50%;
    transform: translateX(-50%) scale(1.2); /* scale(1.2)で全体を1.2倍に大きく */
    
    /* 横幅を広げ、高さをしっかり確保することで、画像が潰れるのを防ぎます */
    width: 450px;   
    height: 60px;   /* 高さを十分にとるのがポイントです */
    
    background-image: url('https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/lp/mothersday/line.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top; /* 画像を枠内の上部に配置 */
    
    background-color: transparent !important;
    display: block;
    z-index: 1;
}

/* スマホでは画面からはみ出さないよう調整 */
@media (max-width: 768px) {
    .section-title::after {
        width: 100%;    /* 画面幅いっぱいに */
        max-width: 300px; /* 最大サイズを制限 */
        height: 40px;
        bottom: -25px;
        transform: translateX(-50%) scale(1.1);
    }
}
/* おすすめバッジのスタイル変更 */
.recommend-badge {
    position: absolute;
    top: -15px;      /* 少し上にずらす（大きくした分） */
    left: -15px;     /* 少し左にずらす（大きくした分） */
    background: #80CBC4;
    color: white;
    font-size: 14px; /* 10pxから14pxにアップ */
    padding: 6px 14px; /* 上下6px、左右14pxに広げて存在感を出す */
    border-radius: 25px; /* 丸みを維持 */
    font-weight: bold;
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 少し影をつけると目立ちます */
    white-space: nowrap; /* 文字が折り返さないように固定 */
}
@media (max-width: 768px) {
    .recommend-badge {
        font-size: 12px;   /* スマホで見やすい適度なサイズ */
        padding: 5px 12px;
        top: -4px;
        left: -2%;         /* スマホでは中央寄せにすると、より「おすすめ」感が伝わります */
       
    }
}


/* 導入文全体のコンテナ */
.section-intro {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    margin: -30px auto 40px;
    max-width: 700px;
}

/* 「毎日の暮らしに〜」のコンセプト部分 */
.intro-concept {
    display: block;
    font-size: 16px;
    color: #4A4A4A;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    position: relative;
}

/* 「レールデュサボン〜」の商品名部分 */
.intro-product-name {
    display: inline-block;
    font-size: 12px;
    color: #888; /* 色を薄くして優先度を下げる */
    font-weight: 300;
    letter-spacing: 0.05em;
    padding-top: 4px;
}

@media (max-width: 768px) {
    /* 「毎日の暮らしに〜」等のコンセプト文 */
    .intro-concept {
        font-size: 12px;
        letter-spacing: 0.1em;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    /* 「レールデュサボン〜」等の商品名部分 */
    .intro-product-name {
        display: block;             /* ★ inline-blockから変更。幅いっぱいの「帯」にする */
        width: 100vw;               /* ★ 画面幅いっぱいに広げる */
        margin-left: calc(50% - 50vw); /* ★ 親要素の余白を無視して左端に固定 */
        text-align: center;         /* ★ その「帯」の中で中央に寄せる */
        font-size: 12px;
        transform: scale(0.85);
        transform-origin: center top; /* 中央を軸に縮小 */
        color: #999;
    }

    /* セクションタイトルのマージンも微調整して間隔を詰める */
    .section-intro {
        margin: -20px auto 30px;
    }
.section-title {
        font-size: 15px; /* ここでお好みのサイズに変更してください */
        margin-bottom: 40px; /* 下との余白も少し詰めるとバランスが良いです */
        padding-bottom: 15px;
    }
}


/* ターゲット訴求文：下線デザイン（緑） */
.target-lead {
    display: block;
    font-size: 14px;
    font-weight: 600;
color: var(--sub-accent);
    margin-bottom: 8px; /* 商品名との間隔 */
    text-align: inherit;
}

.target-lead span {
    /* 下線の設定 */
    text-decoration: underline;
    text-decoration-color: var(--sub-accent); /* 緑色 #80CBC4 */
    text-decoration-thickness: 0.8px;            /* 線の太さ */
    text-underline-offset: 6px;                /* ★文字と線の間隔 */
    
    /* 文字自体の強調 */
    letter-spacing: 0.02em;
}

/* PC/スマホ共通：商品情報の配置 */
.product-info {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

@media (max-width: 768px) {
    .product-info {
        align-items: flex-start; /* スマホでは左寄せ */
    }
    .target-lead {
        font-size: 13px;
    }
}
/* セット内容のコンテナ */
.product-contents {
    font-size: 11px;
    color: #888;
    margin: 10px 0;
    width: 100%;
}
/* 「[セット内容]」の見出しスタイル */
.content-label {
    display: block; /* 強制改行 */
    font-weight: 500;
    margin-bottom: 4px;
    color: #888;
}

/* PCのみ横並びにする設定 */
.content-list {
    display: flex;
    flex-wrap: wrap;       /* 幅がいっぱいになったら折り返し */
    justify-content: center; /* PCでは中央寄せ */
    gap: 0 12px;           /* 項目間の横の隙間 */
    list-style: none;
    padding: 0;
}

/* 項目の間に区切り線を入れる（お好みで） */
.content-list li:not(:last-child)::after {
    content: "/";
    margin-left: 12px;
    color: #ddd;
}
/* 項目の区切りにスラッシュを入れる */
.content-list li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #ccc;
}
/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
.content-list {
        display: flex !important;    /* 縦並びを解除して横並びに強制 */
        flex-wrap: wrap;             /* 幅が足りない場合は自動で折り返し */
        justify-content: center; /* 中央寄せ */
        gap: 0 4px;                  /* 項目間の隙間 */
        text-align: left;
    }

    .content-list li {
        margin-bottom: 2px;
        font-size: 9px;             /* 横並びで見やすくするために少し小さく */
    }

    /* スマホでも区切り線のスラッシュを表示させる */
    .content-list li:not(:last-child)::after {
        display: inline-block !important; /* 消していたスラッシュを復活 */
        content: "/";
        margin-left: 4px;
        color: #ccc;
    }

    /* スマホ用の「・」を消す */
    .content-list li::before {
        content: "" !important;      /* 縦並び用の点を消去 */
    }
.content-label {
        font-size: 10px; /* スマホで見やすいように少し小さく調整 */
        margin-bottom: 2px; /* ついでに行間も少し詰めるとスッキリします */
    }
}

/* 価格表示全体のコンテナ */
.price-container {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center; /* PCでは中央、スマホ用設定は別途 */
}

/* 上段：旧価格とバッジの行 */
.old-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

/* 打ち消し線付きの価格 */
.old-price {
    font-size: 11px;
    color: #777;
    text-decoration: line-through;
    font-family: 'Noto Serif JP', serif;
}

/* OFFバッジ */
.discount-badge {
    background: #FF5252;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1.2;
}

/* 下段：現在の販売価格（赤字） */
.sale-price {
    font-family: 'Noto Serif JP', serif;
    color: #E91E63; /* アクセントカラーのピンク・赤系 */
    font-weight: 900;
    font-size: 20px;
    margin: 0;
    line-height: 1;
}

.sale-price span {
    font-size: 11px;
    font-family: 'Noto Serif JP', serif;
    font-weight: normal;
    margin-left: 2px;
}

/* --- スマホ表示の調整（既存のメディアクエリ内に追加） --- */
@media (max-width: 768px) {
    .price-container {
        align-items: flex-start; /* スマホでは左寄せに合わせる */
    }
}

/* 香りの説明を際立たせるスタイル */
.scent-highlight {
    margin: 3px 0;
    padding: 10px 0;
}

.scent-en {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--sub-accent); /* アクセントカラーの緑などで色気を出す */
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.scent-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 12px;
    line-height: 1.8;
    color: #555;
    font-weight: 500;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .scent-highlight {
        border: none; /* スマホでは線を消してスッキリさせてもOK */
        background: #fdfdfd; /* ほんの少しだけ背景色を変えて「特別な枠」感を出す */
        padding: 12px;
        margin: 1px 0;
    }
}
        /* グリッドシステム */
        .grid-2, .grid-3 { display: grid; gap: 30px; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    /* スライドの土台：横並びを強制し、スクロールを滑らかに */
    .grid-2, .grid-3 {
        display: flex !important; /* 横並び */
        flex-direction: row !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* ピタッと止まる魔法の1行 */
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding: 20px 0; /* インジケーター用の下余白 */
        margin: 0 -4%; /* 左右をあえてはみ出させてチラ見せを強調 */
        padding-left: 4%;
        padding-right: 4%;
    }

    /* 商品カード：1枚の幅を調整して「次」が見えるように */
    .product-card {
        flex: 0 0 82%; /* 80-85%にすると右側がチラ見えします */
        scroll-snap-align: center; /* 常に中央で止まる */
        display: block; /* 案1：画像と文字を縦並びに */
        background: #fff;
        padding: 15px 10px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 15px;
        border-radius: 8px;
    }

    /* テキスト情報を中央寄せにして美しく */
    .product-info {
        text-align: center;
        align-items: center;
    }

    /* スクロールバーを消してスッキリ（必要なら） */
    .grid-2::-webkit-scrollbar, .grid-3::-webkit-scrollbar {
        display: none;
    }

    /* シンプルな「横スクロールしてね」のサイン（任意） */
    .product-group::after {
        content: "← Scroll →";
        display: block;
        text-align: center;
        font-size: 10px;
        color: #bbb;
        margin-top: 10px;
        letter-spacing: 0.2em;
    }
}

        .product-card { text-align: center; transition: 0.3s; display: block; /* スマホのflexをPCでは解除 */
    width: 100%;}
        .product-image {
            width: 100%; aspect-ratio: 1/1; background: #FFF;
            margin-bottom: 15px; border-radius: 4px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(0,0,0,0.03);
overflow: hidden; 
    position: relative;
        }
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
        .product-info h3 { font-size: 13px; margin-bottom: 5px; font-weight: 600; }
        .product-info .price { font-family: 'Playfair Display', serif; color: var(--accent-color); font-weight: 600; font-size: 17px; }
        .product-info .desc { font-size: 11px; color: #777; margin-top: 5px; line-height: 1.5; }

/* ボタンの基本スタイル */
.product-button {
    display: block;
    margin: 20px auto 0;
    padding: 12px 20px;
    width: 90%;
    max-width: 240px;
    background: #D81B60; /* アクセントカラーのピンク */
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 50px; /* 丸みのあるデザイン */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(216, 27, 96, 0.2);
    border: none;
    cursor: pointer;
}

/* ホバー時の演出 */
.product-button:hover {
    background: #ad1457;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(216, 27, 96, 0.3);
}

/* スマホ表示の微調整 */
@media (max-width: 768px) {
    .product-button {
        width: 100%; /* スマホでは横いっぱいに */
        font-size: 13px;
        padding: 10px 15px;
        margin-top: 15px;
    }
}

        footer { padding: 40px; text-align: center; font-size: 10px; color: #bbb; border-top: 1px solid #eee; background: #fff; }

        .reveal { opacity: 0; transform: translateY(20px); transition: 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

       @media (max-width: 768px) {
    .wrapper { padding: 0 0 0; overflow: hidden; } /* はみ出し防止 */
    .container { width: 92%; }
    .hero { padding: 40px 20px 40px; }
    .hero-title { font-size: 42px; }
    .info-banner { margin: 0; padding: 40px 20px; }
    .product-group { padding: 60px 20px; }
    
    /* 追加：スマホでの画像コンテナの調整 */
    .image-container {
        margin-bottom: 20px;
    }

    /* グリッドを縦並びに */
    .grid-2, .grid-3 { display: flex; flex-direction: column; gap: 30px; }
    .product-card {
        display: block; /* flexから変更：画像と文字を縦並びに */
        text-align: center; /* 中央寄せ */
        background: rgba(255,255,255,0.85);
        padding: 15px 10px; /* 余白を少し調整 */
        border-radius: 8px;
        backdrop-filter: blur(2px);
        width: 100%;
        box-sizing: border-box;
    }
.product-image {
   flex: none; /* 固定幅解除 */
        width: 100%; /* 横幅いっぱいに */
        height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 15px; /* 下に余白を作る */
        border-radius: 4px;
        overflow: hidden;
    }

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
max-width: 100%;   /* これを追加 */
    display: block;
}


    /* --- スマホでのカーネーション再配置 --- */
    .side-carnation {
        display: block !important; /* 強制表示 */
        width: 250px; /* スマホ用にサイズダウン */
        height: 400px;
        opacity: 0.6; /* 文字の邪魔にならないよう薄く */
        z-index: 0; /* コンテンツの背面に配置 */
    }
    .side-left {
        top: 60px;
        left: -50px; /* 左端から少しはみ出させて配置 */
        transform: rotate(-10deg);
    }
    .side-right {
        bottom: 10%;
        right: -80px; /* 右端から少しはみ出させて配置 */
        left: auto;
        transform: rotate(10deg) scaleX(-1);
    }
}
/* --- フッター被り防止のための追加設定 --- */

/* 1. フッター要素の重なり順を上げ、背景を白で塗りつぶす */
footer, 
.footer-container, 
#footer { 
    position: relative !important;
    z-index: 100 !important; /* 花びら(z-index: 5)より上に配置 */
    background-color: #fff !important; 
    border-top: 1px solid #eee;
}

/* 2. 花びらのz-indexを明示的に低く保つ（既存の.petal-baseがあれば書き換え） */
.petal-base {
    position: fixed; 
    z-index: 5; /* メインコンテンツ(10)やフッター(100)より背面に設定 */
    pointer-events: none;
}

/* 3. ラッパーの下部余白を調整（花びらが消えるスペースを確保） */
.wrapper {
    padding-bottom: 0;
    overflow: hidden;
}
/* --- フッター内コンテンツの垂直位置・カラー・フォント矯正 --- */

/* 1. フォントとカラーを濃く、はっきりとさせる */
.p-footer,
.p-footer__banner-item,
.p-footer__banner-item *, /* タイトルやテキストも網羅 */
.p-sns__item,
.p-footer__nav-item,
.p-footer__nav-link,
.p-footer__copy {
    font-family: 'Noto Serif JP', serif !important;
    color: #333333 !important; /* 視認性の高い濃い色 */
    opacity: 1 !important;      /* 外部CSSの薄まりを解除 */
    text-decoration: none !important;
}

/* 2. バナー（メディア・LINE）の位置と構造の修正 */
.p-footer__banner-item {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.p-footer__banner-item a.p-media-btn {
    display: flex !important;
    align-items: center !important; 
    justify-content: flex-start !important; 
    width: 100% !important;
    max-width: 420px !important; /* 広がりすぎ防止（適宜調整） */
    margin: 0 auto !important;
    padding: 15px !important; 
    box-sizing: border-box !important;
    min-height: 80px !important; 
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;
}

/* 3. SNSアイコンの垂直位置修正 */
.p-sns__list {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    height: auto !important;
    padding: 20px 0 !important;
}

.p-sns__item {
    display: flex !important;
    align-items: center !important; 
    margin: 0 10px !important;
}

.p-sns__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* アイコン自体のサイズと位置 */
.p-sns__link-icon {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
}

/* 4. ナビゲーションリンクの位置修正 */
.p-footer__nav-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
}

/* --- PC表示（769px以上）でのバナー中央寄せ調整 --- */
@media (min-width: 769px) {
    /* 1. リスト全体の横幅を制限して中央に寄せる */
    .p-footer__banner-list {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* 中央に寄せる */
        gap: 20px !important;              /* ボタン同士の隙間 */
        max-width: 800px !important;       /* ★全体の最大幅を制限（ここを小さくするとより寄ります） */
        margin: 0 auto !important;         /* 制限した幅を中央配置 */
    }

    /* 2. 各ボタンの幅を「広がりすぎない」ように設定 */
    .p-footer__banner-item {
        width: 380px !important;           /* ★1つずつのボタンの幅を固定ぎみに設定 */
        flex: 0 1 auto !important;         /* 伸びすぎを防止 */
    }

    .p-footer__banner-item a.p-media-btn {
        width: 100% !important;            /* 親の380pxに対して100% */
        max-width: 380px !important;
    }
}

/* --- 全体共通：カラー・フォントの矯正（ベースを維持） --- */
.p-footer,
.p-footer__banner-item,
.p-footer__banner-item *,
.p-sns__item,
.p-footer__nav-item,
.p-footer__nav-link,
.p-footer__copy {
    font-family: 'Noto Serif JP', serif !important;
    color: #333333 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* 「・」再発防止 */
li[class*="p-footer"]::marker,
li[class*="p-sns"]::marker,
li[class*="p-footer"]::before,
li[class*="p-sns"]::before {
    content: none !important;
    display: none !important;
    font-size: 0 !important;
}
/* --- ロゴの位置調整（右へ寄せる） --- */

.p-media-btn__img-wrap {
    flex-shrink: 0 !important;
    /* もともとの右余白を減らし、左側に余白を入れることで右へ押し出す */
    margin-right: 8px !important;  /* テキストとの距離を少し詰める */
    padding-left: 10px !important; /* ★この数値を大きくするとロゴがより右に移動します */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* メディアロゴ（FITS you.）のサイズ微調整 */
.p-media-btn--fitsyou .p-media-btn__img-wrap img {
    transform: translateX(5px) !important; /* ★個別に右へ動かす微調整 */
}

/* LINEロゴのサイズ微調整 */
.p-media-btn__img {
    transform: translateX(5px) !important; /* ★個別に右へ動かす微調整 */
}

/* ボタン全体のパディングを調整してバランスを取る */
.p-footer__banner-item a.p-media-btn {
    padding-left: 20px !important; /* 左側の空間を少し広げてロゴを内側に寄せる */
}