/* ヒーロー画像に重ねるCTAバンド（見出し・独立3ボックス・LINE予約）
   ヒーロー画像の最下部に下を揃えて透過で重なり、横からスライドインする。 */
.hero-wrap {
    position: relative;
}
/* 見出し＋3ボックス: ヒーロー画像の最下部に重ねる透過バンド（元の位置） */
#hero-overlay.hero-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(43, 37, 35, 0.42) 0%, rgba(22, 17, 15, 0.78) 55%, rgba(12, 9, 8, 0.88) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    padding: 20px 4% 30px;
    overflow: visible;
}
/* LINEでカンタン1分予約: ヒーローとインスタの間の独立バンド（背景なし・中央のボタンのみ） */
#line.hero-cta {
    position: relative;
    width: 100%;
    margin: 0;
    z-index: 1;
    background: none;
    color: inherit;
    padding: 22px 4%;
    overflow: visible;
}
.hero-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* LINE予約ピル（バンド上端に少しせり出して写真に重なる） */
.hero-cta-line-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 11px 24px;
    background: rgba(120, 120, 120, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta-line-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.hero-cta-line-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #06c755;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 見出し（明朝体） */
.hero-cta-heading {
    font-family: "Zen Old Mincho", serif;
    font-weight: 700;
    line-height: 1.5;
    font-size: clamp(1.35rem, 4.6vw, 1.85rem);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero-cta-heading span {
    display: block;
}

/* 独立した3ボックス */
.hero-cta-frame {
    display: flex;
    gap: clamp(6px, 1.6vw, 14px);
    justify-content: center;
}
.hero-cta-col {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
    padding: clamp(8px, 1.6vw, 14px) clamp(3px, 1vw, 12px);
    font-weight: 600;
}
/* Cocoonのグローバルp指定(14px/letter-spacing/justify)を上書きし、必ず3行に収める */
.hero-cta-col p {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(0.58rem, 2.5vw, 0.92rem);
    letter-spacing: 0.01em;
    line-height: 1.85;
    text-align: center;   /* 箱の中は中央揃え */
}
/* 各枠上部のアイコン（白の線画SVG） */
.hero-cta-icon {
    display: block;
    margin: 0 auto 4px;
    width: clamp(26px, 8vw, 34px);
    height: clamp(26px, 8vw, 34px);
    color: #1a1a1a;
}
.hero-cta-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- PC（スマホのバランスは維持し、601px以上のみ調整） ---- */
@media (min-width: 601px) {
    #hero-overlay.hero-cta { padding: 14px 4% 20px; }
    #line.hero-cta { padding: 18px 4%; }
    .hero-cta-line-btn { margin-top: 0; margin-bottom: 0; }
    /* 見出しを1行に */
    .hero-cta-heading { margin-bottom: 10px; }
    .hero-cta-heading span { display: inline; }
    /* 箱: 縦幅を小さく・文字前の隙間を減らし・少し下へ */
    .hero-cta-frame { margin-top: 12px; }
    .hero-cta-col { padding: 5px 8px; }
    .hero-cta-col p { line-height: 1.7; }
}

/* ---- スライドイン初期状態（JSが .anim-ready を付けた時だけ隠す＝JS無効時は表示） ---- */
.hero-cta.anim-ready [data-anim] {
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
    will-change: transform, opacity;
}
.hero-cta.anim-ready [data-anim="left1"],
.hero-cta.anim-ready [data-anim="left2"] { transform: translateX(-44px); }
.hero-cta.anim-ready [data-anim="col1"],
.hero-cta.anim-ready [data-anim="col2"],
.hero-cta.anim-ready [data-anim="col3"] { transform: translateX(52px); }
.hero-cta.anim-ready [data-anim="pop"] { transform: translateY(-12px) scale(0.94); }

/* ---- 視界に入ったら発火（横からスライドイン） ---- */
.hero-cta.in-view [data-anim] {
    opacity: 1;
    transform: none;
}
.hero-cta.in-view [data-anim="pop"] { transition-delay: 0s; }
.hero-cta.in-view [data-anim="left1"] { transition-delay: 0.15s; }
.hero-cta.in-view [data-anim="left2"] { transition-delay: 0.3s; }
.hero-cta.in-view [data-anim="col1"] { transition-delay: 0.55s; }
.hero-cta.in-view [data-anim="col2"] { transition-delay: 0.7s; }
.hero-cta.in-view [data-anim="col3"] { transition-delay: 0.85s; }

@media (max-width: 600px) {
    #line.hero-cta { padding: 16px 3% 20px; }
    .hero-cta-line-btn { margin-top: -36px; font-size: 0.8rem; padding: 9px 18px; }
    .hero-cta-heading { margin-bottom: 14px; }
    .hero-cta-col { line-height: 1.9; }
}

/* アニメーションを控えたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
    .hero-cta [data-anim] {
        transition: none;
        opacity: 1;
        transform: none;
    }
}