@charset "utf-8";
/* =========================================================
   お急ぎの方へ（/oisogi/）新デザイン
   対応テンプレート: page-oisogi-new.php（自己完結・新クローム）
   -----------------------------------------------------------
   ・ワイヤーフレーム wireframe_call_lp.html の構成に準拠
   ・配色/角丸/フォントはトップ（toppage-new3.css）と共通トークン
   ・common.css は読み込まないため、基本リセットもこのファイルに持つ
   ・クラス接頭辞は oi-（旧 oisogi.css と衝突させないため）
     ※プランカード（.plans-section）だけは旧テンプレの記述をそのまま移設
   ========================================================= */

:root {
    --primary: #E06080;
    --primary-dark: #C0405F;
    --primary-pale: #FDE8EF;
    --teal: #4CBBCA;
    --green: #5CB85C;
    --orange: #F0A500;
    --purple: #9B59B6;
    --cta-red: #C62828;
    --cta-red-dark: #A01C1C;
    --bg: #FFF7F9;
    --white: #FFFFFF;
    --text: #2E2E2E;
    --mid: #555555;
    --border: #E8E8E8;
    --marker: #FFE082;
}

/* ── 基本リセット（common.css 非読込のため自前で持つ） ───────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 20px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
li { list-style: none; }

.oi-main .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.oi-main .container--narrow { max-width: 760px; }

/* SP専用改行（common.css 非読込のため自前で持つ。共通パーツ footer-cta.php も
   br.sp-only を使うため、.oi-main にスコープせず他ページと同じ760px基準で定義する） */
br.sp-only { display: none; }
@media (max-width: 760px) { br.sp-only { display: inline; } }

/* PC / SP で出し分ける語句（同じ1文の中で文言を切り替えるために使う） */
.oi-sp-only { display: none; }
@media (max-width: 780px) {
    .oi-pc-only { display: none; }
    .oi-sp-only { display: inline; margin-right: .4em; }
}

/* 幅の狭いスマホ（375px想定）だけで入れる改行。
   MVは右にスタッフ写真が入って文字幅が狭いので改行するが、
   中間・最終CTAは全幅で1行に収まるため改行しない（.oi-cta--hero に限定）。 */
br.oi-br-narrow { display: none; }
@media (max-width: 480px) { .oi-cta--hero br.oi-br-narrow { display: inline; } }

/* ── セクション共通 ─────────────────────────────────────── */
.oi-sec { padding: 56px 0; }
.oi-sec--alt { background: var(--white); }
.oi-sec--pale { background: linear-gradient(180deg, #fff 0%, var(--primary-pale) 100%); }

.oi-sec-head { text-align: center; margin-bottom: 28px; }
.oi-sec-head h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .02em;
}
.oi-sec-head h2 em { font-style: normal; color: var(--primary); }
.oi-sec-head p { font-size: 17px; color: var(--mid); margin-top: 8px; }

.oi-marker { background: linear-gradient(transparent 58%, var(--marker) 58%); font-weight: 700; }
.oi-em { color: var(--primary); font-weight: 700; }
.oi-note { font-size: 13px; color: var(--mid); line-height: 1.8; }

@media (max-width: 640px) {
    .oi-sec { padding: 40px 0; }
    .oi-sec-head h2 { font-size: 24px; }
    /* 1行目が長い見出しは、SPで折り返さないようもう一段小さくする */
    .oi-sec-head h2.oi-h2-narrow { font-size: 20px; }
}
@media (max-width: 374px) {
    .oi-sec-head h2.oi-h2-narrow { font-size: 18px; }
}

/* =========================================================
   01 ファーストビュー
   ========================================================= */
/* 背景はトップページのMVに合わせた淡いピンク基調。
   赤（--cta-red）は電話ボタンだけに使い、面で赤を使わない。 */
/* 2026-08-13 ④ MV背景を作り直した。
   旧：左に「お迎え（搬送）」写真（.oi-hero::before）＋右に祭壇写真（::after）を
       敷き分けていたが、どちらも薄く、写真として認識されなかった。
   新：写真は右の祭壇（::after）1枚だけにし、そこから左へ向かって
       淡ピンクの無地へ溶かす。左半分は無地なので見出し・電話番号が読みやすい。
       SPは ::after も出さず、無地ピンクだけにする（下の max-width:780px）。
   ※ .oi-hero::before は廃止。テンプレート側が渡す --oi-hero-bg
     （$oi_mv_bg_url＝お迎え写真）は現在どこからも参照していない。
     戻すときは oisogi-new.css.bak_20260813_151303 から ::before を復元する。 */
.oi-hero {
    /* 左半分を無地に見せるため、横方向のグラデーションはやめて縦方向だけにする */
    background: linear-gradient(180deg, #FCDCE6 0%, var(--primary-pale) 55%, var(--bg) 100%);
    color: var(--text);
    padding: 28px 0 32px;
    position: relative;
    overflow: hidden;
}
/* MV右の祭壇（式場）。写真の上に淡ピンクのベールを重ねたうえで、
   さらにマスクで左端を透明にして地の無地ピンクへつなぐ。
   スタッフ写真は .container の中＝この層より前面に出るので、祭壇を背にした絵になる。 */
.oi-hero::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 62%;
    /* 90deg＝左端がいちばん濃いピンク。右へ行くほど祭壇が見えてくる */
    background-image:
        linear-gradient(90deg, var(--primary-pale) 0%, rgba(253, 232, 239, .88) 26%, rgba(253, 232, 239, .52) 60%, rgba(255, 247, 249, .26) 100%),
        var(--oi-hero-bg2);
    background-size: cover, cover;
    /* 祭壇の見せたい位置。この層はSPでは display:none なので実質PC専用の指定 */
    background-position: center, 36%;
    background-repeat: no-repeat, no-repeat;
    /* 270deg＝右端が不透明。左へ向かって消え、地の無地ピンクに変わる。
       テキスト列（左620px）に掛かるあたりでほぼ透明になるよう 34%→62%→0 で落とす。 */
    -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(270deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.oi-hero > .container { position: relative; z-index: 1; }
.oi-hero-area {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    padding: 3px 16px;
    margin-bottom: 12px;
}
.oi-hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .02em;
}
.oi-hero-title .oi-hero-title-sub {
    display: block;
    font-size: 32px;
    color: var(--primary-dark);
}
.oi-hero-inner { text-align: center; }


/* PCは左＝スペック＋電話CTA／右＝代表写真の2カラム。
   SPはDOM順（スペック→CTA→写真）のまま縦積みになり、電話ボタンが
   ファーストビュー内に上がる。 */
.oi-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: center;
    gap: 24px;
    margin-top: 18px;
}
.oi-hero-col { min-width: 0; }

/* 対応スピードのスペック帯（お迎え／受付／ご安置室） */
.oi-specs {
    display: flex;
    background: #fff;
    border: 1px solid #F5C8D6;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(192, 64, 95, .10);
    overflow: hidden;
}
.oi-specs li { flex: 1; text-align: center; padding: 8px 4px; line-height: 1.35; }
.oi-specs li + li { border-left: 1px dashed #F0BFCE; }
.oi-specs-label { display: block; font-size: 13px; color: var(--mid); }
.oi-specs-value { font-size: 17px; font-weight: 800; color: var(--primary-dark); white-space: nowrap; }
.oi-specs-value .oi-num { font-family: 'Oswald', 'Noto Sans JP', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 0; }

.oi-hero-photo { text-align: center; }
.oi-hero-photo img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--primary-pale), 0 4px 12px rgba(192, 64, 95, .18);
}
.oi-hero-photo figcaption { font-size: 14px; line-height: 1.6; margin-top: 10px; color: var(--mid); }
.oi-hero-photo-name { display: block; }
.oi-hero-photo-name b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }

.oi-hero-lead-strong {
    background: linear-gradient(transparent 58%, var(--marker) 58%);
    color: var(--text);
}

/* 「相談無料」カード（電話をためらう理由を先に消す） */
.oi-assure {
    background: #fff;
    border: 1px solid #F5C8D6;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(192, 64, 95, .10);
    padding: 18px;
    margin-top: 20px;
    text-align: left;
}
/* 丸バッジ＋2行のリードを横並びにする */
.oi-assure-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.oi-assure-badge {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--marker);
    color: #5A3A00;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.oi-assure-lead { flex: 1 1 auto; font-size: 19px; font-weight: 700; line-height: 1.7; }
.oi-assure-list { margin-top: 12px; border-top: 1px dashed #F0BFCE; padding-top: 12px; }
.oi-assure-list li {
    font-size: 16px;
    line-height: 1.7;
    padding-left: 1.6em;
    position: relative;
}
.oi-assure-list li + li { margin-top: 6px; }
.oi-assure-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .45em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}

/* PCは参考デザインに合わせ、左＝テキスト（左寄せ）／右＝スタッフ写真を大きく。 */
@media (min-width: 781px) {
    .oi-hero { padding: 36px 0 40px; }
    /* テキスト列（620px＝電話ブロック／相談無料カードと同じ幅）＋小さめの写真列。
       トラック幅を固定して justify-content:center にすることで、2列のかたまりごと
       MVの中央に置く。写真は align-items:center で電話ブロックの高さに寄せる。 */
    .oi-hero-main {
        /* 写真列は max-height:400px の写真（2:3＝幅264px）が入る幅にする。
           220pxのままだと max-width:100% が先に効いて高さ333pxで頭打ちになる。 */
        grid-template-columns: 620px 264px;
        justify-content: center;
        align-items: center;
        column-gap: 24px;
        row-gap: 0;
        margin-top: 0;
    }
    /* 相談無料カードは2行目。左右2列にまたがらせて margin auto で中央に置く
       （grid-column:1 のままだとテキスト列に左揃えされるため） */
    .oi-hero-main > .oi-assure {
        grid-column: 1 / -1;
        grid-row: 2;
        /* margin:auto だとグリッドアイテムが伸縮しなくなり内容幅まで縮むので、
           justify-self で中央に寄せ、幅は max-width(620px) で決める */
        justify-self: center;
        width: 100%;
    }
    .oi-hero-col { text-align: left; }
    .oi-hero-title { font-size: 42px; }
    .oi-hero-title .oi-hero-title-sub { font-size: 34px; }
    .oi-cta--hero { text-align: left; }
    .oi-cta--hero .oi-tel { margin-left: 0; }
    /* 電話ブロックのPC調整は、CTAセクションの定義より後ろの
       @media (min-width: 781px) にまとめてある。同一詳細度なので
       ここに書くと後ろの定義に上書きされてしまうため。 */
    .oi-hero-photo figcaption { margin-top: 0; }
}

/* スタッフ写真は背景透過PNG（IMG_8488.png）。円形トリミングも乗算も掛けず、
   切り抜きの輪郭をそのまま活かす。 */
.oi-hero--cutout .oi-hero-photo img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    mix-blend-mode: normal;
    object-fit: contain;
    -webkit-mask-image: none;
            mask-image: none;
}
/* 縦長（全身寄り）の切り抜きでも列幅220pxに収まるよう、高さ基準で拡大する。
   例：2:3の写真なら高さ300px＝幅約200pxで、列に収まりつつ人物が大きく出る。 */
@media (min-width: 781px) {
    .oi-hero--cutout .oi-hero-photo img { max-height: 400px; }
}
@media (max-width: 780px) {
    .oi-hero--cutout .oi-hero-photo img { width: auto; height: 84px; }
}

/* SPは電話ボタンの下に「待機中のスタッフ」を1行だけ添える。
   写真を大きく置くとボタンが画面外へ押し出されるため、横並びの小サイズにする。 */
@media (max-width: 780px) {
    /* 縦積み。受付状況の行が相談無料カードの直前に来るよう、
       スタッフ写真は最後に回す（DOM順では相談無料カードより前にあるため）。 */
    /* align-items は基本定義の center を打ち消す（各ブロックを横いっぱいに） */
    .oi-hero-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

    /* 「最短30分程度」「24時間365日」の右にスタッフ写真を並べる。
       下部の写真（.oi-hero-photo）は同じ人物が2つ並ぶことになるので消す。 */
    /* テキストは内容幅まで縮め、写真とセットで中央に寄せる
       （flex:1 で伸ばすと文字の右側に大きな余白が残るため） */
    .oi-cta--hero .oi-tel-mid { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .oi-cta--hero .oi-tel-texts { flex: 0 1 auto; min-width: 0; }
    .oi-cta--hero .oi-tel-foot,
    .oi-cta--hero .oi-tel-sub { text-align: left; }
    /* テキストが内容幅まで縮んだことで線が中途半端な長さになるため、SPでは線を出さない */
    .oi-cta--hero .oi-tel-sub { border-bottom: none; padding-bottom: 0; }
    /* 写真の右に肩書きを縦書きで添える（PCと同じ文言） */
    .oi-cta--hero .oi-tel-photo-sp {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
    }
    .oi-cta--hero .oi-tel-photo-sp img { width: 84px; height: auto; flex: none; }
    .oi-cta--hero .oi-tel-photo-sp-name {
        writing-mode: vertical-rl;
        font-size: 10px;
        line-height: 1.5;
        color: var(--mid);
    }
    .oi-cta--hero .oi-tel-photo-sp-name b { display: block; font-size: 13px; color: var(--text); }
    .oi-hero-main > .oi-hero-photo { display: none; }
    .oi-hero-main > .oi-hero-col { order: 1; }
    .oi-hero-main > .oi-tel-lead--sp { order: 2; }
    .oi-hero-main > .oi-assure { order: 3; }
    .oi-hero-main > .oi-hero-photo { order: 4; }
    .oi-hero-photo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
    }
    .oi-hero-photo img { width: 72px; height: 72px; border-width: 3px; flex: none; }
    .oi-hero-photo figcaption { margin-top: 0; text-align: left; }
}
/* SPは1カラムで左右に敷き分けられないため、写真は出さず無地ピンクだけにする（④）。
   祭壇を全幅に敷くと文字に重なり、薄くすると何の写真か分からなくなるため。 */
@media (max-width: 780px) {
    .oi-hero::after { display: none; }
}
@media (max-width: 480px) {
    /* 3項目が1行に収まるよう、SPだけ数字とラベルを小さくする */
    .oi-specs li { flex: 1 1 auto; padding: 7px 2px; }
    .oi-specs-label { font-size: 12px; }
    .oi-specs-value { font-size: 14px; }
    .oi-specs-value .oi-num { font-size: 23px; }
}
@media (max-width: 640px) {
    .oi-hero-title { font-size: 28px; }
    .oi-hero-title .oi-hero-title-sub { font-size: 24px; }
    .oi-assure { padding: 14px; }
    /* SPも丸バッジと2行を横並びにする（文言短縮で2行に収まるようになったため） */
    .oi-assure-head { gap: 10px; }
    .oi-assure-badge { width: 64px; height: 64px; font-size: 14px; }
    /* SPはチェック2項目を出さない（同じ内容は下の「搬送のみ承ります」で説明している） */
    .oi-assure-list { display: none; }
    .oi-assure-lead { font-size: 16px; line-height: 1.65; }
    .oi-assure-list li { font-size: 15px; }
}

/* =========================================================
   CTAブロック（FV／中間／最終で共通）
   ========================================================= */
.oi-cta { text-align: center; }
.oi-cta--hero { margin-top: 22px; }
.oi-cta--band { background: var(--primary-pale); padding: 44px 0; }
.oi-cta--band .oi-cta-head {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 12px;
}
.oi-cta--band .oi-cta-head em { font-style: normal; color: var(--primary-dark); }

.oi-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
    box-shadow: 0 0 0 0 rgba(92, 184, 92, .7);
    animation: oi-pulse 1.8s infinite;
}
@keyframes oi-pulse {
    0% { box-shadow: 0 0 0 0 rgba(92, 184, 92, .7); }
    70% { box-shadow: 0 0 0 9px rgba(92, 184, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(92, 184, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .oi-live-dot { animation: none; }
}

/* ── 電話ブロック（白カード／参考デザイン準拠） ─────────────────
   3段構成：受付状況 → アイコン＋番号＋バッジ → お迎え時間。
   全体が tel: リンク。赤は電話まわりだけに使う（--cta-red）。 */
.oi-tel {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #F0BFCE;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(192, 64, 95, .12);
    padding: 14px 18px 12px;
    text-align: left;
    transition: box-shadow .2s, transform .15s;
}
.oi-tel:hover { box-shadow: 0 6px 16px rgba(192, 64, 95, .18); transform: translateY(-2px); }

.oi-tel-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
}
.oi-tel-lead .oi-live-time { color: var(--cta-red); }

.oi-tel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.oi-tel-ico {
    flex: none;
    width: 46px;
    color: var(--cta-red);
    display: flex;
    align-items: center;
}
.oi-tel-ico svg { width: 100%; height: auto; }
.oi-tel-num {
    flex: 1 1 auto;
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--cta-red);
    white-space: nowrap;
}
.oi-tel-badges { display: flex; gap: 6px; flex: none; }
.oi-tel-badge {
    background: var(--cta-red);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}

.oi-tel-foot {
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
}
.oi-tel-foot strong { color: var(--cta-red); font-size: 1.12em; }
.oi-tel-foot sup { font-size: .6em; vertical-align: super; }

/* お迎え時間の下に続く1行（24時間365日 専門スタッフが対応します）。
   2行のまとまりの下端をピンクのラインで締める。 */
.oi-tel-sub {
    display: block;
    margin-top: 4px;
    padding-bottom: 10px;
    /* 電話番号の下の線（.oi-tel-row の border-bottom）と同じ指定にする */
    border-bottom: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
}
.oi-tel-sub strong { color: var(--cta-red); font-weight: 800; }
/* 「最短30分」の数字と「24時間365日」の数字は同じ体裁にそろえる */
.oi-tel-foot strong .oi-num,
.oi-tel-sub strong .oi-num {
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0;
}

/* SPはタップ発信なので、押せることを明示する（PCでは非表示） */
.oi-tel-tap { display: none; }

/* SPで2行の右に置くスタッフ写真（PCは右カラムの .oi-hero-photo を使うので非表示） */
.oi-tel-photo-sp { display: none; }

/* 相談無料カード内に置くSP用の受付状況（PCは電話番号の上に出すので非表示） */
.oi-tel-lead--sp { display: none; }

.oi-tel-note { font-size: 13px; color: var(--mid); line-height: 1.7; margin-top: 8px; }
.oi-cta-sub { font-size: 15px; margin-top: 10px; color: var(--mid); }

@media (max-width: 640px) {
    .oi-tel { padding: 12px 14px; }
    .oi-tel-lead { font-size: 15px; }
    .oi-tel-row { gap: 8px; }
    .oi-tel-ico { width: 32px; }
    .oi-tel-num { font-size: 34px; }
    .oi-tel-badge { font-size: 12px; padding: 4px 7px; }
    .oi-tel-foot { font-size: 15px; }
    .oi-tel-sub { font-size: 15px; }
    .oi-tel-foot strong .oi-num,
    .oi-tel-sub strong .oi-num { font-size: 21px; }
    .oi-cta--band .oi-cta-head { font-size: 24px; }
    .oi-cta--band { padding: 20px 0; }
}

/* 発信ボタン（SPのみ表示）。SPレイアウトの境目（780px）に合わせる。 */
@media (max-width: 780px) {
    .oi-tel-tap {
        display: block;
        margin-top: 10px;
        background: var(--cta-red);
        color: #fff;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        padding: 11px 12px;
        box-shadow: 0 4px 12px rgba(160, 28, 28, .28);
    }
    /* 受付状況は相談無料カードの中・いちばん上。発信ボタンはカードの下部。 */
    .oi-assure .oi-tel-lead--sp {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 10px;
    }
    /* 前後に ＼ ／ を添える（ワイヤーフレームの「＼ ◯◯現在すぐにつながります ／」） */
    .oi-assure .oi-tel-lead--sp::before,
    .oi-assure .oi-tel-lead--sp::after {
        color: var(--primary-dark);
        font-weight: 700;
    }
    .oi-assure .oi-tel-lead--sp::before { content: "＼"; margin-right: 2px; }
    .oi-assure .oi-tel-lead--sp::after { content: "／"; margin-left: 4px; }
    .oi-hero-main > .oi-assure { margin-top: 10px; }

    /* 中間・最終CTAは「2行 → 発信ボタン → 受付状況」の順にする */
    .oi-cta--band .oi-tel { display: flex; flex-direction: column; }
    .oi-cta--band .oi-tel-mid { order: 1; }
    .oi-cta--band .oi-tel-tap { order: 2; }
    .oi-cta--band .oi-tel-lead { order: 3; margin: 10px auto 0; }
    .oi-assure .oi-tel-tap { margin-top: 12px; }
}
/* FVの受付状況は <a> の外にあるので、順番を order で入れ替えられるよう flex にする。
   PCは「受付状況 → 電話カード → ※注記」のDOM順どおり。 */
.oi-cta--hero { display: flex; flex-direction: column; }

/* SPのMVは「タップして電話をかける」ボタンが発信の導線になるため、
   アイコン・番号・バッジの行はまるごと出さない。
   受付状況の行は相談無料カードの直前（＝一番下）へ回す。
   中間・最終CTAは従来どおり（番号もバッジも表示）。 */
@media (max-width: 780px) {
    /* SPの電話カードは背景写真がうっすら透ける半透明の白。枠線・影・ホバーは持たせない */
    .oi-tel {
        background: #ffffffb3;
        border: none;
        box-shadow: none;
        transition: none;
    }
    .oi-tel:hover { transform: none; box-shadow: none; }

    /* 上の余白は不要（写真と横並びになり、行頭が下がって見えるため） */
    .oi-tel-foot { margin-top: 0; }
    /* 行間を詰めて2行のかたまりをコンパクトにする */
    .oi-tel-foot,
    .oi-tel-sub { line-height: 1.3; }

    /* ※注記（29文字）を1行に収める。375px幅で本文335pxなので11pxが上限。
       上の余白は不要（電話カードの直下に置く） */
    .oi-tel-note { font-size: 11px; margin-top: 0; }

    /* アイコン・番号・バッジの行は、MV・中間・最終のいずれでも出さない
       （発信は「タップして電話をかける」ボタンが担うため） */
    .oi-tel-row { display: none; }
    /* PC用の受付状況は隠す（SPは相談無料カード内の複製を出す） */
    .oi-cta--hero > .oi-tel-lead { display: none; }
}

/* 幅の狭いスマホでは「アイコン＋番号」と「バッジ」が1行に収まらないため、
   バッジを次の行へ回して番号の大きさを保つ。 */
@media (max-width: 480px) {
    .oi-tel-row { flex-wrap: wrap; justify-content: center; }
    .oi-tel-num { flex: 0 1 auto; text-align: center; }
    .oi-tel-badges { width: 100%; justify-content: center; margin-top: 8px; }
}

/* ── 電話ブロックのPC調整 ───────────────────────────────
   上の基本定義と同一詳細度なので、必ずこの位置（＝基本定義より後ろ）に置く。 */
@media (min-width: 781px) {
    /* ④ここにあった .oi-hero::before（MV左のお迎え写真＋白ベール）は廃止。
       左半分は .oi-hero の無地ピンクをそのまま見せる。 */

    /* 電話ブロックはカードにせず、面の上に直置きする。
       （中間・最終CTAはピンク帯の上に単独で置くため、白カードのまま残す） */
    .oi-cta--hero .oi-tel {
        max-width: 620px;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
    .oi-cta--hero .oi-tel:hover { transform: none; box-shadow: none; }
    /* 番号の下と「24時間365日〜」の下は同じ線にする */
    .oi-cta--hero .oi-tel-row,
    .oi-cta--hero .oi-tel-sub { border-bottom: 2px solid rgba(198, 40, 40, .22); }
    .oi-cta--hero .oi-tel-note { text-align: right; }

    /* 相談無料だけを白カードとして残し、面の主役にする */
    .oi-assure {
        max-width: 620px;
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
    }

    /* 受付状況の行を淡い赤のピルにして目に留まるようにする。
       塗りの赤は電話まわりに取ってあるため、地は淡赤・文字を赤で使う。 */
    .oi-tel-lead {
        width: fit-content;
        background: #FFF1F2;
        border: 1px solid #F3C4C8;
        border-radius: 50px;
        padding: 4px 16px 4px 14px;
        margin-bottom: 8px;
        font-size: 17px;
    }
    .oi-tel-lead .oi-live-time { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
    .oi-tel-lead .oi-live-dot { width: 10px; height: 10px; }

    /* 番号を伸縮させないことで、番号とバッジの間に空く余白をなくす */
    .oi-tel-row { gap: 10px; }
    .oi-tel-num { flex: 0 0 auto; }
}

/* =========================================================
   02 安心材料（3つの安心）
   ========================================================= */
.oi-trust-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.oi-trust-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
/* 「大きな数字＋何の数字か」。数字はOswald、単位は少し小さく添える */
.oi-trust-key {
    color: var(--primary);
    font-weight: 800;
    line-height: 1.1;
}
.oi-trust-key .oi-num {
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 52px;
    font-weight: 600;
    letter-spacing: 0;
}
.oi-trust-unit { font-size: 22px; margin-left: 2px; }
.oi-trust-what { font-size: 17px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.oi-trust-item .oi-note { margin-top: 8px; }

/* SPは1カラム・左揃え。数字と項目名は横並びにして、説明文をその下に置く */
@media (max-width: 720px) {
    .oi-trust-list { grid-template-columns: 1fr; gap: 10px; }
    .oi-trust-item { text-align: left; padding: 14px 16px; }
    .oi-trust-body { display: flex; align-items: baseline; gap: 10px; }
    .oi-trust-key { flex: none; }
    .oi-trust-what { flex: 1 1 auto; min-width: 0; margin-top: 0; }
    .oi-trust-key .oi-num { font-size: 42px; }
    .oi-trust-unit { font-size: 19px; }
    .oi-trust-what { font-size: 16px; }
    /* 説明文を1行に収める。最長は25文字なので、375px幅（本文303px）だと12pxが上限 */
    .oi-trust-item .oi-note { font-size: 12px; }
}
/* 360px級の端末は本文幅288pxしかないため、もう一段だけ下げて1行を保つ */
@media (max-width: 374px) {
    .oi-trust-item .oi-note { font-size: 11px; }
}

/* =========================================================
   03〜05 ひとまとまりのパネル
   （搬送のみ承ります → ご依頼の流れ → CTA を1枚のカードに収める）
   ========================================================= */
.oi-group { background: var(--bg); }
.oi-group-box {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .08);
    overflow: hidden;
}
/* パネル上部の色帯。ここに03の見出しを載せる */
.oi-group-head {
    background: var(--primary);
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 18px 20px;
    margin: 0;
}
.oi-group-head em { font-style: normal; color: var(--marker); }
.oi-group-body { padding: 26px 24px 28px; }

/* パネル内では、白カードの枠・影を外して面の重なりを避ける */
.oi-group .oi-relief-card { border: none; box-shadow: none; border-radius: 6px; }
.oi-group .oi-relief-card-body { padding: 18px 0 0; }
/* PCは写真と横並びなので、左に間隔を取る（上下のpaddingは不要） */
@media (min-width: 781px) {
    .oi-group .oi-relief-card-body { padding: 0 0 0 24px; }
}
/* セクション見出しはパネル内の小見出しとして少し控えめに */
.oi-group-sub { margin-top: 32px; }
.oi-group-sub h2 { font-size: 24px; }
/* CTAは帯の背景を外し、パネルの一部として見せる */
.oi-group-cta { margin-top: 28px; }
.oi-group-cta .oi-cta--band { background: transparent; padding: 0; }

/* SPは帯の下端を中央へ向かって尖らせ、本文へ視線を落とす形にする */
@media (max-width: 780px) {
    .oi-group-head {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
    }
    /* 「わが家」の搬送サポートについて を1行に収める（16文字＋矢印） */
    .oi-group .oi-acc > summary { font-size: 15px; }
}

@media (max-width: 640px) {
    .oi-group-head { font-size: 20px; padding: 14px 16px 30px; }
    .oi-group-body { padding: 14px 14px 20px; }
    .oi-group-sub { margin-top: 24px; }
    .oi-group-sub h2 { font-size: 20px; }
    .oi-group-cta { margin-top: 20px; }
}

/* =========================================================
   03 不安の解消＋搬送サポート
   ========================================================= */
.oi-relief-lead {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 18px;
}
.oi-relief-lead em { font-style: normal; color: var(--primary); }

.oi-relief-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
}
.oi-relief-card-body { padding: 24px 24px 20px; }
.oi-relief-card-body p { font-size: 18px; line-height: 1.9; }
.oi-relief-card-body p + p { margin-top: 12px; }
.oi-relief-photo img { width: 100%; height: 220px; object-fit: cover; }

/* PCは写真と本文を横並びにする（アコーディオンはこのカードの下） */
@media (min-width: 781px) {
    .oi-relief-card { display: flex; align-items: stretch; }
    .oi-relief-photo { flex: 0 0 44%; }
    .oi-relief-photo img { height: 100%; min-height: 250px; }
    .oi-relief-card-body {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 26px;
    }
}

/* アコーディオン（白カードの外・その下に置く） */
.oi-acc {
    max-width: 760px;
    margin: 16px auto 0;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 6px;
    overflow: hidden;
}
.oi-acc > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 19px;
    font-weight: 700;
    color: var(--primary-dark);
    text-align: center;
}
.oi-acc > summary::-webkit-details-marker { display: none; }
.oi-acc > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg) translateY(-2px);
    flex: none;
    transition: transform .2s;
}
.oi-acc[open] > summary { border-bottom: 1px solid var(--border); }
.oi-acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.oi-acc-body { padding: 20px 24px 24px; }
.oi-acc-body > p { font-size: 17px; line-height: 1.9; }
.oi-acc-sub { margin-top: 16px; border-top: 1px dashed #d6d6d6; padding-top: 14px; }
.oi-acc-sub b { display: block; font-size: 17px; color: var(--primary-dark); margin-bottom: 4px; }
.oi-acc-sub ul li { font-size: 17px; line-height: 1.8; padding-left: 1.1em; text-indent: -1.1em; }
.oi-acc-sub ul li::before { content: "・"; }
.oi-acc-sub .oi-note { margin-top: 8px; }

@media (max-width: 640px) {
    .oi-relief-lead { font-size: 21px; }
    .oi-relief-card-body { padding: 18px 16px; }
    .oi-relief-card-body p { font-size: 17px; }
    .oi-relief-photo img { height: 170px; }
    .oi-acc > summary { font-size: 17px; }
    .oi-acc-body { padding: 16px; }
}

/* =========================================================
   04 概略図（ご依頼の流れ）
   ========================================================= */
.oi-flowmap { max-width: 560px; margin: 0 auto; }
.oi-flowmap-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
.oi-flowmap-item--start { background: var(--cta-red); color: #fff; border-color: var(--cta-red); }
.oi-flowmap-item--goal { background: var(--primary); color: #fff; border-color: var(--primary); }
.oi-flowmap-arrow {
    width: 0;
    height: 0;
    margin: 8px auto;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--primary);
}
.oi-flowmap-group {
    position: relative;
    border: 2px dashed var(--primary);
    border-radius: 8px;
    background: rgba(253, 232, 239, .5);
    padding: 26px 16px 16px;
    margin: 8px 0;
}
.oi-flowmap-group-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 18px;
    white-space: nowrap;
}
.oi-flowmap-group .oi-flowmap-item + .oi-flowmap-item { margin-top: 0; }
.oi-flowmap-group .oi-flowmap-arrow { border-top-color: var(--primary); }

.oi-point-box {
    max-width: 560px;
    margin: 22px auto 0;
    background: #FFF8E6;
    border: 1px solid #F3DFA8;
    border-radius: 6px;
    padding: 16px 18px;
    position: relative;
}
.oi-point-box b {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: .08em;
    padding: 1px 14px;
    margin-bottom: 6px;
}
.oi-point-box p { font-size: 17px; line-height: 1.8; color: #5A3A00; }

/* SPは「搬送サポート」を破線ボックスの左側に縦書きで置く（ワイヤーフレーム準拠）。
   ラベルを絶対配置の帯にして、その分ボックスの左padding を空ける。 */
@media (max-width: 720px) {
    .oi-flowmap-group { padding: 16px 12px 16px 54px; }
    .oi-flowmap-group-label {
        top: 10px;
        bottom: 10px;
        left: 10px;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        border-radius: 6px;
        padding: 8px 2px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: .12em;
        line-height: 1;
    }
}

@media (max-width: 640px) {
    .oi-flowmap-item { font-size: 17px; }
    .oi-point-box p { font-size: 16px; }
}

/* =========================================================
   06 ご依頼の流れ（詳細4ステップ）
   ========================================================= */
.oi-steps { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.oi-step {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.oi-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-pale);
    padding: 12px 20px;
}
.oi-step-no {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.oi-step-head h3 { font-size: 22px; font-weight: 800; line-height: 1.4; }
.oi-step-body { display: flex; gap: 20px; padding: 20px; }
.oi-step-photo { flex: 0 0 240px; }
.oi-step-photo img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; }
.oi-step-text { flex: 1 1 auto; }
.oi-step-text > p { font-size: 17px; line-height: 1.9; }
.oi-step-info {
    margin-top: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
}
.oi-step-info-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
}
.oi-step-info-label::before { content: "✓ "; }
.oi-step-info ul li { font-size: 16px; line-height: 1.8; padding-left: 1.1em; text-indent: -1.1em; }
.oi-step-info ul li::before { content: "・"; }
.oi-step-info .oi-note { margin-top: 6px; }

@media (max-width: 720px) {
    .oi-step-body { flex-direction: column; gap: 14px; padding: 16px; }
    .oi-step-photo { flex: none; }
    .oi-step-photo img { height: 180px; }
    .oi-step-head h3 { font-size: 20px; }
}

/* 07 プラン一覧のCSSは inc/plan-new.php が自前で持つ（.wgnp-section にスコープ）。
   このファイルからは削除した（2026-08-07）。プランの見た目を変えるときは
   inc/plan-new.php の <style id="wgnp-style"> を編集する。 */

/* =========================================================
   ⑥ MVのスタッフ（川崎）紹介まわり ※SP（780px以下）専用
   -----------------------------------------------------------
   2026-08-13 追加。
   ・半透明の白パネル（.oi-tel の背景）を外し、枠で囲まれた印象をなくす
   ・「最短30分でお迎え」「24時間365日、専門スタッフが対応」の2フレーズに
     白の座布団を敷いて視認性を上げる。④でMV背景が淡ピンクの無地になるため、
     --primary-pale では地に埋もれる。白で抜くのがいちばん強い
   ・氏名・肩書きの縦書き（writing-mode:vertical-rl）を横書きに戻し、
     写真の下へ回す。写真列を104pxに広げることで「小さいわが家のお葬式」（9px）
     も1行で収まる＝文言を削らずに横書きへ移せる

   上の @media (max-width:780px) / (max-width:640px) の各定義を上書きするため、
   必ずそれらより後ろ（＝このファイルの末尾側）に置くこと。
   ========================================================= */
@media (max-width: 780px) {
    /* 枠（半透明の白パネル）を外す。座布団側で地と分けるので背景は不要 */
    .oi-cta--hero .oi-tel { background: transparent; padding: 0; }

    /* 2フレーズの座布団
       上下パディングは、右の写真（max-width:170px）と高さを釣り合わせるため
       20pxにしている。写真サイズを変えるときはここも合わせて調整する。 */
    .oi-cta--hero .oi-tel-foot,
    .oi-cta--hero .oi-tel-sub {
        background: var(--white);
        border-radius: 6px;
        padding: 20px 12px;
        margin: 0;
        font-size: 18px;
        line-height: 1.45;
        text-align: left;
        box-shadow: 0 1px 4px rgba(192, 64, 95, .12);
    }

    /* テキスト列と写真列の横並びは維持する */
    .oi-cta--hero .oi-tel-mid { gap: 8px; align-items: flex-start; }
    .oi-cta--hero .oi-tel-texts {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* 写真の下に氏名を横書きで置く */
    .oi-cta--hero .oi-tel-photo-sp {
        flex: 0 0 104px;
        width: 104px;
        flex-direction: column;
        gap: 0;
    }
    .oi-cta--hero .oi-tel-photo-sp img { width: 80px; margin: 0 auto; }
    .oi-cta--hero .oi-tel-photo-sp-name {
        writing-mode: horizontal-tb;
        font-size: 9px;
        line-height: 1.4;
        text-align: center;
        /* 「小さいわが家のお葬式 代表」は104px幅に1行では入らない。既定の折り返しだと
           日本語はどこでも改行できるため「…お葬式 代」／「表」と割れてしまう。
           keep-all にすると改行位置が空白だけに限られ、「小さいわが家のお葬式」／
           「代表」できれいに2行になる。 */
        word-break: keep-all;
    }
    .oi-cta--hero .oi-tel-photo-sp-name b { font-size: 13px; }
}

/* =========================================================
   09「お近くの葬儀場を探す」（市区町村ボタン）
   -----------------------------------------------------------
   マークアップとスタイルは共通パーツ template-parts/area-map.php ＋
   site-chrome.css の .saijyo-* をそのまま使う（トップページと同一）。
   このページは body の基準サイズが 20px なので、共通側で font-size を
   持たない要素だけこちらで調整する。
   ========================================================= */
.oi-main .saijyo-area,
.oi-main .saijyo-head-row { font-size: 16px; line-height: 1.8; }

/* =========================================================
   SP FVの追い込み（2026-08-14）
   -----------------------------------------------------------
   ご要望3点をまとめて反映。ここは上の各 @media 定義を上書きするため、
   必ずファイル末尾側（それらより後ろ）に置くこと。

   (A) 上部の余白を詰め、スクロールなしで
       「タップして電話をかける」が全部見え、かつ次の見出し
       「ご家族の負担を…」が少し覗く画角にする
   (B) 座布団2枚とスタッフ写真を約50%：50%にし、写真を大きく。
       肩書きと名前は横並び（「代表 川崎」）にする
   (C) 発信ボタンに受話器アイコンを付ける
   ========================================================= */
@media (max-width: 780px) {
    /* ── (A) FV上部の余白を詰める ───────────────────
       内訳：FV上下 28/32→0/18、エリアタグ下 12→8、
             .oi-hero-main 上 18→8、電話ブロック上 22→12、
             相談無料カード上 10→8、見出しの行間 1.45→1.32。
       さらにFV直後のセクションだけ上の余白を 40→26 に詰めて、
       次の見出し「ご家族の負担を…」が画面下に少し覗くようにする。
       ※上は0。パンくずの下端からピンクの面が始まる。 */
    .oi-hero { padding: 0 0 18px; }
    .oi-hero-area { margin-bottom: 8px; }
    .oi-hero-main { margin-top: 8px; }
    .oi-cta--hero { margin-top: 12px; }
    .oi-hero-main > .oi-assure { margin-top: 8px; }
    .oi-hero-title { line-height: 1.32; }
    /* FVの直後だけ。以降のセクション間隔は従来どおり */
    .oi-hero + .oi-sec { padding-top: 26px; }

    /* ── (B) 座布団2枚 ： スタッフ写真 ＝ 約50%：50% ──
       テキスト側は幅が狭くなるが、SPは br.oi-br-narrow で
       2行に折り返す文言なので行数は変わらない。 */
    .oi-cta--hero .oi-tel-mid { gap: 10px; }
    .oi-cta--hero .oi-tel-texts { flex: 1 1 50%; min-width: 0; }
    .oi-cta--hero .oi-tel-photo-sp {
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
    }
    /* 写真を大きく（旧80px → 170px）。ここを広げるほどFVが縦に伸びるため、
       「川崎さんの大きさ」と「FVの短さ」のトレードオフの調整点になる。
       座布団の上下パディング（20px）と高さが釣り合う値にしてある。 */
    .oi-cta--hero .oi-tel-photo-sp img { width: 100%; max-width: 170px; }

    /* 肩書きと名前を横並びに。改行位置は社名ブロックで固定するので、
       「小さいわが家のお葬式」／「代表 川崎」の2行で確定する。 */
    .oi-cta--hero .oi-tel-photo-sp-name { font-size: 10px; line-height: 1.35; }
    .oi-cta--hero .oi-tel-photo-sp-corp { display: block; }
    .oi-cta--hero .oi-tel-photo-sp-title { margin-right: 4px; }
    .oi-cta--hero .oi-tel-photo-sp-name b {
        display: inline;
        font-size: 15px;
    }

    /* ── (C) 発信ボタンの受話器アイコン ─────────────
       .oi-tel-tap は上の定義で display:block なので flex に変える。 */
    .oi-tel-tap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .oi-tel-tap-ico { flex: none; width: 19px; height: 19px; }
    .oi-tel-tap-ico svg { width: 100%; height: 100%; display: block; }
}
/* 400px未満の端末（iPhone 12〜15の390pxなど）は、座布団の文字を1段落とす。
   18pxのままだと「最短30分でお迎え」が3行に折り返し、座布団2枚で約75px
   伸びて発信ボタンがファーストビューから外れるため。
   写真も高さのつり合いに合わせて少し小さくする。
   ※ 430px幅（iPhone Pro Max等）では18px・170pxのまま。 */
@media (max-width: 399px) {
    .oi-cta--hero .oi-tel-foot,
    .oi-cta--hero .oi-tel-sub { font-size: 15px; padding: 14px 12px; }
    .oi-cta--hero .oi-tel-photo-sp img { max-width: 140px; }
}

/* 幅の狭い端末（iPhone SE 第1世代＝320pxなど）だけ、50:50をやめて
   テキスト側に幅を戻す。50:50のままだと座布団が3〜4行に折り返し、
   FVが縦に伸びて発信ボタンが画面外へ出てしまうため。 */
@media (max-width: 359px) {
    .oi-cta--hero .oi-tel-texts { flex: 1 1 58%; }
    .oi-cta--hero .oi-tel-photo-sp { flex: 1 1 42%; }
    .oi-cta--hero .oi-tel-photo-sp img { max-width: 92px; }
}

/* PCでは発信ボタン自体を出さないので、アイコンも念のため隠す */
.oi-tel-tap-ico { display: none; }
@media (max-width: 780px) { .oi-tel-tap-ico { display: block; } }

/* =========================================================
   画面下の固定パーツ（2段）の出現タイミング ※このページ限定
   -----------------------------------------------------------
   2段目 .sp-fixed-cta  … 割引バナー＋「電話をかける／無料会員登録」
   1段目 .sp-bottom-nav … トップ／プラン／式場を探す／お急ぎの方／メニュー

   既定では読み込み直後から2段とも出ていて（合計約190px）、FV内の
   「タップして電話をかける」にかぶってしまう。そこで page-oisogi-new.php の
   スクリプトが読み込み時に .oi-cta-wait を付けて隠し、しきい値まで
   スクロールしたら外す。外れると transition で下からふわっと出る。

   ・.sp-fixed-cta の隠す値は site-chrome.css の .is-scroll-hidden と同値。
     クラスを分けているのは、functions.php のスクロール追従スクリプトが
     is-scroll-hidden を上下スクロールで付け外しするため（併用しても
     打ち消し合わない）。
   ・.sp-bottom-nav は site-chrome.css 側に transition が無いので、
     ここで付ける。bottom:0 の要素なので translateY(100%) だけで画面外へ出る
     （padding-bottom の safe-area 分も 100% に含まれる）。
   ・しきい値は page-oisogi-new.php の MIN_SCROLL / WATCH_SELECTOR、
     対象は TARGETS で変更する。
   ・JSが動かない環境ではクラスが付かないので、従来どおり最初から表示される。
   ========================================================= */
@media (max-width: 768px) {
    .sp-fixed-cta.oi-cta-wait {
        transform: translateY(calc(100% + 60px + env(safe-area-inset-bottom)));
        opacity: 0;
        pointer-events: none;
    }
    .sp-bottom-nav {
        transition: transform .3s ease, opacity .3s ease;
        will-change: transform;
    }
    .sp-bottom-nav.oi-cta-wait {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
    /* 「動きを減らす」設定の端末ではアニメーションさせない
       （site-chrome.css の .sp-fixed-cta 側と同じ扱いにそろえる） */
    @media (prefers-reduced-motion: reduce) {
        .sp-bottom-nav { transition: none; }
    }
}