/* ============================================================
   家タダ｜エリア特集ページ 共通スタイル
   ブランド：新居奉行「家タダ」／時代劇テイスト
   ・カラーとフォントは本サイト（ietada.com）の実測値に合わせています
   ・すべて .jt-area 配下にスコープしているので既存CSSと衝突しません
   ============================================================ */

/* 見出し用の明朝体（本サイトと同じフォントファイルを参照） */
.jt-area{
  /* ▼本サイトの実測カラー */
  --jt-navy:#003F6B;          /* メインカラー */
  --jt-orange:#F58021;        /* サブ／ポイントカラー */
  --jt-red:#D20000;           /* 強調（無料・0円） */
  --jt-gold:#C9A227;          /* 金の装飾 */
  --jt-line:#06C755;          /* LINE */
  --jt-ink:#263238;
  --jt-sub:#78909C;
  --jt-light-text:#455A64;
  --jt-border:#CFD8DC;
  --jt-bg:#FAFAFA;
  --jt-bg2:#ECEFF1;
  --jt-shadow:0 3px 6px rgba(38,50,56,.18);
  --jt-radius:10px;
  --jt-maxw:1140px;
  /* 和紙・畳・紺の和柄テクスチャ（画像を使わずCSSで生成＝継ぎ目なし・軽量） */
  --jt-washi-c:#F6EFDD;
  --jt-tatami-c:#EFE3C6;
  --jt-washi-tex:
    repeating-linear-gradient(0deg,rgba(122,96,46,.050) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(122,96,46,.032) 0 1px,transparent 1px 5px),
    radial-gradient(120px 60px at 20% 30%,rgba(160,130,70,.045),transparent 70%),
    radial-gradient(160px 70px at 75% 70%,rgba(160,130,70,.040),transparent 70%);
  --jt-navy-tex:
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 8px);

  /* ============================================================
     ★★ 城東区の実写をヒーロー背景に入れるときは、この1行だけ差し替えてください ★★
        例）--jt-hero-photo:url("https://www.ietada.com/img/joto/hero.jpg");
        none のままなら下の大阪城イラストが背景になります（写真が入るとイラストは自動で隠れます）
     ============================================================ */
  /* ============================================================
     ヒーローの背景
     写真をやめ、オリジナルのSVGイラスト（大阪城・高架の電車・川・戸建ての町並み）を
     背景にしています。理由は3つ：
       ① 文字が常に濃色×淡背景になるので、可読性が100%固定される
       ② 写真の権利・差し替えリスクがゼロ（自社制作物）
       ③ 23区へ横展開するとき、ランドマークだけ描き替えれば同じ型が使える
     配色は家タダのブランド（紺・金・オレンジ）に合わせた淡いブルー基調。

     ▼実写写真を背景にしたい場合
        .jt-hero に .jt-hero--photo を付け、下の1行にURLを入れてください。
        ただし文字色が濃色のままなので、写真は「白飛びするほど明るいもの」に限ります。
     ============================================================ */
  --jt-hero-photo:none;
  --jt-hero-photo-pos:center 20%;

  --jt-mincho:"Zen Old Mincho","Zen Old Mincho JT","Yu Mincho",YuMincho,"Hiragino Mincho ProN","MS PMincho",serif;
  --jt-gothic:メイリオ,Meiryo,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Noto Sans JP",sans-serif;

  color:var(--jt-ink);
  font-family:var(--jt-gothic);
  line-height:1.9;
  font-size:16px;
  background:var(--jt-bg);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}.jt-area *,.jt-area *::before,.jt-area *::after{box-sizing:border-box}.jt-area img{max-width:100%;height:auto;display:block}.jt-area a{color:var(--jt-navy)}.jt-area p{margin:0 0 15px}.jt-wrap{max-width:var(--jt-maxw);margin:0 auto;padding:0 18px}.jt-sec{padding:64px 0;position:relative}/* 和紙／畳／紺の背景 */
.jt-sec--tint{background-color:var(--jt-washi-c);background-image:var(--jt-washi-tex)}/* ---------- 見出し ---------- */
.jt-area h2.jt-h2{
  font-family:var(--jt-mincho);font-weight:700;
  font-size:clamp(24px,4vw,40px);line-height:1.45;letter-spacing:.02em;
  color:var(--jt-ink);text-align:center;margin:0 0 10px;
}.jt-h2 .jt-h2num{
  display:block;font-family:var(--jt-gothic);font-size:12px;font-weight:700;
  letter-spacing:.22em;color:var(--jt-orange);margin:0 0 6px;
}.jt-h2 em{font-style:normal;color:var(--jt-red)}/* 金の筆下線 */
.jt-h2::after{
  content:"";display:block;width:190px;height:14px;margin:12px auto 0;
  background:url("https://www.ietada.com/images/top/calculation__underline.svg") center/contain no-repeat;
}.jt-lead{color:var(--jt-light-text);margin:0 auto 30px;font-size:15px;text-align:center;max-width:820px}.jt-area h3.jt-h3{
  font-family:var(--jt-mincho);font-weight:700;
  font-size:clamp(19px,2.6vw,26px);margin:38px 0 14px;line-height:1.55;
  color:var(--jt-navy);text-align:center;
}.jt-area h3.jt-h3::before{
  content:"";display:inline-block;width:20px;height:18px;margin-right:9px;vertical-align:-2px;
  background:url("https://www.ietada.com/images/top/hanamaru-icon.svg") center/contain no-repeat;
}/* ---------- キャラクター ---------- */
/* 画像が読み込めなかった場合（回線不良・パス誤りなど）に alt テキストがボックス外へ
   はみ出して他の要素と重なって見える事故を防ぐ。aspect-ratio で高さ0でも領域を確保し、
   font-size:0 + overflow:hidden で代替テキストを視覚的に隠す（altはアクセシビリティ
   ツリーには残るため、スクリーンリーダー等には引き続き読み上げられる）。*/
.jt-chara{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  overflow:hidden;font-size:0;line-height:0;color:transparent;aspect-ratio:1/1.05;object-fit:contain}.jt-sechead{position:relative}.jt-sechead .jt-chara{right:0;bottom:-6px;width:clamp(88px,11vw,132px)}@media(max-width:860px){.jt-sechead .jt-chara{width:76px;right:-4px;bottom:-10px;opacity:.9}}/* ---------- パンくず ---------- */
.jt-bc{font-size:12px;color:var(--jt-sub);padding:12px 0;overflow-x:auto;white-space:nowrap}.jt-bc ol{list-style:none;margin:0;padding:0;display:inline-flex;gap:6px;align-items:center}.jt-bc li::after{content:"›";margin-left:6px;color:#B0BEC5}.jt-bc li:last-child::after{content:""}.jt-bc a{color:var(--jt-sub);text-decoration:none}/* ==========================================================
   ヒーロー（トップビュー）
   ・背景は自社制作のSVGイラスト（写真なし・オーバーレイなし）
   ・淡い背景に濃い文字＝可読性は常に100%。影も膜も要らない
   ========================================================== */
.jt-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:#FFFDF7;color:#14232C;
  min-height:680px;display:flex;align-items:flex-start;
}/* 背景イラスト */
.jt-heroart-wrap{position:absolute;inset:0;overflow:hidden;z-index:0}.jt-heroart{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}/* 文字コンテナ */
.jt-hero-in{
  position:relative;z-index:3;width:100%;max-width:var(--jt-maxw);
  margin:0 auto;padding:70px 18px 74px;text-align:center;
}.jt-hero-body{max-width:920px;margin:0 auto}/* ── アイブロウ（金の罫線＋小さな見出し） ── */
.jt-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;position:relative;
  font-family:var(--jt-mincho);font-size:15.5px;font-weight:700;letter-spacing:.13em;
  color:#2B2318;padding:10px 30px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCF7EA 100%);
  border:1px solid #C9A227;
  box-shadow:0 3px 10px rgba(120,95,20,.10);
}.jt-eyebrow::after{
  content:"";position:absolute;inset:3px;border:1px solid rgba(201,162,39,.45);pointer-events:none;
}.jt-eyebrow b{color:var(--jt-red);font-weight:700}/* ── 見出し：小 → 特大 → 中 の3段 ── */
.jt-area h1.jt-h1{
  font-family:var(--jt-mincho);color:#14232C;margin:0 0 22px;
  font-weight:700;letter-spacing:.01em;
}.jt-h1 span{display:block}.jt-h1-a{
  font-size:clamp(18px,2.0vw,29px);line-height:1.5;font-weight:500;
  color:#6B6357;letter-spacing:.12em;margin-bottom:.30em;
}.jt-h1-b{
  font-size:clamp(42px,7.0vw,98px);line-height:1.06;font-weight:700;letter-spacing:.004em;
}.jt-h1-b em{font-style:normal;color:var(--jt-red)}.jt-h1-c{
  font-size:clamp(22px,3.1vw,44px);line-height:1.32;font-weight:600;
  color:#14232C;margin-top:.20em;letter-spacing:.05em;
}/* 紺地に金罫のバッジ（家タダMVの「平均200万円お安くできます！」と同じ意匠） */
.jt-hero-badge{
  display:inline-flex;align-items:baseline;gap:9px;margin:0 0 26px;
  background:linear-gradient(180deg,#0A4670 0%,#04314F 100%);color:#fff;
  border:1px solid #C9A227;padding:11px 26px;
  font-family:var(--jt-mincho);font-size:16px;font-weight:700;letter-spacing:.05em;
  box-shadow:0 7px 18px rgba(4,49,79,.22);
}.jt-hero-badge b{
  color:#FFD873;font-size:29px;line-height:1;letter-spacing:.01em;
}.jt-hero-badge small{font-size:13px;font-weight:500;color:#CFE0EC;letter-spacing:.03em}/* ── リード文 ── */
.jt-hero-sub{
  font-size:16px;line-height:1.95;color:#3A3730;font-weight:500;
  margin:0 auto 32px;max-width:720px;
}.jt-hero-sub strong{color:var(--jt-red);font-weight:700}.jt-hero-sub b{white-space:nowrap}/* ── 明るい背景用のボタン ── */
.jt-hero .jt-btn--tel{
  background:#fff;color:var(--jt-navy)!important;border-color:var(--jt-navy);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 6px 16px rgba(0,63,107,.10);
}.jt-hero .jt-btn--tel:hover{background:#F2F8FC}.jt-hero .jt-link-more{
  color:var(--jt-navy)!important;text-shadow:none;border-bottom:none;
  background:#FFFFFF;border:1px solid #DCCFAE;border-radius:2px;
  padding:10px 22px;font-size:14.5px;
  box-shadow:0 4px 12px rgba(120,95,20,.10);
}.jt-hero .jt-link-more:hover{color:var(--jt-orange)!important;border-color:var(--jt-orange);background:#FFFBF4}/* ── 信頼ポイント ── */
.jt-hero-in .jt-cta-row{justify-content:center}.jt-hero-more{margin:14px 0 0}/* ── キャラクター：町並みの手前に立たせる ── */
.jt-hero .jt-chara{
  position:absolute;right:2.5%;left:auto;bottom:0;
  width:clamp(140px,14.5vw,206px);z-index:2;pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(11,58,92,.22));
}/* ---------- データバー（ヒーロー直下） ---------- */
/* 数値ストリップ（罫線区切り・箱なし） */
.jt-kpis{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:0;padding:0;
}.jt-kpi{padding:0 34px;border-left:1px solid rgba(255,255,255,.16)}.jt-kpi:first-child{padding-left:0;border-left:none}.jt-kpi dt{
  font-family:var(--jt-gothic);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;color:#9FBBD2;margin:0 0 8px;
}.jt-kpi dd{
  margin:0;font-family:var(--jt-mincho);font-weight:700;color:#fff;
  font-size:clamp(21px,2.6vw,31px);line-height:1;letter-spacing:.01em;
}.jt-kpi dd i{font-style:normal;font-size:.52em;font-weight:500;margin-left:.18em;color:#D6E6F2}.jt-kpi dd small{
  display:block;font-family:var(--jt-gothic);font-size:10.5px;font-weight:400;
  color:#8FAEC7;margin-top:10px;letter-spacing:.02em;line-height:1.6;
}.jt-statsbar{background:#0B2033;color:#fff;padding:26px 0 22px;position:relative}.jt-statsbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#C9A227 0%,#EBCE86 22%,rgba(235,206,134,.15) 62%,transparent 100%);
}.jt-statsbar .jt-kpis{border:none;padding:0;margin:0}.jt-bar-pts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;
  margin:0 0 22px;padding:0 0 20px;list-style:none;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#DCE9F2;
}.jt-bar-pts li{display:flex;align-items:center;gap:6px}.jt-bar-pts li::before{
  content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;
  background:#EBCE86;box-shadow:0 0 0 3px rgba(235,206,134,.20);
}@media(max-width:640px){.jt-bar-pts{gap:7px 16px;font-size:11.5px;margin-bottom:18px;padding-bottom:16px}}.jt-statsbar .jt-towns{
  margin:20px 0 0;padding-top:16px;max-width:none;color:#8FAEC7;font-size:11.5px;
  border-top:1px solid rgba(255,255,255,.13);
}@media(max-width:900px){.jt-statsbar{padding:22px 0 20px}.jt-bar-pts{gap:8px 16px;font-size:11.5px}.jt-statsbar .jt-kpis{grid-template-columns:1fr 1fr;gap:26px 0}}/* ---------- ボタン ---------- */
.jt-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.jt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;font-family:var(--jt-mincho);font-weight:700;font-size:16.5px;
  text-decoration:none;border:1.5px solid transparent;transition:.2s;line-height:1.3;position:relative;
  letter-spacing:.04em;
}/* 主：LINE */
.jt-btn--line{
  background:var(--jt-line);color:#fff!important;
  box-shadow:0 10px 26px rgba(6,199,85,.30);padding:18px 34px;font-size:17.5px;
}.jt-btn--line::before{content:none}.jt-btn--line:hover{box-shadow:0 14px 32px rgba(6,199,85,.40)}/* 副：電話（ヒーロー上では白フチ、明るい面では白地） */
.jt-btn--tel{background:rgba(255,255,255,.10);color:#fff!important;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.jt-btn--tel::before{
  content:"";width:22px;height:21px;flex:0 0 auto;
  background:url("https://www.ietada.com/images/top/head-tel-icon.svg") center/contain no-repeat;
}.jt-btn--tel:hover{background:rgba(255,255,255,.20)}/* 紺のメールボタン（明るい面用・右下に折れ角） */
.jt-btn--mail{background:var(--jt-navy);color:#fff!important;box-shadow:var(--jt-shadow)}.jt-btn--mail::after{
  content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 12px 12px;
  border-color:transparent transparent #fff transparent;
}.jt-btn:hover{transform:translateY(-2px)}/* 第3ボタン：テキストリンク */
.jt-link-more{
  display:inline-flex;align-items:center;gap:7px;color:#fff!important;
  font-family:var(--jt-mincho);font-size:15px;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;transition:.18s;letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(4,22,40,.5),0 3px 18px rgba(4,22,40,.4);
}.jt-link-more::after{content:"›";font-size:19px;line-height:1}.jt-link-more:hover{color:#fff!important;border-bottom-color:#fff}/* ---------- 直答ボックス ---------- */
.jt-answer{
  background:#fff;border:3px solid var(--jt-navy);padding:24px 24px 12px;position:relative;
  box-shadow:var(--jt-shadow);
}.jt-answer::before,.jt-answer::after{
  content:"";position:absolute;width:14px;height:14px;background:var(--jt-navy);
}.jt-answer::before{left:-3px;top:-3px}.jt-answer::after{right:-3px;bottom:-3px}.jt-answer .jt-q{
  font-family:var(--jt-mincho);font-weight:700;font-size:clamp(17px,2.5vw,22px);color:var(--jt-navy);
  margin:0 0 12px;padding-left:34px;position:relative;line-height:1.55;
}.jt-answer .jt-q::before{
  content:"問";position:absolute;left:0;top:.1em;width:26px;height:26px;
  background:var(--jt-navy);color:#fff;font-size:13px;display:grid;place-items:center;font-weight:700;
}.jt-answer .jt-a{padding-left:34px;position:relative;font-size:15.5px}.jt-answer .jt-a::before{
  content:"答";position:absolute;left:0;top:.1em;width:26px;height:26px;
  background:var(--jt-orange);color:#fff;font-size:13px;display:grid;place-items:center;font-weight:700;
  font-family:var(--jt-mincho);
}.jt-answer strong{color:var(--jt-red)}.jt-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}.jt-points li{
  position:relative;padding:11px 14px 11px 42px;background:#FBF6E9;border:1px solid #E8DCBE;font-size:14.5px;
}.jt-points li::before{
  content:"";position:absolute;left:14px;top:15px;width:18px;height:16px;
  background:url("https://www.ietada.com/images/top/hanamaru-icon.svg") center/contain no-repeat;
}/* ---------- テーブル ---------- */
.jt-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 12px;border:1px solid var(--jt-border);background:#fff;box-shadow:var(--jt-shadow)}.jt-table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}.jt-table th,.jt-table td{padding:12px 14px;border-bottom:1px solid var(--jt-border);text-align:left;vertical-align:middle}.jt-table thead th{background:var(--jt-navy);color:#fff;font-family:var(--jt-mincho);font-weight:700;font-size:14px;white-space:nowrap;border-bottom:none}.jt-table tbody tr:nth-child(even){background:#F7FAFC}.jt-table tbody tr:last-child td{border-bottom:none}.jt-table .jt-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.jt-table .jt-hl{color:var(--jt-red);font-weight:700}.jt-table .jt-zero{color:var(--jt-red);font-weight:700;font-family:var(--jt-mincho)}.jt-cap{font-size:11.5px;color:var(--jt-sub);margin:0 0 26px;line-height:1.8}.jt-cap a{color:var(--jt-sub)}.jt-bar{display:grid;grid-template-columns:120px 1fr 92px;gap:10px;align-items:center;font-size:13px}.jt-card{background:#fff;border:1px solid var(--jt-border);padding:22px;display:flex;flex-direction:column;box-shadow:var(--jt-shadow)}.jt-card-head{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}.jt-card-head h3{margin:0;font-family:var(--jt-mincho);font-size:20px;font-weight:700;line-height:1.4;color:var(--jt-navy);padding:0;border:none;text-align:left}.jt-card-head h3::before{display:none}.jt-card-head p{margin:3px 0 0;font-size:12px;color:var(--jt-sub)}.jt-chips{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0 0 13px;padding:0}.jt-chips li{font-size:11.5px;background:#EDF3F8;color:var(--jt-navy);padding:2px 9px;font-weight:700;border:1px solid #D6E4EF}/* ---------- リンク集 ---------- */
.jt-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0}.jt-links a{
  display:block;background:#fff;border:1px solid var(--jt-border);padding:16px 18px;
  text-decoration:none;font-family:var(--jt-mincho);font-weight:700;font-size:15.5px;color:var(--jt-navy);transition:.15s;box-shadow:var(--jt-shadow);
}.jt-links a:hover{border-color:var(--jt-navy);transform:translateY(-2px)}.jt-links small{display:block;font-family:var(--jt-gothic);font-weight:400;font-size:12px;color:var(--jt-sub);margin-top:4px}/* ---------- 記事一覧 ---------- */
.jt-posts{list-style:none;margin:0;padding:0;display:grid;gap:10px}.jt-posts a{
  display:flex;gap:12px;align-items:baseline;background:#fff;border:1px solid var(--jt-border);
  padding:15px 17px;text-decoration:none;font-size:14.5px;font-weight:700;color:var(--jt-ink);transition:.15s;
}.jt-posts a:hover{border-color:var(--jt-navy)}/* ---------- FAQ ---------- */
.jt-faq{display:grid;gap:10px}.jt-faq details{background:#fff;border:1px solid var(--jt-border);box-shadow:var(--jt-shadow)}.jt-faq summary{
  cursor:pointer;list-style:none;padding:17px 48px 17px 52px;font-family:var(--jt-mincho);font-weight:700;font-size:16px;
  position:relative;color:var(--jt-navy);line-height:1.55;
}.jt-faq summary::-webkit-details-marker{display:none}.jt-faq summary::before{
  content:"問";position:absolute;left:16px;top:17px;width:24px;height:24px;
  background:var(--jt-navy);color:#fff;font-size:12px;display:grid;place-items:center;
}.jt-faq summary::after{content:"＋";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--jt-orange);line-height:1}.jt-faq details[open] summary::after{content:"−"}.jt-faq .jt-faq-body{padding:0 18px 20px 52px;font-size:14.5px;color:#37474F;position:relative}.jt-faq .jt-faq-body::before{
  content:"答";position:absolute;left:16px;top:0;width:24px;height:24px;
  background:var(--jt-orange);color:#fff;font-size:12px;display:grid;place-items:center;font-family:var(--jt-mincho);
}.jt-faq .jt-faq-body p:last-child{margin:0}/* ---------- 最終CTA ---------- */
.jt-final{
  background-color:var(--jt-navy);background-image:var(--jt-navy-tex);color:#fff;padding:44px 26px;text-align:center;position:relative;overflow:hidden;
}.jt-final::before{
  content:"";display:block;width:230px;height:44px;margin:0 auto 12px;
  background:url("https://www.ietada.com/images/top/ornament.svg") center/contain no-repeat;opacity:.9;
}.jt-area .jt-final h2{
  font-family:var(--jt-mincho);color:#fff!important;font-size:clamp(22px,3.8vw,34px);margin:0 0 12px;font-weight:700;text-align:center;
}.jt-final h2::after{display:none}.jt-final h2 em{font-style:normal;color:#FFD166}.jt-final p{color:#CFE0EE;font-size:14.5px;margin:0 0 24px}.jt-final .jt-cta-row{justify-content:center;position:relative;z-index:2}/* 紺背景の上ではメールボタンを白フチに（紺×紺で沈むのを防ぐ） */
.jt-final .jt-btn--mail{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.62)}.jt-final .jt-btn--mail::after{display:none}.jt-final .jt-chara{left:12px;bottom:-8px;width:150px}.jt-final .jt-chara--r{left:auto;right:12px;bottom:-8px;width:150px}@media(max-width:1080px){.jt-final .jt-chara{display:none}}/* ---------- 監修 ---------- */
.jt-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--jt-sub);border-top:1px solid var(--jt-border);padding-top:16px;margin-top:34px}.jt-check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:11.5px}/* ---------- ブログ記事に貼るとき用の調整 ---------- */
.jt-area{max-width:100%;overflow-x:hidden}.jt-statsbar{margin-bottom:0}/* ---------- ブログ記事版：トップビュー（イラスト）を残しつつ高さを抑える ---------- */
.jt-area .jt-hero{min-height:430px}.jt-area .jt-hero-in{padding:46px 18px 50px}.jt-area .jt-h1-a{font-size:clamp(16px,1.7vw,24px);margin-bottom:.26em}.jt-area .jt-h1-b{font-size:clamp(34px,5.6vw,72px)}.jt-area .jt-h1-c{font-size:clamp(19px,2.6vw,34px)}.jt-area .jt-hero-sub{font-size:15px;margin-bottom:26px}.jt-area .jt-hero-badge{margin-bottom:22px}.jt-area .jt-hero .jt-chara{width:clamp(108px,11.5vw,162px)}@media(max-width:640px){.jt-area .jt-hero{min-height:360px}.jt-area .jt-hero-in{padding:32px 14px 36px}.jt-area .jt-hero .jt-chara{width:96px}}/* ---------- レスポンシブ ---------- */
/* ── ヒーロー ── */
@media(max-width:1180px){
  .jt-hero{min-height:600px}.jt-hero-in{padding:64px 18px 78px}.jt-kpi{padding:0 20px}}
@media(max-width:900px){
  .jt-hero{min-height:600px}.jt-hero-in{padding:44px 18px 130px}.jt-hero-body{max-width:none}.jt-hero .jt-chara{left:auto;right:-10px;bottom:0;width:100px;filter:drop-shadow(0 8px 18px rgba(11,58,92,.25))}.jt-eyebrow{margin-bottom:16px;letter-spacing:.10em;font-size:12.5px;padding:8px 16px;gap:6px}.jt-eyebrow::after{inset:3px}.jt-area h1.jt-h1{margin-bottom:18px}.jt-h1-a{font-size:16px}.jt-h1-b{font-size:clamp(36px,10.4vw,50px)}.jt-h1-c{font-size:clamp(20px,5.4vw,26px)}.jt-hero-badge{margin-bottom:20px;font-size:13.5px;padding:9px 16px;gap:7px}.jt-hero-badge b{font-size:22px}.jt-hero-badge small{display:none}.jt-hero-sub{font-size:14px;line-height:1.85;margin-bottom:24px;max-width:none}.jt-hero-sub br{display:none}.jt-kpis{grid-template-columns:1fr 1fr;justify-content:stretch;gap:26px 0;padding:0}.jt-kpi{padding:0 0 0 16px}.jt-kpi:nth-child(odd){padding-left:0;border-left:none}.jt-cta-row{gap:11px}.jt-btn--line,.jt-btn--tel{flex:1 1 100%}.jt-hero .jt-link-more{margin:2px auto 0}}
@media(max-width:860px){
  .jt-areas{grid-template-columns:1fr}.jt-links{grid-template-columns:1fr 1fr}.jt-sec{padding:46px 0}}
@media(max-width:640px){
  .jt-aerial-2{grid-template-columns:1fr}}
@media(max-width:520px){
  .jt-links{grid-template-columns:1fr}.jt-bar{grid-template-columns:92px 1fr 78px;font-size:12px}.jt-btn{width:100%}.jt-answer .jt-q,.jt-answer .jt-a{padding-left:0}.jt-answer .jt-q::before,.jt-answer .jt-a::before{position:static;display:inline-grid;margin-right:8px;vertical-align:-5px}}

/* ============================================================
   スマホ表示の修正（2026-09-17）
   ① 金屏風の折り目が、狭い画面では1本の縦線に見えてしまう
   ② 紺色のデータバーの文字が背景に沈む
   ③ 見出し横のキャラクターが本文に重なる
   ※ここは全区共通。以後に作る区にも自動で適用されます。
   ============================================================ */

/* ① ヒーロー背景の屏風の折り目・パネル境界を、狭い画面では消す
      （viewBox 1600 幅を slice で拡大するため、折り目が巨大な縦線として残るのを防ぐ） */
@media(max-width:1000px){
  .jt-heroart rect[width="1.4"],
  .jt-heroart rect[width="200"]{ display:none !important; }}

/* ② 紺地のデータバー：白＋太字にして沈まないようにする */
.jt-statsbar .jt-bar-pts{ color:#FFFFFF; font-weight:700; }.jt-statsbar .jt-bar-pts li::before{ background:#F2D98F; box-shadow:0 0 0 3px rgba(242,217,143,.28); }.jt-statsbar .jt-kpi dt{ color:#CFE2F0; }.jt-statsbar .jt-kpi small{ color:#B9D0E2; }.jt-statsbar .jt-towns{ color:#B9D0E2; }@media(max-width:640px){.jt-statsbar .jt-bar-pts{ font-size:12.5px; gap:10px 18px; letter-spacing:.01em;
    padding-bottom:18px; margin-bottom:20px; }}/* ③ 見出し横のキャラクター：狭い画面では見出しの上に置いて重なりを解消 */
@media(max-width:820px){
  .jt-sechead{ padding-right:0; }.jt-sechead .jt-chara{
    position:static; display:block; margin:0 auto 6px; width:72px;
    right:auto; left:auto; bottom:auto; top:auto;
    opacity:1; filter:none; }.jt-sechead .jt-lead{ padding-right:0; }}

/* ④ 横はみ出しの保険（2026-09-17）
      表・コード・長いURLなど、幅の広い中身が画面外へ押し出すのを防ぐ。
      表は .jt-tw の中で横スクロールさせ、他は折り返す。 */
.jt-area{ max-width:100%; }.jt-area .jt-wrap{ max-width:100%; box-sizing:border-box; }.jt-area .jt-tw{ max-width:100%; }.jt-area p, .jt-area li, .jt-area dd, .jt-area dt, .jt-area h2, .jt-area h3, .jt-area h4{
  overflow-wrap:anywhere; word-break:normal; }.jt-area img{ max-width:100%; height:auto; }/* ⑤ キャラクターと文字の重なりを全幅で解消（2026-09-17）
      ③は max-width:820px だけを直していたため、821px以上（タブレット横〜PC）で
      .jt-sechead の絶対配置キャラに見出し・本文が潜り込んでいた。
      キャラの占有幅ぶんを padding で常に確保する。 */
@media(min-width:821px){
  .jt-area .jt-sechead{ padding-right:clamp(108px,12.5vw,156px); }.jt-area .jt-sechead .jt-lead{ padding-right:0; }/* 最終CTAのキャラが本文に掛からないよう、左右に逃げ幅を確保
   （キャラは left:12px / right:12px・幅150px なので 170px 空ければ届かない） */
@media(min-width:1081px){
  .jt-area .jt-final h2,
  .jt-area .jt-final p,
  .jt-area .jt-final .jt-lead,
  .jt-area .jt-final .jt-cta-row{ padding-left:172px; padding-right:172px; }}
/* ヒーローのキャラと電話CTAが広い画面で重なるのを防ぐ（実測1707pxで発生）
   ※中央揃えを壊さないよう左右対称に逃がす（片側paddingは見出しが左に寄るためNG）*/
@media(min-width:901px){
  .jt-area .jt-hero-in{ padding-left:clamp(20px,7vw,120px); padding-right:clamp(20px,7vw,120px); }}
/* ==========================================================================
   コンテナクエリ層（2026-09-21）
   いえらぶCLOUDの記事カラムは .blog__article = 幅800px 固定。
   ビューポート幅(vw / @media)で組むと、1707pxのモニタでも中身は800pxしかなく、
   padding や文字サイズが過大になって崩れる。
   そこで .jt-area をコンテナにして、以後は「箱の幅」で組み直す。
   ※この層はファイル末尾に置き、既存のvw基準ルールを上書きする。
   ========================================================================== */
/* ==========================================================================
   コンテナクエリ層（2026-09-21）
   いえらぶCLOUDの記事カラムは .blog__article = 幅800px 固定。
   ビューポート幅(vw / @media)で組むと、1707pxのモニタでも中身は800pxしかなく、
   padding や文字サイズが過大になって崩れる。
   そこで .jt-area をコンテナにして、以後は「箱の幅」で組み直す。
   ※この層はファイル末尾に置き、既存のvw基準ルールを上書きする。
   ========================================================================== */
.jt-area{ container-type:inline-size; container-name:jt; }@container jt (min-width:1px){/* 見出しはコンテナ幅基準 */
  .jt-area .jt-h1-a{ font-size:clamp(13px,2.7cqw,24px); }.jt-area .jt-h1-b{ font-size:clamp(30px,8.6cqw,72px); }.jt-area .jt-h1-c{ font-size:clamp(17px,4.0cqw,34px); }.jt-area .jt-h2  { font-size:clamp(20px,3.4cqw,30px); }/* キャラもコンテナ幅基準（800pxの箱で136px程度） */
  .jt-area .jt-hero .jt-chara{ width:clamp(84px,17cqw,150px); }/* ヒーローは左右対称の細い余白だけ。
     キャラは下端＝CTA行の高さにいるので、上のバッジとは干渉しない。 */
  .jt-area .jt-hero-in{ padding-left:clamp(14px,3cqw,30px); padding-right:clamp(14px,3cqw,30px); }/* バッジは箱が狭いと折れるので、狭い時は詰める */
  .jt-area .jt-hero-badge{ font-size:clamp(11px,1.95cqw,16px); padding:clamp(7px,1.2cqw,11px) clamp(12px,3cqw,26px); gap:clamp(5px,1.1cqw,9px); }.jt-area .jt-hero-badge b{ font-size:clamp(18px,3.5cqw,29px); }.jt-area .jt-hero-badge small{ font-size:clamp(10px,1.6cqw,13px); }}/* 箱が広いときだけ、セクション見出しのキャラ逃げ幅を取る */
@container jt (min-width:640px){
  .jt-area .jt-sechead{ padding-right:clamp(92px,17cqw,150px); }.jt-area .jt-sechead .jt-lead{ padding-right:0; }.jt-area .jt-final h2,
  .jt-area .jt-final p,
  .jt-area .jt-final .jt-lead,
  .jt-area .jt-final .jt-cta-row{ padding-left:clamp(92px,16cqw,150px); padding-right:clamp(92px,16cqw,150px); }}
@container jt (max-width:639px){
  .jt-area .jt-sechead{ padding-right:clamp(72px,20cqw,104px); }.jt-area .jt-sechead .jt-lead{ padding-right:0; }.jt-area .jt-final h2,
  .jt-area .jt-final p,
  .jt-area .jt-final .jt-lead,
  .jt-area .jt-final .jt-cta-row{ padding-left:0; padding-right:0; }}

/* 箱が狭いとき＝スマホ相当。既存の @media(max-width:900px) はビューポート基準で
   効かないため、コンテナ基準で同等の積み上げレイアウトを用意する。 */
@container jt (max-width:700px){
  .jt-area .jt-hero-in{ padding-bottom:clamp(92px,17cqw,132px); }.jt-area .jt-hero .jt-chara{ right:-6px; width:clamp(76px,15cqw,108px); }.jt-area .jt-hero .jt-cta-row{ flex-wrap:wrap; gap:11px; }.jt-area .jt-hero .jt-btn--line,
  .jt-area .jt-hero .jt-btn--tel{ flex:1 1 100%; }.jt-area .jt-hero-sub br{ display:none; }.jt-area .jt-hero-badge small{ display:none; }/* ---- 章見出しのキャラ画像をコンテナ基準に統一 ---- */
/* 旧CSSは .jt-sechead の padding を cqw、キャラ幅を vw で決めていたため、
   ビューポート幅とカラム幅が乖離する環境でキャラが本文に重なっていた。
   （旧ページは全13章に配置しているため影響が大きい） */
@container jt (min-width:640px){
  .jt-area .jt-sechead .jt-chara{ width:clamp(88px,14cqw,132px); right:0; bottom:-6px; opacity:1; }}
@container jt (max-width:639px){
  .jt-area .jt-sechead .jt-chara{ width:clamp(56px,17cqw,76px); right:-4px; bottom:-10px; opacity:.9; }}

/* ================================================================
   是正① 見出しの中央ずれ ＆ 改行の体裁
   .jt-sechead は text-align:center なのに padding-right だけを当てていたため、
   キャラの無い章まで見出しが左へずれていた（片側余白＝中央がずれる）。
   キャラを持つ章だけ左右対称に余白を取り、他は全幅で中央寄せする。
   ================================================================ */
.jt-area .jt-sechead{ padding-left:0; padding-right:0; }@container jt (min-width:640px){.jt-area .jt-sechead:has(> .jt-chara){
    padding-left:clamp(92px,15cqw,140px); padding-right:clamp(92px,15cqw,140px);
  }}@container jt (max-width:639px){.jt-area .jt-sechead:has(> .jt-chara){
    padding-left:clamp(60px,18cqw,88px); padding-right:clamp(60px,18cqw,88px);
  }}/* :has() 非対応ブラウザ向けの保険：左右対称なので中央はずれない */
@supports not selector(:has(*)){
  @container jt (min-width:640px){
    .jt-area .jt-sechead{ padding-left:clamp(92px,15cqw,140px); padding-right:clamp(92px,15cqw,140px); }}
  @container jt (max-width:639px){
    .jt-area .jt-sechead{ padding-left:clamp(60px,18cqw,88px); padding-right:clamp(60px,18cqw,88px); }/* ================================================================
   是正② 文字色のコントラスト
   いえらぶCLOUD 側の共通CSSが li / b に #263238 を直接当てており、
   紺地(#0B2033)の統計バーで文字がほぼ見えなくなっていた（コントラスト比 1.26）。
   継承に頼らず、要素セレクタまで明示して上書きする。
   ================================================================ */
/* 継承を一度リセットし、コンテナ側の指定が必ず効くようにする */
.jt-area .jt-statsbar :is(li,b,strong,span,i,em,small,a,p,dt,dd,div,time){ color:inherit; }.jt-area .jt-statsbar{ color:#fff; }.jt-area .jt-statsbar .jt-bar-pts{ color:#E3EDF5; }/* 13.95:1 */
.jt-area .jt-statsbar .jt-kpi dt{ color:#CFE2F0; }/* 11.9:1 */
.jt-area .jt-statsbar .jt-kpi dd{ color:#fff; }.jt-area .jt-statsbar .jt-kpi dd small,
.jt-area .jt-statsbar .jt-kpi dd i{ color:#C3D8E8; }/* 11.3:1 */
.jt-area .jt-statsbar .jt-towns{ color:#C3D8E8; }/* 薄すぎた補助テキスト（#78909C = 3.2:1）を AA 相当まで濃くする */
.jt-area{ --jt-sub:#546E7A; }/* 5.2:1 */
.jt-area .jt-cap, .jt-area .jt-cap a{ color:#546E7A; }.jt-area .jt-h2 .jt-h2num{ color:#BE5200; }/* 4.6:1 */


/* ================================================================
   仲介手数料の仕組み比較イラスト（mechanism_diagram.py）
   「一般的な不動産会社」と「家タダ」を2枚のSVGで並べて視覚的に比較する。
   1枚のSVGを丸ごと縮小するのではなく、パネル単位で別々のSVGにしてから
   グリッドを1カラムへ積み替える方式にしているため、スマホでも文字が
   縮小されすぎず読める（.jt-charaの壊れ画像で起きた事故と同じ轍を踏まない
   よう、幅・高さは viewBox のアスペクト比にまかせ、固定pxを使わない）。
   ================================================================ */
.jt-mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:4px 0 8px}.jt-mech-svg{width:100%;height:auto;display:block;overflow:visible}@media(max-width:640px){.jt-mech-grid{grid-template-columns:1fr;gap:16px;max-width:360px;margin-left:auto;margin-right:auto}}

/* End the original stylesheet blocks before the additional article rules. */
}
}
}
}

/* Additional article styles, shared by PC and mobile. */
.jt-area h4.jt-h4 { font-family: var(--jt-mincho); font-size: 18px; font-weight: 700; margin: 22px 0px 8px; color: var(--jt-navy); }.jt-area .jt-arealinks { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--jt-line); }.jt-area .jt-arealinks h4.jt-h4 { margin: 0px 0px 10px; }.jt-area .jt-arealinks h4.jt-h4 + p.jt-arow { margin-top: 0px; }.jt-area .jt-arow { display: flex; flex-wrap: wrap; gap: 7px; margin: 0px 0px 18px; padding: 0px; }.jt-area .jt-arow > a { display: inline-block; padding: 5px 12px; border: 1px solid var(--jt-line); border-radius: 999px; background: rgb(255, 255, 255); color: var(--jt-navy); text-decoration: none; font-size: 14px; line-height: 1.5; white-space: nowrap; }.jt-area .jt-arow > a:hover { border-color: var(--jt-navy); background: var(--jt-bg2); }.jt-area .jt-arow > b { display: inline-block; padding: 5px 12px; border: 1px solid var(--jt-navy); border-radius: 999px; background: var(--jt-navy); color: rgb(255, 255, 255); font-size: 14px; line-height: 1.5; font-weight: 700; white-space: nowrap; }@container jt (max-width: 520px) {.jt-area .jt-arow > a, .jt-area .jt-arow > b { font-size: 13px; padding: 4px 10px; }}.jt-area .jt-h2, .jt-area .jt-h1-b, .jt-area .jt-h1-c, .jt-area .jt-sechead .jt-lead, .jt-area h3.jt-h3, .jt-area h4.jt-h4 { text-wrap: balance; word-break: auto-phrase; line-break: strict; }.jt-area .jt-h2, .jt-area .jt-h1-b, .jt-area .jt-h1-c, .jt-area .jt-sechead .jt-lead, .jt-area h3.jt-h3, .jt-area h4.jt-h4 { text-wrap: balance; word-break: auto-phrase; line-break: strict; }