/* konmane.com の見た目。**3 頁(index・shop・tokushoho)で共有する。** 色と字の決まりはここが正。
   2026-10-01 に作り直した(本人「全体的に窮屈だから、このデザインを真似て」。参考は MakeShop の
   Basics テンプレート: 黒い地、頭の右に絵と字のボタン、2 段目のメニュー、お知らせの帯、幅いっぱいの写真、
   左に一覧・右に本文)。**真似たのは配置と余白だけ**で、写真やロゴは使っていない。
   以前は本文の幅を 45rem(720px)で固定していて、それが窮屈さの元だった。
   2026-10-02 に字を一段ずつ細く・小さくした(本人「全体的に文字が大きく太くて読みにくい。もっとスタイリッシュに」)。
   **太さは 400(本文)と 600(見出し・強調)の 2 つだけ**。強調は太さより白さで見せる */
:root {
  --bg: #000; --band: #161616; --panel: #0e0e0e; --ink: #d9d9d9; --white: #fff; --dim: #8c8c8c;
  --line: #2a2a2a; --amber: #e0a33e;
  --wide: 1120px;            /* 頭・メニュー・本文の外枠 */
  --read: 42rem;             /* 文の段の幅(読む行の長さ) */
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/2 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: .04em;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
/* 日本語の約物の詰め。見出し・メニューなど短い字に効かせる */
h2, .lead, .logo, .menu, .side, .tools, .drawer, .notice, .eyebrow { font-feature-settings: "palt" 1; }
strong { font-weight: 600; color: var(--white); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.frame { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }
/* 絵のボタンの線は細く(HTML の stroke-width="2" をここで上書き) */
.tools svg, .burger svg { stroke-width: 1.5; }

/* ---- 頭: 左にロゴ、右に絵と字のボタン ---- */
.top { border-bottom: 1px solid var(--line); }
.top .frame { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 16px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--white);
        font-weight: 600; font-size: 1.1rem; letter-spacing: .3em; }
.logo svg { width: 26px; height: 26px; flex: none; }
.tools { display: flex; gap: 28px; }
.tools a { display: flex; flex-direction: column; align-items: center; gap: 3px;
           text-decoration: none; font-size: .66rem; letter-spacing: .08em; }
.tools svg { width: 22px; height: 22px; }
.tools a:hover { color: var(--amber); }

/* ---- 2 段目のメニュー ---- */
.menu .frame { display: flex; gap: 36px; min-height: 52px; align-items: center;
               overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.menu .frame::-webkit-scrollbar { display: none; }
.menu a { text-decoration: none; font-size: .8rem; letter-spacing: .1em; }
.menu a:hover { color: var(--amber); }

/* ---- お知らせの帯 ---- */
.notice { background: var(--band); text-align: center; font-size: .74rem; letter-spacing: .08em;
          padding: 8px 16px; color: var(--dim); }
.notice a { text-decoration: none; }
.notice a:hover { color: var(--ink); }

/* ---- 幅いっぱいの写真。**文字は画像に焼き込まず重ねる**(後から直せる) ---- */
.hero { position: relative; margin: 0; line-height: 0; }
.hero img { width: 100%; height: clamp(240px, 50vw, 620px); object-fit: cover; }
.hero figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; line-height: 1.5;
  padding: 0 0 clamp(16px, 4vw, 44px);
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.hero .frame { font-size: clamp(1rem, 2.6vw, 1.7rem); font-weight: 600; color: var(--white);
               letter-spacing: .12em; padding-top: 3em; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

/* ---- 頁の頭(写真の無い頁)。題と一言 ---- */
/* 上下だけ指定する。**padding の一括指定にすると .frame の左右の余白まで 0 になる**(題が画面の左端に
   貼り付いていた。2026-10-01、スマホの写しで見つけた) */
.head { padding-top: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.lead { font-size: clamp(1.25rem, 3.2vw, 1.85rem); line-height: 1.7; font-weight: 600; margin: 0;
        color: var(--white); letter-spacing: .06em; }
.sub { color: var(--dim); margin: 1.1rem 0 0; }

/* ---- 左に目次、右に本文 ---- */
.body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 80px;
        padding-top: 72px; padding-bottom: 40px; }
.body.single { grid-template-columns: minmax(0, 1fr); }
.side { position: sticky; top: 24px; align-self: start; }
.side ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.side li { border-bottom: 1px solid var(--line); margin: 0; }
.side a { display: block; padding: 12px 2px; text-decoration: none; font-size: .8rem; letter-spacing: .06em; }
.side a:hover { color: var(--amber); }
main { max-width: var(--read); }
.body.single main { margin: 0 auto; }

section { padding: 0 0 72px; margin: 0 0 72px; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; margin-bottom: 0; }
.eyebrow { display: block; font-size: .68rem; letter-spacing: .32em; color: var(--amber);
           margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 1.4rem; line-height: 1.6; color: var(--white);
     letter-spacing: .08em; }
p { margin: 0 0 1.1rem; }
ol, ul { padding-left: 1.3rem; margin: 0 0 1.1rem; }
li { margin: .5rem 0; }
.steps li::marker { color: var(--amber); font-family: var(--mono); }
.no { background: var(--panel); border-left: 2px solid var(--amber); padding: 1.1rem 1.3rem; }
.no p { margin: 0 0 .6rem; font-weight: 600; color: var(--white); }
.no ul { color: var(--dim); margin: 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; }
th, td { text-align: left; padding: .9rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 400; white-space: nowrap; font-size: .9em; }
td.yen { text-align: right; white-space: nowrap; font-family: var(--mono); letter-spacing: 0; }
tr.sum td, tr.sum th { color: var(--white); font-weight: 600; border-bottom: 1px solid var(--amber); }
code { font-family: var(--mono); color: var(--amber); }
main a { color: var(--amber); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
       padding: 1.2rem 1.4rem; margin: 0 0 1.6rem; }
.todo { color: #ff6b5b; font-weight: 600; }
table.law th { width: 11em; white-space: normal; }

/* 押させたい物。**頁で一番目立たせるのはこれだけ** */
.cta { display: inline-block; background: var(--amber); color: #000 !important; font-weight: 600;
       letter-spacing: .1em; font-size: .9rem; text-decoration: none; padding: .9rem 2rem; border-radius: 2px; margin: .4rem 0; }
.cta:hover { background: #f0b552; }

/* ---- 足 ---- */
.foot { border-top: 1px solid var(--line); padding: 48px 0 64px; color: var(--dim); font-size: .78rem; letter-spacing: .08em; }
.foot .frame { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---- スマホのメニュー(site.js が組み立てる)。パソコンでは「≡」を出さない ---- */
.burger { display: none; background: none; border: 0; color: inherit; padding: 0; cursor: pointer;
          flex-direction: column; align-items: center; gap: 3px; font: 400 .6rem/1.4 inherit; letter-spacing: .08em; }
.burger svg { width: 22px; height: 22px; }
.drawer { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; padding: 0 20px 48px; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; min-height: 60px;
               border-bottom: 1px solid var(--line); font-size: .8rem; letter-spacing: .3em; color: var(--white); }
.drawer-close { background: none; border: 0; color: inherit; font-size: 1.8rem; font-weight: 300; line-height: 1; padding: 0 4px; cursor: pointer; }
.drawer-title { color: var(--amber); font-size: .66rem; letter-spacing: .3em; margin: 28px 0 6px; }
.drawer ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.drawer li { margin: 0; border-bottom: 1px solid var(--line); }
.drawer a { display: block; padding: 14px 2px; text-decoration: none; font-size: .9rem; letter-spacing: .06em; }
body.drawer-open { overflow: hidden; }
.totop { position: fixed; right: 16px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%;
         background: rgba(22, 22, 22, .9); border: 1px solid var(--line); display: grid; place-items: center;
         text-decoration: none; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.totop.show { opacity: 1; pointer-events: auto; }

/* ---- 狭い画面: 頭は 1 段(左に「≡」、真ん中にロゴ、右にボタン)。メニューの帯と目次は「≡」の中へ。
   横の余白は 20px ---- */
@media (max-width: 860px) {
  body { font-size: 14px; line-height: 1.95; }
  .frame { padding: 0 20px; }
  .top .frame { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 60px; gap: 8px; }
  .burger { display: flex; justify-self: start; }
  .logo { justify-self: center; font-size: .95rem; letter-spacing: .26em; gap: .5rem; }
  .logo svg { width: 22px; height: 22px; }
  .tools { justify-self: end; gap: 16px; }
  .tools a { font-size: .6rem; }
  .tools svg { width: 22px; height: 22px; }
  .menu { display: none; }
  .notice { font-size: .68rem; padding: 7px 12px; line-height: 1.7; }
  .hero img { height: 60vw; }
  .hero .frame { font-size: .95rem; letter-spacing: .1em; }
  .head { padding-top: 40px; padding-bottom: 36px; }
  .lead { font-size: 1.2rem; line-height: 1.75; }
  .sub { margin-top: .9rem; }
  .body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 44px; }
  .side { display: none; }
  section { padding-bottom: 48px; margin-bottom: 48px; }
  h2 { font-size: 1.05rem; margin-bottom: 1.1rem; }
  .eyebrow { font-size: .62rem; }
  .cta { display: block; text-align: center; font-size: .85rem; }
  th, td { padding: .7rem .3rem; }
  .foot { padding: 36px 0 80px; }
  .foot nav { flex-direction: column; gap: 10px; }
  /* 特商法の表は、狭い画面では項目名の下に中身を積む */
  table.law th, table.law td { display: block; width: auto; border-bottom: 0; padding: .3rem 0; }
  table.law tr { display: block; border-bottom: 1px solid var(--line); padding: .7rem 0; }
}