:root{
  /* クールなペーパーホワイト基調 */
  --bg:        #f1efe9;          /* 紙色 / わずかにグレー寄り */
  --bg-2:      #e6e3db;
  --ink:       #101418;
  --ink-2:     #4a4f56;
  --ink-3:     #8a8f95;
  --rule:      #b7b4aa;
  --rule-2:    #d2cfc4;
  --accent:    oklch(0.42 0.09 255);  /* ディープインクブルー */
  --accent-2:  oklch(0.34 0.09 255);
  --accent-ink:oklch(0.36 0.09 255);
  --accent-soft: oklch(0.86 0.04 250);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
  --sans: "Noto Sans JP", "IBM Plex Sans", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased;}
body{overflow-x:hidden; font-feature-settings: "palt";}
::selection{background:var(--accent); color:#111;}

a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@media (max-width: 720px){ .wrap{padding:0 24px;} }

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom-color:var(--rule-2);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-2);}
.brand-mark{
  width:22px; height:22px; border:1px solid var(--ink); position:relative;
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; inset:3px; border:1px solid var(--ink-2);
}
.brand-mark::after{inset:7px; background:var(--accent); border:0;}
.brand b{color:var(--ink); font-weight:500;}
.nav-links{display:flex; gap:36px; font-size:13px; color:var(--ink-2);}
.nav-links a{position:relative; padding:4px 0;}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  padding:10px 18px; border:1px solid var(--rule); color:var(--ink);
  transition:all .3s;
}
.nav-cta:hover{border-color:var(--accent); color:var(--accent-ink);}
@media (max-width: 880px){ .nav-links{display:none;} }

/* ---------- HERO ---------- */
.hero{
  padding:160px 0 80px; position:relative;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
  opacity:.5;
}
.hero .wrap{position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-2);
  text-transform:uppercase;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--accent);}
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size: clamp(40px, 6.2vw, 92px); line-height:1.15;
  margin-top:32px; letter-spacing:-.01em;
  color:var(--ink);
}
.hero h1 .accent{color:var(--accent); font-style:normal;}
.hero h1 .display{font-family:var(--display); font-weight:600;}
.hero h1 small{
  display:block; font-family:var(--sans); font-weight:400;
  font-size:.2em; color:var(--ink-2); margin-top:20px; letter-spacing:.02em;
}
.hero-sub{
  margin-top:40px; max-width:620px; color:var(--ink-2);
  font-size:17px; line-height:1.9;
}
.hero-cta-row{
  margin-top:56px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 28px; font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;
}
.btn .arrow{
  display:inline-block; width:18px; height:1px; background:currentColor; position:relative;
  transition:width .35s;
}
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg);
}
.btn:hover{border-color:var(--accent); color:var(--accent-ink);}
.btn:hover .arrow{width:28px;}
.btn.primary{background:var(--accent); color:#141210; border-color:var(--accent);}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2); color:#141210;}


/* ---------- SECTION CHROME ---------- */
section{padding:140px 0; position:relative;}
.section-label{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3);
  text-transform:uppercase; margin-bottom:48px;
}
.section-label .num{color:var(--accent);}
.section-label .bar{flex:1; height:1px; background:var(--rule-2);}
.section-title{
  font-family:var(--serif); font-weight:500;
  font-size: clamp(32px, 4.2vw, 56px); line-height:1.25; letter-spacing:-.01em;
  max-width:18ch; text-wrap:pretty;
}
.section-title .display{font-family:var(--display); font-weight:600; color:var(--accent-ink);}
.section-intro{
  margin-top:28px; max-width:58ch; color:var(--ink-2); font-size:16px;
}

/* ---------- 01 課題 ---------- */
.problem{background:var(--bg);}
.problem-list{
  margin-top:80px;
  border-top:1px solid var(--rule-2);
}
.problem-item{
  display:grid; grid-template-columns:80px 1fr 1fr; gap:40px;
  padding:48px 0; border-bottom:1px solid var(--rule-2);
  align-items:start; position:relative;
}
.problem-item .idx{
  font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.1em; padding-top:6px;
}
.problem-item h3{
  font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.4; color:var(--ink);
  transition:color .3s;
}
.problem-item p{color:var(--ink-2); font-size:15px; line-height:1.9;}
.problem-item::before{
  content:""; position:absolute; left:0; right:100%; top:-1px; height:1px;
  background:var(--accent); transition:right .6s cubic-bezier(.2,.7,.2,1);
}
.problem-item:hover::before{right:0;}
.problem-item:hover h3{color:var(--accent-ink);}
@media (max-width: 880px){
  .problem-item{grid-template-columns:1fr; gap:16px; padding:32px 0;}
  .problem-item .idx{padding:0;}
}

.problem-quote{
  margin-top:100px; padding:60px 0; border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  display:grid; grid-template-columns:200px 1fr; gap:60px; align-items:start;
}
.problem-quote .label{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase;}
.problem-quote blockquote{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px, 2.4vw, 32px); line-height:1.7;
  color:var(--ink); text-wrap:balance;
}
.problem-quote blockquote .display{font-family:var(--display); font-weight:600; color:var(--accent-ink);}
@media (max-width: 880px){ .problem-quote{grid-template-columns:1fr; gap:20px;} }

/* ---------- 02 3層モデル ---------- */
.layers{background:var(--bg-2);}
.layer-stack{
  margin-top:80px;
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--rule-2);
}
.layer{
  display:grid; grid-template-columns:120px 1fr 280px 200px;
  gap:48px; padding:56px 56px; align-items:center;
  border-bottom:1px solid var(--rule-2); position:relative;
  transition:background .4s;
}
.layer:last-child{border-bottom:0;}
.layer:hover{background:color-mix(in oklab, var(--accent) 5%, transparent);}
.layer .no{
  font-family:var(--mono); font-weight:400; font-size:56px; line-height:1; color:var(--ink-3);
  letter-spacing:-.02em;
  transition:color .3s;
}
.layer:hover .no{color:var(--accent);}
.layer .body h3{font-family:var(--serif); font-weight:600; font-size:26px; color:var(--ink); line-height:1.3; letter-spacing:-.005em;}
.layer .body h3 .en{display:block; font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink-3); margin-top:8px; letter-spacing:.04em;}
.layer .body p{color:var(--ink-2); font-size:14px; margin-top:14px; line-height:1.8;}
.layer .services{
  font-family:var(--mono); font-size:12px; line-height:2.2; color:var(--ink-2);
}
.layer .services span{display:block; padding-left:16px; position:relative;}
.layer .services span::before{content:"—"; position:absolute; left:0; color:var(--ink-3);}
.layer .tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 12px; border:1px solid var(--rule); color:var(--ink-2); text-align:center;
  justify-self:end; white-space:nowrap;
}
.layer .tag.core{border-color:var(--accent); color:var(--accent-ink);}
@media (max-width: 1000px){
  .layer{grid-template-columns:1fr; gap:20px; padding:40px 32px;}
  .layer .no{font-size:48px;}
  .layer .tag{justify-self:start;}
}

.layer-note{
  margin-top:40px; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em;
}

/* ---------- 03 料金 ---------- */
.pricing{background:var(--bg);}
.plans{
  margin-top:80px; display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
}
.plan{
  padding:48px 40px 40px; border-right:1px solid var(--rule-2);
  display:flex; flex-direction:column; position:relative;
  transition:background .4s;
}
.plan:last-child{border-right:0;}
.plan:hover{background:var(--bg-2);}
.plan.featured{background:color-mix(in oklab, var(--accent) 6%, var(--bg)); }
.plan.featured:hover{background:color-mix(in oklab, var(--accent) 9%, var(--bg));}
.plan-badge{
  position:absolute; top:20px; right:20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--accent);
  text-transform:uppercase;
}
.plan-name{
  font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink);
}
.plan-name small{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:12px; color:var(--ink-3); margin-top:6px; letter-spacing:.05em;
}
.plan-price{
  margin-top:32px; padding-bottom:28px; border-bottom:1px solid var(--rule-2);
  display:flex; align-items:baseline; gap:6px;
}
.plan-price .num{
  font-family:var(--serif); font-weight:600;
  font-size:64px; line-height:1; color:var(--ink); letter-spacing:-.03em;
}
.plan-price .unit{font-family:var(--mono); font-size:13px; color:var(--ink-3);}
.plan-sub{margin-top:14px; font-size:13px; color:var(--ink-2); line-height:1.8;}
.plan-feats{margin-top:28px; list-style:none; display:flex; flex-direction:column; gap:14px; flex:1;}
.plan-feats li{
  display:grid; grid-template-columns:16px 1fr; gap:12px; align-items:start;
  font-size:14px; color:var(--ink-2); line-height:1.6;
}
.plan-feats li::before{
  content:""; width:12px; height:1px; background:var(--accent); margin-top:10px;
}
.plan-feats li b{color:var(--ink); font-weight:500;}
.plan-cta{
  margin-top:40px; padding:14px 0; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  border:1px solid var(--rule); color:var(--ink);
  transition:all .3s; display:block;
}
.plan-cta:hover{border-color:var(--accent); color:var(--accent-ink);}
.plan.featured .plan-cta{background:var(--accent); border-color:var(--accent); color:#141210;}
.plan.featured .plan-cta:hover{background:var(--accent-2); border-color:var(--accent-2);}
@media (max-width: 1000px){
  .plans{grid-template-columns:1fr;}
  .plan{border-right:0; border-bottom:1px solid var(--rule-2);}
  .plan:last-child{border-bottom:0;}
}

.plan-extra{
  margin-top:48px; padding:36px 40px;
  border:1px solid var(--rule-2);
  display:grid; grid-template-columns:1fr 1fr auto; gap:40px; align-items:center;
}
.plan-extra h4{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink);}
.plan-extra p{font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.7;}
.plan-extra .px{font-family:var(--serif); font-weight:600; font-size:32px; color:var(--accent-ink); letter-spacing:-.02em;}
.plan-extra .px small{font-family:var(--mono); font-weight:400; font-size:12px; color:var(--ink-3); margin-left:10px;}
@media (max-width: 880px){ .plan-extra{grid-template-columns:1fr;} }

.kit{
  margin-top:80px; padding:40px 0; border-top:1px solid var(--rule-2);
  display:grid; grid-template-columns:320px 1fr; gap:60px;
}
.kit-head .label{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase;}
.kit-head h3{font-family:var(--serif); font-weight:500; font-size:26px; color:var(--ink); margin-top:12px; line-height:1.4;}
.kit-head p{font-size:13px; color:var(--ink-2); margin-top:16px; line-height:1.8;}
.kit-items{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule-2); border-left:1px solid var(--rule-2);}
.kit-item{padding:24px 28px; border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);}
.kit-item .no{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em;}
.kit-item h4{font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink); margin-top:10px; line-height:1.5;}
.kit-item p{font-size:12.5px; color:var(--ink-3); margin-top:8px; line-height:1.7;}
@media (max-width: 880px){
  .kit{grid-template-columns:1fr; gap:28px;}
  .kit-items{grid-template-columns:1fr;}
}

/* ---------- Scope Link (Pricing 節下) ---------- */
.scope-link{
  margin-top:60px; padding:28px 40px;
  border:1px solid var(--rule-2);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition:border-color .3s, background .3s;
}
.scope-link:hover{border-color:var(--accent); background:color-mix(in oklab, var(--accent) 3%, transparent);}
.scope-link .scope-text .label{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase;
}
.scope-link .scope-text h4{
  font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink); margin-top:10px; line-height:1.5;
}
.scope-link .scope-text p{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.7;}
.scope-link .scope-arrow{
  font-family:var(--mono); font-size:12px; color:var(--ink-2); letter-spacing:.05em; white-space:nowrap;
  padding:12px 20px; border:1px solid var(--rule); transition:all .3s;
}
.scope-link:hover .scope-arrow{border-color:var(--accent); color:var(--accent-ink);}
@media (max-width: 880px){
  .scope-link{flex-direction:column; align-items:flex-start; gap:20px; padding:24px 28px;}
  .scope-link .scope-arrow{align-self:stretch; text-align:center;}
}

/* ---------- 04 CLIENTS ---------- */
.clients{background:var(--bg);}
.clients-head{
  margin-top:60px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end;
  padding-bottom:60px;
  border-bottom:1px solid var(--rule-2);
}
.clients-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px, 4vw, 44px); line-height:1.35;
  letter-spacing:-.01em; color:var(--ink);
}
.clients-head h2 .display{
  font-family:var(--serif); font-weight:500; letter-spacing:-.01em;
}
.clients-sub{
  color:var(--ink-2); font-size:15.5px; line-height:1.9;
}
.clients-grid{
  list-style:none; padding:0; margin:60px 0 0;
  display:grid; gap:0;
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
}
/* 2社のみ: 中央寄せの2列。掲出が増えたら .clients-grid--pair を外し、下の 4 列用を使う */
.clients-grid--pair{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:720px; margin-left:auto; margin-right:auto;
}
/* 3社以上: .clients-grid を HTML で付け直し、grid-template-columns:repeat(4, 1fr) 等に変更 */
.clients-grid:not(.clients-grid--pair){
  grid-template-columns:repeat(4, 1fr);
}
.client-card{
  padding:32px 28px;
  border-right:1px solid var(--rule-2);
  display:flex; flex-direction:column; gap:24px;
}
.client-card:last-child{border-right:none;}
.logo-box{
  aspect-ratio:16 / 9; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2);
  border:1px solid var(--rule-2);
  transition:border-color .3s;
}
.logo-box img{
  display:block;
  max-width:88%;
  width:auto;
  /* 全ロゴで見かけの高さを揃える（幅は各SVGのアスペクト比に追随） */
  height:clamp(32px, 4.5vw, 44px);
  object-fit:contain;
  object-position:center;
  filter:grayscale(100%);
  opacity:.85; transition:opacity .3s, filter .3s;
}
.client-card:hover .logo-box{border-color:var(--ink-3);}
.client-card:hover .logo-box img{opacity:1; filter:grayscale(0%);}
.logo-ph{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-3); text-transform:uppercase;
}
.client-meta{display:flex; flex-direction:column; gap:6px;}
.client-meta .no{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-3);
}
.client-meta .name{
  font-family:var(--serif); font-weight:500; font-size:15.5px;
  color:var(--ink); line-height:1.5;
}
.client-meta .industry{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-3);
}
.clients-note{
  margin-top:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-3); line-height:1.8;
}
@media (max-width: 1000px){
  .clients-head{grid-template-columns:1fr; gap:24px; align-items:flex-start;}
  /* 4 列レイアウト時のみ、狭い画面で 2×2 用の罫線 */
  .clients-grid:not(.clients-grid--pair){
    grid-template-columns:repeat(2, 1fr);
  }
  .clients-grid:not(.clients-grid--pair) .client-card:nth-child(2n){border-right:none;}
  .clients-grid:not(.clients-grid--pair) .client-card:nth-child(1),
  .clients-grid:not(.clients-grid--pair) .client-card:nth-child(2){border-bottom:1px solid var(--rule-2);}
}
@media (max-width: 640px){
  .clients-grid--pair,
  .clients-grid:not(.clients-grid--pair){grid-template-columns:1fr; max-width:none;}
  .client-card{border-right:none; border-bottom:1px solid var(--rule-2);}
  .client-card:last-child{border-bottom:none;}
}

/* ---------- 05 CTA ---------- */
.cta{
  padding:160px 0; background:var(--bg-2); position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%);
}
.cta .wrap{position:relative;}
.cta-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end;}
.cta h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px, 5.6vw, 80px); line-height:1.15; letter-spacing:-.01em;
}
.cta h2 .display{font-family:var(--display); font-weight:600; color:var(--accent-ink);}
.cta-sub{margin-top:32px; color:var(--ink-2); max-width:46ch; font-size:16px; line-height:1.9;}
.cta-actions{display:flex; flex-direction:column; gap:16px; align-items:stretch;}
.cta-actions .btn{justify-content:space-between; padding:22px 28px;}
.cta-actions .btn .lbl{font-family:var(--serif); font-weight:500; font-size:16px; letter-spacing:0;}
.cta-actions .btn .k{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.08em;}
@media (max-width: 1000px){ .cta-layout{grid-template-columns:1fr; gap:48px;} }

/* ---------- Contact Form ---------- */
.contact-form{
  display:flex; flex-direction:column; gap:20px;
  padding:40px;
  background:color-mix(in oklab, var(--bg) 60%, transparent);
  border:1px solid var(--rule-2);
}
.contact-form .form-head{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase;
  padding-bottom:16px; border-bottom:1px solid var(--rule-2);
}
.contact-form .field{display:flex; flex-direction:column; gap:8px;}
.contact-form label{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-2); text-transform:uppercase;
  display:flex; align-items:baseline; gap:8px;
}
.contact-form label .req{
  font-family:var(--sans); font-size:10px;
  color:var(--accent); letter-spacing:.04em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  padding:12px 14px; line-height:1.6;
  background:var(--bg); border:1px solid var(--rule-2);
  transition:border-color .3s, background .3s;
  width:100%;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--accent);
  background:#fff;
}
.contact-form textarea{resize:vertical; min-height:140px; font-family:var(--sans);}
.contact-form .consent{
  display:flex; align-items:flex-start; gap:12px;
  font-size:13px; color:var(--ink-2); line-height:1.7;
  padding:12px 0;
}
.contact-form .consent input[type="checkbox"]{
  margin-top:4px; accent-color:var(--accent);
}
.contact-form .consent a{color:var(--accent-ink); text-decoration:underline;}
.contact-form .honey{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
.contact-form .submit{
  margin-top:8px; padding:18px 28px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  cursor:pointer; transition:all .3s;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.contact-form .submit:hover{background:var(--accent-2); border-color:var(--accent-2);}
.contact-form .submit:disabled{opacity:.5; cursor:not-allowed;}
.contact-form .form-foot{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.7;
  padding-top:16px; border-top:1px solid var(--rule-2);
}
.contact-form .form-foot a{color:var(--ink-2); text-decoration:underline;}
.contact-form .form-foot a:hover{color:var(--accent-ink);}
.contact-form .error-msg{
  padding:14px 18px;
  background:color-mix(in oklab, #c44 12%, transparent);
  border-left:2px solid #c44;
  font-size:13px; color:#a33; line-height:1.7;
}
@media (max-width: 880px){
  .contact-form{padding:28px 24px;}
}

/* 会社概要（CTA 内） */
.company-profile{
  margin-top:120px; padding-top:48px; border-top:1px solid var(--rule-2);
}
.company-profile-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.35; letter-spacing:-.02em; color:var(--ink);
  margin:0 0 16px;
}
.company-profile-title small{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.company-profile-lead{
  font-size:14px; line-height:1.8; color:var(--ink-2); max-width:52ch; margin:0 0 36px;
}
.company-profile-lead a{color:var(--accent-ink); text-decoration:underline;}
.company-profile-lead a:hover{color:var(--ink);}
.company-profile-list{
  margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:32px 56px;
}
.company-profile-list > div{
  border-left:1px solid var(--rule-2); padding-left:20px; min-width:0;
}
.company-profile-list dt{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px;
}
.company-profile-list dd{
  font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink);
  margin:0; line-height:1.75;
}
.company-profile-list dd small{
  display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  margin-top:6px; line-height:1.5; font-weight:400;
}
.company-profile-list dd a{color:var(--accent-ink); text-decoration:underline;}
.company-profile-list dd a:hover{color:var(--ink);}
.company-profile-list .is-address .map-link{
  display:inline-block; margin-top:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-decoration:none; padding:6px 12px; border:1px solid var(--rule-2);
  color:var(--ink-2); transition:color .25s, border-color .25s, background .25s;
}
.company-profile-list .is-address .map-link:hover{
  color:var(--ink); border-color:var(--ink-3); background:color-mix(in oklab, var(--bg) 50%, transparent);
}
@media (max-width: 880px){
  .company-profile-list{grid-template-columns:1fr; gap:28px;}
}

/* ---------- FOOTER ---------- */
.back-to-top-row{
  background:var(--bg);
  border-top:1px solid var(--rule-2);
}
.back-to-top-row .wrap{
  display:flex; justify-content:center;
  padding:32px 0;
}
.back-to-top{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--ink-3); text-decoration:none;
  padding:10px 20px;
  border:1px solid var(--rule-2);
  transition:color .3s, border-color .3s, background .3s;
}
.back-to-top:hover{
  color:var(--ink);
  border-color:var(--ink-2);
  background:color-mix(in oklab, var(--bg) 50%, transparent);
}

footer{
  padding:40px 0; border-top:1px solid var(--rule-2); background:var(--bg);
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer .foot-links{display:flex; gap:24px;}
footer .foot-links a{color:var(--ink-3); transition:color .3s;}
footer .foot-links a:hover{color:var(--ink);}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
.reveal.in{opacity:1; transform:none;}

.reveal-line{
  position:relative; overflow:hidden; display:inline-block;
}
.reveal-line::after{
  content:""; position:absolute; inset:0; background:var(--bg);
  transform-origin:right; transform:scaleX(1);
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}

/* 明背景向け微調整 */
.nav{background:color-mix(in oklab, var(--bg) 82%, transparent);}
.nav-cta{color:var(--ink);}
.plan.featured{background:color-mix(in oklab, var(--accent) 8%, var(--bg));}
.plan.featured:hover{background:color-mix(in oklab, var(--accent) 12%, var(--bg));}
.plan.featured .plan-cta{color:#fff;}
.btn.primary{color:#fff;}
.btn.primary:hover{color:#fff;}
.cta{background:var(--bg-2);}
.cta::before{
  background: radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%);
}
/* ブランドマーク—クロス固有 */
.brand-mark{border-color:var(--ink);}
.brand-mark::before, .brand-mark::after{border-color:var(--ink-2);}
.brand-mark::after{background:var(--accent); border:0;}
.reveal-line.in::after{transform:scaleX(0);}

.count{font-variant-numeric: tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-line::after{transition:none; opacity:1; transform:none;}
}

/* ============================================================
   SCOPE PAGE (scope.html)
   ============================================================ */
.scope-page{padding-top:0;}
.scope-page .scope-hero{
  padding:160px 0 80px; position:relative;
  border-bottom:1px solid var(--rule-2);
}
.scope-page .scope-hero .eyebrow{margin-bottom:24px;}
.scope-page .scope-hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px, 4.8vw, 64px); line-height:1.2; letter-spacing:-.01em;
  max-width:22ch;
}
.scope-page .scope-hero h1 .display{font-family:var(--display); font-weight:600; color:var(--accent-ink);}
.scope-page .scope-meta{
  margin-top:40px; display:flex; gap:48px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.08em;
}
.scope-page .scope-meta span b{color:var(--ink-2); font-weight:500;}

/* Body layout */
.scope-body{
  padding:100px 0 140px;
  display:grid; grid-template-columns:260px 1fr; gap:80px;
}
@media (max-width: 1000px){
  .scope-body{grid-template-columns:1fr; gap:40px;}
}

.scope-toc{
  position:sticky; top:100px; align-self:start;
  font-family:var(--mono); font-size:12px;
}
.scope-toc .toc-label{
  font-size:10px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase;
  padding-bottom:16px; border-bottom:1px solid var(--rule-2); margin-bottom:16px;
}
.scope-toc ol{list-style:none; display:flex; flex-direction:column; gap:12px;}
.scope-toc ol li a{
  color:var(--ink-2); display:grid; grid-template-columns:28px 1fr; gap:10px;
  padding:4px 0; transition:color .3s;
}
.scope-toc ol li a .n{color:var(--ink-3);}
.scope-toc ol li a:hover{color:var(--accent-ink);}
.scope-toc ol li a:hover .n{color:var(--accent);}
@media (max-width: 1000px){
  .scope-toc{position:static; padding-bottom:24px; border-bottom:1px solid var(--rule-2);}
}

.scope-main{display:flex; flex-direction:column; gap:80px;}

.scope-section{scroll-margin-top:90px;}
.scope-section .head{
  display:flex; align-items:baseline; gap:16px; margin-bottom:32px;
  padding-bottom:20px; border-bottom:1px solid var(--rule-2);
}
.scope-section .head .n{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent);
}
.scope-section .head h2{
  font-family:var(--serif); font-weight:600; font-size:26px; color:var(--ink); letter-spacing:-.005em;
}
.scope-section > .lead{
  color:var(--ink-2); font-size:14.5px; line-height:1.9; margin-bottom:24px; max-width:62ch;
}

/* 箇条書き */
.scope-list{
  list-style:none; display:flex; flex-direction:column;
  border-top:1px solid var(--rule-2);
}
.scope-list li{
  display:grid; grid-template-columns:28px 1fr; column-gap:16px; row-gap:4px;
  padding:16px 0; border-bottom:1px solid var(--rule-2);
  color:var(--ink-2); font-size:14.5px; line-height:1.8;
}
.scope-list li::before{
  content:""; width:14px; height:1px; background:var(--accent); margin-top:14px;
  grid-column:1; grid-row:1;
}
.scope-list li b{
  color:var(--ink); font-weight:500;
  grid-column:2; grid-row:1;
}
.scope-list li .sub{
  display:block; color:var(--ink-3); font-size:13px; line-height:1.7;
  grid-column:2; grid-row:2;
}

/* 区分バッジ */
.scope-section .badge{
  display:inline-block; padding:4px 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--rule); color:var(--ink-2);
  margin-bottom:16px;
}
.scope-section.do .badge{border-color:var(--accent); color:var(--accent-ink);}
.scope-section.extra .badge{border-color:var(--ink-2); color:var(--ink-2);}
.scope-section.handoff .badge{border-color:var(--ink-3); color:var(--ink-3);}
.scope-section.dont .badge{border-color:#c44; color:#c44;}

/* Sizes table */
.sizes{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--rule-2); border-bottom:0;
}
.sizes .size{
  padding:24px 28px; border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
}
.sizes .size:last-child{border-right:0;}
.sizes .size .n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em;}
.sizes .size h4{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--ink); margin-top:6px;}
.sizes .size p{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.7;}
@media (max-width: 880px){ .sizes{grid-template-columns:1fr;} .sizes .size{border-right:0;} }

/* Scope bottom CTA */
.scope-bottom{
  margin-top:40px; padding:32px 40px;
  border:1px solid var(--rule-2); background:var(--bg-2);
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
.scope-bottom h3{font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink); line-height:1.5;}
.scope-bottom p{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.7;}
@media (max-width: 880px){ .scope-bottom{grid-template-columns:1fr;} }

/* 注意書き */
.scope-note{
  margin-top:24px; padding:20px 24px;
  background:color-mix(in oklab, var(--accent) 5%, transparent);
  border-left:2px solid var(--accent);
  font-size:13px; color:var(--ink-2); line-height:1.8;
}
.scope-note b{color:var(--ink); font-weight:500;}