/* ============ Bボタン株式会社 v2 — 仕事は、奪われない。分けられる。 ============ */
:root{
  --ink:#101223; --ink-2:#181B31; --paper:#F4F5F8; --white:#FFFFFF;
  --ai:#2B3A8C; --ai-b:#7E8BE6; --gold:#D8901F; --gold-d:#B0741A;
  --mist:#8A90AC; --mist-d:#7A8099; --mist-t:#666C86; --rule:#DCDFE9; --rule-dk:rgba(220,223,233,.14);
  --serif:"Shippori Mincho B1","Shippori Bridge","Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
  --mono:"IBM Plex Mono","Noto Sans Mono",monospace;
}
/* R4-5: swap時の縦書きH1段差対策 — 同系明朝(Noto Serif CJK)をメトリクス調整して橋渡し */
@font-face{
  font-family:"Shippori Bridge";
  src:local("Noto Serif CJK JP"),local("Noto Serif JP");
  /* 監査実測に基づく: Shipporiの字面はNotoより小(仕=90px vs 96px@100px)→94%、実配信メトリクス1.449em系 */
  size-adjust:94%;ascent-override:105%;descent-override:40%;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
html.lenis{scroll-behavior:auto;}
body{
  font-family:var(--sans);color:var(--paper);background:var(--ink);
  line-height:2.0;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip;
  position:relative;
}

/* ふたすじの緒 */
#cords{position:absolute;top:0;left:0;pointer-events:none;z-index:5;} /* 寸法はJSがpx固定(スケール事故防止) */
#cords path{fill:none;stroke-linecap:round;}
.kn{position:absolute;top:0;left:0;width:0;height:0;}
.st,.doors{position:relative;} /* .kn の基準(絶対配置の親) */
::selection{background:var(--gold);color:var(--ink);}
b{font-weight:700;}
:focus-visible{outline:2px solid var(--ai-b);outline-offset:3px;border-radius:2px;}
[id]{scroll-margin-top:84px;} /* 固定ヘッダー分(無JS時のアンカー潜り防止) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ai-c{color:var(--ai-b);}
.gd{color:var(--gold);}

/* 縦書き */
.tate{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);font-weight:800;}

/* header */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:26px;padding:16px 5vw;
  background:color-mix(in srgb,var(--ink) 76%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-dk);
}
.logo{font-family:var(--serif);font-weight:800;font-size:19px;color:var(--white);text-decoration:none;}
.logo span{font-size:11.5px;color:var(--mist);margin-left:6px;}
.nav{display:flex;gap:24px;margin-left:auto;}
.nav a{font-size:13px;color:#c7cadd;text-decoration:none;letter-spacing:.08em;}
.nav a:hover{color:var(--gold);}

/* buttons */
.btn{
  display:inline-block;font-weight:700;font-size:14px;letter-spacing:.06em;
  padding:13px 30px;border-radius:999px;text-decoration:none;
  border:1.5px solid var(--gold);color:var(--gold);background:transparent;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);}
.btn-s{padding:8px 18px;font-size:12.5px;}
.btn-w{border-color:var(--gold);background:var(--gold);color:var(--ink);}
.btn-w:hover{background:var(--white);border-color:var(--white);}

/* ============ 質感・グラフィック要素 ============ */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* おぉ① 障子びらき */
.shoji-wrap{position:fixed;inset:0;z-index:120;display:flex;pointer-events:none;}
.shoji-wrap[hidden]{display:none;}
.shoji{
  flex:1;background-color:#ECE8DC;
  background-image:
    repeating-linear-gradient(90deg, rgba(16,18,35,.10) 0 2px, transparent 2px 150px),
    repeating-linear-gradient(0deg,  rgba(16,18,35,.10) 0 2px, transparent 2px 190px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 90px rgba(16,18,35,.14);
}
.shoji-l{border-right:6px solid #2b2417;}
.shoji-r{border-left:6px solid #2b2417;}

/* おぉ② そうぞうの変化 */
.st-morph{grid-template-columns:auto 1fr;}
/* 既定=並置表示(無JS・reduced-motionでも「創造に。」が見える) */
.morph-stage{display:flex;flex-direction:row-reverse;gap:26px;flex-wrap:wrap;justify-content:flex-end;}
/* JSが生きている時だけ重ね合わせ(クロスフェード用)に昇格 */
.morph-stage.morph-live{display:block;position:relative;}
.morph-live .morph-b{position:absolute;inset:0;opacity:0;}
.morph-stage.nij{filter:url(#nijimi);} /* にじみは変化中のみ(GPU節約) */
html.static .morph-stage{filter:none;}
.tl2{display:block;} /* 縦書きの段(DOM正順=右→左) */
.tcy{text-combine-upright:all;} /* 縦中横: 2文字英数は正立で組む */
.mtail{display:block;margin-top:.15em;}

/* おぉ③ お試し仕分け */
.try{margin-top:70px;max-width:1150px;}
.try[hidden]{display:none;}
.try-h{font-family:var(--serif);font-weight:800;font-size:21px;margin-bottom:20px;}
.try-tray{display:flex;gap:14px;flex-wrap:wrap;}
.try-item{position:relative;}
.try-chip{
  font-family:var(--sans);font-size:14px;padding:12px 24px;border-radius:999px;
  background:var(--white);border:1.5px dashed var(--mist-d);color:var(--ink);
  cursor:pointer;transition:border-color .25s ease, transform .2s ease;
}
.try-chip:hover{border-color:var(--ink);transform:translateY(-2px);}
.try-chip:disabled{cursor:default;}
.try-pick{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  display:flex;gap:8px;background:var(--white);border:1px solid var(--rule);
  border-radius:14px;padding:8px;box-shadow:0 14px 34px -14px rgba(16,18,35,.3);z-index:6;white-space:nowrap;
}
.try-pick[hidden]{display:none;}
.try-pick button{
  font-family:var(--sans);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;background:var(--white);
}
.try-pick [data-to="ai"]{color:var(--ai);border:1.5px solid var(--ai);}
.try-pick [data-to="ai"]:hover{background:var(--ai);color:#fff;}
.try-pick [data-to="hu"]{color:var(--gold-d);border:1.5px solid var(--gold);}
.try-pick [data-to="hu"]:hover{background:var(--gold);color:var(--ink);}
.try-msg{margin-top:20px;font-family:var(--mono);font-size:13.5px;color:#8A5A10;min-height:1.8em;letter-spacing:.03em;} /* AA確保 */

/* おぉ④ 金継ぎ */
.kintsugi{padding:0 7vw;max-width:1200px;margin:0 auto;}
.kintsugi svg{width:100%;height:66px;display:block;overflow:visible;}
.kin-p,.kin-b{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(216,144,31,.32));} /* 緒を主役に、金継ぎは控えめの脇役へ */
.kin-b{stroke-width:1.1;}
.kin-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mist);margin-top:8px;}

/* おぉ⑤ 節気のあいさつ */
.sekki-line{color:var(--gold-d);}
.last-sekki{margin-top:16px;font-family:var(--mono);font-size:13.5px;color:var(--gold);letter-spacing:.05em;}

.hanko{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:16px;vertical-align:middle;
  border:2.5px solid #C73E3A;color:#C73E3A;border-radius:9px;
  font-family:var(--serif);font-weight:800;font-size:21px;line-height:1;
  transform:rotate(-4deg);
}
.fig{margin:0;}
.fig img{
  width:100%;height:auto;display:block;border-radius:18px; /* height属性でaspect-ratioが死なないように */
  filter:sepia(.14) saturate(.82) contrast(1.04);
}
.fig figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  margin-top:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.fig figcaption span{opacity:1;color:inherit;}
.sort .fig figcaption{color:var(--mist-t);}
.fig-wide{max-width:1150px;margin-bottom:60px;overflow:hidden;}
.fig-wide img{height:clamp(240px,34vw,420px);object-fit:cover;transform:scale(1.06);}
.fig-soro{overflow:visible;}
.soro{display:block;width:100%;height:auto;background:var(--white);border:1px solid var(--rule);border-radius:18px;padding:10px 0;}
.soro .bdn{fill:#EAE7DE;stroke:#23263D;stroke-width:1.4;}
.soro .bda-a{fill:var(--ai);stroke:#1B2140;stroke-width:1.4;}
.soro .bda-g{fill:var(--gold);stroke:#8A5C12;stroke-width:1.4;}
.sort .fig figcaption{color:#3A3E57;}
.fig-side img{aspect-ratio:4/5;object-fit:cover;}
.mani .fig figcaption{color:#9BA0B8;}

/* ============ 宣言 (hero・縦書き) ============ */
.hero{
  min-height:100svh;position:relative;
  display:grid;grid-template-columns:minmax(280px,38%) 1fr;
  align-items:center;gap:clamp(24px,5vw,72px);
  padding:80px 6vw 60px 0;
}
.hero-art{
  position:relative;height:min(82svh,780px);overflow:hidden;
  border-radius:0 26px 26px 0;
}
.hero-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.94) saturate(.96);transform-origin:center;
}
.hero-art::after{ /* キャプション可読性のスクリム */
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(180deg,transparent,rgba(13,15,30,.82));
}
.art-cap{
  position:absolute;left:22px;bottom:16px;right:22px;z-index:1;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:rgba(244,245,248,.92);
}
.hero-main{display:flex;flex-direction:column;align-items:flex-end;padding-right:2vw;} /* 縦書きは右端起筆 */
.hero-foot{text-align:right;}
.hero h1{display:block;} /* vertical-rl の自然な段組み: DOM順=右→左 */
.t-line{
  font-size:clamp(44px,10.5vh,108px);line-height:1.18;color:var(--white);
  letter-spacing:.06em;display:block;
  margin-block-end:clamp(18px,4vw,56px); /* vertical-rl では左方向の間隔 */
}
.t-line:last-child{margin-block-end:0;}
.t-line em{font-style:normal;color:var(--gold);}
.hero-foot{
  margin-top:clamp(28px,6vh,58px);
  font-size:13.5px;color:var(--mist);letter-spacing:.08em;line-height:2.1;
}
.hero-co{font-family:var(--mono);font-size:11.5px;margin-left:14px;color:var(--mist);}

/* ============ 仕分け (light band) ============ */
.sort{background:var(--paper);color:var(--ink);padding:140px 7vw;}
.sort-h{font-family:var(--serif);font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.7;margin-bottom:64px;}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1150px;}
.lane{border-radius:20px;padding:34px 32px;background:var(--white);border:1px solid var(--rule);}
.lane-a{border-top:5px solid var(--ai);}
.lane-b{border-top:5px solid var(--gold);}
.lane-t{font-size:16px;margin-bottom:20px;color:#3A3E57;}
.lane-a .lane-t b{color:var(--ai);}
.lane-b .lane-t b{color:var(--gold-d);}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  font-size:13.5px;padding:9px 18px;border-radius:999px;background:var(--paper);
  border:1px solid var(--rule);color:#3A3E57;white-space:nowrap;
}
.lane-a .chip{border-color:color-mix(in srgb,var(--ai) 35%,var(--rule));}
.lane-b .chip{border-color:color-mix(in srgb,var(--gold) 45%,var(--rule));}
.sort-x{margin-top:56px;font-size:clamp(14.5px,1.7vw,17px);color:#3A3E57;line-height:2.2;}
.sort-x b{color:var(--ink);}

/* ============ 思想 ============ */
.mani{padding:60px 0 40px;}
.st{
  padding:120px 7vw;max-width:1200px;margin:0 auto;
  border-bottom:1px solid var(--rule-dk);
}
.st:last-child{border-bottom:none;}
.st-h{
  font-family:var(--serif);font-weight:800;color:var(--white);
  font-size:clamp(30px,5vw,54px);line-height:1.6;margin-bottom:26px;
}
.st-x{color:#c2c6dd;font-size:clamp(14.5px,1.7vw,17px);line-height:2.3;max-width:720px;}
.st-x b{color:var(--white);}
.st-tate{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(20px,4vw,60px);align-items:start;}
.st-big{font-size:clamp(40px,7.5vh,76px);color:var(--white);line-height:1.2;letter-spacing:.08em;}
.st-big ruby rt{font-family:var(--mono);font-size:.15em;letter-spacing:.4em;color:var(--gold);}
.st-tate .st-x{padding-top:10px;}

/* むすび: 「結」セクション */
.st-musubi{grid-template-columns:auto 1fr;}
.st-musubi > .st-big{grid-column:1;grid-row:1;}
.st-musubi > div{grid-column:2;grid-row:1;}
.st-musubi .st-x{margin-bottom:18px;}
.musubi-note{font-family:var(--mono);font-size:11.5px;color:var(--gold);letter-spacing:.06em;}

/* むすび: 大結びの帯 */
.grand-band{background:var(--ink);height:480px;position:relative;}
#musubi-grand{position:absolute;top:50%;left:0;width:100%;height:0;}

/* むすび: 光の重なり(加法混色=重なると紙に近づく) */
.glow{position:relative;}
.glow::before,.glow::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  width:min(46vw,620px);height:min(46vw,620px);
  filter:blur(64px);mix-blend-mode:screen;opacity:.17;
}
.glow::before{background:radial-gradient(circle,#3D4FC4 0%,transparent 62%);left:-10vw;top:-8%;animation:driftA 26s ease-in-out infinite alternate;animation-play-state:paused;}
.glow::after{background:radial-gradient(circle,#D8901F 0%,transparent 62%);right:-8vw;bottom:-12%;animation:driftB 31s ease-in-out infinite alternate;animation-play-state:paused;}
.glow.on::before,.glow.on::after{animation-play-state:running;} /* 画面内のみ稼働 */
.glow>*{position:relative;z-index:1;}
.glow>.kn{position:absolute;} /* カスケード事故防止(.glow>*が.knを上書きしない) */
@keyframes driftA{from{transform:translate(0,0);}to{transform:translate(9vw,7%);}}
@keyframes driftB{from{transform:translate(0,0);}to{transform:translate(-9vw,-8%);}}

/* むすび: 入口サブ・CTA・署名 */
.doors-sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--mist-t);margin:-40px 0 52px;}
.last-x2{margin-top:14px;color:#c2c6dd;font-size:clamp(14px,1.6vw,16.5px);}
.last-h2{margin-top:78px;font-size:clamp(30px,4.8vw,54px);}
.ft-sig{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#c2c6dd;margin-bottom:14px;
}
.sig-knot{width:15px;height:17px;opacity:.9;}

/* agents (8人とAIの点) */
.agents{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:600px;margin:36px 0 10px;}
.agents i{width:13px;height:13px;border-radius:50%;background:var(--ai-b);opacity:.7;}
.agents i.h{width:24px;height:24px;background:var(--gold);opacity:1;}
.agents-cap{font-family:var(--mono);font-size:11.5px;color:var(--mist);margin-bottom:22px;letter-spacing:.06em;}

/* 知識×写真の2カラム */
.st-has-fig{display:grid;grid-template-columns:1.05fr .8fr;gap:clamp(28px,5vw,72px);align-items:center;}

/* 波紋 (水道) */
.st-rip{position:relative;overflow:hidden;grid-template-columns:auto 1fr;}
.ripple{position:absolute;right:-130px;bottom:-150px;width:520px;height:520px;pointer-events:none;opacity:.55;}
.ripple svg{width:100%;height:100%;animation:rip 9s ease-in-out infinite alternate;transform-origin:center;}
@keyframes rip{from{transform:scale(.94);}to{transform:scale(1.05);}}

/* ============ 3つの入口 (light) ============ */
.doors{background:var(--paper);color:var(--ink);padding:140px 7vw 150px;}
.doors-h{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4.4vw,48px);margin-bottom:60px;}
.door-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1240px;}
.door{
  background:var(--white);border:1px solid var(--rule);border-radius:20px;
  padding:36px 32px 30px;display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.door:hover{transform:translateY(-5px);box-shadow:0 22px 48px -20px rgba(16,18,35,.22);}
/* 二色意味論: 01預ける=藍(AIへ渡す) / 02働く=山吹(人) / 03持ち寄る=結び(二色)
   ※border-imageは四辺に効くため上端バーは::beforeで描く */
.door{position:relative;overflow:hidden;}
.door::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;}
.door:nth-child(1)::before{background:var(--ai);}
.door:nth-child(2)::before{background:var(--gold);}
.door:nth-child(3)::before{background:linear-gradient(90deg,var(--ai),var(--gold));}
.door-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mist-t);margin-bottom:14px;}
.door h3{font-family:var(--serif);font-weight:800;font-size:27px;line-height:1.5;margin-bottom:14px;}
.door-x{font-size:13.8px;color:#3A3E57;line-height:2.0;margin-bottom:26px;}
.door-a{
  margin-top:auto;font-weight:700;font-size:14px;text-decoration:none;
  color:var(--ai);letter-spacing:.04em;
}
.door:nth-child(2) .door-a,.door:nth-child(3) .door-a{color:var(--gold-d);}
.door-a:hover{text-decoration:underline;}

/* ============ 最後 ============ */
.last{padding:150px 7vw 110px;text-align:center;}
.last-h{font-family:var(--serif);font-weight:800;font-size:clamp(38px,6.4vw,72px);color:var(--white);margin-bottom:26px;}
.last-x{color:#c2c6dd;font-size:clamp(14.5px,1.7vw,17px);line-height:2.3;}
.last-b{margin:44px 0 80px;}
.co{
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;text-align:left;
  border-top:1px solid var(--rule-dk);max-width:820px;margin:0 auto;
}
.co>div{display:flex;gap:20px;padding:15px 4px;border-bottom:1px solid var(--rule-dk);}
.co dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--mist);flex:none;width:58px;padding-top:5px;}
.co dd{font-size:13.5px;color:#dfe2f0;}

/* footer */
.ft{text-align:center;padding:44px 6vw 60px;border-top:1px solid var(--rule-dk);color:var(--mist);}
.ft-m{font-family:var(--mono);font-size:13.5px;margin-bottom:10px;}
.ft-c{font-size:11.5px;letter-spacing:.06em;}
.ft-cred{font-size:10px;color:#9BA0B8;margin-top:10px;letter-spacing:.03em;}

/* ============ responsive ============ */
@media (max-width:900px){
  .door-g{grid-template-columns:1fr;}
  .lanes{grid-template-columns:1fr;}
  .st-tate{grid-template-columns:auto auto;gap:26px;}
  .st-tate .st-x{grid-column:1 / -1;padding-top:26px;}
  .st-has-fig{grid-template-columns:1fr;}
  .fig-side{max-width:480px;}
  .hero{grid-template-columns:1fr;gap:30px;padding:80px 6vw 70px;}
  .hero-art{height:38svh;border-radius:20px;}
  .hero-main{align-items:flex-start;}
}
@media (max-width:640px){
  .nav{display:none;}
  .t-line{font-size:clamp(40px,15vw,68px);}
  .hero h1{gap:18px;}
  .sort,.doors{padding-left:6vw;padding-right:6vw;}
  .st{padding:90px 6vw;}
  .co{grid-template-columns:1fr;}
  .ripple{right:-200px;bottom:-220px;}
  .last-x br{display:none;} /* 狭幅での語中改行を防ぐ */
  .art-cap{font-size:9.5px;letter-spacing:.04em;}
}
/* 検証用: ?static ではヒーローの100svhを畳む */
html.static .hero{min-height:0;padding-top:110px;padding-bottom:80px;}
html.static .hero-art{height:460px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}