@charset "utf-8";

/* =========================================================
   ばいばい不動産 TOP
   設計幅: PC 1440 / SP 375
   スケール方針: 1rem = 10px（設計値px ÷ 10 = rem）
     - 1440以上 ........ PC実寸・中央固定／背景のみ全幅
     - 1024-1439 ....... PCを等比縮小（1rem = 100vw/144）
     - 376-1023 ........ SP実寸・中央固定／背景のみ全幅
     - 375以下 ......... SPを等比縮小（1rem = 100vw/37.5）
   PC/SP 切替BP: 1024px
   ========================================================= */

/* ---------- ① 変数 ---------- */
:root{
  /* color */
  --c-green:#768f5e;          /* 上辺ライン・アクセントグリーン */
  --c-green-dark:#0a3921;     /* 見出し・アイコン線 */
  --c-cream-pc:#faf6ee;       /* PCヘッダー地 */
  --c-cream-sp:#faf4e9;       /* SPヘッダー/ドロワー地 */
  --c-text:#2e2e2e;           /* 本文 */
  --c-rule:#d9d4c7;           /* 区切り線 */
  --c-white:#ffffff;
  --c-orange:#f66702;         /* CTAボタン */

  /* layout */
  --w-pc:144rem;              /* 1440px */
  --w-sp:37.5rem;             /* 375px */
  --canvas:var(--w-sp);       /* 現在の設計キャンバス幅（BPで切替） */
  --bleed:100vw;              /* 全幅ストレッチ用の幅 */
  /* 設計幅を超えた分の左右の余り。設計幅以下では常に0 */
  --gutter:max(0px, calc((100% - var(--canvas)) / 2));
}

/* ---------- ② 等比スケール ---------- */
html{font-size:10px}

/* PC等比縮小レンジ */
@media (min-width:1024px) and (max-width:1439.98px){
  html{font-size:calc(100vw / 144)}
  :root{--bleed:var(--w-pc)}   /* キャンバスが画面幅と一致 */
}
/* SP等比縮小レンジ */
@media (max-width:375.98px){
  html{font-size:calc(100vw / 37.5)}
  :root{--bleed:var(--w-sp)}
}
/* PCレイアウト適用レンジ */
@media (min-width:1024px){
  :root{--canvas:var(--w-pc)}
}

html{overflow-x:clip}

/* ---------- ③ ベース ---------- */
body{
  width:100%;
  overflow-x:clip;
  background:var(--c-white);
  color:var(--c-text);
  font-family:"M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans",
              "Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",sans-serif;
  font-weight:500;
  word-break:auto-phrase;
  line-break:strict;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

/* ---------- ④ 共通ユーティリティ ---------- */

/* 設計キャンバス幅で中央固定するブロック */
.canvas{width:var(--canvas);margin-inline:auto}

/* 背景だけを画面端まで伸ばす（中央固定の内側から使う） */
.bleed{width:var(--bleed);margin-left:calc(50% - var(--bleed) / 2)}

/* 折り返し制御 */
.nowrap{white-space:nowrap}
.tight{white-space:nowrap;letter-spacing:-.02em}

/* PC/SP 出し分け（BP 1024） */
.pc-only{display:none}
.sp-only{display:block}
br.pc-only,br.sp-only{display:none}
br.sp-only{display:inline}
@media (min-width:1024px){
  .pc-only{display:block}
  .sp-only{display:none}
  br.pc-only{display:inline}
  br.sp-only{display:none}
}

/* スクリーンリーダー専用 */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* =========================================================
   01_ヘッダー
   PC 38:3 / SP 176:30
   ========================================================= */
.header{
  position:relative;
  width:100%;
  background:var(--c-cream-sp);
}
/* 上辺ラインは「かぶせ」。中身は枠全高(88/64)で中央揃えになる */
.header::before{
  content:"";position:absolute;left:0;top:0;z-index:1;
  width:100%;height:.4rem;background:var(--c-green);
}
.header__inner{
  position:relative;
  width:100%;
  height:6.4rem;                  /* SP 64 */
  /* 左右余白は設計値で固定。幅が広がっても余白は増やさない */
}
.header__logo{
  position:absolute;
  left:2rem;top:1.4rem;
  width:4.4rem;height:4.1rem;
}
.header__logo img{width:100%;height:100%;object-fit:contain}

/* ハンバーガー（SP） */
.header__menu{
  position:absolute;
  right:2rem;top:2.1rem;          /* Figma 375-325-30 = 20 */
  width:3rem;height:2.2rem;
}
.header__menu img{
  position:absolute;
  left:.07rem;top:.17rem;
  width:2.86rem;height:1.86rem;
}

/* ナビ（PC） */
.header__nav{display:none}

@media (min-width:1024px){
  .header{background:var(--c-cream-pc)}
  .header__inner{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;
    height:8.8rem;                /* PC 88（上辺ラインはかぶせ） */
    padding-inline:4.8rem;        /* 幅が広がっても48pxのまま */
  }
  .header__logo{
    position:static;
    width:6.2rem;height:5.8rem;
    flex-shrink:0;
  }
  .header__menu{display:none}
  .header__nav{
    display:flex;align-items:center;gap:3.4rem;
    flex-shrink:0;
    font-size:1.7rem;line-height:normal;
    color:var(--c-text);
    white-space:nowrap;
  }
  .header__nav a{transition:opacity .2s}
  .header__nav a:hover{opacity:.6}
}

/* =========================================================
   SP ドロワー  150:2
   ========================================================= */
.drawer{
  position:fixed;inset:0;z-index:100;
  border-top:.4rem solid var(--c-green);
  background:var(--c-cream-sp);
  visibility:hidden;opacity:0;
  transition:opacity .25s ease,visibility .25s ease;
}
.drawer.is-open{visibility:visible;opacity:1}
@media (min-width:1024px){.drawer{display:none}}

.drawer__panel{
  position:relative;
  width:100%;height:100%;
}
.drawer__logo{
  position:absolute;left:2rem;top:1rem;
  width:4.4rem;height:4.1rem;
}
.drawer__logo img{width:100%;height:100%;object-fit:contain}
.drawer__close{
  position:absolute;right:2.2rem;top:1.5rem;   /* Figma 375-327-26 = 22 */
  width:2.6rem;height:2.6rem;
}
.drawer__close img{width:100%;height:100%}

.drawer__nav{
  position:absolute;left:0;top:16.6rem;   /* Figma 150:6 テキスト top166（枠内基準） */
  width:100%;
}
.drawer__nav li{position:relative}
.drawer__nav li + li{margin-top:2.2rem}    /* 罫212 → 次テキスト234 */
.drawer__nav a{
  position:relative;display:block;
  padding-left:2.8rem;
  height:4.6rem;                          /* テキスト top166 → 罫 top212 */
  font-weight:700;font-size:2.1rem;line-height:normal;
  color:var(--c-green-dark);
  white-space:nowrap;
}
.drawer__nav a::after{                     /* 区切り線 left24 w327 h1 */
  content:"";position:absolute;
  left:2.4rem;right:2.4rem;top:4.6rem;height:.1rem;
  background:var(--c-rule);
}
.drawer__nav .drawer__chevron{
  position:absolute;right:3.4rem;top:.2rem;    /* Figma 375-332-9 = 34 */
  width:.9rem;height:1.6rem;
}

/* =========================================================
   02_FV
   PC 40:2 / SP 176:37
   ========================================================= */
/* SP: 高さは設計どおり650pxで固定。
   写真は「設計の拡大率のまま」置き、幅が足りるうちは横に見える範囲が増えるだけ。
   素材(1920x1280)は設計倍率(x0.343)で658.5px分の横幅しか無いため、
   そこで頭打ちにして中央寄せし、余った左右はクリームのフェードで繋ぐ。
   → どの幅でもトリミングも高さも動かない。 */
.fv{
  position:relative;
  width:100%;height:65rem;            /* SP 650：常に固定 */
  overflow:hidden;
  background:var(--c-cream-sp);
}

/* 器は「窓」として使い、写真は設計どおりの倍率・位置で固定して敷く。
   （1920x1280 を高さ439に合わせる＝658.5x439／横位置 -130.25px）
   こうすると器の幅を変えても写真は動かず、頭打ちは窓が狭まるだけになる。 */
.fv__bg{
  position:absolute;top:-1.3rem;left:0;
  margin-left:max(0px, calc((100% - 37.5rem) / 2));
  width:min(106.1333vw, 37.5rem);     /* 設計 398px → 上限 375px */
  height:43.9rem;                     /* 設計 439px 固定 */
  background:url(../images/fv/fv-bg.webp) no-repeat;
  background-size:65.85rem 43.9rem;
  background-position:-13.025rem 0;
}
/* 縦のクリームフェード＋（写真が頭打ちになったときだけ効く）左右のベタクリーム */
.fv__veil{
  position:absolute;left:0;right:0;top:-1rem;height:65rem;
  --gap:max(0px, calc((100% - 37.5rem) / 2));
  background:
    linear-gradient(to right, var(--c-cream-sp) 0, var(--c-cream-sp) var(--gap), rgba(250,244,233,0) var(--gap)),
    linear-gradient(to left,  var(--c-cream-sp) 0, var(--c-cream-sp) var(--gap), rgba(250,244,233,0) var(--gap)),
    linear-gradient(to top,
      var(--c-cream-sp) 0%,
      var(--c-cream-sp) 49.038%,
      rgba(250,246,238,0) 66.346%);
}

.fv__body{position:relative;height:100%}

.fv__title{
  position:absolute;left:0;right:0;top:31.7rem;
  width:32.7rem;margin-inline:auto;
  font-weight:700;font-size:2.7rem;line-height:4rem;
  color:var(--c-green-dark);text-align:center;
}
.fv__lead{
  position:absolute;left:0;right:0;top:46.1rem;
  width:32.7rem;margin-inline:auto;
  font-weight:400;font-size:1.4rem;line-height:2.6rem;
  color:#4d4f51;text-align:center;
}
.fv .btn{
  position:absolute;left:0;right:0;top:56.7rem;
  width:-moz-fit-content;width:fit-content;margin-inline:auto;
  padding:1.8rem 4rem;font-size:1.7rem;
}

@media (min-width:1024px){
  .fv{height:81rem;background:var(--c-cream-pc)}

  /* 1440で頭打ちにして中央固定。写真の器は原寸1440x810のまま
     「キャンバスの右辺」基準に置くので、見える範囲は常にカンプと同じ
     左1020px分＝高さ・トリミング・比率がどの幅でも動かない。
     はみ出した左右の余りはクリームのフェードで繋ぐ。 */
  .fv__bg{
    left:auto;top:0;margin-left:0;
    right:calc(var(--gutter) - 42rem);
    width:144rem;min-width:0;height:81rem;
    background-size:cover;background-position:center;
  }
  .fv__veil{
    top:0;height:81rem;
    /* Figma 1440基準の 677px / 907px をキャンバス右辺からの距離に変換
       （1440-677=763 / 1440-907=533）＝写真の左辺に追従する */
    background:
      /* キャンバス(1440)の外側はベタのクリーム。写真はキャンバス内で終わる */
      linear-gradient(to left,
        var(--c-cream-sp) 0,
        var(--c-cream-sp) var(--gutter),
        rgba(250,244,233,0) var(--gutter)),
      linear-gradient(to right,
        var(--c-cream-sp) 0,
        var(--c-cream-sp) calc(100% - var(--gutter) - 76.3rem),
        rgba(250,244,233,0) calc(100% - var(--gutter) - 53.3rem));
  }

  .fv__title{
    left:calc(var(--gutter) + 7.2rem);right:auto;top:12rem;
    width:auto;margin-inline:0;
    font-size:6rem;line-height:7.8rem;
    text-align:left;white-space:nowrap;
  }
  .fv__lead{
    left:calc(var(--gutter) + 7.4rem);right:auto;top:42.8rem;
    width:auto;margin-inline:0;
    font-size:2rem;line-height:3.4rem;color:#4d4f4f;
    text-align:left;white-space:nowrap;
  }
  .fv .btn{
    left:calc(var(--gutter) + 7.4rem);right:auto;top:60rem;
    margin-inline:0;
    padding:2rem 4.4rem;font-size:2.2rem;
  }
}

/* ---------- 共通ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4rem;
  background:var(--c-orange);
  color:var(--c-white);
  font-weight:700;line-height:normal;
  white-space:nowrap;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}

/* =========================================================
   セクション共通パーツ（ラベル＋区切り線）
   ========================================================= */
.sec-label{
  font-weight:500;font-size:1.5rem;line-height:normal;
  letter-spacing:.2rem;
  /* letter-spacingの末尾アキ分を戻して中央を合わせる */
  margin-right:-.2rem;
  color:var(--c-green-dark);text-align:center;
}
.sec-rule{
  display:block;width:4rem;height:.2rem;
  background:var(--c-green-dark);
}
@media (min-width:1024px){
  .sec-label{font-size:1.8rem}
  .sec-rule{width:4.4rem}
}

/* =========================================================
   03_私たちについて
   PC 46:2 / SP 176:45
   ========================================================= */
.about{
  position:relative;
  width:100%;height:62rem;            /* SP 620 */
  overflow:hidden;
  background:var(--c-cream-sp);
}

/* 背景写真（設計 375x470 / top228。器は窓、写真は設計倍率で固定） */
.about__bg{
  position:absolute;top:22.8rem;left:50%;
  transform:translateX(-50%);
  width:min(100vw, 37.5rem);          /* 375で頭打ち */
  height:47rem;
  background:url(../images/about/about-bg.webp) no-repeat;
  background-size:83.5555rem 47rem;   /* 1920x1080 を高さ470に合わせる */
  background-position:-23.0278rem 0;  /* (375 - 835.56)/2 */
}
/* SP: 上からクリームが降りてくるパネル（設計 375x470 / top0） */
.about__panel{
  position:absolute;left:0;right:0;top:0;height:47rem;
  background:linear-gradient(to bottom,
    var(--c-cream-sp) 0%,
    var(--c-cream-sp) 47%,
    rgba(250,246,238,0) 63%);
}
/* PC: 全面にかかる50%のクリーム */
.about__tint{
  position:absolute;left:0;right:0;top:-.4rem;height:81.2rem;
  background:var(--c-cream-sp);opacity:.5;
}
/* 中央グロー */
.about__glow{
  position:absolute;left:calc(50% + .05rem);top:16.1rem;
  transform:translateX(-50%);
  width:51.8rem;height:23.7rem;
  max-width:none;                     /* resetのmax-width:100%で親幅に丸められるのを防ぐ */
  pointer-events:none;
}

.about__body{position:absolute;inset:0}
.about .sec-label{position:absolute;left:0;right:0;top:6.6rem}
.about .sec-rule{position:absolute;left:50%;margin-left:-2rem;top:9.6rem}
.about__title{
  position:absolute;left:0;right:0;top:12.4rem;
  font-weight:700;font-size:2.4rem;line-height:3.6rem;
  color:var(--c-green-dark);text-align:center;
}
.about__lead{
  position:absolute;left:0;right:0;top:22.8rem;
  font-weight:400;font-size:1.4rem;line-height:2.6rem;
  color:#4d4f51;text-align:center;
}

@media (min-width:1024px){
  .about{height:81rem;background:var(--c-cream-pc)}

  .about__bg{
    top:0;width:144rem;height:81rem;
    background-size:cover;background-position:center;
  }
  .about__glow{
    left:50%;top:4.1rem;
    width:99.3rem;height:70.4rem;
  }

  /* PCはFigmaの auto-layout（縦・中央揃え・gap16）どおりに積む */
  .about__body{
    inset:auto;position:absolute;left:0;right:0;top:21rem;
    display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  }
  .about .sec-label,
  .about .sec-rule,
  .about__title,
  .about__lead{position:static;margin-left:0}
  .about__title{font-size:5.6rem;line-height:8.2rem;white-space:nowrap}
  .about__lead{font-size:1.9rem;line-height:3.2rem;white-space:nowrap}
}

/* =========================================================
   04_代表メッセージ
   PC 63:2 / SP 176:53
   ========================================================= */
.message{
  position:relative;
  width:100%;height:60rem;            /* SP 600 */
  overflow:hidden;
  background:var(--c-cream-sp);
}

/* 背景写真（設計 445x261 / left-69 top339。器は窓、写真は設計倍率で固定） */
.message__bg{
  position:absolute;top:33.9rem;left:50%;
  transform:translateX(-50%);
  width:min(100vw, 37.5rem);          /* 375で頭打ち */
  height:26.1rem;
  background:url(../images/message/message-bg.webp) no-repeat;
  background-size:44.5rem 29.6667rem; /* 1920x1280 を幅445に合わせる */
  background-position:-6.9rem -1.7833rem;
}
.message__glow{
  position:absolute;left:calc(50% + .05rem);top:17.4rem;
  transform:translateX(-50%);
  width:51.8rem;height:23.7rem;max-width:none;
  pointer-events:none;
}
/* SP: 上からクリームが降りてくるパネル（設計 375x480 / top115） */
.message__veil{
  position:absolute;left:0;right:0;top:11.5rem;height:48rem;
  background:linear-gradient(to bottom,
    var(--c-cream-sp) 0%,
    var(--c-cream-pc) 47%,
    rgba(250,246,238,0) 63%);
}

.message__body{position:absolute;inset:0}
.message .sec-label{position:absolute;left:0;right:0;top:5rem}
.message .sec-rule{position:absolute;left:50%;margin-left:-2rem;top:8rem}
.message__title{
  position:absolute;left:0;right:0;top:10rem;
  font-weight:700;font-size:2.3rem;line-height:3.4rem;
  color:var(--c-green-dark);text-align:center;
}
.message__lead{
  position:absolute;left:0;right:0;top:19rem;
  width:32.7rem;margin-inline:auto;
  font-weight:400;font-size:1.4rem;line-height:2.5rem;
  color:#4d4f51;text-align:center;
}
.message__sign{
  position:absolute;left:0;right:0;top:30rem;
  font-weight:500;font-size:1.35rem;line-height:normal;
  color:var(--c-text);text-align:center;
}

@media (min-width:1024px){
  .message{height:81rem}

  .message__bg{
    top:0;width:144rem;height:81rem;
    background-size:cover;background-position:center;
  }
  /* PC: 左からのクリーム。Figma 1440基準の 54.808%(789px) / 73.077%(1052px) */
  .message__veil{
    top:0;height:81rem;
    background:linear-gradient(to right,
      rgba(250,244,233,.9) 0,
      rgba(250,244,233,.9) calc(var(--gutter) + 78.92rem),
      rgba(250,244,233,.1) calc(var(--gutter) + 105.23rem));
  }

  .message .sec-label{
    left:calc(var(--gutter) + 8.8rem);right:auto;top:12.8rem;
    font-size:2.2rem;text-align:left;
  }
  .message .sec-rule{
    left:calc(var(--gutter) + 8.8rem);margin-left:0;top:17rem;
  }
  .message__title{
    left:calc(var(--gutter) + 8.8rem);right:auto;top:23.2rem;
    font-size:5.4rem;line-height:7.6rem;
    text-align:left;white-space:nowrap;
  }
  .message__lead{
    left:calc(var(--gutter) + 8.8rem);right:auto;top:45.2rem;
    width:auto;margin-inline:0;
    font-size:2.2rem;line-height:4.4rem;
    text-align:left;white-space:nowrap;
  }
  .message__sign{
    left:calc(var(--gutter) + 8.8rem);right:auto;top:65rem;
    font-size:2.4rem;text-align:left;white-space:nowrap;
  }
}

/* 376〜1023px（SP実寸・中央固定レンジ）：同じ理由でTOP3枚の背景が375pxで頭打ちして
   両端に余白ができてしまうため、PC版と同様にbleed幅まで広げてcoverで敷き直す。
   375px以下（等比縮小レンジ）はfont-sizeのスケールで自動的に全幅になるため対象外 */
@media (min-width:376px) and (max-width:1023.98px){
  .fv__bg{
    left:0;margin-left:0;width:var(--bleed);
    background-size:cover;background-position:center;
  }
  .fv__veil{
    background:linear-gradient(to top,
      var(--c-cream-sp) 0%,
      var(--c-cream-sp) 49.038%,
      rgba(250,246,238,0) 66.346%);
  }
  .about__bg{
    left:0;transform:none;width:var(--bleed);
    background-size:cover;background-position:center;
  }
  .message__bg{
    left:0;transform:none;width:var(--bleed);
    background-size:cover;background-position:center;
  }
}

/* 1440px以上：FV/私たちについて/代表メッセージの背景写真を画面幅いっぱいに広げる。
   （ヘッダー冒頭コメントの設計方針「1440以上…背景のみ全幅」の未実装分。
   1440px固定の箱のままだと、ノートPCなど1440pxより広い画面で写真の左右に
   クリームの余白が出てしまうため、bleed幅まで広げてcoverで敷き直す） */
@media (min-width:1440px){
  /* FVの写真自体（.fv__bg）はキャンバス右辺基準のままで実は右端まで届いている。
     余白の正体は.fv__veilの「キャンバス外はベタクリームで隠す」処理（1行目のグラデ）
     なので、そこだけ外して右端の隠し布を無くす。文字側(左)の馴染ませ用グラデは維持 */
  .fv__veil{
    background:
      linear-gradient(to right,
        var(--c-cream-sp) 0,
        var(--c-cream-sp) calc(100% - var(--gutter) - 76.3rem),
        rgba(250,244,233,0) calc(100% - var(--gutter) - 53.3rem));
  }
  .about__bg{
    left:0;right:0;transform:none;width:100%;
  }
  .message__bg{
    left:0;right:0;transform:none;width:100%;
  }
}

/* =========================================================
   05_事業内容
   PC 51:2 / SP 176:62
   ========================================================= */
.service{
  position:relative;
  width:100%;height:100rem;           /* SP 1000 */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.service .sec-label{position:absolute;left:0;right:0;top:4rem}
.service .sec-rule{position:absolute;left:50%;transform:translateX(-50%);top:6.8rem}
.service__title{
  position:absolute;left:0;right:0;top:8.8rem;
  font-weight:700;font-size:2.2rem;line-height:3.2rem;
  color:var(--c-green-dark);text-align:center;
}
.service__cards{
  position:absolute;left:0;right:0;top:18rem;
  display:flex;flex-direction:column;align-items:center;gap:2rem;
}

/* ---- 事業カード ---- */
.card{
  position:relative;
  width:32.7rem;height:36.8rem;
  border-radius:1.8rem;
  background:#fdfbf7;
  overflow:hidden;
  flex-shrink:0;
}
.card__photo{
  position:absolute;left:0;top:0;
  width:32.7rem;height:17.6rem;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.card--buy  .card__photo{background-image:url(../images/service/service-buy.webp)}
.card--demo .card__photo{background-image:url(../images/service/service-demolish.webp)}

.card__circle{
  position:absolute;left:2.4rem;top:20rem;
  width:5.8rem;height:5.8rem;max-width:none;
}
.card__glyph{position:absolute;max-width:none}
.card--buy  .card__glyph{left:3.6rem;top:21.2rem;width:3.4rem;height:3.4rem}
.card--demo .card__glyph{left:3.4rem;top:21rem;width:3.8rem;height:3.8rem;object-fit:contain}

.card__title{
  position:absolute;left:10rem;top:21.6rem;
  font-weight:700;font-size:2rem;line-height:normal;
  color:var(--c-green-dark);white-space:nowrap;
}
.card__text{
  position:absolute;left:50%;transform:translateX(-50%);top:27.8rem;
  width:27.9rem;
  font-weight:400;font-size:1.4rem;line-height:2.4rem;
  color:#4d4f51;text-align:center;
}

@media (min-width:1024px){
  .service{height:81rem}
  .service .sec-label{top:7.2rem}
  .service .sec-rule{top:10.4rem}
  .service__title{top:14rem;font-size:5.2rem;line-height:6.6rem}
  .service__cards{
    top:28rem;
    flex-direction:row;justify-content:center;gap:4rem;
  }

  .card{width:66rem;height:43rem;border-radius:2rem}
  .card__photo{width:30rem;height:43rem}
  .card__circle{left:32.5rem;top:6.3rem;width:10.4rem;height:10.4rem}
  .card--buy  .card__glyph{left:33.3rem;top:6.6rem;width:8.8rem;height:9.6rem}
  .card--demo .card__glyph{left:34.5rem;top:8.3rem;width:6.4rem;height:6.4rem}
  .card__title{
    left:34rem;top:18.2rem;width:28.4rem;
    font-size:2.8rem;white-space:normal;
  }
  .card__text{
    left:34rem;transform:none;top:23.6rem;
    width:auto;
    font-size:1.7rem;line-height:2.8rem;
    text-align:left;white-space:nowrap;
  }
}

/* =========================================================
   06_選ばれる理由
   PC 56:2 / SP 176:84
   ========================================================= */
.reason{
  position:relative;
  width:100%;height:73rem;            /* SP 730 */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.reason .sec-label{position:absolute;left:0;right:0;top:4rem}
.reason .sec-rule{position:absolute;left:50%;transform:translateX(-50%);top:6.8rem}
.reason__title{
  position:absolute;left:0;right:0;top:8.8rem;
  font-weight:700;font-size:2.1rem;line-height:3.1rem;
  color:var(--c-green-dark);text-align:center;
}
.reason__cards{
  position:absolute;left:0;right:0;top:18rem;
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
}

/* ---- 理由カード ---- */
.rcard{
  position:relative;
  width:32.7rem;height:10.8rem;
  border-radius:1.6rem;
  background:#fefefe;
  overflow:hidden;
  flex-shrink:0;
}
.reason__cards .rcard:first-child{height:12.8rem}

.rcard__circle{
  position:absolute;left:2rem;top:50%;transform:translateY(-50%);
  width:6rem;height:6rem;max-width:none;
}
.rcard__icon{
  position:absolute;left:3.3rem;top:50%;transform:translateY(-50%);
  width:3.4rem;height:3.4rem;max-width:none;object-fit:contain;
}
.rcard__title{
  position:absolute;left:10rem;top:2.6rem;
  font-weight:700;font-size:1.7rem;line-height:normal;
  color:var(--c-green-dark);white-space:nowrap;
}
.rcard__text{
  position:absolute;left:10rem;top:5.8rem;width:20.5rem;
  font-weight:400;font-size:1.3rem;line-height:2rem;
  color:#4d4f51;
}

/* ---- 葉の装飾 ---- */
.leaf{position:absolute;opacity:.5;max-width:none;pointer-events:none}
.leaf--sp1{left:calc(var(--gutter) +  4.270rem);top: 1.244rem;width: 3.701rem;height:2.199rem;transform:rotate(-14.43deg)}
.leaf--sp2{left:calc(var(--gutter) -   .743rem);top: 4.276rem;width: 3.991rem;height:2.566rem;transform:rotate(-23.26deg)}
.leaf--sp3{left:calc(var(--gutter) +  3.615rem);top: 7.696rem;width: 4.620rem;height:2.974rem;transform:rotate( -1.33deg)}
.leaf--sp4{left:calc(var(--gutter) + 31.343rem);top:65.250rem;width: 4.204rem;height:2.505rem;transform:rotate(-11.14deg)}
.leaf--sp5{left:calc(var(--gutter) + 33.620rem);top:68.931rem;width: 4.422rem;height:2.842rem;transform:rotate(  0.81deg)}

@media (min-width:1024px){
  .reason{height:81rem}
  .reason .sec-label{top:5.8rem}
  .reason .sec-rule{top:9rem}
  .reason__title{top:12.8rem;font-size:5rem;line-height:6.4rem}
  .reason__cards{
    top:25.5rem;left:calc(var(--gutter) + 7.2rem);right:auto;
    flex-direction:row;align-items:flex-start;gap:2.4rem;
  }

  .rcard,
  .reason__cards .rcard:first-child{width:31.4rem;height:47.5rem;border-radius:2.2rem}
  .rcard__circle{
    left:8.7rem;top:6.4rem;transform:none;
    width:14rem;height:14rem;
  }
  .rcard__icon{
    left:12rem;top:9.7rem;transform:none;
    width:7.4rem;height:7.4rem;
  }
  .rcard__title{
    left:0;right:0;top:26rem;
    font-size:2.6rem;text-align:center;white-space:nowrap;
  }
  .rcard__text{
    left:1.2rem;top:32.3rem;width:29rem;
    font-size:1.7rem;line-height:2.8rem;text-align:center;
  }

  .leaf--pc1{left:calc(var(--gutter) +   7.402rem);top: 3.596rem;width: 8.294rem;height:4.901rem;transform:none}
  .leaf--pc2{left:calc(var(--gutter) +   9.943rem);top:21.966rem;width: 9.158rem;height:5.890rem;transform:rotate(-16.27deg)}
  .leaf--pc3{left:calc(var(--gutter) -   2.314rem);top: 8.986rem;width:12.318rem;height:7.923rem;transform:rotate(  0.48deg)}
  .leaf--pc4{left:calc(var(--gutter) + 134.502rem);top:68.901rem;width: 8.296rem;height:4.896rem;transform:rotate(-11.14deg)}
  .leaf--pc5{left:calc(var(--gutter) + 138.238rem);top:75.062rem;width: 9.162rem;height:5.889rem;transform:rotate(  0.81deg)}
}

/* =========================================================
   07_会社概要
   PC 59:2(176:26) / SP 176:113
   ========================================================= */
.company{
  position:relative;
  width:100%;height:57.9rem;          /* SP 579 */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.company .sec-label{position:absolute;left:0;right:0;top:4rem}
.company .sec-rule{position:absolute;left:50%;transform:translateX(-50%);top:6.8rem}
.company__title{
  position:absolute;left:0;right:0;top:9.2rem;
  font-weight:700;font-size:3rem;line-height:normal;
  color:var(--c-text);text-align:center;
}

.company__table{
  position:absolute;left:50%;transform:translateX(-50%);top:17rem;
  width:32.7rem;
  border-radius:1.2rem;
  background:#fefefe;
  overflow:hidden;
}
.company__table table{width:100%;table-layout:fixed}
.company__table th,
.company__table td{
  vertical-align:top;
  padding-top:2rem;
  height:5.2rem;
  font-size:1.3rem;line-height:normal;
  color:var(--c-text);
}
.company__table th{
  width:13rem;padding-left:1.8rem;
  font-weight:700;font-size:1.25rem;
  text-align:left;white-space:nowrap;
}
.company__table td{font-weight:400}
.company__table tr:nth-child(even){background:#f0f0ee}
.company__table tr:nth-child(n+4) th,
.company__table tr:nth-child(n+4) td{height:7.1rem}

/* 装飾（枝葉） */
.branch{position:absolute;opacity:.5;max-width:none;pointer-events:none}
.branch--sp1{left:calc(var(--gutter) + 32.327rem);top:51.301rem;width: 5.055rem;height: 7.746rem;transform:rotate(  6.58deg)}
.branch--sp2{left:calc(var(--gutter) -  3.240rem);top: 1.713rem;width:15.832rem;height:11.201rem;transform:rotate(-20.19deg) skewX(-1.21deg)}

@media (min-width:1024px){
  .company{height:81rem}
  .company .sec-label{top:4.8rem}
  .company .sec-rule{top:8rem}
  .company__title{top:11.2rem;font-size:4.4rem}

  .company__table{
    top:22.5rem;width:102rem;border-radius:1.6rem;
  }
  .company__table th,
  .company__table td{
    padding-top:2.4rem;height:6.9rem;
    font-size:2.1rem;
  }
  .company__table tr:nth-child(n+4) th,
  .company__table tr:nth-child(n+4) td{height:6.9rem}
  .company__table th{
    width:40.4rem;padding-left:5.6rem;font-size:2.1rem;
    border-right:.1rem solid #d4d9cc;
  }
  .company__table td{padding-left:2.6rem}

  .branch--pc1{left:calc(var(--gutter) -  9.756rem);top: 0.177rem;width:41.083rem;height:28.321rem;transform:rotate(-20.42deg)}
  .branch--pc2{left:calc(var(--gutter) + 125.380rem);top:51.087rem;width:16.908rem;height:25.895rem;transform:rotate(  8.31deg)}
  .branch--pc3{left:calc(var(--gutter) + 116.927rem);top:58.746rem;width:12.486rem;height:19.131rem;transform:rotate(-35.85deg) scaleX(-1)}
}

/* =========================================================
   08_お問い合わせ
   PC 61:2 / SP 176:137
   ========================================================= */
.contact{
  position:relative;
  width:100%;height:48.9rem;          /* SP 489 */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.contact .sec-label{position:absolute;left:0;right:0;top:4rem}
.contact .sec-rule{position:absolute;left:50%;transform:translateX(-50%);top:6.8rem}
.contact__title{
  position:absolute;left:0;right:0;top:8.8rem;
  font-weight:700;font-size:2.2rem;line-height:3.2rem;
  color:var(--c-text);text-align:center;
}
.contact__lead{
  position:absolute;left:0;right:0;top:16rem;
  font-weight:400;font-size:1.35rem;line-height:2.2rem;
  color:#4d4f51;text-align:center;
}

.contact__card{
  position:absolute;left:50%;transform:translateX(-50%);top:23.2rem;
  width:32.7rem;height:16.9rem;
  border-radius:1.8rem;
  background:#fefefe;
  overflow:hidden;
}
.contact__tel-icon{position:absolute;left:11.2rem;top:2.6rem;width:3.4rem;height:3.4rem;max-width:none}
.contact__tel-label{
  position:absolute;left:15.6rem;top:3.2rem;
  font-weight:700;font-size:1.7rem;line-height:normal;
  color:var(--c-text);white-space:nowrap;
}
.contact__tel-num{
  position:absolute;left:0;right:0;top:7.2rem;
  font-weight:700;font-size:2.7rem;line-height:normal;
  color:var(--c-text);text-align:center;white-space:nowrap;
}
.contact__hours{
  position:absolute;left:0;right:0;top:11.2rem;
  font-weight:400;font-size:1.3rem;line-height:normal;
  color:#4d4f51;text-align:center;
}

.contact__mail{
  position:absolute;left:calc(var(--gutter) + 6.3rem);top:43.1rem;
  display:flex;align-items:center;gap:1rem;
  font-weight:400;font-size:1.5rem;line-height:normal;
  color:var(--c-text);white-space:nowrap;
}
.contact__mail img{width:2.4rem;height:1.8rem;max-width:none;flex-shrink:0}
.contact__mail:hover span{text-decoration:underline}

/* 葉の装飾 */
.cleaf{position:absolute;opacity:.5;max-width:none;pointer-events:none}
.cleaf--sp1{left:calc(var(--gutter) + 34.089rem);top:29.091rem;width: 7.437rem;height:14.280rem;transform:rotate(-134.60deg) skewX(-2.27deg) scaleX(-1)}
.cleaf--sp2{left:calc(var(--gutter) -  4.586rem);top:31.803rem;width: 7.979rem;height:15.138rem;transform:rotate( 125.84deg) skewX(-2.18deg)}

@media (min-width:1024px){
  .contact{height:81rem}
  .contact .sec-label{top:17rem}
  .contact .sec-rule{top:20.2rem}
  .contact__title{top:23.4rem;font-size:4.8rem;line-height:normal}
  .contact__lead{top:32.1rem;font-size:2.1rem;line-height:normal}

  .contact__card{
    top:38.3rem;width:112rem;height:25.3rem;border-radius:2.4rem;
  }
  .contact__tel-icon{left:9rem;top:5.8rem;width:8.8rem;height:8.8rem}
  .contact__tel-label{left:21rem;top:8.2rem;font-size:3rem}
  .contact__tel-num{top:6.2rem;left:38rem;right:auto;font-size:6rem;text-align:left}
  .contact__hours{top:15.8rem;font-size:2.2rem}

  .contact__mail{
    left:calc(var(--gutter) + 54.2rem);top:68rem;
    gap:1.2rem;font-size:2.2rem;
  }
  .contact__mail img{width:2.8rem;height:2.1rem}

  .cleaf--pc1{left:calc(var(--gutter) + 128.992rem);top:24.876rem;width:25.898rem;height:49.676rem;transform:rotate(-135.74deg) scaleX(-1)}
  .cleaf--pc2{left:calc(var(--gutter) -  11.302rem);top:34.957rem;width:27.096rem;height:51.974rem;transform:rotate( 134.75deg)}
}

/* インライン用の出し分け */
.pc-only-i{display:none}
.sp-only-i{display:inline}
@media (min-width:1024px){
  .pc-only-i{display:inline}
  .sp-only-i{display:none}
}

/* =========================================================
   09_フッター
   PC 66:2 / SP 176:155
   ========================================================= */
.footer{
  position:relative;
  width:100%;height:30rem;            /* SP 300 */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.footer__logo{
  position:absolute;left:calc(var(--gutter) + 12.8rem);top:4rem;
  width:12rem;height:11.1rem;max-width:none;object-fit:contain;
}
.footer__links{
  position:absolute;left:0;right:0;top:17.6rem;
  font-weight:500;font-size:1.4rem;line-height:normal;
  color:#333;text-align:center;
}
.footer__links a{transition:opacity .2s}
.footer__links a:hover{opacity:.6}
.footer__rule{
  position:absolute;left:calc(var(--gutter) + 3.2rem);top:21rem;
  display:block;width:31.1rem;height:.1rem;
  background:var(--c-rule);
}
.footer__copy{
  position:absolute;left:0;right:0;top:22.8rem;
  font-weight:400;font-size:1.2rem;line-height:normal;
  color:#4d4d4d;text-align:center;
}
.footer__bar{
  position:absolute;left:0;right:0;top:26.4rem;
  height:3.6rem;background:var(--c-green);
}

@media (min-width:1024px){
  .footer{height:39.4rem}
  .footer__logo{left:calc(var(--gutter) + 64.5rem);top:4.4rem;width:15rem;height:13.9rem}
  .footer__links{top:23.8rem;font-size:2rem}
  .footer__rule{left:calc(var(--gutter) + 10rem);top:28rem;width:124rem}
  .footer__copy{top:30.2rem;font-size:1.8rem}
  .footer__bar{top:35rem;height:4.4rem}
}

/* =========================================================
   下層：プライバシーポリシー
   （Figmaカンプ無し。TOPのトークン・部品に合わせて構成）
   ========================================================= */
.privacy{
  position:relative;
  width:100%;
  padding:6rem 0 8rem;                /* SP */
  overflow:hidden;
  background:var(--c-cream-sp);
}
.privacy .sec-label{position:relative;display:block}
.privacy .sec-rule{
  position:relative;left:50%;transform:translateX(-50%);
  margin-top:1.2rem;
}
.privacy__title{
  margin-top:2.4rem;
  font-weight:700;font-size:3rem;line-height:normal;
  color:var(--c-text);text-align:center;
}
.privacy__card{
  position:relative;
  width:32.7rem;margin:3.2rem auto 0;
  padding:2.8rem 2.4rem 3.2rem;
  border-radius:1.2rem;
  background:#fefefe;
}
.privacy__lead{
  margin-bottom:2rem;
  font-weight:700;font-size:2rem;line-height:normal;
  color:var(--c-green-dark);text-align:center;
}
.privacy__card p{
  font-weight:400;font-size:1.4rem;line-height:2.4rem;
  color:#4d4f51;
}
.privacy__card p + p{margin-top:1.8rem}
.privacy__back{
  position:relative;
  display:block;width:-moz-fit-content;width:fit-content;
  margin:3.6rem auto 0;
  padding-bottom:.2rem;
  border-bottom:.1rem solid var(--c-green-dark);
  font-weight:500;font-size:1.4rem;line-height:normal;
  color:var(--c-green-dark);
  transition:opacity .2s;
}
.privacy__back:hover{opacity:.6}

/* 装飾（TOPの枝を流用・控えめに） */
/* 枝はカードより前面（最前面） */
.branch--pv1,.branch--pv2,.branch--pv3{z-index:2}
.branch--pv1{left:calc(var(--gutter) -  7.756rem);top:11rem;width:41.083rem;height:28.321rem;transform:rotate(-20.42deg)}
.branch--pv2{right:calc(var(--gutter) + 0.800rem);bottom:11.000rem;width: 5.055rem;height: 7.743rem;transform:rotate(  8.31deg)}
.branch--pv3{right:calc(var(--gutter) + 4.649rem);bottom:10.732rem;width: 3.733rem;height: 5.720rem;transform:rotate(-35.85deg) scaleX(-1)}

@media (min-width:1024px){
  .privacy{padding:12rem 0 14rem}
  .privacy .sec-rule{margin-top:1.6rem}
  .privacy__title{margin-top:3.2rem;font-size:4.4rem}
  .privacy__card{
    width:102rem;margin-top:5.6rem;
    padding:6.4rem 8rem 7.2rem;
    border-radius:1.6rem;
  }
  .privacy__lead{margin-bottom:3.2rem;font-size:2.8rem}
  .privacy__card p{font-size:1.7rem;line-height:3.2rem}
  .privacy__card p + p{margin-top:2.4rem}
  .privacy__back{margin-top:5.6rem;font-size:1.7rem}

  /* 会社概要セクション右下（92:31 + 92:34）と同じ構成 */
  .branch--pv2{right:calc(var(--gutter) +  6.212rem);bottom:8.518rem;width:16.908rem;height:25.895rem;transform:rotate(  8.31deg)}
  .branch--pv3{right:calc(var(--gutter) + 19.087rem);bottom:7.623rem;width:12.486rem;height:19.131rem;transform:rotate(-35.85deg) scaleX(-1)}
}