/* =====================================================================
   improvements.css — B担当の新規スタイル専用ファイル
   既存セレクタの修正はC担当。ここには新規要素のスタイルのみを記述する。
   読み込み順: head末尾（reviews.css の直後）。後勝ちで安全に上乗せする。
   ===================================================================== */

/* ---------------------------------------------------------------------
   P0-5: JS失敗時の恒久空白を防ぐフェイルセーフ
   ヒーローの主要テキスト群は main.css で base opacity:0 になっており、
   JS が .is-visible を付けて初めて表示される。JS が落ちると永久に空白。
   ここで base を opacity:1 に戻し、最低限「読める」状態を保証する。
   JS が動く場合は .is-visible の forwards アニメ（最終 opacity:1）が
   そのまま上乗せされるため、演出は一切損なわれない。
   --------------------------------------------------------------------- */
.hero-logo-shell {
    opacity: 1;
}
.hero-copy-block {
    opacity: 1;
}
.hero-main-copy > span {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
}
.hero-copy-word {
    opacity: 1;
    filter: none;
    transform: none;
}
/* JS が発火したら（.is-visible 付与）、main.css の演出アニメに主導権を返す。
   forwards アニメは 0→1 で完結するので最終表示は同一。 */
.hero-copy-block.is-visible .hero-copy-one-line,
.hero-copy-block.is-visible .hero-copy-word {
    will-change: transform, opacity, filter;
}

/* ---------------------------------------------------------------------
   P0-1 / P0-3: ヒーロー内 H1 とベネフィットコピー
   --------------------------------------------------------------------- */
.hero-h1 {
    margin: 0 auto 18px;
    max-width: 900px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.18rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #6e1410;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero-benefit-copy {
    margin: 0 auto 30px;
    max-width: 720px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(0.95rem, 1.9vw, 1.18rem);
    font-weight: 700;
    line-height: 1.6;
    color: #2a2a2a;
    text-align: center;
    background: rgba(255, 255, 255, 0.82);
    border: 2px solid var(--black, #1a1a1a);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 3px 3px 0 var(--shadow, rgba(0, 0, 0, 0.25));
}

@media (max-width: 768px) {
    .hero-h1 {
        font-size: 0.9rem;
        padding: 0 8px;
    }
    .hero-benefit-copy {
        font-size: 0.92rem;
        padding: 10px 12px;
        margin-bottom: 24px;
    }
}

/* ---------------------------------------------------------------------
   P2-10: ヒーロー直下「迷ったらこの3品」ミニショーケース
   アンカー遷移のみ（新規JSなし）。
   --------------------------------------------------------------------- */
.hero-showcase {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 20px 8px;
    text-align: center;
}

.hero-showcase-title {
    font-family: 'Bebas Neue', 'Noto Sans JP', cursive;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.06em;
    margin: 0 0 28px;
    color: var(--black, #1a1a1a);
}

.hero-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.hero-showcase-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: var(--black, #1a1a1a);
    background: var(--white, #fff);
    border: 3px solid var(--black, #1a1a1a);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--shadow, rgba(0, 0, 0, 0.22));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.hero-showcase-card:hover,
.hero-showcase-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--shadow, rgba(0, 0, 0, 0.3));
}

.hero-showcase-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    background: #8f2022;
    color: #fff;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.hero-showcase-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--black, #1a1a1a);
}

.hero-showcase-name {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 14px 12px 4px;
}

.hero-showcase-price {
    font-size: 1.25rem;
    font-weight: 900;
    color: #8f2022;
    padding: 0 12px 12px;
}

.hero-showcase-price small {
    font-size: 0.7rem;
    font-weight: 600;
    color: #555;
    margin-left: 4px;
}

.hero-showcase-cta {
    margin-top: auto;
    padding: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--yellow, #f6c500);
    border-top: 3px solid var(--black, #1a1a1a);
}

@media (max-width: 768px) {
    .hero-showcase-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .hero-showcase-img {
        height: 180px;
    }
    .hero-showcase {
        padding: 32px 16px 4px;
    }
}

/* ---------------------------------------------------------------------
   P1-7: 品質保証（リスク逆転）バッジ — 商品セクション
   tokusho.html の現行条項に基づく、虚偽でない正の表現。
   --------------------------------------------------------------------- */
.guarantee-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 760px;
    margin: 4px auto 28px;
    padding: 14px 18px;
    background: #fff;
    border: 3px solid #2e7d32;
    border-radius: 14px;
    box-shadow: 4px 4px 0 rgba(46, 125, 50, 0.22);
    text-align: left;
}

.guarantee-badge-icon {
    font-size: 1.6rem;
    line-height: 1.4;
    flex: 0 0 auto;
}

.guarantee-badge-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1f1f1f;
}

.guarantee-badge-text strong {
    color: #2e7d32;
    font-weight: 900;
}

.guarantee-badge-link {
    display: inline-block;
    margin-left: 4px;
    color: #2e7d32;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .guarantee-badge {
        gap: 10px;
        padding: 12px 14px;
    }
    .guarantee-badge-text {
        font-size: 0.88rem;
    }
    .guarantee-badge-link {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------
   P1-8: フッターの信頼補強（住所・電話・営業時間）
   --------------------------------------------------------------------- */
.footer-shop-info {
    margin-bottom: 14px;
    line-height: 1.7;
}

.footer-shop-name {
    font-weight: 900;
    font-size: 1.05rem;
    margin: 0 0 4px;
}

.footer-shop-line {
    margin: 2px 0;
}

.footer-tel-link {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.footer-tel-link:hover,
.footer-tel-link:focus-visible {
    text-decoration: underline;
}

.footer-links {
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
   追加: ヒーロー背景を黄色ストライプ → 料理写真 + 中央ヴィネット
   中央(テキスト帯)を明るく保ち、濃赤H1/3D赤コピーの可読性を確保しつつ
   「食品店」であることをファーストビューで伝える。
   --------------------------------------------------------------------- */
.hero-bg {
    /* 世界水準のフードD2Cヒーロー: 深い暖色のダーク下地に料理写真を据え、
       上部(ロゴ/H1帯)はやや暗く保ち白×金タイポの可読性を死守しつつ、
       中央〜下の暗幕を緩めて料理のツヤ・湯気を見せ食欲喚起を回復する。
       background-position を 62%→38% に振り、写真中央の継ぎ目を回避。 */
    background:
        linear-gradient(180deg,
            rgba(18, 9, 6, 0.88) 0%,
            rgba(19, 9, 6, 0.74) 30%,
            rgba(21, 10, 7, 0.50) 58%,
            rgba(18, 9, 6, 0.62) 100%),
        url('../images/media/top-signature-set.webp') 38% 42% / cover no-repeat,
        #150a06 !important;
}

/* ---------------------------------------------------------------------
   追加: ロゴグロー復活 (.hero-logo-glow)
   main.css で display:none にされている暖色ラジアルグローを常時表示し、
   ダーク背景に沈む赤ロゴを暖かい光で浮かせる。.hero-logo-shell は
   position:relative なので絶対配置でロゴ背後(picture=z-index:1 より下)に敷く。
   --------------------------------------------------------------------- */
.hero-logo-glow {
    display: block !important;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 150%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 224, 160, 0.32) 0%,
        rgba(255, 210, 140, 0.16) 40%,
        transparent 65%
    );
    filter: blur(26px);
}

/* ---------------------------------------------------------------------
   追加: 追従クイックナビ(中央ピル / position:sticky)
   料理ショーケース直後に配置。ヒーロー中は画面外、スクロール後に上部追従。
   右上ログイン・左下CTA・右下ミュートと位置が被らない中央配置。
   --------------------------------------------------------------------- */
.sticky-quicknav {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-18px);
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid var(--black, #1a1a1a);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--shadow, rgba(0, 0, 0, 0.22));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* スクロールでヒーローを過ぎたら出現 */
.sticky-quicknav.is-stuck {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sticky-quicknav {
        transition: none;
    }
}

.sqn-brand {
    font-weight: 900;
    color: #8f2022;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding-right: 4px;
}

.sqn-link {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 6px 10px;
    border-radius: 8px;
}

.sqn-link:hover,
.sqn-link:focus-visible {
    background: #f3ece0;
}

.sqn-cta {
    color: #fff;
    background: #8f2022;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.sqn-cta:hover,
.sqn-cta:focus-visible {
    filter: brightness(1.08);
}

.sqn-cart {
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid #1a1a1a;
    background: var(--yellow, #f6c500);
    color: #2C3E50;
    white-space: nowrap;
}

.sqn-cart:hover,
.sqn-cart:focus-visible {
    filter: brightness(1.05);
}

@media (max-width: 768px) {
    .sticky-quicknav {
        gap: 6px;
        padding: 6px 10px;
    }
    .sqn-brand {
        display: none;
    }
    .sqn-link {
        font-size: 0.85rem;
        padding: 6px 8px;
    }
    .sqn-cta,
    .sqn-cart {
        font-size: 0.82rem;
        padding: 7px 11px;
    }
}

/* ---------------------------------------------------------------------
   統合: 2セット用ショーケース(2カラム中央寄せ)
   --------------------------------------------------------------------- */
.hero-showcase-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .hero-showcase-grid--two {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   世界水準ヒーロー: ダーク下地に合わせた上質タイポ(白×金)
   漫画的3D赤コピーを廃し、白×微かな金の発光で高級感を出す。
   ※ メディアロゴ/受賞ピル/バッジは自前の背景を持つためダーク上でも視認可。
   --------------------------------------------------------------------- */
.hero-h1 {
    color: #f3e4c1 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6) !important;
}
.hero-main-copy {
    color: #ffffff !important;
}
.hero-copy-word {
    color: #ffffff !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.28),
        0 3px 22px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(255, 212, 145, 0.20) !important;
}
.hero-copy-block.is-visible .hero-copy-word {
    /* アニメ最終状態でも白を維持(filterのぼかし残りを消す) */
    filter: none !important;
}
.hero-benefit-copy {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #c8a45c !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}