@charset "UTF-8";
/* ============================================================================
   多言語コールセンター / ライフライン手続き代行サービス
   共通スタイルシート（index.html と contact-realestate.html の2ページで共有）

   設計方針
   - 色・フォント・レイアウトの値は :root にまとめ、ここだけ見れば調整できる状態にする
   - クラス名は BEM 風（block__element--modifier）
   - 外部ライブラリは使わない（Bootstrap/AOS/Owl は不要。JSは各HTML末尾に素で書く）
   - ブレークポイントは 1140px / 900px / 560px の3段
     900px 以下でグローバルナビをハンバーガー＋右スライドのドロワーに切り替える
   ========================================================================= */

:root{
  /* --- 色 -------------------------------------------------------------
     competitor は「水色ベース＋黄色CTA」。こちらは同じ骨格のまま彩度を落とし、
     ネイビーで締めてコントラストを取ることで信頼感を上げている。 */
  --white:      #FFFFFF;
  --navy:       #12395F;   /* 見出し・フッター */
  --navy-deep:  #0C2942;   /* フッター最下部 */
  --blue:       #1D74C7;   /* アクセント・アイコン */
  --blue-lt:    #3E9BDE;
  --sky:        #EAF4FC;   /* セクション背景（淡い水色） */
  --sky-deep:   #D6E9F8;   /* カード枠・区切り */
  --cream:      #FEF6E7;   /* セクション背景（淡いベージュ） */
  --amber:      #F5A524;   /* CTA。押せる場所は必ずこの色にする */
  --amber-dk:   #DD8F0C;
  --text:       #33475B;
  --muted:      #74889D;
  --line:       #E3ECF4;
  --gray-bg:    #F1F4F7;   /* Before カードなど「よくない状態」の面 */

  /* --- タイポ --------------------------------------------------------- */
  --font: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Outfit", var(--font);

  /* --- レイアウト ----------------------------------------------------- */
  --wrap: 1160px;
  --hd-h: 76px;
  --radius: 16px;
  --radius-lg: 24px;
  --card: 0 6px 22px -12px rgba(18,57,95,.28);
  --card-h: 0 16px 34px -16px rgba(18,57,95,.34);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--hd-h); }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px; line-height:1.85;
  color:var(--text); background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* ドロワーが画面外にある間の横スクロールを止める */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
@media (max-width:560px){ .wrap{ width:calc(100% - 32px); } }

/* 数字と英字だけ Outfit にして視認性を上げる（日本語は Noto Sans JP のまま） */
.en{ font-family:var(--font-en); font-weight:700; letter-spacing:.04em; }

/* 改行の出し分け。日本語は文節で折り返したい箇所だけ手で制御する */
.pc-br{ display:inline; }
.sp-br{ display:none; }
@media (max-width:900px){ .pc-br{ display:none; } }
@media (max-width:560px){ .sp-br{ display:inline; } }

/* --------------------------------------------------------------- 汎用 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:15px 34px; border-radius:999px;
  font-weight:700; font-size:16px; line-height:1.4; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn::after{ content:"→"; font-family:var(--font-en); transition:transform .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translateX(3px); }
.btn--primary{
  background:var(--amber); color:#3A2A05;
  box-shadow:0 8px 20px -8px rgba(245,165,36,.75);
}
.btn--primary:hover{ background:var(--amber-dk); box-shadow:0 12px 26px -8px rgba(245,165,36,.85); }
.btn--ghost{ background:var(--white); color:var(--navy); border:2px solid var(--sky-deep); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn--lg{ padding:19px 46px; font-size:18px; }
.btn--block{ display:flex; width:100%; }

/* アイコン。生成PNGを mask として使い、色は currentColor で決める。
   →「1ファイルのまま、置く場所ごとに色を変えられる」ので色違いを量産しなくて済む。
   HTML側: <span class="ic ic--util-denki"></span>
   --ic の実体（data URI）は css/icons.css にある。あれは自動生成なので直接編集しないこと。 */
.ic{
  display:block; width:100%; height:100%;
  background-color:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat;
}

/* セクション共通 */
.sec{ padding:96px 0; }
.sec--sky{ background:var(--sky); }
.sec--cream{ background:var(--cream); }
.sec__head{ text-align:center; margin-bottom:56px; }
.sec__label{
  display:block; font-family:var(--font-en); font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:10px;
}
.sec__title{
  font-size:clamp(26px, 3.4vw, 40px); font-weight:700; line-height:1.45; color:var(--navy);
}
.sec__title .hl{
  color:var(--blue);
  /* 数字や要点だけ下線マーカーで拾わせる（競合の黄色マーカー表現の置き換え） */
  background:linear-gradient(transparent 62%, rgba(245,165,36,.45) 62%);
  padding-inline:.1em;
}
.sec__lead{ margin-top:20px; color:var(--muted); font-size:16px; }
.sec__note{ margin-top:14px; font-size:13px; color:var(--muted); }

/* スクロールで浮き上がる演出。JSで .is-in を付ける。
   隠す指定は html.js が付いているときだけ有効にしている。
   こうしておかないと、JSが動かない環境で本文が永久に見えなくなる。 */
.js .rv{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js .rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
}

/* ============================================================== ヘッダー */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hd-h);
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hd__inner{ height:100%; display:flex; align-items:center; gap:28px; }
/* ロゴは LifeReady Japan（シンボル＋ロゴタイプの横組みロックアップ）。
   単色ネイビーで作ってあるので、濃紺のフッターだけ白版（-white）に差し替える。
   生成は tools/pick-logo.py。 */
.hd__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.hd__logo-img{ height:36px; width:auto; }
.hd__logo-sub{ font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.08em; line-height:1.2; }
.hd__nav{ margin-left:auto; }
.hd__nav ul{ display:flex; gap:26px; }
.hd__nav a{ font-size:14.5px; font-weight:500; color:var(--text); position:relative; padding-block:6px; }
.hd__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transition:transform .2s ease;
}
.hd__nav a:hover::after, .hd__nav a.is-active::after{ transform:scaleX(1); }
.hd__cta{ padding:11px 24px; font-size:14.5px; }
.hd__burger{ display:none; margin-left:auto; width:44px; height:44px; position:relative; }
.hd__burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hd__burger span:nth-child(1){ top:15px; }
.hd__burger span:nth-child(2){ top:21px; }
.hd__burger span:nth-child(3){ top:27px; }
.hd__burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hd__burger.is-open span:nth-child(2){ opacity:0; }
.hd__burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ドロワー（900px以下） */
.drawer{
  position:fixed; top:var(--hd-h); right:0; bottom:0; z-index:99;
  width:min(320px, 84vw); padding:28px 24px 40px;
  background:var(--white); border-left:1px solid var(--line);
  box-shadow:-14px 0 34px -20px rgba(18,57,95,.4);
  transform:translateX(102%); transition:transform .3s ease;
  overflow-y:auto;
}
.drawer.is-open{ transform:none; }
.drawer ul{ display:grid; gap:4px; margin-bottom:26px; }
.drawer a{ display:block; padding:13px 4px; border-bottom:1px solid var(--line); font-weight:500; }
.drawer__overlay{
  position:fixed; inset:var(--hd-h) 0 0 0; z-index:98; background:rgba(12,41,66,.4);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.drawer__overlay.is-open{ opacity:1; visibility:visible; }

/* ヘッダーの要素は絶対に折り返させない。
   ロゴ＋6メニュー＋CTAで1160pxをわずかに超えるため、1300px以下で間隔を詰める。
   （問い合わせページのCTAは枠線付きで少し広く、ここを詰めないと2行になる） */
.hd__logo, .hd__nav a, .hd__cta{ white-space:nowrap; }
.hd__cta{ flex:none; }
@media (max-width:1300px){ .hd__inner{ gap:20px; } .hd__nav ul{ gap:20px; } }
@media (max-width:1140px){ .hd__nav ul{ gap:16px; } .hd__nav a{ font-size:13.5px; } }
@media (max-width:900px){
  .hd__nav, .hd__cta{ display:none; }
  .hd__burger{ display:block; }
}

/* ================================================================ ヒーロー */
.hero{
  padding:calc(var(--hd-h) + 64px) 0 84px;
  background:
    radial-gradient(1100px 520px at 88% -10%, #DCEDFB 0%, rgba(220,237,251,0) 62%),
    linear-gradient(180deg, #F5FAFE 0%, #FFFFFF 100%);
}
/* PC: 左カラムに「本文」と「訴求3点」を縦に置き、右カラムの画像が2行ぶんをまたぐ。
   スマホ: 1カラムにしてDOM順（本文 → FV画像 → 訴求3点）で積む。
   テキストが続くと読む前に離脱されるため、スマホでは先に写真を見せる。 */
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  column-gap:56px; row-gap:34px; align-items:center;
}
.hero__body  { grid-column:1; grid-row:1; }
.hero__visual{ grid-column:2; grid-row:1 / span 2; }
.hero__points{ grid-column:1; grid-row:2; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:999px; background:var(--white);
  border:1px solid var(--sky-deep); box-shadow:var(--card);
  font-size:13.5px; font-weight:700; color:var(--blue);
}
.hero__badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); }
/* 見出しは「サービス名」だけを大きく出し、何をするサービスかは .hero__sub で受ける。
   1文に詰め込むと一読で何のサービスか分からなくなるため、2段に分けている。 */
.hero__title{
  margin:22px 0 14px;
  font-size:clamp(28px, 4vw, 44px); font-weight:700; line-height:1.4; color:var(--navy);
  letter-spacing:-.01em;
}
.hero__title .accent{ color:var(--blue); }
.hero__sub{
  font-size:clamp(17px, 2.1vw, 22px); font-weight:700; line-height:1.6;
  color:var(--navy); margin-bottom:18px;
}
/* 黄色マーカー。::after を z-index:-1 で敷く書き方だと、
   .hero 自身の背景に隠れて一切見えなくなる（負のz-indexは親の背景より下に描かれるため）。
   .sec__title .hl と同じく、背景グラデーションで下線を描く方式に統一している。 */
.hero__title .free, .hero__sub .free{
  color:var(--navy); white-space:nowrap;
  background:linear-gradient(transparent 62%, rgba(245,165,36,.45) 62%);
  padding-inline:.1em;
}
.hero__lead{ font-size:17px; color:var(--text); margin-bottom:30px; }
/* 日本語は単語の途中でも改行されるので、代行範囲の各項目が割れないようにする
   （「引越し」が「引」＋「越し」に分かれて表示された） */
.hero__lead .nb{ white-space:nowrap; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__note{ font-size:13px; color:var(--muted); margin-top:16px; }

/* 訴求3点 */
.hero__points{ display:grid; gap:14px; }
.hero__point{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--sky-deep); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--card);
}
.hero__point-check{
  flex:none; width:26px; height:26px; margin-top:3px; border-radius:50%;
  background:var(--blue); display:grid; place-items:center;
}
.hero__point-check svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.6; }
.hero__point b{ display:block; color:var(--navy); font-size:16px; line-height:1.5; }
.hero__point span{ font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ヒーロー画像＋周囲の多言語カード（競合の合成画像をCSSで再現。文言差し替えが効く） */
.hero__visual{ position:relative; }
.hero__photo{
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(18,57,95,.55);
  aspect-ratio:3/4; background:var(--sky);
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; }
.hero__chip{
  position:absolute; display:flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px; background:var(--white);
  box-shadow:0 12px 26px -12px rgba(18,57,95,.42);
  font-size:13.5px; font-weight:700; color:var(--navy); white-space:nowrap;
  animation:float 4.5s ease-in-out infinite;
}
/* .ic は width/height:100% なので、この指定を .ic より後ろに置いて上書きする */
.hero__chip-ic{ width:18px; height:18px; flex:none; color:var(--blue); }
.hero__chip--1{ top:9%;  left:-8%;  animation-delay:0s; }
.hero__chip--2{ top:33%; right:-9%; animation-delay:.6s; }
.hero__chip--3{ top:60%; left:-11%; animation-delay:1.2s; }
.hero__chip--4{ bottom:6%; right:-6%; animation-delay:1.8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce){ .hero__chip{ animation:none; } }

.hero__bubble{
  position:absolute; right:-4%; bottom:16%;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 9px; border-radius:999px;
  background:var(--navy); color:#fff; font-size:13px; font-weight:700;
  box-shadow:0 14px 30px -14px rgba(12,41,66,.7);
}
.hero__bubble img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }

@media (max-width:900px){
  .hero{ padding:calc(var(--hd-h) + 40px) 0 64px; }
  .hero__grid{ grid-template-columns:1fr; row-gap:40px; }
  .hero__body, .hero__visual, .hero__points{ grid-column:1; grid-row:auto; }
  .hero__visual{ width:min(360px, 82%); margin-inline:auto; }
  .hero__chip--1{ left:-6%; } .hero__chip--3{ left:-8%; }
}
@media (max-width:560px){
  .hero__chip{ font-size:12px; padding:8px 13px; }
  .hero__chip--1{ left:-4%; } .hero__chip--2{ right:-4%; }
  .hero__chip--3{ left:-5%; } .hero__chip--4{ right:-2%; }
  .hero__bubble{ right:0; font-size:12px; }
  .hero__actions .btn{ width:100%; }
}

/* ========================================================= Before / After
   競合は2枚の画像で作っていて文言修正もスマホ表示も効かない。
   ここは HTML+CSS で組み、文言・言語・並びを後から自由に変えられるようにしている。 */
/* Before/After は PC・タブレットでは左右2段組み。上下に積むとページが無駄に長くなる。
   図は縦組みのものを使っているので、細いカラムでも文字が読める。
   700px以下だけ縦に積む。 */
.ba{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; }
.ba__arrow{
  justify-self:center; width:52px; height:52px; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center; flex:none;
  box-shadow:0 10px 22px -10px rgba(29,116,199,.8);
}
.ba__arrow svg{ width:22px; height:22px; fill:currentColor; }
.ba__card{
  border-radius:var(--radius-lg); padding:32px 28px 28px; display:flex; flex-direction:column;
}
.ba__card--before{ background:var(--gray-bg); border:1px solid #E1E7ED; }
.ba__card--after{ background:var(--white); border:2px solid var(--blue); box-shadow:var(--card-h); }
.ba__tag{
  display:inline-block; align-self:flex-start; padding:5px 16px; border-radius:999px;
  font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.08em; margin-bottom:20px;
}
.ba__card--before .ba__tag{ background:#D7DEE5; color:#5A6B7C; }
.ba__card--after  .ba__tag{ background:var(--blue); color:#fff; }

/* 図解は1枚絵（design/ba-patterns/ の候補から tools/pick-ba.py で書き出したもの）。
   CSSで人物や矢印を組む方式は、狭いカード幅だとラベルの折り返しが破綻したため取りやめた。
   画像は文言を変えられない代わりに、レイアウトが崩れない。
   結果メッセージとキャプションだけはHTML側のテキストとして残してある。 */
.ba__img{
  display:block; width:100%; height:auto;
  margin:0 auto 20px; border-radius:14px; background:var(--white);
}
.ba__card--before .ba__img{ filter:saturate(.9); }   /* 「よくない状態」側は少し色を抜く */

.ba__result{
  margin-top:auto;
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; border-radius:12px; font-size:14px; line-height:1.7;
}
.ba__card--before .ba__result{ background:#FFF1F0; color:#B4443C; }
.ba__card--after  .ba__result{ background:var(--sky); color:var(--navy); }
.ba__result svg{ flex:none; width:20px; height:20px; margin-top:3px; fill:currentColor; }
.ba__cap{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }

@media (max-width:900px){
  /* タブレット帯は横並びのままだが、余白を詰めて図に幅を回す（1枚あたり約40px稼げる） */
  .ba{ gap:16px; }
  .ba__card{ padding:24px 18px 22px; }
  .ba__arrow{ width:40px; height:40px; }
  .ba__arrow svg{ width:18px; height:18px; }
}
@media (max-width:700px){
  /* 狭い画面では左右に並べられないので縦に積む。矢印は下向きに */
  .ba{ grid-template-columns:1fr; gap:18px; }
  .ba__card{ padding:28px 22px 24px; }
  .ba__arrow{ transform:rotate(90deg); }
  .ba__img{ max-width:420px; }   /* 縦長なので幅いっぱいだと縦に伸びすぎる */
}



/* ============================================================== 対応言語 */
.lang{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.lang__card{
  background:var(--white); border:1px solid var(--sky-deep); border-radius:var(--radius);
  padding:20px 12px 16px; text-align:center; box-shadow:var(--card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.lang__card:hover{ transform:translateY(-4px); box-shadow:var(--card-h); }
.lang__card--planned{ background:#FBFCFD; border-style:dashed; box-shadow:none; opacity:.82; }
/* 国旗は円形にすると中国・フィリピンのように端に意匠がある旗が切れてしまうため、
   3:2 の角丸長方形で旗の全体を見せる */
.lang__flag{
  display:block;
  width:51px; height:34px; margin:0 auto 12px; border-radius:5px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(18,57,95,.14) inset, 0 3px 8px -5px rgba(18,57,95,.6);
}
.lang__flag svg{ width:100%; height:100%; display:block; }
.lang__ja{ display:block; font-size:14px; font-weight:700; color:var(--navy); line-height:1.4; }
.lang__native{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.lang__soon{
  display:inline-block; margin-top:8px; padding:2px 9px; border-radius:999px;
  background:var(--cream); color:#9A6A0A; font-size:10.5px; font-weight:700;
}
@media (max-width:1140px){ .lang{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){
  .lang{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .lang__card{ padding:16px 6px 13px; }
  .lang__flag{ width:38px; height:38px; margin-bottom:9px; }
  .lang__ja{ font-size:12.5px; }
  .lang__native{ font-size:10.5px; }
}

/* ============================================================ 導入メリット */
.merit{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 24px; }
.merit__card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:46px 30px 32px; box-shadow:var(--card);
  transition:transform .22s ease, box-shadow .22s ease;
}
.merit__card:hover{ transform:translateY(-6px); box-shadow:var(--card-h); }
.merit__no{
  position:absolute; top:-16px; left:30px;
  padding:7px 18px; border-radius:999px; background:var(--navy); color:#fff;
  font-family:var(--font-en); font-size:12.5px; font-weight:700; letter-spacing:.1em;
}
.merit__ic{ width:56px; height:56px; color:var(--blue); margin-bottom:20px; }
.merit__ttl{ font-size:19px; font-weight:700; color:var(--navy); line-height:1.55; margin-bottom:14px; }
.merit__txt{ font-size:14.5px; color:var(--text); line-height:1.9; }
.merit__note{ display:block; margin-top:10px; font-size:12px; color:var(--muted); }
/* 1列に落とすのは700px以下だけ。900pxで落とす指定はカードが3枚だった頃の名残で、
   4枚になった今はタブレットで縦に4つ並んで無駄に長くなっていた。
   タブレット帯（701〜900px）は2列でも1枚あたり約320px確保できる。 */
@media (max-width:900px){ .merit{ gap:22px 18px; } .merit__card{ padding:42px 22px 26px; } }
@media (max-width:700px){ .merit{ grid-template-columns:1fr; gap:32px; } .merit__card{ padding:46px 30px 32px; } }

/* ======================================================== 代行可能な手続き */
/* 項目が7つあるので、6列固定だと最後の1枚だけが次の行に取り残される。
   flexにして「4枚＋3枚」に分け、埋まらない行は中央に寄せる。 */
.util{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.util__card{
  flex:0 1 calc((100% - 18px * 3) / 4);
  background:var(--white); border-radius:var(--radius); padding:28px 12px 22px;
  text-align:center; box-shadow:var(--card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.util__card:hover{ transform:translateY(-5px); box-shadow:var(--card-h); }
.util__ic{ width:48px; height:48px; margin:0 auto 14px; color:var(--blue); }
.util__ttl{ display:block; font-size:15px; font-weight:700; color:var(--navy); }
.util__sub{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; }
@media (max-width:1140px){ .util__card{ flex-basis:calc((100% - 18px * 2) / 3); } }
@media (max-width:560px){
  .util{ gap:12px; }
  .util__card{ flex-basis:calc((100% - 12px) / 2); }
}

/* ========================================================== ご提携の流れ
   競合には無いセクション。提携までの手順が見えないのが競合最大の弱点だったため新設。 */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.flow__step{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:34px 24px 28px; text-align:center; box-shadow:var(--card);
}
/* ステップ間の矢印。最後の1つには出さない */
.flow__step:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-14px; z-index:2;
  width:0; height:0; border-left:9px solid var(--blue-lt);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  transform:translateY(-50%);
}
.flow__no{
  display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:16px;
  border-radius:50%; background:var(--blue); color:#fff;
  font-family:var(--font-en); font-size:17px; font-weight:700;
}
.flow__ic{ width:44px; height:44px; margin:0 auto 14px; color:var(--navy); opacity:.85; }
.flow__ttl{ font-size:16.5px; font-weight:700; color:var(--navy); line-height:1.55; margin-bottom:9px; }
.flow__txt{ font-size:13.5px; color:var(--muted); line-height:1.8; }
.flow__badge{
  display:inline-block; margin-top:12px; padding:4px 13px; border-radius:999px;
  background:var(--cream); color:#9A6A0A; font-size:12px; font-weight:700;
}
@media (max-width:900px){
  .flow{ grid-template-columns:1fr; gap:30px; }
  .flow__step:not(:last-child)::after{
    top:auto; bottom:-22px; right:50%; transform:translateX(50%) rotate(90deg);
  }
}

/* ========================================================= オペレーター */
.op{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.op__card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; box-shadow:var(--card); text-align:center;
}
.op__photo{
  display:block;
  width:104px; height:104px; margin:0 auto 18px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 4px var(--white), 0 0 0 6px var(--sky-deep);
  background:var(--sky);
}
.op__photo img{ width:100%; height:100%; object-fit:cover; }
.op__name{ font-size:18px; font-weight:700; color:var(--navy); }
.op__meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.op__tag{
  padding:4px 13px; border-radius:999px; background:var(--sky);
  color:var(--blue); font-size:12px; font-weight:700;
}
.op__tag--yr{ background:var(--cream); color:#9A6A0A; }
.op__txt{ font-size:14px; color:var(--text); line-height:1.9; text-align:left; }
@media (max-width:900px){ .op{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ================================================================== FAQ */
.faq{ max-width:880px; margin-inline:auto; display:grid; gap:14px; }
.faq__item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--card);
}
.faq__q{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:22px 24px; font-size:16px; font-weight:700; color:var(--navy); line-height:1.6;
}
.faq__q-mark{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-family:var(--font-en); font-size:15px; font-weight:700;
}
.faq__q-sign{
  flex:none; margin-left:auto; width:20px; height:20px; position:relative;
}
.faq__q-sign::before, .faq__q-sign::after{
  content:""; position:absolute; inset:9px 0 auto 0; height:2px; background:var(--blue);
  border-radius:2px; transition:transform .25s ease;
}
.faq__q-sign::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__q-sign::after{ transform:rotate(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__a-inner{
  display:flex; gap:16px; padding:0 24px 24px 24px; font-size:15px; line-height:1.9;
}
.faq__a-mark{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--cream); color:#9A6A0A;
  display:grid; place-items:center; font-family:var(--font-en); font-size:15px; font-weight:700;
}
@media (max-width:560px){
  .faq__q{ padding:18px 16px; font-size:15px; gap:12px; }
  .faq__a-inner{ padding:0 16px 20px; gap:12px; font-size:14px; }
}

/* ================================================================== CTA */
.cta{ background:linear-gradient(135deg, var(--navy) 0%, #1B5285 100%); color:#fff; padding:0; }
.cta__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.cta__body{ padding:88px 0; }
.cta__title{ font-size:clamp(26px, 3.2vw, 38px); font-weight:700; line-height:1.5; margin-bottom:20px; }
.cta__title .hl{ color:var(--amber); }
.cta__txt{ font-size:16px; line-height:1.95; color:rgba(255,255,255,.86); margin-bottom:28px; }
.cta__points{ display:grid; gap:12px; margin-bottom:34px; }
.cta__point{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; }
.cta__point svg{
  flex:none; width:24px; height:24px; padding:5px; border-radius:50%;
  background:var(--amber); fill:none; stroke:#3A2A05; stroke-width:3;
}
.cta__visual{ position:relative; align-self:stretch; display:flex; align-items:flex-end; }
.cta__photo{
  width:100%; aspect-ratio:3/4; max-height:520px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden; background:rgba(255,255,255,.08);
}
.cta__photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .cta__grid{ grid-template-columns:1fr; gap:0; }
  .cta__body{ padding:72px 0 60px; }
  .cta__visual{ display:none; }   /* スマホでは写真より本文とボタンを優先する */
  .cta .btn{ width:100%; }
}

/* ============================================================== フッター */
.ft{ background:var(--navy-deep); color:rgba(255,255,255,.8); padding:72px 0 0; font-size:14px; }
.ft__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; padding-bottom:56px; }
.ft__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ft__logo-img{ height:38px; width:auto; }
.ft__logo-sub{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.08em; line-height:1.2; }
.ft__tagline{ margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.7); line-height:1.9; }
.ft__nav{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.ft__nav a{ font-size:13.5px; color:rgba(255,255,255,.72); }
.ft__nav a:hover{ color:#fff; text-decoration:underline; }

.ft__table{ width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.85; }
.ft__table th, .ft__table td{
  text-align:left; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top;
}
.ft__table th{ width:7.5em; font-weight:700; color:rgba(255,255,255,.62); white-space:nowrap; padding-right:16px; }
.ft__table td{ color:rgba(255,255,255,.88); }
/* 所在地3拠点・TEL2本・沿革のように、1つのセルに複数の項目が入る箇所 */
.ft__table td p + p{ margin-top:10px; }
.ft__loc{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.55); line-height:1.5;
}
.ft__table a{ text-decoration:underline; text-underline-offset:2px; }
.ft__table a:hover{ color:#fff; }
@media (max-width:560px){
  /* 幅が足りないと住所が th に押しつぶされるので、ラベルと内容を縦に積む */
  .ft__table th, .ft__table td{ display:block; width:auto; padding-right:0; }
  .ft__table th{ border-bottom:0; padding-bottom:2px; }
  .ft__table td{ padding-top:0; }
}

.ft__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(255,255,255,.55);
}
@media (max-width:900px){ .ft__grid{ grid-template-columns:1fr; gap:40px; } }

/* トップへ戻る */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:90; width:48px; height:48px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px -10px rgba(12,41,66,.8);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.totop.is-show{ opacity:1; visibility:visible; transform:none; }
.totop svg{ width:18px; height:18px; fill:currentColor; }

/* ==================================================== 問い合わせページ専用 */
.page-head{
  padding:calc(var(--hd-h) + 56px) 0 52px;
  background:linear-gradient(180deg, #F5FAFE 0%, var(--white) 100%);
  text-align:center;
}
.page-head__label{
  display:block; font-family:var(--font-en); font-size:13px; font-weight:700;
  letter-spacing:.16em; color:var(--blue-lt); margin-bottom:10px;
}
.page-head__title{ font-size:clamp(28px, 3.6vw, 42px); font-weight:700; color:var(--navy); }
.page-head__lead{ margin-top:18px; color:var(--muted); font-size:15.5px; }

/* 安心バッジ（競合のフォームページには一切ない要素。離脱防止のために置く） */
.assure{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px; }
.assure__item{
  background:var(--white); border:1px solid var(--sky-deep); border-radius:var(--radius);
  padding:22px 18px; text-align:center; box-shadow:var(--card);
}
.assure__val{ font-family:var(--font-en); font-size:30px; font-weight:700; color:var(--blue); line-height:1.2; }
.assure__val small{ font-family:var(--font); font-size:15px; font-weight:700; margin-left:3px; }
.assure__key{ display:block; margin-top:7px; font-size:13.5px; font-weight:700; color:var(--navy); }
@media (max-width:560px){
  .assure{ grid-template-columns:1fr; gap:12px; }
  .assure__item{ display:flex; align-items:center; justify-content:space-between; text-align:left; padding:16px 20px; }
  .assure__key{ margin-top:0; }
}

/* フォーム。競合は左2/3に寄っていて右に大きな余白が残っていたので中央寄せにする */
.formbox{
  max-width:760px; margin-inline:auto;
  background:var(--white); border:1px solid var(--sky-deep); border-radius:var(--radius-lg);
  padding:44px 48px; box-shadow:var(--card-h);
}
.form__row{ margin-bottom:26px; }
.form__label{
  display:flex; align-items:center; gap:10px; margin-bottom:9px;
  font-size:14.5px; font-weight:700; color:var(--navy);
}
.form__req{
  padding:3px 10px; border-radius:5px; background:#E8443A; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.form__opt{
  padding:3px 10px; border-radius:5px; background:var(--line); color:var(--muted);
  font-size:11px; font-weight:700;
}
.form__input, .form__textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:16px; color:var(--text);
  background:#FAFCFE; border:1.5px solid var(--sky-deep); border-radius:10px;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form__input:focus, .form__textarea:focus{
  outline:none; background:#fff; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,116,199,.16);
}
.form__textarea{ min-height:150px; resize:vertical; line-height:1.8; }
.form__hint{ margin-top:7px; font-size:12.5px; color:var(--muted); }
.form__error{
  display:none; margin-top:7px; font-size:13px; font-weight:700; color:#D2372C;
}
.form__row.has-error .form__input,
.form__row.has-error .form__textarea{ border-color:#E8443A; background:#FFF7F6; }
.form__row.has-error .form__error{ display:block; }

.form__policy{
  height:230px; overflow-y:auto; padding:20px 22px; margin-bottom:20px;
  background:#F8FAFC; border:1px solid var(--line); border-radius:12px;
  font-size:13px; line-height:1.95; color:var(--text);
}
.form__policy h4{ font-size:13.5px; color:var(--navy); margin:18px 0 6px; }
.form__policy h4:first-child{ margin-top:0; }
.form__policy p{ margin-bottom:8px; }
/* 冒頭のリード。JIS Q 15001 に基づく取得であることの宣言 */
.form__policy-lead{
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
.form__policy-lead b{ color:var(--navy); }
/* 利用目的と第三者提供の除外事由は箇条書きにする（法定事由は列挙のほうが確認しやすい） */
.form__policy ul{ margin:0 0 10px; padding-left:1.1em; list-style:disc; }
.form__policy li{ margin-bottom:4px; }
.form__policy li::marker{ color:var(--muted); }
.form__policy-end{ margin-top:16px; text-align:right; color:var(--muted); }

.form__agree{
  display:flex; align-items:flex-start; gap:12px; justify-content:center;
  padding:18px; border-radius:12px; background:var(--sky); cursor:pointer;
  font-size:14.5px; font-weight:700; color:var(--navy); line-height:1.6;
}
.form__agree input{ width:20px; height:20px; margin-top:2px; accent-color:var(--blue); flex:none; cursor:pointer; }
.form__submit{ margin-top:28px; text-align:center; }
.form__submit .btn{ min-width:280px; }
.form__submit .form__error{ text-align:center; }
.form__sent{
  display:none; padding:26px; border-radius:12px; background:var(--sky);
  border:2px solid var(--blue); color:var(--navy); text-align:center; font-weight:700; line-height:1.8;
}
/* 送信に失敗したときの案内。電話番号への導線を必ず残す */
/* 完了表示の補足。控えメールの案内なので本文より一段落とす */
.form__sent-note{
  display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--sky-deep);
  font-size:13.5px; font-weight:400; color:var(--text); line-height:1.85;
}
.form__failed{
  display:none; margin-top:20px; padding:20px 22px; border-radius:12px;
  background:#FFF1F0; border:1px solid #F3C4C0; color:#8E3229;
  text-align:center; font-size:14.5px; line-height:1.85;
}
.form__failed a{ color:#8E3229; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px){
  .formbox{ padding:28px 20px; border-radius:var(--radius); }
  .form__submit .btn{ min-width:0; width:100%; }
}

/* 問い合わせページ側のミニ導線（フロー・FAQ抜粋） */
.mini-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mini-flow__step{
  background:var(--white); border:1px solid var(--sky-deep); border-radius:12px;
  padding:18px 16px; text-align:center; position:relative;
}
.mini-flow__step:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-10px;
  width:0; height:0; border-left:7px solid var(--blue-lt);
  border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateY(-50%);
}
.mini-flow__no{ font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--blue); }
.mini-flow__ttl{ font-size:14px; font-weight:700; color:var(--navy); margin-top:5px; line-height:1.5; }
@media (max-width:900px){
  .mini-flow{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .mini-flow__step:nth-child(2)::after{ display:none; }
}
@media (max-width:560px){
  .mini-flow{ grid-template-columns:1fr; }
  .mini-flow__step::after{ display:none !important; }
}