@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Yusei+Magic&display=swap');

/* ==========================================================================
   変数の定義 (Theme Tokens)
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #008800; /* エネコープのグリーン系（仮） */
    --color-primary-hover: #006600;
    --color-secondary: #00B1B1;
    --color-accent: #FF5A5F;
    --color-text-main: #333333;
    --color-text-light: #666666;
    --color-bg-base: #FFFFFF;
    --color-bg-light: #F8F9FA;
    --color-bg-alt: #EBF5EB; /* セクションの色分け用（薄いグリーン） */
    --color-border: #DDDDDD;
    
    /* Typography */
    --font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Layout */
    --container-width: 1000px;
    --section-padding: 80px 0;
}

/* ==========================================================================
   リセット & ベース
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    font-family: var(--font-family-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-base);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--color-primary); text-decoration: none; transition: opacity 0.3s ease; }
a:hover { opacity: 0.7; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   レイアウト
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}
.content-box {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid #e0e0e0;
    text-align: center;
}

/* ==========================================================================
   セクション共通
   ========================================================================== */
section {
    padding: var(--section-padding);
}
.section-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-primary);
}
.section-desc {
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
}

/* セクション背景の出し分け（リズムを作るため） */
.section-price { background-color: var(--color-bg-base); }
.section-savings { background-color: var(--color-bg-alt); }
.section-point { background-color: var(--color-bg-base); }
.section-delivery { background-color: var(--color-bg-light); }
.section-faq { background-color: var(--color-bg-base); }
.section-notes { 
    background-color: #ffffff; 
    padding: 60px 0; 
}

/* ==========================================================================
   各セクション詳細
   ========================================================================== */
/* Header */
.header {
    background-color: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* スクロール開始時のすりガラス（Glassmorphism）効果 */
.header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(220, 225, 230, 0.65);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

@supports not (backdrop-filter: blur(1px)) {
    .header.is-scrolled {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

.header-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo {
    display: flex;
    align-items: center;
}
.header-logo img {
    height: 40px; /* ロゴの高さ調整 */
    width: auto;
}

/* =========================================
   Hero Section (地球と飛ぶトドック)
========================================= */
:root {
    /* 緩やかで雄大な地球の丸み（半径を大きくして丸すぎないように調整） */
    --earth-r: 3200px;
    --earth-center-y: calc(100% + var(--earth-r) - 570px);
}
@media (max-width: 768px) {
    :root {
        --earth-r: 1800px;
        --earth-center-y: calc(100% + var(--earth-r) - 380px);
    }
}

.hero-section {
    padding: 0;
    position: relative;
    overflow: hidden;
    height: clamp(920px, 75vw, 1040px);
    background: linear-gradient(180deg, #bde2f9 0%, #caeafb 40%, #def1fc 70%, #edf7fd 100%);
    text-align: center;
    z-index: 1;
    transition: background 1.2s ease;
}

@media (max-width: 768px) {
    .hero-section {
        height: clamp(680px, 155vw, 780px);
    }
}

/* =========================================
   時間帯切り替えスイッチ（遊び心ギミック）
========================================= */
.hero-time-switch {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    padding: 3px;
    border-radius: 999px;
    box-shadow: none;
    transition: all 0.5s ease;
}

.time-switch-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.03em;
    color: #666666;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.time-switch-btn:hover {
    color: #111111;
}

.time-switch-btn.is-active {
    background: #ffffff;
    color: #111111;
    box-shadow: none;
    border: 1px solid #ddd;
}

/* 夕方モード時のスイッチ外観（優しい夕暮れ色に調和） */
html.is-time-evening .hero-time-switch {
    background: rgba(255, 250, 245, 0.88);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}
html.is-time-evening .time-switch-btn.is-active {
    background: #ffffff;
    color: #d96328;
    box-shadow: none;
    border: 1px solid rgba(210, 100, 50, 0.3);
}

/* 夜景モード時のスイッチ外観（夜空に馴染むシックなすりガラス） */
html.is-time-night .hero-time-switch {
    background: rgba(18, 30, 52, 0.8);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
html.is-time-night .time-switch-btn {
    color: #94a3b8;
}
html.is-time-night .time-switch-btn:hover {
    color: #ffffff;
}
html.is-time-night .time-switch-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* スマホ表示対応 */
@media (max-width: 640px) {
    .hero-time-switch {
        top: 10px;
        right: 10px;
        padding: 2px;
    }
    .time-switch-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* =========================================
   時間帯（夕方 / 夜景）テーマ設定
========================================= */

/* --- 夕方モード (16:00〜18:30 または ?time=evening) --- */
/* 明るく暖かみのある優しいゴールデンアワーの夕暮れ（恐怖感を排除し、安心感と温もりのある美しい空に） */
html.is-time-evening .hero-section {
    background: linear-gradient(180deg, #5b8ecb 0%, #8bb1dc 22%, #fba68f 52%, #fdb96b 78%, #fedb58 100%);
}
/* 夕方の雲：ほんのり夕日に照らされた明るくやわらかな白 */
html.is-time-evening .hero-cloud {
    background: rgba(255, 248, 240, 0.92);
    filter: none;
}
/* 夕方のトドック：自然で穏やかな影 */
html.is-time-evening .hero-flytodock {
    filter: none;
}

/* --- 夜景モード (18:30〜06:00 または ?time=night) --- */
html.is-time-night .hero-section {
    background: linear-gradient(180deg, #091224 0%, #101e38 35%, #192f54 65%, #254474 100%);
}
/* 夜の雲：月明かりのブルーグレー */
html.is-time-night .hero-cloud {
    background: rgba(175, 198, 228, 0.45);
    filter: none;
}
/* 夜のトドック：光らせず自然な影のみ（落ち着いた飛行演出） */
html.is-time-night .hero-flytodock {
    filter: none;
}

/* --- 夜空の星々（キラキラ瞬くアニメーション） --- */
.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}
html.is-time-night .hero-stars {
    opacity: 1;
}

.hero-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: none;
    animation: starTwinkle 3s ease-in-out infinite alternate;
}

/* 星の個別配置と点滅ディレイ */
.star-1  { top: 12%; left: 8%;  animation-duration: 2.4s; animation-delay: 0.2s; transform: scale(1.2); }
.star-2  { top: 22%; left: 16%; animation-duration: 3.1s; animation-delay: 0.8s; }
.star-3  { top: 8%;  left: 28%; animation-duration: 2.8s; animation-delay: 1.4s; transform: scale(1.4); }
.star-4  { top: 26%; left: 36%; animation-duration: 3.6s; animation-delay: 0.4s; }
.star-5  { top: 15%; left: 45%; animation-duration: 2.2s; animation-delay: 1.1s; transform: scale(0.9); }
.star-6  { top: 7%;  left: 62%; animation-duration: 3.4s; animation-delay: 0.5s; transform: scale(1.3); }
.star-7  { top: 24%; left: 70%; animation-duration: 2.6s; animation-delay: 1.6s; }
.star-8  { top: 11%; left: 78%; animation-duration: 3.0s; animation-delay: 0.3s; transform: scale(1.5); }
.star-9  { top: 28%; left: 86%; animation-duration: 2.5s; animation-delay: 1.9s; }
.star-10 { top: 16%; left: 93%; animation-duration: 3.3s; animation-delay: 0.7s; transform: scale(1.1); }
.star-11 { top: 35%; left: 22%; animation-duration: 2.9s; animation-delay: 1.3s; transform: scale(0.8); }
.star-12 { top: 38%; left: 80%; animation-duration: 3.2s; animation-delay: 0.6s; transform: scale(1.0); }

@keyframes starTwinkle {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* --- 流れ星（シューティングスター） --- */
.hero-shooting-star {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 1) 100%);
    border-radius: 999px;
    filter: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: right center;
}

/* 流れ星の先端（光る核） */
.hero-shooting-star::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: none;
}

/* 流れ星1: 左上から（周期 7秒） */
.shooting-star-1 {
    top: 8%;
    left: 14%;
    width: 95px;
    animation: shootStar1 7s ease-out infinite;
    animation-delay: 1.0s;
}

/* 流れ星2: 中央上部から（周期 10秒） */
.shooting-star-2 {
    top: 12%;
    left: 42%;
    width: 120px;
    animation: shootStar2 10s ease-out infinite;
    animation-delay: 4.8s;
}

/* 流れ星3: 右上から（周期 8.5秒） */
.shooting-star-3 {
    top: 18%;
    left: 68%;
    width: 85px;
    animation: shootStar3 8.5s ease-out infinite;
    animation-delay: 2.6s;
}

@keyframes shootStar1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    12% {
        transform: translate3d(200px, 125px, 0) rotate(32deg);
        opacity: 0;
    }
    100% {
        transform: translate3d(200px, 125px, 0) rotate(32deg);
        opacity: 0;
    }
}

@keyframes shootStar2 {
    0% {
        transform: translate3d(0, 0, 0) rotate(35deg);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    10% {
        transform: translate3d(230px, 161px, 0) rotate(35deg);
        opacity: 0;
    }
    100% {
        transform: translate3d(230px, 161px, 0) rotate(35deg);
        opacity: 0;
    }
}

@keyframes shootStar3 {
    0% {
        transform: translate3d(0, 0, 0) rotate(30deg);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    13% {
        transform: translate3d(170px, 98px, 0) rotate(30deg);
        opacity: 0;
    }
    100% {
        transform: translate3d(170px, 98px, 0) rotate(30deg);
        opacity: 0;
    }
}

/* --- 昼用の飛行機（コントレイル / 飛行機雲つき・時々飛行） --- */
.hero-airplane-track {
    display: none;
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}
html.is-time-day .hero-airplane-track {
    display: block;
}

.hero-airplane-unit {
    position: absolute;
    left: -180px;
    display: inline-flex;
    align-items: center;
    transform: rotate(2deg);
    animation: flyAirplane 25s linear infinite;
    animation-delay: 2.2s;
    will-change: transform;
}

.airplane-contrail {
    width: clamp(70px, 12vw, 130px);
    height: 2.5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: 999px;
    filter: blur(0.3px);
    margin-right: -4px;
}

@keyframes flyAirplane {
    0% {
        transform: translate3d(-60px, 0, 0);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    24% {
        transform: translate3d(calc(100vw + 260px), -15px, 0);
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        transform: translate3d(calc(100vw + 260px), -15px, 0);
        opacity: 0;
    }
}

/* --- 夕方用の淡い三日月と一番星（宵の明星・金星） --- */
.hero-evening-moon-star {
    position: absolute;
    top: 13%;
    left: 20%;
    pointer-events: none;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

html.is-time-evening .hero-evening-moon-star {
    opacity: 1;
}

/* 淡い三日月（夕月）：夕暮れ空に溶け込む優しい光 */
.evening-moon {
    display: block;
    filter: none;
    animation: eveningMoonGlow 4.5s ease-in-out infinite alternate;
}

@keyframes eveningMoonGlow {
    0% {
        filter: none;
        transform: scale(0.98);
    }
    100% {
        filter: none;
        transform: scale(1.02);
    }
}

/* 一番星（宵の明星）：三日月の右上近傍でキラリと瞬く */
.evening-star {
    position: absolute;
    top: -10px;
    right: -24px;
    filter: none;
    animation: eveningStarTwinkle 2.8s ease-in-out infinite alternate;
}

@keyframes eveningStarTwinkle {
    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.22);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.85;
    }
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .hero-evening-moon-star {
        top: 10%;
        left: 14%;
        transform: scale(0.85);
    }
}
@media (max-width: 480px) {
    .hero-evening-moon-star {
        top: 9%;
        left: 10%;
        transform: scale(0.75);
    }
}

/* 空と雲の装飾（左から右へ流れるアニメーション） */
.hero-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 50px;
    filter: none;
    will-change: transform;
    pointer-events: none;
}
.hero-cloud::before,
.hero-cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

/* --- 1. 奥層（遠景・雄大にゆっくり流れる雲：パララックス奥） --- */
.hero-cloud-far {
    opacity: 0.55;
    filter: none;
    z-index: 1;
}
.hero-cloud-far-1 {
    top: 6%;
    width: 175px;
    height: 48px;
    animation: cloudFlowFar 140s linear infinite;
    animation-delay: -45s;
}
.hero-cloud-far-1::before { width: 85px; height: 85px; top: -42px; left: 32px; }
.hero-cloud-far-1::after { width: 62px; height: 62px; top: -28px; left: 95px; }

.hero-cloud-far-2 {
    top: 30%;
    width: 210px;
    height: 54px;
    opacity: 0.46;
    animation: cloudFlowFar 170s linear infinite;
    animation-delay: -90s;
}
.hero-cloud-far-2::before { width: 98px; height: 98px; top: -48px; left: 38px; }
.hero-cloud-far-2::after { width: 74px; height: 74px; top: -34px; left: 116px; }

@keyframes cloudFlowFar {
    0% {
        transform: translateX(-240px);
        left: 0;
    }
    100% {
        transform: translateX(0);
        left: calc(100% + 240px);
    }
}

/* --- 2. 中層（標準の雲：ゆったり穏やかな中速） --- */
.hero-cloud-1 {
    top: 12%;
    width: 70px;
    height: 24px;
    z-index: 2;
    animation: cloudFlow 85s linear infinite;
    animation-delay: -15s;
}
.hero-cloud-1::before { width: 30px; height: 30px; top: -14px; left: 14px; }
.hero-cloud-1::after { width: 22px; height: 22px; top: -10px; left: 36px; }

.hero-cloud-2 {
    top: 38%;
    width: 95px;
    height: 30px;
    opacity: 0.88;
    z-index: 2;
    animation: cloudFlow 75s linear infinite;
    animation-delay: -40s;
}
.hero-cloud-2::before { width: 44px; height: 44px; top: -22px; left: 18px; }
.hero-cloud-2::after { width: 32px; height: 32px; top: -15px; left: 52px; }

.hero-cloud-3 {
    top: 14%;
    width: 105px;
    height: 32px;
    opacity: 0.92;
    z-index: 2;
    animation: cloudFlow 95s linear infinite;
    animation-delay: -60s;
}
.hero-cloud-3::before { width: 48px; height: 48px; top: -22px; left: 22px; }
.hero-cloud-3::after { width: 34px; height: 34px; top: -14px; left: 56px; }

.hero-cloud-4 {
    top: 48%;
    width: 135px;
    height: 40px;
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.78);
    z-index: 2;
    animation: cloudFlow 115s linear infinite;
    animation-delay: -10s;
}
.hero-cloud-4::before { width: 68px; height: 68px; top: -35px; left: 24px; }
.hero-cloud-4::after { width: 50px; height: 50px; top: -24px; left: 74px; }

.hero-cloud-5 {
    top: 24%;
    width: 80px;
    height: 26px;
    opacity: 0.85;
    z-index: 2;
    animation: cloudFlow 80s linear infinite;
    animation-delay: -30s;
}
.hero-cloud-5::before { width: 36px; height: 36px; top: -16px; left: 16px; }
.hero-cloud-5::after { width: 26px; height: 26px; top: -12px; left: 42px; }

@keyframes cloudFlow {
    0% {
        transform: translateX(-160px);
        left: 0;
    }
    100% {
        transform: translateX(0);
        left: calc(100% + 160px);
    }
}

/* --- 3. 手前層（トドックの手前・近傍を優雅に流れる風雲：穏やかな前進感） --- */
.hero-cloud-near {
    z-index: 13; /* トドック(z-index: 12)のすぐ前面または近傍を通過！ */
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.90);
    filter: none;
}

.hero-cloud-near-1 {
    top: 18%;
    width: 65px;
    height: 20px;
    animation: cloudFlowNear 38s linear infinite;
    animation-delay: -10s;
}
.hero-cloud-near-1::before { width: 28px; height: 28px; top: -12px; left: 12px; }
.hero-cloud-near-1::after { width: 20px; height: 20px; top: -8px; left: 32px; }

.hero-cloud-near-2 {
    top: 28%;
    width: 82px;
    height: 24px;
    animation: cloudFlowNear 45s linear infinite;
    animation-delay: -25s;
}
.hero-cloud-near-2::before { width: 34px; height: 34px; top: -15px; left: 16px; }
.hero-cloud-near-2::after { width: 24px; height: 24px; top: -10px; left: 44px; }

@keyframes cloudFlowNear {
    0% {
        transform: translateX(-120px) scale(0.95);
        left: 0;
        opacity: 0;
    }
    15% {
        opacity: 0.75;
    }
    85% {
        opacity: 0.75;
    }
    100% {
        transform: translateX(0) scale(1.05);
        left: calc(100% + 120px);
        opacity: 0;
    }
}


/* --- 飛ぶトドック ＆ 給油ホース（flytodock.png 1.2倍サイズ） --- */
.hero-flytodock-wrap {
    position: absolute;
    top: 4.5%;
    left: 47%;
    transform: translateX(-50%);
    z-index: 12; /* 建物・地表より前面でピンボール飛行 */
    pointer-events: auto; /* マウス近接＆クリック検知可能 */
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    will-change: transform;
}

.hero-flytodock-wrap:hover .hero-flytodock {
    filter: none;
}

.hero-flytodock-wrap.is-bouncing .hero-flytodock {
    filter: none;
    transform: scale(1.08);
}

.hero-flytodock-inner {
    position: relative;
    display: inline-block;
    animation: todockHover 4.2s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.hero-flytodock {
    display: block;
    width: clamp(180px, 26.4vw, 276px);
    height: auto;
    filter: none;
    position: relative;
    z-index: 2; /* ホース(z-index: 1)の前面 */
    transition: filter 0.25s ease, transform 0.25s ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}

/* 給油ガンから伸びる波打つホース（SVG） */
.hero-fuel-hose {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1; /* トドック本体(z-index: 2)の背後に配置 */
    pointer-events: none;
}

.hose-path {
    filter: none;
}

/* トドックのゆらゆら飛行アニメーション（ホースも連動して一体で浮遊） */
@keyframes todockHover {
    0% {
        transform: translate(0, 0) rotate(-2deg);
    }
    25% {
        transform: translate(-9px, -15px) rotate(1deg);
    }
    50% {
        transform: translate(6px, -7px) rotate(-1.5deg);
    }
    75% {
        transform: translate(-3px, -20px) rotate(2deg);
    }
    100% {
        transform: translate(0, 0) rotate(-2deg);
    }
}

/* --- 地球ステージ（回転するビル群と黄色い地表） --- */
.hero-earth-stage {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

/* 円盤（自転する土台・穏やかな速度（360s）にしてゆったり街並みを流す） */
.hero-earth-rotator {
    position: absolute;
    left: 50%;
    top: var(--earth-center-y);
    width: 0;
    height: 0;
    z-index: 5; /* 黄色い地表（z-index: 2）より前面！確実に手前に表示 */
    animation: rotateEarth 360s linear infinite;
    will-change: transform;
}

@keyframes rotateEarth {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 円周上の各建物コンテナ */
.earth-item {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    transform-origin: 0 0;
    /* 原点(0,0)から角度θ回転し、真上に半径R（地表境界）移動し、自身の幅の50%分左へ（左右中央） */
    transform: rotate(var(--deg, 0deg)) translateY(calc(-1 * var(--earth-r))) translateX(-50%);
    pointer-events: none;
}

/* 画像本体：底辺（bottom: -3px）を地表に接地させ、空に向かって直立させる */
.earth-item img {
    display: block;
    position: absolute;
    bottom: -3px; /* 地表のカーブに接地 */
    left: 0;
    width: 100% !important;
    max-width: none !important; /* グローバルimg { max-width: 100% } による幅0潰れを防止 */
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* 各ビルの基準幅設定（親コンテナに明示的な幅を付与） */
.earth-item.buil-1 { width: 75px; }  /* 高層マンション */
.earth-item.buil-2 { width: 86px; }  /* 中層マンション */
.earth-item.buil-3 { width: 155px; } /* 家＋車＋木 */
.earth-item.buil-4 { width: 145px; } /* 家＋車＋木 */
.earth-item.buil-5 { width: 148px; z-index: 6; } /* 丘＋家（マッチョ表示用） */
.earth-item.buil-6 { width: 235px; } /* マンション＋コンビニ店舗 */

/* スマホ用ビルのスケール調整 */
@media (max-width: 768px) {
    .earth-item img {
        bottom: -2px;
    }
    .earth-item.buil-1 { width: 50px; }
    .earth-item.buil-2 { width: 58px; }
    .earth-item.buil-3 { width: 104px; }
    .earth-item.buil-4 { width: 98px; }
    .earth-item.buil-5 { width: 100px; z-index: 6; }
    .earth-item.buil-6 { width: 158px; }
}

/* 黄色い地表（地球・丘） */
.hero-earth-ground {
    position: absolute;
    left: 50%;
    top: var(--earth-center-y);
    width: calc(var(--earth-r) * 2);
    height: calc(var(--earth-r) * 2);
    margin-left: calc(-1 * var(--earth-r));
    margin-top: calc(-1 * var(--earth-r));
    border-radius: 50%;
    background-color: #fedd00; /* 添付画像通りのコープイエロー */
    z-index: 2; /* 建物（z-index: 5）の背後・土台として描画 */
}

/* --- 地表内のキャンペーンタイトルエリア（25周年バッジ & 生活応援キャンペーン） --- */
.hero-campaign-title-wrap {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    max-width: 880px;
    z-index: 8; /* 建物(z-index: 5)・地表(z-index: 2)より前面 */
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 25周年バッジ（text.pngの背面に配置） */
.hero-badge-25year {
    width: clamp(180px, 28vw, 280px);
    margin-bottom: -18px; /* 下の生活応援キャンペーン文字と絶妙に重なる */
    z-index: 1; /* ★ text.png(z-index: 3)の後ろに配置 */
    transform: translateX(-24px); /* 添付画像通り、中央やや左（活応援の上）に配置 */
    filter: none;
}
.hero-badge-25year img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
}

/* 生活応援キャンペーン ロゴ文字（前面に配置 & アクセス時ポップインアニメーション） */
.hero-main-title-text {
    position: relative;
    width: 100%;
    max-width: 820px;
    z-index: 3; /* ★ 25周年バッジ(z-index: 1)および風船の紐の手前にクッキリ重ねる */
    filter: none;
    overflow: visible; /* ★ 拡大時に両サイドが切れるのを完全に防止 */
}
.hero-main-title-text img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    animation: titlePopIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* アクセス時のポップイン（元気に飛び出すバウンス登場：両サイドが切れないマイルド設計） */
@keyframes titlePopIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(28px);
    }
    55% {
        opacity: 1;
        transform: scale(1.035) translateY(-5px);
    }
    75% {
        transform: scale(0.985) translateY(2px);
    }
    90% {
        transform: scale(1.008) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 生活応援キャンペーン 全体開催期間バッジ（FVタイトル直下） */
.hero-campaign-period-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 4px;
    position: relative;
    z-index: 4;
    animation: presentFadeUp 0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
}
.hero-campaign-period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    padding: 7px 22px 6px;
    border-radius: 40px;
    box-shadow: none;
    border: 2px solid #00A03E;
}
.hero-campaign-period .period-badge {
    background: #00A03E;
    color: #ffffff;
    font-size: clamp(0.72rem, 1.5vw, 0.82rem);
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}
.hero-campaign-period .period-dates {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Outfit', 'Montserrat', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    color: #000000;
    line-height: 1;
}
.hero-campaign-period .p-date-main {
    font-size: clamp(1.2rem, 3.2vw, 1.65rem);
    letter-spacing: -0.01em;
    color: #000000;
}
.hero-campaign-period .p-date-day {
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    font-weight: 900;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: baseline;
    letter-spacing: 0.02em;
    color: #000000;
}
.hero-campaign-period .p-date-sep {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 900;
    margin: 0 6px;
    color: #333333;
}

@media screen and (max-width: 768px) {
    .hero-campaign-period-wrap {
        margin: 6px auto 2px;
    }
    .hero-campaign-period {
        padding: 5px 14px 4px;
        gap: 6px;
    }
    .hero-campaign-period .period-badge {
        font-size: 0.68rem;
        padding: 2px 7px;
    }
    .hero-campaign-period .p-date-main {
        font-size: 1.15rem;
    }
    .hero-campaign-period .p-date-day {
        font-size: 0.65rem;
    }
    .hero-campaign-period .p-date-sep {
        margin: 0 4px;
    }
}

/* --- プレゼントキャンペーンエリア（新規加入25名様・A/B/C賞） --- */
.hero-present-campaign {
    width: 100%;
    max-width: 860px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    animation: presentFadeUp 0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.35s both;
}

@keyframes presentFadeUp {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 上部ヘッダー（対象アイコン群 ＋ キャンペーン案内文） */
.present-cp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.6vw, 28px);
    margin-bottom: clamp(12px, 2vw, 20px);
    width: 100%;
}

/* 対象サービスグループ（バッジ ＋ 3アイコン） */
.present-target-group {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
    background: rgba(255, 255, 255, 0.38);
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

/* 「対象」ピルバッジ */
.present-target-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d63031;
    color: #ffffff;
    font-size: clamp(0.75rem, 1.1vw, 0.88rem);
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    box-shadow: none;
    flex-shrink: 0;
}

.present-cp-icons {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.present-icon-box {
    width: clamp(42px, 5.2vw, 58px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.present-icon-box:hover {
    transform: none;
}

.present-icon-img {
    width: 100% !important;
    height: auto;
    display: block;
    filter: none;
}

/* 案内リード文 */
.present-cp-lead {
    text-align: left;
    color: #3e2009;
    letter-spacing: 0.02em;
    line-height: 1.32;
}

.present-lead-line1 {
    font-size: clamp(0.96rem, 1.8vw, 1.28rem);
    font-weight: 800;
    margin: 0;
    color: #4a270d;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.present-lead-line2 {
    font-size: clamp(1.18rem, 2.3vw, 1.62rem);
    font-weight: 900;
    margin: 3px 0 0 0;
    color: #2b1303;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.present-lead-highlight {
    font-size: 1.42em;
    font-weight: 900;
    color: #d63031;
    margin: 0 3px;
    display: inline-block;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #ffffff, 1px 0 0 #ffffff, -1px 0 0 #ffffff;
}

/* 下部：賞品カード3枚（A賞・B賞・C賞） */
.present-cp-cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(8px, 1.6vw, 16px);
    width: 100%;
}

.present-card {
    position: relative;
    border-radius: clamp(10px, 1.6vw, 18px);
    overflow: hidden;
    background: transparent;
    cursor: default;
}

.present-card:hover {
    transform: none;
}

/* 横幅比率: a.png(1277) : b.png(865) : c.png(865) ≒ 1.47 : 1 : 1 */
.present-card.card-a {
    flex: 1.47;
}

.present-card.card-b,
.present-card.card-c {
    flex: 1;
}

.present-card img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-campaign-title-wrap {
        bottom: 18px;
        width: 96%;
    }
    .present-cp-header {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        text-align: center;
    }
    .present-target-group {
        padding: 5px 12px 5px 8px;
    }
    .present-target-badge {
        font-size: 0.74rem;
        padding: 2px 8px;
    }
    .present-cp-icons {
        gap: 4px;
    }
    .present-icon-box {
        width: 38px;
    }
    .present-cp-lead {
        text-align: center;
    }
    .present-lead-line1 {
        font-size: 0.88rem;
    }
    .present-lead-line2 {
        font-size: 1.15rem;
    }
    .present-cp-cards {
        gap: 6px;
    }
    .present-card {
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .present-target-group {
        padding: 4px 10px 4px 6px;
        gap: 4px;
    }
    .present-icon-box {
        width: 32px;
    }
    .present-lead-line1 {
        font-size: 0.78rem;
    }
    .present-lead-line2 {
        font-size: 1.02rem;
    }
    .present-cp-cards {
        gap: 4px;
    }
    .present-card {
        border-radius: 6px;
    }
}

/* --- ぷかぷか風船グループ（灯油・でんき・プロパンガス） --- */
.hero-balloons-group {
    position: absolute;
    top: -36px;
    right: 16%;
    z-index: 10; /* text.png やバッジの手前でマウス操作可能 */
    display: flex;
    align-items: flex-end;
    pointer-events: auto;
}

/* 各風船のポップイン（プクッと膨らむ）アニメーション用ラッパー */
.hero-balloon {
    position: relative;
    transform-origin: center bottom;
    opacity: 1;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    touch-action: none;
    will-change: transform;
    transition: filter 0.2s ease;
    animation: balloonPopIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-balloon:hover {
    filter: brightness(1.08);
}

/* 破裂寸前のプルプル振動（警告レベル） */
.hero-balloon.is-warning .balloon-body {
    animation: balloonWobble 0.22s infinite alternate !important;
}

/* 破裂直前の限界膨張＆激震（危険レベル） */
.hero-balloon.is-danger .balloon-body {
    animation: balloonDanger 0.1s infinite alternate !important;
    filter: brightness(1.18);
}

@keyframes balloonWobble {
    0% { transform: scale(1.08) rotate(-4deg); }
    100% { transform: scale(1.14) rotate(4deg); }
}

@keyframes balloonDanger {
    0% { transform: scale(1.28) rotate(-7deg); }
    100% { transform: scale(1.36) rotate(7deg); }
}

/* 破裂時 */
.hero-balloon.is-popped {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) !important;
    transition: opacity 0.1s ease, transform 0.1s ease !important;
}

/* 空を自由に飛んでいる時のスタイル（タイトルやバッジの前を気持ちよく浮遊） */
.hero-balloon.is-free {
    opacity: 1 !important;
    z-index: 50 !important;
}

.hero-balloon.is-free .balloon-body {
    filter: none;
}

/* 復活（リスポーン）時のプクッと膨らむアニメーション */
.hero-balloon.is-respawning {
    animation: balloonPopIn 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* 破裂時の飛び散る紙吹雪・破片パーティクル */
.balloon-pop-particle {
    position: absolute;
    pointer-events: none;
    z-index: 30;
    will-change: transform, opacity;
    animation: popParticleExplosion 0.65s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes popParticleExplosion {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1.4);
    }
    100% {
        opacity: 0;
        transform: translate(var(--pop-x), var(--pop-y)) scale(0.2) rotate(var(--pop-rot));
    }
}

/* プクッと膨らむキーフレーム（アクセス時に弾むように膨張） */
@keyframes balloonPopIn {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 24px, 0);
    }
    55% {
        opacity: 1;
        transform: scale(1.18) translate3d(0, -6px, 0);
    }
    75% {
        transform: scale(0.92) translate3d(0, 2px, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

/* 各風船のディレイと配置バランス（重なり順と高さ） */
.balloon-toyu {
    animation-delay: 0.28s;
    z-index: 1;
    margin-right: -10px;
    margin-bottom: 26px; /* やや高め・奥 */
}

.balloon-denki {
    animation-delay: 0.46s;
    z-index: 3;
    margin-right: -12px;
    margin-bottom: 0px; /* 中央・一番手前・低め */
}

.balloon-gas {
    animation-delay: 0.64s;
    z-index: 2;
    margin-bottom: 14px; /* 右側・中間 */
}

/* ぷかぷか浮遊アニメーション */
.balloon-toyu .balloon-inner {
    animation: balloonFloatToyu 3.4s ease-in-out infinite alternate;
}
.balloon-denki .balloon-inner {
    animation: balloonFloatDenki 4.1s ease-in-out infinite alternate;
}
.balloon-gas .balloon-inner {
    animation: balloonFloatGas 3.7s ease-in-out infinite alternate;
}

@keyframes balloonFloatToyu {
    0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
    100% { transform: translate3d(-2px, -8px, 0) rotate(3deg); }
}
@keyframes balloonFloatDenki {
    0%   { transform: translate3d(0, 0, 0) rotate(1deg); }
    100% { transform: translate3d(2px, -9px, 0) rotate(-3deg); }
}
@keyframes balloonFloatGas {
    0%   { transform: translate3d(0, 0, 0) rotate(-1deg); }
    100% { transform: translate3d(3px, -7px, 0) rotate(2deg); }
}

/* 風船の本体（たまご型） */
.balloon-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
    box-shadow: none;
}

/* 灯油（グリーン） */
.balloon-toyu .balloon-body {
    width: clamp(48px, 6.2vw, 58px);
    height: clamp(56px, 7.2vw, 68px);
    background: radial-gradient(circle at 35% 30%, #15a84f 0%, #008a3d 70%, #00682c 100%);
}

/* でんき（オレンジ） */
.balloon-denki .balloon-body {
    width: clamp(52px, 6.8vw, 64px);
    height: clamp(60px, 7.8vw, 74px);
    background: radial-gradient(circle at 35% 30%, #ff8c3b 0%, #f37021 70%, #cc550f 100%);
}

/* プロパンガス（ブルー） */
.balloon-gas .balloon-body {
    width: clamp(50px, 6.5vw, 60px);
    height: clamp(58px, 7.5vw, 70px);
    background: radial-gradient(circle at 35% 30%, #29b6f6 0%, #009fe8 70%, #0077b5 100%);
}

/* 風船の光沢ハイライト */
.balloon-highlight {
    position: absolute;
    top: 14%;
    left: 18%;
    width: 28%;
    height: 38%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 75%);
    border-radius: 50%;
    transform: rotate(-30deg);
    pointer-events: none;
}

/* 風船の白文字 */
.balloon-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    line-height: 1.12;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.balloon-toyu .balloon-text {
    font-size: clamp(12.5px, 1.6vw, 15px);
    letter-spacing: 0.05em;
}

.balloon-denki .balloon-text {
    font-size: clamp(12px, 1.5vw, 14px);
    letter-spacing: -0.01em;
}

.balloon-gas .balloon-text {
    font-size: clamp(9.5px, 1.3vw, 11.5px);
    letter-spacing: -0.02em;
}

/* 風船の結び目（三角） */
.balloon-knot {
    position: relative;
    width: 0;
    height: 0;
    margin: -1px auto 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.balloon-toyu .balloon-knot { border-bottom: 6px solid #008a3d; }
.balloon-denki .balloon-knot { border-bottom: 6px solid #f37021; }
.balloon-gas .balloon-knot { border-bottom: 6px solid #009fe8; }

/* 風船のヒモ（紐：しなやかな曲線SVG＆風にそよぐ揺れアニメーション） */
.balloon-string {
    width: 20px;
    height: 52px;
    background: none;
    margin: 0 auto;
    opacity: 0.85;
    transform-origin: top center;
    pointer-events: none;
}
.balloon-toyu .balloon-string {
    height: 60px;
}
.balloon-denki .balloon-string {
    height: 48px;
}
.balloon-gas .balloon-string {
    height: 56px;
}

.balloon-string-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transform-origin: top center;
}

/* 3本の風船それぞれで自然に非同期にそよぐアニメーション */
.balloon-toyu .balloon-string-svg {
    animation: balloonStringWave1 2.8s ease-in-out infinite alternate;
}
.balloon-denki .balloon-string-svg {
    animation: balloonStringWave2 2.3s ease-in-out infinite alternate -0.7s;
}
.balloon-gas .balloon-string-svg {
    animation: balloonStringWave3 3.2s ease-in-out infinite alternate -1.4s;
}

@keyframes balloonStringWave1 {
    0% { transform: rotate(-5deg) skewX(-4deg); }
    100% { transform: rotate(6deg) skewX(5deg); }
}
@keyframes balloonStringWave2 {
    0% { transform: rotate(5deg) skewX(4deg); }
    100% { transform: rotate(-6deg) skewX(-5deg); }
}
@keyframes balloonStringWave3 {
    0% { transform: rotate(-6deg) skewX(-5deg); }
    100% { transform: rotate(7deg) skewX(6deg); }
}

@media (max-width: 768px) {
    .hero-campaign-title-wrap {
        bottom: 20px;
        width: 96%;
    }
    .hero-badge-25year {
        width: clamp(140px, 36vw, 190px);
        margin-bottom: -10px;
        transform: translateX(-14px);
    }
    .hero-flytodock-wrap {
        top: 3.5%;
        left: 47%;
    }
    .hero-balloons-group {
        top: -24px;
        right: 10%;
    }
    .balloon-toyu {
        margin-right: -8px;
        margin-bottom: 18px;
    }
    .balloon-denki {
        margin-right: -8px;
        margin-bottom: 0px;
    }
    .balloon-gas {
        margin-bottom: 10px;
    }
    .balloon-string {
        height: 36px;
    }
    .balloon-toyu .balloon-string {
        height: 44px;
    }
    .balloon-gas .balloon-string {
        height: 38px;
    }
}

@media (max-width: 480px) {
    .hero-flytodock-wrap {
        top: 3%;
        left: 46%;
    }
    .hero-balloons-group {
        top: -18px;
        right: 6%;
    }
}

/* =========================================
   キャンペーンバナーセクション (Hero直下)
========================================= */
.campaign-banner-section {
    background-color: #eef3db; /* 画像に合わせた淡いイエローグリーン */
    padding: 40px 15px 40px;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

.campaign-banner-wrapper {
    text-align: center;
}

/* 日付バー */
.campaign-date-bar {
    background-color: #00a33e;
    color: #fff;
    padding: 10px 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: none;
    
    /* アニメーション用初期状態（上からスライドダウンしておく） */
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.campaign-date-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.campaign-date-bar .badge {
    letter-spacing: 2px;
}
.campaign-date-bar .date {
    letter-spacing: 1px;
}

/* ポイント表示エリア */
.campaign-points-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    color: #009944; /* コープの緑 */
    padding: 10px 0;
    overflow: hidden; /* 横から文字が入ってくるときのはみ出し防止 */
}

/* 各ブロックの初期状態（進入アニメーション用） */
.points-block-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 6px;
    opacity: 0;
    transform: translateX(-40px); /* 左へ押し出しておく */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.points-block-center {
    display: flex;
    align-items: baseline;
}
.points-block-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(40px); /* 右へ押し出しておく */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 表示時のアニメーション（ブロック共通） */
.campaign-points-display.is-visible .points-block-left,
.campaign-points-display.is-visible .points-block-right {
    opacity: 1;
    transform: translateX(0);
}

/* 左ブロック詳細 */
.text-join {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.2;
}
.text-normal-award {
    font-size: 0.8rem;
    font-weight: bold;
    color: #009944;
    border: 1.5px solid #009944; /* 四角い枠線 */
    padding: 4px 8px;
    line-height: 1.2;
    text-align: center;
}

/* 中央ブロック詳細（10倍の + 10,000） */
.times-group {
    display: inline-flex;
    align-items: baseline;
    margin-right: 8px; /* 「倍の」と「10,000」の隙間 */
}
.times-number {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
}
.times-text {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 2px;
}

.points-number-wrapper {
    display: inline-flex;
    align-items: baseline;
}

/* ポイント数字 */
.points-number {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}

/* バウンシングアニメーション（中央の巨大数字群） */
.times-group,
.points-number {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0.2s; /* 左右のテキストより一瞬遅れてドーン */
}

.campaign-points-display.is-visible .times-group,
.campaign-points-display.is-visible .points-number {
    opacity: 1;
    transform: scale(1);
}

/* 右ブロック詳細 */
.text-present {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 8px; /* baseline調整用 */
}

/* 注記コンテナ */
.campaign-notes {
    font-size: 0.75rem;
    color: #666;
    text-align: left; /* まとまった注記は左寄せが読みやすい */
    max-width: 800px;
    margin: 10px auto 25px auto;
    line-height: 1.6;
    padding: 0 15px;
}
.pc-only { display: inline; }

/* --- CTAボタングループ --- */
.campaign-cta-group {
    display: flex;
    justify-content: center;
    align-items: stretch; 
    gap: 25px; /* ボタン同士の隙間を少し広げる */
    margin-top: 25px; /* おすすめバッジがはみ出る分の空間を作る */
}

/* ボタン本体のフラットデザイン -> 押し込める立体ボタンへ */
.cta-btn-main {
    background-color: #E60013; 
    color: #fff;
    text-decoration: none;
    border-radius: 60px; 
    padding: 20px 20px; 
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 100%;
    max-width: 410px; 
    box-shadow: 0 6px 0 #a8000e, 0 10px 20px rgba(230, 0, 19, 0.35); 
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    position: relative;
    overflow: hidden;
}

/* ホバー・アクティブギミック（押し込み感覚） */
.cta-btn-main:hover {
    transform: translateY(3px); 
    box-shadow: 0 3px 0 #a8000e, 0 5px 10px rgba(230, 0, 19, 0.25);
    background-color: #f20014; 
}
.cta-btn-main:active {
    transform: translateY(6px); 
    box-shadow: 0 0 0 #a8000e, 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* おすすめバッジ（浮遊する吹き出し） */
.cta-btn-main.cta-recommend {
    overflow: visible; 
}
.recommend-badge {
    position: absolute;
    top: -18px;
    left: 30px;
    background-color: #FFF100;
    color: #E60013; 
    font-weight: bold;
    font-size: 0.95rem;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: none; 
    z-index: 10;
    animation: floatingBadge 2s ease-in-out infinite alternate;
    letter-spacing: 1px;
}
.recommend-badge::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 15px;
    border-width: 6px 6px 0 0;
    border-style: solid;
    border-color: #FFF100 transparent transparent transparent;
}
@keyframes floatingBadge {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* 2段組み文字ラッパー */
.cta-btn-main .btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 2;
}

/* 利用条件などの小さな注記 */
.cta-btn-main .btn-condition {
    font-size: 0.8rem;
    font-weight: normal;
    background-color: #c70010; 
    color: rgba(255,255,255,0.9);
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* ボタンの1行目 (お申し込み) */
.cta-btn-main .btn-title {
    font-size: 1.25rem; 
    font-weight: bold; 
    margin-bottom: 8px;
    line-height: 1.3;
    text-shadow: none; 
    letter-spacing: 0.5px;
}
.cta-btn-main .btn-title small {
    font-size: 0.95rem;
    font-weight: normal;
}

/* ボタンの2行目 (ポイント獲得バッジ) */
.cta-btn-main .btn-point-badge {
    background-color: #fff; 
    border: none;
    box-shadow: none;
    border-radius: 40px;
    padding: 6px 20px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #E60013; 
    display: inline-flex;
    align-items: baseline; 
    justify-content: center;
    gap: 4px;
}

/* ポイント数字 */
.cta-btn-main .text-yellow {
    color: #E60013; 
    font-size: 2.1rem; 
    font-weight: bold;
    line-height: 1;
    margin: 0 2px;
    text-shadow: none; 
}

/* スマホ用のレスポンシブ対応 */
@media (max-width: 600px) {
    .campaign-date-bar {
        font-size: 1.1rem;
        flex-direction: column;
        gap: 5px;
    }
    .campaign-points-display {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    /* スマホ時は横からではなく、上下からフワッと合流するアニメーションに変更 */
    .points-block-left {
        align-items: center;
        text-align: center;
        transform: translateY(-20px); 
    }
    .points-block-right {
        align-items: center;
        text-align: center;
        transform: translateY(20px);
    }
    .campaign-points-display.is-visible .points-block-left,
    .campaign-points-display.is-visible .points-block-right {
        transform: translateY(0);
    }
    .times-number, .points-number {
        font-size: 4rem; /* スマホでは巨大数字を少し縮小 */
    }
    .times-text {
        font-size: 1.2rem;
    }
    .text-join {
        font-size: 1.1rem;
    }
    .text-present {
        font-size: 1.4rem;
        margin-bottom: 0px;
    }
}

/* ==========================================================================
   あったか灯油積立 詳細・比較エリア（箱組み）
   ========================================================================== */
.section-savings-detail {
    background: linear-gradient(180deg, #bde2f9 0%, #caeafb 40%, #def1fc 70%, #edf7fd 100%); /* heroセクションと同じ空のグラデーション */
    padding: 60px 20px 280px;
    position: relative;
    color: #333333; 
    overflow: hidden;
    transition: background 1.2s ease, color 0.5s ease;
}

/* 時間帯連動：夕方モード */
html.is-time-evening .section-savings-detail {
    background: linear-gradient(180deg, #5b8ecb 0%, #8bb1dc 22%, #fba68f 52%, #fdb96b 78%, #fedb58 100%);
    color: #2c1a0e;
}

/* 時間帯連動：夜景モード */
html.is-time-night .section-savings-detail {
    background: linear-gradient(180deg, #091224 0%, #101e38 35%, #192f54 65%, #254474 100%);
    color: #ffffff;
}

@media (max-width: 768px) {
    .section-savings-detail {
        padding-bottom: 220px !important;
    }
}
@media (max-width: 480px) {
    .section-savings-detail {
        padding-bottom: 190px !important;
    }
}

/* 全体を中央寄せでまとめるコンテナ */
.savings-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* 共通の赤文字 */
.section-savings-detail .text-red {
    color: #E60013;
}

/* ★ 案1：メイン白カード・コンポーネントのふわり浮上・スクロールイン ★ */
.savings-card-lift {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.savings-card-lift.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ★★★ 追加：角丸白背景のタイトルバナー ★★★ */
.savings-title-pill {
    background-color: #fff;
    border-radius: 80px; /* 両端を丸くするカプセル型 */
    padding: 20px 40px; /* 窮屈さをなくすため、上下左右の余白を贅沢に */
    margin: 0 auto 40px; /* 下の見出しテキスト群との間隔を確保して被りを完全防止 */
    max-width: 700px;
    box-shadow: none;
    border: 2px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 10;
}
.title-pill-img {
    max-width: 100%;
    height: auto;
    max-height: 90px;
}
.title-pill-text {
    font-size: 2.2rem;
    font-weight: 900;
    color: #333;
    white-space: nowrap;
    letter-spacing: 2px;
}

@media (max-width: 600px) {
    .savings-title-pill {
        padding: 14px 20px;
        margin: 0 auto 28px;
        border-radius: 40px;
        gap: 10px;
    }
    .title-pill-img {
        max-height: 50px;
    }
    .title-pill-text {
        font-size: 1.6rem;
    }
}

/* 1. 見出しテキスト群 */
.savings-text-group {
    text-align: center;
    margin-bottom: 25px; /* マーカーなので少し余白を広めに */
    line-height: 1.6;
}
.savings-text-group .text-docan,
.savings-text-group .text-nara {
    /* 箱ではなくマーカー風にする */
    background: linear-gradient(transparent 40%, #FFF500 40%); /* 下半分だけ黄色く塗る */
    color: #333;
    display: inline; /* 複数行にまたがる時のためにinlineに変更 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 8px; /* 文字の左右から少しはみ出して引く */
    margin: 5px;
    line-height: 1.8; /* inlineで上下の隙間を確保する用 */
    font-weight: 900;
    font-size: clamp(1.1rem, 4.5vw, 1.5rem); /* スマホで縮小して1行に収まりやすく */
    box-shadow: none; /* 箱の影は消す */
    
    /* 外側を白くする袋文字（フチ取り効果） */
    text-shadow: 
        2px 2px 0 #fff, -2px -2px 0 #fff,
        2px -2px 0 #fff, -2px 2px 0 #fff,
        0px 2px 0 #fff,  0px -2px 0 #fff,
        2px 0px 0 #fff, -2px 0px 0 #fff;
}

/* Pタグ自体の上部マージンでゆとりを持たせる */
.savings-text-group p {
    margin-bottom: 12px;
}

/* 3行目をスタイリッシュに分離（黄色マーカーを外してクリーンに） */
.savings-text-group .text-bunsan {
    display: block;
    color: #0b3954; /* 空色背景で見やすいダークネイビー */
    font-weight: 900;
    font-size: 1.2rem;
    margin-top: 10px;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
html.is-time-evening .savings-text-group .text-bunsan {
    color: #1e1b18;
}
html.is-time-night .savings-text-group .text-bunsan {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.savings-text-group .text-bunsan .text-red {
    color: #E60013;
    background: #FFF500;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 1.6rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 「ドカーン」のアニメーション設定 */
@keyframes docanShake {
    0%   { transform: scale(1) rotate(0deg); }
    10%  { 
        transform: scale(1.3) rotate(-5deg); 
        /* アニメーション中も白い袋文字を維持しつつ、赤いオーラを足す */
        text-shadow: 
            0 0 15px #E60013,
            2px 2px 0 #fff, -2px -2px 0 #fff,
            2px -2px 0 #fff, -2px 2px 0 #fff,
            0px 2px 0 #fff,  0px -2px 0 #fff,
            2px 0px 0 #fff, -2px 0px 0 #fff; 
    }
    20%  { transform: scale(1.3) rotate(5deg); }
    30%  { transform: scale(1.3) rotate(-5deg); }
    40%  { 
        transform: scale(1) rotate(0deg); 
        /* 元の袋文字へ戻す */
        text-shadow: 
            2px 2px 0 #fff, -2px -2px 0 #fff,
            2px -2px 0 #fff, -2px 2px 0 #fff,
            0px 2px 0 #fff,  0px -2px 0 #fff,
            2px 0px 0 #fff, -2px 0px 0 #fff; 
    }
    100% { transform: scale(1) rotate(0deg); }
}

.animate-docan {
    display: inline-block;
    animation: docanShake 2.5s infinite ease-in-out;
    transform-origin: center;
}

/* 2. クマのプレースホルダー */
.placeholder-bear {
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.2);
    border: 3px dashed rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    font-weight: bold;
    font-size: 1.2rem;
}

/* ★★★ 特典セパレーター（グラフと価格を分ける） ★★★ */
.benefits-separator {
    text-align: center;
    margin: 40px auto 10px;
}
.separator-heading {
    margin-bottom: 0;
}
.separator-heading span {
    color: #FFF500;
    font-size: 2.5rem;
    font-weight: 900;
    /* 袋文字風にして圧倒的な目立ちを！ */
    text-shadow: 
        2px 2px 0 #E60013, -2px -2px 0 #E60013, 
        2px -2px 0 #E60013, -2px 2px 0 #E60013;
}

/* 3. 価格アピール */
.savings-price-group {
    text-align: center;
    margin: 40px auto 30px; /* 余白多めにとってスッキリ */
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}
.savings-price-group.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.text-discount-prefix {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0b3954; /* 空色背景で見やすいダークネイビー */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
html.is-time-evening .text-discount-prefix {
    color: #1e1b18;
}
html.is-time-night .text-discount-prefix {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.badge-point-wrap {
    margin-bottom: 15px;
}
.badge-point {
    background-color: #FFF500;
    color: #E60013;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 900;
    box-shadow: none;
    border: 2px solid #fff;
    display: inline-block;
}

/* カウントダウン表示部 */
.price-display-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #FFF500; 
    /* 背景色に負けない黒フチ */
    text-shadow: 
        2px 2px 0 #333, -2px -2px 0 #333,
        2px -2px 0 #333, -2px 2px 0 #333,
        0px 2px 0 #333,  0px -2px 0 #333,
        2px 0px 0 #333, -2px 0px 0 #333;
}
.price-label {
    font-size: 1.6rem;
    font-weight: 900;
    margin-right: 5px;
}
.price-number {
    font-size: 5rem; /* ドカンと大きく */
    font-weight: 900;
    color: #fff; 
    line-height: 1;
    display: inline-block;
}
.price-unit {
    font-size: 1.6rem;
    font-weight: 900;
    margin-left: 5px;
}
.price-note {
    font-size: 0.9rem;
    color: #475569;
    margin-top: 5px;
    font-weight: bold;
}
html.is-time-night .price-note {
    color: #cbd5e1;
}

/* カウントダウン終了時のポップエフェクト */
@keyframes pricePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(3deg); color: #FFF500; }
    100% { transform: scale(1) rotate(0); color: #FFF500; }
}
.price-number.animation-done {
    animation: pricePop 0.6s ease-out forwards;
}

@media (max-width: 600px) {
    .text-discount-prefix { font-size: 1.1rem; }
    .badge-point { font-size: 1rem; padding: 4px 12px; }
    .price-number { font-size: 3.5rem; }
    .price-label, .price-unit { font-size: 1.2rem; }
}

/* 4. 積立額に応じた還元率テーブル（シンプルな元々のLPデザイン準拠） */
.savings-compare-table {
    background-color: #ffffff;
    color: #333333;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px 16px 14px;
    box-shadow: none;
    border: 2px solid #e0e0e0;
    box-sizing: border-box;
}

.table-row {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    text-align: center;
}

.table-head {
    border-bottom: 2px solid #555555;
    font-weight: bold;
    font-size: 1rem;
    color: #333333;
}

.table-body {
    font-size: 1.25rem;
    font-weight: 900;
    color: #222222;
    align-items: baseline;
}

.table-head > div,
.table-body > div {
    flex: 1;
}

/* 還元率テーブル専用スタイル */
.savings-point-table {
    margin-bottom: 6px;
}
.savings-point-table .point-highlight {
    color: #00A03E;
    font-size: 1.35rem;
}
.table-sub-note {
    font-size: 0.8rem;
    color: #475569;
    font-weight: bold;
    margin: 4px 0 16px;
    text-align: center;
}
html.is-time-night .table-sub-note {
    color: #cbd5e1;
}

@media (max-width: 480px) {
    .savings-compare-table {
        max-width: 100%;
        padding: 8px 6px 10px;
    }
    .table-head {
        font-size: 0.85rem;
    }
    .table-body {
        font-size: 1.05rem;
    }
    .savings-point-table .point-highlight {
        font-size: 1.2rem;
    }
}

.compare-notes {
    color: #475569;
    font-size: 0.85rem;
    margin-bottom: 40px;
    font-weight: bold;
    opacity: 1;
    text-align: center;
    line-height: 1.5;
}
.compare-notes p {
    margin: 3px 0;
}
html.is-time-night .compare-notes {
    color: #cbd5e1;
}

/* 5. 誘導テキストとボタン */
.savings-guide {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}
.savings-guide .guide-text {
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.savings-guide .btn-about-savings {
    background-color: #fff;
    color: #333;
    font-weight: 900;
    font-size: 1.8rem;
    padding: 15px 50px;
    border-radius: 50px;
    display: inline-block;
    box-shadow: none;
    border: 2px solid #ddd;
}

/* 6. グラフアニメーションの大枠 (フラット＆モダン版) */
.savings-graph-wrapper {
    width: 100%;
    margin-bottom: 20px;
}

/* ★★★ グラフ凡例（Legend）★★★ */
.chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 900;
    color: #333333;
    max-width: 800px;
    margin: 0 auto 10px;
    padding-right: 10px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: none;
}
html.is-time-night .chart-legend {
    color: #ffffff;
}
html.is-time-night .legend-item {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}
.legend-save { 
    background-color: #FFD700; 
    box-shadow: none; 
}
.legend-nosave { 
    background-color: #c9bdae; 
    border: 1px solid rgba(0,0,0,0.1);
}

.css-chart-container {
    position: relative;
    background-color: #fff;
    border-radius: 16px; /* 角をもう少し丸くしてモダンに */
    padding: 45px 15px 30px 60px; /* 上部の余白（padding-top）を広げて余裕を持たせる */
    box-shadow: none;
    border: 1px solid #e0e0e0;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Y軸目盛り */
.chart-y-axis {
    position: absolute;
    left: 15px; /* 端から少し内側へ */
    top: 40px; /* 余白に合わせてY軸全体を少し下げる */
    bottom: 30px;
    width: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 5px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #888;
    z-index: 10;
}
.y-label {
    position: absolute;
    top: -20px;
    right: 5px;
}

/* グラフメインエリア（横スクロール廃止、常に見切れない設定） */
.chart-main-wrap {
    width: 100%;
    position: relative;
}

.chart-main-area {
    width: 100%; 
    height: 300px; /* 高さを250pxから300pxに増やし、縦に余裕を持たせる */
    position: relative;
    display: flex;
    align-items: flex-end;
}

/* 背景罫線 */
.chart-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.grid-line {
    border-top: 1px dashed #eaeaea;
    height: 0;
    width: 100%;
}

/* バーを並べるコンテナ */
.chart-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
    gap: 2%; /* 月ごとの隙間をパーセントに */
}

/* 1ヶ月の単位（X軸ラベル含む） */
.chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    width: 100%; /* フレックスで自動縮小 */
    position: relative;
}
.col-month {
    position: absolute;
    bottom: -25px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    white-space: nowrap;
}

/* 2本の棒グラフを並べる枠 */
.bars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1px;
    width: 100%;
    height: 100%;
}

/* ★★★ スマートなフラットデザイン・バー ★★★ */
.bar {
    width: 100%;
    max-width: 16px; /* PCでは太すぎないように制限 */
    height: 0%; 
    border-radius: 4px 4px 0 0;
    transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.css-chart-container.is-visible .bar {
    height: var(--bg-height);
}

/* 積立なし（茶色） - 落ち着いたトーンで背景に馴染ませる */
.bar-nosave {
    background-color: #c9bdae;
    transition-delay: 0.2s;
}

/* 積立あり（黄色） - コープらしい鮮やかなイエローで強調！ */
.bar-save {
    background-color: #FFD700;
    box-shadow: none;
    position: relative;
    z-index: 3;
    transition-delay: 0.6s;
}

/* ★ 案3：4月〜3月の黄色バー（積立あり）のリズミカルな立ち上がり ★ */
.css-chart-container.is-visible .chart-col:nth-child(1) .bar-save { transition-delay: 0.24s; }
.css-chart-container.is-visible .chart-col:nth-child(2) .bar-save { transition-delay: 0.30s; }
.css-chart-container.is-visible .chart-col:nth-child(3) .bar-save { transition-delay: 0.36s; }
.css-chart-container.is-visible .chart-col:nth-child(4) .bar-save { transition-delay: 0.42s; }
.css-chart-container.is-visible .chart-col:nth-child(5) .bar-save { transition-delay: 0.48s; }
.css-chart-container.is-visible .chart-col:nth-child(6) .bar-save { transition-delay: 0.54s; }
.css-chart-container.is-visible .chart-col:nth-child(7) .bar-save { transition-delay: 0.60s; }
.css-chart-container.is-visible .chart-col:nth-child(8) .bar-save { transition-delay: 0.66s; }
.css-chart-container.is-visible .chart-col:nth-child(9) .bar-save { transition-delay: 0.72s; }
.css-chart-container.is-visible .chart-col:nth-child(10) .bar-save { transition-delay: 0.78s; }
.css-chart-container.is-visible .chart-col:nth-child(11) .bar-save { transition-delay: 0.84s; }
.css-chart-container.is-visible .chart-col:nth-child(12) .bar-save { transition-delay: 0.90s; }

/* 積立なし（茶色）も左から順にスムーズに立ち上がる */
.css-chart-container.is-visible .chart-col:nth-child(1) .bar-nosave { transition-delay: 0.08s; }
.css-chart-container.is-visible .chart-col:nth-child(2) .bar-nosave { transition-delay: 0.12s; }
.css-chart-container.is-visible .chart-col:nth-child(3) .bar-nosave { transition-delay: 0.16s; }
.css-chart-container.is-visible .chart-col:nth-child(4) .bar-nosave { transition-delay: 0.20s; }
.css-chart-container.is-visible .chart-col:nth-child(5) .bar-nosave { transition-delay: 0.24s; }
.css-chart-container.is-visible .chart-col:nth-child(6) .bar-nosave { transition-delay: 0.28s; }
.css-chart-container.is-visible .chart-col:nth-child(7) .bar-nosave { transition-delay: 0.32s; }
.css-chart-container.is-visible .chart-col:nth-child(8) .bar-nosave { transition-delay: 0.36s; }
.css-chart-container.is-visible .chart-col:nth-child(9) .bar-nosave { transition-delay: 0.40s; }
.css-chart-container.is-visible .chart-col:nth-child(10) .bar-nosave { transition-delay: 0.44s; }
.css-chart-container.is-visible .chart-col:nth-child(11) .bar-nosave { transition-delay: 0.48s; }
.css-chart-container.is-visible .chart-col:nth-child(12) .bar-nosave { transition-delay: 0.52s; }

/* 棒が伸びきったタイミングで右上の積立ダンベルマッチョが気合を入れるバウンス */
@keyframes machoCelebrate {
    0% { transform: scale(1); }
    50% { transform: scale(1.18) translateY(-4px); }
    100% { transform: scale(1); }
}
.css-chart-container.is-visible .savings-macho-wrap {
    animation: machoCelebrate 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.98s forwards;
}

/* ★★★ 巨大な緑の矢印アニメーション ★★★ */
.chart-arrow-wrap {
    position: absolute;
    left: 20px; 
    bottom: 30%; 
    display: flex;
    align-items: center;
    z-index: 5;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    transition-delay: 1.5s; 
}
.css-chart-container.is-visible .chart-arrow-wrap {
    width: 85%; /* 画面端まで突き抜けない手前で止める */
    opacity: 1;
}

.chart-arrow {
    background: linear-gradient(90deg, #078c35, #0CA742); /* グラデーションで疾走感追加 */
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    padding: 8px 15px;
    white-space: nowrap;
    border-radius: 6px 0 0 6px;
    box-shadow: none;
}
.chart-arrow-head {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #0CA742;
    filter: none;
}

/* ★★★ 吹き出しポップアップ ★★★ */
.balloon-winter {
    position: absolute;
    right: 15%; 
    top: 25px;
    background: linear-gradient(135deg, #FF4B2B, #E60013); /* コープ赤のグラデーションでモダンに */
    box-shadow: none;
    border: 1px solid #FF4B2B;
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 12px 14px;
    border-radius: 12px; /* 丸みを強くしてAppっぽく */
    text-align: center;
    z-index: 6;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 2.2s; 
}
.balloon-winter::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    border-width: 8px 8px 0 0;
    border-style: solid;
    border-color: #E60013 transparent transparent transparent;
}
.css-chart-container.is-visible .balloon-winter {
    opacity: 1;
    transform: scale(1);
}

/* スマホ用レスポンシブグラフ調整 */
@media (max-width: 600px) {
    .css-chart-container {
        padding: 15px 5px 30px 30px;
    }
    .chart-main-area {
        height: 200px; /* スマホでは高さを控えめに */
    }
    .chart-arrow {
        font-size: 0.75rem; /* 矢印テキストも縮小 */
        padding: 4px 8px;
    }
    .chart-arrow-head {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #0CA742;
    }
    .balloon-winter {
        right: 5%;
        font-size: 0.7rem;
        padding: 6px;
    }
    .col-month {
        font-size: 0.6rem;
    }
}

/* 7. 家のプレースホルダー */
.placeholder-house {
    width: 200px;
    height: 140px;
    background: rgba(255,255,255,0.2);
    border: 3px dashed rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    /* CTAボタンもスマホではくっつきすぎないように縦並びへ */
    .campaign-cta-group {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
    }
    .cta-btn-main {
        max-width: 100%;
        padding: 16px 20px;
    }
    .cta-btn-main .btn-text {
        font-size: 1.15rem; /* スマホなら少しだけ文字を小さく */
    }
}

/* 積立エリア：Swiper（スライダー）設定 */
.savings-swiper {
    width: 100%;
    padding-bottom: 50px; /* ページネーション用の余白 */
}
.savings-swiper .swiper-slide {
    height: auto; 
}
.slide-content {
    background: #fff;
    padding: 40px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: none;
    border: 1px solid #e0e0e0;
    height: 100%;
}
.slide-content h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 24px;
}
.swiper-button-next, .swiper-button-prev {
    color: var(--color-primary) !important;
}
.swiper-pagination-bullet-active {
    background: var(--color-primary) !important;
}

/* Q&A (FAQ) アコーディオン設定 */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}
.faq-q {
    font-weight: bold;
    font-size: 18px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    list-style: none; /* デフォルトの矢印を非表示に */
}
.faq-q::-webkit-details-marker {
    display: none;
}
.faq-q::after {
    content: "＋";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-size: 20px;
    transition: transform 0.3s ease;
}
.faq-item[open] .faq-q::after {
    content: "－";
    transform: translateY(-50%) rotate(180deg);
}
.faq-a {
    padding: 0 20px 20px;
    color: var(--color-text-main);
    border-top: 1px dashed var(--color-border);
    margin-top: 10px;
    padding-top: 15px;
}

/* 注意事項 */
.notes-list {
    max-width: 800px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--color-text-light);
}
.notes-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;
}
.notes-list li::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}

/* CTAエリア（お申し込みボタン） */
.cta-section {
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
}
.cta-section .section-title {
    color: #fff;
}
.cta-button-wrapper {
    display: flex;
    justify-content: center;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 60px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: none;
    border: 2px solid #cc484d;
}
.btn-primary:hover {
    background-color: #ff6f73;
    transform: translateY(2px);
    box-shadow: none;
    color: #fff;
    opacity: 1;
}

/* Footer */
.footer {
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 24px 0;
}
.copyright { font-size: 12px; opacity: 0.8; }

/* ==================================================
   メインコンテンツスライダー (Swiper) - savings-main-box
   ================================================== */
.savings-main-box {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 20px; /* スマホなら狭める */
    box-shadow: none;
    border: 2px solid #e0e0e0;
    max-width: 500px; /* ★大きすぎて高さが巨大化するのを防ぐため、500pxに縮小（コンパクト化） */
    width: 100%; /* ここで幅100%を指定しないとSwiperが潰れる */
    margin: 0 auto;
    position: relative;
    overflow: hidden; 
    box-sizing: border-box; /* paddingを含めた100%にする */
}

/* Swiperコンテナのパディング */
.savings-swiper {
    width: 100%; /* これも必須 */
    padding-bottom: 50px; 
}

/* 各スライド内の構成スタイル */
.savings-swiper .swiper-slide {
    height: auto; /* 一番高いスライドに他のスライドも高さを合わせる設定 */
    display: flex;
}
.slide-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* 親のスライド高さに追従 */
}
.slide-title {
    background-color: #E60013;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    padding: 15px;
    border-radius: 8px; /* 赤い見出し箱 */
    margin-bottom: 25px;
    text-align: center;
    box-shadow: none;
    /* 高さを統一するためのflex設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 95px; /* 1行と2行で高さがブレないように固定 */
}
.slide-content {
    background: #FFFEF5; /* ちょっと暖かみのあるクリーム色背景 */
    padding: 20px 15px;
    border-radius: 12px;
    flex: 1; /* 高さが足りない場合でも下まで伸びるようにする */
    display: flex;
    flex-direction: column;
}
.slide-image-wrap {
    margin-bottom: 25px;
}
.slide-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* スライド中央にあるテキスト解説 */
.slide-desc-box {
    text-align: left;
    margin: 0 auto 30px;
    max-width: 500px;
    color: #333;
}
.desc-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
.desc-row .icon {
    font-size: 1.8rem;
    margin-right: 15px;
    line-height: 1.2;
}
.text-block {
    flex: 1;
}
.text-block h4 {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 5px;
    border-bottom: 2px solid #E60013; /* 赤い線で強調 */
    padding-bottom: 5px;
    color: #E60013;
}
.text-block h4 .sub {
    font-size: 1rem;
    font-weight: normal;
    color: #555;
    margin-left: 10px;
}
.text-block p {
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1.6;
    margin-top: 5px;
}

/* カスタムSwiperナビゲーションデザイン */
.swiper-button-next, .swiper-button-prev {
    color: #E60013; /* コープらしい赤色 */
    background: rgba(255,255,255,0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: none;
    border: 1px solid #ccc;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.2rem;
    font-weight: bold;
}
.swiper-pagination-bullet-active {
    background: #E60013;
}

/* スライド2固有のテキストレイアウト */
.slide-text-center {
    text-align: center;
    margin-top: 20px;
}
.slide-text-center p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}
.slide-text-center .text-bold {
    font-weight: 900;
}
.slide-text-center .mb-3 {
    margin-bottom: 25px;
}

@media (max-width: 600px) {
    .savings-main-box {
        padding: 20px 10px;
    }
    .slide-title {
        font-size: 1.3rem;
        padding: 10px;
        margin-bottom: 20px;
    }
    .text-block h4 {
        font-size: 1.1rem;
    }
    .text-block p {
        font-size: 1rem;
    }
    .swiper-button-next, .swiper-button-prev {
        display: none; /* スマホでは矢印を隠しスワイプを促す */
    }
}

/* ==================================
   Q&A SECTION STYLE (FLAT & WARM)
================================== */
.premium-faq-section {
    background-color: #fedd00;
    position: relative;
    padding: 60px 0;
    color: #2b1303;
}
.premium-faq-item-wrap {
    position: relative;
    margin-bottom: 25px;
}
.premium-faq-category {
    display: inline-block;
    color: #3e2009;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    margin-left: 15px;
    position: relative;
    z-index: 2;
    text-shadow: none;
}
.premium-faq-details {
    background-color: transparent;
    cursor: pointer;
    position: relative;
}
.premium-faq-summary {
    background: #fff;
    color: #333;
    padding: 17px 60px 17px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: none;
    border: 1px solid #e0e0e0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.premium-faq-summary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    background: #fdfdfd;
}
.premium-faq-summary::-webkit-details-marker {
    display: none;
}
.premium-faq-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f5f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.premium-faq-icon::before, .premium-faq-icon::after {
    content: '';
    position: absolute;
    background: #00A03E;
    border-radius: 2px;
    transition: transform 0.4s ease, opacity 0.4s ease, background 0.4s ease;
}
.premium-faq-icon::before { width: 14px; height: 2px; }
.premium-faq-icon::after { width: 2px; height: 14px; }

/* Open State */
.premium-faq-details[open] .premium-faq-summary {
    border-radius: 25px 25px 0 0;
    box-shadow: none;
    border-bottom: none;
    transform: none;
}
.premium-faq-details[open] .premium-faq-icon {
    background: #00A03E;
}
.premium-faq-details[open] .premium-faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}
.premium-faq-details[open] .premium-faq-icon::before {
    background: #fff;
    transform: rotate(180deg);
}

.premium-faq-answer-box {
    background: #fdfdfd;
    color: #444;
    padding: 25px 25px 30px 20px;
    border-radius: 0 0 25px 25px;
    font-size: clamp(0.9rem, 3.2vw, 1rem);
    line-height: 1.7;
    position: relative;
    border: 1px solid #e0e0e0;
    border-top: 1px dashed #e0e0e0;
    box-shadow: none;
    animation: premiumSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top;
    z-index: 0;
    display: flex;
    gap: 15px;
}

@keyframes premiumSlideDown {
    0% { opacity: 0; transform: translateY(-15px) scaleY(0.98); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* ==================================
   CROSS CAMPAIGN SECTION (ELECTRICITY & GAS)
================================== */
.cross-campaign-section {
    background-color: #F7F5E9; /* LPの背景に合わせたベージュ */
    padding: 60px 0;
    font-family: 'Noto Sans JP', sans-serif;
}
.cross-campaign-banner {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 3px solid #6C4F34;
    border-radius: 8px;
    position: relative;
    box-shadow: none;
}
.cc-header {
    background: #6C4F34;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 12px 20px;
    border-radius: 4px 4px 0 0;
    font-weight: 700;
    flex-wrap: wrap;
    position: relative;
}
.cc-speech-bubble {
    background: #fff;
    color: #e50012;
    border: 2px solid #6C4F34;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    position: relative;
    font-weight: 900;
    display: flex;
    align-items: center;
}


.cc-header-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cc-header-icons img {
    height: 35px;
    object-fit: contain;
}
.cc-header-title {
    font-size: clamp(1rem, 4vw, 1.4rem);
    letter-spacing: 0.05em;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.cc-header-title .cc-date {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 0;
    font-family: 'Outfit', 'Montserrat', sans-serif;
}
.cc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
    gap: 0;
    position: relative;
    padding: 30px 40px;
}
.cc-divider {
    background: repeating-linear-gradient(to bottom, #6C4F34, #6C4F34 4px, transparent 4px, transparent 8px);
    width: 2px;
    height: 100%;
}
.cc-and-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    background: #6C4F34;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    border: 3px solid #fff;
    font-family: 'Outfit', sans-serif;
    z-index: 5;
}
.cc-col {
    text-align: center;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.cc-col-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: 900;
    color: #5A3D25;
    line-height: 1.3;
}
.cc-col-subtitle {
    font-size: clamp(0.75rem, 2.5vw, 0.95rem);
    color: #5A3D25;
    margin-top: 5px;
    font-weight: 700;
}
.cc-points-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #E60013;
    margin: 15px 0 20px;
    white-space: nowrap;
}
.cc-points-wrap.js-animate-trigger {
    cursor: default;
}
.cc-badge {
    background: #E60013;
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
    position: relative;
    margin-right: 15px;
    flex-shrink: 0;
}
.cc-badge::after {
    content:'';
    position: absolute;
    right: -8px; top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #E60013;
}
.cc-badge-number {
    font-size: 1.6rem;
    font-family: 'Outfit', sans-serif;
}
.cc-badge-text {
    font-size: 0.65rem;
    letter-spacing: -0.05em;
}
.cc-point-big {
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-right: 5px;
    font-variant-numeric: tabular-nums;
}
.cc-point-unit {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}
.cc-note {
    font-size: 0.65rem;
    color: #555;
    text-align: left;
    line-height: 1.4;
    margin-top: auto; /* Push to bottom to align columns */
}

/* 右側のトドック（クマ）エリア */
.cc-todok-badge {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cc-todok-bubble {
    background: #fff;
    border: 2px solid #8E6C4E;
    border-radius: 12px;
    padding: 10px;
    font-size: 0.7rem;
    font-weight: 900;
    color: #111;
    position: relative;
    margin-bottom: 10px;
    box-shadow: none;
    text-align: center;
    line-height: 1.4;
}
.cc-todok-bubble .blue-text { color: #0075C2; font-size: 1.1em; }
.cc-todok-bubble .green-text { color: #00A03E; font-size: 1.1em; }

.cc-todok-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px; right: 30px;
    border: 10px solid transparent;
    border-top-color: #8E6C4E;
}
.cc-todok-bubble::before {
    content: '';
    position: absolute;
    bottom: -7px; right: 32px;
    border: 8px solid transparent;
    border-top-color: #fff;
    z-index: 2;
}

@media (max-width: 900px) {
    .cc-todok-badge {
        right: -10px;
        width: 120px;
    }
}
@media (max-width: 768px) {
    .cc-header-title {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .cc-title-sep {
        display: none;
    }
    .cc-body {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }
    .cc-divider {
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(to right, #6C4F34, #6C4F34 4px, transparent 4px, transparent 8px);
    }
    .cc-todok-badge {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin: 20px auto 0;
        width: 100%;
        max-width: 200px;
    }
}

/* ----------------------------------------------------
 * あったか灯油積立セクション：街並みレイヤー（ビルと家・全幅パノラマ）
 * ---------------------------------------------------- */
.savings-town-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 地表ベースライン（コープイエローの水平安定ライン） */
.savings-ground-base {
    position: absolute;
    bottom: -1px; /* サブピクセルの隙間を完全に防ぐ */
    left: 0;
    width: 100%;
    height: 26px;
    background-color: #fedd00;
    border-top: 3px solid #e5c600;
    z-index: 2;
}
html.is-time-night .savings-ground-base {
    background-color: #cca600;
    border-top-color: #ab8b00;
}

/* ビルと家の横並びトラック（全幅パノラマ配置・黄色い地面に100%隙間なく接地） */
.savings-buildings-row {
    position: absolute;
    bottom: 22px; /* 黄色い地表ライン(高さ24px)の上端に2px重ねて隙間ゼロで完全接地 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 1360px;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
}

/* 個々の建物アイテム */
.town-building {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.town-building img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
    user-select: none;
    -webkit-user-drag: none;
}

/* 各建物のサイズ定義（パノラマ調和サイズ） */
.town-building.buil-1 { width: 62px; }  /* 高層マンション */
.town-building.buil-2 { width: 70px; }  /* 中層マンション */
.town-building.buil-3 { width: 115px; } /* 家＋車＋木 */
.town-building.buil-4 { width: 105px; position: relative; } /* 住宅＋木 */
.town-building.buil-5 { width: 110px; } /* 丘＋家 */
.town-building.buil-6 { width: 150px; } /* マンション＋店舗 */

/* 街並みの建物の横に配置される地表ダンベルマッチョ（タップ可能） */
.town-building .savings-ground-macho {
    position: absolute !important;
    bottom: 0px;
    right: -24px; /* 住宅と住宅の間の路上で元気に筋トレ */
    width: 46px;
    height: 60px;
    z-index: 10;
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
}

/* スマホ・タブレット対応 */
@media (max-width: 768px) {
    .savings-town-layer {
        height: 160px;
    }
    .savings-ground-base {
        bottom: -1px;
        height: 20px;
    }
    .savings-buildings-row {
        bottom: 18px; /* 地面(20px)に2px重ねて隙間なく接地 */
        padding: 0 6px;
        gap: 4px;
    }
    .town-building.buil-1 { width: 36px; }
    .town-building.buil-2 { width: 42px; }
    .town-building.buil-3 { width: 70px; }
    .town-building.buil-4 { width: 64px; }
    .town-building.buil-5 { width: 68px; }
    .town-building.buil-6 { width: 92px; }
    .town-building .savings-ground-macho {
        right: -16px;
        width: 32px;
        height: 42px;
    }
}
@media (max-width: 480px) {
    .savings-town-layer {
        height: 135px;
    }
    .savings-ground-base {
        bottom: -1px;
        height: 18px;
    }
    .savings-buildings-row {
        bottom: 16px; /* 地面(18px)に2px重ねて隙間なく接地 */
        padding: 0 4px;
        gap: 2px;
    }
    .town-building.buil-1 { width: 28px; }
    .town-building.buil-2 { width: 34px; }
    .town-building.buil-3 { width: 56px; }
    .town-building.buil-4 { width: 52px; }
    .town-building.buil-5 { width: 54px; }
    .town-building.buil-6 { width: 75px; }
    .town-building .savings-ground-macho {
        right: -12px;
        width: 26px;
        height: 35px;
    }
}

.ground-macho-inner {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: bottom center;
    transition: transform 0.2s ease;
}

.savings-ground-macho:hover .ground-macho-inner {
    transform: scale(1.15);
}

.macho-pose-ground-workout {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.22));
}

.macho-ground-arm-r {
    transform-origin: 68px 40px;
    animation: dumbbellCurlRight 1.4s ease-in-out infinite alternate;
}

.macho-ground-arm-l {
    transform-origin: 32px 40px;
    animation: dumbbellCurlLeft 1.4s ease-in-out infinite alternate;
}

/* ==========================================================================
   あったか灯油積立セクション：リッチパララックス演出
   ========================================================================== */
.savings-parallax-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.savings-parallax-stage .parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    pointer-events: none;
}

/* 1, 2, 3. 多層雲レイヤー（奥・中・手前） */
.savings-parallax-stage .p-cloud {
    position: absolute;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
/* ★ 案2：雲の緩やかな水平流動（微速ブリーズ） ★ */
@keyframes cloudBreezeFar {
    0% { transform: scale(0.82) translateX(0); }
    50% { transform: scale(0.82) translateX(28px); }
    100% { transform: scale(0.82) translateX(0); }
}
@keyframes cloudBreezeMid {
    0% { transform: scale(0.95) translateX(0); }
    50% { transform: scale(0.95) translateX(-36px); }
    100% { transform: scale(0.95) translateX(0); }
}
@keyframes cloudBreezeNear {
    0% { transform: scale(1.08) translateX(0); }
    50% { transform: scale(1.08) translateX(46px); }
    100% { transform: scale(1.08) translateX(0); }
}

/* 奥層の雲：小さめ・ふんわり薄め */
.savings-parallax-stage .layer-clouds-far .p-cloud {
    opacity: 0.48;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.04));
    animation: cloudBreezeFar 68s ease-in-out infinite alternate;
    will-change: transform;
}
/* 中層の雲：標準サイズ */
.savings-parallax-stage .layer-clouds-mid .p-cloud {
    opacity: 0.72;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
    animation: cloudBreezeMid 48s ease-in-out infinite alternate;
    will-change: transform;
}
/* 手前層の雲：くっきり鮮明 */
.savings-parallax-stage .layer-clouds-near .p-cloud {
    opacity: 0.92;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.08));
    animation: cloudBreezeNear 32s ease-in-out infinite alternate;
    will-change: transform;
}
html.is-time-evening .savings-parallax-stage .p-cloud {
    filter: drop-shadow(0 4px 12px rgba(90, 40, 20, 0.12));
}
html.is-time-night .savings-parallax-stage .p-cloud {
    opacity: 0.35;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}



/* 5. 街並み遠景（奥のビル群） */
.town-layer-far {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    max-width: 1360px;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 1;
    opacity: 0.60;
    filter: brightness(1.08) saturate(0.85);
    white-space: nowrap;
    will-change: transform;
    pointer-events: none;
}
.town-layer-far .town-building {
    transform: scale(0.85);
    transform-origin: bottom center;
}

html.is-time-evening .town-layer-far {
    filter: brightness(0.95) contrast(1.05) saturate(1.1);
    opacity: 0.70;
}
html.is-time-night .town-layer-far {
    filter: brightness(0.62) contrast(1.12);
    opacity: 0.50;
}

.town-layer-near {
    z-index: 3;
    will-change: transform;
}

/* スマホ・タブレット対応 */
@media (max-width: 768px) {
    .town-layer-far {
        bottom: 16px;
        padding: 0 10px;
    }
    .town-layer-far .town-building {
        transform: scale(0.75);
    }
}
@media (max-width: 480px) {
    .town-layer-far {
        bottom: 12px;
        padding: 0 6px;
    }
    .town-layer-far .town-building {
        transform: scale(0.68);
    }
}


/* ==========================================================================
   共通・新規追加ボタン類 (Header & Footer CTA)
   ========================================================================== */

/* ヘッダー右 CTAボタン（今すぐお申し込み） */
.header-cta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #00A33E; /* ご指定のブランドカラー */
    color: #fff;
    font-weight: 900;
    font-size: clamp(0.7rem, 2.5vw, 0.95rem); /* スマホで縮小 */
    padding: 8px 24px;
    border-radius: 40px;
    border: 3px solid #333333;
    text-decoration: none;
    box-shadow: 0 4px 0 #222222, 0 6px 12px rgba(0, 163, 62, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    letter-spacing: 0.05em;
    font-family: var(--font-family-base);
}
.header-cta-btn:hover {
    background-color: #008f36; /* ホバー時は少し濃い緑に */
    transform: translateY(2px);
    box-shadow: 0 2px 0 #222222, 0 3px 6px rgba(0, 163, 62, 0.2);
    color: #fff;
}
.header-cta-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #222222, 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* フッター＆中段共通CTAボタン（最短1分！ かんたんお申し込み・スマホはみ出し完全防止） */
.footer-main-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100% - 24px); /* 親コンテナからはみ出さない */
    width: auto;
    box-sizing: border-box; /* パディングやボーダーを含めて計算 */
    background-color: #00A33E; /* ブランドカラーの緑 */
    color: #fff;
    font-weight: 900;
    font-size: clamp(0.92rem, 3.8vw, 1.25rem);
    padding: 16px clamp(16px, 4vw, 40px);
    white-space: nowrap; /* テキストの改行を防ぐ */
    border-radius: 50px;
    border: 3px solid #333333;
    text-decoration: none;
    box-shadow: 0 6px 0 #222222, 0 10px 20px rgba(0, 163, 62, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    letter-spacing: 0.05em;
    text-align: center;
}
.footer-main-btn:hover {
    background-color: #008f36; /* ホバー時は少し濃い緑に */
    transform: translateY(3px);
    box-shadow: 0 3px 0 #222222, 0 5px 10px rgba(0, 163, 62, 0.25);
    color: #fff;
}
.footer-main-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #222222, 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .footer-main-btn {
        max-width: 100%;
        font-size: clamp(0.85rem, 3.6vw, 1rem);
        padding: 13px clamp(12px, 3.5vw, 22px);
        letter-spacing: 0.02em;
    }
}
@media (max-width: 360px) {
    .footer-main-btn {
        font-size: 0.8rem;
        padding: 12px 10px;
        letter-spacing: 0;
    }
}

/* トドックアプリ・マイページ詳細案内ボタン（スマホはみ出し完全防止＆レスポンシブ） */
.mypage-detail-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    background-color: #FAF9F5;
    color: #00A03E;
    font-weight: 900;
    font-size: clamp(0.85rem, 3.8vw, 1.05rem);
    padding: 14px clamp(14px, 4vw, 32px);
    border-radius: 50px;
    border: 3px solid #00A03E;
    text-decoration: none;
    box-shadow: 0 5px 0 #007a2f, 0 8px 16px rgba(0, 160, 62, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s, color 0.2s;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.mypage-detail-btn:hover {
    background-color: #f0fbf4;
    color: #008a35;
    transform: translateY(2px);
    box-shadow: 0 3px 0 #007a2f, 0 4px 8px rgba(0, 160, 62, 0.15);
}
.mypage-detail-btn:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #007a2f, 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .mypage-detail-btn {
        width: 100%;
        max-width: 290px;
        padding: 12px 10px;
        font-size: clamp(0.78rem, 3.8vw, 0.92rem);
        letter-spacing: 0.01em;
    }
}

/* ==========================================================================
   ヒーローセクション：ヘッダー直下のお知らせ帯（10,000pt）
   ========================================================================== */
.hero-announcement-bar {
    background-color: #E60013; /* コープさっぽろの鮮やかな赤 */
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    padding: 10px 15px;
    text-align: center;
    box-shadow: none;
    position: relative;
    z-index: 99; /* ヘッダーのすぐ下に固定するため、適度な高さに */
}
.announcement-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    line-height: 1.4;
}
.announcement-badge {
    background-color: #FFF176; /* 明るい黄色 */
    color: #c92118; /* 濃い赤 */
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #c92118;
    box-shadow: none;
    letter-spacing: 0.05em;
}
.announcement-text {
    font-size: clamp(0.85rem, 3.2vw, 1.05rem);
    margin: 0;
    letter-spacing: 0.05em;
}
.announcement-text strong {
    color: #FFF9C4; /* 文字の中のポイント数を明るい黄色で強調 */
    font-size: 1.25em;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin: 0 2px;
}
.announcement-text span {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.95;
    margin-left: 8px;
    display: inline-block;
}

/* スマホ表示での調整 */
@media (max-width: 640px) {
    .hero-announcement-bar {
        padding: 8px 10px;
    }
    .announcement-inner {
        gap: 6px;
    }
    .announcement-text {
        font-size: clamp(0.75rem, 3.2vw, 0.9rem);
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .announcement-text span {
        margin-left: 0;
        display: block; /* スマホでは期間を改行して表示 */
        font-size: 0.85em;
        margin-top: 4px;
    }
}

/* ==========================================================================
   CTA モーダル (Popup)
   ========================================================================== */
.cta-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 暗めの半透明 */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cta-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cta-modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 500px;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 40px 20px;
    position: relative;
    text-align: center;
    box-shadow: none;
    border: 2px solid #ccc;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cta-modal-overlay.active .cta-modal-content {
    transform: translateY(0) scale(1);
}

.cta-modal-close {
    position: absolute;
    top: -15px;
    right: -10px;
    background: #f1f1f1;
    border: 2px solid #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    color: #555;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    border: 1px solid #ccc;
    transition: all 0.2s;
    z-index: 10;
}
.cta-modal-close:hover {
    background: #e0e0e0;
    transform: scale(1.05);
    color: #111;
}

.cta-modal-title {
    font-size: clamp(1rem, 3.8vw, 1.25rem);
    font-weight: bold;
    color: #333;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.cta-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.cta-modal-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 10px;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    border: 3px solid #333;
    box-shadow: 0 5px 0 #222222, 0 8px 16px rgba(0, 0, 0, 0.15);
}
.cta-modal-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #222222, 0 4px 8px rgba(0, 0, 0, 0.12);
}
.cta-modal-btn:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #222222, 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 1. 灯油新規申し込みボタン */
.cta-modal-btn.btn-new {
    background-color: #00A33E;
    color: #fff;
}
.cta-modal-btn.btn-new:hover {
    background-color: #008f36;
}
.cta-modal-btn.btn-new .btn-main-text {
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: 900;
}
.cta-modal-btn.btn-new .btn-sub-text {
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    font-weight: bold;
    margin-top: 8px;
    color: #FFF9C4; /* 視認性の高い薄黄色 */
}

/* 2. 積立申し込みボタン */
.cta-modal-btn.btn-tsumitate {
    background-color: #F25C27; /* 差別化のためオレンジを採用 */
    color: #fff;
}
.cta-modal-btn.btn-tsumitate:hover {
    background-color: #D94D1A;
}
.cta-modal-btn.btn-tsumitate .btn-main-text {
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: 900;
}

/* ==================================
   CROSS CAMPAIGN SECTION HOVER & EFFECTS
   ================================== */
.cc-banner-link {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.cc-banner-link:hover {
    transform: translateY(-5px);
    opacity: 1 !important; /* a:hover of main CSS is overridden */
}
.cc-banner-link:hover .cross-campaign-banner {
    box-shadow: none;
    border-color: #553b26;
}
.cc-banner-link:hover .cc-header {
    background: #553b26;
}
.cross-campaign-banner {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.cc-header {
    transition: background 0.3s ease;
}
.cc-click-note {
    margin-top: 20px;
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    color: #6C4F34;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed #6C4F34;
    padding: 8px 24px;
    border-radius: 30px;
    background-color: #FAF9F5;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    margin-left: auto;
    margin-right: auto;
}
.cc-banner-link:hover .cc-click-note {
    background-color: #6C4F34;
    color: #fff;
    border-color: #6C4F34;
}
.cc-click-note::after {
    content: '→';
    display: inline-block;
    transition: transform 0.2s ease;
}
.cc-banner-link:hover .cc-click-note::after {
    transform: translateX(4px);
}

/* ==========================================================================
   キャンペーンエリア（10,000ポイント箇所）のレスポンシブスタイル
   ========================================================================== */
.campaign-points-display {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #00A03E;
    white-space: nowrap;
    width: 100%;
    padding: 0 5px;
}
.cp-left-block {
    text-align: left;
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 8px;
    margin-right: 5px;
}
.cp-left-block .cp-sub { font-size: clamp(0.8rem, 3vw, 1.05rem); letter-spacing: 0.05em; }
.cp-left-block .cp-main { font-size: clamp(0.95rem, 3.8vw, 1.3rem); }

.cp-center-block { line-height: 0.85; }
#point-counter {
    font-size: clamp(3.2rem, 11vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    font-family: Arial, Helvetica, sans-serif;
}

.cp-right-block {
    text-align: left;
    font-weight: bold;
    font-size: clamp(0.8rem, 3vw, 1.05rem);
    line-height: 1.3;
    padding-bottom: 8px;
    margin-left: 5px;
}

/* スマホ表示時の縦積み対応（表示崩れ防止） */
@media screen and (max-width: 540px) {
    .campaign-points-display {
        flex-direction: column;
        align-items: center;
        white-space: normal;
        gap: 8px;
    }
    .cp-left-block {
        text-align: center;
        margin-right: 0;
        padding-bottom: 0;
    }
    .cp-right-block {
        text-align: center;
        margin-left: 0;
        padding-bottom: 0;
        display: flex;
        gap: 5px;
        align-items: center;
    }
}

/* ==========================================================================
   時間帯連動キャラクター演出（夕方UFO、夜スーパーマン、昼仁王立ちマッチョ、夜筋トレマッチョ）
   ========================================================================== */

/* 1. 夕方限定：飛行機のように高速で空を駆け抜けるUFO（20秒に1回飛来） */
.hero-sky-ufo {
    display: none;
    position: absolute;
    top: 14%;
    left: 0;
    z-index: 4;
    pointer-events: auto;
    cursor: pointer;
    /* 20秒に1回、約2.5秒で一気に夕空を横断 */
    animation: ufoFastJetFlight 20s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    will-change: transform;
}

html.is-time-evening .hero-sky-ufo {
    display: block;
}

@keyframes ufoFastJetFlight {
    0% {
        transform: translate3d(-180px, 35px, 0) rotate(8deg);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    12.5% {
        /* 夕暮れの空を斜め上にマッハで一気に駆け抜ける（約2.5秒） */
        transform: translate3d(calc(100vw + 180px), -45px, 0) rotate(5deg);
        opacity: 1;
    }
    12.6% {
        opacity: 0;
        transform: translate3d(calc(100vw + 180px), -45px, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-180px, 35px, 0);
    }
}

/* ジェット噴射の激しい揺らめき */
.ufo-jet-trail {
    animation: ufoJetFlame 0.12s ease-in-out infinite alternate;
    transform-origin: 20px 34px;
}

@keyframes ufoJetFlame {
    0% { transform: scaleX(0.85) scaleY(0.9); opacity: 0.75; }
    100% { transform: scaleX(1.35) scaleY(1.15); opacity: 1; filter: none; }
}

.ufo-beam {
    animation: ufoBeamPulse 1.8s ease-in-out infinite alternate;
    transform-origin: 62px 38px;
}

@keyframes ufoBeamPulse {
    0% { opacity: 0.2; transform: scaleX(0.85); }
    100% { opacity: 0.55; transform: scaleX(1.15); }
}

.ufo-light {
    animation: ufoLightBlink 0.35s infinite alternate;
}
.ufo-light.light-2, .ufo-light.light-4 {
    animation-delay: 0.12s;
}
.ufo-light.light-3 {
    animation-delay: 0.24s;
}

@keyframes ufoLightBlink {
    0% { opacity: 0.35; filter: none; }
    100% { opacity: 1; filter: none; }
}

.hero-sky-ufo:hover .ufo-body-wrap {
    transform: scale(1.18) rotate(10deg);
    transition: transform 0.2s ease-out;
}

/* 2. 夜景限定：夜空を飛ぶスーパーマン（20秒に1回パトロール飛行） */
.hero-sky-superman {
    display: none;
    position: absolute;
    top: 18%;
    left: 0;
    z-index: 4;
    pointer-events: auto;
    cursor: pointer;
    /* 20秒に1回、約4.8秒かけて夜空を右から左へ滑空 */
    animation: supermanFlightAcross 20s ease-in-out infinite;
    will-change: transform;
}

html.is-time-night .hero-sky-superman {
    display: block;
}

@keyframes supermanFlightAcross {
    0% {
        transform: translate3d(calc(100vw + 200px), 25px, 0) rotate(-2deg);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    6% {
        transform: translate3d(75vw, -12px, 0) rotate(2deg);
    }
    13% {
        transform: translate3d(45vw, 15px, 0) rotate(-2deg);
    }
    19% {
        transform: translate3d(15vw, -8px, 0) rotate(1.5deg);
    }
    24% {
        /* 画面左外へ飛び去る（約4.8秒） */
        transform: translate3d(-240px, 5px, 0) rotate(0deg);
        opacity: 1;
    }
    24.1% {
        opacity: 0;
        transform: translate3d(-240px, 5px, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(100vw + 200px), 25px, 0);
    }
}

.superman-cape {
    transform-origin: 82px 45px;
    animation: supermanCapeFlutter 0.22s ease-in-out infinite alternate;
}

@keyframes supermanCapeFlutter {
    0% { transform: scaleY(0.92) rotate(-2deg); }
    100% { transform: scaleY(1.08) rotate(3deg); }
}

.hero-sky-superman:hover {
    filter: none;
}

/* 3. 地表のマッチョキャラクター（夜限定：高層マンションの屋上に立ってダンベル筋トレ） */
.hero-macho-ground-wrap {
    display: none; /* デフォルト（昼・夕方）は非表示！夜のみ出現 */
    position: absolute;
    bottom: 274px;  /* buil1.png の屋上天面にぴったり接地 */
    left: 38%;     /* ビル屋上の中央 (ビルの本体幅は画像の左側 2〜248px / 331px = 37.8%) */
    transform: translateX(-50%);
    width: 44px;   /* 屋上に堂々と立つバランス（元36pxから拡大して視認性UP） */
    height: 58px;  /* 元48pxから拡大 */
    z-index: 10;   /* ビル画像より前面に確実に表示 */
    pointer-events: auto;
    user-select: none;
    filter: none;
    transition: transform 0.25s ease;
    cursor: pointer;
}

/* タップしやすさ向上のための拡張ヒットボックス（指で簡単にタップ可能） */
.hero-macho-ground-wrap::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -8px;
    pointer-events: auto;
}

html.is-time-night .hero-macho-ground-wrap {
    display: block; /* 夜（is-time-night）のみ出現！ */
}

.hero-macho-ground-wrap .macho-svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* 共通筋トレ吹き出しバッジ（非表示） */
.macho-workout-bubble {
    display: none !important;
}

.hero-macho-night {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 昼：ダンベル筋トレマッチョのアニメーション */
.macho-pose-workout-day {
    animation: machoBodySquat 1.4s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.macho-sparkle {
    transform-origin: 57px 26px;
    animation: machoSparkleFlash 3.5s ease-in-out infinite;
}

@keyframes machoSparkleFlash {
    0%, 75%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    82% { opacity: 1; transform: scale(1.3) rotate(90deg); }
    90% { opacity: 0; transform: scale(0.2) rotate(180deg); }
}

.hero-macho-day:hover .macho-pose-workout-day {
    transform: scale(1.15) translateY(-2px);
    filter: brightness(1.08);
}

/* 夜：ダンベル筋トレマッチョのアニメーション */
.macho-pose-night {
    animation: machoBodySquat 1.4s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

@keyframes machoBodySquat {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px) scale(1.02, 0.98); }
}

.macho-dumbbell-arm-l {
    transform-origin: 32px 42px;
    animation: dumbbellCurlLeft 1.4s ease-in-out infinite alternate;
}

.macho-dumbbell-arm-r {
    transform-origin: 68px 42px;
    animation: dumbbellCurlRight 1.4s ease-in-out infinite alternate;
}

@keyframes dumbbellCurlLeft {
    0% { transform: rotate(0deg) translateY(0); }
    100% { transform: rotate(-38deg) translateY(-14px); }
}

@keyframes dumbbellCurlRight {
    0% { transform: rotate(38deg) translateY(-14px); }
    100% { transform: rotate(0deg) translateY(0); }
}

/* 飛び散る汗 */
.macho-sweat {
    animation: machoSweatDrip 0.8s ease-in infinite alternate;
}
.macho-sweat.sweat-2 {
    animation-delay: 0.4s;
}

@keyframes machoSweatDrip {
    0% { opacity: 0; transform: translate3d(0, -4px, 0) scale(0.6); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(4px, 12px, 0) scale(1.1); }
}

.hero-macho-night:hover .macho-pose-night {
    transform: scale(1.15) translateY(-2px);
}

/* レスポンシブ調整（スマホでも見栄え良く） */
@media screen and (max-width: 768px) {
    .hero-sky-ufo {
        top: 10%;
    }
    .hero-sky-ufo .ufo-body-wrap {
        transform: scale(0.82);
        transform-origin: center center;
    }
    .hero-sky-superman {
        top: 14%;
    }
    .hero-sky-superman .superman-body-wrap {
        transform: scale(0.8);
        transform-origin: center center;
    }
    .hero-macho-ground-wrap {
        left: 38%;
        transform: translateX(-50%);
        bottom: 182px; /* スマホ時の高層マンション屋上天面にぴったり接地 */
        width: 34px;   /* 元24pxから拡大してタップしやすく */
        height: 45px;  /* 元32pxから拡大 */
    }
    .hero-macho-ground-wrap::before {
        top: -14px;
        left: -14px;
        right: -14px;
        bottom: -10px;
    }
}

/* ==========================================================================
   新規加入ポイントキャンペーン セクション（フラット調和型レッドバナー・影なし・スマホ超スリム）
   ========================================================================== */
.section-point-campaign {
    position: relative;
    padding: 32px 0 40px;
    background: #FFFDF5; /* LP全体の自然なトーンに調和 */
}

/* ポイントバナー上部の期間リマインドバー */
.point-period-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.point-period-badge {
    background: #00A03E;
    color: #ffffff;
    font-size: clamp(0.7rem, 1.4vw, 0.8rem);
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.point-period-dates {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Outfit', 'Montserrat', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    color: #2d3436;
    line-height: 1;
}
.point-period-dates .p-period-main {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    letter-spacing: -0.01em;
}
.point-period-dates .p-period-day {
    font-size: clamp(0.62rem, 1.1vw, 0.75rem);
    font-weight: 900;
    margin-left: 2px;
    margin-right: 2px;
}
.point-period-dates .p-period-sep {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    margin: 0 5px;
    color: #636e72;
}

.point-banner-main {
    max-width: 1040px;
    margin: 0 auto;
}

/* バナーカード本体：ドロップシャドウを完全撤去！フラットで鮮やかな赤 */
.p-banner-card {
    background: #E60012; /* 元バナーの鮮やかな赤ベタ */
    border: none; /* 黄色枠線を完全撤去 */
    border-radius: 16px;
    padding: 24px 22px 18px;
    color: #ffffff;
    box-shadow: none; /* ★ドロップシャドウを完全に無くす！★ */
    position: relative;
    text-align: left;
}

/* PC：横並びフレックス */
.p-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* 左側：もれなく！新規ご加入でプレゼント */
.p-banner-lead-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
    padding-right: 20px;
}
.p-ribbon-badge {
    display: inline-block;
    background: #ffffff;
    color: #00A03E;
    font-size: clamp(0.88rem, 1.8vw, 1.15rem);
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #e0e0e0;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    transform: rotate(-3deg);
}
.p-lead-title {
    display: flex;
    flex-direction: column;
    color: #FEDD00;
    text-shadow: none; /* 白フチを完全撤去してソリッドでシャープに！ */
    line-height: 1.18;
}
.p-lead-sub {
    font-size: clamp(0.95rem, 1.8vw, 1.3rem);
    font-weight: 900;
    color: #FEDD00;
}
.p-lead-main {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 900;
    color: #FEDD00;
    letter-spacing: 0.02em;
}
.p-chevron-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 36px;
}
.p-chevron-arrow svg {
    width: 100%;
    height: 100%;
}

/* 中央：3サービス（PC） */
.p-services-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}
.p-svc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.p-svc-name {
    font-size: clamp(0.9rem, 1.7vw, 1.15rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 1px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.p-svc-old {
    font-size: clamp(0.58rem, 0.95vw, 0.7rem);
    font-weight: 700;
    color: #ffffff;
    opacity: 0.95;
    white-space: nowrap;
    margin-bottom: 3px;
    text-decoration: line-through;
    text-decoration-color: rgba(254, 221, 0, 0.9);
    text-decoration-thickness: 1.5px;
}
.p-svc-main {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.p-svc-icon {
    width: clamp(32px, 3.6vw, 42px);
    height: clamp(32px, 3.6vw, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.p-svc-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.p-svc-pt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.p-pt-val {
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
}
.p-pt-unit {
    font-size: clamp(0.62rem, 0.95vw, 0.78rem);
    font-weight: 800;
    color: #ffffff;
    margin-top: 1px;
    white-space: nowrap;
}
.p-plus-sign {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    opacity: 0.9;
    flex-shrink: 0;
}

/* 右側：最大11,000ptプレゼント白丸フキダシ（絶対に見切れないサイズ調整！） */
.p-banner-total-block {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.p-bubble-circle {
    background: #ffffff;
    color: #4a2c00;
    border-radius: 50%;
    width: clamp(120px, 14vw, 150px);
    height: clamp(120px, 14vw, 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 4px;
    box-shadow: none; /* 影なし */
}
.p-bubble-circle::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 11px 7px 0;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}
.p-bb-label {
    font-size: clamp(0.72rem, 1.1vw, 0.88rem);
    font-weight: 900;
    color: #4a2c00;
    line-height: 1.1;
}
.p-bb-num {
    font-size: clamp(1.5rem, 2.7vw, 2.2rem);
    font-weight: 900;
    color: #4a2c00;
    letter-spacing: -0.03em;
    line-height: 1;
    font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
    margin: 2px 0;
}
.p-bb-unit {
    font-size: clamp(0.68rem, 0.95vw, 0.8rem);
    font-weight: 900;
    color: #4a2c00;
    line-height: 1;
}
.p-bb-action {
    font-size: clamp(0.68rem, 0.95vw, 0.8rem);
    font-weight: 900;
    color: #4a2c00;
    line-height: 1;
    margin-top: 1px;
}

/* 下部：注記 */
.p-banner-notes {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: clamp(0.62rem, 0.95vw, 0.7rem);
    line-height: 1.45;
    color: #ffffff;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.p-note-txt {
    margin: 0 0 4px;
    opacity: 0.95;
    text-align: left;
}
.p-note-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.p-note-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-align: left;
}
.p-note-badge {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
}
.p-note-desc {
    flex-grow: 1;
    opacity: 0.95;
    text-align: left;
}

/* ==========================================================================
   スマホ（768px以下）：縦長を完全解消！超コンパクト設計！
   ========================================================================== */
@media screen and (max-width: 768px) {
    .section-point-campaign {
        padding: 18px 0 26px;
    }
    .p-banner-card {
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .p-banner-content {
        flex-direction: column;
        gap: 8px;
    }

    /* 上段：キャッチコピーと最大11,000ptバッジを1行で左右並列！ */
    .p-banner-lead-block {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: 0;
        gap: 6px;
    }
    .p-chevron-arrow {
        display: none;
    }
    .p-ribbon-badge {
        font-size: 0.75rem;
        padding: 2px 6px;
        margin-bottom: 0;
        transform: none;
    }
    .p-lead-title {
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        text-shadow: none; /* ★白フチを撤去し、赤背景でクッキリ読みやすく！★ */
    }
    .p-lead-sub {
        font-size: 0.92rem;
        font-weight: 900;
        color: #FEDD00;
    }
    .p-lead-main {
        font-size: 1.15rem;
        font-weight: 900;
        color: #FEDD00;
        letter-spacing: 0.02em;
    }

    /* 右側の吹き出しをスマホでは上段右側のピルバッジへ変形！ */
    .p-banner-total-block {
        width: 100%;
    }
    .p-bubble-circle {
        width: 100%;
        height: auto;
        border-radius: 8px;
        padding: 6px 8px;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
    }
    .p-bubble-circle::before {
        display: none;
    }
    .p-bb-label {
        font-size: 0.78rem;
    }
    .p-bb-num {
        font-size: 1.45rem;
        margin: 0;
    }
    .p-bb-unit {
        font-size: 0.75rem;
    }
    .p-bb-action {
        font-size: 0.75rem;
        margin-top: 0;
    }

    /* 中段：3サービス（スマホでも横3列・1行で超スリム！） */
    .p-services-group {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 3px;
        width: 100%;
    }
    .p-svc-box {
        background: rgba(0, 0, 0, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 6px 2px;
        width: 100%;
    }
    .p-svc-name {
        font-size: 0.76rem;
        margin-bottom: 0;
    }
    .p-svc-old {
        font-size: 0.52rem;
        margin-bottom: 2px;
    }
    .p-svc-main {
        flex-direction: column;
        gap: 1px;
    }
    .p-svc-icon {
        width: 28px;
        height: 28px;
    }
    .p-svc-pt {
        align-items: center;
    }
    .p-pt-val {
        font-size: 1.15rem;
    }
    .p-pt-unit {
        font-size: 0.6rem;
    }
    .p-plus-sign {
        font-size: 0.85rem;
        margin: 0;
    }

    /* 下段注記 */
    .p-banner-notes {
        margin-top: 8px;
        padding-top: 8px;
        font-size: 0.58rem;
        line-height: 1.35;
        text-align: left;
    }
    .p-note-txt {
        text-align: left;
    }
    .p-note-item {
        flex-direction: column;
        gap: 1px;
        text-align: left;
    }
    .p-note-badge {
        font-size: 0.55rem;
        padding: 1px 4px;
        align-self: flex-start;
        text-align: left;
    }
    .p-note-desc {
        text-align: left;
    }
}

/* ==========================================================================
   サービス特徴スライダー（定期配達 ＆ アプリマイページ）
   ========================================================================== */
.section-features-slider {
    background-color: #ffffff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* 切り替えタブUI（アンダーライン型・CTAボタンと完全に差別化） */
.feature-tabs-wrapper {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid #E5E5E5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.feature-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-bottom: -2px; /* 下線ボーダーと一体化 */
}

.feature-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 16px 14px;
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    color: #888888;
    cursor: pointer;
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
    outline: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.feature-tab-btn:hover {
    color: #00A03E;
}

.feature-tab-btn.is-active {
    color: #00A03E;
    font-weight: 900;
    border-bottom: 4px solid #00A03E;
    background: transparent;
}

/* スライダーコンテナ */
.feature-slider-container {
    position: relative;
    padding: 0 10px;
}

.feature-swiper {
    width: 100%;
    padding-bottom: 40px;
}

.feature-slide {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* 左右ナビゲーション矢印ボタン */
.feature-swiper-prev,
.feature-swiper-next {
    position: absolute;
    top: 220px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 2px solid #222222;
    border-radius: 50%;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: none;
}

.feature-swiper-prev {
    left: -25px;
}

.feature-swiper-next {
    right: -25px;
}

.feature-swiper-prev:hover,
.feature-swiper-next:hover {
    background-color: #00A03E;
    color: #ffffff;
    border-color: #00A03E;
}

.feature-swiper-prev.swiper-button-disabled,
.feature-swiper-next.swiper-button-disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

/* 下部ページネーション（ドット） */
.feature-swiper-pagination {
    position: absolute;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    text-align: center;
}

.feature-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #cccccc;
    opacity: 1;
    border: 1.5px solid #222222;
    margin: 0 6px !important;
    transition: all 0.25s ease;
    border-radius: 50%;
    cursor: pointer;
}

.feature-swiper-pagination .swiper-pagination-bullet-active {
    background: #00A03E;
    width: 28px;
    border-radius: 10px;
    border-color: #222222;
}

/* レスポンシブ調整（スマホ） */
@media screen and (max-width: 768px) {
    .feature-tabs-wrapper {
        margin-bottom: 28px;
        max-width: 100%;
        padding: 0 10px;
    }
    .feature-tabs {
        width: 100%;
        max-width: 100%;
    }
    .feature-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 4px 12px;
        font-size: clamp(0.92rem, 4vw, 1.05rem);
    }
    /* スマホではスワイプ操作が快適なため矢印は非表示にしてコンテンツ幅を最大化 */
    .feature-swiper-prev,
    .feature-swiper-next {
        display: none;
    }
}

/* ==========================================================================
   隠れマッチョを探せ！Instagramキャンペーン用スタイル（脱AI・コープデザイン準拠）
   ========================================================================== */

/* 1. マッチョ共通トリガー */
.hidden-macho-trigger {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.hidden-macho-trigger:hover {
    transform: scale(1.1);
}

.hidden-macho-trigger:active {
    transform: scale(0.95);
}

/* 発見済みバッジ（頭上にピョコッと表示） */
.hidden-macho-trigger::after {
    content: "発見！✓";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #E60013;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1.5px solid #222;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 20;
    opacity: 0;
}

.hidden-macho-trigger.is-found::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* 2. マッチョ2：あったか灯油積立セクション（スクワット＆タンクプレス筋トレ） */
.savings-macho-wrap {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 66px;
    height: 84px;
    z-index: 15;
}

.macho-pose-squat {
    animation: machoSquatWorkout 1.8s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.macho-poly-tank {
    animation: machoTankPressLift 1.8s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.macho-arms-press {
    animation: machoArmsPressLift 1.8s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.macho-legs-squat {
    animation: machoLegsSquatMotion 1.8s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

@keyframes machoSquatWorkout {
    0% { transform: translateY(0) scale(1, 1); }
    40% { transform: translateY(8px) scale(1.06, 0.92); } /* 深くスクワット */
    100% { transform: translateY(-4px) scale(0.97, 1.04); } /* グッと伸び上がり */
}

@keyframes machoTankPressLift {
    0% { transform: translateY(0); }
    40% { transform: translateY(6px); }
    100% { transform: translateY(-12px); } /* 頭上高くタンクをショルダープレス！ */
}

@keyframes machoArmsPressLift {
    0% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    100% { transform: translateY(-10px); }
}

@keyframes machoLegsSquatMotion {
    0% { transform: scaleY(1); }
    40% { transform: scaleY(0.85); }
    100% { transform: scaleY(1.02); }
}

@media screen and (max-width: 768px) {
    .savings-macho-wrap {
        top: 4px;
        right: 8px;
        width: 52px;
        height: 66px;
    }
}

/* 3. マッチョ3：トドックアプリ紹介（スマホ×ケトルベル片手カール筋トレ） */
.app-macho-wrap {
    position: absolute;
    bottom: -15px;
    right: -25px;
    width: 78px;
    height: 98px;
    z-index: 10;
}

.macho-pose-kettlebell {
    animation: machoKettlebellWorkout 1.6s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.macho-kettlebell-arm-r {
    transform-origin: 68px 40px;
    animation: kettlebellCurl 1.6s ease-in-out infinite alternate;
}

@keyframes machoKettlebellWorkout {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(2px) rotate(1deg); }
    100% { transform: translateY(-3px) rotate(-2deg); }
}

@keyframes kettlebellCurl {
    0% { transform: rotate(0deg) translateY(0); }
    100% { transform: rotate(-42deg) translateY(-16px); } /* 20kgケトルベルをグイッと持ち上げ */
}

@media screen and (max-width: 768px) {
    .app-macho-wrap {
        bottom: -20px;
        right: -8px;
        width: 65px;
        height: 82px;
    }
}

/* 発見時のジャンプ＆ハイライト演出 */
.hidden-macho-trigger.is-highlighted {
    animation: machoHighlightPulse 1.2s ease-in-out 2 !important;
}

@keyframes machoHighlightPulse {
    0%, 100% { transform: scale(1); filter: none; }
    50% { transform: scale(1.25) translateY(-8px); filter: drop-shadow(0 0 10px #ffeaa7) drop-shadow(0 0 5px #00A03E); }
}

/* 4. 発見トースト通知 */
.macho-toast {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #222222;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 9999;
    transform: translateY(120px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.macho-toast.is-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.macho-toast-body {
    display: flex;
    flex-direction: column;
}

.macho-toast-title {
    font-size: 13px;
    font-weight: 900;
    color: #FFDE00;
    line-height: 1.3;
}

.macho-toast-sub {
    font-size: 11px;
    color: #f1f2f6;
    margin-top: 2px;
}

.macho-toast-badge {
    background: #E60013;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .macho-toast {
        left: 50%;
        right: auto;
        bottom: 20px;
        transform: translate(-50%, 120px);
        width: calc(100% - 30px);
        max-width: 360px;
        justify-content: space-between;
    }
    .macho-toast.is-show {
        transform: translate(-50%, 0);
    }
}

/* 5. コンプリートモーダル（実直で温かいコープデザイン） */
.macho-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.macho-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.macho-modal-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    padding: 35px 25px 30px;
    position: relative;
    text-align: center;
    border: 3px solid #00A03E;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow-y: auto;
}

.macho-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: #f1f2f6;
    border: 1px solid #ddd;
    font-size: 20px;
    color: #444;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.macho-modal-close:hover {
    background: #e0e0e0;
    color: #000;
}

.macho-modal-badge {
    display: inline-block;
    background: #E60013;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.macho-modal-title {
    color: #00A03E;
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 12px;
    font-family: 'Noto Sans JP', sans-serif;
}

.macho-modal-desc {
    font-size: 13.5px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 20px;
}

.macho-secret-box {
    background: #FFFBE6;
    border: 2px solid #E60013;
    border-radius: 8px;
    padding: 16px 14px;
    margin-bottom: 20px;
}

.secret-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    color: #E60013;
    margin-bottom: 6px;
}

.secret-code {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    font-weight: 900;
    color: #222;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.03em;
    user-select: all;
    margin-bottom: 12px;
    line-height: 1.4;
}

.secret-copy-btn {
    background: #ffffff;
    border: 2px solid #222222;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    color: #222;
    transition: all 0.2s ease;
}

.secret-copy-btn:hover {
    background: #222222;
    color: #ffffff;
}

.macho-howto-apply {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 15px 18px;
    text-align: left;
    margin-bottom: 22px;
}

.howto-title {
    font-size: 13px;
    font-weight: 900;
    color: #222;
    margin-bottom: 8px;
    border-bottom: 2px solid #00A03E;
    padding-bottom: 4px;
    display: inline-block;
}

.howto-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 12.5px;
    color: #444;
    line-height: 1.8;
}

.macho-btn-insta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00A03E;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 900;
    font-size: 15px;
    padding: 15px 24px;
    border-radius: 50px;
    border: 2px solid #222222;
    box-shadow: 0 4px 0 #007a2f;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.macho-btn-insta:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #007a2f;
}

/* 6. Instagramキャンペーン特設セクション（脱AI・実直なコーポレート告知デザイン） */
.section-insta-campaign {
    background: linear-gradient(180deg, #bde2f9 0%, #caeafb 40%, #def1fc 70%, #edf7fd 100%);
    padding: 60px 0 70px;
    position: relative;
    text-align: center;
    scroll-margin-top: 80px;
}

.section-insta-campaign .sp-only {
    display: none;
}
.section-insta-campaign .pc-only {
    display: inline;
}

@media screen and (max-width: 640px) {
    .section-insta-campaign .sp-only {
        display: inline;
    }
    .section-insta-campaign .pc-only {
        display: none;
    }
}

/* セクション見出し */
.insta-section-header {
    margin-bottom: 28px;
    text-align: center;
}

/* 上部カテゴリタグ（脱AI・実直で清潔なコーポレートタグ） */
.insta-label-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin: 0 auto 16px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.insta-label-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.insta-label-text {
    font-size: clamp(0.78rem, 2.4vw, 0.88rem);
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.02em;
    line-height: 1.35;
    white-space: nowrap;
}

/* 企画期間バッジ（実直で清潔なコーポレート表示） */
.insta-period-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 14px;
    font-size: clamp(0.82rem, 2.5vw, 0.94rem);
    color: #374151;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.insta-period-badge .period-label {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.insta-period-badge .period-dates {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1f2937;
    font-weight: 800;
}

.insta-period-badge .period-day {
    font-size: 0.82em;
    font-weight: 700;
    color: #64748b;
    margin-left: 1px;
}

.insta-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 14px;
    line-height: 1.35;
    text-align: center;
}

.insta-title-sub {
    font-size: clamp(0.88rem, 2.8vw, 1.1rem);
    font-weight: 700;
    color: #445058;
    letter-spacing: 0.06em;
}

.insta-title-main {
    font-size: clamp(1.28rem, 4.8vw, 1.95rem);
    font-weight: 900;
    color: #00873c;
    letter-spacing: 0.03em;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
}

.insta-section-lead {
    font-size: clamp(0.85rem, 2.7vw, 0.98rem);
    color: #3e3e3e;
    line-height: 1.85;
    margin: 0 auto;
    font-weight: 500;
    max-width: 560px;
    text-align: center;
}

.insta-section-lead strong {
    color: #00873c;
    font-weight: 800;
}

.insta-lead-note {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.88em;
    color: #d9531e;
    font-weight: 700;
}

/* ユーティリティ: 単語・文節の泣き別れ防止 */
.u-inline-block {
    display: inline-block;
}
.u-nowrap {
    white-space: nowrap;
}

/* キャンペーン案内エリア（枠線なし・1枚の清潔な白下地） */
.insta-simple-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 34px 28px 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 応募手順リスト */
.insta-flow-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 26px;
    text-align: left;
}

.flow-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.flow-num {
    font-size: 16px;
    font-weight: 900;
    color: #00A03E;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    border-bottom: 2px solid #00A03E;
    padding-bottom: 2px;
    margin-top: 2px;
}

.flow-body {
    flex: 1;
}

.flow-body strong {
    font-size: 14px;
    font-weight: 800;
    color: #222222;
    display: block;
    margin-bottom: 3px;
    line-height: 1.4;
}

.flow-body p {
    font-size: 12.5px;
    color: #666666;
    line-height: 1.55;
    margin: 0;
}

/* アカウント・賞品情報 */
.insta-info-group {
    border-top: 1px solid #f0ece1;
    padding-top: 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.insta-account-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.insta-account-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.insta-account-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #222222;
    display: block;
    line-height: 1.2;
    margin-bottom: 2px;
    text-align: left;
}

.insta-account-id {
    font-size: 13px;
    font-weight: 700;
    color: #E60013;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    display: block;
    text-align: left;
    transition: color 0.2s;
}

.insta-account-id:hover {
    color: #00A03E;
    text-decoration: underline;
}

/* キャンペーン賞品案内ブロック（囲みなし・セクション調和型） */
.insta-prize-unit {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
    margin: 14px auto 22px;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
}

.prize-unit-visual {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.prize-todock-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.prize-unit-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.prize-unit-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.prize-badge-jp {
    background: #e60012;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    display: inline-block;
}

.prize-quota-txt {
    font-size: 13px;
    color: #333333;
    font-weight: 700;
}

.prize-quota-txt strong {
    color: #e60012;
    font-size: 15px;
    font-weight: 800;
}

.prize-unit-name {
    display: flex;
    flex-direction: column;
}

.prize-unit-sub {
    font-size: 12px;
    font-weight: 700;
    color: #666666;
    line-height: 1.2;
}

.prize-unit-main {
    font-size: 19px;
    font-weight: 900;
    color: #111827;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* アクションボタン（サイト共通の立体押し込みテイスト） */
.insta-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

.btn-insta-clean {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #00A33E;
    color: #ffffff !important;
    font-weight: 900;
    font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    padding: 15px clamp(20px, 5vw, 40px);
    border-radius: 50px;
    border: 3px solid #333333;
    text-decoration: none;
    box-shadow: 0 5px 0 #222222, 0 8px 16px rgba(0, 163, 62, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    letter-spacing: 0.04em;
    width: auto;
    max-width: min(100%, 380px);
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}

.btn-insta-clean:hover {
    background-color: #008f36;
    transform: translateY(3px);
    box-shadow: 0 2px 0 #222222, 0 4px 8px rgba(0, 163, 62, 0.2);
    color: #ffffff !important;
}

.btn-insta-clean:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #222222, 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-insta-clean svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.btn-clean-modal {
    background: transparent;
    border: none;
    color: #00A03E;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.btn-clean-modal:hover {
    color: #007a2f;
}

@media screen and (max-width: 640px) {
    .section-insta-campaign {
        padding: 50px 0 60px;
    }
    .insta-label-tag {
        padding: 5px 12px;
        gap: 6px;
        margin-bottom: 12px;
    }
    .insta-label-icon {
        width: 17px;
        height: 17px;
    }
    .insta-label-text {
        font-size: clamp(10.5px, 2.9vw, 12px);
    }
    .insta-section-lead {
        font-size: 13.5px;
        line-height: 1.8;
    }
    .insta-lead-note {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.55;
    }
    .insta-simple-box {
        padding: 24px 18px 22px;
    }
    .flow-row {
        gap: 10px;
    }
    .flow-body strong {
        font-size: 13.5px;
    }
    .flow-body p {
        font-size: 12px;
    }
    .insta-prize-unit {
        padding: 6px 0;
        gap: 12px;
    }
    .prize-unit-visual {
        width: 54px;
        height: 54px;
    }
    .prize-unit-main {
        font-size: 16.5px;
    }
    .btn-insta-clean {
        width: 100%;
        max-width: 340px;
        padding: 13px 18px;
        font-size: clamp(0.9rem, 3.8vw, 1rem);
        white-space: nowrap;
    }
    .btn-clean-modal {
        margin-bottom: 6px;
    }
}

/* スタンプラリー風 発見ステータス（筋トレマッチョカード） */
.macho-stamp-rally {
    background: #FAF9F5;
    border: 2px dashed #00A03E;
    border-radius: 14px;
    padding: 22px 16px 20px;
    margin-bottom: 30px;
}

.stamp-rally-title {
    font-size: 15px;
    font-weight: 900;
    color: #00A03E;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.stamp-rally-title .title-sub {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #E60013;
    margin-bottom: 4px;
}

.stamp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stamp-card {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 8px 12px;
    text-align: center;
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.stamp-card:hover {
    transform: translateY(-4px);
    border-color: #00A03E;
    box-shadow: 0 6px 16px rgba(0, 160, 62, 0.15);
}

.stamp-card:active {
    transform: translateY(-1px);
}

.stamp-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0 2px;
}

.stamp-badge {
    display: inline-block;
    background: #888888;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.stamp-num {
    font-size: 13px;
    font-weight: 900;
    color: #00A03E;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

/* マッチョビジュアルラッパー */
.stamp-visual-wrap {
    width: 100%;
    height: 86px;
    background: #F4F7F2;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 1px solid #edf2e8;
}

.stamp-macho-svg {
    width: 68px;
    height: 82px;
    display: block;
    transition: all 0.3s ease;
}

/* 未発見時は力強いシルエット調（筋トレアニメーションは元気に動く！） */
.stamp-card:not(.is-found) .stamp-macho-svg {
    filter: brightness(0.2) saturate(0%);
    opacity: 0.55;
}

/* 各マッチョの筋トレミニプレビューアニメーション */
.macho-preview-1 {
    animation: previewDumbbell 1.4s ease-in-out infinite alternate;
}
.preview-arm-r {
    transform-origin: 68px 40px;
    animation: dumbbellCurlRight 1.4s ease-in-out infinite alternate;
}
.preview-arm-l {
    transform-origin: 32px 40px;
    animation: dumbbellCurlLeft 1.4s ease-in-out infinite alternate;
}

.macho-preview-2 {
    animation: previewSquat 1.8s ease-in-out infinite alternate;
}
.preview-tank {
    animation: previewTankLift 1.8s ease-in-out infinite alternate;
}

.macho-preview-3 {
    animation: previewKettlebell 1.6s ease-in-out infinite alternate;
}
.preview-kettlebell {
    transform-origin: 68px 40px;
    animation: kettlebellCurl 1.6s ease-in-out infinite alternate;
}

@keyframes previewDumbbell {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

@keyframes previewSquat {
    0% { transform: translateY(0); }
    40% { transform: translateY(6px); }
    100% { transform: translateY(-3px); }
}

@keyframes previewTankLift {
    0% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    100% { transform: translateY(-8px); }
}

@keyframes previewKettlebell {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2px); }
}

/* 発見時の太鼓判スタンプ */
.stamp-found-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg) scale(0);
    background: rgba(230, 0, 19, 0.92);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 4px;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

/* 発見済みカードの状態 */
.stamp-card.is-found {
    border-color: #00A03E;
    background: #F0FFF4;
    box-shadow: 0 4px 12px rgba(0, 160, 62, 0.12);
}

.stamp-card.is-found .stamp-badge {
    background: #E60013;
}

.stamp-card.is-found .stamp-visual-wrap {
    background: #ffffff;
    border-color: #cde6d2;
}

.stamp-card.is-found .stamp-macho-svg {
    filter: none;
    opacity: 1;
}

.stamp-card.is-found .stamp-found-seal {
    transform: translate(-50%, -50%) rotate(-12deg) scale(1);
    opacity: 1;
}

.stamp-macho-name {
    font-size: 11.5px;
    font-weight: 900;
    color: #111111;
    line-height: 1.35;
    margin-bottom: 2px;
}

.stamp-macho-workout {
    font-size: 10px;
    font-weight: 800;
    color: #E60013;
    line-height: 1.3;
    margin-bottom: 5px;
}

.stamp-macho-hint {
    font-size: 10px;
    font-weight: 700;
    color: #00A03E;
    background: #E8F7EC;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-block;
    line-height: 1.3;
    margin-top: auto;
    transition: background 0.2s ease;
}

.stamp-card:hover .stamp-macho-hint {
    background: #00A03E;
    color: #ffffff;
}

@media screen and (max-width: 480px) {
    .stamp-cards-grid {
        gap: 8px;
    }
    .stamp-card {
        padding: 8px 4px 10px;
    }
    .stamp-visual-wrap {
        height: 72px;
    }
    .stamp-macho-svg {
        width: 56px;
        height: 68px;
    }
    .stamp-macho-name {
        font-size: 10px;
    }
    .stamp-macho-workout {
        font-size: 9px;
    }
    .stamp-macho-hint {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* 応募の流れ 3STEP */
.insta-flow-box {
    margin-bottom: 30px;
    border-top: 1px solid #e5e5e5;
    padding-top: 25px;
}

.flow-box-title {
    font-size: 14px;
    font-weight: 900;
    color: #222;
    margin-bottom: 16px;
}

.flow-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.flow-step-item {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 6px;
}

.flow-step-num {
    display: inline-block;
    background: #222222;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
    font-family: 'Outfit', sans-serif;
}

.flow-step-desc {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #333;
}

.flow-step-arrow {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

/* プレゼント賞品リスト */
.insta-presents-section {
    background: #fdfaf3;
    border-radius: 10px;
    border: 1px solid #edd9bf;
    padding: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.presents-title {
    font-size: 13px;
    font-weight: 900;
    color: #6B4A31;
    margin-bottom: 12px;
    text-align: center;
}

.presents-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.present-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #333;
    padding: 6px 0;
}

.present-single-box {
    background: #ffffff;
    border: 1.5px solid #d8ebd9;
    border-radius: 12px;
    padding: 14px 20px;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(0, 160, 62, 0.05);
}

.tag-todock {
    background: #E60013;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    padding: 5px 14px;
    border-radius: 6px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.present-detail {
    line-height: 1.4;
    font-size: 14px;
    color: #222222;
}

.present-detail strong {
    color: #00A03E;
    font-size: 16px;
    font-weight: 900;
}

/* ボタン（押し込めるスタイル） */
.btn-macho-status {
    background: #00A03E;
    color: #ffffff;
    border: 2px solid #222222;
    border-radius: 50px;
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    font-weight: 900;
    padding: 15px 36px;
    cursor: pointer;
    box-shadow: 0 4px 0 #007a2f;
    transition: all 0.15s ease;
}

.btn-macho-status:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #007a2f;
}

@media screen and (max-width: 768px) {
    .section-insta-campaign {
        padding: 50px 0 60px;
    }
    .insta-prize-clean {
        flex-direction: column;
        gap: 6px;
    }
}

/* ==========================================================================
   見出しインタラクティブ風船（heroセクション世界観統一仕様）
   ========================================================================== */
.heading-balloon-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: clamp(8px, 1.6vw, 14px);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.h-balloon-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: clamp(32px, 4.2vw, 42px);
    transform-origin: 50% 90%;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

/* ホバー・タッチで揺れる（ぷるぷる・ゆらゆら） */
.heading-balloon-trigger:hover .h-balloon-unit,
.heading-balloon-trigger:focus-visible .h-balloon-unit,
.heading-balloon-trigger.is-wobbling .h-balloon-unit {
    animation: headingBalloonWobble 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite alternate;
}

/* 破裂時（パンッと弾けて消える） */
.heading-balloon-trigger.is-popped {
    pointer-events: none;
}
.heading-balloon-trigger.is-popped .h-balloon-unit {
    animation: headingBalloonPopOut 0.16s ease-out forwards;
}

/* 復活時（ポコッと飛び出す） */
.heading-balloon-trigger.is-respawning .h-balloon-unit {
    animation: headingBalloonPopIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 風船の本体（heroと同一比率のたまご型＆同一グラデーション・見出しに映える大きめサイズ） */
.h-balloon-body {
    position: relative;
    display: block;
    width: clamp(30px, 3.8vw, 38px);
    height: clamp(36px, 4.6vw, 46px);
    border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
    box-shadow: none;
    flex-shrink: 0;
}

/* 灯油・統一グリーン */
.h-balloon-toyu .h-balloon-body {
    background: radial-gradient(circle at 35% 30%, #15a84f 0%, #008a3d 70%, #00682c 100%);
}

/* でんき（オレンジ） */
.h-balloon-denki .h-balloon-body {
    background: radial-gradient(circle at 35% 30%, #ff8c3b 0%, #f37021 70%, #cc550f 100%);
}

/* プロパンガス（ブルー） */
.h-balloon-gas .h-balloon-body {
    background: radial-gradient(circle at 35% 30%, #29b6f6 0%, #009fe8 70%, #0077b5 100%);
}

/* 風船の光沢ハイライト（heroと同一設定） */
.h-balloon-highlight {
    position: absolute;
    top: 14%;
    left: 18%;
    width: 28%;
    height: 38%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 75%);
    border-radius: 50%;
    transform: rotate(-30deg);
    pointer-events: none;
}

/* 風船の結び目（三角） */
.h-balloon-knot {
    position: relative;
    width: 0;
    height: 0;
    margin: -1px auto 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    flex-shrink: 0;
}
.h-balloon-toyu .h-balloon-knot { border-bottom: 6px solid #008a3d; }
.h-balloon-denki .h-balloon-knot { border-bottom: 6px solid #f37021; }
.h-balloon-gas .h-balloon-knot { border-bottom: 6px solid #009fe8; }

/* 風船のヒモ（紐） */
.h-balloon-string {
    width: clamp(14px, 1.8vw, 18px);
    height: clamp(20px, 2.6vw, 26px);
    margin: -1px auto 0;
    position: relative;
    display: block;
    overflow: visible;
    flex-shrink: 0;
}

.h-balloon-string-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* 飛び散る破片パーティクル */
.heading-balloon-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    will-change: transform, opacity;
}

@keyframes headingBalloonWobble {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-9deg) scale(1.08, 0.94); }
    50% { transform: rotate(8deg) scale(0.94, 1.07); }
    75% { transform: rotate(-5deg) scale(1.04, 0.97); }
    100% { transform: rotate(4deg) scale(1, 1); }
}

@keyframes headingBalloonPopOut {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.4); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes headingBalloonPopIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}