/* ============================================================
 *  components.css｜2ページ以上で使われている共通部品
 *
 *  収録の基準は「原本12ページのうち2ページ以上で使われていたセレクタ」。
 *  1ページでしか使われていないものは assets/css/pages/*.css に置く。
 *  この線引きにより、共通CSSに手を入れたときの影響範囲が明確になる。
 * ============================================================ */

/* ------------------------------------------------------------
 *  数字バッジ（アイコンを使わず数字を丸で囲む表現）
 *  使用ページ：トップ / about / services / plans / area / flow / faq / company /
 *              privacy-policy / legal / contact の11ページ
 *
 *  ※トップページだけ font-size: 0.95rem ＋ box-shadow ありという差分がある。
 *    その差分は pages/top.css で上書きしている（ここでは多数派の値を持つ）。
 * ------------------------------------------------------------ */
.badge-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: var(--brand-primary);
    color: #ffffff;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 1rem;
}

/* ------------------------------------------------------------
 *  アコーディオン（クリックで開閉する折りたたみ）
 *  使用ページ：services / plans / area / flow / faq / privacy-policy / terms / contact
 *
 *  ■ 重要：開いたときの max-height をここに書かないこと
 *    max-height はアニメーションのために必要だが、値はページの中身の高さに依存する。
 *    原本では 1200px 〜 2500px までページごとに違う値が指定されていた。
 *    共通化して小さい値に寄せると「中身が途中で切れる」、
 *    大きい値に寄せると「開閉が一瞬で終わって不自然になる」という事故になる。
 *    そのため開いた状態の値は必ず pages/*.css 側に置く。
 * ------------------------------------------------------------ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

/* ------------------------------------------------------------
 *  スマホ用 追従CTAバー（画面下部に固定）
 *  マークアップは inc/mobile-cta.php
 *
 *  ■ ボタンを大きく取っている理由
 *    利用者の中心が60代以降の女性で、タップの狙いが外れやすい。
 *    推奨される最小サイズ（44px）を上回る高さを確保している。
 *
 *  ■ safe-area-inset-bottom
 *    iPhone のホームバーとボタンが重なると押せなくなるため、
 *    端末が返す安全領域のぶんだけ余白を足している。
 * ------------------------------------------------------------ */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* ヘッダー（z-40）より手前、ただしページ内の他要素を邪魔しない高さ */
    z-index: 45;
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background-color: rgba(251, 249, 245, 0.97);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--brand-border);
    box-shadow: 0 -4px 16px rgba(12, 60, 55, 0.10);
}

.mobile-cta-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 56px;
    padding: 0.5rem;
    border-radius: 9999px;
    text-decoration: none;
    line-height: 1.3;
    transition: opacity 0.2s ease;
}

.mobile-cta-button:active {
    opacity: 0.75;
}

.mobile-cta-label {
    font-size: 15px;
    font-weight: 700;
}

.mobile-cta-sub {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.85;
}

/* 電話：枠線のみ。フォームと並べたときに主張が強すぎないようにする。 */
.mobile-cta-tel {
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    background-color: #ffffff;
}

/* フォーム：塗り。サイト全体のCTAと同じ色でそろえる。 */
.mobile-cta-form {
    background-color: var(--brand-accent);
    color: #ffffff;
}

/*
 * バーが本文の最後を隠さないように、下に余白を作る。
 * xl 以上ではバー自体を出さないので、余白も不要。
 */
@media (max-width: 1279px) {
    body {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* ------------------------------------------------------------
 *  下層ページMVの人物写真（透過PNG）
 *  使用ページ：services / plans / area / flow / faq / company /
 *              contact / legal / privacy-policy / terms の10ページ
 *
 *  ページ読み込み時にふわっと浮かび上がる控えめな演出。
 *  MVは常にファーストビューにあるため、スクロール連動（IntersectionObserver等）
 *  ではなく読み込み時アニメーションのみで完結させている。
 * ------------------------------------------------------------ */
.page-hero-photo {
    animation: page-hero-photo-in 0.7s ease-out both;
}

@keyframes page-hero-photo-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero-photo {
        animation: none;
    }
}

/* ------------------------------------------------------------
 *  下層ページMV写真の背景パネル（スマホ・タブレットのみ）
 *  使用ページ：services / plans / area / flow / faq / company /
 *              contact / legal / privacy-policy / terms
 *
 *  写真がクリーム背景に単独で浮いて見える問題を解消するため、
 *  写真の足元あたりに柔らかい円形パネルを背後に敷いて
 *  「設置されている」印象を作る。
 *  lg（1024px）以上では @media 自体が効かないため非表示になり、
 *  デスクトップの見た目には一切影響しない。
 * ------------------------------------------------------------ */
.page-hero-photo-wrap {
    position: relative;
}

@media (max-width: 1023.98px) {
    .page-hero-photo-wrap::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        border-radius: 9999px;
        background: linear-gradient(160deg, var(--brand-mint) 0%, var(--brand-beige) 100%);
        z-index: 0;
    }

    .page-hero-photo-wrap .page-hero-photo {
        position: relative;
        z-index: 1;
    }
}