/* =====================================================================
   要 -KANAME- ／ 設計トークン ＋ ベース
   LP（public/index.html）と 覚書（/blog/）が共通で読む唯一のファイル。

   ここに置くもの   ：設計トークン（色・書体・罫）、body・リンク・段落の
                      ベース、共通レイアウト（.wrap / .prose）、
                      ブランド部品（.seal / .btn）。
   ここに置かないもの：LP の BLOCK 01〜10 固有の意匠（.hero .sec 料金表など）
                      → public/index.html の <style> に残す。
                      覚書の組版（一覧・記事本文）→ public/assets/blog.css。

   意匠を直すときは、まずこのファイルを見る。ここに無いものは
   片側だけの意匠なので、それぞれの持ち場で直す。
   ===================================================================== */

/* ---- 設計トークン（和紙・墨・藍墨・朱・罫、書体3種） ---- */
:root{
  --washi:#ECE6D8; --washi-2:#F5F0E5; --washi-3:#E2DAC7;
  --sumi:#1F2D2B; --sumi-soft:#56615E;
  --teal:#2C5048; --teal-soft:#5E7A72;
  --shu:#B23A26; --shu-deep:#8C2A1B; --shu-pale:#E8B9AE;
  --line:#CEC6B2;
  --mincho:"Shippori Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---- ベース ---- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--washi); color:var(--sumi);
  font-family:var(--gothic); font-weight:400; line-height:1.92;
  font-size:15.5px; letter-spacing:.012em; -webkit-text-size-adjust:100%;
  background-image:radial-gradient(circle at 15% 6%, rgba(0,0,0,.018) 0, transparent 34%),
                   radial-gradient(circle at 85% 62%, rgba(0,0,0,.015) 0, transparent 36%);
}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--shu-deep)}
p{margin:0 0 16px}
img{max-width:100%;height:auto}
.mono{font-family:var(--mono)}
.mincho{font-family:var(--mincho)}

/* ---- 共通レイアウト ---- */
.wrap{max-width:920px;margin:0 auto;padding:0 40px}
.prose{max-width:740px}

/* ---- 印（要の朱印） ---- */
.seal{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1.5px solid var(--shu);border-radius:6px;color:var(--shu);font-family:var(--mincho);
  font-weight:700;font-size:19px;line-height:1;flex:0 0 34px}
.seal-lg{width:46px;height:46px;font-size:25px;flex:0 0 46px}

/* ---- ボタン（LPのナビCTA・覚書の記事末CTA） ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--washi-2);
  background:var(--teal);text-decoration:none;padding:11px 22px;border-radius:3px;line-height:1.2;min-height:44px}
.btn:hover{background:var(--sumi);color:var(--washi-2)}

/* ---- フッタ（LPと覚書で共通。注記＋事業者情報＋奥付） ----
   中身が1箇所なので、意匠も1箇所に持つ。 */
/* ---- footer ---- */
footer{background:var(--sumi);color:var(--washi-3);border-top:1.5px solid var(--sumi)}
footer .wrap{padding-top:56px;padding-bottom:52px}
.notes{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:44px;margin-bottom:44px}
.notes h3{font-family:var(--mincho);font-weight:600;font-size:17px;color:var(--washi-2);margin:0 0 14px;line-height:1.6}
.notes p{margin:0;font-size:14px;line-height:1.9;color:var(--washi-3)}
.biz{border-top:1px solid var(--sumi-soft);padding-top:32px}
.biz .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--teal-soft);margin:0 0 18px}
.biz dl{margin:0;display:grid;grid-template-columns:auto minmax(0, 1fr);gap:12px 26px;font-size:13.5px;line-height:1.8}
.biz dt{color:var(--teal-soft)}
.biz dd{margin:0;color:var(--washi-3)}
.biz dd.strong{color:var(--washi-2)}
.biz dd a{color:var(--shu-pale);font-family:var(--mono);font-size:13.5px}
.foot-nav{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--sumi-soft);font-size:13.5px}
.foot-nav .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--teal-soft);margin-right:14px}
.foot-nav a{color:var(--washi-3);text-decoration:none;border-bottom:1px solid var(--sumi-soft)}
.foot-nav a:hover{color:var(--washi-2)}
.colophon{display:flex;align-items:center;gap:14px;margin-top:38px;padding-top:24px;border-top:1px solid var(--sumi-soft)}
.colophon .seal{width:28px;height:28px;font-size:16px;flex:0 0 28px;color:var(--shu-pale);border-color:var(--shu)}
.colophon .tag{font-family:var(--mincho);font-size:15px;color:var(--washi-2);letter-spacing:.03em}
.colophon .dom{font-family:var(--mono);margin-left:auto;font-size:11px;letter-spacing:.14em;color:var(--teal-soft)}
.colophon .shu{color:var(--shu-pale)}

/* ================= narrow ================= */
@media (max-width:760px){
  body{font-size:15px;line-height:1.9}
  .wrap{padding:0 20px}

  footer .wrap{padding-top:36px;padding-bottom:34px}
  .notes{grid-template-columns:1fr;gap:26px;margin-bottom:30px}
  .notes h3{font-size:16px;margin-bottom:10px}
  .notes p{font-size:13px;line-height:1.95}
  .biz{padding-top:24px}
  .biz dl{display:block;font-size:13px}
  .biz dt{font-size:11.5px}
  .biz dd{margin:2px 0 14px}
  .biz dd:last-child{margin-bottom:0}
  .colophon{margin-top:28px;padding-top:20px;gap:12px;flex-wrap:wrap}
  .colophon .tag{font-size:14px}
  .colophon .dom{display:none}
}