/* かおみせ共通スタイル。studio.html / request.html が <link> で読む。
   トークン・ヘッダー・フッター・チラシ見本・作品サムネなど、複数ページで共有するものだけを置く。
   ページ固有のレイアウトは各HTML側の <style> に書くこと。
   （広告LP landing.html / designers.html は外部依存ゼロの単一HTMLなので、意図的にこれを読まない） */

:root{
  --ink:#17233d;
  --ink-soft:#2b3a5a;
  --paper:#f7f3ea;
  --paper-deep:#efe8d6;
  --paper-card:#fbf8f1;
  --gold:#a8874e;
  --gold-deep:#8a6d38;
  --gold-soft:#c9b487;
  --rule:#cabfa6;
  --muted:#5b5647;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --latin:"Times New Roman",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--latin);text-transform:uppercase;
  letter-spacing:.52em;text-indent:.52em;font-size:11px;color:var(--gold);
}
.step-no{font-family:var(--latin);font-style:italic;font-size:13px;color:var(--gold);display:block;margin-bottom:8px;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,243,234,.86);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px;}
.brand{display:flex;align-items:baseline;gap:11px;text-decoration:none;white-space:nowrap;}
.brand .mark{font-family:var(--serif);font-size:23px;letter-spacing:.14em;color:var(--ink);}
.brand .sub{font-family:var(--latin);font-style:italic;font-size:12px;letter-spacing:.14em;color:var(--gold);}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:12.5px;letter-spacing:.06em;color:var(--muted);text-decoration:none;white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}

/* ---------- section ---------- */
section{padding:64px 0;}
.sec-head{max-width:660px;margin-bottom:36px;}
.sec-head .eyebrow{display:block;margin-bottom:16px;}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:.05em;line-height:1.3;}
.sec-head p{margin-top:14px;color:var(--muted);font-size:14.5px;max-width:44em;}
.band{background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* ---------- notice（見本表示・注意書き） ---------- */
.notice{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(168,135,78,.09);border:1px solid var(--gold-soft);border-radius:3px;
  padding:14px 16px;font-size:12.5px;color:var(--gold-deep);line-height:1.85;
}
.notice .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;margin-top:7px;}
.notice a{color:var(--gold-deep);}

/* ---------- 作ったチラシの縮小見本（state から描画） ---------- */
.mini-stage{perspective:1400px;}
.mini{
  width:218px;aspect-ratio:1 / 1.414;
  background:radial-gradient(120% 80% at 50% -8%, #fbf8f1 0%, var(--paper) 44%, var(--paper-deep) 100%);
  border:1px solid rgba(202,191,166,.6);
  box-shadow:0 26px 54px -28px rgba(23,35,61,.5);
  padding:18px 16px 14px;display:flex;flex-direction:column;
  transform:rotateY(-8deg) rotateX(2deg);
}
.mini.flat{transform:none;}
.mini.lg{width:300px;padding:24px 22px 18px;}
.m-eyebrow{font-family:var(--latin);text-transform:uppercase;text-align:center;letter-spacing:.42em;text-indent:.42em;font-size:5.5px;color:var(--gold);}
.mini.lg .m-eyebrow{font-size:7.5px;}
.m-rule{height:1px;background:var(--rule);margin:7px 0;}
.m-title{font-family:var(--serif);text-align:center;font-weight:600;font-size:15px;letter-spacing:.1em;color:var(--ink);line-height:1.35;}
.mini.lg .m-title{font-size:21px;letter-spacing:.12em;}
.m-latin{font-family:var(--latin);font-style:italic;text-align:center;font-size:7px;letter-spacing:.1em;color:var(--gold);margin:2px 0 8px;}
.mini.lg .m-latin{font-size:9.5px;margin:3px 0 11px;}
.m-photo{
  aspect-ratio:1.5 / 1;margin-bottom:8px;border:1px solid var(--rule);
  background:repeating-linear-gradient(45deg,rgba(168,135,78,.1) 0,rgba(168,135,78,.1) 2px,transparent 2px,transparent 8px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.m-photo img{width:100%;height:100%;object-fit:cover;}
.m-photo span{font-family:var(--latin);font-size:5.5px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;}
.m-cast{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;}
.m-cast .role{font-family:var(--latin);text-transform:uppercase;letter-spacing:.3em;font-size:5px;color:var(--gold);}
.mini.lg .m-cast .role{font-size:6.5px;}
.m-cast .name{font-family:var(--serif);font-size:9px;letter-spacing:.08em;color:var(--ink);}
.mini.lg .m-cast .name{font-size:12.5px;}
.m-prog{margin-top:auto;border-top:1px solid var(--rule);padding-top:7px;}
.m-prog p{font-family:var(--serif);font-size:6px;color:var(--ink-soft);text-align:center;line-height:1.8;}
.mini.lg .m-prog p{font-size:8.5px;}
.m-foot{margin-top:7px;text-align:center;font-family:var(--serif);font-size:6px;letter-spacing:.14em;color:var(--muted);}
.mini.lg .m-foot{font-size:8px;}

/* ---------- 作品サムネ（CSSだけで描くチラシ見本） ---------- */
.w{width:100%;aspect-ratio:1 / 1.414;display:flex;flex-direction:column;padding:8px 7px;position:relative;overflow:hidden;}
.w.big{padding:14px 12px;}
.w-paper{background:linear-gradient(160deg, #fbf8f1, var(--paper-deep));}
.w-ink{background:linear-gradient(170deg, #22314f, #131d33);}
.w-gold{background:var(--paper);}
.w-eyebrow{font-family:var(--latin);text-transform:uppercase;text-align:center;letter-spacing:.3em;font-size:3.4px;color:var(--gold);}
.w.big .w-eyebrow{font-size:5.5px;letter-spacing:.42em;}
.w-ink .w-eyebrow{color:var(--gold-soft);}
.w-rule{height:.5px;background:var(--rule);margin:3px 0;}
.w.big .w-rule{height:1px;margin:6px 0;}
.w-ink .w-rule{background:rgba(201,180,135,.4);}
.w-title{font-family:var(--serif);text-align:center;font-size:6.5px;letter-spacing:.08em;color:var(--ink);line-height:1.4;}
.w.big .w-title{font-size:12px;letter-spacing:.1em;}
.w-ink .w-title{color:var(--paper);}
.w-latin{font-family:var(--latin);font-style:italic;text-align:center;font-size:3.4px;color:var(--gold);margin-top:1px;}
.w.big .w-latin{font-size:6px;margin-top:3px;}
.w-ink .w-latin{color:var(--gold-soft);}
.w-photo{
  flex:1;margin:4px 0;border:.5px solid var(--rule);min-height:0;
  background:repeating-linear-gradient(45deg,rgba(168,135,78,.14) 0,rgba(168,135,78,.14) 1.5px,transparent 1.5px,transparent 6px);
}
.w.big .w-photo{margin:8px 0;border-width:1px;}
.w-ink .w-photo{border-color:rgba(201,180,135,.35);background:repeating-linear-gradient(45deg,rgba(201,180,135,.14) 0,rgba(201,180,135,.14) 1.5px,transparent 1.5px,transparent 6px);}
.w-photo.tall{flex:2;}
.w-lines{display:flex;flex-direction:column;gap:2px;margin-top:auto;}
.w-lines i{height:1.6px;background:rgba(23,35,61,.16);border-radius:1px;}
.w.big .w-lines i{height:3px;}
.w-ink .w-lines i{background:rgba(201,180,135,.3);}
.w-lines i.s{width:56%;margin:0 auto;}
.w-band{background:var(--gold);color:#1b1508;text-align:center;font-family:var(--serif);font-size:5px;letter-spacing:.1em;padding:2px 0;margin:0 -7px;}
.w.big .w-band{font-size:9px;padding:4px 0;margin:0 -12px;}
.w-side{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--gold);}
.w.big .w-side{width:6px;}

/* ---------- footer ---------- */
footer{background:var(--paper-deep);border-top:1px solid var(--rule);padding:40px 0;}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.foot-brand{font-family:var(--serif);font-size:18px;letter-spacing:.14em;color:var(--ink);}
.foot-org{font-family:var(--latin);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

@media (max-width:640px){
  section{padding:44px 0;}
  .brand .sub{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}