/*
Theme Name: Umewaka International
Theme URI: https://umewaka.co.jp/
Author: 株式会社 弥
Description: Umewaka.International株式会社 コーポレートサイト(罫線の和モダン・昼)。1ページ構成。
Version: 1.0.0
Requires at least: 6.0
License: Proprietary
Text Domain: umewaka-intl
*/

/* ============================================================
   Umewaka.International — B×D統合案「罫線の和モダン・昼」(2026-08-23)
   白 #FFFFFF × 墨黒 #0E0C0A × 紅梅 #B3273A(クリーム禁止)
   構造方針: 紙面のような罫線の設計を「見せ」、写真と明朝で美から入る。
   罫=紙面/幕=揚幕/慣性=呼吸。ギミックは全て意味に接続する。
   ============================================================ */
:root{
  --sumi:#0E0C0A;
  --white:#FFFFFF;
  --kobai:#B3273A;
  --muted:#5A5754;
  --line:rgba(14,12,10,.16);
  --line-soft:rgba(14,12,10,.09);
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cormorant","Times New Roman",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --ez:cubic-bezier(.625,.05,0,1);   /* 署名イージング(登場・展開の8割) */
  --ez-o:cubic-bezier(.33,1,.68,1);  /* micro用 */
  --t-micro:.35s;--t-rise:1s;--t-curtain:1.25s;--t-line:.9s; /* 時間トークン */
  --frame:clamp(10px,1.6vw,20px);    /* 外枠の余白 */
  --spine:clamp(40px,4vw,58px);      /* 左の背表紙幅 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--white);color:var(--sumi);
  font-family:var(--sans);font-weight:400;font-size:14px;
  line-height:2.1;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  padding-left:calc(var(--frame) + var(--spine));
  padding-right:var(--frame);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--kobai);color:var(--white)}
.crest{display:block}
.crest img{width:100%}

/* ---------- 外枠と背表紙(固定の「紙面」・ロードで罫が引かれる) ---------- */
.frame-l,.frame-r,.frame-t,.frame-b{position:fixed;background:var(--sumi);z-index:60;pointer-events:none}
.frame-l{left:var(--frame);top:var(--frame);bottom:var(--frame);width:1px;transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ez) .1s}
.frame-r{right:var(--frame);top:var(--frame);bottom:var(--frame);width:1px;transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--ez) .1s}
.frame-t{left:var(--frame);right:var(--frame);top:var(--frame);height:1px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ez) .3s}
.frame-b{left:var(--frame);right:var(--frame);bottom:var(--frame);height:1px;transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--ez) .3s}
body.loaded .frame-l,body.loaded .frame-r{transform:scaleY(1)}
body.loaded .frame-t,body.loaded .frame-b{transform:scaleX(1)}
/* 背表紙: 紋・現在地(縦書き)・読み進み(朱の糸) */
.spine{
  position:fixed;left:var(--frame);top:var(--frame);bottom:var(--frame);width:var(--spine);
  z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:16px 0 14px;
  border-right:1px solid var(--line);
  background:var(--white);
}
.spine .crest{width:20px;opacity:.9}
.spine .now{
  writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;
  font-size:10.5px;letter-spacing:.42em;color:var(--muted);
  transition:opacity .45s var(--ez-o);min-height:9em;text-align:center;
}
.spine .now.swap{opacity:0}
.spine .thread{position:relative;width:1px;height:clamp(60px,12vh,110px);background:var(--line)}
.spine .thread i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--kobai);transform:scaleY(0);transform-origin:top} /* JSが読み進みで伸ばす */
.spine .pct{font-family:var(--en);font-style:italic;font-size:10px;letter-spacing:.08em;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ez-o),transform var(--t-rise) var(--ez)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
/* 幕(揚幕=下から上へ開く) */
.rv-clip{clip-path:inset(101% 0 0 0);transition:clip-path var(--t-curtain) var(--ez) .1s}
.rv-clip.on,.rv.on .rv-clip,.jsrv.on .rv-clip{clip-path:inset(-1% 0 0 0)}
.clipv{clip-path:inset(101% 0 0 0)}
.cliph{clip-path:inset(0 101% 0 0)}
.clipv,.cliph{transition:clip-path var(--t-curtain) var(--ez)}
.clipv.on{clip-path:inset(-1% 0 0 0)}
.cliph.on{clip-path:inset(0 -1% 0 0)}
/* 罫が引かれる(横線) */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ez) .1s}
.rule.on,.rv.on .rule,.jsrv.on .rule{transform:scaleX(1)}
/* 窓越しパララックス(JSが--py/--psを駆動) */
.pxw{display:block;overflow:hidden;position:relative}
.pxw>img{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.12));will-change:transform;width:100%;height:100%;object-fit:cover}

/* ---------- scaffolding ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,3vw,44px)}
.sec-label{font-size:15px;font-weight:400;display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(26px,4.4vh,46px)}
.sec-label::before{content:"";width:0;height:1px;background:var(--kobai);align-self:center;transition:width var(--t-line) var(--ez) .15s}
.rv.on .sec-label::before,.sec-label.on::before{width:32px}
.sec-label .en{font-family:var(--en);font-style:italic;font-weight:500;font-size:15px;letter-spacing:.28em}
.sec-label .jp{font-size:11.5px;letter-spacing:.22em;color:var(--muted)}

/* ---------- header(枠の内側に浮く) ---------- */
.hd{
  position:fixed;top:calc(var(--frame) + 1px);left:calc(var(--frame) + var(--spine) + 1px);right:calc(var(--frame) + 1px);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px clamp(16px,2.4vw,30px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ez-o);
}
.hd.scrolled{border-bottom-color:var(--line)}
.hd .wm{font-family:var(--en);font-style:italic;font-weight:500;font-size:16px;letter-spacing:.05em;line-height:1}
.hd-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.hd-nav a{font-size:11.5px;letter-spacing:.16em;opacity:.85;transition:opacity .3s var(--ez-o)}
.hd-nav a:hover{opacity:1}
.hd-nav a.cta{
  opacity:1;color:var(--sumi);border:1px solid var(--line);
  padding:7px 18px 6px;font-weight:500;letter-spacing:.18em;line-height:1.7;
  transition:background var(--t-micro) var(--ez-o),color var(--t-micro) var(--ez-o),border-color var(--t-micro) var(--ez-o);
}
/* 初画面の赤は句点1点のみ。スクロール後にCTAが着色する */
.hd.scrolled .hd-nav a.cta{background:var(--kobai);color:var(--white);border-color:var(--kobai)}
.hd.scrolled .hd-nav a.cta:hover{background:var(--sumi);border-color:var(--sumi)}
@media (max-width:900px){.hd-nav{gap:12px}.hd-nav a{font-size:10.5px;letter-spacing:.1em;white-space:nowrap}.hd-nav a.cta{padding:6px 12px 5px}}
@media (max-width:600px){.hd-nav a[href="#services"],.hd-nav a[href="#history"]{display:none}}
@media (max-width:600px){.hd .wm{display:none}}

/* ---------- hero(罫の紙面に、明朝と昼の舞台) ---------- */
.hero{padding:clamp(92px,14vh,140px) 0 0}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1px solid var(--line);border-top:1px solid var(--sumi)}
.hero-l{
  padding:clamp(28px,5vh,58px) clamp(22px,3vw,44px) clamp(24px,4vh,44px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,4vh,40px);
}
h1.hero-copy{
  font-family:var(--mincho);font-weight:900;
  font-size:clamp(30px,4.2vw,58px);line-height:1.8;letter-spacing:.16em;
}
h1 .kb{color:var(--kobai)}
.hero-sub{font-size:13.5px;line-height:2.3;color:rgba(14,12,10,.82);max-width:32em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;text-align:center;
  font-size:13px;font-weight:500;letter-spacing:.2em;
  padding:13px 32px 12px;line-height:1.7;
  transition:background var(--t-micro) var(--ez-o),color var(--t-micro) var(--ez-o),border-color var(--t-micro) var(--ez-o);
}
.btn-solid{background:var(--sumi);color:var(--white);border:1px solid var(--sumi)}
.btn-solid:hover{background:var(--kobai);border-color:var(--kobai)}
.btn-ghost{border:1px solid var(--line);color:var(--sumi)}
.btn-ghost:hover{border-color:var(--sumi)}
.hero-r{position:relative}
.hero-r .pxw{height:100%;min-height:clamp(320px,52vh,560px)}
.hero-r .pxw>img{object-position:50% 16%}
.hero-r figcaption{
  position:absolute;left:14px;bottom:10px;z-index:2;
  font-size:10px;letter-spacing:.14em;color:var(--white);text-shadow:0 0 12px rgba(14,12,10,.85);
}
/* 罫の下段: 事業の索引(1行4室) */
.hero-index{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:none}
.hero-index a{
  padding:14px 6px 12px;text-align:center;
  font-size:11px;letter-spacing:.2em;color:rgba(14,12,10,.75);
  border-right:1px solid var(--line);
  transition:background var(--t-micro) var(--ez-o),color var(--t-micro) var(--ez-o);
}
.hero-index a:last-child{border-right:none}
.hero-index a:hover{background:var(--sumi);color:var(--white)}
.hero-index a i{font-family:var(--en);font-style:italic;font-weight:400;color:var(--kobai);margin-right:8px;font-size:12px}
.hero-index a:hover i{color:#DE8895}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-l{border-right:none;border-bottom:1px solid var(--line)}
  .hero-r .pxw{min-height:52vw}
  .hero-index{grid-template-columns:repeat(2,1fr)}
  .hero-index a:nth-child(2){border-right:none}
  .hero-index a:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- 出会いの実績 ---------- */
.enc{padding:clamp(88px,14vh,160px) 0 clamp(60px,9vh,110px)}
.enc-lead{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(22px,3.2vw,40px);line-height:2;letter-spacing:.16em;
  margin-bottom:clamp(14px,2.4vh,24px);
}
.enc-lead .x{color:var(--kobai)}
.enc-note{font-size:13px;color:rgba(14,12,10,.78);max-width:42em;margin-bottom:clamp(40px,7vh,80px)}
.enc-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(14px,2.2vw,32px)}
.card{position:relative;border-top:1px solid var(--sumi);padding-top:18px}
.card .idx{font-family:var(--en);font-style:italic;font-weight:400;font-size:14px;letter-spacing:.2em;color:var(--kobai);display:block;margin-bottom:12px}
.card .formula{
  font-family:var(--mincho);font-weight:900;
  font-size:clamp(36px,4.8vw,62px);line-height:1.3;letter-spacing:.1em;margin-bottom:18px;
}
.card .formula .x{font-family:var(--en);font-style:italic;font-weight:400;color:var(--kobai);font-size:.5em;padding:0 .22em;vertical-align:.57em}
.card h3{font-family:var(--mincho);font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:.12em;line-height:1.9;margin-bottom:8px;text-wrap:pretty}
.card .scene{font-family:var(--mincho);font-weight:400;font-size:13px;line-height:2.3;letter-spacing:.1em;margin-bottom:8px;max-width:32em}
.card .meta{font-size:11.5px;line-height:2.1;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;max-width:34em}
.card .meta b{font-weight:500;color:var(--sumi)}
.card .role{
  display:inline-block;margin-top:10px;
  font-size:10px;letter-spacing:.18em;color:var(--kobai);
  border:1px solid rgba(179,39,58,.5);padding:1px 10px 0;line-height:1.8;
}
.card .role.cat{color:var(--muted);border-color:var(--line)} /* 立場でなく分類 */
.card figure{position:relative;margin-bottom:16px}
.card .pxw{aspect-ratio:16/10}
.card figcaption{position:absolute;left:12px;bottom:10px;z-index:2;font-size:10px;letter-spacing:.12em;color:var(--white);text-shadow:0 0 12px rgba(14,12,10,.85)}
.c1{grid-column:1/6}
.c2{grid-column:7/13;margin-top:clamp(50px,10vh,130px)}
.c3{grid-column:1/7;margin-top:clamp(36px,7vh,100px)}
.c4{grid-column:8/13;margin-top:clamp(70px,13vh,170px)}
@media (max-width:820px){
  .enc-grid{display:block}
  .c1,.c2,.c3,.c4{margin-top:52px}
  .c1{margin-top:0}
}

/* ---------- services(1主4従=公演企画が主役) ---------- */
.svc{padding:clamp(60px,9vh,110px) 0}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:end;margin-bottom:clamp(30px,5vh,56px)}
.svc-head h2.big{font-family:var(--mincho);font-weight:900;font-size:clamp(24px,3.2vw,40px);letter-spacing:.2em;line-height:1.8}
.svc-head p{font-size:12.5px;color:rgba(14,12,10,.75);max-width:32em;justify-self:end}
@media (max-width:820px){.svc-head{grid-template-columns:1fr}.svc-head p{justify-self:start}}
.svc-list{border-top:1px solid var(--sumi)}
.svc-item{
  display:grid;grid-template-columns:96px 1fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;
  padding:clamp(20px,3.2vh,32px) 6px;
  border-bottom:1px solid var(--line);
  transition:background var(--t-micro) var(--ez-o),padding-left var(--t-micro) var(--ez-o),clip-path var(--t-curtain) var(--ez);
}
.svc-item:hover{background:rgba(14,12,10,.03);padding-left:18px}
.svc-item:nth-child(2){transition-delay:0s,0s,.08s}
.svc-item:nth-child(3){transition-delay:0s,0s,.16s}
.svc-item:nth-child(4){transition-delay:0s,0s,.24s}
.svc-item:nth-child(5){transition-delay:0s,0s,.32s}
.svc-item .no{font-family:var(--en);font-style:italic;font-weight:400;font-size:clamp(20px,2.2vw,28px);color:var(--kobai);letter-spacing:.06em}
.svc-item h3{font-family:var(--mincho);font-weight:700;font-size:clamp(16px,1.7vw,21px);letter-spacing:.14em}
.svc-item .d{font-size:11.5px;color:var(--muted);text-align:right;max-width:30em}
@media (max-width:820px){
  .svc-item{grid-template-columns:52px 1fr}
  .svc-item .d{grid-column:2;text-align:left;margin-top:2px}
}

/* ---------- image break(昼の紙面に一度だけ夜が差す) ---------- */
.brk{position:relative;height:min(78vh,680px);margin:clamp(50px,8vh,90px) 0;overflow:hidden}
.brk .pxw{position:absolute;inset:0}
.brk::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,12,10,.32),transparent 34%)}
.brk-copy{
  position:absolute;top:50%;right:clamp(24px,7vw,110px);transform:translateY(-50%);z-index:2;
  writing-mode:vertical-rl;
  font-family:var(--mincho);font-weight:700;color:var(--white);
  font-size:clamp(18px,2.3vw,28px);letter-spacing:.34em;line-height:2.1;
  text-shadow:0 0 22px rgba(14,12,10,.8);
}
.brk-cap{position:absolute;left:16px;bottom:12px;z-index:2;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.85)}

/* ---------- 沿革 ---------- */
.his{padding:clamp(70px,11vh,130px) 0}
.his-quote{margin:clamp(22px,4vh,40px) 0 clamp(50px,8vh,96px)}
.his-quote .q{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(18px,2.7vw,34px);letter-spacing:clamp(.28em,1.1vw,.5em);line-height:2;white-space:nowrap;
}
.his-quote .attr{margin-top:14px;font-size:11.5px;color:var(--muted);letter-spacing:.14em}
@media (max-width:600px){.his-quote .q{white-space:normal;letter-spacing:.28em}}
.tl{position:relative;margin-left:clamp(0px,3vw,48px);padding-left:clamp(26px,4vw,52px)}
.tl::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--line);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ez) .15s}
.tl.on::before{transform:scaleY(1)}
.tl-item{position:relative;padding-bottom:clamp(26px,4.4vh,46px)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:calc(-1px - clamp(26px,4vw,52px) - 3px);top:13px;
  width:6px;height:6px;background:var(--kobai);transform:rotate(45deg);
}
.tl-item .yr{font-family:var(--en);font-weight:500;font-size:clamp(21px,2.3vw,30px);letter-spacing:.1em;line-height:1.2;margin-bottom:4px}
.tl-item .ev{font-size:12.5px;line-height:2.15;color:rgba(14,12,10,.86);max-width:44em}
.tl-item .ev b{font-weight:500;font-family:var(--mincho);letter-spacing:.08em}

/* ---------- company ---------- */
.co{padding:clamp(40px,6vh,70px) 0 clamp(70px,11vh,130px)}
.co-grid{display:grid;grid-template-columns:minmax(230px,1fr) 1.7fr;gap:clamp(28px,5vw,80px)}
@media (max-width:820px){.co-grid{grid-template-columns:1fr}}
.co-side .crest{width:46px;margin-bottom:18px;opacity:.92}
.co-side .nm{font-family:var(--en);font-style:italic;font-weight:500;font-size:19px;letter-spacing:.06em;line-height:1.5;margin-bottom:6px}
.co-side .nmjp{font-size:11.5px;letter-spacing:.2em;color:var(--muted)}
.co-dl{border-top:1px solid var(--sumi)}
.co-dl .row{
  display:grid;grid-template-columns:124px 1fr;gap:18px;
  padding:13px 4px;border-bottom:1px solid var(--line);
  font-size:13px;
}
.co-dl dt{font-weight:400;letter-spacing:.16em;color:var(--muted)}
.co-dl dd{line-height:2;opacity:.94}
.co-note{
  margin-top:26px;padding:18px 22px;
  border-left:2px solid var(--kobai);
  background:rgba(14,12,10,.03);
  font-size:11.5px;line-height:2.15;
}
.co-note b{font-weight:500}
.nobr{white-space:nowrap}
@media (max-width:600px){.co-dl .row{grid-template-columns:1fr;gap:2px;padding:12px 4px}}

/* ---------- contact ---------- */
.ct{padding:clamp(80px,13vh,160px) 0 clamp(60px,10vh,110px);text-align:center;border-top:1px solid var(--sumi)}
.ct .lead{
  font-family:var(--mincho);font-weight:900;
  font-size:clamp(22px,3vw,36px);letter-spacing:.34em;text-indent:.34em;line-height:1.9;
  margin-bottom:clamp(12px,2.2vh,20px);
}
.ct .sub{font-size:13px;color:rgba(14,12,10,.78);margin-bottom:clamp(28px,4.6vh,44px)}
.ct .tel{
  font-family:var(--en);font-weight:400;
  font-size:clamp(34px,5.2vw,54px);letter-spacing:.06em;line-height:1.2;
  display:inline-block;border-bottom:1px solid var(--line);
  padding:0 .3em .12em;transition:border-color .4s var(--ez-o),color .4s var(--ez-o);
}
a.tel:hover{border-color:var(--kobai);color:var(--kobai)}
.ct .tel-note{margin-top:12px;font-size:11.5px;letter-spacing:.1em;color:rgba(14,12,10,.75)}
.ct .mail{margin-top:14px}
.ct .mail a{
  font-family:var(--en);font-weight:400;
  font-size:clamp(16px,2vw,21px);letter-spacing:.06em;
  border-bottom:1px solid var(--line);
  padding:0 .2em .1em;transition:border-color .4s var(--ez-o),color .4s var(--ez-o);
}
.ct .mail a:hover{border-color:var(--kobai);color:var(--kobai)}
.ct-purpose{margin-top:18px;font-size:11.5px;letter-spacing:.14em;color:rgba(14,12,10,.9)}
.ct-purpose a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s var(--ez-o),border-color .3s var(--ez-o)}
.ct-purpose a:hover{color:var(--kobai);border-color:var(--kobai)}
.ct-purpose .sep{opacity:.4;padding:0 7px}
.ct-promise{margin:clamp(30px,4.6vh,46px) auto 0;max-width:560px;border-top:1px solid var(--line);padding-top:clamp(18px,3vh,28px)}
.ct-promise p{font-size:12.5px;line-height:2.3}
.ct-promise p+p{margin-top:.9em}
.ct .addr{margin-top:22px;font-size:11.5px;letter-spacing:.12em;color:rgba(14,12,10,.62);line-height:2.2}

/* ---------- en note / footer ---------- */
.en-note{border-top:1px solid var(--line);padding:clamp(40px,6.4vh,72px) clamp(18px,3vw,44px);text-align:center}
.en-note .en-body{
  font-family:var(--en);font-weight:400;
  font-size:clamp(15px,1.8vw,19px);line-height:2;letter-spacing:.02em;
  max-width:44em;margin:0 auto 14px;opacity:.92;
}
.en-note .en-meta{font-family:var(--en);font-style:italic;font-size:12.5px;letter-spacing:.06em;color:var(--muted);line-height:2.2}
.ft{border-top:1px solid var(--line);padding:34px 0 40px;text-align:center}
.ft .crest{width:28px;margin:0 auto 12px;opacity:.9}
.ft .wm{font-family:var(--en);font-style:italic;font-size:14px;letter-spacing:.1em;margin-bottom:10px}
.ft small{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);line-height:2}
.ft .pv{margin-top:8px;font-size:10px;letter-spacing:.18em;color:var(--kobai)}

@media (max-width:820px){
  :root{--spine:0px}
  .spine{display:none}
  body{padding-left:var(--frame)}
  .hd{left:calc(var(--frame) + 1px)}
}

/* ---------- 能というもの(新設) ---------- */
.noh{padding:clamp(80px,12vh,150px) 0}
.noh-body{
  font-family:var(--mincho);font-weight:400;
  font-size:clamp(15px,1.8vw,19px);line-height:2.6;letter-spacing:.14em;
  max-width:36em;
}
.noh-body b{font-weight:700}
.noh-bridge{
  margin-top:clamp(22px,3.6vh,36px);
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(18px,2.4vw,28px);letter-spacing:.2em;line-height:2;
}
.noh-bridge .kb{color:var(--kobai)}
/* ---------- 立ててきた舞台(新設・会場の幅=証拠) ---------- */
.stg{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line-soft)}
.stg-lead{font-size:13px;color:rgba(14,12,10,.78);max-width:42em;margin-bottom:clamp(26px,4.4vh,44px)}
.stg-list{border-top:1px solid var(--sumi)}
.stg-item{
  display:grid;grid-template-columns:minmax(180px,.9fr) 1.6fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(18px,3vh,28px) 6px;
  border-bottom:1px solid var(--line);
  transition:background var(--t-micro) var(--ez-o),padding-left var(--t-micro) var(--ez-o),clip-path var(--t-curtain) var(--ez);
}
.stg-item:hover{background:rgba(14,12,10,.03);padding-left:16px}
.stg-item:nth-child(2){transition-delay:0s,0s,.08s}
.stg-item:nth-child(3){transition-delay:0s,0s,.16s}
.stg-item:nth-child(4){transition-delay:0s,0s,.24s}
.stg-item:nth-child(5){transition-delay:0s,0s,.32s}
.stg-item .where{font-family:var(--mincho);font-weight:700;font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em}
.stg-item .what{font-size:12px;line-height:2.1;color:rgba(14,12,10,.85)}
.stg-item .role{font-size:10px;letter-spacing:.18em;color:var(--kobai);border:1px solid rgba(179,39,58,.5);padding:1px 10px 0;line-height:1.8;white-space:nowrap}
.stg-item .role.cat{color:var(--muted);border-color:var(--line)}
@media (max-width:820px){
  .stg-item{grid-template-columns:1fr;gap:2px}
  .stg-item .role{justify-self:start;margin-top:4px}
}
/* ---------- 中間CTA帯(新設) ---------- */
.midcta{background:var(--sumi);color:var(--white);padding:clamp(40px,6.4vh,66px) 0;text-align:center}
.midcta p{font-family:var(--mincho);font-size:clamp(15px,1.9vw,20px);letter-spacing:.18em;line-height:2.2;margin-bottom:18px}
.midcta .btn-solid{background:var(--kobai);border-color:var(--kobai)}
.midcta .btn-solid:hover{background:var(--white);color:var(--sumi);border-color:var(--white)}
/* ---------- 事業: 1主4従 ---------- */
.svc-main{
  border:1px solid var(--sumi);padding:clamp(24px,4vh,40px) clamp(20px,3vw,36px);
  margin-bottom:clamp(22px,3.6vh,34px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;
  transition:clip-path var(--t-curtain) var(--ez);
}
.svc-main .no{font-family:var(--en);font-style:italic;font-size:clamp(24px,2.6vw,34px);color:var(--kobai)}
.svc-main h3{font-family:var(--mincho);font-weight:900;font-size:clamp(19px,2.2vw,26px);letter-spacing:.16em;margin-bottom:6px}
.svc-main .d{font-size:12.5px;line-height:2.2;color:rgba(14,12,10,.85);max-width:36em}
.svc-main .act{align-self:center}
@media (max-width:820px){.svc-main{grid-template-columns:1fr;gap:10px}}
/* ---------- 私たちについて(新設) ---------- */
.abt{padding:clamp(70px,11vh,130px) 0;border-top:1px solid var(--line-soft)}
.abt-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(26px,5vw,70px)}
@media (max-width:820px){.abt-grid{grid-template-columns:1fr}}
.abt h3{font-family:var(--mincho);font-weight:900;font-size:clamp(20px,2.6vw,32px);letter-spacing:.16em;line-height:2}
.abt .body p{font-size:13px;line-height:2.4;color:rgba(14,12,10,.88);max-width:40em}
.abt .body p+p{margin-top:1.2em}

/* 見出し語(掛け算)を使わない事例は、タイトルが主役になる */
.card:not(:has(.formula)) h3{font-family:var(--mincho);font-weight:900;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.1em;line-height:1.85;margin-bottom:14px}
.card h3 a{border-bottom:1px solid transparent;transition:border-color var(--t-micro) var(--ez-o)}
.card h3 a:hover{border-bottom-color:var(--kobai)}

/* ---------- 所属能楽師(写真+紹介の横組み。人数が増えても崩れない) ---------- */
.art{padding:clamp(66px,10vh,120px) 0;border-top:1px solid var(--line-soft)}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  gap:clamp(28px,5vw,60px)}
.art-item{display:grid;grid-template-columns:clamp(150px,20vw,220px) 1fr;
  gap:clamp(18px,3vw,32px);align-items:start;max-width:640px;
  transition:clip-path var(--t-curtain) var(--ez)}
.art-item .pxw{aspect-ratio:3/4;margin:0}
.art-body{padding-top:4px}
.art-role{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--kobai);margin-bottom:9px}
.art-name{font-family:var(--mincho);font-weight:900;font-size:clamp(21px,2.4vw,29px);
  letter-spacing:.14em;line-height:1.8}
.art-name .hon{font-size:.62em;font-weight:700;letter-spacing:.1em}
.art-read{font-family:var(--en);font-style:italic;font-size:12.5px;letter-spacing:.1em;
  color:var(--muted);margin-top:5px}
.art-more{margin-top:16px;font-size:12px;letter-spacing:.16em}
.art-more a{color:var(--kobai);border-bottom:1px solid rgba(179,39,58,.4);padding-bottom:3px;
  transition:color var(--t-micro) var(--ez-o),border-color var(--t-micro) var(--ez-o)}
.art-more a::after{content:" →";letter-spacing:0}
.art-more a:hover{color:var(--sumi);border-color:var(--sumi)}
.art-name a{border-bottom:1px solid transparent;transition:border-color var(--t-micro) var(--ez-o)}
.art-name a:hover{border-bottom-color:var(--kobai)}
.art-item .pxw{display:block}
.art-text{font-size:12.5px;line-height:2.25;color:rgba(14,12,10,.85);margin-top:14px}
.art-text p+p{margin-top:.9em}
@media (max-width:560px){
  .art-item{grid-template-columns:1fr;gap:16px}
  .art-item .pxw{max-width:230px}
}
@media (prefers-reduced-motion:reduce){.art-item{transition:none}}

/* ============================================================
   所属能楽師の個別ページ
   ねらい: 依頼の判断材料を、能楽の品位を保ったまま並べる
   動き: 行マスク(lm)= 文字が下から立ち上がる / 幕 / 視差
   ============================================================ */
/* 行マスク出現(研究ノートの中核技法。文字を面で見せる) */
.lm{display:block;overflow:clip;padding-bottom:.14em}
.lm>span{display:block;transform:translateY(108%);transition:transform 1.15s var(--ez) .1s}
.lm.on>span,.rv.on .lm>span{transform:none}

.ar-hero{padding:clamp(104px,15vh,168px) 0 clamp(50px,8vh,90px)}
.ar-hero-grid{display:grid;grid-template-columns:1.05fr .8fr;gap:clamp(26px,5vw,64px);align-items:center}
.ar-kicker{font-size:11px;letter-spacing:.3em;color:var(--kobai);margin-bottom:14px}
.ar-name{font-family:var(--mincho);font-weight:900;
  font-size:clamp(34px,5.6vw,72px);letter-spacing:.14em;line-height:1.5}
.ar-name .hon{font-style:normal;font-size:.5em;font-weight:700;letter-spacing:.08em}
.ar-read{font-family:var(--en);font-style:italic;font-size:14px;letter-spacing:.14em;color:var(--muted);margin-top:8px}
.ar-lead{font-size:14px;line-height:2.4;color:rgba(14,12,10,.86);margin-top:clamp(20px,3.4vh,30px);max-width:30em}
.ar-cta{margin-top:clamp(22px,3.6vh,32px)}
.ar-hero-r .pxw{aspect-ratio:3/4}
@media (max-width:820px){
  .ar-hero-grid{grid-template-columns:1fr;gap:26px}
  .ar-hero-r{max-width:330px}
}

.ar-bio{padding:clamp(50px,8vh,90px) 0;border-top:1px solid var(--line-soft)}
.ar-bio-body{font-size:13.5px;line-height:2.5;color:rgba(14,12,10,.88);max-width:42em}
.ar-bio-body p+p{margin-top:1.1em}

.ar-req{padding:clamp(66px,10vh,120px) 0;border-top:1px solid var(--line-soft)}
.ar-req-lead{font-size:13px;line-height:2.3;color:rgba(14,12,10,.78);max-width:40em;margin-bottom:clamp(28px,4.6vh,46px)}
.ar-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ar-card{background:var(--white);padding:clamp(24px,3.6vh,34px) clamp(20px,2.4vw,28px);
  transition:background var(--t-micro) var(--ez-o),clip-path var(--t-curtain) var(--ez)}
.ar-card:hover{background:rgba(14,12,10,.03)}
.ar-card:nth-child(2){transition-delay:0s,.08s}
.ar-card:nth-child(3){transition-delay:0s,.16s}
.ar-card:nth-child(4){transition-delay:0s,.24s}
.ar-card .no{font-family:var(--en);font-style:italic;font-size:14px;letter-spacing:.2em;color:var(--kobai);display:block;margin-bottom:12px}
.ar-card h3{font-family:var(--mincho);font-weight:700;font-size:clamp(16px,1.7vw,20px);letter-spacing:.12em;line-height:1.9;margin-bottom:10px}
.ar-card p{font-size:12.5px;line-height:2.2;color:rgba(14,12,10,.82)}

.ar-scene{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line-soft)}
.ar-list{list-style:none;border-top:1px solid var(--sumi)}
.ar-list li{display:grid;grid-template-columns:minmax(190px,.8fr) 1fr;gap:clamp(12px,3vw,36px);
  align-items:baseline;padding:clamp(16px,2.6vh,24px) 4px;border-bottom:1px solid var(--line);
  transition:background var(--t-micro) var(--ez-o),padding-left var(--t-micro) var(--ez-o),clip-path var(--t-curtain) var(--ez)}
.ar-list li:hover{background:rgba(14,12,10,.03);padding-left:16px}
.ar-list li:nth-child(2){transition-delay:0s,0s,.07s}
.ar-list li:nth-child(3){transition-delay:0s,0s,.14s}
.ar-list li:nth-child(4){transition-delay:0s,0s,.21s}
.ar-list li:nth-child(5){transition-delay:0s,0s,.28s}
.ar-list li:nth-child(6){transition-delay:0s,0s,.35s}
.ar-list span{font-family:var(--mincho);font-weight:700;font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em}
.ar-list i{font-style:normal;font-size:12px;line-height:2.1;color:var(--muted)}
@media (max-width:640px){.ar-list li{grid-template-columns:1fr;gap:3px}}

.ar-flow{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line-soft)}
.ar-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,3vw,34px)}
.ar-step{border-top:1px solid var(--sumi);padding-top:16px;
  transition:clip-path var(--t-curtain) var(--ez)}
.ar-step:nth-child(2){transition-delay:.08s}
.ar-step:nth-child(3){transition-delay:.16s}
.ar-step:nth-child(4){transition-delay:.24s}
.ar-step .s{font-family:var(--en);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--kobai);display:block;margin-bottom:8px}
.ar-step h3{font-family:var(--mincho);font-weight:700;font-size:16px;letter-spacing:.14em;margin-bottom:8px}
.ar-step p{font-size:12px;line-height:2.15;color:rgba(14,12,10,.8)}

.ar-end{padding:clamp(80px,12vh,150px) 0 clamp(60px,9vh,110px);border-top:1px solid var(--sumi);text-align:center}
.ar-end-copy{font-family:var(--mincho);font-weight:900;
  font-size:clamp(22px,3.4vw,42px);letter-spacing:.26em;text-indent:.26em;line-height:1.9;margin-bottom:16px}
.ar-end-copy .kb{font-style:normal;color:var(--kobai)}
.ar-end-sub{font-size:12.5px;color:var(--muted);margin-bottom:clamp(24px,4vh,34px)}
.ar-back{margin-top:clamp(26px,4.4vh,40px);font-size:12px;letter-spacing:.14em}
.ar-back a{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s var(--ez-o)}
.ar-back a:hover{color:var(--kobai)}

@media (prefers-reduced-motion:reduce){
  .lm>span,.lm.on>span,.rv.on .lm>span{transform:none;transition:none}
  .ar-card,.ar-list li,.ar-step{transition:none}
}

/* ---------- お問い合わせフォーム(会社概要と同じ罫線の設計) ---------- */
#form{scroll-margin-top:150px}
.uw-form-wrap{max-width:760px;margin:clamp(30px,5vh,50px) auto 0;text-align:left}
.uw-note{border-left:2px solid var(--kobai);background:rgba(14,12,10,.03);
  padding:18px 22px;font-size:12.5px;line-height:2.15;margin-bottom:26px}
.uw-note.uw-ok{border-left-color:var(--sumi)}
.uw-note b{font-weight:500}
.uw-form{border-top:1px solid var(--sumi)}
.uw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 1行=1項目。左に見出し、右に記入欄。罫線が行を仕切る */
.uw-row{display:grid;grid-template-columns:158px 1fr;gap:clamp(12px,2.4vw,26px);
  align-items:baseline;padding:15px 4px;border-bottom:1px solid var(--line)}
.uw-row>label{font-size:11.5px;letter-spacing:.16em;color:var(--muted);line-height:2.2;padding-top:3px}
.uw-row>label i{font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--kobai);margin-left:7px}
.uw-row input[type=text],.uw-row input[type=email],.uw-row input[type=tel],
.uw-row select,.uw-row textarea{
  width:100%;font-family:var(--sans);font-size:14.5px;line-height:2;color:var(--sumi);
  background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:4px 2px 6px;transition:border-color var(--t-micro) var(--ez-o);
  -webkit-appearance:none;appearance:none;
}
.uw-row input:hover,.uw-row select:hover,.uw-row textarea:hover{border-bottom-color:var(--line)}
.uw-row input:focus,.uw-row select:focus,.uw-row textarea:focus{
  outline:none;border-bottom-color:var(--kobai)}
.uw-row input::placeholder,.uw-row textarea::placeholder{color:rgba(14,12,10,.28)}
.uw-row select{cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--sumi) 50%),linear-gradient(135deg,var(--sumi) 50%,transparent 50%);
  background-position:calc(100% - 11px) 60%,calc(100% - 6px) 60%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.uw-row textarea{resize:vertical;min-height:132px;line-height:2.2;
  border-bottom:1px solid var(--line-soft);padding-top:6px}
.uw-row.tall{align-items:start}

/* 補足の一文は罫線をまたがない小さな注記に */
.uw-hint{grid-column:1/-1;font-size:11px;color:var(--muted);letter-spacing:.1em;
  padding:14px 4px 2px;border-bottom:1px solid var(--line);margin:0}

.uw-agree{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:2.1;
  color:rgba(14,12,10,.8);margin:clamp(20px,3.2vh,28px) 4px clamp(24px,3.6vh,32px);cursor:pointer}
.uw-agree input{margin-top:5px;accent-color:var(--kobai);width:14px;height:14px;flex:none}
.uw-submit{text-align:center}
.uw-submit .btn{border:1px solid var(--sumi);background:var(--sumi);color:var(--white);
  cursor:pointer;font-family:var(--sans);padding:16px 52px 15px;font-size:13px;letter-spacing:.24em}
.uw-submit .btn:hover{background:var(--kobai);border-color:var(--kobai)}

@media (max-width:700px){
  .uw-row{grid-template-columns:1fr;gap:2px;padding:14px 2px}
  .uw-row>label{padding-top:0}
  .uw-hint{padding:12px 2px 2px}
}

/* reduced-motion は必ず最後(後方定義に負けないため) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rv-clip,.rv-clip.on,.rv.on .rv-clip,.jsrv.on .rv-clip,.clipv,.cliph,.clipv.on,.cliph.on{clip-path:none;transition:none}
  .pxw>img{transform:none;will-change:auto}
  .rule,.rule.on,.rv.on .rule,.jsrv.on .rule{transform:none;transition:none}
  .frame-l,.frame-r,.frame-t,.frame-b{transform:none;transition:none}
  .tl::before,.tl.on::before{transform:none;transition:none}
  .svc-item,.stg-item,.svc-main{transition:none}
  .sec-label::before{width:32px;transition:none}
  .spine .now{transition:none}
}