/* =================================================================
   xFactory — Inner-page kinetic system (動く工場)
   Builds on common.css. Shared by about / services / news / contact.
   ================================================================= */
:root{ --lime:#6fbe35; --lime-deep:#4f9421; }

/* ---- brand mark / wordmark ---- */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo-word{ font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:-0.03em; color:var(--ink); line-height:1; }
.logo-word .lw-x{ color:var(--forest); }
.nav-mobile-head .logo-word{ font-size:19px; }
.site-footer .logo-word{ color:var(--paper); } .site-footer .logo-word .lw-x{ color:var(--lime); }

/* ---- staged reveal ---- */
.r{ opacity:0; transform:translateY(28px); }
.r-s{ opacity:0; transform:scale(.95); }
.r-l{ opacity:0; transform:translateX(-28px); }
.r,.r-s,.r-l{ transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); will-change:opacity,transform; }
.is-in.r,.is-in.r-s,.is-in.r-l{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .r,.r-s,.r-l{opacity:1!important;transform:none!important;transition:none!important;} }

/* ---- gears ---- */
.gear{ display:inline-block; color:var(--forest); }
.gear svg{ display:block; width:100%; height:100%; transform-origin:50% 50%; }
@media (prefers-reduced-motion:no-preference){
  .spin-cw svg{ animation:gcw var(--sp,22s) linear infinite; }
  .spin-ccw svg{ animation:gccw var(--sp,30s) linear infinite; }
}
@keyframes gcw{ to{ transform:rotate(360deg);} }
@keyframes gccw{ to{ transform:rotate(-360deg);} }

/* =================================================================
   PAGE HERO — kinetic gear backdrop + breadcrumb + title
   ================================================================= */
.phero{ position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,var(--paper) 0%,color-mix(in srgb,var(--lime) 5%,var(--paper)) 100%);
  border-bottom:1px solid var(--line);
  padding-top:clamp(48px,7vw,104px); padding-bottom:clamp(44px,6vw,80px); }
.phero-gears{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.phero-gears .gear{ position:absolute; opacity:.08; }
.phero-gears .pg1{ top:-80px; right:-60px; width:clamp(220px,26vw,400px); height:clamp(220px,26vw,400px); color:var(--forest); }
.phero-gears .pg2{ bottom:-70px; right:18%; width:clamp(110px,13vw,180px); height:clamp(110px,13vw,180px); color:var(--lime); opacity:.1; }
@media (max-width:720px){ .phero-gears .pg2{ display:none; } }
.phero-inner{ position:relative; z-index:1; }
.breadcrumb{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .sep{ opacity:.5; }
.phero-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); }
.phero-eyebrow .dot{ width:8px; height:8px; border-radius:2px; background:var(--lime); transform:rotate(45deg); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
.phero h1{ font-size:clamp(40px,6.4vw,84px); letter-spacing:-0.04em; line-height:.98; }
.phero h1 em{ font-style:normal; color:var(--vermilion); }
.phero .lede{ margin-top:24px; max-width:54ch; font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); line-height:1.68; }

/* =================================================================
   MARQUEE (shared)
   ================================================================= */
.marquee{ background:var(--ink); color:var(--paper); overflow:hidden; padding-block:16px; border-top:1px solid color-mix(in srgb,var(--paper) 12%,transparent); border-bottom:1px solid color-mix(in srgb,var(--paper) 12%,transparent); }
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marq 26s linear infinite; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ font-family:var(--f-display); font-weight:800; font-size:clamp(16px,2vw,24px); letter-spacing:-0.01em; padding-inline:clamp(16px,2.2vw,30px); white-space:nowrap; }
.marquee-item .mx{ color:var(--lime); margin-left:clamp(16px,2.2vw,30px); }
.marquee-item.alt{ color:var(--amber); }
@keyframes marq{ to{ transform:translateX(-50%);} }

/* =================================================================
   PROSE / generic
   ================================================================= */
.prose p{ color:var(--ink-2); font-size:16px; line-height:1.85; }
.prose p + p{ margin-top:1.2em; }
.prose strong{ color:var(--forest); font-weight:700; }
.lead-q{ font-family:var(--f-display); font-weight:700; font-size:clamp(24px,3.4vw,40px); letter-spacing:-0.025em; line-height:1.3; color:var(--ink); }
.lead-q em{ font-style:normal; color:var(--vermilion); }

/* two-column editorial */
.split{ display:grid; gap:clamp(32px,5vw,72px); grid-template-columns:1fr; align-items:start; }
@media (min-width:920px){ .split{ grid-template-columns:.85fr 1.15fr; } }
.split-sticky{ align-self:start; }
@media (min-width:920px){ .split-sticky{ position:sticky; top:104px; } }
.split h2{ font-size:clamp(30px,4.2vw,52px); letter-spacing:-0.03em; line-height:1.04; }
.split .x-big{ font-family:var(--f-display); font-weight:800; font-size:clamp(64px,8vw,104px); color:var(--lime); line-height:.7; display:block; margin-bottom:16px; }

/* =================================================================
   CARDS / GRID
   ================================================================= */
.grid-2{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.grid-3{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.gcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(26px,3vw,40px); position:relative; overflow:hidden;
  transition:transform .26s cubic-bezier(.16,1,.3,1),border-color .26s,box-shadow .26s; display:flex; flex-direction:column; gap:12px; }
.gcard::before{ content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.16,1,.3,1); }
.gcard:hover::before{ transform:scaleX(1); }
.gcard:hover{ transform:translateY(-5px); border-color:var(--forest); box-shadow:0 18px 40px color-mix(in srgb,var(--forest) 13%,transparent); }
.gcard .idx{ font-family:var(--f-display); font-weight:800; font-size:13px; color:var(--vermilion); letter-spacing:.05em; display:inline-flex; align-items:center; gap:8px; }
.gcard .idx .x{ color:var(--lime); font-weight:900; }
.gcard h3{ font-size:clamp(20px,2.1vw,26px); letter-spacing:-0.02em; }
.gcard p{ color:var(--ink-2); font-size:14px; line-height:1.7; }

/* =================================================================
   STEPS (how it works)
   ================================================================= */
.steps{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:880px){ .steps{ grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); } }
.step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(28px,3vw,40px); }
.step .n{ font-family:var(--f-display); font-weight:800; font-size:clamp(40px,5vw,64px); line-height:.9; color:var(--lime); letter-spacing:-0.04em; }
.step .n::before{ content:"0"; color:var(--ink-3); opacity:.4; }
.step h3{ margin-top:16px; font-size:clamp(19px,2vw,24px); letter-spacing:-0.02em; }
.step p{ margin-top:12px; color:var(--ink-2); font-size:14px; line-height:1.68; }
.step:not(:last-child)::after{ content:"→"; position:absolute; z-index:2; font-family:var(--f-display); font-weight:800; color:var(--vermilion); font-size:26px; right:-22px; top:50%; transform:translateY(-50%); }
@media (max-width:879px){ .step:not(:last-child)::after{ right:50%; top:auto; bottom:-26px; transform:translateX(50%) rotate(90deg); } }

/* =================================================================
   STATS
   ================================================================= */
.stats{ display:grid; gap:1px; grid-template-columns:1fr; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
@media (min-width:680px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stat{ background:var(--paper); padding:clamp(30px,3.6vw,48px) clamp(22px,2.6vw,34px); text-align:center; }
.stat .fig{ font-family:var(--f-display); font-weight:800; font-size:clamp(38px,5vw,64px); letter-spacing:-0.03em; line-height:1; color:var(--forest); font-variant-numeric:tabular-nums; }
.stat .fig .u{ font-size:.42em; color:var(--vermilion); margin-left:.1em; }
.stat .cap{ margin-top:14px; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); }

/* =================================================================
   PRICING (service plans)
   ================================================================= */
.plan{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  transition:transform .26s cubic-bezier(.16,1,.3,1),border-color .26s,box-shadow .26s; }
.plan:hover{ transform:translateY(-5px); border-color:var(--forest); box-shadow:0 18px 40px color-mix(in srgb,var(--forest) 13%,transparent); }
.plan.feat{ border-color:var(--forest); border-width:2px; }
.plan-tag{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 11px; border-radius:var(--r-pill); background:var(--amber); color:var(--ink); }
.plan.feat .plan-tag{ background:var(--forest); color:var(--paper); }
.plan h3{ font-size:clamp(20px,2.1vw,25px); letter-spacing:-0.02em; }
.plan .price{ font-family:var(--f-display); font-weight:800; font-size:clamp(30px,3.4vw,44px); letter-spacing:-0.03em; color:var(--forest); line-height:1; }
.plan .price small{ font-size:.4em; color:var(--ink-3); font-weight:600; margin-left:4px; }
.plan ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.plan li{ font-size:14px; color:var(--ink-2); line-height:1.5; padding-left:24px; position:relative; }
.plan li::before{ content:""; position:absolute; left:0; top:6px; width:12px; height:12px; background:var(--lime); border-radius:2px; transform:rotate(45deg); }
.plan .btn{ margin-top:auto; }

/* =================================================================
   NEWS
   ================================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,3vw,40px); }
.filter{ font-size:13px; font-weight:600; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-2); background:var(--paper); cursor:pointer; transition:all .18s ease; }
.filter:hover{ border-color:var(--forest); color:var(--ink); }
.filter.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.news-list{ display:flex; flex-direction:column; }
.news-row{ display:grid; gap:8px; grid-template-columns:120px 1fr auto; align-items:baseline; padding:clamp(20px,2.4vw,28px) 4px; border-top:1px solid var(--line); transition:background .18s,padding-left .24s cubic-bezier(.16,1,.3,1); }
.news-row:last-child{ border-bottom:1px solid var(--line); }
.news-row:hover{ background:var(--paper-2); padding-left:16px; }
.news-row:hover .news-arrow{ transform:translateX(4px); color:var(--vermilion); }
.news-date{ font-family:var(--f-display); font-weight:500; font-size:13px; color:var(--ink-2); }
.news-tag{ display:inline-block; font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); background:var(--forest); color:var(--paper); margin-right:14px; vertical-align:middle; }
.news-tag--media{ background:var(--vermilion); } .news-tag--price{ background:var(--amber); color:var(--ink); }
.news-title{ font-size:15px; font-weight:500; color:var(--ink); }
.news-sum{ display:block; margin-top:6px; color:var(--ink-3); font-size:13px; line-height:1.6; }
.news-arrow{ color:var(--ink-3); transition:transform .2s,color .2s; }
@media (max-width:720px){ .news-row{ grid-template-columns:1fr; gap:6px; } .news-arrow{ display:none; } }

/* =================================================================
   FAQ (details/summary)
   ================================================================= */
.faq{ display:flex; flex-direction:column; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:clamp(20px,2.2vw,26px) 0; display:flex; align-items:flex-start; gap:16px;
  font-family:var(--f-display); font-weight:700; font-size:clamp(16px,1.7vw,19px); letter-spacing:-0.01em; color:var(--ink); transition:color .18s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--forest); }
.faq summary .q{ color:var(--lime); font-family:var(--f-display); font-weight:800; flex-shrink:0; }
.faq summary .chev{ margin-left:auto; flex-shrink:0; transition:transform .26s cubic-bezier(.16,1,.3,1); color:var(--ink-3); }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .ans{ padding:0 0 clamp(22px,2.4vw,28px) 40px; color:var(--ink-2); font-size:15px; line-height:1.75; max-width:64ch; }

/* =================================================================
   CONTACT
   ================================================================= */
.paths{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:820px){ .paths{ grid-template-columns:repeat(3,1fr); } }
.path{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(28px,3vw,38px); display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  transition:transform .26s cubic-bezier(.16,1,.3,1),border-color .26s,box-shadow .26s; }
.path:hover{ transform:translateY(-5px); border-color:var(--forest); box-shadow:0 18px 40px color-mix(in srgb,var(--forest) 13%,transparent); }
.path .pico{ width:48px; height:48px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--paper); }
.path.p1 .pico{ background:linear-gradient(135deg,var(--forest),var(--forest-deep)); }
.path.p2 .pico{ background:linear-gradient(135deg,var(--amber),var(--amber-deep)); color:var(--ink); }
.path.p3 .pico{ background:linear-gradient(135deg,var(--lime),var(--lime-deep)); }
.path h3{ font-size:clamp(18px,1.9vw,22px); letter-spacing:-0.02em; }
.path p{ color:var(--ink-2); font-size:14px; line-height:1.66; flex:1; }
.path .go{ font-size:14px; font-weight:700; color:var(--forest); display:inline-flex; align-items:center; gap:8px; }
.path .go .arrow{ transition:transform .2s; } .path:hover .go .arrow{ transform:translateX(4px); }

.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(28px,4vw,52px); }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em; }
.field label .req{ color:var(--vermilion); margin-left:4px; }
.field input,.field textarea,.field select{ font:inherit; font-size:15px; color:var(--ink); background:var(--paper-2); border:1.5px solid var(--line); border-radius:8px; padding:13px 16px; transition:border-color .18s,background .18s; width:100%; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--forest); background:var(--paper); }
.field textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:12px; color:var(--ink-3); line-height:1.6; margin-top:4px; }

/* =================================================================
   CTA (kinetic)
   ================================================================= */
.cta-card{ border-radius:var(--r-card); padding:clamp(40px,5vw,64px); display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; background:var(--ink); color:var(--paper); transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s; }
.cta-card .gear{ position:absolute; right:-4%; top:-30%; width:clamp(220px,30vw,420px); height:clamp(220px,30vw,420px); color:var(--lime); opacity:.08; }
.cta-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--vermilion) 30%,transparent),transparent 46%); }
.cta-card:hover{ transform:translateY(-4px); box-shadow:0 22px 48px color-mix(in srgb,var(--ink) 40%,transparent); }
.cta-card>*{ position:relative; z-index:1; }
.cta-card h3{ font-size:clamp(26px,3vw,42px); letter-spacing:-0.025em; line-height:1.12; color:var(--paper); max-width:18ch; }
.cta-card p{ color:color-mix(in srgb,var(--paper) 78%,transparent); font-size:15px; line-height:1.62; max-width:46ch; }
.cta-card .btn{ margin-top:8px; align-self:flex-start; }