/* PNGkitch 公式サイト 共有スタイル（暫定たたき台）
 *
 * 🔤 **フォントは製品と同じ同梱フォントを自前で配る**（yokk指定 2026-08-30）。
 *   日本語サイト … Noto Sans JP（可変軸 wght 100–900）
 *   英語サイト   … Inter（本文・UI）＋ Playpen Sans（手書きのアクセント）
 * 実体は `sync-fonts.mjs` が `assets/fonts/` からコピーする（git管理外）。
 * ⚠️ **第三者CDN（Google Fonts等）は使わない**——訪問者のIPが外部へ出る。
 *   「画像をサーバーへ送らない」と言っている製品のサイトが、書体で通信するのは筋が通らない。
 * ⚠️ **フォントは改変しない**（サブセット化・woff2変換ともOFLの判断が要る。IDEA-00036）。 */

/* ---- @font-face ---- */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/fonts/NotoSansJP-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;              /* 可変軸。書かないと中間値で合成ボールドになる */
  font-style: normal;
  font-display: swap;                /* ⚠️ アプリは block（字幅が保存物に効く）。サイトは読めることが先 */
  /* 🔴 **`palt` は書かない**（yokk報告 2026-08-30「日本語の約物重なっててなんかおかしい」）。
   * ブラウザは既に **`text-spacing-trim: normal`**（既定）で約物を詰めている——
   * そこへ palt（フォント側の詰め）を足すと**二重にかかって文字が重なる**。
   * 実測（15px・`「本ソフトウェア」）の（席数）`）:
   *   palt有り＋ブラウザの詰め = **165.7px**（重なる）
   *   palt無し＋ブラウザの詰め = **217.5px**（正常。これを採る）
   *   palt有り＋ブラウザの詰めOFF = 173.2px
   * ⚠️ **アプリ（canvas）は palt のまま**——canvasに `text-spacing-trim` は無いので
   * あちらは二重にならない。⚠️ **同じ書体でも器が違えば正しい設定が違う**
   * （関連: NG-57 / MAC-17 のChromium約物問題と同じ「詰めが重なって0になる」族）。 */
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* ⚠️ アプリは `opsz` を14に固定している（canvasの計測ズレ＝NG-72）。
   * DOMのテキストにその問題は無いので、こちらは光学サイズを効かせる（見出しが締まる） */
}
@font-face {
  font-family: "Playpen Sans";
  src: url("/assets/fonts/PlaypenSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800;              /* ⚠️ fvarは800まで。900を指定すると合成ボールドになる */
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbfaf6;
  --paper: #f0ead9;
  --ink: #2e3228;
  --soft: #6f7566;
  --green: #8fae4e;      /* free版カエルの緑 */
  --green-deep: #5c7532;
  --gold: #b8963e;
  --line: #e3dfd2;
  --card: #ffffff;
  --pin-red: #d64533;    /* 画鋲の赤 */

  /* 言語ごとの書体。⚠️ **英語スタックに Noto Sans JP を入れない**
   * ——フッターの「日本語」3文字のために8.7MBを落とすことになる */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Playpen Sans", "Comic Sans MS", cursive;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.9;
  /* 可変フォントを持っているので**偽の太字・斜体を作らせない**
   * （Playpenの900要求などで不格好な合成が出る） */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
html[lang="ja"] body { font-family: var(--font-jp); }
html[lang="en"] body { font-family: var(--font-en); line-height: 1.75; }
a { color: var(--green-deep); }
img { max-width: 100%; height: auto; }

/* ---- ウェイトのメリハリ（yokk指定 2026-08-30「ウェイトを使って文字表現にメリハリを」）
 * 900=ヒーロー / 800=見出し・ロゴ / 700=小見出し・ボタン / 500=ナビ / 400=本文 / 300=リード
 * 🔑 **サイズだけでなく重さで段差をつける**——同じ400のまま大きさだけ変えると、
 *    画面は「文字が大きい所と小さい所」にしか見えない。 */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.35; }
strong, b { font-weight: 700; }

/* ---- ヘッダー ---- */
header.site {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(251, 250, 246, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-weight: 900; font-size: 21px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.logo .pin { color: var(--pin-red); }
/* ---- ナビ（デスクトップ）----
 * 「機能」はホバーで**ツール詳細／ショートカット**が降りてくる（yokk指定 2026-08-30）。
 * 法的情報はフッターのみ・「さわってみる」はメニューに出さない。 */
.nav-panel { display: flex; align-items: center; gap: 24px; margin-left: auto; }
nav.main { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* ⚠️ **`nav.main a` は「機能」のリンクにも当たる**（`.nav-item` の中でも子孫は子孫）。
 * ここを土台にして、スマホ側は**これより詳細度の高いセレクタ**で上書きする（下の @media）
 * ——メディアクエリは詳細度を足さないので、`.nav-item > a`(0,1,1) では
 * `nav.main a`(0,1,2) に負けて**「機能」だけ小さいまま**になる（実際に踏んだ。NG-103） */
nav.main a { font-size: 14px; font-weight: 500; color: var(--soft); text-decoration: none; }
nav.main a:hover { color: var(--green-deep); }
.nav-item { position: relative; }
.sub {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  display: none; min-width: 172px; padding: 8px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 32px rgba(46, 50, 40, .16);
}
nav.main .sub a { display: block; padding: 9px 12px; border-radius: 7px; white-space: nowrap; }
nav.main .sub a:hover { background: rgba(143, 174, 78, .12); color: var(--green-deep); }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
/* ⚠️ トリガとパネルの**隙間を橋渡し**する（12pxの空白を横切るとホバーが切れて閉じる） */
.has-sub::after { content: ""; position: absolute; top: 100%; left: -12px; right: -12px; height: 14px; }

/* ---- ハンバーガー（スマホ。JS無しで開く checkbox 方式）---- */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }  /* 見えないがキーボードで触れる */
.nav-toggle:focus-visible ~ .hamburger { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.hamburger {
  display: none; margin-left: auto; cursor: pointer;
  width: 44px; height: 40px; border-radius: 11px; border: 1.5px solid var(--line);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hamburger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .hamburger { display: flex; }             /* 🔑 アイコンは右上（margin-left:auto で最右） */
  .nav-panel {
    display: none;                          /* 開くまで出さない */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px clamp(16px, 4vw, 48px) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(46, 50, 40, .14);
  }
  .nav-toggle:checked ~ .nav-panel { display: flex; }
  nav.main { flex-direction: column; align-items: stretch; gap: 0; }
  /* 🔑 **親項目は大きく重く**（yokk指摘 2026-08-30「機能の級数小さくない？」）
   * ——サブ項目と同じ級数だと、字下げだけが階層の手がかりになって弱い */
  /* ⚠️ **`nav.main .nav-item > a`**（0,2,2）まで上げる——`.nav-item > a`（0,1,1）だと
   * 土台の `nav.main a`（0,1,2）に負けて「機能」だけ14pxのまま残る（NG-103） */
  nav.main > a, nav.main .nav-item > a {
    display: block; padding: 14px 2px; border-bottom: 1px dashed var(--line);
    font-size: 18px; font-weight: 700; color: var(--ink);
  }
  /* スマホにホバーは無いので**サブメニューは最初から開いて**字下げで示す */
  .sub {
    position: static; transform: none; display: block; min-width: 0;
    padding: 0 0 0 18px; background: transparent; border: 0; box-shadow: none;
  }
  nav.main .sub a { padding: 12px 2px; font-size: 15px; font-weight: 500; border-bottom: 1px dashed var(--line); border-radius: 0; }
  .has-sub::after { display: none; }
  .lang-toggle { align-self: flex-start; margin-top: 14px; }
  .nav-panel .btn { margin-top: 10px; text-align: center; }
}
.btn {
  display: inline-block; padding: 9px 20px; border-radius: 999px;
  background: var(--green-deep); color: #fff !important;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
}
.btn:hover { background: #4b6128; }
.btn.ghost { background: transparent; color: var(--green-deep) !important; border: 1.5px solid var(--green-deep); }
.btn.ghost:hover { background: rgba(143, 174, 78, .1); }

/* ---- セクション ---- */
section { padding: clamp(48px, 8vw, 88px) clamp(16px, 5vw, 48px); }
.inner { max-width: 1080px; margin: 0 auto; }
h2 { font-size: clamp(23px, 3.6vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.lead { color: var(--soft); font-weight: 300; font-size: 15.5px; margin-bottom: 32px; }
html[lang="ja"] .lead { font-weight: 400; }  /* JPは300だと画面上で痩せすぎる */

/* ---- ヒーロー ---- */
.hero { background: linear-gradient(180deg, var(--paper), var(--bg)); }
.hero .inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 {
  font-size: clamp(32px, 5.2vw, 50px);
  font-weight: 900;                 /* 一番重い所。ここが画面の主役 */
  letter-spacing: -.035em;
  line-height: 1.3;
  margin-bottom: 18px;
}
html[lang="ja"] .hero h1 { letter-spacing: -.045em; }  /* 和文は字面が詰まって見えるので強めに */
/* 英語ヒーローの2行目＝手書き書体のアクセント（Interとの組み合わせ） */
html[lang="en"] .hero h1 .hand {
  font-family: var(--font-hand); font-weight: 700;
  letter-spacing: -.01em; color: var(--green-deep);
}
.hero .sub {
  color: var(--soft); font-weight: 300;
  font-size: clamp(14.5px, 2vw, 17px); line-height: 1.95; margin-bottom: 28px;
}
html[lang="ja"] .hero .sub { font-weight: 400; }
.hero .sub strong { font-weight: 700; color: var(--ink); }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero figure { position: relative; }
.hero figure img {
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(46, 50, 40, .18);
  display: block;
}
.hero figure figcaption { font-size: 12.5px; font-weight: 500; color: var(--soft); margin-top: 8px; text-align: right; }
html[lang="en"] .hero figure figcaption { font-family: var(--font-hand); font-weight: 500; font-size: 13.5px; }
@media (max-width: 760px) { .hero .inner { grid-template-columns: 1fr; } }

/* ---- 試すセクション ---- */
.try { background: #eef0e6; }
.try .try-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.try .frame-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 12px 40px rgba(46, 50, 40, .12);
}
/* 🔑 **PNGkitchの窓は比率を固定**（yokk指定 2026-08-31「ウィンドウ比率は固定で！」）
 * ——`72vh` だと画面の高さで窓の形が変わり、注釈サンプルの見え方が人によって変わる。
 * 27:20 は「サンプル(1025×732)＋アプリの縁（左バー・上下バー）」がちょうど収まる比 */
.try iframe { display: block; width: 100%; aspect-ratio: 27 / 20; height: auto; border: 0; }
/* 🔑 **スマホはデモを画面の幅いっぱいに**（yokk指定 2026-08-31
 * 「狭いとGUIやギズモも狭い」）——⚠️ **`100vw` は使わない**（縦スクロールバーのぶん
 * はみ出して横スクロールが生える）。**セクションの左右余白を外して、
 * 中の文章だけに余白を戻す**＝枠は器の幅そのまま＝画面幅になる。
 * 併せて**窓をさらに高く**（5:8）——幅が広がったぶん、縦長キャンバス(1000×1600)が
 * **幅で決まる**ようになる高さを確保する（足りないと高さで頭打ちになり、
 * せっかく広げた幅が余る） */
@media (max-width: 760px) {
  .try { padding-left: 0; padding-right: 0; }
  .try .inner > *:not(.frame-wrap) { padding-left: 16px; padding-right: 16px; }
  .try .frame-wrap { border-radius: 0; border-left: 0; border-right: 0; }
  .try iframe { aspect-ratio: 5 / 8; }
}
.note {
  font-size: 13px; font-weight: 400; color: var(--soft); margin-top: 12px;
}
html[lang="en"] .try-controls .note { font-family: var(--font-hand); font-weight: 500; font-size: 13.5px; }
.badge-draft {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: #8a6d1f; background: #f6ecc8; border: 1px solid #e2d089;
  border-radius: 4px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px;
}
html[lang="en"] .badge-draft { font-family: var(--font-hand); font-weight: 700; }

/* ---- 特徴カード ----
 * **3カラムで折り返す**（yokk指定 2026-08-31「小さいので3カラムで折り返して」）
 * ——4列だと1枚が狭く、日本語が1行3〜4語で折り返して読みにくい */
.features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .features .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px;
}
.card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.card p { font-size: 14px; font-weight: 400; color: var(--soft); line-height: 1.85; }
.card .emoji { font-size: 26px; display: block; margin-bottom: 10px; }
/* ツールのアイコン（yokk指定 2026-08-30「なるべくGUIのアイコンを／ワンポイントカラーはOK」）。
 * 🔑 **絵は製品GUIから実物を抜いてきた物**（app- のツールタイルの SVG そのもの）
 * ——似せて描き直すと、アイコンと実際のツールが少しずつズレていく。
 * ワンポイントカラーは Free=緑 / Pro=金 / 看板機能=画鋲の赤 の3つだけ。 */
.card .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px;
  color: var(--green-deep); background: rgba(143, 174, 78, .14);
}
.card .ico svg { width: 26px; height: 26px; display: block; }
.card .ico.pro { color: #96762a; background: #f6ecc8; }
.card .ico.hero { color: var(--pin-red); background: rgba(214, 69, 51, .1); }

/* ---- Free / Pro ---- */
.plans .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .plans .grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.plan.pro { border-color: var(--gold); }
.plan img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.plan .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan h3 { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.plan .price { font-size: 15px; font-weight: 300; color: var(--soft); }
html[lang="ja"] .plan .price { font-weight: 400; }
.plan ul { list-style: none; font-size: 14px; }
.plan ul li { padding: 5px 0 5px 26px; position: relative; border-bottom: 1px dashed var(--line); }
.plan ul li::before { content: "✓"; position: absolute; left: 4px; color: var(--green); font-weight: 700; }
.plan .body .btn { margin-top: auto; align-self: flex-start; }
.mor-note { font-size: 12px; font-weight: 300; color: var(--soft); margin-top: 20px; line-height: 1.8; }
html[lang="ja"] .mor-note { font-weight: 400; }

/* ---- ダウンロード ---- */
.download .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

/* ---- フッター ---- */
footer.site {
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 48px clamp(16px, 5vw, 48px) 32px;
  font-size: 14px;
}
footer.site .cols { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
footer.site h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--soft); margin-bottom: 12px; text-transform: uppercase;
}
footer.site ul { list-style: none; }
footer.site li { margin: 6px 0; }
footer.site a { color: var(--ink); font-weight: 500; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .copy { max-width: 1080px; margin: 36px auto 0; color: var(--soft); font-size: 12.5px; font-weight: 300; line-height: 1.9; }
html[lang="ja"] footer.site .copy { font-weight: 400; }
footer.site .copy a { font-weight: 400; color: var(--soft); }

/* ---- 言語トグル（JP/EN） ---- */
.lang-toggle {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--soft); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 14px;
}
.lang-toggle:hover { color: var(--green-deep); border-color: var(--green-deep); }

/* ---- Free / Pro バッジ ---- */
.badge-free, .badge-pro {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  border-radius: 4px; padding: 3px 8px; vertical-align: 2px; margin-left: 8px;
}
.badge-free { color: var(--green-deep); background: rgba(143, 174, 78, .16); border: 1px solid rgba(143, 174, 78, .5); }
.badge-pro  { color: #8a6d1f; background: #f6ecc8; border: 1px solid #e2d089; }

/* ---- キーボードショートカット ---- */
kbd {
  display: inline-block; font-family: ui-monospace, "Consolas", monospace;
  font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--ink);
  background: #fff; border: 1px solid #cfcaba; border-bottom-width: 3px;
  border-radius: 6px; padding: 5px 8px; min-width: 14px; text-align: center;
}
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table td { padding: 9px 10px; border-bottom: 1px dashed var(--line); font-size: 14.5px; vertical-align: top; }
.sc-table td:first-child { white-space: nowrap; width: 1%; padding-right: 22px; }
.sc-group {
  margin: 38px 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--green-deep); text-transform: uppercase;
}
html[lang="ja"] .sc-group { font-size: 16px; letter-spacing: .02em; text-transform: none; }
.page-head { max-width: 900px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) clamp(16px, 5vw, 32px) 0; }
.page-head h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.03em; margin-bottom: 10px; }
.page-body { max-width: 900px; margin: 0 auto; padding: 24px clamp(16px, 5vw, 32px) 80px; }

/* ---- 法的情報ページ ---- */
.legal-page { max-width: 780px; margin: 0 auto; padding: 48px clamp(16px, 5vw, 32px) 80px; }
.legal-page h1 { font-size: clamp(23px, 3.6vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.45; margin-bottom: 6px; }
.legal-page .en-title { color: var(--soft); font-weight: 300; font-size: 15px; margin-bottom: 32px; }
.legal-page h2 { font-size: 17px; font-weight: 700; margin: 38px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.legal-page p { font-size: 15px; font-weight: 400; margin: 10px 0; }
.legal-page .en { color: var(--soft); font-weight: 300; font-size: 13.5px; }
html[lang="ja"] .legal-page .en { font-weight: 400; }
.legal-page .updated { color: var(--soft); font-size: 13px; margin-bottom: 24px; }
.draft-banner {
  background: #f6ecc8; border: 1px solid #e2d089; color: #6b5416;
  border-radius: 8px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 28px;
}
.breadcrumb { font-size: 13px; font-weight: 500; margin-bottom: 24px; }