@charset "utf-8";
/* ==========================================================================
   不動産事業ページ専用スタイル（page-realestate.php から読み込み）
   すべてのセレクタを #realestate-lp 配下に限定し、テーマ他ページへ影響させない
   --------------------------------------------------------------------------
   目次
     00. トークン（色・書体・文字サイズ・レイアウト）
     01. ベース / 共通パーツ
     02. セクション見出し
     03. HERO
     04. マーキー帯
     05. 導入
     06. 01 CONCERNS
     07. 02 SERVICE
     08. 03 STRENGTH
     09. 04 Q&A
     10. 05 CONTACT
     11. テーマ側の調整
     12. メディアクエリ（ブレイクポイントは 1024 / 900 / 600 の3段のみ）
     13. 動きを減らす設定への対応（打ち消し用なので必ず最後）

   ※ .reveal の基本スタイルと、@keyframes flp-kb / flp-rise / flp-drop は
     全ページ共通なので style.css 側に一本化している
   ========================================================================== */

/* ==== 00. トークン ======================================================= */
#realestate-lp{
  /* 色は RGB 三つ組を単一の出典とし、不透明色はそこから導出する。
     透過色は rgb(var(--*-rgb) / .XX) で書く */
  --navy-rgb:22 48 90;
  --navy-deep-rgb:15 34 68;
  --navy-mid-rgb:36 64 110;
  --green-rgb:124 174 58;
  --green-light-rgb:156 193 104;
  --green-dark-rgb:92 138 40;
  --white-rgb:255 255 255;

  --navy:rgb(var(--navy-rgb));
  --navy-deep:rgb(var(--navy-deep-rgb));
  --navy-mid:rgb(var(--navy-mid-rgb));
  --green:rgb(var(--green-rgb));
  --green-light:rgb(var(--green-light-rgb));
  --green-dark:rgb(var(--green-dark-rgb));
  --white:rgb(var(--white-rgb));

  --ink:#2B3440;          /* 本文 */
  --gray:#6B7684;         /* 補助テキスト */
  --pale:#F5F7F4;         /* 淡色セクション背景 */
  --line:#DDE4E9;         /* 罫線・枠線 */
  --on-dark:#C6D0DE;      /* 濃色背景上の本文 */
  --on-dark-dim:#B9C4D6;  /* 濃色背景上の補助テキスト */

  /* 書体 */
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
  --en:'Jost',sans-serif;
  --en-d:'EB Garamond',serif;  /* 装飾英字用クラシカルセリフ */

  /* 文字サイズ（このスケール外の値を新規に足さない） */
  --fs-2xs:10px;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:15px;
  --fs-md:16px;
  --fs-body:17px;
  --fs-lg:19px;
  --fs-h3:20px;
  --fs-xl:22px;
  /* 装飾用の大きな文字（本文スケールとは別枠） */
  --fs-marquee:27px;
  --fs-tel:34px;
  --fs-bigno:96px;

  /* レイアウト */
  --skew:4vw;             /* セクション境界の斜め切りの深さ */
  --skew-angle:-2.29deg;  /* = atan(4vw / 100vw)。--skew を変えたらここも合わせる */
  --inner-max:1200px;     /* コンテンツ最大幅 */
  --radius:8px;
  --radius-sm:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==== 01. ベース / 共通パーツ ============================================ */
#realestate-lp,
#realestate-lp *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#realestate-lp{
  font-family:var(--sans);
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  /* hidden だとスクロールコンテナになり、Q&A の position:sticky が効かなくなる */
  overflow-x:clip;
}
#realestate-lp ul,
#realestate-lp ol{
  list-style:none;
}
#realestate-lp a{
  color:inherit;
  text-decoration:none;
}
#realestate-lp a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}
#realestate-lp .inner{
  max-width:var(--inner-max);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}
#realestate-lp .t-center{
  text-align:center;
}
/* 中央寄せセクション内で、グリッドだけ左寄せに戻す用 */
#realestate-lp .t-left{
  text-align:left;
}
/* スマホだけで効かせる改行（PC では非表示。600px 以下で表示：12. 参照） */
#realestate-lp .sp-br{
  display:none;
}

/* パスワード保護時のフォーム（#realestate-lp の外に出るのでスコープ無し） */
.realestate-pw{
  max-width:600px;
  margin:120px auto;
  padding:0 24px;
}

/* 背景の巨大英字（パララックス対象）。位置は各セクションで指定 */
#realestate-lp .watermark{
  position:absolute;
  font-family:var(--en-d);
  font-weight:500;
  font-size:clamp(90px,14vw,190px);
  letter-spacing:.02em;
  color:rgb(var(--navy-rgb) / .05);
  white-space:nowrap;
  pointer-events:none;
  z-index:1;
  line-height:1;
}

/* ==== 02. セクション見出し =============================================== */
#realestate-lp .sec-head{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--en-d);
}
#realestate-lp .sec-head .no{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--green);
  letter-spacing:.1em;
}
#realestate-lp .sec-head .bar{
  width:36px;
  height:1px;
  background:var(--green);
}
#realestate-lp .sec-head .en{
  font-size:var(--fs-base);
  letter-spacing:.28em;
  color:var(--green);
  text-transform:uppercase;
  font-weight:500;
}
#realestate-lp .t-center .sec-head{
  justify-content:center;
}
#realestate-lp .sec-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,32px);
  line-height:1.65;
  margin-top:16px;
  letter-spacing:.04em;
}
#realestate-lp .sec-lead{
  margin-top:14px;
  color:var(--gray);
  font-size:var(--fs-body);
}

/* ==== 03. HERO =========================================================== */
#realestate-lp .page-hero{
  position:relative;
  height:min(78vh,620px);
  min-height:440px;
  display:flex;
  align-items:center;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--skew)),0 100%);
}
#realestate-lp .kenburns{
  position:absolute;
  inset:-6%;
  background:
    linear-gradient(100deg,
      rgb(var(--navy-deep-rgb) / .78) 22%,
      rgb(var(--navy-deep-rgb) / .42) 58%,
      rgb(var(--navy-deep-rgb) / .22)),
    url('../images/realestate_hero.webp') center bottom/cover no-repeat;
  animation:flp-kb 22s ease-in-out infinite alternate;
}
#realestate-lp .ptitle{
  position:relative;
  z-index:2;
  color:var(--white);
  max-width:1240px;
  width:100%;
  margin:0 auto;
  padding:0 40px;
}
#realestate-lp .ptitle .crumb{
  font-size:var(--fs-xs);
  color:rgb(var(--white-rgb) / .75);
  margin-bottom:22px;
}
#realestate-lp .ptitle .crumb ol{
  display:flex;
  gap:10px;
}
#realestate-lp .ptitle .crumb li + li::before{
  content:"＞";
  margin-right:10px;
  opacity:.5;
}
#realestate-lp .ptitle .en{
  font-family:var(--en-d);
  font-size:var(--fs-base);
  letter-spacing:.4em;
  color:var(--green-light);
  text-transform:uppercase;
  display:block;
  font-weight:500;
}
#realestate-lp .ptitle h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px,6vw,64px);
  letter-spacing:.12em;
  margin-top:14px;
  line-height:1.3;
}
/* タイトル行を下からせり上げる */
#realestate-lp .ttl-line{
  display:block;
  overflow:hidden;
}
#realestate-lp .ttl-line span{
  display:inline-block;
  transform:translateY(110%);
  animation:flp-rise .9s var(--ease) forwards;
}
#realestate-lp .ptitle .sub{
  margin-top:24px;
  font-size:var(--fs-base);
  color:rgb(var(--white-rgb) / .85);
  max-width:480px;
  opacity:0;
  animation:flp-fade .8s ease .7s forwards;
}
@keyframes flp-fade{
  to{
    opacity:1;
  }
}
#realestate-lp .hero-scroll{
  position:absolute;
  left:40px;
  bottom:calc(var(--skew) + 10px);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--en);
  font-size:var(--fs-2xs);
  letter-spacing:.3em;
  color:rgb(var(--white-rgb) / .8);
}
#realestate-lp .hero-scroll::after{
  content:"";
  width:1px;
  height:46px;
  background:linear-gradient(180deg,var(--green-light),transparent);
  animation:flp-drop 1.8s ease-in-out infinite;
}

/* ==== 04. マーキー帯 ===================================================== */
#realestate-lp .marquee{
  overflow:hidden;
  padding:20px 0;
  background:rgb(var(--white-rgb) / .9);
  position:relative;
  z-index:10;
  /* HERO の斜め切りに沿わせるため、帯ごと傾けて幅を余分に取る */
  transform:rotate(var(--skew-angle));
  transform-origin:left top;
  width:104%;
  left:-2%;
  margin-bottom:calc(-1 * var(--skew));
}
/* 2本目（逆走）の帯は傾けず水平に戻す */
#realestate-lp .marquee.rev{
  transform:none;
  width:auto;
  left:0;
  margin-bottom:0;
  background:var(--white);
}
#realestate-lp .mq-track{
  display:flex;
  gap:56px;
  width:max-content;
  animation:flp-mq 28s linear infinite;
}
#realestate-lp .marquee.rev .mq-track{
  animation-direction:reverse;
}
@keyframes flp-mq{
  to{
    transform:translateX(-50%);
  }
}
#realestate-lp .mq-track span{
  font-family:var(--en-d);
  font-weight:500;
  font-size:var(--fs-marquee);
  letter-spacing:.14em;
  color:rgb(var(--navy-rgb) / .4);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:56px;
}
#realestate-lp .mq-track i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

/* ==== 05. 導入（写真オーバーラップ） ===================================== */
/* 上下の余白が非対称なのは、上にマーキー帯が重なるため */
#realestate-lp .intro{
  padding:120px 0 170px;
  position:relative;
}
#realestate-lp .intro-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
}
#realestate-lp .intro-txt{
  position:relative;
  z-index:3;
  background:var(--white);
  padding:44px 48px 44px 0;
  margin-right:-80px;
}
#realestate-lp .intro .area-tag{
  color:var(--green-dark);
  font-weight:700;
  font-size:var(--fs-sm);
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  gap:6px;
}
#realestate-lp .intro .area-tag svg{
  width:16px;
  height:16px;
  fill:currentColor;
  flex-shrink:0;
}
#realestate-lp .intro h2{
  font-family:var(--serif);
  font-weight:600;
  color:var(--navy);
  font-size:clamp(25px,3.4vw,34px);
  line-height:1.75;
  letter-spacing:.05em;
  margin-top:12px;
}
#realestate-lp .intro p.body{
  margin-top:22px;
  font-size:var(--fs-body);
  line-height:2;
}
#realestate-lp .intro-btns{
  display:flex;
  gap:16px;
  margin-top:34px;
  flex-wrap:wrap;
}
#realestate-lp .intro-photo{
  position:relative;
  z-index:2;
}
#realestate-lp .intro-photo .pho{
  height:420px;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
  box-shadow:0 24px 50px rgb(var(--navy-rgb) / .18);
}

/* 写真枠（背景画像ではなく img を敷く。alt と遅延読み込みを効かせるため） */
#realestate-lp .pho{
  position:relative;
  overflow:hidden;
}
#realestate-lp .pho .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
#realestate-lp .pho:hover .bg{
  transform:scale(1.06);
}

/* ボタン */
#realestate-lp .btn-primary,
#realestate-lp .btn-form{
  color:var(--white);
  font-weight:700;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  z-index:1;
  transition:color .35s;
}
#realestate-lp .btn-primary::before,
#realestate-lp .btn-form::before{
  content:"";
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s;
  z-index:-1;
}
#realestate-lp .btn-primary:hover::before,
#realestate-lp .btn-form:hover::before{
  transform:scaleX(1);
  transform-origin:left;
}
#realestate-lp .btn-primary{
  background:var(--navy);
  font-size:var(--fs-sm);
  padding:16px 34px;
}
#realestate-lp .btn-primary::before{
  background:var(--green);
}
#realestate-lp .btn-primary .ar{
  transition:transform .3s;
}
#realestate-lp .btn-primary:hover .ar{
  transform:translateX(5px);
}
#realestate-lp .btn-ghost{
  border:1px solid var(--navy);
  color:var(--navy);
  font-weight:500;
  font-size:var(--fs-sm);
  padding:15px 32px;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .3s,color .3s;
}
#realestate-lp .btn-ghost:hover{
  background:var(--navy);
  color:var(--white);
}

/* ==== 06. 01 CONCERNS =================================================== */
#realestate-lp .concerns{
  background:var(--pale);
  padding:180px 0 170px;   /* 上が厚いのは斜め切りで削られる分 */
  position:relative;
  clip-path:polygon(0 var(--skew),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * var(--skew));
}
#realestate-lp .concerns .watermark{
  top:60px;
  right:-4vw;
}
#realestate-lp .c-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:56px;
}
#realestate-lp .ccard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 26px;
  position:relative;
  transition:transform .4s var(--ease),box-shadow .4s;
}

#realestate-lp .ccard .no{
  font-family:var(--en-d);
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--green);
}
#realestate-lp .ccard .no::after{
  content:"";
  display:block;
  width:26px;
  height:1px;
  background:var(--green);
  margin-top:6px;
  transition:width .4s;
}
#realestate-lp .ccard:hover .no::after{
  width:48px;
}
#realestate-lp .ccard .row{
  display:flex;
  gap:16px;
  margin-top:14px;
  align-items:flex-start;
}
#realestate-lp .ccard .ic{
  width:52px;
  height:52px;
  flex-shrink:0;
  border-radius:var(--radius);
  background:rgb(var(--navy-rgb) / .06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s;
}
#realestate-lp .ccard:hover .ic{
  background:rgb(var(--green-rgb) / .14);
}
#realestate-lp .ccard .ic svg{
  width:28px;
  height:28px;
  stroke:var(--navy);
  fill:none;
  stroke-width:1.5;
}
#realestate-lp .ccard h3{
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--navy);
  line-height:1.5;
}
#realestate-lp .ccard p{
  font-size:var(--fs-md);
  color:var(--gray);
  margin-top:8px;
  line-height:1.7;
}

/* ==== 07. 02 SERVICE ==================================================== */
#realestate-lp .service{
  padding:170px 0 180px;
  position:relative;
}
#realestate-lp .service .watermark{
  top:40px;
  left:-2vw;
}
#realestate-lp .s-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:60px;
}
#realestate-lp .scard{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s;
  position:relative;
}

#realestate-lp .scard .pho{
  height:135px;
}
#realestate-lp .scard .ic{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--navy);
  border:3px solid var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-27px 0 0 22px;
  position:relative;
  z-index:2;
  transition:background .3s,transform .3s;
}
#realestate-lp .scard:hover .ic{
  background:var(--green);
  transform:rotate(-8deg);
}
#realestate-lp .scard .ic svg{
  width:26px;
  height:26px;
  stroke:var(--white);
  fill:none;
  stroke-width:1.6;
}
#realestate-lp .scard .body{
  padding:16px 22px 28px;
}
#realestate-lp .scard h3{
  font-family:var(--serif);
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--navy);
  line-height:1.5;
}
#realestate-lp .scard p{
  font-size:var(--fs-md);
  color:var(--gray);
  margin-top:10px;
  line-height:1.7;
}

/* ==== 08. 03 STRENGTH =================================================== */
#realestate-lp .strength{
  background:
    linear-gradient(rgb(var(--navy-deep-rgb) / .88),rgb(var(--navy-deep-rgb) / .92)),
    linear-gradient(160deg,var(--navy-mid),var(--navy-deep));
  color:var(--white);
  padding:200px 0 190px;
  position:relative;
  overflow:hidden;
  clip-path:polygon(0 0,100% var(--skew),100% 100%,0 100%);
  margin-top:calc(-1 * var(--skew));
}
#realestate-lp .strength::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(700px 320px at 88% 12%,rgb(var(--green-rgb) / .16),transparent 70%);
}
#realestate-lp .strength .watermark{
  top:90px;
  right:-2vw;
  color:rgb(var(--white-rgb) / .05);
}
#realestate-lp .strength .sec-head .no,
#realestate-lp .strength .sec-head .en{
  color:var(--green-light);
}
#realestate-lp .strength .sec-head .bar{
  background:var(--green-light);
}
#realestate-lp .strength .sec-title{
  color:var(--white);
}
#realestate-lp .strength .sec-lead{
  color:var(--on-dark-dim);
}
#realestate-lp .st-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:60px;
  position:relative;
  z-index:2;
}
#realestate-lp .stcard{
  background:rgb(var(--white-rgb) / .05);
  border:1px solid rgb(var(--white-rgb) / .16);
  border-radius:var(--radius);
  padding:38px 30px;
  position:relative;
  overflow:hidden;
  transition:transform .4s,border-color .4s;
}

#realestate-lp .stcard .bigno{
  position:absolute;
  top:-14px;
  right:8px;
  font-family:var(--en-d);
  font-weight:500;
  font-size:var(--fs-bigno);
  color:transparent;
  -webkit-text-stroke:1px rgb(var(--green-light-rgb) / .4);
  line-height:1;
}
#realestate-lp .stcard .ic{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgb(var(--green-light-rgb) / .6);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .3s, background .3s;
}
#realestate-lp .stcard:hover .ic {
  transform: rotate(-8deg);
  background: rgb(var(--green-light-rgb) / .2); 
}
#realestate-lp .stcard .ic svg{
  width:24px;
  height:24px;
  stroke:var(--green-light);
  fill:none;
  stroke-width:1.5;
}
#realestate-lp .stcard h3{
  font-family:var(--serif);
  font-size:var(--fs-xl);
  font-weight:600;
  margin-top:20px;
  line-height:1.5;
}
#realestate-lp .stcard p{
  font-size:var(--fs-md);
  color:var(--on-dark);
  margin-top:14px;
  line-height:1.8;
}

/* ==== 09. 04 Q&A ======================================================== */
#realestate-lp .qa{
  padding:170px 0;
  position:relative;
}
#realestate-lp .qa .watermark{
  top:40px;
  right:-4vw;
}
#realestate-lp .qa-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:60px;
  align-items:start;
}
#realestate-lp .qa-left{
  position:sticky;
  top:100px;
}
#realestate-lp .qa-left p{
  margin-top:18px;
  font-size:var(--fs-sm);
  color:var(--gray);
}
#realestate-lp .qa-list{
  display:grid;
  gap:14px;
}
#realestate-lp .qitem{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
#realestate-lp .qitem.open{
  border-color:var(--green);
  box-shadow:0 10px 24px rgb(var(--green-rgb) / .12);
}
/* 見出しの階層を保ちつつ、操作要素は button のままにする */
#realestate-lp .qitem h3{
  font-size:inherit;
  font-weight:inherit;
}
#realestate-lp .qitem button{
  all:unset;
  box-sizing:border-box;
  display:flex;
  width:100%;
  align-items:flex-start;
  gap:14px;
  padding:22px 56px 22px 24px;
  cursor:pointer;
  position:relative;
}
#realestate-lp .qitem button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:-2px;
}
#realestate-lp .qitem .q,
#realestate-lp .qitem .lbl{
  font-family:var(--en-d);
  font-weight:600;
  font-size:var(--fs-body);
  line-height:1.5;
  flex-shrink:0;
}
#realestate-lp .qitem .q{
  color:var(--green);
}
#realestate-lp .qitem .lbl{
  color:var(--navy);
}
#realestate-lp .qitem .qt{
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--navy);
  line-height:1.6;
}
#realestate-lp .qitem .pm{
  position:absolute;
  right:20px;
  top:22px;
  width:22px;
  height:22px;
  transition:transform .35s;
}
#realestate-lp .qitem.open .pm{
  transform:rotate(180deg);
}
#realestate-lp .qitem .pm::before,
#realestate-lp .qitem .pm::after{
  content:"";
  position:absolute;
  background:var(--green);
  left:3px;
  right:3px;
  top:10px;
  height:2px;
  border-radius:2px;
  transition:transform .35s;
}
#realestate-lp .qitem .pm::after{
  transform:rotate(90deg);
}
#realestate-lp .qitem.open .pm::after{
  transform:rotate(0);
}
/* visibility も切り替えて、閉じている回答をスクリーンリーダーと
   Tab キーの移動対象から外す（max-height:0 だけでは読まれてしまう） */
#realestate-lp .qitem .a{
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  transition:max-height .4s ease,visibility .4s;
}
#realestate-lp .qitem.open .a{
  visibility:visible;
}
#realestate-lp .qitem .a-in{
  display:flex;
  gap:14px;
  margin:0 24px;
  padding:16px 0 22px;
  border-top:1px dashed var(--line);
}
#realestate-lp .qitem .a p{
  font-size:var(--fs-md);
  line-height:1.8;
}

/* ==== 10. 05 CONTACT ==================================================== */
#realestate-lp .contact{
  background:var(--pale);
  padding:180px 0 160px;
  position:relative;
  clip-path:polygon(0 var(--skew),100% 0,100% 100%,0 100%);
}
#realestate-lp .contact .watermark{
  top:60px;
  left:-2vw;
}
#realestate-lp .ct-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:50px;
}
#realestate-lp .ctcard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px 34px;
  text-align:center;
  position:relative;
  transition:transform .4s,box-shadow .4s;
}
#realestate-lp .ctcard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgb(var(--navy-rgb) / .1);
}
#realestate-lp .ctcard .step{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--white);
  font-family:var(--en);
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  padding:4px 18px;
  border-radius:999px;
}
#realestate-lp .ctcard h3{
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--navy);
  line-height:1.5;
}
#realestate-lp .ct-telnum{
  font-family:var(--en);
  font-size:var(--fs-tel);
  font-weight:500;
  color:var(--navy);
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  transition:color .3s;
}
#realestate-lp a.ct-telnum:hover{
  color:var(--green-dark);
}
#realestate-lp .ct-telnum svg{
  width:24px;
  height:24px;
  stroke:var(--green);
  fill:none;
  stroke-width:1.8;
}
#realestate-lp .ct-telsub{
  font-size:var(--fs-xs);
  color:var(--gray);
  margin-top:6px;
}
#realestate-lp .btn-form{
  margin-top:22px;
  background:var(--green);
  font-size:var(--fs-base);
  padding:16px 42px;
}
#realestate-lp .btn-form::before{
  background:var(--navy);
}
#realestate-lp .btn-form svg{
  width:18px;
  height:18px;
  stroke:var(--white);
  fill:none;
  stroke-width:1.6;
}

/* ==== 11. テーマ側の調整 ================================================= */
/* .page-template-page-realestate は WordPress がテンプレートファイル名から自動で付けるクラス。
   .page-realestate はテーマ側で付与される従来のクラス */

/* テーマ共通のページタイトルバナーをこのページだけ隠す（専用 HERO があるため） */
body.page-realestate .pagetitle-wrap,
body.page-template-page-realestate .pagetitle-wrap{
  display:none;
}
/* テーマ共通の幅固定（body:1300px / ヘッダー:1300px）をこのページだけ解除する。
   セレクタの詳細度がテーマ側より高いので !important は不要 */
body.page-realestate,
body.page-template-page-realestate,
body.page-realestate .header-wrap,
body.page-template-page-realestate .header-wrap{
  min-width:0;
}
body.page-realestate,
body.page-template-page-realestate{
  overflow-x:hidden;
}

/* ==== 12. メディアクエリ ================================================= */
@media(max-width:1024px){
  #realestate-lp .c-grid,
  #realestate-lp .s-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:900px){
  #realestate-lp .intro-grid{
    grid-template-columns:1fr;
  }
  #realestate-lp .intro-txt{
    margin:0;
    padding:0 0 34px;
  }
  #realestate-lp .intro-photo .pho{
    height:280px;
    clip-path:none;
  }
  #realestate-lp .st-grid{
    grid-template-columns:1fr;
  }
  #realestate-lp .qa-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  #realestate-lp .qa-left{
    position:static;
  }
  #realestate-lp .ct-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:600px){
  #realestate-lp .sp-br{
    display:inline;
  }
  #realestate-lp .c-grid,
  #realestate-lp .s-grid{
    grid-template-columns:1fr;
  }
  #realestate-lp .ptitle{
    padding:0 24px;
  }
  #realestate-lp .hero-scroll{
    left:24px;
  }
  /* お問い合わせカード：上下 40px は保ち、左右だけ詰める */
  #realestate-lp .ctcard{
    padding-left:20px;
    padding-right:20px;
  }
  #realestate-lp .ct-form-title{
    line-height:1.6;
  }
  #realestate-lp .btn-form{
    display:flex;
    justify-content:center;
    gap:8px;
    width:100%;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
    padding:16px 12px;
    line-height:1.5;
    white-space:nowrap;
  }
}

/* ==== 13. 動きを減らす設定への対応 ===================================== */
/* 上の各セクションの指定を打ち消すため、必ずファイル末尾に置く。
   .reveal の扱いは style.css 側で対応済み */
@media(prefers-reduced-motion:reduce){
  #realestate-lp .kenburns,
  #realestate-lp .mq-track,
  #realestate-lp .ttl-line span,
  #realestate-lp .ptitle .sub,
  #realestate-lp .hero-scroll::after{
    animation:none;
  }
  #realestate-lp .ttl-line span,
  #realestate-lp .ptitle .sub{
    transform:none;
    opacity:1;
  }
  /* JS がインラインで transform を書き込むため、ここだけ !important が必要 */
  #realestate-lp [data-parallax]{
    transform:none !important;
  }
}