/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box}
/* hidden 属性は display 指定に負けるので、明示的に最優先で消す */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.9;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ===== layout ===== */
.wrap{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.wrap-narrow{width:min(920px,calc(100% - var(--gutter)*2));margin-inline:auto}
.section{padding-block:var(--sec-y)}
.section--tint{background:var(--brand-tint)}
.section--cream{background:var(--cream)}
.section--white{background:#fff}
.stack>*+*{margin-top:var(--gap)}

/* ===== typography ===== */
.eyebrow{font-family:var(--font-en);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-text);font-weight:600}
.h-display{font-family:var(--display-font);font-weight:600;line-height:1.5;
  letter-spacing:.02em;color:var(--ink-strong);
  font-size:clamp(28px,3.4vw,44px)}
.h-sec{font-family:var(--display-font);font-weight:600;line-height:1.5;
  font-size:clamp(24px,2.4vw,32px);color:var(--ink-strong);text-align:center}
.h-sec-lead{text-align:center;color:var(--sub);font-size:16px;margin-top:10px}
.h-sec-mark{display:block;width:52px;height:2px;background:var(--gold);
  margin:14px auto 0;border-radius:2px}

/* 左に緑バーの見出し（LP・事例で多用） */
.h-bar{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2vw,26px);
  font-weight:700;line-height:1.5;color:var(--ink-strong)}
.h-bar::before{content:"";width:4px;height:1.05em;background:var(--brand);border-radius:2px;flex:none}
.h-bar-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:space-between}
.h-bar-row .lead{color:var(--sub);font-size:14.5px}

.lead{color:var(--sub);font-size:16px;line-height:2}
.note{color:var(--muted);font-size:13px;line-height:1.8}
.center{text-align:center}

/* 番号つき見出し */
.num{font-family:var(--font-en);font-weight:600;color:var(--gold-text);
  font-size:clamp(22px,2.4vw,30px);line-height:1}
.num-sm{font-family:var(--font-en);font-weight:600;color:var(--gold-text);font-size:20px;line-height:1}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--radius-pill);font-weight:700;font-size:16px;
  transition:var(--ease);white-space:nowrap;line-height:1.4}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--brand);color:var(--brand);background:#fff}
.btn--ghost:hover{background:var(--brand-soft)}
.btn--quiet{border:1px solid var(--line-strong);color:var(--ink);background:#fff;font-weight:600}
.btn--quiet:hover{border-color:var(--brand);color:var(--brand)}
.btn--lg{padding:18px 40px;font-size:17px}
.btn--block{width:100%}
.btn .chev{transition:transform var(--ease)}
.btn:hover .chev{transform:translateX(3px)}
/* 「無料｜気になることを相談する」型 */
.btn--split{padding:0;overflow:hidden}
.btn--split .tag{background:rgba(255,255,255,.18);padding:18px 20px;font-size:14px;font-weight:700}
.btn--split .body{padding:18px 28px;display:flex;align-items:center;gap:12px}

.link-more{display:inline-flex;align-items:center;gap:6px;color:var(--brand);
  font-weight:700;font-size:14.5px}
.link-more:hover{gap:10px}
.link-more .chev{transition:var(--ease)}

/* ===== chips / tags ===== */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--brand-soft);color:var(--brand-ink);font-size:13.5px;font-weight:600}
.tag-line{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);color:var(--sub);font-size:13.5px;background:#fff}
.chip-check{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.chip-check .ico{width:16px;height:16px;border-radius:50%;flex:none;background:var(--brand);
  display:grid;place-items:center}
.chip-check .ico svg{width:9px;height:9px;stroke:#fff;stroke-width:4;fill:none}

/* ===== card ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-p)}
.card--flat{border:0;box-shadow:var(--shadow-sm)}
.card--soft{background:var(--brand-tint);border-color:transparent}

/* ===== grid ===== */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .inner{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;
  letter-spacing:.02em;color:var(--brand);white-space:nowrap}
.logo svg{flex:none}
.gnav{display:flex;gap:26px;margin-left:auto;font-size:16px;font-weight:600}
.gnav a{color:var(--ink);transition:var(--ease)}
.gnav a:hover{color:var(--brand)}
.header-cta{flex:none}
@media(max-width:1000px){
  .gnav{display:none}
  .site-header .inner{height:60px;gap:14px}
  .header-cta .btn{padding:11px 18px;font-size:13.5px}
}

/* ===== breadcrumb ===== */
.crumb{font-size:13px;color:var(--muted);padding:14px 0}
.crumb a:hover{color:var(--brand)}
.crumb span{margin:0 8px}

/* ===== footer ===== */
.site-footer{background:var(--brand);color:#fff;padding-block:56px 0}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-brand .logo{color:#fff;font-size:21px;margin-bottom:16px}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.78);line-height:2}
.footer-brand .op{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:13.5px}
.footer-col h4{font-size:14.5px;font-weight:700;margin-bottom:16px}
.footer-col a{display:flex;justify-content:space-between;align-items:center;
  font-size:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-bottom{margin-top:44px;border-top:1px solid rgba(255,255,255,.16);
  padding:18px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.72)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr;gap:28px}}

/* ===== utilities ===== */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* ===== モバイルの横あふれ対策 ===== */
/* グリッド/フレックスの子は既定で min-width:auto のため、
   nowrap のボタンが列幅を押し広げてしまう。明示的に 0 にする。 */
.b-hero-expert .inner > *,
.b-cta-band > *,
.b-media .box > *,
.b-expert-card > *,
.b-related .item > *,
.b-interview-teaser .box > *,
.b-iv-hero .inner > *,
.b-case-hero .inner > *,
.b-story .row > *,
.b-expert-view .row > *,
.b-qa .row > * { min-width: 0; }

@media (max-width: 600px) {
  .btn { white-space: normal; }
  .btn--split { width: 100%; }
  .btn--split .tag { padding: 14px 12px; font-size: 13px; flex: none; }
  .btn--split .body { padding: 14px 14px; font-size:14px; flex: 1; justify-content: center; gap: 8px; }
  .btn--lg { padding: 16px 20px; font-size:16px; }
  .header-cta .btn { padding: 10px 14px; font-size:13px; }
  .b-cta-box .btn--split { width: 100%; }
}
@media (max-width: 420px) {
  .header-cta .btn .lbl { display: none; }
  .header-cta .btn { padding: 10px 12px; gap: 0; }
}

/* ============================================================
   YUINOMA のロゴ表記

   サービス名が欧文（YUINOMA）になったので、和文用の設定のままだと
   字が詰まって見えます。欧文書体に切り替え、字間を広げます。

   短い欧文の社名は、字間を空けるほど「名前」らしく見えます。
   逆に詰めると、ただの英単語に見えてしまいます。
   ============================================================ */
[data-brand-name] {
  /* ロゴの YUINOMA はセリフ体（明朝系）です。
     ゴシックにすると、ロゴと並べたときに別物に見えます。 */
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .22em;
  /* 字間を空けたぶん、右端に空白が生まれるので詰めます */
  margin-right: -.22em;
}

/* ヘッダーのロゴ */
.site-header .logo { font-size: 17.5px; }
.site-header .logo [data-brand-name] { font-size: 18px; }

/* フッターのロゴ（濃い背景の上なので、少しだけ太く見せます） */
.footer-brand .logo [data-brand-name] { letter-spacing: .2em; }

/* 本文の中に出てくるとき（「YUINOMAでできること」など）は、
   まわりの日本語と大きさを合わせます。字間だけ少し空けます。 */
h1 [data-brand-name], h2 [data-brand-name], h3 [data-brand-name],
p [data-brand-name], li [data-brand-name] {
  font-size: .96em;
  letter-spacing: .1em;
  margin-right: -.1em;
}

/* ============================================================
   スマホでの使い勝手（要件 INF-014 / QA-005）

   ★ここは「PC版を縮めたもの」ではありません★
   スマホでしか起きない問題を、スマホの事情で直しています。

   ① 入力欄の文字は 16px 以上にする

      iPhone は、16px 未満の入力欄に触ると<b>画面を勝手に拡大します</b>。
      しかも、拡大したまま戻りません。そのあとの操作が全部つらくなります。
      設定では止められません。文字を大きくするしかありません。

      実際に測ったところ、相談フォームの入力欄が 14.5px でした。
      お名前を入力しようとした瞬間に画面が寄る、という状態です。

   ② 押せるものは、指で押せる大きさにする

      指の腹はおよそ 9mm。画面で 44px が目安です。
      「すべての事例を見る」などのリンクが 27px しかありませんでした。

   ③ パンくずも押せるようにする

      「TOP」が 24×19px でした。押すつもりが押せません。
   ============================================================ */
@media (max-width: 767px) {

  /* ① 入力欄。16px を下回らせません

     ★!important を使っています★
     ふだんは避けるべき書き方です。あとから上書きできなくなるためです。

     ここで使う理由は、はじめ ! を付けずに書いたところ、
     フォーム側の指定（.fld input { font-size:16px }）のほうが
     細かく指定されていて、そちらが勝ってしまったからです。

     これは<b>好みの問題ではなく、端末の都合</b>です。
     16px を下回ると iPhone が画面を拡大し、しかも戻りません。
     どのページのどんな指定より優先されるべきなので、! を付けます。 */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="search"],
  input[type="password"], input[type="date"],
  select, textarea {
    font-size: 16px !important;
  }

  /* ② 押せるものの高さ */
  .link-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .btn {
    min-height: 44px;
  }

  /* ③ パンくず。文字を大きくし、上下に余白を足します */
  .crumb {
    font-size:13px;
    line-height: 2.2;
  }
  .crumb a {
    display: inline-block;
    padding: 6px 2px;
  }

  /* ロゴも押せる大きさに。
     ★はじめ .site-header の中だけを対象にしていました★
     AIヒアリングや専門家マイページは共通ヘッダーを使っていないので、
     そこだけロゴが 22px のまま残っていました。場所を問わない形に直します。 */
  .logo, .mp-bar .lg {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* 縦だけ広げても、横が 22px しかないと指では押せません。
       左右にも余白を足して、幅も確保します。 */
    padding-inline: 4px;
    min-width: 44px;
  }

  /* 選ぶボタン（ラジオ・チェック）は、まわりのラベルごと押せるように */
  .pick label, .consent-box label {
    min-height: 44px;
  }

  /* フッターのリンクは縦に細く並ぶので、指の幅に足りるまで広げます */
  .footer-col a {
    min-height: 44px;
    padding-block: 10px;
  }
}

/* ============================================================
   本文の1行の長さ（2026-08-27 デザイン見直し）

   ★なぜ幅を絞るのか★
   見出しの下の説明文が、1行 72文字ありました。
   日本語が読みやすいのは 35〜45文字です。

   1行が長いと、行の終わりから次の行の頭へ目を戻すときに、
   どこへ戻ればよいか分からなくなります。
   結果、読まずに飛ばされます。

   文字を大きくしただけでは直りません。
   幅そのものに上限をつけます。

   ★em で書く理由★
   1em ＝ その文字の大きさです。
   日本語の文字はおよそ1em四方なので、
   40em ＝ およそ40文字ぶんの幅、という意味になります。
   文字を大きくしても、1行の文字数は変わりません。
   ============================================================ */

/* 見出しの下の説明文 */
.h-sec-lead,
.section > .wrap > .lead,
.bw-head .lead,
.pt-head .lead,
.dg-head .lead,
.cs-head .lead {
  max-width: 40em;
}

/* 見出しが中央寄せのところは、説明文も中央に置きます */
.center .h-sec-lead,
.fe-h p {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

/* 読み物の本文。事例・インタビュー・コラムは、さらに短めにします。
   ずっと読み続けるものなので、目の戻りが多くなるためです。 */
.b-case-body p,
.b-iv-body p,
.col-body p,
.ab p {
  max-width: 38em;
}

/* 狭い画面では、そもそも幅が足りないので上限は効きません */
@media (max-width: 767px) {
  .h-sec-lead, .section > .wrap > .lead,
  .bw-head .lead, .pt-head .lead, .dg-head .lead, .cs-head .lead {
    max-width: none;
  }
}

/* ============================================================
   ロゴマーク（2026-08-27）
   元：02 デザイン・素材「YUINOMA｜ロゴ」
   ============================================================ */
.logo-mark { flex: none; display: block; }
.site-header .logo { gap: 10px; }
.footer-brand .logo { gap: 11px; }
.footer-brand .logo-mark { filter: brightness(1.9) saturate(.35); }

/* ============================================================
   フッターの「誰あてか」の一行（2026-08-27）
   相談したい方・運営への質問・掲載をお考えの方を、
   押す前に見分けられるようにします。
   ============================================================ */
.foot-lead li { display: block; }
.foot-lead em {
  display: block; margin: -4px 0 8px; padding-bottom: 8px;
  font-style: normal; font-size: 12.5px; line-height: 1.75;
  /* ★濃さの差が3.9倍しかなく、基準の4.5倍を下回っていました（2026-08-30）★
     .55 だと、地の色に溶けて読めません。.75 で 5.2倍になります。 */
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-lead li:last-child em { border-bottom: none; }
.foot-lead a { border-bottom: none !important; padding-bottom: 4px !important; }


/* ============================================================
   見出しの折り返し（2026-08-30）

   ★何が起きていたか★
   スマホで、見出しの最後の1文字だけが次の行に落ちていました。

     「この専門家への相談を希望する方
      へ」
     「まずはお話を聞かせてくださ
      い」

   語の途中で切れているものもありました。

     「相続した実家を売るべきか、残
      すべきか。」

   ブラウザは、日本語をどこで切ってもよい文字として扱います。
   だから、幅がぎりぎりのとき、こういう切れ方をします。

   ★入れた2つの指定★
   word-break: auto-phrase
     文の意味の切れ目（文節）で折り返します。
     「まずはお話を／聞かせてください」のように切れます。

   text-wrap: pretty
     最後の行に1文字だけ残るのを避けます。

   ★どちらも、対応していないブラウザでは無視されるだけです★
   （いまのところ Chrome と Edge が対応、Safari は順次）
   入れて悪くなることはありません。いまと同じ見え方に戻るだけです。

   ★text-wrap: balance を使わない理由★
   balance は「各行の長さを揃える」指定で、英語では有効ですが、
   日本語では語の途中で切りにきます。実際に試したところ
   「この専門家への相／談を希望する方へ」となり、かえって悪化しました。
   ============================================================ */
h1, h2, h3, h4,
.h-sec, .cs-head h1, .fe-fv h1, .b-cta-band h3 {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 事例の題名・引用など、データから入る長い見出しも同じ扱いにします */
.c-case h3, .tc-case h4, .col-card h3, .iv-hero h1, .cs-hero h1,
.tv-main h3, .b-quote, .ais-card b {
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ★ヘッダーのボタンは、どの幅でも44px以上★
   768px で測ったところ 101×40px でした。
   指で押す最小の大きさ（44px）に足りていません。 */
.header-cta .btn{min-height:44px}