/* noren-legal.css — 法定ページ・お問い合わせページの版面
   noren-studio.css（トップと同じトークン・ヘッダー・フッター）の後に読む。
   ここが持つのは「下層ページ固有の版面」だけで、色・書体・余白の定義は一切増やさない
   （増やすとトップと下層で别々に育ってズレる。トークンは noren-studio.css が唯一の正）。 */

/* ══ ページヒーロー ══════════════════════════════════════════
   暖簾の実写を全面に敷き、ボカシとスモークを重ねて白文字を載せる面。
   ヘッダーは position:fixed で透過のままこの上に乗り、40px スクロールで
   .is-solid（白地・黒文字）へ変わる。だからヒーローは必ず暗く保つ。 */
.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--ai-950);
  color:var(--white);
  padding:calc(72px + clamp(52px,7vw,96px)) 0 clamp(52px,7vw,96px);
  isolation:isolate;
}

/* 暖簾そのもの。blur の端が縁に出るので inset を外へ広げ、さらに scale で逃がす。
   ★backdrop-filter は使わない——包含ブロックを作って中の position:fixed を潰すため。 */
.page-hero::before{
  content:"";
  position:absolute;
  inset:-6%;
  z-index:-2;
  background:url("/img/hero-noren.webp?v=20260907a") center 40%/cover no-repeat;
  /* ★狭い画面では 900px 版（28KB）に切り替える。5px ぼかす前提なので粗は出ない。
     1600px 版は 157KB で、スマホに送るには重すぎる。 */
  filter:blur(5px) saturate(1.18) brightness(1.16) contrast(1.05);
  transform:scale(1.04);
}

/* スモーク。上端はヘッダーの白文字を、下端は本文との境目を成立させるために濃くする。
   ★濃度は「白文字とのコントラスト比 4.5:1 以上」を実測して決めた値。
     これ以上薄くすると暖簾の明るい折り目の上で本文が落ちる。 */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(5,11,28,.66) 0%,
      rgba(5,11,28,.53) 44%,
      rgba(5,11,28,.70) 100%),
    radial-gradient(130% 100% at 50% 0%, transparent 24%, rgba(5,11,28,.42) 100%);
}

.page-hero > .container{position:relative}
/* 暖簾の明るい折り目の上でも細字が落ちないよう、文字側にだけ薄い影を持たせる。
   スモークをこれ以上濃くすると暖簾が読めなくなるので、背景でなく文字で解く。 */
.page-hero .container{text-shadow:0 1px 14px rgba(5,11,28,.55)}

.page-hero h1{
  margin:0;
  font-size:clamp(1.9rem,3.6vw,3rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.035em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

/* ── パンくず ── */
.breadcrumbs{
  margin-bottom:clamp(20px,3vw,32px);
  font-size:.82rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.96);
}
.breadcrumbs a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.breadcrumbs a:hover{color:#fff;border-bottom-color:#fff}

/* ── 制定日などの細字。ヒーローの中と本文の中の両方で使う ── */
.page-hero .fine{margin:clamp(18px,2.4vw,26px) 0 0;font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,.93)}
.legal .fine{margin:0;font-size:.82rem;color:var(--ink-3)}

/* ══ 本文 ═══════════════════════════════════════════════════ */
.container.narrow{width:min(100% - var(--pad)*2, 780px)}

.legal{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px)}
.legal > :first-child{margin-top:0}

.legal h2{
  margin:clamp(44px,5vw,64px) 0 .9em;
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line);
  font-size:clamp(1.18rem,2vw,1.42rem);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--ink);
}
.legal h3{
  margin:2.4em 0 .8em;
  font-size:clamp(1rem,1.5vw,1.1rem);
  font-weight:700;
  line-height:1.6;
  color:var(--ink);
}

/* 手打ちの文節区切り。balance と衝突するので、.bun を含む見出しでは balance を切る。 */
.bun{display:inline-block}
h1:has(.bun),h2:has(.bun),h3:has(.bun){text-wrap:wrap}

.legal p{margin:0 0 1.5em;color:var(--ink-2);line-height:2}
.legal .lead{margin-bottom:2em;color:var(--ink);font-size:clamp(1rem,1.4vw,1.12rem)}

.legal ul,.legal ol{margin:0 0 1.6em;padding-left:1.4em;color:var(--ink-2);line-height:2}
.legal li{margin-bottom:.5em}
.legal li::marker{color:var(--ai-400)}

.legal b,.legal strong{font-weight:700;color:var(--ink)}

.legal a{color:var(--ai-600);text-decoration:none;border-bottom:1px solid rgba(29,63,127,.3)}
.legal a:hover{color:var(--ai-500);border-bottom-color:var(--ai-500)}

/* ── 表（特商法の項目・Cookieの一覧）──
   横に溢れる表はページ全体を横スクロールさせず、表の器の中だけで流す。 */
.legal .table-wrap{margin:0 0 2em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.9}
.legal th,.legal td{padding:1em 1.1em;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal th{
  width:32%;
  min-width:9em;
  background:var(--bg-soft);
  font-weight:600;
  color:var(--ink);
  white-space:normal;
}
.legal td{color:var(--ink-2)}
.legal tr:first-child th,.legal tr:first-child td{border-top:1px solid var(--line)}

/* ── 注意を引く枠（開示請求の案内など）── */
.legal-callout{
  margin:0 0 2.4em;
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--bg-soft);
  box-shadow:var(--shadow-sm);
}
.legal-callout > :last-child{margin-bottom:0}
.legal-callout h2{margin-top:0;padding-top:0;border-top:0}

/* ── 区切り線つきの箇条書き ── */
.rule-list{margin:0 0 2em;padding:0;list-style:none;border-top:1px solid var(--line)}
.rule-list li{margin:0;padding:1.1em 0;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.9}

/* ── ボタン（noren-studio.css の .btn を使えない旧クラスの受け皿）── */
.legal .button,
.page-hero .button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:50px;padding:0 1.6rem;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-size:.95rem;font-weight:600;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
.legal .button--primary{background:var(--ai-700);color:var(--white);box-shadow:var(--shadow-md)}
.legal .button--primary:hover{background:var(--ai-600);transform:translateY(-1px)}
.legal .button--light,
.page-hero .button--light{background:rgba(255,255,255,.94);color:var(--ai-800);border-color:rgba(255,255,255,.6)}
.legal .button:focus-visible,.page-hero .button:focus-visible{outline:3px solid var(--glow);outline-offset:3px}

/* ══ お問い合わせフォーム ═════════════════════════════════════
   ニューモーフィズムの凹み（--neo-in）はトップの語彙。ここでも同じものを使う。 */
.form-card{
  margin:0 0 2.6em;
  padding:clamp(24px,3.4vw,36px);
  border-radius:var(--r-xl);
  background:var(--neo);
  box-shadow:var(--neo-sh);
}
.form-row{margin-bottom:1.4em}
.form-row:last-of-type{margin-bottom:0}

.form-row label{
  display:block;margin-bottom:.55em;
  font-size:.88rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.form-row .req{
  margin-left:.6em;padding:.15em .55em;
  border-radius:var(--r-pill);
  background:var(--ai-700);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;vertical-align:.1em;
}
.form-row .opt{
  margin-left:.6em;padding:.15em .55em;
  border-radius:var(--r-pill);
  background:var(--line);color:var(--ink-3);
  font-size:.68rem;font-weight:600;letter-spacing:.06em;vertical-align:.1em;
}
.form-row .hint{margin:.5em 0 0;font-size:.8rem;line-height:1.8;color:var(--ink-3)}

.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  padding:.95em 1.1em;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:var(--bg-soft);
  box-shadow:var(--neo-in);
  color:var(--ink);
  font-family:inherit;font-size:1rem;line-height:1.7;
}
.form-row textarea{min-height:11em;resize:vertical}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:none;border-color:var(--ai-400);box-shadow:var(--neo-in),0 0 0 3px rgba(75,120,204,.28)}
.form-row input:user-invalid,
.form-row textarea:user-invalid{border-color:var(--red)}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2em}
.form-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:54px;padding:0 2rem;
  border:0;border-radius:var(--r-pill);
  background:var(--ai-700);color:var(--white);
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:background .2s,transform .2s var(--ease),box-shadow .2s;
}
.form-submit:hover:not(:disabled){background:var(--ai-600);transform:translateY(-1px)}
.form-submit:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
/* ★:disabled の見た目を必ず定義する。既定のままだと「押せるのに押せない」状態が
   目視で判別できず、客が連打する（過去に実際に踏んだ）。 */
.form-submit:disabled{background:var(--ink-3);box-shadow:none;cursor:not-allowed;opacity:.75;transform:none}

.form-note{margin:0;font-size:.82rem;line-height:1.9;color:var(--ink-3)}

/* 送信結果。role="status" で読み上げる。色だけに意味を持たせない（記号を併記する）。 */
.form-status{
  margin:1.4em 0 0;padding:1em 1.2em;
  border-radius:var(--r-md);
  font-size:.92rem;line-height:1.9;
}
.form-status:empty{display:none}
.form-status[data-kind="ok"]{background:rgba(31,143,95,.1);border:1px solid rgba(31,143,95,.35);color:#12603f}
.form-status[data-kind="err"]{background:rgba(224,85,60,.09);border:1px solid rgba(224,85,60,.38);color:#9c3320}

/* JSが落ちた場合の退避先。常に見えている（隠して JS で出すと、落ちた時に窓口が消える）。 */
.form-fallback{
  margin:2.4em 0 0;padding:clamp(20px,2.6vw,26px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  font-size:.9rem;line-height:1.95;color:var(--ink-2);
}
.form-fallback b{display:block;margin-bottom:.4em;color:var(--ink)}
.form-fallback .mail{
  font-family:"Inter",var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:.01em;
  color:var(--ai-700);word-break:break-all;
}

/* ══ 狭い画面 ══════════════════════════════════════════════ */
@media (max-width:900px){
  .page-hero::before{background-image:url("/img/hero-noren-sp.webp?v=20260907a")}
}

@media (max-width:720px){
  .legal th{width:auto;display:block;border-bottom:0;padding-bottom:.3em}
  .legal td{display:block;padding-top:.3em}
  .legal tr:first-child td{border-top:0}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-submit{width:100%}
}

/* ══ 動きを減らす設定 ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .legal .button,.form-submit{transition:none}
  .legal .button:hover,.form-submit:hover:not(:disabled){transform:none}
}

/* ══ 下層ページの節（いまは security.html だけが使う）══════════
   旧デザインの .rail / .c2-* グリッドは外し、トップと同じ .container に載せ替えた。
   クラス名は据え置き（HTML側の書き換えを最小にするため）。 */
.page-hero .lead{margin:clamp(18px,2.4vw,26px) 0 0;color:rgba(255,255,255,.92);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.95;max-width:34em}

.section{padding:clamp(56px,8vw,100px) 0}
.section--paper{background:var(--bg-soft);border-block:1px solid var(--line)}

/* 左に節の名前、右に中身。狭い画面では縦に積む。
   ★.split は noren-studio.css がトップ用に持っている名前。裸で書くと後勝ちして
     向こうの @media(max-width:900px){.split{1fr}} を静かに打ち消すので、.section 配下に絞る。 */
.section .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(28px,5vw,64px);align-items:start}
.section .split > div:first-child{position:sticky;top:96px}

.section-title{
  margin:.4em 0 0;
  font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;line-height:1.45;letter-spacing:-.03em;color:var(--ink);
}
.section .kicker{
  /* .kicker は白いヒーロー用。白地の節では藍にする（同じクラスで2つの地に載るため） */
  font-size:.78rem;font-weight:600;letter-spacing:.18em;color:var(--ai-500);
  font-family:"Inter",var(--sans);margin-bottom:0;text-shadow:none;
}
.section .lead{margin:1.4em 0 0;color:var(--ink-2);line-height:2;max-width:34em}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(14px,1.8vw,20px)}
.feature-card{
  padding:clamp(20px,2.6vw,26px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-sm);
}
.feature-card .num{
  display:inline-block;margin-bottom:.9em;padding:.28em .8em;
  border-radius:var(--r-pill);background:var(--ai-50);color:var(--ai-600);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
}
.feature-card h3{margin:0 0 .6em;font-size:1rem;font-weight:700;line-height:1.6;color:var(--ink)}
.feature-card p{margin:0;font-size:.9rem;line-height:1.9;color:var(--ink-2)}

/* 外部サービスの一覧: <li><b>区分</b><div><strong>名前</strong><span>説明</span></div></li> */
.rule-list li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:1rem;align-items:baseline}
.rule-list li > b{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ai-600);
}
.rule-list li strong{display:block;margin-bottom:.2em;font-size:.98rem;color:var(--ink)}
.rule-list li span{display:block;font-size:.9rem;line-height:1.9;color:var(--ink-2)}

/* ページ末尾の誘導帯 */
.cta-band{padding:clamp(44px,6vw,72px) 0;background:var(--ai-900);color:var(--white)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,36px)}
.cta-band h2{margin:0 0 .5em;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;line-height:1.5;letter-spacing:-.02em}
.cta-band p{margin:0;color:rgba(255,255,255,.82);font-size:.94rem;line-height:1.9}
.cta-band .button--light{flex:none}

/* 404 のボタン並び */
.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(24px,3vw,34px)}

/* しきい値はハンバーガーが出る 900px（noren-studio.css）に合わせる。
   ずらすと 861〜900px だけ 2 カラムのまま残る窓ができる。 */
@media (max-width:900px){
  .section .split{grid-template-columns:1fr}
  .section .split > div:first-child{position:static}
}
@media (max-width:720px){
  .rule-list li{grid-template-columns:1fr;gap:.4rem}
  .cta-inner{flex-direction:column;align-items:flex-start}
}