/* ============================================================
   トップページ以外のページ（ダウンロード・ライセンス確認・退会など）
   に共通で読み込むスタイル。

   ・上部バー（PC は横並びメニュー、1000px 未満はハンバーガー）
   ・PC で本文が細くなりすぎないよう、ページごとに幅を切り替える
   ・見た目の語彙（色・角丸・ボタン）はトップページにそろえる

   各ページの <style> の「あと」に読み込むこと。
   ここで定義していないもの（.card や .steps など）は各ページのまま。
   作成: 2026-09-26
   ============================================================ */

:root{
  --accent-dark:#C92E39;   /* 白地でも十分に読める濃さ。リンクやホバーに使う */
  --soft:#FFF5F6;
  --gray:#F6F8FA;
}

/* ---------- 上部バー（index.html / page.css と同じ見た目） ---------- */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
/* 上部バーの幅は本文にそろえる（ロゴと本文の左端を合わせるため）。
   ただしメニューが収まらない幅にはしないよう、下限を 840px にしている。 */
.topbar .wrap{max-width:var(--bar-max,1160px)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:26px;width:auto;display:block}
.topbar-r{display:flex;align-items:center;gap:8px}

.pcnav{display:none;align-items:center;gap:16px;margin-right:4px}
.pcnav > a,.nav-btn{
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.pcnav > a:hover,.nav-btn:hover{color:var(--accent-dark)}
.pcnav > a:focus-visible,.nav-btn:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px;border-radius:4px}

.nav-item{position:relative}
.nav-btn{
  appearance:none;border:0;background:none;cursor:pointer;padding:6px 0;
  display:inline-flex;align-items:center;gap:5px;
}
.nav-btn::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;
}
.nav-btn[aria-expanded="true"]{color:var(--accent-dark)}
.nav-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.dd{
  position:absolute;top:calc(100% + 10px);left:0;z-index:70;
  min-width:210px;max-width:min(300px,80vw);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(36,50,65,.14);padding:8px 0;
}
.dd.dd-right{left:auto;right:0}
.dd a{
  display:block;padding:10px 18px;font-size:14px;font-weight:700;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.dd a:hover{background:var(--soft);color:var(--accent-dark)}
.dd a:focus-visible{outline:3px solid var(--accent-dark);outline-offset:-3px}
.dd hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.dd .dd-sub a{font-weight:500;font-size:13px;color:var(--muted);padding:8px 18px}
.dd .dd-sub a:hover{color:var(--accent-dark)}
.topbar .cta{
  display:inline-block;padding:10px 18px;border-radius:10px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:700;
  text-decoration:none;white-space:nowrap;
}
.topbar .cta:hover{background:var(--accent-dark)}

/* 上部バーができたので、見出しの帯は上の余白を詰める */
.head{padding-top:26px}
.head .home{display:none}   /* 「← トップへ戻る」は上部バーのロゴと役割が重なる */

/* ---------- 幅 ----------
   ページの用途で変える。body のクラスで指定する。
     w-form … 入力が主役のページ（キー再送・noteID 変更）
     w-read … 読みもの（退会・規約・無料お試し）
     w-wide … 画像や結果の一覧が主役のページ（ダウンロード・ライセンス確認）
   スマホでは今までどおり 1 列で読み進める形のまま。 */
@media(min-width:768px){
  body.w-form{--max:600px;--bar-max:840px}
  body.w-read{--max:800px;--bar-max:800px}
  body.w-wide{--max:860px;--bar-max:860px}
  .wrap{padding:0 28px}
  .head{padding:34px 0 38px}
  .head h1{font-size:28px}
  .head p{font-size:15px}
  main{padding:40px 0 72px}
}
@media(min-width:1000px){
  .pcnav{display:flex}
  .smm-btn{display:none !important}   /* ハンバーガーはこれより狭い幅のみ */
  body.w-read{--max:840px;--bar-max:840px}
  body.w-wide{--max:1000px;--bar-max:1000px}
  .head{padding:42px 0 46px}
  .head h1{font-size:32px}
  main{padding:48px 0 84px}
  /* 広い画面では本文が横に伸びすぎないよう、読みものの行長を抑える */
  body.w-wide .prose,
  body.w-read  .prose{max-width:66ch}
}
@media(min-width:1280px){
  .wrap{padding:0 40px}
  body.w-wide{--max:1080px;--bar-max:1080px}
}

/* ---------- 幅の広いページの中の「入力欄」 ----------
   ダウンロード・ライセンス確認は、結果や画像のために本文を広くしている。
   ただし入力フォームまで広げると入力しにくいので、そこだけ狭めて中央に置く。 */
@media(min-width:768px){
  body.w-wide #formArea,
  body.w-wide .pc{max-width:620px;margin-left:auto;margin-right:auto}
}

/* 読みもののページ（退会など）に置かれた入力欄は、本文の幅いっぱいまで
   伸ばすと入力しづらいので、PC でだけ上限を決める。 */
@media(min-width:768px){
  body.w-read main input[type="text"],
  body.w-read main input[type="email"],
  body.w-read main select{max-width:460px}
}

/* ---------- PC でのボタンの見え方 ----------
   スマホでは横幅いっぱいのままにして押しやすさを保ち、
   PC でだけ、間延びしないように最大幅を決める。 */
@media(min-width:768px){
  main .btn{max-width:420px;margin-left:auto;margin-right:auto}
  main .btn.wide{max-width:none}
}

/* ---------- フッター ---------- */
@media(min-width:768px){
  footer{padding:32px 0 48px}
}