/*
Theme Name: Re:ESTATE
Theme URI: https://example.com/
Author: Ocean estate
Description: 空き家売却の無料相談LP型オリジナルテーマ
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: reestate
*/

/* =========================================================
   0. 共通ベース
   ========================================================= */
:root{
  --base:#fff; --bg-soft:#f3f4f7; --ink:#1d2433; --muted:#667085; --line:#dde1ea;
  --navy:#14284b; --navy-deep:#0c1830; --gold:#c8a45a; --cream:#fff8e8;
  --accent:#e8751a; --accent-dark:#c85f0b; --pink:#fde8ee;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --w:1040px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--base);line-height:1.8;font-size:16px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.45;margin:0}
.sec{padding:64px 0}
.sec-title{font-family:var(--serif);font-size:clamp(22px,4vw,32px);text-align:center;margin-bottom:36px}
/* 見出し直上の英語表記（金のグラデーション文字＋左右の細線） */
.sec-en{--en-text:linear-gradient(100deg,#b98f45,#f6e3ae 50%,#b98f45);--en-line:#c8a45a;display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 2px;font-family:"Cormorant Garamond","Times New Roman",serif;font-size:clamp(14px,1.8vw,18px);font-weight:600;line-height:1.2;letter-spacing:.2em;text-transform:uppercase}
.sec-en span{background:var(--en-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-en::before,.sec-en::after{content:"";flex:0 1 44px;min-width:12px;height:1px;background:linear-gradient(to right,transparent,var(--en-line))}
.sec-en::after{background:linear-gradient(to left,transparent,var(--en-line))}
.promise .sec-en,#form .sec-en{--en-text:linear-gradient(100deg,#7a4a10,#c07a1e 50%,#7a4a10);--en-line:#a86a1a}
@media(max-width:560px){
  .sec-en{gap:8px;letter-spacing:.12em}
  .sec-en span{white-space:nowrap}
  .sec-en::before,.sec-en::after{min-width:0}
}
.dark{background:var(--navy);color:#fff}
.soft{background:var(--bg-soft)}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;border:0;border-radius:999px;padding:16px 36px;cursor:pointer;font:inherit;font-weight:700}
.btn:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ph{background:linear-gradient(135deg,#cfd6e4,#e9edf5);color:#8a93a6;font-size:12px}
.ph img{width:100%;height:100%;object-fit:cover}
.screen-reader-text{position:absolute;left:-9999px}

/* =========================================================
   1. ヘッダー
   ========================================================= */
.hd{background:var(--base);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.admin-bar .hd{top:32px}
@media(max-width:782px){.admin-bar .hd{top:46px}}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.logo{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--navy);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo img{height:36px;width:auto}
.hd-right{display:flex;align-items:center;gap:10px}
/* 電話バナーと「無料で相談する」バナーは同一サイズ */
.hd-tel,.hd-cta{box-sizing:border-box;width:250px;height:54px;border-radius:10px;display:flex;align-items:center;justify-content:flex-start;text-decoration:none;line-height:1.25}
/* アイコンの左位置は2つのバナーで共通。文字は残りの幅の中央に置く */
.hd-tel>span,.hd-cta>span{flex:1;text-align:center}
.hd-tel{gap:16px;padding:0 10px 0 16px;background:rgba(255,255,255,.57);border:2px solid #01a27b;color:#01a27b;font-weight:900;font-size:22px}
.hd-tel small{display:block;font-size:10px;font-weight:700;color:var(--navy);line-height:1.2;text-align:center}
.hd-cta{gap:16px;padding:0 10px 0 16px;background:rgba(255,255,255,.57);border:2px solid var(--accent);color:var(--accent-dark);font-weight:900;font-size:18px}
.hd-cta:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.hd-cta small{display:block;font-size:10px;font-weight:700;color:var(--navy);line-height:1.2;text-align:center}
.hd-cta:hover small{color:#fff}
.hd-icon{width:40px;height:40px;flex:none}
@media(max-width:760px){.hd-icon{width:28px;height:28px}.hd-tel,.hd-cta{gap:8px}}
@media(max-width:560px){
  .hd .wrap{gap:6px}.hd-right{gap:6px}
  .hd-tel,.hd-cta{width:108px;height:44px;padding:0 4px;justify-content:center}
  .hd-tel{font-size:13px}.hd-tel small,.hd-tel .hd-icon{display:none}
  .hd-cta{gap:3px;font-size:11px}.hd-cta small{display:none}
  .hd-cta .hd-icon{width:16px;height:16px}
  .logo img{height:26px}
}

/* =========================================================
   2. メインビジュアル
   背景画像は functions.php が --hero-bg-image（images/top.png）を出力します
   ========================================================= */
.hero{background:var(--hero-bg-image,none) center/cover no-repeat,#cfd7e6;color:#4c4436;position:relative}
.hero .wrap{
  padding: 48px 20px 0px; /* ★「上 48px / 左右 20px / 下 18px」に変更（下を30px減らしました） */
  min-height:300px
}
/* 見出し：#0097b2・縁取り6px（見た目は約3px）・文字小さめ・字間を広げて横幅にゆとり */
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(22px,4vw,36px);letter-spacing:.1em;line-height:1.4;color:#0097b2;-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 3px 6px rgba(12,24,48,.18)}
/* 説明文：この<p>だけを囲む角丸の白背景（rgba 0.79）。Noto Serif JP。画面幅1240px以上で1行 */
.hero p{display:block;width:fit-content;max-width:calc(33em + 56px);margin:96px 0 0;font-family:var(--serif);padding:8px 28px;background:rgba(255,255,255,.79);border-radius:18px;font-weight:700;font-size:clamp(14px,2.2vw,18px);line-height:1.5;letter-spacing:.04em;color:#4c4436;-webkit-text-stroke:2px #e3e3e3;paint-order:stroke fill;text-shadow:none}
@supports not (paint-order:stroke fill){
  .hero h1{-webkit-text-stroke:0;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 -3px 0 #fff,0 3px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff,0 4px 6px rgba(12,24,48,.18)}
  .hero p{-webkit-text-stroke:0;text-shadow:-1px -1px 0 #e3e3e3,1px -1px 0 #e3e3e3,-1px 1px 0 #e3e3e3,1px 1px 0 #e3e3e3}
}
@media(max-width:700px){.hero p{max-width:100%;padding:8px 16px;border-radius:14px}}
/* PC：メインビジュアル内だけ横幅を広げ、説明文を1行に収める */
@media(min-width:1240px){
  .hero .wrap{max-width:1240px}
  .hero p{max-width:none;margin-top:130px;white-space:nowrap}
}
/* ヒーローバー：文字大きめ・上→下の縦グラデーション #000000 → #737373 */
.hero-bar{
  position:relative;
  z-index:1;
  background:linear-gradient(to bottom,#000000,#737373);
  color:#fff;
  text-align:center;
  font-family:var(--serif);
  font-weight:700; /* ★太字を追加して目立たせました */
  font-size:clamp(24px, 4.5vw, 35px); /* ★文字サイズを大きく調整しました */
  line-height:1.4;
  padding:8px 20px
}

/* 3. 導入文＋staff1.png（画像の下端が次の帯の直上に接する） */
.sec-lead{padding:0;position:relative}
.lead{
  display:grid;
  grid-template-columns:1fr 320px; 
  gap: 10px; /* ★隙間（gap）を 28px から 10px に狭くして、文字を画像に近づけました */
  align-items:end;
}
.lead p{margin:0;align-self:center;padding:48px 0;font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.6vw,21px);line-height:2;color:#4c4436}
.lead .photo{align-self:end;margin-top:-46px;position:relative;z-index:2}
.lead .photo img{width:100%;height:auto}
@media(max-width:720px){
  .lead{grid-template-columns:1fr;gap:0}
  .lead p{padding:28px 0 16px}
  .lead .photo{width:260px;margin:0 auto}
}

/* 4. お悩み（セクション余白を詰め、カードを大きく） */
.sec-worry{padding:28px 0 36px}
.sec-worry .wrap{max-width:1100px}
.sec-worry .sec-title{margin-bottom:16px}
.worry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.worry{background:var(--navy-deep);border:1px solid var(--gold);border-radius:6px}
.worry .ph{aspect-ratio:4/3;overflow:hidden;border-radius:5px 5px 0 0}
.worry:nth-child(6) .ph img{object-position:right center} /* worry6.jpg は横長で、人物が右半分にあるため右端を見せる */
.worry b{position:relative;display:block;padding:12px 14px 0 42px;font-size:17px;line-height:1.5;color:#fff}
.worry p{margin:0;padding:6px 14px 16px 42px;color:#c9d2e6;font-size:15px;line-height:1.7}
/* 相談員アイコン：カードの左辺からはみ出して表示 */
.worry-point{position:absolute;left:-18px;top:8px;width:52px;height:52px;background:#fff;border-radius:50%} /* 円の内側が透過のため白を敷く */
@media(max-width:700px){
  .worry-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .worry b{font-size:15px;padding-left:28px}
  .worry p{font-size:13px;padding-left:28px}
  .worry-point{left:-12px;width:36px;height:36px}
}

/* 5. リスク（背景 #4c4436・見出しに #a59e90 の下線） */
.risk{background:#4c4436;color:#fff;padding:28px 0}
.risk .sec-title{display:table;margin:0 auto 32px;padding-bottom:12px;border-bottom:2px solid #a59e90}
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.risk-box{border:1px solid #7a7262;background:rgba(0,0,0,.22);padding:18px 20px;border-radius:6px}
.risk-box h3{color:var(--gold);font-size:19px;margin-bottom:8px}
.risk-box ol{margin:0;padding-left:0;list-style:none;font-size:17px}
.risk-box li{margin:4px 0}
@media(max-width:720px){.risk-grid{grid-template-columns:1fr}}

/* =========================================================
   6. お約束（タイトルごと暖色のブロック。写真を白いカードに重ねる）
   ========================================================= */
.promise{position:relative;overflow:hidden;padding:36px 0 0;background:linear-gradient(135deg,#ffefd6 0%,#fdd7a4 100%)}
/* 背景の大きな円の飾り */
.promise::before,.promise::after{content:"";position:absolute;border-radius:50%}
.promise::before{right:-120px;top:-160px;width:460px;height:460px;background:rgba(255,255,255,.35)}
.promise::after{left:-100px;bottom:-140px;width:320px;height:320px;background:rgba(232,117,26,.12)}
.promise .wrap{position:relative;z-index:1;max-width:1240px}
.promise .sec-title{margin-bottom:22px}
/* 手書き風の下線（ペンで往復したような2本線のSVG） */
.promise-em{display:inline-block;padding-bottom:.18em;color:#e9346e;font-size:1.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e9346e' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.2' d='M5 11C42 6 78 14 118 9S196 5 232 9s44 2 63 0'/%3E%3Cpath stroke-width='2.2' opacity='.75' d='M295 9c-38 7-82 5-124 8S76 15 22 20'/%3E%3C/g%3E%3C/svg%3E") left bottom/100% .36em no-repeat}

/* 写真は左右へはみ出させ、カードの手前に重ねる（左のパソコンは切れてもよい） */
.promise-box{display:grid;grid-template-columns:420px 1fr;align-items:end}
.promise-box .photo{position:relative;z-index:2;margin:0 -90px;pointer-events:none}
.promise-box .photo img{
  width:100%;
  height:auto;
  /* 机の左右の端をフェードさせ、切れ目を見せない */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 80%,transparent 100%);
}

/* 白いカード（左側は写真の後ろに潜り込む） */
.promise-list{position:relative;z-index:1;margin:0 0 40px -130px;padding:22px 28px 22px 110px;background:#fff;border-radius:20px;box-shadow:0 14px 34px rgba(200,95,11,.2)}
.promise-list div{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed #f0d9b8;font-size:clamp(17px,1.55vw,20px);font-weight:500;line-height:1.6}
.promise-list div:last-child{border-bottom:0}
.promise-list b{display:flex;align-items:baseline;justify-content:center;gap:2px;padding:2px 0;background:var(--accent-dark);color:#fff;border-radius:999px;font-size:13px;line-height:1.5}
.promise-list b span{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.2}

/* タブレット・スマホ：写真を上に置き、カードを写真の下端に重ねる */
@media(max-width:1000px){
  .promise-box{grid-template-columns:1fr}
  .promise-box .photo{z-index:0;width:min(100%,460px);margin:0 auto -28px}
  .promise-list{margin:0 0 36px;padding:14px 20px}
}
@media(max-width:560px){
  .promise-list div{grid-template-columns:70px 1fr;gap:10px;font-size:15px}
  .promise-list b{font-size:11px}.promise-list b span{font-size:17px}
}

/* =========================================================
   7. 無料の理由（数字＋画像を上下・左右ともセンターに）
   ========================================================= */
.sec-reason{padding:28px 0 40px}
.sec-reason .sec-title{margin-bottom:16px}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reason{background:var(--cream);color:var(--ink);border:2px solid var(--gold);border-radius:8px;padding:22px}

/* ★画像と数字（黄色の1,2,3）を上下左右ともセンター（中央）に揃える設定 */
.reason-head{
  display:flex;
  align-items:center;      /* 上下の中央に揃えます */
  justify-content:center;  /* 左右の中央に揃えます */
  gap:16px;
  margin-bottom:10px;
}
.reason-head img{
  width:88px;
  height:88px;
  object-fit:contain;
  flex:none;
}
.reason .n{
  display:flex;
  align-items:center;      /* 数字自体の上下中央を揃えます */
  justify-content:center;  /* 数字自体の左右中央を揃えます */
  font-family:var(--serif);
  font-weight: 900;
  font-size:56px;
  color:var(--gold);
  line-height:1;
  flex:none;
}
.reason h3{font-size:18px;margin:8px 0;color:var(--navy)}
.reason p{margin:0;font-size:14px}
@media(max-width:820px){.reason-grid{grid-template-columns:1fr}}


/* 8. 売却事例カード */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--base);border-top:4px solid var(--gold);border-radius:10px;box-shadow:0 4px 16px rgba(20,40,75,.12);color:var(--ink);text-decoration:none;transition:transform .2s}
.case:hover{transform:translateY(-3px)}
.case-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.case-tag{padding:2px 10px;background:var(--navy);border-radius:999px;color:#fff;font-size:12px;font-weight:700}
.case-area{color:var(--muted);font-size:13px}
.case-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--navy);font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.5}
.case-text{color:var(--muted);font-size:14px;line-height:1.7}
.case-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.case-price{color:var(--accent-dark);font-size:14px;font-weight:700;white-space:nowrap}
.case-price small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.case-price b{font-family:var(--serif);font-size:26px;line-height:1.2}
.case-more{margin-left:auto;color:var(--navy);font-size:13px;font-weight:700;white-space:nowrap}
.more{text-align:center;margin-top:32px}
@media(max-width:900px){.case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.case-grid{grid-template-columns:1fr}}

/* トップの売却事例（右から左へ流れるカード） */
/* 前後のセクションとの境目は、金の線が付いたゆるい弧にする */
.sec-reason,.sec-case{--arc:60px;border-radius:0 0 50% 50%/0 0 var(--arc) var(--arc);box-shadow:0 3px 0 var(--gold)}
.sec-reason{position:relative;z-index:2;padding-bottom:calc(40px + var(--arc) * .6)}
.sec-case{
  position:relative;
  z-index:1;
  overflow:hidden;
  margin-top:calc(var(--arc) * -1);
  padding:calc(56px + var(--arc)) 0 calc(56px + var(--arc) * .6);
  background:
    radial-gradient(ellipse 55% 80% at 88% 10%,rgba(200,164,90,.2),transparent 70%),
    radial-gradient(ellipse 50% 70% at 8% 95%,rgba(0,151,178,.22),transparent 70%),
    linear-gradient(160deg,#0f2140,var(--navy-deep));
  color:#fff;
}
/* 背景の円の飾り */
.sec-case::before,.sec-case::after{content:"";position:absolute;border:1px solid rgba(200,164,90,.35);border-radius:50%;pointer-events:none}
.sec-case::before{top:-40px;right:-110px;width:440px;height:440px}
.sec-case::after{bottom:-150px;left:-90px;width:340px;height:340px}
.sec-case>*{position:relative;z-index:1}
.sec-case .wrap{text-align:center}
.sec-case .sec-title{margin-bottom:12px}
.case-lead{margin:0 0 32px;font-size:15px}
.case-empty{text-align:center}
.case-marquee{overflow-x:auto}
.case-track{display:flex;gap:20px;width:max-content;padding:6px 20px 14px}
.case-track .case{flex:0 0 300px}
.case-marquee.is-moving{overflow:hidden}
.is-moving .case-track{animation:case-scroll var(--case-time) linear infinite}
.is-moving:hover .case-track,.is-moving:focus-within .case-track{animation-play-state:paused}
@keyframes case-scroll{to{transform:translateX(calc(var(--case-shift) * -1))}}
.sec-case .btn.ghost{border-color:#fff;color:#fff}
.sec-case .btn.ghost:hover{background:#fff;color:var(--navy)}
@media(max-width:560px){
  .sec-reason,.sec-case{--arc:28px}
  .sec-case::before{width:260px;height:260px;right:-90px}
  .sec-case::after{width:220px;height:220px;left:-90px;bottom:-100px}
  .case-lead{margin-bottom:24px;font-size:14px}
  .case-track .case{flex-basis:270px}
}

/* 9. 相談フォーム（Contact Form 7 のクラスにも対応） */
#form{padding-top:48px;scroll-margin-top:80px}
#form .sec-title{margin-bottom:20px}
.tel-box{background:rgba(0,74,173,.15);border-radius:16px;padding:20px;text-align:center;max-width:960px;margin:0 auto 32px}
.tel-box small{display:block;font-weight:700;font-size:clamp(17px,2.2vw,24px);color:var(--navy);margin-bottom:4px}
.tel-box a{font-size:clamp(34px,9vw,88px);font-weight:900;color:#01a27b;text-decoration:none;line-height:1.2;white-space:nowrap}
.tel-box span{display:block;font-weight:700;font-size:14px}
@media(max-width:480px){.tel-box a{font-size:8vw}}
.form,.wpcf7-form{max-width:100%;margin:0 auto}
/* フォームを囲む細い枠線（横幅を拡大） */
.form-box{max-width:960px;margin:0 auto;border:1px solid #b9c0d0;border-radius:12px;padding:28px 40px;background:#fff}
@media(max-width:640px){.form-box{padding:16px 14px}}
.fr{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;padding:12px 0;align-items:start;border-bottom:1px dashed var(--line)}
.fr>label,.fr>.lb{font-weight:700;font-size:14px;padding-top:10px}
.req{color:#d6336c}
.fr input[type=text],.fr input[type=email],.fr input[type=tel],.fr input[type=date],.fr select,.fr textarea{width:100%;max-width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1px solid #b9c0d0;border-radius:6px;background:#eef1f7;color:var(--ink)}
.fr textarea{height:120px;min-height:120px;resize:vertical}
/* iPhoneで入力欄が枠からはみ出して横に揺れるのを防ぐ（入力欄は16px未満だと自動ズームされる） */
.fr>*,.sub>*,.sub-row>*{min-width:0}
.fr input[type=date]{-webkit-appearance:none;appearance:none;min-height:48px}
.fr input[type=date]::-webkit-date-and-time-value{text-align:left}
.fr input:focus,.fr select:focus,.fr textarea:focus{background:#fff;border-color:var(--navy);outline:2px solid var(--navy)}
.fr .wpcf7-form-control-wrap{display:block;width:100%}
.sub{display:grid;gap:10px}
.zip{display:grid;grid-template-columns:1fr auto;gap:10px}
.zip button{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:0 18px;font:inherit;font-size:14px;cursor:pointer}
.sub-row{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:center;font-size:13px}
.checks label,.checks .wpcf7-list-item{display:block;font-size:15px;padding:4px 0;cursor:pointer;margin:0}
.checks input{margin-right:8px;width:18px;height:18px;vertical-align:-3px}
.privacy{text-align:center;font-size:15px;margin:22px 0 14px}
.privacy a{text-decoration:underline}
.privacy .wpcf7-list-item{margin:0}
.privacy label{cursor:pointer}
.privacy input{width:20px;height:20px;margin:0 8px 0 0;vertical-align:-4px}
.wpcf7-submit:disabled{opacity:.5;cursor:not-allowed}
.submit,.wpcf7-submit{display:block;width:100%;max-width:760px;margin:0 auto;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:18px;font:inherit;font-weight:700;font-size:18px;cursor:pointer}
.submit:hover,.wpcf7-submit:hover{background:var(--navy-deep)}
.wpcf7-not-valid-tip{color:#d6336c;font-size:13px}
.wpcf7 form .wpcf7-response-output{border-radius:6px;margin:20px auto 0;max-width:760px}
/* PC：項目名とカレンダーアイコンを大きくする */
@media(min-width:641px){
  .fr>label,.fr>.lb,.contact-page .fr>label,.contact-page .fr>.lb{font-size:18px}
  .sub-row{font-size:15px}
  .fr input[type=date]::-webkit-calendar-picker-indicator{width:28px;height:28px;cursor:pointer}
}
@media(max-width:640px){
  .fr{grid-template-columns:1fr;gap:4px}
  .fr>label,.fr>.lb{padding-top:0}
  .sub-row{grid-template-columns:1fr}
}

/* 10. フッター */
.ft{background:var(--navy);color:#fff;padding:36px 0 22px;font-size:13px}
.ft-in{display:grid;grid-template-columns:1fr 1.4fr auto;gap:28px;align-items:start}
.ft .logo{color:#fff;font-size:34px}
.ft p{margin:4px 0}
.ft ul{list-style:none;margin:0;padding:0;text-align:right}
.ft li a{text-decoration:none;display:inline-block;padding:3px 0}
.ft li a:hover{text-decoration:underline}
.copy{text-align:center;margin-top:24px;color:#aab4cc;font-size:12px}
@media(max-width:720px){
  .ft{padding-top:24px}
  .ft-in{grid-template-columns:1fr;gap:14px;text-align:center}
  .ft-brand{display:flex;align-items:center;justify-content:center;gap:12px}
  .ft-brand p{margin:0;font-size:12px}
  .ft ul{display:grid;grid-template-columns:1fr 1fr;order:2;padding:6px 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);text-align:center}
  .ft li a{display:block;padding:8px 0}
  .ft-co{order:3;font-size:12px;line-height:1.7}
  .ft-co p{margin:0}
  .ft-co br:first-of-type{display:none}
  .copy{margin-top:12px;font-size:11px}
}

/* =========================================================
   下層ページ共通（一覧・詳細・固定ページ・404）
   ========================================================= */
.p-head{background:var(--navy);color:#fff;padding:20px 16px;text-align:center}
.p-head h1{font-family:var(--serif);font-size:clamp(24px,4.5vw,34px)}
.crumb{max-width:var(--w);margin:0 auto;padding:8px 20px;color:var(--muted);font-size:12px}
.crumb:has(+.cd-page),.crumb:has(+.contact-page){max-width:1120px}
.crumb a{color:var(--navy);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ページ送り */
.pager{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pager .page-numbers{min-width:40px;height:40px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:#fff}
.pager a.page-numbers:hover{border-color:var(--navy)}
.pager .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 事例詳細・投稿本文 */
.article{max-width:760px;margin:0 auto;background:#fff}
.article .meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:10px}
.tag{display:inline-block;background:var(--navy);color:#fff;font-size:12px;border-radius:4px;padding:1px 8px}
.article h1{font-family:var(--serif);font-size:clamp(22px,4vw,30px);color:var(--navy);margin-bottom:20px}
.article .eye{aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin-bottom:28px}
.article .eye img{width:100%;height:100%;object-fit:cover}
.entry-content h2{font-size:21px;color:var(--navy);border-left:5px solid var(--gold);padding-left:12px;margin:40px 0 14px}
.entry-content h3{font-size:17px;margin:28px 0 8px}
.entry-content p{margin:0 0 1.2em}
.entry-content ul,.entry-content ol{margin:0 0 1.2em;padding-left:1.4em}
.entry-content img{border-radius:6px;margin:1em 0}
.entry-content a{color:var(--navy);text-decoration:underline}
.entry-content table,.spec{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.entry-content th,.entry-content td,.spec th,.spec td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.entry-content th,.spec th{background:var(--bg-soft);width:30%}
.cta-inline{background:var(--cream);border:2px solid var(--gold);border-radius:12px;padding:24px;text-align:center;margin:40px 0}
.cta-inline p{margin:0 0 12px}
.nav-pn{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-top:32px}
.nav-pn a{color:var(--navy)}

/* 固定ページ（企業概要・プライバシーポリシーなど） */
.fixed-layout{display:grid;grid-template-columns:1fr 240px;gap:40px;align-items:start}
.fixed-layout.single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.fixed-main h2{font-size:21px;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:6px;margin:36px 0 14px;border-left:0;padding-left:0}
.fixed-main h2:first-child{margin-top:0}
.fixed-main table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.2em}
.fixed-main th,.fixed-main td{border:0;border-bottom:1px solid var(--line);padding:14px 10px;text-align:left;vertical-align:top;background:none}
.fixed-main th{width:28%;color:var(--navy)}
.side{background:var(--bg-soft);border-radius:8px;padding:18px;font-size:14px;position:sticky;top:84px}
.side b{display:block;margin-bottom:8px;color:var(--navy)}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:block;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none}
.side a:hover{color:var(--accent)}
@media(max-width:820px){.fixed-layout{grid-template-columns:1fr}.side{position:static;order:2}}

/* 公開前に差し替える箇所の目印 */
.todo{background:#fff3b0;padding:0 .3em;border-radius:3px}

/* 企業概要：地図エリア（埋め込みの <iframe> にも対応） */
.map-box{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);border:1px dashed #b9c0d0;border-radius:8px;color:var(--muted);font-size:14px;text-align:center}
.map-box iframe{width:100%;height:100%;border:0}
.map-address{margin-top:10px;font-size:14px}

/* 支援相談フォームページ */
.thanks{text-align:center}
.thanks .sec-title{margin-bottom:16px}
.contact-page{background:var(--bg-soft)}
.contact-page .wrap{max-width:1120px}
.contact-intro{margin-bottom:28px;text-align:center}
.contact-lead{margin:0 0 14px;font-weight:700;font-size:clamp(17px,2.4vw,20px);line-height:1.6}
.contact-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:0;padding:0;list-style:none}
.contact-points li{padding:4px 16px;background:#fff;border:1px solid var(--accent);border-radius:999px;color:var(--accent-dark);font-weight:700;font-size:14px}
.contact-points li::before{content:"✓";margin-right:6px}
.contact-call{display:none;margin:14px 0 0;font-size:14px}
.contact-call a{color:#01a27b;font-weight:900;font-size:18px;white-space:nowrap}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.contact-page .form-box{max-width:none;margin:0;padding:12px 36px 36px;border:0;box-shadow:0 2px 14px rgba(20,40,75,.08)}
.contact-page .thanks{max-width:720px;margin:0 auto;padding:40px 24px}
.contact-side{display:grid;gap:16px;position:sticky;top:20px}
.contact-card{padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(20,40,75,.08);font-size:14px}
.contact-card>b{display:block;margin-bottom:8px;color:var(--navy);font-size:16px}
.contact-tel{text-align:center}
.contact-tel small{display:block;font-size:15px;font-weight:700}
.contact-tel a{display:flex;align-items:center;justify-content:center;gap:6px;color:#01a27b;font-weight:900;font-size:27px;line-height:1.4;text-decoration:none;white-space:nowrap}
.contact-tel img{width:28px;height:28px}
.contact-tel span{display:block;font-weight:700;font-size:13px}
.contact-tel p{margin:8px 0 0;color:var(--muted);font-size:12px}
.contact-flow{margin:0;padding:0;list-style:none;counter-reset:flow}
.contact-flow li{position:relative;padding:6px 0 6px 38px;counter-increment:flow;line-height:1.5}
.contact-flow li::before{content:counter(flow);position:absolute;left:0;top:5px;display:grid;place-items:center;width:26px;height:26px;background:var(--accent);border-radius:50%;color:#fff;font-weight:700;font-size:13px}
/* 入力欄：見出しを上に置き、タップしやすい大きさにする */
.contact-page .fr{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}
.contact-page .fr>label,.contact-page .fr>.lb{display:flex;align-items:center;gap:8px;padding:0;font-size:16px}
.contact-page .req{padding:1px 8px;background:#d6336c;border-radius:4px;color:#fff;font-size:0}
.contact-page .req::after{content:"必須";font-size:12px}
.contact-page .fr>label:not(:has(.req))::after,.contact-page .fr>.lb::after{content:"任意";padding:1px 8px;background:#e6e9f0;border-radius:4px;color:var(--muted);font-weight:700;font-size:12px}
.contact-page .fr :is(input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea){min-height:52px;padding:12px 14px;background:#fff;border:1.5px solid #b9c0d0;border-radius:8px}
.contact-page .fr textarea{min-height:120px;height:120px}
.contact-page .fr input:focus,.contact-page .fr select:focus,.contact-page .fr textarea:focus{border-color:var(--accent);outline:3px solid rgba(232,117,26,.25)}
.contact-page .fr .wpcf7-not-valid{background:#fff5f8;border-color:#d6336c}
.contact-page .sub{gap:12px}
.contact-page .sub-row{grid-template-columns:84px minmax(0,1fr);font-size:14px}
.contact-page .checks .wpcf7-checkbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contact-page .checks .wpcf7-list-item{padding:0}
.contact-page .checks label{display:flex;align-items:center;min-height:52px;padding:8px 12px;border:1.5px solid #b9c0d0;border-radius:8px}
.contact-page .checks label:has(input:checked){background:#fff4e8;border-color:var(--accent);font-weight:700}
.contact-page .privacy{margin:24px 0 16px}
.contact-page .wpcf7-submit{max-width:none;background:var(--accent);padding:20px;font-size:20px}
.contact-page .wpcf7-submit:hover{background:var(--accent-dark)}
@media(max-width:900px){
  .contact-layout{grid-template-columns:minmax(0,1fr)}
  .contact-side{position:static}
  .contact-call{display:block}
}
@media(max-width:640px){
  .contact-page{padding:32px 0}
  .contact-page .wrap{padding:0 12px}
  .contact-page .form-box{padding:4px 16px 24px}
  .contact-page .sub-row{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* WordPress標準クラス */
.alignleft{float:left;margin:0 1em 1em 0}
.alignright{float:right;margin:0 0 1em 1em}
.aligncenter{display:block;margin:1em auto}
.wp-caption-text{font-size:12px;color:var(--muted)}

/* ==========================================================================
   「なぜ完全無料か」セクションの最適化
   ========================================================================== */

/* 1. 「1, 2, 3」の数字を非表示にする */
.sec-reason .reason-head .n {
    display: none !important;
}

/* 2. 各理由ブロック内の要素をすべて「上下左右中央揃え」にする */
.sec-reason .reason {
    display: flex;
    flex-direction: column;   /* 上から「画像 → H3 → P」の順に縦並びにする */
    align-items: center;      /* 【左右中央揃え】すべての要素の横軸の中心を揃える */
    justify-content: flex-start; /* 文章量が違ってもタイトルの高さがそろうよう、上から並べる */
    text-align: center;       /* テキスト自体もすべて中央寄せにする */
}

/* 3. 画像を囲むヘッダー部分の中央寄せと余白調整 */
.sec-reason .reason-head {
    display: flex;
    justify-content: center;  /* 画像を確実に水平中央へ */
    align-items: center;      /* 画像を確実に垂直中央へ */
    margin-bottom: 15px;      /* 画像と下のH3（【理由1】など）の間の隙間 */
    width: 100%;              /* 横幅いっぱいに広げて中央配置を安定させる */
}

/* 画像自体のサイズや表示の安定化 */
.sec-reason .reason-head img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* H3（タイトル）とP（説明文）の余白微調整 */
.sec-reason .reason h3 {
    margin-top: 0;
    margin-bottom: 10px;      /* H3と説明文の間の隙間 */
}
.sec-reason .reason p {
    margin-top: 0;
    margin-bottom: 0;         /* 一番下の余白をリセット */
    max-width: 90%;           /* スマホ等で文字が端に寄りすぎないようにガード */
}

/* ==========================================================================
   ヘッダー透明化（トップページのみ、メインビジュアルの上に重ねる）
   ========================================================================== */

/* 1. 全ページ共通：スクロール追従を解除し、背景を完全に透過する */
header.hd {
    position: static !important;   /* 強制的な固定を解除し、自然な一番上に配置 */
    background-color: transparent !important; /* 透過率100% */
    box-shadow: none !important;   /* 不要な影をカット */
    margin: 0 !important;          /* 外側の余白を完全にゼロにして上端に密着させる */
    padding-top: 5px !important;   /* 内側の上の余白 */
    padding-bottom: 5px !important;/* 内側の下の余白 */
}

/* 2. トップページだけ、ヘッダーをメインビジュアルの上に重ねて画像を透かす
      （下層ページは濃紺の見出し帯と重なるため、通常の配置のまま） */
body.home header.hd {
    position: absolute !important;
    left: 0;
    right: 0;
    border-bottom: 0; /* 画像の上に線だけ残らないようにする */
}

/* 3. 重ねたヘッダーの高さ（約67px）の分だけ、見出しを下げる */
.hero {
    padding-top: 68px;
}

/* ==========================================================================
   スマホ用：ハンバーガーメニューと下部固定バナー（768px以下で表示）
   ========================================================================== */
.hd-menu,.sp-nav,.sp-bar{display:none}

@media(max-width:768px){
  header.hd{position:relative!important;z-index:30}
  body.home header.hd{position:absolute!important}
  .hd-right{display:none}

  /* ハンバーガーアイコン（開くと×に変わる） */
  .hd-menu{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;background:rgba(255,255,255,.75);border:2px solid var(--navy);border-radius:8px;cursor:pointer}
  .hd-menu span,.hd-menu span::before,.hd-menu span::after{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,background-color .2s}
  .hd-menu span{position:relative}
  .hd-menu span::before,.hd-menu span::after{content:"";position:absolute;left:0}
  .hd-menu span::before{top:-7px}
  .hd-menu span::after{top:7px}
  .hd-menu[aria-expanded=true] span{background:transparent}
  .hd-menu[aria-expanded=true] span::before{transform:translateY(7px) rotate(45deg)}
  .hd-menu[aria-expanded=true] span::after{transform:translateY(-7px) rotate(-45deg)}

  /* 開いたメニュー */
  .sp-nav{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 10px 20px rgba(20,40,75,.18)}
  .sp-nav[hidden]{display:none}
  .sp-nav ul{margin:0;padding:0;list-style:none}
  .sp-nav li+li{border-top:1px solid var(--line)}
  .sp-nav a{display:block;padding:16px 20px;color:var(--navy);font-weight:700;text-decoration:none}

  /* 下部固定バナー */
  .sp-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;box-shadow:0 -4px 12px rgba(20,40,75,.2)}
  .sp-bar a{display:flex;align-items:center;gap:6px;min-width:0;height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px) 8px;color:#fff;font-weight:900;font-size:clamp(13px,4.2vw,17px);line-height:1.25;text-decoration:none;white-space:nowrap}
  .sp-bar-tel{background:rgba(1,162,123,.86)}
  .sp-bar-mail{background:rgba(200,95,11,.86)}
  .sp-bar span{margin:0 auto}
  .sp-bar img{flex:none;width:30px;height:30px;padding:1px;background:#fff;border-radius:50%}
  .sp-bar small{display:block;font-weight:700;font-size:10px;text-align:center}
  .is-typing .sp-bar{display:none}

  /* バナーの高さの分だけ、フッターの下に余白をとる */
  .ft{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   売却事例 詳細ページ（single-case）
   ========================================================================== */
.cd-page{background:var(--bg-soft)}
.cd-page .wrap{max-width:1120px}
.cd-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"main side";gap:24px 32px;align-items:start}
.cd-eye{aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#dfe3ec}
.cd-eye img{width:100%;height:100%;object-fit:cover}
.cd-photo-ph{display:grid;place-items:center;height:100%;color:var(--muted);font-weight:700;font-size:15px}
.cd-side{grid-area:side;display:grid;gap:16px;position:sticky;top:20px}
.cd-main{grid-area:main;display:grid;gap:24px;min-width:0}

/* 売却金額 */
.cd-price{padding:20px 24px 16px;background:linear-gradient(135deg,#ffefd6,#fdd7a4);border:2px solid var(--accent);border-radius:12px;text-align:center}
.cd-price-label{display:inline-block;padding:2px 18px;background:var(--accent-dark);border-radius:999px;color:#fff;font-weight:700;font-size:14px}
.cd-price-value{margin:4px 0 0;color:var(--navy);font-weight:700;font-size:20px;line-height:1.3}
.cd-price-value b{margin-right:4px;color:#e9346e;font-family:var(--serif);font-weight:700;font-size:clamp(46px,6vw,56px)}

/* 物件詳細 */
.cd-card{padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(20,40,75,.08)}
.cd-card-title{margin:0 0 12px;color:var(--navy);font-size:18px;text-align:center}
.cd-spec{margin:0;font-size:16px}
.cd-spec th{width:36%;white-space:nowrap}
.cd-spec .cd-spec-group{width:auto;background:var(--cream);color:var(--navy);text-align:center}

/* 本文 */
.cd-block{padding:24px 28px;background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(20,40,75,.08)}
.cd-title{margin:0 0 12px;padding-left:12px;border-left:5px solid var(--accent);color:var(--navy);font-size:21px;line-height:1.4}
.cd-block p{margin:0}
.cd-block .cd-client{font-size:18px}
.cd-note{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.cd-steps{margin:0;padding:0;list-style:none}
.cd-steps li{position:relative;padding:0 0 24px 56px}
.cd-steps li:last-child{padding-bottom:0}
.cd-point{position:absolute;left:0;top:0;width:44px;height:44px;background:#fff;border-radius:50%} /* 円の内側が透過のため白を敷く */
.cd-steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:48px;bottom:4px;width:2px;background:#f4c9a3}
.cd-steps h3{margin:4px 0 6px;color:var(--accent-dark);font-size:17px}
.cd-voice{position:relative;padding:24px 28px;background:#fff4e8;border-radius:12px}
.cd-voice-title{margin:0 0 10px;color:var(--accent-dark);font-size:18px}
.cd-voice p{margin:0;font-family:var(--serif);font-weight:600;line-height:2}
.cd-cta{margin:32px 0 0;background:#fff}

@media(max-width:900px){
  .cd-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "main"}
  .cd-side{position:static}
}
@media(max-width:640px){
  .cd-page{padding:24px 0 40px}
  .cd-page .wrap{padding:0 12px}
  .cd-block,.cd-voice{padding:20px 16px}
  .cd-card{padding:16px 12px}
  .cd-spec th,.cd-spec td{padding:8px 10px}
}