@charset "utf-8";
/* ============================================================================
   ブロックパターン用スタイル  patterns.css
   五月女建設 家の傾き相談室（katamukisoudan.com）

   ■ フロント・エディタ共通で読み込めます
     ・本文専用の一意なクラス（.note-box / .qa-block / .checklist など）
       だけを対象にしているため、.single-content の前置なしで安全に効きます。
     ・フロント : add_css_js() で single-content.css の後に読み込む
     ・エディタ : add_editor_style(array('css/editor-style.css','css/patterns.css'))

   ■ ブランドカラー
     navy #002266 / orange #fda61a・#fa7d00・#d98800 / 淡青 #ebf2ff /
     赤(注意) #bf343f / 文字 #222222
   ========================================================================== */

/* =====================================================================
   注記ボックス（補足 / 注意 / ポイント）
   ラベル（補足・注意・ポイント）は ::before でCSS描画する。
   本文HTMLに <strong>ラベル：</strong> を書かないことで、strong の
   誤用（重要でない語の強調）を防ぎ、中身のテキストだけを書けばよくなる。
   ===================================================================== */
.note-box {
    position: relative;
    background: #f5f8ff;
    border-left: 5px solid #002266;
    border-radius: 8px;
    padding: 40px 20px 18px; /* 上部はラベル分の余白 */
    margin: 1.8em 0;
}
.note-box::before {
    content: "補足";
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #002266;
    border-radius: 8px 0 8px 0; /* 左上の角に合わせたタブ形 */
}
.note-box > p {
    margin: 0;
}
.note-box > p + p {
    margin-top: 0.6em;
}

/* 注意（レッド） */
.note-box--warning {
    background: #fdf3f3;
    border-left-color: #bf343f;
}
.note-box--warning::before {
    content: "注意";
    background: #bf343f;
}

/* ポイント（オレンジ） */
.note-box--point {
    background: #fff8ec;
    border-left-color: #fda61a;
}
.note-box--point::before {
    content: "ポイント";
    background: #fda61a;
}

/* =====================================================================
   Q&A
   ===================================================================== */
.qa-block {
    border: 1px solid #cdd9f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 1.8em 0;
}
.qa-block__q,
.qa-block__a {
    position: relative;
    margin: 0;
    padding: 16px 20px 16px 56px;
    line-height: 1.8;
}
.qa-block__q {
    background: #ebf2ff;
    color: #002266;
    font-weight: 700;
}
.qa-block__q::before,
.qa-block__a::before {
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 28px;
}
.qa-block__q::before {
    content: "Q";
    background: #002266;
}
.qa-block__a::before {
    content: "A";
    background: #fda61a;
}

/* =====================================================================
   チェックリスト
   通常の ul マーカー（single-content.css / editor-style.css）を上書きするため
   .wp-block-list を併記して詳細度を上げています
   ===================================================================== */
ul.wp-block-list.checklist > li {
    padding-left: 2.2em;
}
ul.wp-block-list.checklist > li::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0.3em;
    width: 22px;
    height: 22px;
    background: #002266;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
}

/* =====================================================================
   定義リスト（deflist.php で <ul class="def-list"> を dl/dt/dd に変換）
   ※編集画面では通常のリスト表示、フロントで dl に変換されます
   ===================================================================== */
.def-list {
    margin: 0 0 1.6em;
}
.def-list dt.def-list__term {
    position: relative;
    margin-top: 1em;
    padding-left: 1.4em;
    font-weight: 700;
    color: #002266;
}
.def-list dt.def-list__term:first-child {
    margin-top: 0;
}
.def-list dt.def-list__term::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: #002266;
    border-radius: 2px;
}
.def-list dd.def-list__desc {
    margin: 0.2em 0 0 1.4em;
    line-height: 1.9;
}

/* =====================================================================
   診断レポート誘導CTA（.report-cta-rich）
   サイト内の「傾き診断レポート」ページへ誘導する内部リンクCTA。

   ■ 設計メモ
     ・見出しは h タグを使わず段落＋CSS（記事の見出し階層を乱さないため）
     ・!important は使わず、クラスを重ねた詳細度で single-content.css に勝たせる
     ・カラムブロックはWordPressコアが 781px で縦積みになるため、
       メディアクエリも 781px に合わせる（ズレると崩れ帯ができる）
     ・タイトル右の「全7項目」バッジは ::after で描画（下の該当箇所で文言変更可）
   ===================================================================== */
.report-cta-rich {
    background: #ffffff;
    border: 2px solid #002266;
    border-radius: 12px;
    overflow: hidden;
    margin: 2.5em auto;
}

/* ---- ヘッダー帯 ---- */
.report-cta-rich .cta-rich__header {
    background: #002266;
    border-bottom: 4px solid #fda61a;
    text-align: center;
    padding: 9px 12px;
    margin-block: 0;
}
.report-cta-rich .cta-rich__header p {
    display: inline-block;
    margin: 0;
    line-height: 1;
}
/* 「無料」チップ：帯の中で最初に目に入る位置に置く */
.report-cta-rich .cta-rich__header-sub {
    background: #fda61a;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    padding: 6px 13px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    margin-right: 7px;
}
.report-cta-rich .cta-rich__header-main {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin-left: 10px;
}

/* ---- ボディ ---- */
.report-cta-rich .cta-rich__body {
    background: #f7faff;
    padding: 24px 30px;
    align-items: center;
    gap: 26px;
    margin-block: 0;
}
/* テーマの mediaquery.css に
     .single-content .is-layout-flex { display:block; margin:0 auto; width:fit-content; }
   があり、タブレット幅でカラムが「中身の幅」に縮んで左右に余白ができる。
   カラムブロックは is-layout-flex を持つため巻き添えになるので、
   詳細度を上げて幅いっぱいに戻す（テーマ本体は変更しない）。 */
.single-content .report-cta-rich .cta-rich__body,
.report-cta-rich .cta-rich__body.is-layout-flex {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* 画像カラム */
.report-cta-rich .cta-rich__img-col img {
    border: 3px solid #ffffff;
    box-shadow: -4px 4px 12px rgba(0, 34, 102, 0.15);
    border-radius: 3px;
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
}
.report-cta-rich:hover .cta-rich__img-col img {
    transform: rotate(0deg) scale(1.02);
}

/* タイトル（段落を見出し風に見せる） */
.report-cta-rich .cta-rich__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #002266;
    margin: 0 0 6px;
}
/* 「全7項目」バッジ：文言を変えたい場合はこの content を編集 */
.report-cta-rich .cta-rich__title::after {
    content: "全7項目";
    display: inline-block;
    background: #fda61a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: 3px;
    white-space: nowrap;
}

/* 特典行（お問い合わせ特典・価格の明示）
   価格は淡いオレンジ地に濃い赤で置く。
   オレンジ文字を白地に載せるとコントラスト不足になるため、地色で見せている。 */
.report-cta-rich .cta-rich__offer {
    background: #fff4e2;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.65;
    color: #002266;
    margin: 0 0 10px;
}
.report-cta-rich .cta-rich__offer strong {
    color: #bf343f;
    font-size: 1.1em;
}

/* 仕様行 */
.report-cta-rich .cta-rich__spec {
    font-size: 13px;
    color: #5b6472;
    line-height: 1.6;
    margin: 0 0 14px;
}

/* ベネフィット3点（テーマのマーカーを上書きするためクラスを重ねる） */
.report-cta-rich ul.cta-rich__list {
    margin: 0 0 16px;
    padding: 0;
}
.report-cta-rich ul.cta-rich__list > li {
    list-style: none;
    position: relative;
    padding-left: 1.95em;
    margin-bottom: 0.5em;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #002266;
}
.report-cta-rich ul.cta-rich__list > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 21px;
    height: 21px;
    background: #fda61a;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 視線の入口となる黄色マーカー */
.report-cta-rich ul.cta-rich__list mark {
    background: linear-gradient(transparent 62%, #ffe89a 62%);
    color: inherit;
    font-weight: 700;
}

/* マイクロコピー（ボタン直上・全幅で中央寄せ） */
.report-cta-rich .micro-copy {
    width: 100%;
    text-align: center;
    color: #bf343f;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 8px;
    letter-spacing: 0.03em;
}

/* ボタン（クラスを3つ重ねて core / single-content.css に勝たせる）
   主ボタン＝オレンジ塗り／副ボタン＝ネイビー枠線。
   高さと角丸は揃え、配色だけで優先順位を付ける。 */
/* ボタンは1つ。全幅にして迷いなく押せるようにする */
.report-cta-rich .wp-block-buttons {
    display: block;
    margin: 0 auto;
}
.report-cta-rich .wp-block-buttons .wp-block-button {
    width: 100%;
}
/* 共通の形 */
.report-cta-rich .wp-block-buttons .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.2s;
    margin: 0;
}
/* 主ボタン：レポートを見る */
.report-cta-rich .wp-block-buttons .btn-main .wp-block-button__link {
    background: #fda61a;
    color: #ffffff;
    font-size: 19px;
    padding: 16px 20px;
    box-shadow: 0 4px 0 #b57001;
}
.report-cta-rich .wp-block-buttons .btn-main .wp-block-button__link::after {
    content: "\203A";
    font-size: 22px;
    line-height: 1;
    margin-left: 8px;
}
.report-cta-rich .wp-block-buttons .btn-main .wp-block-button__link:hover {
    background: #fa7d00;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b57001;
}

/* ボタン下の安心材料（リスクリバーサル） */
/* 注記（申込みの条件・不安解消）。読み飛ばされないよう濃いめに。
   「※重要」ラベルは意味の強調ではないため strong を使わず ::before で描画する */
.report-cta-rich .cta-rich__note {
    font-size: 13px;
    color: #333333;
    line-height: 1.7;
    margin: 10px 0 0;
    text-indent: -3.5em;
    padding-left: 3.5em;
}
.report-cta-rich .cta-rich__note::before {
    content: "※重要";
    color: #bf343f;
    font-weight: 700;
    margin-right: 0.4em;
}

/* ---- スマホ / タブレット縦
   781px はカラムブロックが縦積みになるコア側の閾値。ここに揃える ---- */
@media screen and (max-width: 781px) {
    .report-cta-rich .cta-rich__body {
        padding: 22px 18px;
        gap: 0;
    }
    .report-cta-rich .cta-rich__img-col {
        margin-bottom: 18px;
        text-align: center;
    }
    .report-cta-rich .cta-rich__img-col img {
        max-width: 260px;
    }
    .report-cta-rich .cta-rich__header-sub {
        font-size: 13px;
        padding: 2px 11px;
    }
    .report-cta-rich .cta-rich__header-main {
        margin-left: 8px;
        font-size: 16px;
    }
    .report-cta-rich .cta-rich__title {
        font-size: 21px;
        text-align: center;
    }
    .report-cta-rich .cta-rich__title::after {
        font-size: 14px;
        width: fit-content;
        display: block;
        margin: 5px auto;
    }
    .report-cta-rich .cta-rich__offer {
        font-size: 13.5px;
        text-align: center;
        padding: 8px 10px;
    }
    .report-cta-rich ul.cta-rich__list > li {
        font-size: 14.5px;
    }
    .report-cta-rich .wp-block-buttons .btn-main .wp-block-button__link {
        font-size: 17px;
        padding: 15px 10px;
    }
    .report-cta-rich .cta-rich__note {
        font-size: 12.5px;
        text-align: left;
    }
}

/* =====================================================================
   お問い合わせ誘導CTA（.contact-cta）
   記事末尾に置く「行動させる」CTA。

   ■ 設計メモ
     ・記事中盤の .report-cta-rich（白地＋ネイビー枠の囲みバナー）と
       形で差をつけるため、こちらは枠を外した「帯」にしている。
       囲みを外すと広告の記号が消え、記事の結びとして読まれる。
     ・見出しは h タグを使わず段落＋CSS（記事の見出し階層を乱さないため）
     ・!important は使わず、クラスを重ねた詳細度で他CSSに勝たせる
     ・営業時間は平日8:00〜17:00（土日は対応不可）。時間外の受け皿として
       ボタンのサブ文言でメール・LINEへ誘導している

   ■ 構成（ブロックはフラットに置き、配置はCSSのgridだけで切り替える）
     見出し／署名／エンブレム／リード／ボタン／安心3点／電話／信頼情報
     スマホ : 縦積み（エンブレムのみ署名の右）
     PC     : ボタン左・連絡先右の2カラム。エンブレムは絶対配置で右上

   ■ ブレークポイント
     テーマ本体（mediaquery.css / single-content.css）と同じ 850 / 450。
     PC用の指定はメディアクエリが詳細度を上げないため、
     必ずファイル末尾（各要素の基本指定より後ろ）にまとめている。
   ===================================================================== */

/* ---------------------------------------------------------------------
   グループブロックの inner container 対策（最重要）

   theme.json を持たないクラシックテーマでは、WordPress が
   wp_restore_group_inner_container() によってグループブロックの中身を
     <div class="wp-block-group__inner-container"> … </div>
   で包み直す。このため .contact-cta にグリッドを当てても、
   グリッドアイテムが inner container 1個だけになってしまう。

   inner container を display:contents にして箱そのものを消すことで、
   theme.json の有無に関係なく同じレイアウトになる。
   将来 theme.json を導入して inner container が出力されなくなっても、
   このルールは単に無効化されるだけで副作用はない。
   --------------------------------------------------------------------- */
.contact-cta .wp-block-group__inner-container {
    display: contents;
}

/* ---- 改行ユーティリティ（.br-850） ----
   テーマの mediaquery.css には .br-450 しか定義がない。
   .br-850 を定義しないと <br class="br-850"> は常に改行するため、
   PC幅で見出しが意図せず2行になる。 */
.br-850 {
    display: block;
}
@media screen and (min-width: 851px) {
    .br-850 {
        display: none;
    }
}

/* ---- 外枠（枠なしの帯）＋レイアウト ----
   基本はスマホの縦積み。エンブレムだけ署名の右に置く。
   グリッドが効かない環境でも、DOM順のまま素直に縦積みになる。 */
.contact-cta {
    position: relative;
    background: #ebf2ff;
    border: 0;
    border-top: 3px solid #fda61a;
    border-bottom: 3px solid #fda61a;
    border-radius: 0;
    padding: 22px 18px;
    margin: 2.5em 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "catch  badge"
        "sign   sign"
        "lead   lead"
        "btn    btn"
        "assure assure"
        "tel    tel"
        "trust  trust";
    column-gap: 12px;
    align-items: start;
}
.contact-cta .contact-cta__catch {
    grid-area: catch;
}
.contact-cta .contact-cta__sign {
    grid-area: sign;
    align-self: center;
}
.contact-cta figure.contact-cta__badge {
    grid-area: badge;
    align-self: start;
    justify-self: end;
}
.contact-cta .contact-cta__lead {
    grid-area: lead;
}
.contact-cta .wp-block-buttons {
    grid-area: btn;
}
.contact-cta ul.contact-cta__assure {
    grid-area: assure;
}
.contact-cta .contact-cta__tel {
    grid-area: tel;
}
.contact-cta .contact-cta__trust {
    grid-area: trust;
}

/* ---- 見出し ---- */
.contact-cta .contact-cta__catch {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #002266;
    margin: 0;
    align-self: center;
}

/* ---- 署名行（顔写真＋氏名） ----
   顔写真は48〜52px。直後の著者プロフィール欄（80〜100px）と
   サイズを変えることで「肖像」ではなく「署名印」として読ませ、
   同じ顔が2回出ることのくどさを避けている。 */
.contact-cta .contact-cta__sign {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
/* テーマの .single-content .is-layout-flex（width:fit-content）対策 */
.single-content .contact-cta .contact-cta__sign,
.contact-cta .contact-cta__sign.is-layout-flex {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* 画像は figure / img の要素型までセレクタに含める。
   style.css の .single-content .wp-block-image（margin 1em）と
   single-content.css の .single-content .wp-block-image img（角丸4px）が
   同じ詳細度のため、読み込み順に依存させないようにするのが目的。 */
.contact-cta figure.contact-cta__photo {
    flex: 0 0 96px;
    margin: 0;
}
.contact-cta figure.contact-cta__photo img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #002266;
    background: #ffffff;
    display: block;
}
.contact-cta .contact-cta__signtext {
    flex: 1 1 auto;
    min-width: 0;
}
.contact-cta .contact-cta__signname {
    font-size: 13px;
    font-weight: 700;
    color: #002266;
    line-height: 1.45;
    margin: 0;
}
.contact-cta .contact-cta__signrole {
    font-size: 11px;
    color: #5b6472;
    line-height: 1.45;
    margin: 3px 0 0;
}

/* ---- GS10エンブレム（円形の認証シール） ----
   emblem__gs10.png は 404×240px の横長。円の中に収めるため、
   図形は正円にして画像だけを内側にセンタリングする。
   背景透過のマークをネイビー地に載せ、淡青の面から浮き上がらせる。 */
.contact-cta figure.contact-cta__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 92px;
    margin: 0;
    padding: 0 10px;
    background: #002266;
    border-radius: 50%;
    box-sizing: border-box;
    border: #fff 2px solid;
}
.contact-cta figure.contact-cta__badge img {
    width: 100%;
    max-width: 92px;
    height: auto;
    border-radius: 0;
    display: block;
}

/* ---- リード ---- */
.contact-cta .contact-cta__lead {
    font-size: 13.5px;
    color: #333333;
    line-height: 1.75;
    margin: 0 0 14px;
}

/* ---- 主ボタン ----
   サブ文言はボタンの内側に置く。オレンジ地に白文字12pxは
   コントラスト比が確保できるため、外に出す必要がない。
   右端の矢印は ::before を絶対配置（::after はサブ文言で使用済み） */
.contact-cta .wp-block-buttons {
    display: block;
    margin: 0 0 12px;
}
/* mediaquery.css の .single-content .is-layout-flex（850px以下で
   display:block / width:fit-content）に巻き込まれてボタンが
   縮むのを防ぐ */
.contact-cta .wp-block-buttons.is-layout-flex {
    display: block;
    width: auto;
    max-width: none;
}
.contact-cta .wp-block-buttons .wp-block-button {
    width: 100%;
    margin: 0;
}
.contact-cta .wp-block-buttons .btn-contact .wp-block-button__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 30px;
    background: #fda61a;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 0 #b57001;
    transition: 0.2s;
    margin: 0;
}
.contact-cta .wp-block-buttons .btn-contact .wp-block-button__link::before {
    content: "\203A";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    line-height: 1;
}
/* サブ文言：変更する場合はこの content を編集。
   写真が「必須ではないが送れる」ことは問合せのハードルに直結するため、
   行数を増やさずここに畳んでいる。 */
.contact-cta .wp-block-buttons .btn-contact .wp-block-button__link::after {
    content: "24時間受付・相談無料／写真も送れます";
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 4px;
}
.contact-cta .wp-block-buttons .btn-contact .wp-block-button__link:hover {
    background: #fa7d00;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b57001;
}

/* ---- 安心材料（リスクリバーサル） ----
   「押したあとに何が起きないか」を並べる。 */
.contact-cta ul.contact-cta__assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0 0 12px;
    padding: 0;
}
.contact-cta ul.contact-cta__assure > li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 1em;
    font-size: 12px;
    font-weight: 700;
    color: #002266;
    line-height: 1.5;
}
.contact-cta ul.contact-cta__assure > li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: #1d7a5c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

/* ---- 電話 ----
   ラベル「お電話でのご相談」と受付時間は装飾ではなく内容なので、
   ::before / ::after ではなくHTML側に置いている（コピー・読み上げ・
   翻訳のいずれでも正しく扱われるようにするため）。
   受付時間は番号の下へ落とす。段落内の <br> で改行しており、
   ブロックは1つのまま保っている。

   旧版の pointer-events:none は撤去した。PCで番号をコピーできなくなる
   副作用のほうが実害が大きいため。 */
.contact-cta .contact-cta__tel {
    border-top: 1px solid #c4d4ee;
    border-bottom: 1px solid #c4d4ee;
    padding: 9px 0 10px;
    margin: 0 0 14px;
    text-align: center;
    font-size: 11.5px;
    color: #5b6472;
    line-height: 1.6;
}
.contact-cta .contact-cta__tel a {
    display: inline-block;
    color: #002266;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: -1px;
    margin-left: 2px;
    margin-inline: 5px;
}

/* ---- 信頼情報（3項目を横並び） ----
   年数（124年など）は書かない。西暦だけ置けば毎年の更新が不要になり、
   サイト全体の「120年を超えて」という表記とも矛盾しない。 */
.contact-cta .contact-cta__trust {
    background: #ffffff;
    border-radius: 8px;
    padding: 11px 14px;
    margin: 0;
}
.contact-cta ul.contact-cta__trustlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 0;
    margin: 0;
    padding: 0;
}
.contact-cta ul.contact-cta__trustlist > li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #002266;
    line-height: 1.6;
    border-left: 1px solid #ccd8ee;
}
.contact-cta ul.contact-cta__trustlist > li:first-child {
    border-left: 0;
}
.contact-cta ul.contact-cta__trustlist > li::before {
    content: none;
}
@media screen and (max-width: 850px) {
    .contact-cta .contact-cta__catch {
        font-size: clamp(19px, 1.5038vw + 12.218px, 25px);
    }
}
/* ---- スマホ（テーマ本体と同じ450px） ---- */
@media screen and (max-width: 450px) {
    .contact-cta {
        padding: 20px 16px;
        column-gap: 10px;
        position: relative;
    }
    .contact-cta .contact-cta__catch {
        font-size: 17px;
    }
    .contact-cta .contact-cta__signname {
        font-size: 12.5px;
    }
    .contact-cta figure.contact-cta__badge {
        width: 84px;
        height: 72px;
        padding: 0 8px;
    }
    .contact-cta figure.contact-cta__badge img {
        max-width: 72px;
    }
    .contact-cta figure.contact-cta__photo {
        flex: 0 0 84px;
    }
    .contact-cta figure.contact-cta__photo img {
        width: 84px;
        height: 84px;
    }
    .contact-cta .wp-block-buttons .btn-contact .wp-block-button__link {
        font-size: 16px;
        padding: 14px 26px;
    }
    .contact-cta .contact-cta__tel a {
        font-size: 19px;
        display: block;
    }
    /* 信頼情報は縦積みに。横並びのままだと1項目ずつ折り返して
       区切り線の位置が崩れる */
    .contact-cta ul.contact-cta__trustlist {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .contact-cta ul.contact-cta__trustlist > li {
        padding: 0;
        border-left: 0;
        font-size: 12px;
    }
}

/* =====================================================================
   PC（851px以上）のレイアウト

   ※ メディアクエリは詳細度を上げないため、各要素の基本指定より
      「後ろ」に置く必要がある。ここを上のセクションに書くと、
      後続の .contact-cta .wp-block-buttons などに負けて効かない。
   ===================================================================== */
@media screen and (min-width: 851px) {
    /* 内容幅は700pxで頭打ちにして中央へ。
       ボタンと連絡先を左右に置き、横幅を余白ではなく内容で埋める。 */
    .contact-cta {
        /* パーセンテージのパディングは「親要素の内容幅」に対して解決される。
           エディタでは .wp-block の max-width でブロック自体は狭くなるのに、
           100% は全幅を指すため巨大な余白が入って崩れる。固定値を使う。 */
        padding-block: 30px;
        padding-inline: 40px;
        margin: 3em 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "catch  catch"
            "sign   sign"
            "lead   lead"
            "btn    assure"
            "btn    tel"
            "trust  trust";
        column-gap: 22px;
    }

    /* エンブレムは絶対配置で右上へ逃がす。
       グリッドの列幅に影響しないので、下段の比率を自由に決められる。
       right は padding-inline と同じ式にして、内容の右端に揃える。 */
    /* PCは横幅に余裕があるので絶対配置で右上へ逃がす。
       グリッドの列を消費しないぶん、見出しを広く使える。
       851px未満ではグリッド配置（見出し行の右セル）に戻り、
       場所が確保されるので重ならない。 */
    .contact-cta figure.contact-cta__badge {
        position: absolute;
        grid-area: auto;
        top: 26px;
        right: 40px;
        width: 180px;
        height: 150px;
        padding: 0 13px;
        margin: 0;
        border: #fff 2px solid;
    }
    .contact-cta figure.contact-cta__badge img {
        max-width: 148px;
    }
    /* エンブレムと重ならないよう、上3ブロックの右側を空けておく */
    /* エンブレム（180px）＋余白16px ぶんを空ける。
       エンブレムの width を変えたら、この値も必ず合わせること */
    .contact-cta .contact-cta__catch,
    .contact-cta .contact-cta__sign,
    .contact-cta .contact-cta__lead {
        padding-right: 196px;
    }

    .contact-cta .contact-cta__catch {
        font-size: 28px;
        margin-bottom: 14px;
    }
    .contact-cta .contact-cta__sign {
        gap: 12px;
    }
    .contact-cta .contact-cta__signname {
        font-size: 23px;
    }
    .contact-cta .contact-cta__signrole {
        font-size: 13px;
    }
    .contact-cta .contact-cta__lead {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* 左：ボタン（2行ぶんの高さを使うので上下中央に置く） */
    .contact-cta .wp-block-buttons {
        align-self: center;
        margin: 0;
    }
    .contact-cta .wp-block-buttons .btn-contact .wp-block-button__link {
        font-size: 19px;
        padding: 16px 34px;
    }
    .contact-cta .wp-block-buttons .btn-contact .wp-block-button__link::before {
        right: 16px;
        font-size: 24px;
    }
    .contact-cta .wp-block-buttons .btn-contact .wp-block-button__link::after {
        font-size: 12px;
    }

    /* 右：安心3点 → 電話 */
    .contact-cta ul.contact-cta__assure {
        align-self: end;
        justify-content: center;
        gap: 5px;
        margin: 0 0 10px;
    }
    .contact-cta ul.contact-cta__assure > li {
        font-size: 13px;
    }
    .contact-cta .contact-cta__tel {
        align-self: start;
        margin: 0;
    }
    .contact-cta .contact-cta__tel a {
        font-size: 21px;
    }

    /* 信頼情報は全幅の1カラム */
    .contact-cta .contact-cta__trust {
        margin: 18px 0 0;
        padding: 12px 16px;
    }
    .contact-cta ul.contact-cta__trustlist > li {
        padding: 0 18px;
        font-size: 13px;
    }
}