@charset "utf-8";
/* ============================================================
   honki.ai — 本気工房 / Honki Studio
   和紙(生成り) × 墨 × 朱印。角丸カードの海・グラデ・グラスモーフィズム禁止。
   2026-09-03
   ============================================================ */

:root{
  color-scheme: light dark;

  /* 生成り(きなり)= unbleached washi */
  --washi:   #F7F4EC;
  --washi-2: #F2EDE1;
  --washi-3: #EBE4D4;

  /* 墨(すみ) */
  --sumi:   #1A1A1A;
  --sumi-2: #4B4741;   /* 中墨 */
  --sumi-3: #7C766B;   /* 淡墨 */

  /* 朱(しゅ)— 印と罫にだけ。地に敷かない */
  --shu:    #C73E3A;
  --shu-tx: #AE322F;   /* 文字サイズで使う朱(可読性確保) */

  --line:   rgba(26,26,26,.14);
  --line-2: rgba(26,26,26,.07);
  --line-3: rgba(26,26,26,.04);

  --mincho: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,
            "Noto Serif JP","Songti SC",serif;
  --gothic: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
            "Yu Gothic",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --maxw: 1080px;
  --nav: 58px;
  --pad: clamp(20px,5vw,52px);

  --grain-blend: multiply;
  --grain-op: .055;
  --seal-knock: #F7F4EC;
}

@media (prefers-color-scheme: dark){
  :root{
    --washi:   #16161A;   /* 墨地 */
    --washi-2: #1C1C21;
    --washi-3: #24242B;

    --sumi:   #EBE5D8;    /* 胡粉(ごふん) */
    --sumi-2: #B0A897;
    --sumi-3: #837C6E;

    --shu:    #C73E3A;    /* 朱は変えない */
    --shu-tx: #E2726C;    /* 文字だけ明度を起こす */

    --line:   rgba(235,229,216,.16);
    --line-2: rgba(235,229,216,.085);
    --line-3: rgba(235,229,216,.05);

    --grain-blend: screen;
    --grain-op: .05;
    --seal-knock: #16161A;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav) + 20px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--washi);
  color:var(--sumi);
  font-family:var(--gothic);
  font-size:16.5px;
  line-height:1.9;
  font-weight:400;
  font-feature-settings:"palt" 1;   /* 日本語の詰め */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}

/* 和紙の地合い —— feTurbulence の紙目 + 簀の目(すのめ)の横線。画像ファイル無し */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
}
/* 簀の目: 紙を漉いた簾の跡。囁く程度に —— 縞に見えたら濃すぎ */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.26;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--line-3) 0 1px,
    transparent 1px 9px);
}
@media (prefers-color-scheme:dark){ body::after{ opacity:.2; } }

body > *{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--shu); color:#F7F4EC; }
:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* 言語切替(共有キー honki.lang)。既定は non-JS でも日本語が出る */
.l{ display:none; }
[data-lang="ja"] .l.ja,
[data-lang="en"] .l.en,
[data-lang="zh"] .l.zh{ display:inline; }
html:not([data-lang]) .l.ja{ display:inline; }

/* 数字は等幅 */
.num,.no,.tnum,time{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ══════════════ 見出し ══════════════ */
h1,h2,h3,.mincho{
  font-family:var(--mincho);
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.5;
  text-wrap:balance;
}
[data-lang="en"] h1,[data-lang="en"] h2,[data-lang="en"] h3{ letter-spacing:.005em; }

/* ══════════════ 印(朱印) ══════════════ */
.seal{ width:34px; height:34px; flex:none; display:block; }
.seal .plate{ fill:var(--shu); }
.seal .knock{ fill:var(--seal-knock); }

/* ══════════════ 罫 —— 墨の刷毛線 ══════════════ */
.rule{ display:block; width:100%; height:16px; color:var(--sumi); opacity:.5; }
.rule--shu{ color:var(--shu); opacity:.8; }

/* ══════════════ 見世(なび) ══════════════ */
nav{
  position:sticky; top:0; z-index:40;
  height:var(--nav);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--washi) 88%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
nav.stuck{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--washi) 96%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, blue)){
  nav{ background:var(--washi); }
}
nav .wrap{ display:flex; align-items:center; gap:clamp(14px,3vw,30px); width:100%; }

.yago{ display:flex; align-items:center; gap:9px; white-space:nowrap; }
.yago .nm{
  font-family:var(--mincho); font-weight:600; font-size:16px;
  letter-spacing:.12em; line-height:1;
}
.yago .nm .en{ letter-spacing:.02em; }

nav .links{
  display:flex; gap:clamp(12px,2.4vw,24px); font-size:13.5px; color:var(--sumi-2);
  white-space:nowrap;   /* 折り返すと 58px の見世からはみ出す */
}
/* 狭い画面では畳む。行き先は hero の CTA と footer に残してある */
@media (max-width:600px){
  nav .links{ display:none; }
  .yago .nm{ font-size:15px; letter-spacing:.08em; }
}
nav .links a{ position:relative; padding:2px 0; }
nav .links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--shu); transform:scaleX(0); transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
nav .links a:hover{ color:var(--sumi); }
nav .links a:hover::after,
nav .links a[aria-current]::after{ transform:scaleX(1); }
nav .links a[aria-current]{ color:var(--sumi); }

.langs{ margin-left:auto; display:flex; align-items:center; gap:0; }
.langs button{
  font:inherit; font-size:12px; line-height:1; letter-spacing:.06em;
  color:var(--sumi-3); background:none; border:0;
  padding:7px 9px; cursor:pointer; white-space:nowrap;
  transition:color .18s;
}
.langs button + button{ border-left:1px solid var(--line-2); }
.langs button:hover{ color:var(--sumi); }
.langs button[aria-pressed="true"]{ color:var(--shu-tx); font-weight:700; }

/* ══════════════ 表(hero) —— 非対称 ══════════════ */
.hero{ padding:clamp(56px,11vw,124px) 0 clamp(38px,6vw,64px); }
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,44px);
}
@media (min-width:900px){
  .hero .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); align-items:end; }
}
.hero h1{
  font-size:clamp(2.1rem,6.4vw,4rem);
  line-height:1.42;
  letter-spacing:.045em;
  font-weight:600;
}
[data-lang="en"] .hero h1{ line-height:1.16; letter-spacing:-.012em; }
.hero h1 .br{ display:block; }
.hero h1 .dot{ color:var(--shu); }

.hero .lede{
  margin-top:clamp(20px,3vw,30px);
  max-width:40ch;
  color:var(--sumi-2);
  font-size:clamp(.95rem,1.5vw,1.06rem);
  line-height:2;
}
.hero .brush{ margin-top:clamp(22px,3.4vw,34px); max-width:420px; }

.hero .aside{
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:13.5px;
  color:var(--sumi-3);
  line-height:1.95;
}
.hero .aside dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 16px; margin:0; }
.hero .aside dt{ color:var(--sumi-3); white-space:nowrap; }
.hero .aside dd{ margin:0; color:var(--sumi); font-variant-numeric:tabular-nums; }
.hero .aside dd b{ font-family:var(--mincho); font-size:19px; font-weight:600; letter-spacing:.02em; }

.cta{ margin-top:clamp(26px,4vw,38px); display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:.04em; font-weight:500;
  padding:11px 0 9px;
  border-bottom:1px solid var(--sumi);
  transition:color .2s, border-color .2s, gap .2s;
}
.btn .arw{ transition:transform .22s cubic-bezier(.2,.8,.3,1); }
.btn:hover{ color:var(--shu-tx); border-bottom-color:var(--shu); }
.btn:hover .arw{ transform:translateX(3px); }
.btn.p{ border-bottom-width:2px; font-weight:700; }

/* ══════════════ 章(section) ══════════════ */
section{ padding:clamp(44px,7vw,86px) 0; }
section + section{ border-top:1px solid var(--line-2); }

.shead{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:clamp(24px,3.6vw,38px);
}
.shead .kan{
  font-family:var(--mincho); font-size:12px; letter-spacing:.34em;
  color:var(--shu-tx); white-space:nowrap; padding-top:2px;
}
.shead h2{ font-size:clamp(1.15rem,2.3vw,1.5rem); letter-spacing:.06em; }
.shead .cnt{
  margin-left:auto; font-size:12.5px; color:var(--sumi-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ══════════════ 心得(principles)—— 箇条、カード禁止 ══════════════ */
.kokoro{ display:grid; gap:0; }
@media (min-width:820px){ .kokoro{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(34px,5vw,68px); } }
.kokoro > li{ list-style:none; padding:22px 0; border-top:1px solid var(--line-2); }
.kokoro > li:first-child,
.kokoro > li:nth-child(2){ border-top:1px solid var(--line); }
@media (max-width:819px){ .kokoro > li:nth-child(2){ border-top-color:var(--line-2); } }
.kokoro h3{
  font-size:1.02rem; letter-spacing:.05em; margin-bottom:7px;
  display:flex; align-items:baseline; gap:11px;
}
.kokoro h3 .idx{
  font-family:var(--mincho); font-size:12px; color:var(--shu-tx);
  letter-spacing:.1em; flex:none;
}
.kokoro p{ color:var(--sumi-2); font-size:14.4px; line-height:1.95; }

/* ══════════════ 番付表(banzuke) ══════════════ */
.banzuke{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }

.ban{
  display:grid;
  grid-template-columns:2.9rem 26px minmax(0,1fr);
  grid-template-areas:"no ico nm" ".  .   one" ". . go";
  align-items:center;
  gap:2px 12px;
  padding:14px 4px 15px;
  border-bottom:1px solid var(--line-2);
  transition:background .18s ease;
}
@media (min-width:760px){
  .ban{
    grid-template-columns:3.2rem 26px minmax(11rem,1.05fr) minmax(0,1.5fr) auto;
    grid-template-areas:"no ico nm one go";
    gap:0 18px;
    padding:11px 6px 12px;
  }
}
.ban:hover{ background:var(--washi-2); }
.ban:last-child{ border-bottom:1px solid var(--line); }

.ban .no{
  grid-area:no;
  font-family:var(--mincho); font-size:12.5px; letter-spacing:.05em;
  color:var(--sumi-3); text-align:right; padding-right:2px;
  transition:color .18s;
}
.ban:hover .no{ color:var(--shu-tx); }

.ban .ico{
  grid-area:ico; width:26px; height:26px; border-radius:6px;
  border:1px solid var(--line-2); background:var(--washi-3);
}
.ban .nm{
  grid-area:nm;
  font-family:var(--mincho); font-weight:600; font-size:15px;
  letter-spacing:.02em; line-height:1.55;
  overflow-wrap:anywhere;
}
.ban .one{
  grid-area:one;
  color:var(--sumi-2); font-size:13.4px; line-height:1.7;
  overflow-wrap:anywhere;
}
@media (min-width:760px){
  .ban .one{ padding-right:14px; }
}
.ban .go{
  grid-area:go;
  font-size:12px; letter-spacing:.05em; color:var(--sumi-3);
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
  transition:color .18s;
  justify-self:start;
}
@media (min-width:760px){ .ban .go{ justify-self:end; } }
@media (max-width:759px){ .ban .go{ margin-top:5px; } }
.ban .go:hover,.ban:hover .go{ color:var(--shu-tx); }
.ban .go svg{ transition:transform .2s cubic-bezier(.2,.8,.3,1); }
.ban .go:hover svg{ transform:translate(2px,-2px); }

/* 分野の帯 */
.bu{ margin-top:clamp(34px,5vw,58px); }
.bu:first-of-type{ margin-top:0; }
.bu > h3{
  display:flex; align-items:baseline; gap:12px;
  font-size:1rem; letter-spacing:.13em; font-weight:600;
  padding-bottom:9px;
}
.bu > h3 .n{
  margin-left:auto; font-size:12px; color:var(--sumi-3);
  letter-spacing:.02em; font-family:var(--gothic); font-weight:400;
  font-variant-numeric:tabular-nums;
}
.bu > h3 .mk{ color:var(--shu); font-size:11px; letter-spacing:.2em; }

/* ══════════════ 探す(search + 分野) ══════════════ */
.shirabe{ margin-bottom:clamp(26px,4vw,40px); }
.sbox{ display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--sumi); padding-bottom:9px; max-width:460px; }
.sbox svg{ flex:none; color:var(--sumi-3); }
.sbox input{
  font:inherit; font-family:var(--gothic); font-size:15px;
  background:none; border:0; outline:none; color:var(--sumi);
  width:100%; padding:2px 0;
}
.sbox input::placeholder{ color:var(--sumi-3); }

.pills{ margin-top:18px; display:flex; flex-wrap:wrap; gap:0 2px; }
.pill{
  font:inherit; font-size:12.5px; letter-spacing:.03em;
  background:none; border:0; cursor:pointer;
  color:var(--sumi-3); padding:5px 10px;
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.pill:hover{ color:var(--sumi); }
.pill.on{ color:var(--sumi); border-bottom-color:var(--shu); font-weight:700; }

.nohit{ display:none; padding:44px 0; color:var(--sumi-3); font-size:14px; }
body.no-hit .nohit{ display:block; }

/* ══════════════ 誌(company) ══════════════ */
.cotable{ margin:0; border-top:1px solid var(--line); max-width:760px; }
.corow{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2px;
  padding:15px 4px 16px; border-bottom:1px solid var(--line-2);
}
@media (min-width:640px){
  .corow{ grid-template-columns:11rem minmax(0,1fr); gap:0 24px; align-items:baseline; }
}
.corow dt{
  font-family:var(--mincho); font-size:13.5px; letter-spacing:.09em;
  color:var(--sumi-3); font-weight:600;
}
.corow dd{ margin:0; font-size:15px; color:var(--sumi); overflow-wrap:anywhere; }

/* ══════════════ 文(contact / footer) ══════════════ */
.bun{ max-width:56ch; color:var(--sumi-2); font-size:15px; line-height:2.05; }
.bun a.mail{ color:var(--sumi); border-bottom:1px solid var(--shu); padding-bottom:1px; }
.bun a.mail:hover{ color:var(--shu-tx); }

footer{
  border-top:1px solid var(--line);
  padding:34px 0 46px;
  font-size:12.5px; color:var(--sumi-3);
}
footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
footer .fl{ display:flex; flex-wrap:wrap; gap:14px 20px; }
footer a:hover{ color:var(--sumi); }
footer .cp{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* ══════════════ 現れ(reveal)は入れない ══════════════
   🔴 2026-09-03: 番付表 210 行に scroll-reveal を掛けたら、observer が発火する前は
   全行 opacity:0 —— 「実装したのに見えない」の典型。墨は紙の上に最初から在るもの。
   演出のために内容を隠す仕組みは、この工房では使わない。 */

/* ══════════════ 印刷 ══════════════ */
@media print{
  nav,.langs,.shirabe,.rule{ display:none; }
  body::before,body::after{ display:none; }
  body{ background:#fff; color:#000; }
}