/* ══════════════════════════════════════════════════════════════════════
   法務・会社情報ページの共通スタイル
   トップ（index.html）と同じトークンを使う。値は DESIGN.md が正本。
   トップはSP固定の版下だが、こちらは読ませる文章なので
   幅は読みやすい行長（最大 40em 前後）で組む。
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#FCF8F0; --white:#FFFFFF;
  --ink:#5F4948;
  --ink-muted:#6F6C67;
  --rule:#E7DED2;
  --f-display:"dnp-shuei-mgothic-std","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --f-latin:"futura-pt",sans-serif;
  --pad:clamp(20px, 5.5vw, 40px);
  --panel-w:min(44vw,560px);        /* トップと同じ左パネルの幅 */
  --col-read:520px;                 /* トップの480pxより広く、かつ1024pxでもパネルがずれない上限 */
  --menu-col:432px;                 /* ハンバーガーの段幅（480 - 24*2）と同じ */
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  color-scheme:light;                /* 端末のダークモードで勝手に反転させない */
  background:var(--ground);
}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--f-display);
  font-size:15px;line-height:1.95;
  letter-spacing:.01em;
  font-feature-settings:"palt" 1;    /* 和文のツメ。トップと同じ */
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #2F4239;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* PCだけに出る左パネル。SPはハンバーガーではなくヘッダーの ← TOP で戻る */
.brand{display:none}

/* ── ヘッダー（SP）──
   ハンバーガーを開いた画面から、そのまま続いているように見せる。
   幕（index.html の .menu）と同じ地色・同じ天地の余白・同じ段幅にし、
   ロゴは同じ 68px で同じ位置（中央）に置く。戻るは、幕の × と同じ丸。
   別ページへ飛んだのではなく、幕の中身が入れ替わったように見せるための指定。 */
.hd{
  position:static;background:none;border:0;
  padding:calc(24px + env(safe-area-inset-top)) 24px 0;
}
.hd-in{
  position:relative;
  max-width:var(--menu-col);margin:0 auto;padding:0;
  height:auto;display:block;
}
/* 絵は68×35。押す範囲だけ44pxにして、絵の位置は幕のロゴと同じまま動かさない */
.hd-logo{display:flex;align-items:center;justify-content:center;
  width:68px;height:44px;margin:0 auto 21px}
.hd-logo img{width:68px;height:auto}
/* 幕の × と同じ寸法・同じ位置に置いた丸。中身は戻る矢印 */
.hd-back{
  position:absolute;top:-16px;right:-14px;   /* 実測で幕の × と同じ位置（上8px・右10px）に揃う */
  width:52px;height:52px;border:1px solid rgba(95,73,72,.22);border-radius:50%;
  display:block;text-decoration:none;
}
.hd-back::before{                       /* 横棒 */
  content:"";position:absolute;left:16px;top:25px;width:20px;height:1.6px;
  background:var(--ink);border-radius:2px;
}
.hd-back::after{                        /* 矢じり */
  content:"";position:absolute;left:16px;top:21px;width:9px;height:9px;
  border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:rotate(45deg);
}
.hd-back:active{transform:scale(.93)}

/* ── 本文 ── */
main{max-width:var(--menu-col);margin:0 auto;padding:0 24px 64px}
.lead{padding:4px 0 0}
h1{
  font-size:clamp(21px,5.2vw,27px);font-weight:600;line-height:1.5;
  letter-spacing:.02em;
}
h1 .en{
  display:block;margin-bottom:10px;
  font-family:var(--f-latin);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--ink-muted);
}
.intro{margin-top:24px;font-size:14px;line-height:2.05}
h2{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.02em;
}
h2 + *{margin-top:14px}
p + p{margin-top:1.1em}
p{font-size:14px;line-height:2.05}
/* 原文の注記（※で始まる行）。本文より一段落とす */
.note{font-size:13px;line-height:1.95;color:var(--ink-muted)}
/* 本文の箇条書き。main に限る。以前は ol,ul を素で書いていて、
   左パネルやフッターの規約リストにも当たり、左の縁と行間が狂っていた */
main ol,main ul{margin-top:14px;padding-left:1.4em}
main li{font-size:14px;line-height:2.05;margin-top:.4em}
main ul.plain{list-style:none;padding-left:0}
main ul.plain li{padding-left:1.1em;text-indent:-1.1em}
strong{font-weight:600}
/* 本文中のリンク（電話・メール・URL）。行送りは変えずに押せる範囲だけ広げる。
   インライン要素の上下 padding は行の高さに影響しないが、当たり判定は広がる */
main a{padding-block:16px}   /* 15pxだと43pxで1px足りない（実測） */

/* ── 項目と内容の表（会社概要・特商法） ── */
.kv{margin-top:26px;border-top:1px solid var(--rule)}
.kv>div{
  display:grid;grid-template-columns:minmax(7.5em,11em) 1fr;gap:4px 20px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.kv dt{font-size:13px;font-weight:600;line-height:1.9;color:var(--ink-muted)}
.kv dd{font-size:14px;line-height:2.05}
.kv dd p + p{margin-top:.7em}
@media (max-width:560px){
  .kv>div{grid-template-columns:1fr;gap:4px}
  .kv dt{font-size:12px}
}

/* ── よくあるご質問（faq.html）──
   幕の中の .faq と同じ語彙で、読ませる級数に上げたもの。
   Qの赤は版のCTAと同じ #DA8989。 */
.qa{margin-top:26px;border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  min-height:56px;padding:15px 2px;font-size:15px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;gap:11px;align-items:center;line-height:1.7;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";font-family:var(--f-latin);font-weight:700;color:#DA8989;flex:0 0 auto}
.qa summary:hover{color:#3F2F2E}
.qa details p{padding:0 2px 18px 26px;font-size:14px;line-height:2.05;color:var(--ink-muted)}
.qa details[open] summary{color:#3F2F2E}
.qa + .note{margin-top:28px}
.qa .qa-category{border-bottom:1px solid var(--rule)}
.qa .qa-category > summary{min-height:64px;padding:16px 2px;font-size:17px;font-weight:700;gap:12px}
.qa .qa-category > summary::before{content:none}
.qa .qa-category > summary::after,.qa .qa-question > summary::after{
  content:"＋";margin-left:auto;padding-left:12px;font-family:var(--f-display);font-size:20px;font-weight:400;line-height:1;
}
.qa .qa-category[open] > summary::after,.qa .qa-question[open] > summary::after{content:"−"}
.qa .qa-questions{padding:0 0 12px 14px;border-top:1px solid var(--rule)}
.qa .qa-question > summary{min-height:56px;font-size:15px;font-weight:600}
.qa .qa-question p{padding:0 16px 18px 26px}
.qa .gift-links{margin:0 0 18px 26px;padding-left:1.2em}
.qa .gift-links li{margin:.2em 0;font-size:14px;line-height:1.8}
.qa .gift-links a{color:#317831;text-underline-offset:.2em}
@media(max-width:560px){.qa .qa-category > summary{font-size:16px}.qa .qa-questions{padding-left:8px}}

/* ── フッター（SP）──
   ハンバーガーの中の規約リンク（.menu .mlegal）と同じ組み方にする。
   線で区切らず、縦に並べ、最後に社名と住所を左揃えで置く。 */
.ft{border:0;background:none}
.ft-in{
  max-width:var(--menu-col);margin:0 auto;
  padding:14px 24px calc(36px + env(safe-area-inset-bottom));
}
.ft nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.ft nav a{
  font-size:12px;line-height:1.8;text-decoration:none;color:var(--ink-muted);
  display:inline-flex;align-items:center;min-height:44px;   /* 行送りは変えず、押す範囲だけ */
}
.ft nav a:hover{color:var(--ink);text-decoration:underline}
.ft nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* 社名と住所は中央に置かない。中央寄せの短い行は、最後に置くと据わりが悪い */
.ft-co{margin-top:18px;font-size:11px;line-height:1.9;color:#6E6A64;text-align:left}
.ft-co .name{font-family:var(--f-latin);font-weight:600;letter-spacing:.1em}


/* ══════════════════════════════════════════════════════════════════════
   PC（1024px以上）— トップと同じ版面に入れる
   別サイトへ飛んだように見せない。左パネルはそのまま、本文だけ差し替わる。
   SPでは .inner も .col もただのブロックなので、この下の指定は一切効かない。
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .hd{display:none}                    /* PCはパネルがヘッダーを兼ねる */
  .ft{display:none}                    /* 規約の導線はパネルの足元にある */
  .inner{
    display:flex;align-items:flex-start;
    width:100%;max-width:calc(var(--panel-w) + var(--col-read));
    /* パネルの左端を、トップと1pxもずらさない。
       トップは（パネル + 480px）を中央寄せしているので、その左余白をそのまま使う。
       カラムはトップの480pxより広いぶん、右へ伸ばす。
       画面が足りないときは左余白を詰め、それでも足りなければカラムが縮む。 */
    margin-left:max(0px, min(
      calc(50vw - (var(--panel-w) + 480px) / 2),
      calc(100vw - var(--panel-w) - var(--col-read))
    ));
    margin-right:auto;
  }
  .brand{
    display:flex;flex-direction:column;justify-content:space-between;
    width:var(--panel-w);flex:0 0 var(--panel-w);
    position:sticky;top:0;height:100vh;   /* 高さを指定しないと中身が下に飛ぶ */
    overflow-y:auto;                      /* 画面の低い端末で足元が切れないように */
    padding:48px 48px 44px;background:var(--ground);
  }
  .brand > div:first-child{margin-block:auto}
  .brand .lg{width:150px}
  .brand .lat{font-family:var(--f-latin);font-size:10px;letter-spacing:.28em;color:var(--ink-muted);margin-top:16px}
  .brand .pl{font-size:13.5px;line-height:2.1;margin-top:18px;color:#6E6A64}
  .brand nav.mnav{margin-top:32px;display:flex;flex-direction:column;max-width:320px}
  .brand nav.mnav a{
    display:flex;align-items:baseline;gap:12px;padding:12px 0;text-decoration:none;
    color:var(--ink);font-family:var(--f-display);font-size:14.5px;font-weight:700;
    border-bottom:1px solid rgba(95,73,72,.12);
  }
  .brand .acts{display:flex;flex-direction:column;gap:10px;max-width:320px;margin-top:26px}
  .brand .acts a{width:100%;min-height:48px;padding:10px 8px;border-radius:100px;text-decoration:none;font-weight:700;font-size:13px;line-height:1.35;text-align:center;display:flex;align-items:center;justify-content:center}
  /* 色はトップのトークンと同じ値。Figma実測（index.html の :root が正本） */
  .brand .b-amz{background:#F69403;color:#40302F}
  .brand .b-line{background:#fff;color:#317831;border:1.4px solid #317831}
  .brand .blegal{padding-top:14px}     /* 上のブロックとは線で区切らない */
  .brand .blegal ul{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
  .brand .blegal li{margin:0;font-size:inherit;line-height:inherit}
  .brand .blegal a{
    font-size:11px;line-height:1.7;color:var(--ink-muted);text-decoration:none;
    display:inline-flex;align-items:center;min-height:22px;
  }
  .brand .blegal a:hover{color:var(--ink);text-decoration:underline}
  .brand .blegal a[aria-current="page"]{color:var(--ink);font-weight:600}
  .brand .biz{margin-top:8px;font-size:10.5px;color:#6E6A64;line-height:1.8}
  .brand .biz .name{font-family:var(--f-latin);font-weight:600;letter-spacing:.1em}

  /* 本文は、トップの版が置かれていた場所に同じ影で置く */
  .col{
    flex:1 1 var(--col-read);max-width:var(--col-read);min-width:0;
    background:var(--white);box-shadow:0 0 40px rgba(74,66,59,.07);min-height:100vh;
  }
  main{max-width:none;margin:0;padding:0 36px 72px}
  .lead{padding:56px 0 0}
}

/* 画面の低いノートPC（1366×768 等）。余白と打ち間だけ詰めてパネルを中に収める */
@media (min-width:1024px) and (max-height:860px){
  .brand{padding:30px 48px 26px}
  .brand .pl{margin-top:14px}
  .brand nav.mnav{margin-top:22px}
  .brand nav.mnav a{padding:9px 0}
  .brand .acts{margin-top:18px}
}

/* さらに低い画面（1366×768 等）。規約リンクを縦一列にしたぶん、打ち間をもう一段詰める */
@media (min-width:1024px) and (max-height:800px){
  .brand nav.mnav a{padding:7px 0}
  .brand .acts{margin-top:14px}
}

@media print{
  .hd,.hd-back{display:none}
  body{background:#fff}
}

/* ご購入ページのCTAは左パネルと同じ寸法・文字・配色にする */
.purchase-action{margin-top:20px}
.purchase-button{display:flex;align-items:center;justify-content:center;width:min(100%,320px);min-height:48px;margin-inline:auto;padding:10px 8px;border-radius:100px;text-decoration:none;font-size:13px;font-weight:700;line-height:1.35;text-align:center}
.purchase-amazon{background:#F69403;color:#40302F}
.purchase-line{background:#fff;color:#317831;border:1.4px solid #317831}