@charset "UTF-8";
/* ============================================================
 * INFeel 相続LP — スタイルシート
 * 基準幅: 1024px（PC）。レスポンシブは後段で追加。
 * ============================================================ */

/* ---- tokens ---- */
:root{
  --navy:#1e3a5f; --navy-strong:#0f2440;
  --terra:#b85c3a; --terra-soft:#fcf2e5;
  --ink:#2c2c2c; --mute:#6b6b6b; --mute2:#737373;
  --cream:#faf9f6; --border:#e5ded2; --gold:#c9a961;
  --white:#fff;
  --serif:"Noto Serif JP","游明朝","YuMincho",serif;
  --sans:"Noto Sans JP","游ゴシック","YuGothic","Hiragino Sans",sans-serif;
  --num:"Inter","Helvetica Neue",Arial,sans-serif;
  --script:"Klee One",var(--serif);
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:none}
a{text-decoration:none;color:inherit}
body{background:#d9d2c6;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}

.lp{width:100%;overflow:hidden;background:var(--white)}
/* 各セクションの中央インナー（背景はセクションがフル幅で持つ） */
:root{--inner:1120px}

/* ============================================================
 * Section 01: HERO
 * ============================================================ */
.hero-visual{position:relative;width:100%;background:#f4efe6;overflow:hidden}
.hero-inner{position:relative;max-width:var(--inner);height:950px;margin:0 auto}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-rep-mobile{display:none}/* スマホ縦積み時のみ表示（下の@media参照） */
.hero-logo{position:absolute;left:45px;top:40px;width:484px;height:61px;display:block}
.hero-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* ロゴ（画像内「司法書士事務所INFeel」）の読みを右横に添える */
.hero-logo-read{position:absolute;left:536px;top:64px;font-family:var(--sans);
  font-weight:500;font-size:15px;color:var(--navy);letter-spacing:.04em;white-space:nowrap}
.hero-label{position:absolute;left:23px;top:140px;width:577px;height:131px;overflow:hidden}
.hero-label img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-title{position:absolute;left:45px;top:264px;width:683px;
  font-family:var(--serif);font-weight:700;font-size:67px;line-height:1.52;color:var(--navy)}
.hero-sub{position:absolute;left:45px;top:542px;width:509px;
  font-weight:700;font-size:34px;line-height:1.68;color:var(--ink)}
.hero-lead{position:absolute;left:45px;top:734px;width:582px;
  font-weight:400;font-size:21px;line-height:1.8;color:var(--mute)}
.hero-repbadge{position:absolute;right:42px;top:744px;width:350px;height:60px;
  background:var(--white);border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:28px;color:var(--navy)}
.hero-repcap{position:absolute;right:42px;top:824px;font-size:20px;color:var(--mute);text-align:right}

/* --- hero lower (spec / area / cta) --- */
.hero-lower{width:100%;background:var(--cream)}
.hero-lower__inner{max-width:var(--inner);margin:0 auto;
  display:flex;flex-direction:column;gap:40px;align-items:center;padding:36px 48px}

/* spec cards */
.spec-row{display:flex;gap:23px}
.spec-card{position:relative;width:300px;height:145px;
  border:3px solid #d1d1d1;border-radius:10px;background:var(--white)}
.spec-card__icon{position:absolute;left:10px;top:25px;width:95px;height:95px;object-fit:cover}
.spec-card__txt{position:absolute;left:110px;top:40px;width:159px;display:flex;flex-direction:column;white-space:nowrap}
.spec-card__txt .s{font-size:24px;color:var(--mute);line-height:1.25}
.spec-card__txt .l{font-size:30px;color:var(--navy);font-weight:700;line-height:1.2}
.spec-card__txt .l .num1{font-size:30px}
.spec-card__txt .l .num2{font-size:18px}
.spec-card__txt .l .num3{font-size:26px}
.spec-card__txt--single{top:42px;justify-content:center}
.spec-card__txt .l2{font-size:26px;color:var(--navy);font-weight:700;line-height:1.3}

/* area badges */
.area-row{display:flex;flex-wrap:nowrap;align-items:center;gap:24px;min-height:50px}
.area-label{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap}
.area-label img{width:35px;height:35px;object-fit:cover}
.area-badge{flex-shrink:0;background:var(--white);border:1px solid var(--border);border-radius:999px;
  padding:10px 25px;font-size:24px;font-weight:700;color:var(--ink);white-space:nowrap}
.area-badge--sm{padding:10px 20px}
.area-badge--all{background:var(--navy);color:var(--white);font-weight:500;padding:10px 20px;border-color:var(--navy)}

/* cta */
.hero-cta{width:620px;display:flex;flex-direction:column;gap:15px}
.phone-btn{background:var(--terra);border-radius:16px;padding:22px 24px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.phone-btn .prow{display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:700;color:var(--white)}
.phone-btn .prow img{width:34px;height:34px}
.phone-btn__hours{font-size:12.5px;font-weight:500;color:var(--terra-soft)}
.phone-btn__num{font-family:var(--num);font-weight:700;font-size:35px;color:var(--white);letter-spacing:.35px}
.phone-btn__free{font-size:13.5px;font-weight:700;color:var(--terra-soft)}

.sub-row{display:flex;gap:14px}
.sub-btn{flex:1 0 0;min-width:0;background:var(--white);border:1.4px solid var(--border);border-radius:12px;
  padding:20px 16px;display:flex;align-items:center;gap:12px}
.sub-btn img{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.sub-btn__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.sub-btn__title{font-size:20px;font-weight:700;color:var(--navy);white-space:nowrap}
.sub-btn__note{font-size:11.5px;color:var(--mute2);line-height:1.4}

/* ============================================================
 * Section 02: CONCERN（お悩み）
 * 背景 #fbf9f5 / 見出し67px / 6カード2列 / 下部ベージュ帯
 * ============================================================ */
.concern{width:100%;background:#fbf9f5}
.concern__inner{max-width:var(--inner);margin:0 auto;padding:70px 48px 90px}

/* head: 左テキスト＋右イラスト */
.concern__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:44px}
.concern__title{font-family:var(--serif);font-weight:700;font-size:67px;line-height:1.48;color:var(--navy)}
.concern__sub{margin-top:24px;font-size:20px;line-height:1.75;color:var(--mute)}
.concern__woman{width:460px;height:460px;object-fit:contain;flex-shrink:0;margin-top:-52px}

/* 6カード 2列グリッド */
.concern__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.onayami-card{display:flex;gap:18px;align-items:flex-start;
  background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px}
.onayami-card__lcol{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.onayami-card__check{width:40px;height:40px;object-fit:contain}
.onayami-card__icon{width:100px;height:100px;object-fit:contain}
.onayami-card__rcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.onayami-card__t{font-weight:700;font-size:24px;line-height:1.48;color:var(--navy)}
.onayami-card__d{font-weight:400;font-size:20px;line-height:1.65;color:var(--mute2)}

/* 下部ベージュ帯 */
.concern__banner{margin-top:40px;background:#f8e8de;border-radius:14px;
  padding:24px 40px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.concern__banner-lead{font-family:var(--script);font-size:28px;color:var(--terra)}
.concern__banner-sub{font-size:24px;color:var(--ink)}

/* ============================================================
 * 共通: 中央見出し（Kleeラベル＋明朝タイトル＋蓮SVG）
 * design基準: Kleeラベル26px / 明朝Bold50px / gap
 * ============================================================ */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.sec-head__label{font-family:var(--script);font-size:26px;color:var(--terra)}
.sec-head__title{font-family:var(--serif);font-weight:700;font-size:50px;color:var(--navy);line-height:1.3}
.sec-head__lotus{display:block;margin-top:4px}

/* ============================================================
 * Section 03: REASON（選ばれる理由）
 * 背景 #f9f5ec / 3カラムカード
 * ============================================================ */
.reason{width:100%;background:#f9f5ec}
.reason__inner{max-width:var(--inner);margin:0 auto;padding:64px 48px 56px}
.reason__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.reason-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:var(--white);border-radius:16px;padding:30px 22px;box-shadow:0 4px 14px rgba(26,38,64,.06)}
.reason-card__no{font-family:var(--serif);font-weight:700;font-size:34px;color:#d9744e;line-height:1}
.reason-card__title{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--navy);line-height:1.5}
.reason-card__sub{font-weight:700;font-size:14px;color:var(--terra);line-height:1.5}
.reason-card__icon{width:250px;height:212px;object-fit:contain;max-width:100%}
.reason-card__desc{font-weight:400;font-size:16px;color:var(--mute2);line-height:1.8}
.reason__note{margin-top:24px;font-size:14px;color:var(--mute2);line-height:1.6}

/* ============================================================
 * Section 04: OMAKASE（おまかせ一覧）
 * 背景 白 / 10項目2列 + 売却サポート横長 + 家族帯 + 下部帯
 * ============================================================ */
.omakase{width:100%;background:var(--white)}
.omakase__inner{max-width:var(--inner);margin:0 auto;padding:60px 48px 70px}
.omakase__lead{margin-top:4px;font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.omakase__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.omakase-item{display:flex;align-items:center;gap:12px;min-height:100px;
  background:#fbf9f5;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.omakase-item__icon{width:100px;height:100px;object-fit:contain;flex-shrink:0}
.omakase-item__t{font-weight:700;font-size:24px;color:var(--ink);line-height:1.5}
.omakase-item--wide{margin-top:12px}
.omakase-wides{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.omakase-wides>.omakase-item--wide{margin-top:0;height:100%}
.omakase-item__note{display:block;font-weight:400;font-size:14px;line-height:1.45;margin-top:3px}

.omakase__foot{margin-top:16px;font-size:14px;color:var(--mute2);line-height:1.6}

.omakase__band{margin-top:20px;width:100%;aspect-ratio:823/269;border-radius:12px;overflow:hidden}
.omakase__band img{width:100%;height:100%;object-fit:cover;object-position:center}

.omakase__banner{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:22px 40px}
.omakase__banner-lead{font-weight:700;font-size:28px;color:var(--terra)}
.omakase__banner-sub{font-size:24px;color:var(--ink)}

/* ============================================================
 * Section 05: COMPARE（やること対比）
 * 背景 #fbf9f5 / 左3カード＋中央バッジ＋右10カード
 * ============================================================ */
.compare{width:100%;background:#fbf9f5}
.compare__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:36px}
.compare__lead{font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.compare__row{display:flex;align-items:center;gap:16px;width:100%}
/* 共通パネル見出し */
.cmp-panel-head{display:flex;flex-direction:column;align-items:center;gap:10px}
.cmp-panel-head__t{font-weight:700;font-size:26px;color:var(--navy)}
.cmp-tag{display:inline-flex;align-items:center;justify-content:center;
  border-radius:20px;padding:9px 10px;font-weight:700;font-size:18px;line-height:1}
.cmp-tag--peach{background:#f8e8de;color:var(--terra)}
.cmp-tag--gold{background:var(--gold);color:var(--navy)}
.cmp-div{border:0;height:1px;background:var(--border);width:100%;margin:0}

/* 左カード */
.cmp-left{flex-shrink:0;width:388px;align-self:stretch;
  background:#f8f4ed;border:1.5px solid var(--border);border-radius:16px;
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;align-items:center}
.cmp-left__list{list-style:none;display:flex;flex-direction:column;gap:12px;width:100%}
.cmp-task{display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px}
.cmp-task__icon{width:80px;height:80px;object-fit:contain;flex-shrink:0}
.cmp-task__col{display:flex;flex-direction:column;gap:5px;min-width:0}
.cmp-minitag{align-self:flex-start;background:#f8f4ed;border-radius:20px;padding:3px 7px;
  font-size:14px;color:var(--navy);line-height:1.2}
.cmp-task__t{font-weight:700;font-size:18px;color:var(--ink);line-height:1.35}
.cmp-task__d{font-size:13px;color:var(--mute2);line-height:1.3}

/* 右パネル */
.cmp-right{flex:1 1 0;min-width:0;align-self:stretch;
  background:#f8f4ed;border:1px solid var(--border);border-radius:16px;
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;align-items:center}
.cmp-right__grid{display:flex;gap:12px;width:100%}
.cmp-wcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.cmp-wcard{display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.cmp-wcard__icon{width:50px;height:50px;object-fit:contain;flex-shrink:0}
.cmp-wcard__t{font-weight:500;font-size:16px;color:var(--ink);line-height:1.25}

.compare__note{font-size:24px;color:var(--mute2);line-height:1.4;text-align:center}

/* ============================================================
 * Section 06: FLOW（手続きの流れ）
 * 背景 白 / 3ステップカード + 目安バンド
 * ============================================================ */
.flow{width:100%;background:var(--white)}
.flow__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:36px}
.flow__lead{font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.flow__steps{display:flex;align-items:stretch;gap:14px;width:100%}
.flow-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--white);border:1.2px solid var(--border);border-radius:14px;padding:24px 22px}
.flow-step__hr{display:flex;align-items:center;gap:12px;width:100%}
.flow-step__num{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--navy);
  color:var(--white);font-family:var(--serif);font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center}
.flow-step__title{flex:1;font-weight:700;font-size:16.5px;color:var(--navy);line-height:1.4}
.flow-step__desc{font-size:13.5px;color:var(--mute2);line-height:1.55;width:100%}
.flow-step__iw{display:flex;align-items:center;justify-content:center;height:150px;width:230px}
.flow-step__iw img{object-fit:contain}
.flow-step__iw--multi{gap:0}
.flow-step__ibox{height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.flow-step__iw--multi .flow-step__ibox:nth-child(1){width:76px}
.flow-step__iw--multi .flow-step__ibox:nth-child(2){width:80px}
.flow-step__iw--multi .flow-step__ibox:nth-child(3){width:76px}
.flow-step__sub{width:100%;background:#fbf9f5;border-radius:8px;padding:10px 12px;margin-top:auto;
  font-weight:500;font-size:12.5px;color:var(--terra);line-height:1.45}
.flow__arrow{flex-shrink:0;align-self:center;font-weight:700;font-size:26px;color:var(--gold)}

.flow__band{width:100%;background:#f8e8de;border-radius:16px;padding:24px 32px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.flow__band-label{font-weight:500;font-size:20px;color:var(--terra)}
.flow__band-big{display:inline-flex;align-items:baseline;gap:6px;padding:0 10px;
  font-weight:700;color:var(--navy)}
.flow__band-big .s1{font-size:16px}
.flow__band-big .s2{font-family:var(--serif);font-size:40px;line-height:1}
.flow__band-big .s3{font-size:18px}
.flow__band-txt{font-size:20px;color:var(--ink);line-height:1.2}
.flow__note{font-size:24px;color:var(--mute2);line-height:1.4;text-align:center}

/* ============================================================
 * Section 07: PRICE（料金の目安）
 * 背景 #fbf9f5 / 2プラン + 特典2 + 注記
 * ============================================================ */
.price{width:100%;background:#fbf9f5}
.price__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.price__lead{font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.price__plans{display:flex;gap:20px;width:100%}
.plan{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--white);border:1.4px solid var(--border);border-radius:16px;padding:26px 24px}
.plan--rec{border:2.2px solid var(--gold)}
.plan__tag{display:inline-flex;border-radius:20px;padding:4px 12px;font-weight:700;font-size:12.5px;line-height:1.3}
.plan__tag--gold{background:var(--gold);color:var(--navy)}
.plan__tag--grey{background:#efeeec;color:var(--mute2)}
.plan__name{font-weight:700;font-size:19px;color:var(--navy);text-align:center}
.plan__iw{display:flex;align-items:center;justify-content:center;gap:10px;height:100px}
.plan__icon{width:100px;height:100px;object-fit:contain;flex-shrink:0}
.plan__pricecol{display:flex;flex-direction:column;align-items:center;gap:10px}
.plan__price{display:flex;align-items:baseline;font-family:var(--serif);font-weight:700;color:var(--terra)}
.plan__price-main{font-size:42px;line-height:1}
.plan__price-tax{font-size:14px}
.plan__price-note{font-weight:500;font-size:13px;color:var(--mute2)}
.plan__dv{border:0;height:1px;width:60px;background:var(--border);margin:0}
.plan__desc{font-size:16px;color:var(--ink);line-height:1.3;text-align:center}

.price__benefits{display:flex;gap:16px;width:100%}
.benefit{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.benefit__icon{width:50px;height:50px;object-fit:contain;flex-shrink:0}
.benefit__t{font-weight:500;font-size:16px;color:var(--ink);line-height:1.25}

.price__notes{width:100%;display:flex;flex-direction:column;gap:5px}
.price__notes p{font-size:12px;color:var(--mute2);line-height:1.5}

/* ============================================================
 * Section 08: VOICE（お客さまの声）
 * 背景 白 / 2×2カード（円形アバター＋引用符）
 * ============================================================ */
.voice{width:100%;background:var(--white)}
.voice__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.voice__lead{font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.voice__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.vcard{display:flex;align-items:center;gap:16px;margin:0;
  background:#fbf9f5;border:1.2px solid var(--border);border-radius:14px;padding:20px}
.vcard__avatar{width:110px;height:110px;border-radius:32px;object-fit:cover;flex-shrink:0}
.vcard__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.vcard__tr{display:flex;align-items:center;gap:8px}
.vcard__quote{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--gold);line-height:1}
.vcard__attr{font-weight:700;font-size:14.5px;color:var(--navy)}
.vcard__text{margin:0;font-size:13.5px;color:var(--ink);line-height:1.63}
.voice__note{width:100%;font-size:12.5px;color:var(--mute2);line-height:1.6;text-align:left}

/* ============================================================
 * Section 09: TEAM（代表とスタッフのご紹介）
 * 背景 #fbf9f5 / 左 代表カード + 右 6人体制カード
 * ============================================================ */
.team{width:100%;background:#fbf9f5}
.team__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.team__row{display:flex;align-items:stretch;gap:24px;width:100%}

/* 代表カード */
.rep-card{flex-shrink:0;width:404px;display:flex;flex-direction:column;gap:16px;
  background:var(--white);border:1.4px solid var(--border);border-radius:16px;padding:26px 24px}
.rep-card__top{display:flex;gap:18px;align-items:flex-start}
.rep-card__photo{width:140px;height:180px;border-radius:12px;object-fit:cover;flex-shrink:0}
.rep-card__meta{display:flex;flex-direction:column;gap:10px;min-width:0}
.rep-card__role{font-weight:500;font-size:13px;color:var(--terra)}
.rep-card__name{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--navy)}
.rep-card__badges{display:flex;flex-wrap:wrap;gap:8px}
.rep-badge{background:#f8e8de;border-radius:14px;padding:4px 10px;
  font-weight:700;font-size:12px;color:var(--terra)}
.rep-card__msg{font-size:13.5px;color:var(--ink);line-height:1.7}
.rep-card__rec{margin-top:auto;background:#f8e8de;border-radius:10px;padding:12px 16px;
  display:flex;align-items:baseline;justify-content:center;gap:4px;font-weight:700}
.rep-card__rec .s{font-size:13px;color:var(--ink)}
.rep-card__rec .big{font-family:var(--serif);font-size:22px;color:var(--terra)}

/* 6人体制カード */
.staff-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;
  background:var(--white);border:1.4px solid var(--border);border-radius:16px;padding:26px}
.staff-card__head{display:flex;align-items:center;gap:10px}
.staff-card__sixtag{background:var(--navy);color:var(--white);border-radius:16px;padding:4px 11px;
  font-weight:700;font-size:13px}
.staff-card__headtxt{font-weight:700;font-size:16px;color:var(--navy)}
.staff-role{display:flex;align-items:center;gap:13px;padding:8px 0;width:100%}
.staff-role__ava{flex-shrink:0;width:50px;height:50px;border-radius:50%;background:#f8e8de;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.staff-role__photo{width:50px;height:50px;border-radius:50%;object-fit:cover}
.staff-role__sil{width:42px;height:42px;object-fit:contain}
.staff-role__name{flex:1;font-weight:700;font-size:18px;color:var(--ink);line-height:1.4}
.staff-role__count{flex-shrink:0;background:var(--navy);color:var(--white);border-radius:14px;
  padding:4px 11px;font-weight:700;font-size:13px}
.staff-card__note{background:#fbf9f5;border-radius:8px;padding:11px 14px;
  font-weight:500;font-size:12.5px;color:var(--terra);line-height:1.5}
.staff-card__foot{font-size:13px;color:var(--mute2);line-height:1.6}

/* ============================================================
 * Section 10: AREA（対応エリア）
 * 背景 白 / 左 地図カード + 右 情報カード
 * ============================================================ */
.area{width:100%;background:var(--white)}
.area__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.area__row{display:flex;align-items:stretch;gap:24px;width:100%}

.area-map{flex-shrink:0;width:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#fbf9f5;border-radius:16px;padding:20px}
.area-map__img{width:100%;height:300px;object-fit:contain;border-radius:8px}
.area-map__cap{font-weight:500;font-size:12.5px;color:var(--mute2);text-align:center}

.area-info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px;
  background:var(--white);border-radius:16px;padding:26px}
.area-info__lead{font-weight:700;font-size:16px;color:var(--navy);line-height:1.7}
.area-info__row{display:flex;gap:16px;align-items:center;width:100%}
.area-info__ic{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.area-info__ic img{width:52px;height:52px;object-fit:contain}
.area-info__col{display:flex;flex-direction:column;gap:3px;min-width:0}
.area-info__label{font-weight:700;font-size:12.5px;color:var(--terra)}
.area-info__val{font-weight:500;font-size:14px;color:var(--ink);line-height:1.57}
.area__note{font-size:24px;color:var(--mute2);line-height:1.4;text-align:center}

/* ============================================================
 * Section 11: FAQ（よくあるご質問）
 * 背景 #fbf9f5 / 2列11問アコーディオン行（閉じた状態）
 * ============================================================ */
.faq{width:100%;background:#fbf9f5}
.faq__inner{max-width:var(--inner);margin:0 auto;padding:72px 48px;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.faq__lead{font-size:18px;color:var(--ink);line-height:1.8;text-align:center}

.faq__grid{display:flex;gap:16px;width:100%;align-items:flex-start}
.faq__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:1.2px solid var(--border);border-radius:10px}
.faq-item__q{display:flex;align-items:center;gap:12px;padding:18px 16px;cursor:pointer;list-style:none}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__mark{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gold);
  color:var(--white);font-family:var(--serif);font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.faq-item__t{flex:1;font-weight:700;font-size:16px;color:var(--navy);line-height:1.25}
.faq-item__toggle{flex-shrink:0;position:relative;width:18px;height:18px}
.faq-item__toggle::before,.faq-item__toggle::after{content:"";position:absolute;background:var(--mute2);
  top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-item__toggle::before{width:16px;height:2px}
.faq-item__toggle::after{width:2px;height:16px;transition:transform .2s}
.faq-item[open] .faq-item__toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item__a{padding:0 16px 18px 64px}
.faq-item__a p{font-size:14px;color:var(--ink);line-height:1.75}
.faq-item__a p+p{margin-top:10px}
.faq-item__a-note{color:var(--mute2);font-size:12.5px !important;line-height:1.6 !important}
.faq__note{font-size:24px;color:var(--mute2);line-height:1.4;text-align:center}

/* ============================================================
 * Section 12: CTA（電話相談）
 * 背景 #fbf9f5 / 明朝見出し + テラコッタ電話ボタン + 副ボタン
 * ============================================================ */
.cta{width:100%;background:#fbf9f5}
.cta__inner{max-width:var(--inner);margin:0 auto;padding:76px 48px;
  display:flex;flex-direction:column;align-items:center;gap:22px}
.cta__head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cta__head-a{font-family:var(--script);font-size:26px;color:var(--terra)}
.cta__title{font-family:var(--serif);font-weight:700;font-size:50px;color:var(--navy);
  line-height:1.12;text-align:center}
.cta__free{background:#f8e8de;border-radius:20px;padding:6px 16px;
  font-weight:700;font-size:14px;color:var(--terra)}

.cta__box{width:620px;display:flex;flex-direction:column;gap:14px}
.cta-phone{background:var(--terra);border-radius:16px;padding:22px 24px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
.cta-phone__row{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--white)}
.cta-phone__row img{width:34px;height:34px}
.cta-phone__hours{font-weight:500;font-size:12.5px;color:var(--terra-soft)}
.cta-phone__num{font-family:var(--num);font-weight:700;font-size:42px;color:var(--white);letter-spacing:.42px}
.cta-phone__free{font-weight:700;font-size:13.5px;color:var(--terra-soft)}
.cta-sub{display:flex;gap:14px}
.cta-subbtn{flex:1 1 0;min-width:0;background:var(--white);border:1.4px solid var(--border);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px}
.cta-subbtn img{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.cta-subbtn__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.cta-subbtn__title{font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap}
.cta-subbtn__note{font-size:11.5px;color:var(--mute2);line-height:1.4}
.cta__note{font-size:13px;color:var(--mute2);line-height:1.7;text-align:center}

/* ============================================================
 * レスポンシブ（スマホ）— 現PC版を1カラムへ再構成
 * 主BP 900px（積み上げ）/ 560px（スマホ微調整）。DOM順は不変、order/flexで整列
 * ============================================================ */
@media (max-width:900px){
  :root{--inner:100%}

  /* 各セクション内側の左右余白を圧縮 */
  .concern__inner,.reason__inner,.omakase__inner,.compare__inner,.flow__inner,
  .price__inner,.voice__inner,.team__inner,.area__inner,.faq__inner,.cta__inner{
    padding-left:20px;padding-right:20px;padding-top:52px;padding-bottom:52px}
  .hero-lower__inner{padding:28px 20px}
  .sec-head__title{font-size:36px}
  /* 見出し・リード枠が内容幅に縮んで折返しはみ出るのを防ぐ */
  .sec-head{width:100%}
  .concern__head-txt{width:100%}

  /* --- Hero: 絶対配置 → 縦フロー（order で読み順を制御） --- */
  .hero-inner{height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px 20px}
  .hero-bg,.hero-loghead,.hero-logo,.hero-logo-read,.hero-label,.hero-title,.hero-sub,.hero-lead,
  .hero-repbadge,.hero-repcap{position:static;left:auto;top:auto;right:auto}
  /* ロゴと読みを同じ行に横並び（読みは英語INFeelの右横・下端に揃える）
     ロゴは flex:0 1 auto で必要時に縮み、読みは flex:0 0 auto で縮まない＝読みは必ず収まる */
  .hero-loghead{order:1;width:100%;display:flex;align-items:flex-end;gap:8px}
  .hero-logo{flex:0 1 auto;width:min(260px,62%);min-width:0;height:auto}
  .hero-logo img{width:100%;height:auto}
  .hero-logo-read{flex:0 0 auto;margin-bottom:2px;font-size:13px;white-space:nowrap}
  /* キャッチ画像は上下に画像内余白があるため負マージンでロゴ・見出しへ寄せる */
  .hero-label{order:2;width:100%;max-width:430px;height:auto;overflow:hidden;margin-top:-44px;margin-bottom:-44px}
  .hero-label img{width:100%;height:auto;object-fit:contain}
  .hero-title{order:3;width:100%;font-size:40px;line-height:1.45}
  .hero-sub{order:4;width:100%;font-size:22px}
  .hero-lead{order:5;width:100%;font-size:16px}
  .hero-lead .lead-br-pc{display:none}/* PC用の1つ目の改行は消し、「はじめての方にも…」前だけ改行 */
  /* PCは左白抜き背景イラスト、スマホは代表写真そのものを表示 */
  .hero-bg{display:none}
  .hero-rep-mobile{display:block;order:6;width:100%;height:auto;border-radius:12px}
  .hero-repbadge{order:7;align-self:center;width:auto;height:auto;padding:8px 18px;font-size:20px}
  .hero-repcap{order:8;align-self:center;text-align:center;font-size:15px;white-space:nowrap}

  /* Hero lower */
  .spec-row{flex-direction:column;width:100%}
  .spec-card{width:100%}
  /* アイコン(右端105px)とテキストの間に余白を追加 */
  .spec-card__txt{left:130px}
  .area-row{flex-wrap:wrap;width:100%}
  .hero-cta{width:100%}

  /* グリッド項目が min-width:auto で縮まず溢れるのを防ぐ */
  .onayami-card,.reason-card,.omakase-item,.vcard{min-width:0}

  /* Concern */
  .concern__head{flex-direction:column;align-items:center;text-align:center}
  .concern__title{font-size:40px}
  .concern__sub{text-align:center}
  .concern__woman{width:220px;height:auto;margin-top:8px}
  .concern__grid{grid-template-columns:minmax(0,1fr)}

  /* Reason / Omakase / Voice グリッド1列化（minmaxで縮小可能に） */
  .reason__grid{grid-template-columns:minmax(0,1fr)}
  .omakase__grid{grid-template-columns:minmax(0,1fr)}
  .omakase-wides{grid-template-columns:minmax(0,1fr)}
  .voice__grid{grid-template-columns:minmax(0,1fr)}

  /* 横溢れ保険：長い見出し・本文を確実に折り返す */
  html,body{overflow-x:hidden}
  .sec-head__title,.concern__title,.hero-title,.cta__title,
  .onayami-card__t,.onayami-card__d,.concern__banner-lead,.concern__banner-sub{
    overflow-wrap:anywhere;word-break:normal}

  /* Compare */
  .compare__row{flex-direction:column}
  .cmp-left{width:100%}

  /* Flow（矢印は下向きに回転） */
  .flow__steps{flex-direction:column}
  .flow-step{width:100%}
  .flow-step__iw{width:100%}
  .flow__arrow{transform:rotate(90deg)}

  /* Price */
  .price__plans{flex-direction:column}
  .price__benefits{flex-direction:column}

  /* Team */
  .team__row{flex-direction:column}
  .rep-card{width:100%}

  /* Area */
  .area__row{flex-direction:column}
  .area-map{width:100%}

  /* FAQ（2列を縦積み。列を全幅にして左寄り＆展開時の幅ブレを防ぐ） */
  .faq__grid{flex-direction:column}
  .faq__col{width:100%}

  /* CTA */
  .cta__box{width:100%}
  .cta__title{font-size:34px}
}

@media (max-width:560px){
  .sec-head__title{font-size:30px}
  .hero-title,.concern__title{font-size:32px}
  .hero-sub{font-size:20px}
  .cta__title{font-size:28px}

  /* 大きめ注記を抑える（24px→17px） */
  .flow__note,.area__note,.faq__note,.compare__note{font-size:17px}

  /* 価格が折り返さないよう、イラストを価格の上に縦積み */
  .plan__iw{flex-direction:column;height:auto;gap:6px}
  /* 価格・電話番号の縮小 */
  .plan__price-main{font-size:34px}
  .cta-phone__num{font-size:34px;letter-spacing:0}
  .phone-btn__num{font-size:30px;letter-spacing:0}

  /* 2列→1列（対比の私たち・ヒーロー副ボタン・CTA副ボタン） */
  .cmp-right__grid{flex-direction:column}
  .sub-row{flex-direction:column}
  .cta-sub{flex-direction:column}

  /* おまかせ項目テキスト */
  .omakase-item__t{font-size:20px}
  .omakase-item__note{font-size:14px}

  /* エリアバッジ縮小 */
  .area-badge{font-size:18px;padding:8px 16px}
  .area-badge--sm,.area-badge--all{padding:8px 14px}
}

/* ============================================================
 * Site Footer（本番フッター要素 / footer.php で読み込み）
 * 内容は infeel.jp 公式フッターに準拠、配色はLPに統一（NAVY背景）
 * ============================================================ */
.site-footer{width:100%;background:var(--navy);color:#fff}
.site-footer__inner{max-width:var(--inner);margin:0 auto;padding:56px 48px 28px;
  display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-start;justify-content:space-between}
.site-footer__name{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.4}
.site-footer__name span{font-size:15px;font-weight:400;color:#cdd6e2}
.site-footer__addr{margin-top:12px;font-size:14px;line-height:1.8;color:#cdd6e2}
.site-footer__contact{display:flex;flex-direction:column;gap:8px}
.site-footer__tel a{font-family:var(--num);font-weight:700;font-size:26px;color:#fff;letter-spacing:.3px}
.site-footer__meta{font-size:13.5px;line-height:1.7;color:#cdd6e2}
.site-footer__line{align-self:flex-start;margin-top:4px;background:#06c755;color:#fff;
  border-radius:8px;padding:9px 18px;font-weight:700;font-size:14px}
.site-footer__nav{display:flex;flex-direction:column;gap:12px}
.site-footer__nav a{font-size:14px;color:#e6ebf2;border-bottom:1px solid transparent;padding-bottom:1px}
.site-footer__nav a:hover{border-bottom-color:var(--gold)}
.site-footer__copy{border-top:1px solid rgba(255,255,255,.15);margin:0;
  padding:20px 48px;text-align:center;font-size:12.5px;color:#aab6c6}

@media (max-width:900px){
  .site-footer__inner{flex-direction:column;gap:28px;padding:44px 20px 24px}
  .site-footer__copy{padding:18px 20px}
}

/* ============================================================
 * スクロール連動アニメーション（上品に控えめ）
 * 進歩的強化: anim.js が <html> に .anim-ready を付与したときだけ
 * 要素を隠す。JS無効/未対応でも内容は普通に表示される。
 * OSの「動きを減らす」設定では完全に無効化。
 * ============================================================ */
:root{ --reveal-y:24px; --reveal-dur:.6s; }

/* アンカー(#hero 等)へのスムーズスクロール */
html{ scroll-behavior:smooth; }

.anim-ready .reveal{
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out;
  will-change:opacity, transform;
}
.anim-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .anim-ready .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
 * 電話リンクは「スマホ(タッチ端末)のみ」タップ発信を有効化。
 * PC(マウス=精密ポインタ)では発信できないため、番号は表示のみに。
 * ※画面幅ではなく hover/pointer で判定するので、PCで
 *   ブラウザ幅を狭めても誤ってリンクが有効化されない。
 * ============================================================ */
@media (hover: hover) and (pointer: fine){
  .phone-btn,
  .cta-phone,
  .site-footer__tel a{
    pointer-events:none;   /* クリック/タップを受け付けない */
    cursor:default;        /* リンクらしいカーソルも出さない */
  }
}

/* ============================================================
 * 追従CTA（float-cta） 2026-09-04 追加
 * PC=右端タブ→左に展開 / SP=下部バー→上に展開
 * ============================================================ */
/* ---- 共通 ---- */
.fcta{position:fixed;z-index:90;font-family:var(--sans)}
.fcta[hidden]{display:none}
.fcta__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fcta a,.fcta button{text-decoration:none;-webkit-tap-highlight-color:transparent}
.fcta__panel[hidden]{display:none}
.fcta__lead{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--mute2)}
.fcta__lead b{color:var(--terra);font-weight:700}

/* 電話（パネル内・主役） */
.fcta__tel{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--terra);
  border-radius:12px;padding:12px 14px;color:#fff}
.fcta__tel img{filter:brightness(0) invert(1);flex-shrink:0}
.fcta__tel-col{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.fcta__tel-label{font-size:13px;font-weight:700}
.fcta__tel-num{font-family:var(--num);font-size:22px;font-weight:700;letter-spacing:.3px}

/* サブ（LINE / Web） */
.fcta__subs{display:flex;gap:8px;margin-top:8px}
.fcta__sub{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:1.4px solid var(--border);border-radius:10px;padding:10px 6px;
  font-size:12.5px;font-weight:700;color:var(--navy)}
.fcta__sub img{flex-shrink:0}

/* ============ PC（769px〜）: 右端タブ → 左に展開 ============ */
@media (min-width:769px){
  .fcta{right:0;top:34%;transform:translateY(-50%);display:flex;align-items:center}
  .fcta__panel{order:1;width:272px;background:#fff;border:1px solid var(--border);
    border-right:none;border-radius:14px 0 0 14px;padding:16px;
    box-shadow:0 6px 28px -12px rgba(30,58,95,.28)}
  .fcta__bar{order:2}
  .fcta__quick{display:none}            /* PCは発信できないのでタブに集約 */
  .fcta__toggle{display:flex;flex-direction:column;align-items:center;gap:10px;
    background:var(--navy);color:#fff;border:none;cursor:pointer;
    padding:20px 10px;border-radius:12px 0 0 12px;
    box-shadow:0 6px 28px -12px rgba(30,58,95,.4)}
  .fcta__toggle-label{writing-mode:vertical-rl;font-size:14px;font-weight:700;letter-spacing:.14em}
  .fcta__toggle-icon{width:9px;height:9px;border-top:2px solid #fff;border-left:2px solid #fff;
    transform:rotate(-45deg)}                       /* ◀ 開く合図 */
  .fcta.is-open .fcta__toggle-icon{transform:rotate(135deg)}
  .fcta__toggle:hover{background:var(--navy-strong)}
  .fcta__toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
}

/* ============ SP（〜768px）: 下部に1本のバー → 上に展開 ============ */
@media (max-width:768px){
  .fcta{left:0;right:0;bottom:0;padding:0 12px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(250,249,246,.96) 62%,rgba(250,249,246,0))}
  .fcta__panel{background:#fff;border:1px solid var(--border);border-radius:14px;
    padding:14px;margin-bottom:8px;box-shadow:0 8px 30px -12px rgba(30,58,95,.3)}
  .fcta__bar{display:flex}
  .fcta__quick{display:none}                 /* 電話は展開パネル側に集約（番号もそこで見える） */
  .fcta__toggle{flex:1 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;
    background:var(--navy);border:none;border-radius:11px;color:#fff;cursor:pointer;padding:12px 16px;
    box-shadow:0 5px 18px -9px rgba(30,58,95,.75)}
  .fcta__toggle-label{font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;letter-spacing:.02em}
  .fcta__toggle-icon{width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;
    transform:rotate(-45deg);flex-shrink:0}   /* ▲ 開く合図 */
  .fcta.is-open .fcta__toggle-icon{transform:rotate(135deg)}
  .fcta__toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
}

/* ============================================================
 * 【A案】お悩みセクション コンパクト化（スマホのみ・1列維持）
 *   PC（901px以上）には一切影響しない
 * ============================================================ */
@media (max-width:900px){
  /* --- カード本体 --- */
  .onayami-card{gap:12px;padding:16px;align-items:center}
  /* チェックマークは省略（アイコンで判別できるため。右列が広がり行数も減る） */
  .onayami-card__check{display:none}
  .onayami-card__lcol{flex-direction:row;align-items:center;gap:8px}
  .onayami-card__icon{width:62px;height:62px}
  .onayami-card__rcol{gap:5px}
  .onayami-card__t{font-size:17px;line-height:1.42}
  .onayami-card__d{font-size:13px;line-height:1.55}
  .concern__grid{gap:10px}

  /* --- 折り返しを日本語として自然に --- */
  /* 既存の overflow-wrap:anywhere は文字単位で切るため「がや／やこしい」のような
     不自然な改行が起きる。文節優先(auto-phrase)＋禁則処理に戻す。
     auto-phrase 非対応ブラウザでも normal が効くので安全。 */
  .onayami-card__t,.onayami-card__d,
  .concern__banner-lead,.concern__banner-sub{
    overflow-wrap:normal;
    word-break:auto-phrase;
    line-break:strict;
  }

  /* --- 締めバナーを圧縮 --- */
  .concern__banner{margin-top:24px;padding:16px 18px;gap:2px;border-radius:12px}
  .concern__banner-lead{font-size:19px;line-height:1.4}
  .concern__banner-sub{font-size:13.5px;line-height:1.6}
}