/* ==========================================================================
   想造工房モノリエ ブランドサイト｜共有デザインシステム v2
   引き算・ビジュアル主役 / 大タイポ＋余白＋写真＋琥珀1色アクセント
   このファイルが全ページ共通の正本。ページ固有の一点ものだけ各HTMLの<style>へ。
   ========================================================================== */

:root{
  --bg:#FCFAF5; --ink:#2E2519; --head:#3D3120; --soft:#6E6252; --muted:#9A8E7C;
  --line:#ECE5D8; --amber:#C8892B; --amber-d:#A56E1C; --cream:#F3ECDD;
  --sh:0 10px 40px rgba(70,55,30,.10); --sh-s:0 4px 18px rgba(70,55,30,.07);
  /* 差し色（木の葉の緑）＝他ページへ続くボタンのアクセント */
  --leaf:#5E8A2E; --leaf-d:#4C7325; --leaf-t:#F0F5E4; --leaf-l:#CADBA0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased;font-weight:400;overflow-x:clip}
a{color:inherit;text-decoration:none}
.serif{font-family:"Zen Maru Gothic",serif}
.amber{color:var(--amber-d)}
.nw{white-space:nowrap}
/* 斜め読みキーワード（拾い読みの足場）＝新緑マーカーで全ページ一貫の新鮮さ */
.kw{font-size:1.18em;font-weight:900;color:var(--head);
  background:linear-gradient(transparent 68%,rgba(150,195,80,.46) 68%);padding:0 2px}
p,li,.catch,.desc,.a,.body{line-break:strict;overflow-wrap:break-word}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:860px}
section{position:relative}
img{max-width:100%}

/* ===== draft banner ===== */
.draft{background:#F3E9E4;color:#B4593F;font-size:.72rem;text-align:center;padding:6px 14px;letter-spacing:.02em}
.draft b{font-weight:700}

/* ===== nav ===== */
nav.top{position:sticky;top:0;z-index:50;background:rgba(252,250,245,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .in{max-width:1120px;margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:26px}
nav.top .logo img{height:46px;width:auto;display:block}
nav.top .sp{margin-left:auto}
nav.top a.item{font-size:.86rem;color:var(--soft);font-weight:500}
nav.top a.item:hover{color:var(--amber-d)}
nav.top a.item.now{color:var(--amber-d);font-weight:700}
@media(max-width:820px){nav.top a.item{display:none}}
nav.top a.cta{font-size:.86rem;font-weight:700;color:#fff;background:var(--amber);padding:9px 20px;border-radius:999px;display:inline-block}
nav.top a.cta:hover{background:var(--amber-d);color:#fff}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;padding:14px 28px;border-radius:999px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--amber);color:#fff;box-shadow:var(--sh-s)}
.btn.primary:hover{background:var(--amber-d);color:#fff}
.btn.ghost{background:#fff;color:var(--head);border:1px solid var(--line)}
.btn.next{background:#fff;color:var(--head);border:1.5px solid var(--leaf)}
.btn.next:hover{background:var(--leaf-t);border-color:var(--leaf-d);color:var(--head)}
.btn.sm{padding:10px 20px;font-size:.86rem}
.inline-go{font-weight:700;color:var(--amber-d);border-bottom:2px solid rgba(200,137,43,.35);transition:border-color .15s}
.inline-go:hover{border-bottom-color:var(--amber)}
/* 本文リンクはアフォーダンスを立てる（琥珀＋下線）。nav/card/btnは除外 */
p a:not(.btn):not(.inline-go),.faq .a a,.more .body a,.pnote a,.names-note a,li a:not(.btn){
  color:var(--amber-d);font-weight:700;border-bottom:1px solid rgba(200,137,43,.45);transition:border-color .15s}
p a:not(.btn):not(.inline-go):hover,.faq .a a:hover,.more .body a:hover,.pnote a:hover,.names-note a:hover,li a:not(.btn):hover{border-bottom-color:var(--amber)}

/* ===== photo placeholder (写真の実枠＝撮影リスト) ===== */
.photo{border-radius:22px;background:linear-gradient(135deg,#EFE7D6,#E4D8C1 60%,#DECFB2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--sh)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .tag{font-size:.78rem;color:#B3A488;font-weight:500;letter-spacing:.08em;
  background:rgba(255,255,255,.5);padding:5px 13px;border-radius:999px;text-align:center;line-height:1.5}

/* ===== section blocks & headings ===== */
.block{padding:88px 0}
.block.tint{background:var(--cream)}
@media(max-width:860px){.block{padding:56px 0}}
.lead-h{text-align:center;max-width:38em;margin:0 auto 44px}
.lead-h .k{font-size:.8rem;font-weight:700;color:var(--amber-d);letter-spacing:.18em}
.lead-h h2{font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:2.15rem;color:var(--head);margin-top:10px;line-height:1.5}
.lead-h p{font-size:.98rem;color:var(--soft);margin-top:14px}
@media(max-width:860px){.lead-h h2{font-size:1.65rem}}
.sub-h{text-align:center;max-width:34em;margin:0 auto 26px}
.sub-h h3{font-family:"Zen Maru Gothic",serif;font-size:1.35rem;color:var(--head)}
.sub-h p{font-size:.94rem;color:var(--soft);margin-top:8px}

/* ===== page hero (下層ページ共通) ===== */
.phero{padding:70px 0 30px;text-align:center}
@media(max-width:860px){.phero{padding:44px 0 16px}}
.phero .eyebrow{font-size:.82rem;font-weight:700;color:var(--amber-d);letter-spacing:.16em}
.phero h1{font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:2.9rem;line-height:1.4;color:var(--head);margin:16px 0 18px}
@media(max-width:860px){.phero h1{font-size:2rem}}
.phero h1 .mk{background:linear-gradient(transparent 64%,rgba(200,137,43,.28) 64%)}
.phero p.lead{font-size:1.06rem;color:var(--soft);max-width:34em;margin:0 auto}
.phero .pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.85rem;font-weight:500;color:var(--head);box-shadow:var(--sh-s)}

/* ===== mission / 強弱トリオ（番号アンカー＋結論太字＋詳細小） ===== */
.mission{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media(max-width:820px){.mission{grid-template-columns:1fr;gap:34px;max-width:480px;margin:0 auto}}
.mcard{position:relative;padding-top:16px;border-top:3px solid var(--amber)}
.mcard .no{font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:2.2rem;line-height:1;
  color:var(--amber);letter-spacing:.02em}
.mcard h3{font-family:"Zen Maru Gothic",serif;font-size:1.95rem;color:#231B10;margin:2px 0 14px}
.mcard .catch{font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:12px}
.mcard .desc{font-size:.9rem;color:#6E6252}
@media(max-width:860px){.mcard h3{font-size:1.65rem}.mcard .catch{font-size:1.06rem}}

/* ===== 3-up feature trio ===== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:820px){.trio{grid-template-columns:1fr;gap:34px;max-width:420px;margin:0 auto}}
.feat .photo{aspect-ratio:3/2;margin-bottom:20px}
.feat .ic{font-size:1.7rem;line-height:1}
.feat h3{font-family:"Zen Maru Gothic",serif;font-size:1.3rem;color:var(--head);margin:6px 0 8px}
.feat p{font-size:.92rem;color:var(--soft)}

/* ===== link cards (入口/次の一歩) ===== */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.card-grid{grid-template-columns:1fr}}
a.card{display:grid;grid-template-columns:150px 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh-s);transition:transform .18s,box-shadow .18s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
a.card .photo{border-radius:0;box-shadow:none}
a.card .c{padding:22px 24px}
a.card .c h3{font-family:"Zen Maru Gothic",serif;font-size:1.22rem;color:var(--head)}
a.card .c .who{font-size:.76rem;color:var(--amber-d);font-weight:700;margin:3px 0 9px}
a.card .c p{font-size:.88rem;color:var(--soft)}
a.card .c .go{margin-top:12px;font-size:.85rem;font-weight:700;color:var(--amber-d)}
@media(max-width:520px){a.card{grid-template-columns:1fr}a.card .photo{aspect-ratio:16/9}}

/* ===== simple surface card ===== */
.surface{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 32px;box-shadow:var(--sh-s)}
@media(max-width:640px){.surface{padding:24px 22px}}

/* ===== numbered steps / flow ===== */
.flow{display:grid;gap:16px}
.flow.n3{grid-template-columns:repeat(3,1fr)}
.flow.n4{grid-template-columns:repeat(4,1fr)}
@media(max-width:680px){.flow.n3,.flow.n4{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.flow.n3,.flow.n4{grid-template-columns:1fr}}
.stepc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center;box-shadow:var(--sh-s)}
.stepc .no{font-family:"Zen Maru Gothic",serif;font-size:1.5rem;color:var(--amber-d);font-weight:700}
.stepc b{display:block;font-size:.98rem;color:var(--head);margin:6px 0 5px}
.stepc span{font-size:.82rem;color:var(--soft)}

/* ===== price table ===== */
.ptbl{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-s)}
.ptbl table{border-collapse:collapse;width:100%;min-width:460px;font-size:.94rem}
.ptbl th,.ptbl td{border-bottom:1px solid var(--line);padding:15px 18px;text-align:left;vertical-align:middle}
.ptbl thead th{background:var(--cream);color:var(--head);font-size:.82rem;font-weight:700;white-space:nowrap}
.ptbl thead th .sub{display:block;font-size:.68rem;font-weight:400;color:var(--muted)}
.ptbl tbody tr:last-child td{border-bottom:none}
.ptbl td.plan{font-weight:700;color:var(--head);white-space:nowrap}
.ptbl td.desc{font-size:.84rem;color:var(--soft)}
.ptbl td.num{text-align:right;font-family:"Zen Maru Gothic",serif;font-weight:700;color:var(--amber-d);white-space:nowrap}
.pnote{font-size:.85rem;color:var(--soft);margin:12px 4px 0}
.pnote a{color:var(--amber-d);font-weight:700}
.freebar{text-align:center;background:#fff;border:1px solid var(--amber);color:var(--amber-d);border-radius:14px;padding:14px;margin-top:14px;font-weight:700;font-size:.95rem}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:10px;box-shadow:var(--sh-s)}
.faq summary{font-size:.98rem;font-weight:700;color:var(--head);cursor:pointer;list-style:none;padding:16px 0;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:var(--amber-d);font-weight:700;margin-right:10px}
.faq summary::after{content:"＋";position:absolute;right:0;color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{font-size:.9rem;color:var(--soft);padding:14px 0 18px 1.5em}
.faq .a b{color:var(--head)}

/* ===== tooltip（点線＋ホバー/タップで補足＝情報を隠さず畳む） ===== */
.tip{position:relative;color:var(--amber-d);font-weight:700;cursor:help;outline:none;padding:1px 3px;border-radius:4px;
  background:linear-gradient(transparent 58%,rgba(200,137,43,.24) 58%);border-bottom:1px dotted var(--amber);transition:background .15s}
.tip:hover,.tip:focus{background:rgba(200,137,43,.2)}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(5px);background:var(--head);color:#fff;font-size:.78rem;font-weight:400;
  line-height:1.65;width:max-content;max-width:250px;padding:11px 15px;border-radius:12px;box-shadow:var(--sh);
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:60;text-align:left;white-space:normal}
.tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--head);opacity:0;visibility:hidden;transition:opacity .18s;z-index:61}
.tip:hover::after,.tip:focus::after,.tip:hover::before,.tip:focus::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){.tip::after{max-width:210px}}

/* ===== accordion（もっと読む＝読みたい人だけ開く） ===== */
.more{max-width:640px;margin:18px auto 0}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:700;font-size:.94rem;color:var(--head);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:15px 20px;box-shadow:var(--sh-s);transition:border-color .15s,background .15s}
.more>summary:hover{border-color:var(--amber);background:var(--cream)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"＋";flex:0 0 auto;width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:50%;background:var(--amber);color:#fff;font-size:1rem;font-weight:700}
.more[open]>summary{border-color:var(--amber);background:var(--cream)}
.more[open]>summary::after{content:"−"}
.more .body{margin-top:10px;font-size:.9rem;color:var(--soft);line-height:1.95;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;box-shadow:var(--sh-s)}
.more .body b{color:var(--head)}

/* ===== chips row ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.78rem;font-weight:700;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.chip.on{background:var(--cream);border-color:var(--amber);color:var(--amber-d)}

/* ===== CTA band ===== */
.cta-band{text-align:center;padding:80px 0 20px}
.cta-band h2{font-family:"Zen Maru Gothic",serif;font-size:1.7rem;color:var(--head)}
.cta-band p{color:var(--soft);margin-top:10px}
.cta-band .btns{justify-content:center;display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}

/* ===== footer ===== */
footer{border-top:1px solid var(--line);margin-top:40px;padding:40px 0 30px;background:var(--cream)}
footer .fin{max-width:1120px;margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between}
footer .fnav{display:flex;flex-wrap:wrap;gap:18px 44px}
footer .fnav a{font-size:.84rem;color:var(--soft);font-weight:500}
footer .fnav a:hover{color:var(--amber-d)}
footer .fgroup{display:flex;flex-direction:column;gap:7px;min-width:120px}
footer .fgroup b{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.08em;margin-bottom:3px}
footer .flogo img{height:32px;opacity:.9;margin-bottom:10px;display:block}
footer .cr{font-size:.76rem;color:var(--muted);margin-top:22px;text-align:center}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== 共通ヒーロー（トップ4客層ページで共有） ===== */
.hero{position:relative;min-height:0;height:clamp(460px,70vh,700px);display:flex;align-items:flex-end;overflow:hidden}
.hero .ph{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#e9e2d2,#e9e2d2 12px,#f2ecdf 12px,#f2ecdf 24px);display:flex;align-items:center;justify-content:center;color:#8a7a5c;font-size:.85rem;text-align:center;line-height:1.9}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,22,10,0) 34%,rgba(30,22,10,.58) 100%)}
.hero .txt{position:relative;z-index:2;width:100%;max-width:1060px;margin:0 auto;padding:0 26px 40px;color:#fff}
.hero h1{font-family:"Zen Maru Gothic",serif;font-size:clamp(1.7rem,5.2vw,3rem);font-weight:900;line-height:1.5;text-shadow:0 2px 18px rgba(30,22,10,.45)}
.hero .sub{margin-top:10px;font-size:clamp(.82rem,2.4vw,.98rem);opacity:.95;line-height:1.95;text-shadow:0 1px 10px rgba(30,22,10,.5)}

/* ===== オーディエンスタブ（見た目タブ／実体は各客層ページへのリンク） ===== */
.atabs{position:sticky;top:0;z-index:55;background:rgba(252,250,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:2px;padding:0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.atabs a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:15px 22px;font-weight:700;font-size:.95rem;color:var(--soft);border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.atabs a .e{font-size:1.15rem;line-height:1}
.atabs a:hover{color:var(--head);background:rgba(200,137,43,.06)}
.atabs a.active{color:var(--head);border-bottom-color:var(--amber)}
.atabs a .soon{font-size:.62rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:1px}
@media(max-width:640px){.atabs{justify-content:flex-start}.atabs a{padding:13px 15px;font-size:.86rem;gap:5px}.atabs a .e{font-size:1rem}}

/* ===== 関わり方ナビ .snav（確定版：PC=グループ色分け帯／スマホ=☰ドロップダウン）=====
   4グループ色：つくる g1=琥珀 / たのむ g2=緑 / かう g3=青 / ささえる g4=紫。開閉JSは assets/nav.js */
.snav{position:sticky;top:0;z-index:55;background:rgba(252,250,245,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.snav-burger{display:none}
.snav-groups{display:flex;justify-content:center;gap:30px;padding:9px 16px}
.snav-groups .g{display:flex;flex-direction:column;padding-top:8px}
.snav-groups .gh{font-size:.82rem;font-weight:700;letter-spacing:.06em;padding:0 12px;margin:2px 0 3px}
.snav-groups .g1 .gh{color:var(--amber-d)}
.snav-groups .g2 .gh{color:#5E8A2E}
.snav-groups .g3 .gh{color:#3E7C9A}
.snav-groups .g4 .gh{color:#8B7BA8}
.snav-groups .gt{display:flex;gap:2px}
.snav-groups a{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 12px 9px;font-weight:700;font-size:.93rem;color:var(--soft);text-decoration:none;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s}
.snav-groups a .e{font-size:1.05rem;line-height:1}
.snav-groups a:hover{color:var(--head)}
.snav-groups .g1 a.active,.snav-groups .g1 a:hover{border-bottom-color:var(--amber);color:var(--head)}
.snav-groups .g2 a.active,.snav-groups .g2 a:hover{border-bottom-color:#5E8A2E;color:var(--head)}
.snav-groups .g3 a.active,.snav-groups .g3 a:hover{border-bottom-color:#3E7C9A;color:var(--head)}
.snav-groups .g4 a.active,.snav-groups .g4 a:hover{border-bottom-color:#8B7BA8;color:var(--head)}
@media(max-width:640px){
  .snav-burger{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;padding:13px 18px;font:inherit;font-weight:700;color:var(--head);font-size:.95rem;cursor:pointer}
  .snav-burger .bi{font-size:1.15rem;line-height:1}
  .snav-burger .now{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--amber-d)}
  .snav-groups{position:absolute;left:0;right:0;top:100%;flex-direction:column;justify-content:flex-start;gap:0;
    background:rgba(252,250,245,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    box-shadow:0 14px 26px rgba(45,37,25,.14);max-height:0;overflow:hidden;padding:0 18px;transition:max-height .26s ease}
  .snav.open .snav-groups{max-height:82vh;padding:6px 18px 16px}
  .snav-groups .g{padding-top:11px}
  .snav-groups .gh{font-size:.78rem;padding:0 10px;margin:0 0 2px}
  .snav-groups .gt{flex-wrap:wrap;gap:0}
  .snav-groups a{padding:9px 10px;font-size:.98rem;border-bottom:none}
  .snav-groups a.active{color:var(--head)}
}