/* ============================================================
   sections.css — 各セクション固有スタイル
   [トップ] hero/focus/news/about/solution/case/contents/cta
   [下層]   overview/layers/strengths/lineup
   [一覧]   service-blocks（service.html）
   [運営]   products（saas-product / 旧 product-operation）
   ============================================================ */

/* ========== トップページ用セクション ========== */

/* --- HERO ---
   ⚠ 引き継ぎメモ: @keyframes scrollLine に元ソースのコピペ由来と思われる
   重複ブロックがあります（下記そのまま踏襲）。表示に実害はありませんが、
   整理時に確認してください。 */
/* HERO */
#hero{
  position:relative;width:100%;height:100vh;
  display:flex;align-items:center;overflow:hidden;
  background:#fff;
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-content{
  position:relative;z-index:1;padding:0 var(--side-pad);
}
.hero-title{
  font-size:clamp(64px,9vw,120px);
  font-weight:900;line-height:1.03;
  letter-spacing:-0.03em;color:var(--text-primary);
}
.hero-title em{font-style:normal;color:var(--brand)}
.hero-scroll{
  position:absolute;right:56px;bottom:48px;z-index:1;
  writing-mode:vertical-rl;font-size:10px;font-weight:700;
  letter-spacing:0.2em;color:var(--text-muted);
  display:flex;align-items:center;gap:12px;
}
.hero-scroll::after{
  content:\'\';display:block;width:1px;height:60px;
  background:var(--brand);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}


/* --- FOCUS --- */
/* FOCUS */
#focus{padding:80px var(--side-pad);background:var(--bg-dark)}
.focus-inner{display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;gap:0;align-items:start}
.focus-head{padding-top:4px;padding-right:10px;position:sticky;top:calc(var(--header-height) + 20px)}
.focus-head .sec-en{font-size:clamp(48px,6vw,80px)}
.focus-list{list-style:none;margin:0;padding:0}
.focus-item{
  display:flex;align-items:center;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  position:relative;transition:padding-left .25s;
}
.focus-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.focus-item:hover{padding-left:16px}
.focus-item:hover::before{transform:scaleY(1)}
.focus-badge{
  font-size:10px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:100px;
  flex-shrink:0;white-space:nowrap;
}
.focus-badge-accent{background:var(--accent);color:#fff}
.focus-badge-brand{background:var(--brand-dark);color:#fff}
.focus-badge-brand-deep{background:var(--brand-deep);color:#fff}
.focus-item-body{flex:1;min-width:0}
.focus-item-name{
  font-size:clamp(18px,2vw,24px);font-weight:700;
  color:var(--text-primary);line-height:1.3;
  margin-bottom:4px;transition:color .2s;
}
.focus-item:hover .focus-item-name{color:var(--brand-deep)}
.focus-item-desc{
  font-size:13px;color:var(--text-muted);line-height:1.6;
}
.focus-item-arrow{
  font-size:16px;color:var(--border);flex-shrink:0;
  transition:transform .2s,color .2s;
}
.focus-item:hover .focus-item-arrow{transform:translateX(4px);color:var(--brand)}


/* --- NEWS --- */
/* NEWS */
#news{padding:80px var(--side-pad);background:var(--bg-white);border-bottom:1px solid var(--border)}
.news-inner{display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;gap:0;align-items:flex-start}
.news-head{flex-shrink:0;padding-top:4px;padding-right:10px}
.news-head .sec-en{font-size:clamp(48px,6vw,80px)}
/* <ul>のブラウザデフォルトpadding-left(約40px)がFOCUS等の.xxx-list（padding:0
   明示済み）とだけ揃わない原因になっていたため、ここで明示的に0にする */
.news-list,.newslist{padding-left:0;margin-left:0;list-style:none}
.news-list{flex:1}
.news-item{
  display:grid;grid-template-columns:90px 104px 1fr;
  column-gap:16px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--border);
}
/* 記事を<article>で包むがレイアウトは親のflex/gridのまま保つ */
.news-article,.col-card-article{display:contents}
.news-date{
  font-size:13px;color:var(--text-muted);
  white-space:nowrap;font-weight:500;letter-spacing:0.05em;
}
.news-cat{
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  color:#fff;background:var(--brand-dark);
  padding:3px 10px;border-radius:100px;white-space:nowrap;
  justify-self:start;
}
.news-title{
  font-size:15px;font-weight:500;line-height:1.5;
  margin:0;flex:1;
}
.news-title a{
  text-decoration:none;color:var(--text-primary);
  transition:color .2s;
}
.news-title a:hover{color:var(--brand)}
.news-footer{margin-top:24px;text-align:right}


/* --- ABOUT --- */
/* ABOUT */
#about{
  padding:120px var(--side-pad);
  background:linear-gradient(135deg,#1A7A65 0%,#2E9E84 20%,#66CCB3 55%,#8DDECE 80%,#A8E8DC 100%);
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.about-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.about-label{
  font-size:clamp(48px,6vw,80px);font-weight:900;
  letter-spacing:-0.03em;line-height:1;
  color:rgba(255,255,255,0.9);margin-bottom:4px;display:block;
}
.about-sublabel{
  font-size:13px;font-weight:500;letter-spacing:0.16em;
  color:rgba(255,255,255,0.65);margin-bottom:32px;display:block;
}
.about-quote{
  font-size:clamp(18px,2.2vw,26px);font-weight:700;
  line-height:1.5;letter-spacing:0.01em;margin-bottom:32px;
  color:#fff;width:100%;text-align:center;
}
.about-body{
  font-size:14px;color:rgba(255,255,255,0.75);
  line-height:2;margin-bottom:36px;
  text-align:left;
}
.about-btn-wrap{width:100%;display:flex;justify-content:center;}
.btn-ghost-white{
  color:#fff;padding:13px 28px;
  font-size:13px;font-weight:700;text-decoration:none;
  border:1.5px solid rgba(255,255,255,0.6);border-radius:3px;
  transition:border-color .2s,background .2s;display:inline-flex;
  align-items:center;gap:8px;letter-spacing:0.06em;
}
.btn-ghost-white::after{content:'→';transition:transform .2s}
.btn-ghost-white:hover{border-color:#fff;background:rgba(255,255,255,0.12)}
.btn-ghost-white:hover::after{transform:translateX(4px)}
.about-graphic{
  display:flex;align-items:center;justify-content:center;
}
#about-net-bg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;display:none;opacity:0.35;
}
#about-net{width:100%;height:420px;display:block}


/* --- ABOUT: SVGノードアニメーション --- */
/* SVG node animations */
@keyframes nodePulse{
  0%,100%{opacity:.9;r:7}
  50%{opacity:.4;r:5}
}
@keyframes nodePulseSm{
  0%,100%{opacity:.6;r:5}
  50%{opacity:.2;r:3}
}
@keyframes centerPulse{
  0%,100%{opacity:.95;r:6}
  50%{opacity:.5;r:4}
}
@keyframes lineFade{
  0%,100%{stroke-opacity:.2}
  50%{stroke-opacity:.06}
}
@keyframes lineGlow{
  0%,100%{stroke-opacity:.18}
  50%{stroke-opacity:.08}
}
@keyframes svgRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.svg-orbit{
  transform-origin:240px 240px;
  animation:svgRotate 40s linear infinite;
}
.about-body{
  font-size:16px;color:rgba(255,255,255,0.78);
  line-height:2;
  max-width:560px;margin-inline:auto;margin-bottom:48px;
}
.btn-ghost-white{
  color:#fff;padding:13px 28px;
  font-size:13px;font-weight:700;text-decoration:none;
  border:1.5px solid rgba(255,255,255,0.6);border-radius:3px;
  transition:border-color .2s,background .2s;display:inline-flex;
  align-items:center;gap:8px;letter-spacing:0.06em;
}
.btn-ghost-white::after{content:'→';transition:transform .2s}
.btn-ghost-white:hover{border-color:#fff;background:rgba(255,255,255,0.12)}
.btn-ghost-white:hover::after{transform:translateX(4px)}


/* --- SOLUTION（sticky左 + スクロール右） --- */
/* SOLUTION — sticky left + scrolling right */
#solution{padding:120px var(--side-pad);background:var(--bg-white)}
.solution-layout{
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.solution-layout > div:last-child{padding-top:0}
.solution-sticky{
  position:sticky;top:86px;
  padding-right:10px;
}
.solution-sticky .sec-en,
.case-sticky .sec-en{
  font-size:clamp(48px,6vw,80px);
}
.solution-sticky .sec-ja{margin-bottom:24px}
#contents .case-layout{grid-template-columns:clamp(430px,30vw,600px) 1fr}
.solution-sticky-desc{
  font-size:14px;color:var(--text-secondary);
  line-height:1.85;margin-bottom:32px;
}
.solution-list{border-top:1px solid var(--border)}
.solution-item{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  gap:16px;
  transition:padding-left .25s;
  position:relative;
}
.solution-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.solution-item:hover{padding-left:16px}
.solution-item:hover::before{transform:scaleY(1)}
.solution-item-left{display:none}
.solution-item-num{
  font-size:10px;font-weight:700;letter-spacing:0.12em;
  color:var(--text-muted);
  transition:color .2s;text-transform:uppercase;
  align-self:flex-start;padding-top:4px;
}
.solution-item:hover .solution-item-num{color:var(--brand-deep)}
.solution-item-num.label-industry{color:var(--brand-deep)}
.solution-item-num.label-product{color:var(--accent)}
.solution-item-body{min-width:0}
.solution-item-name{
  font-size:20px;font-weight:700;color:var(--text-primary);
  transition:color .2s;display:block;margin-bottom:4px;
  line-height:1.3;
}
.solution-item:hover .solution-item-name{color:var(--brand-deep)}
.solution-item-desc{
  font-size:13px;color:var(--text-muted);
  line-height:1.6;transition:color .2s;
  display:block;
}
.solution-item:hover .solution-item-desc{color:var(--text-secondary)}
.solution-item-arrow{
  font-size:16px;color:var(--border);
  transition:transform .2s,color .2s;flex-shrink:0;
  align-self:center;
}
.solution-item:hover .solution-item-arrow{transform:translateX(4px);color:var(--brand)}


/* --- CASE --- */
/* CASE — full-width bands */
#case{padding:120px var(--side-pad);background:var(--bg-dark)}
.case-layout{
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.case-layout > div:last-child{padding-top:0}
.case-sticky{position:sticky;top:86px;padding-right:10px}
.case-sticky .sec-ja{margin-bottom:24px}
.case-sticky .btn-ghost{margin-top:8px}
.case-bands{border-top:1px solid var(--border)}
.case-band{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:64px;
  padding:20px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:padding-left .25s;
  position:relative;
}
.case-band::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.case-band:hover{padding-left:20px}
.case-band:hover::before{transform:scaleY(1)}
.case-band-industry{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  color:var(--brand-deep);margin-bottom:10px;
}
.case-band-title{
  font-size:clamp(18px,2.5vw,26px);font-weight:700;
  line-height:1.4;color:var(--text-primary);
  transition:color .2s;
}
.case-band:hover .case-band-title{color:var(--brand-deep)}
.case-band-result{
  text-align:right;flex-shrink:0;
}
.case-band-num{
  font-size:clamp(40px,6vw,72px);font-weight:900;
  letter-spacing:-0.04em;line-height:1;
  color:var(--brand);
}
.case-band-num em{font-style:normal;font-size:0.5em;letter-spacing:0}
.case-band-label{
  font-size:12px;color:var(--text-muted);
  margin-top:4px;font-weight:500;
}
.service-card{
  background:#fff;padding:36px 32px;
  text-decoration:none;color:inherit;
  transition:background .25s,transform .25s,box-shadow .25s,color .2s;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.service-card::before{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;background:rgba(255,255,255,0.5);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.service-card::after{content:none}
.service-card:hover{
  background:var(--brand);color:#fff;
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.15);
}
.service-card:hover::before{transform:scaleX(1)}
.service-card-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:12px;
}
.service-card-left{display:flex;flex-direction:column;gap:4px}
.service-num{
  font-size:12px;font-weight:700;letter-spacing:0.15em;
  color:var(--brand-deep);margin-bottom:0;flex-shrink:0;
  transition:color .2s;
}
.service-card:hover .service-num{color:rgba(255,255,255,0.7)}
.service-name{
  font-size:18px;font-weight:700;
  line-height:1.3;color:var(--text-primary);
  transition:color .2s;margin-bottom:0;
}
.service-card:hover .service-name{color:#fff}
.service-icon{
  width:32px;height:32px;flex-shrink:0;margin-left:12px;
}
.service-icon svg{width:32px;height:32px;stroke:var(--brand-deep);transition:stroke .25s}
.service-card:hover .service-icon svg{stroke:rgba(255,255,255,0.85)}
.service-desc{
  font-size:13px;color:var(--text-secondary);
  line-height:1.75;transition:color .2s;
  flex:1;margin-bottom:16px;
}
.service-card:hover .service-desc{color:rgba(255,255,255,0.85)}
.service-card-bottom{display:none}
.service-arrow{
  font-size:15px;color:var(--brand-deep);
  transition:transform .2s,color .2s;
  display:block;text-align:right;
}
.service-card:hover .service-arrow{transform:translateX(4px);color:#fff}


/* --- CONTENTS（サムネイル + リスト） --- */
/* Contents thumbnail */
.contents-thumb{
  width:100%;aspect-ratio:16/9;
  background:var(--bg-dark);
  border:1px solid var(--border-light);
  border-radius:4px;
  margin-bottom:20px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.contents-thumb-inner{
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  color:var(--text-muted);text-transform:uppercase;
}
.featured-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;background:var(--border);border:1px solid var(--border);
}
.feat-card{
  background:#fff;padding:28px 32px;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .2s;
  position:relative;overflow:hidden;
  min-height:0;
}
.feat-tool{
  font-size:11px;font-weight:700;letter-spacing:0.12em;
  color:var(--text-muted);margin-bottom:4px;
}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--border);transition:background .3s;
}
.feat-card:hover::before{background:var(--brand)}
.feat-card:hover{background:var(--brand-light)}
.feat-badge{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:4px 12px;border-radius:100px;margin-bottom:12px;
}
.feat-badge.industry{background:var(--bg-dark);color:var(--text-secondary)}
.feat-badge.product{background:var(--brand-dark);color:#fff}
.feat-name{font-size:20px;font-weight:900;line-height:1.3;margin-bottom:8px;letter-spacing:-0.01em}
.feat-desc{font-size:13px;color:var(--text-secondary);line-height:1.75;margin-bottom:16px;flex:1}
.feat-arrow{
  font-size:14px;color:var(--brand-deep);
  transition:transform .2s;display:inline-block;font-weight:700;
}
.feat-card:hover .feat-arrow{transform:translateX(4px)}

#case{padding:120px var(--side-pad);background:var(--bg-dark)}
.case-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--border);border:1px solid var(--border);
}
.case-card{
  background:#fff;padding:40px 36px;
  text-decoration:none;color:inherit;
  transition:background .2s;display:block;
}
.case-card:hover{background:var(--brand-light)}
.case-industry{
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  color:var(--brand-deep);margin-bottom:12px;
}
.case-title{font-size:17px;font-weight:700;line-height:1.5;margin-bottom:12px}
.case-desc{font-size:13px;color:var(--text-secondary);line-height:1.75}
.case-arrow{
  display:block;margin-top:20px;font-size:18px;
  color:var(--brand);transition:transform .2s;
}
.case-card:hover .case-arrow{transform:translateX(4px)}

/* CONTENTS */
#contents{padding:120px var(--side-pad);background:var(--bg-white)}
.contents-list{border-top:1px solid var(--border)}
.contents-item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;padding:22px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:padding-left .25s;
  position:relative;
}
.contents-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.contents-item:hover{padding-left:16px}
.contents-item:hover::before{transform:scaleY(1)}
.contents-item-thumb{display:none}
.contents-item-body{min-width:0}
.contents-item-cat{
  font-size:10px;font-weight:700;letter-spacing:0.12em;
  color:var(--brand-deep);margin-bottom:6px;
  transition:color .2s;
}
.contents-item:hover .contents-item-cat{color:var(--brand-deep)}
.contents-item-title{
  font-size:16px;font-weight:700;line-height:1.5;
  color:var(--text-primary);transition:color .2s;
  margin-bottom:6px;
}
.contents-item:hover .contents-item-title{color:var(--brand-deep)}
.contents-item-date{font-size:12px;color:var(--text-muted)}
.contents-item-arrow{
  font-size:16px;color:var(--border);
  transition:transform .2s,color .2s;flex-shrink:0;
}
.contents-item:hover .contents-item-arrow{transform:translateX(4px);color:var(--brand)}


/* --- CTA --- */
/* CTA（フッター上共通CTA #footer-cta。記事内4種切替CTAは
   .article-cta（contents-detail.css）で独立デザインのため対象外） */
#footer-cta{
  background:var(--brand);
  padding:80px var(--side-pad);
}
.cta-inner{
  display:grid;grid-template-columns:1fr auto;
  gap:64px;align-items:center;
  max-width:100%;
}
.cta-eyebrow{
  font-size:clamp(48px,6vw,80px);font-weight:900;
  letter-spacing:-0.03em;line-height:1;
  color:rgba(255,255,255,0.9);margin-bottom:10px;display:block;
}
.cta-sublabel{
  font-size:13px;font-weight:500;letter-spacing:0.16em;
  color:rgba(255,255,255,0.65);margin-top:14px;margin-bottom:20px;display:block;
}
.cta-title{
  font-size:clamp(13px,1.4vw,18px);font-weight:400;
  line-height:1.7;color:rgba(255,255,255,0.8);
  margin-bottom:0;
}
.cta-title em{font-style:normal;color:#fff;font-weight:400}
.cta-note{display:none}
.cta-actions{display:flex;flex-direction:column;gap:12px;flex-shrink:0;align-items:flex-end}
.btn-contact-white{
  background:var(--accent);color:#fff;
  padding:16px 56px;font-size:15px;font-weight:700;
  letter-spacing:0.05em;text-decoration:none;border-radius:3px;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-contact-white:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-ghost-white-cta{
  color:#fff;padding:16px 36px;
  font-size:15px;font-weight:700;text-decoration:none;
  border:1.5px solid rgba(255,255,255,0.5);border-radius:3px;
  transition:border-color .2s,background .2s;display:inline-block;
}
.btn-ghost-white-cta:hover{border-color:#fff;background:rgba(255,255,255,0.1)}


/* ========== 下層ページ用セクション ========== */

/* --- OVERVIEW --- */
/* ===== OVERVIEW ===== */
.overview{
  padding:120px var(--side-pad);
  background:var(--bg-dark);
  display:flex;justify-content:center;
}
.overview-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.overview-meta{
  padding-right:10px;
  position:sticky;top:calc(var(--header-height) + 20px);align-self:start;
}
.overview-meta-lead{
  margin-top:20px;
  font-size:14px;color:var(--text-secondary);line-height:2;
}
/* min-width:0: grid item のままだと子.journey-svg-wrap svg の min-width(モバイルで720px指定)が
   自動最小幅として伝播し、ページ全体が横スクロールしてしまうため明示的に0を指定 */
.overview-body{padding-left:clamp(24px,3vw,56px);min-width:0}

/* Customer journey / flow diagram wrap（インラインSVG図解、中央配置） */
.journey-svg-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  padding:24px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  justify-content:center;
}
/* 全幅に常時フィットさせ横スクロールは行わない。≤1024pxでは画面幅まで縮小し、
   タップでlightbox拡大表示に切り替える（下の@media・.svg-lightbox参照）。
   min-width:0 は Safari 系ブラウザでflexアイテム(svg)の自動最小幅が
   intrinsicサイズ基準になり右側がはみ出す既知の挙動を防ぐため必須。 */
.journey-svg-wrap svg{
  width:100%;height:auto;display:block;margin:0 auto;
  min-width:0;
}

/* Pyramid (4層支援体制) wrap — journey-svg-wrapと同様の中央配置+lightbox対応 */
.pyramid-wrap{
  display:flex;
  justify-content:center;
}
.pyramid-wrap svg{
  display:block;margin:0 auto;
}

/* ===== SVG LIGHTBOX（タブレット・スマホでのタップ拡大表示） ===== */
.svg-lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(17,17,17,0.85);
  display:none;
  align-items:center;justify-content:center;
  padding:32px;
  overflow:auto;
  cursor:zoom-out;
}
.svg-lightbox.open{display:flex}
.svg-lightbox-stage{
  max-width:100%;
  background:#fff;
  border-radius:8px;
  padding:24px;
  cursor:default;
}
.svg-lightbox-stage svg{
  display:block;
  width:100%;height:auto;
  min-width:600px;
}
.svg-lightbox-close{
  position:fixed;top:24px;right:24px;
  width:44px;height:44px;border-radius:50%;
  border:none;background:#fff;color:var(--text-primary);
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.svg-lightbox-close:hover{background:var(--brand-light)}
@media(max-width:768px){
  .svg-lightbox-stage svg{min-width:auto}
}


/* --- SUPPORT LAYERS --- */
/* ===== SUPPORT LAYERS ===== */
.layers{
  padding:120px var(--side-pad);
  background:var(--bg-white);
  display:flex;justify-content:center;
}
.layers-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.layers-meta{
  padding-right:10px;
  position:sticky;top:calc(var(--header-height) + 20px);align-self:start;
}
.layers-meta-lead{
  margin-top:20px;
  font-size:14px;color:var(--text-secondary);line-height:2;
}
.layers-body{padding-left:clamp(24px,3vw,56px)}
.layers-grid{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,3vw,64px);align-items:center;
  background:#fff;padding:56px 10px;border:1px solid var(--border);
  border-radius:4px;
}
.pyramid-svg{width:280px;height:auto;flex-shrink:0}
.layers-content{min-width:0}
.layers-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.layers-list li{
  display:grid;grid-template-columns:104px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border-light);
  align-items:start;
}
/* 2カラム(メタ+ボディ)がまだ効く1025〜1300pxでは、ボディ側が狭くなり
   ピラミッド＋テキストの横並びが破綻するため、この帯域から縦積みにする */
@media(max-width:1300px){
  .layers-grid{grid-template-columns:1fr;gap:40px;padding:44px 10px}
  .pyramid-svg{margin:0 auto;display:block}
}
.layers-list li:last-child{border-bottom:none}
.layers-role{
  font-size:14px;font-weight:700;color:var(--brand-deep);
  letter-spacing:0.04em;
}
.layers-desc{
  font-size:13px;color:var(--text-secondary);line-height:1.85;
}


/* --- STRENGTHS --- */
/* ===== STRENGTHS ===== */
.strengths{
  padding:120px var(--side-pad);
  background:var(--bg-dark);
  display:flex;justify-content:center;
}
.strengths-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.strengths-meta{
  padding-right:10px;
  position:sticky;top:calc(var(--header-height) + 20px);align-self:start;
}
.strengths-meta-lead{
  margin-top:20px;
  font-size:14px;color:var(--text-secondary);line-height:2;
}
.strengths-body{padding-left:clamp(24px,3vw,56px)}
.strengths-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:2px;background:var(--border);border:1px solid var(--border);
}
/* overview等、.strengths以外のセクション内で.strengths-gridを流用する場合の角丸クリップ */
.strengths-grid-rounded{border-radius:6px;overflow:hidden}
.strength-card{
  background:#fff;padding:40px;
  position:relative;
}
.strength-num{
  font-size:clamp(32px,3.5vw,48px);font-weight:900;
  letter-spacing:-0.04em;line-height:1;
  color:var(--brand-light);display:block;margin-bottom:20px;
}
.strength-title{
  font-size:clamp(16px,1.6vw,20px);font-weight:700;
  color:var(--text-primary);margin-bottom:12px;line-height:1.4;
}
.strength-desc{
  font-size:13px;color:var(--text-secondary);line-height:2;
}


/* --- LINEUP --- */
/* ===== LINEUP ===== */
.lineup{
  padding:120px var(--side-pad);
  background:var(--bg-white);
  display:flex;justify-content:center;
  border-top:1px solid var(--border-light);
}
.lineup-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.lineup-meta{
  padding-right:10px;
  position:sticky;top:calc(var(--header-height) + 20px);align-self:start;
}
.lineup-meta-lead{
  margin-top:20px;
  font-size:14px;color:var(--text-secondary);line-height:2;
}
.lineup-body{padding-left:clamp(24px,3vw,56px)}
.lineup-group + .lineup-group{margin-top:56px}
.lineup-group-title{
  font-size:13px;font-weight:700;letter-spacing:0.08em;
  color:var(--brand-deep);margin-bottom:8px;
}

.lineup-list{border-top:1px solid var(--border)}
.lineup-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;align-items:center;
  padding:32px 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  position:relative;transition:padding-left .25s,background .25s;
}
.lineup-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.lineup-item:hover{padding-left:20px;background:var(--bg-light)}
.lineup-item:hover::before{transform:scaleY(1)}
.lineup-meta-num{display:flex;align-items:center;gap:16px;min-width:240px}
.lineup-num{
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  color:var(--text-muted);min-width:56px;
}
.lineup-num.ext{color:var(--accent)}
.lineup-name{
  font-size:clamp(16px,1.6vw,20px);font-weight:700;
  color:var(--text-primary);line-height:1.3;margin:0;
  transition:color .2s;
}
.lineup-item:hover .lineup-name{color:var(--brand-deep)}
.lineup-desc{
  font-size:13px;color:var(--text-secondary);line-height:1.8;
  padding-right:24px;margin:0;
}
.lineup-arrow{
  font-size:18px;color:var(--border);flex-shrink:0;
  transition:transform .25s,color .2s;
  padding-right:8px;
}
.lineup-item:hover .lineup-arrow{transform:translateX(6px);color:var(--brand)}
.lineup-item-static{cursor:default}
.lineup-item-static:hover{padding-left:0;background:none}
.lineup-item-static:hover::before{transform:scaleY(0)}
.lineup-item-static:hover .lineup-name{color:var(--text-primary)}


/* ========== 事業紹介一覧（service.html）用 ========== */

/* ===== SERVICE BLOCKS ===== */
#svc-blocks{
  padding:0 0 120px;
  background:var(--bg-white);
}
/* outer(padding)/inner(max-width)を分離: .svc-blockがフルブリードのpadding+背景色を持ち、
   幅確定は子の.svc-block-innerが担う（詳細はdocs/css-architecture-plan.md参照） */
.svc-block{
  display:block;text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  padding:120px var(--side-pad);
}
.svc-block-inner{
  max-width:1600px;margin:0 auto;
  display:grid;
  grid-template-columns:clamp(380px,32vw,520px) 1fr;
  gap:clamp(48px,6vw,120px);
  align-items:start;
}
.svc-block:nth-child(odd){background:var(--bg-white)}
.svc-block:nth-child(even){background:var(--bg-dark)}
.svc-block:not(:last-child){border-bottom:1px solid var(--border)}

/* Left: visual + meta */
.svc-block-meta{
  position:sticky;top:calc(var(--header-height) + 20px);
}
.svc-block-num{
  font-size:clamp(56px,6vw,80px);
  font-weight:900;letter-spacing:-0.05em;
  line-height:0.85;display:block;
  color:transparent;
  -webkit-text-stroke:1.5px var(--border);
  text-stroke:1.5px var(--border);
  margin-bottom:24px;
}
.svc-block-cat{
  font-size:11px;font-weight:700;letter-spacing:0.2em;
  color:var(--brand-deep);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
}
.svc-block-cat::before{
  content:'';width:32px;height:1.5px;background:var(--brand);
}
.svc-block-name{
  font-size:clamp(26px,2.8vw,40px);font-weight:900;
  letter-spacing:-0.02em;line-height:1.3;
  color:var(--text-primary);
  text-shadow:1px 1px 0 rgba(0,0,0,0.04),3px 3px 8px rgba(0,0,0,0.05);
}

/* Right: content */
.svc-block-content{padding-top:12px}
.svc-block-desc{
  font-size:15px;color:var(--text-secondary);
  line-height:2.1;margin-bottom:40px;
}
.svc-block-sublabel{
  font-size:11px;font-weight:700;letter-spacing:0.16em;
  color:var(--text-muted);text-transform:uppercase;
  margin-bottom:16px;display:block;
}
.svc-block-tags{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px;
}
.svc-block-btn-wrap{display:flex;justify-content:flex-end}
.svc-tag{
  font-size:13px;font-weight:700;letter-spacing:0.04em;
  color:#fff;background:var(--brand);
  padding:10px 18px;border-radius:4px;
  border:1px solid var(--brand);
}

.svc-block-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 36px;
  border:1.5px solid var(--text-primary);
  font-size:13px;font-weight:700;letter-spacing:0.1em;
  color:var(--text-primary);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s,gap .25s;
  background:transparent;
}
.svc-block-btn::after{content:'→';font-size:16px;transition:transform .25s}
.svc-block-btn:hover{
  background:var(--brand);color:#fff;border-color:var(--brand);gap:20px;
}
.svc-block-btn:hover::after{transform:translateX(4px)}


/* ========== RELATED CASES（第3階層サービス & 事例詳細で共用） ========== */
/* 第3階層サービスページ用：左sticky見出し + 右カード の2カラム */
.related-cases{
  padding:120px var(--side-pad);
  background:var(--bg-dark);
  display:flex;justify-content:center;
  border-top:1px solid var(--border-light);
}
.related-cases-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.related-cases-meta{padding-right:10px;position:sticky;top:calc(var(--header-height) + 20px);align-self:start}
.related-cases-meta-lead{margin-top:20px;font-size:14px;color:var(--text-secondary);line-height:2}
.related-cases .related-cases-body{padding-left:clamp(24px,3vw,56px)}

/* カードグリッド（共用：事例詳細では中央寄せレイアウト内でそのまま利用）
   PC: 3列 / タブレット(≤1024px): 2列+3件目は下段中央 / スマホ(≤448px): 縦積み */
.related-cases-body{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.related-case-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:28px 28px 56px;text-decoration:none;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.related-case-card:hover{
  border-color:var(--brand);transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.07);
}
.related-case-industry{
  font-size:11px;font-weight:700;letter-spacing:0.12em;
  color:var(--brand-deep);background:var(--brand-light);
  padding:4px 12px;border-radius:100px;align-self:flex-start;
}
.related-case-title{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.5}
.related-case-result{font-size:13px;color:var(--text-secondary);line-height:1.8}
.related-case-arrow{
  position:absolute;right:24px;bottom:20px;
  font-size:18px;color:var(--brand);font-weight:700;transition:transform .25s;
}
.related-case-card:hover .related-case-arrow{transform:translateX(4px)}

/* 「支援実績の一覧を見る」ボタン（related-cases セクション & 事例詳細で共用） */
.related-cases-more{margin-top:48px;text-align:center}
.related-cases-inner .related-cases-more{grid-column:1/-1}
.btn-outline{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 40px;border:1.5px solid var(--text-primary);
  font-size:13px;font-weight:700;letter-spacing:0.1em;
  color:var(--text-primary);text-decoration:none;background:transparent;
  transition:background .25s,color .25s,border-color .25s,gap .25s;
}
.btn-outline::after{content:'→';font-size:16px;transition:transform .25s}
.btn-outline:hover{background:var(--brand);color:#fff;border-color:var(--brand);gap:20px}
.btn-outline:hover::after{transform:translateX(4px)}


/* ========== SaaSプロダクト運営（saas-product / 旧 product-operation）用 PRODUCTS ========== */

/* ===== PRODUCTS ===== */
.products-list{display:flex;flex-direction:column;gap:40px}
.product-card{
  display:flex;flex-direction:column;
  width:100%;margin:0 auto;
  background:#fff;border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.product-card:hover{
  transform:translateY(-3px);
  border-color:var(--brand);
  box-shadow:0 12px 40px rgba(26,138,115,0.12);
}

/* ヘッダー行: アイコン＋サービス名を横一列に配置。 */
.product-header{
  display:flex;align-items:center;gap:16px;
  padding:16px 32px;
  border-bottom:0;
}
.product-favicon{
  width:48px;height:48px;border-radius:10px;
  flex-shrink:0;
  background:#fff;border:1px solid var(--border-light);
  object-fit:contain;padding:6px;
}
/* サービス名+説明を1行で収め、入りきらない分は省略（text-overflow）。
   flex:1/min-width:0はflexアイテムでellipsisを効かせるための必須条件。 */
.product-name{
  flex:1;min-width:0;
  font-size:clamp(16px,1.4vw,24px);font-weight:700;
  color:var(--text-primary);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product-name-highlight{color:var(--brand-deep)}

/* コンテンツ行: サムネイル(左) と 説明文・CTA(右) の2カラム。
   .product-visualは常に自身のaspect-ratio(1200/630)どおりの高さになる
   （align-items:startのため隣の.product-bodyの高さに引っ張られない）ので、
   コンテナと画像のアスペクト比が一致し、object-fit:coverでも
   上下の余白・左右のクロップとも発生しない。 */
.product-content{
  display:grid;
  grid-template-columns:minmax(300px,38%) 1fr;
  gap:48px;align-items:start;
}
.product-visual{
  position:relative;background:var(--bg-dark);
  overflow:hidden;width:100%;
  margin:5px 0 0 30px;
  aspect-ratio:1200/630;
}
.product-visual img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s ease;
  display:block;
}
.product-card:hover .product-visual img{transform:scale(1.03)}

/* align-self:centerで、画像側(.product-visual)の高さを基準にした行の中で
   説明文・CTAを縦方向中央に配置する。 */
.product-body{
  padding:32px 36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-width:0;
  align-self:center;
}
.product-desc{
  font-size:13.5px;color:var(--text-secondary);
  line-height:1.9;flex:1;
}
.product-visit{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:0.08em;
  color:var(--brand-deep);text-transform:uppercase;
  padding-top:8px;border-top:1px solid var(--border-light);
  transition:gap .25s,color .2s;
}
.product-visit::after{
  content:'↗';font-size:14px;transition:transform .25s;
}
.product-card:hover .product-visit{color:var(--brand-deep);gap:14px}
.product-card:hover .product-visit::after{transform:translate(3px,-3px)}


/* ============================================================
   第3階層（leaf）ページ用コンポーネント — Phase 2で追加
   FEATURES（主要機能・特徴カードグリッド）/ FLOW（OVERVIEW図解: SVG不使用）
   ※ STRENGTHS・CTA は既存クラスをそのまま再利用
   ============================================================ */

/* 第3階層（leaf）ページ限定：セクション背景を白/ベージュ交互配置に
   （PAGE HERO=白 → FEATURES=ベージュ → OVERVIEW=白 → STRENGTHS=ベージュ →
    RELATED CASES=白 → CTA=ブランドカラー）。.overview/.related-casesは
   第2階層ページ（service-digital-marketing.html等）とも共用のクラスのため、
   body.page-leaf 配下に限定して上書きする。 */
body.page-leaf .features{background:var(--bg-dark)}
body.page-leaf .overview{background:var(--bg-white)}
body.page-leaf .related-cases{background:var(--bg-white)}
/* page-hero-inner の border-bottom は全ページ共通で削除済み（pages.css）のため、
   ここでの個別上書きは不要になり削除 */

/* ===== FEATURES ===== */
.features{padding:120px var(--side-pad);background:var(--bg-white);display:flex;justify-content:center}
.features-inner{
  max-width:1600px;width:100%;
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.features-meta{padding-right:10px;position:sticky;top:calc(var(--header-height) + 20px);align-self:start}
.features-meta-lead{margin-top:20px;font-size:14px;color:var(--text-secondary);line-height:2}
.features-body{padding-left:clamp(24px,3vw,56px)}
/* 4行の縦並びレイアウト（LINEUP / STRENGTHS と統一）。
   各アイテムは横並び：左に番号＋タイトル、右に説明。CSSのみで全第3階層ページに反映。 */
.features-grid{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
}
.feature-card{
  display:grid;
  grid-template-columns:clamp(220px,24vw,300px) 1fr;
  grid-template-areas:"num desc" "title desc";
  column-gap:clamp(24px,3vw,48px);row-gap:6px;align-items:start;
  background:#fff;padding:32px 20px;
  border-bottom:1px solid var(--border);
}
.feature-num{
  grid-area:num;
  font-size:11px;font-weight:700;letter-spacing:0.14em;
  color:var(--brand-deep);text-transform:uppercase;
  display:block;margin-bottom:0;
}
.feature-title{
  grid-area:title;
  font-size:clamp(16px,1.6vw,20px);font-weight:700;
  color:var(--text-primary);margin-bottom:0;line-height:1.4;
}
.feature-desc{grid-area:desc;font-size:13px;color:var(--text-secondary);line-height:2}

/* ===== FLOW（OVERVIEW シンプルHTML図解 / SVG不使用） ===== */
.flow{display:flex;flex-direction:column;gap:12px}
.flow-step{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:28px 32px;position:relative;
}
.flow-step-num{
  font-size:clamp(28px,3vw,40px);font-weight:900;
  color:var(--brand-light);letter-spacing:-0.03em;line-height:1;min-width:52px;
}
.flow-step-body{min-width:0}
.flow-step-title{
  font-size:clamp(16px,1.6vw,20px);font-weight:700;
  color:var(--text-primary);margin-bottom:8px;line-height:1.4;
}
.flow-step-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.9}
.flow-step-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.08em;
  color:var(--brand-deep);background:var(--brand-light);
  padding:3px 10px;border-radius:100px;margin-top:12px;
}

/* --- 上記 leaf コンポーネントのレスポンシブ --- */
@media(max-width:1024px){
  .features{padding:64px var(--side-pad)}
  .features-meta{position:static}
  .features-body{padding-left:0;padding-top:32px}
  .features-inner{grid-template-columns:1fr}
}
@media(max-width:768px){
  .features{padding:64px var(--side-pad)}
  /* 狭い画面では 番号→タイトル→説明 の縦積みに */
  .feature-card{
    grid-template-columns:1fr;
    grid-template-areas:"num" "title" "desc";
    row-gap:10px;padding:28px 20px;
  }
  .flow-step{padding:24px;gap:20px}
}

/* ============================================================
   その他ページ用コンポーネント — Phase 3で追加
   about / case / contents / news / contact
   共通の2カラムsticky枠は .secw 系ユーティリティに集約
   ============================================================ */

/* ===== 汎用セクション枠（sticky左見出し + 右コンテンツ） ===== */
.secw{padding:120px var(--side-pad);display:flex;justify-content:center}
.secw.light{background:var(--bg-white)}
.secw.gray{background:var(--bg-dark)}
.secw-inner{max-width:1600px;width:100%}
.secw-2col{
  display:grid;grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
}
.secw-meta{padding-right:10px;position:sticky;top:calc(var(--header-height) + 20px);align-self:start}
.secw-meta-lead{margin-top:20px;font-size:14px;color:var(--text-secondary);line-height:2}
.secw-body{padding-left:clamp(24px,3vw,56px)}
.secw-head-center{text-align:center;margin-bottom:56px}
.secw-head-center .section-sub{justify-content:center}
.secw-lead{margin-top:16px;font-size:14px;color:var(--text-secondary);line-height:1.9;max-width:640px}

/* ===== MISSION（about: グラデーションバンド） ===== */
.mission{
  padding:120px var(--side-pad);
  background:linear-gradient(135deg,#1A7A65 0%,#2E9E84 25%,#66CCB3 70%,#8DDECE 100%);
  color:#fff;text-align:center;
}
.mission-inner{max-width:900px;margin:0 auto}
.mission-label{
  font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  opacity:0.85;margin-bottom:24px;display:block;
}
.mission-statement{
  font-size:clamp(26px,4vw,48px);font-weight:900;line-height:1.4;
  letter-spacing:-0.01em;margin-bottom:32px;
}
.mission-statement em{font-style:normal;border-bottom:3px solid rgba(255,255,255,0.55);padding-bottom:2px}
.mission-body{font-size:15px;line-height:2.1;opacity:0.9;max-width:660px;margin:0 auto}

/* ===== BUSINESS OVERVIEW（about: 3事業カード） ===== */
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.biz-card{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:40px 32px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.biz-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 12px 40px rgba(26,138,115,0.1)}
.biz-card-num{font-size:clamp(56px,6vw,80px);font-weight:900;letter-spacing:-0.03em;line-height:0.9;color:var(--brand-deep);display:block;margin-bottom:16px}
.biz-card-title{font-size:clamp(18px,2vw,24px);font-weight:900;margin-bottom:16px;line-height:1.4}
.biz-card-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.9;flex:1;margin-bottom:20px}
.biz-card-link{font-size:12px;font-weight:700;letter-spacing:0.08em;color:var(--brand-deep);text-transform:uppercase;transition:gap .2s}
.biz-card-link::after{content:' \2192';transition:transform .2s;display:inline-block}
.biz-card:hover .biz-card-link::after{transform:translateX(4px)}

/* ===== COMPANY INFO（about: 定義テーブル） ===== */
.info-table{width:100%;border-collapse:collapse}
.info-table th,.info-table td{text-align:left;padding:20px 4px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:top}
.info-table th{width:160px;font-weight:700;color:var(--text-primary);white-space:nowrap}
.info-table td{color:var(--text-secondary);line-height:1.9}

/* ===== REPRESENTATIVE（about: 代表プロフィール） ===== */
.rep-photo{
  width:100%;aspect-ratio:4/5;background:var(--bg-dark);
  border:1px solid var(--border);border-radius:8px;margin-top:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:12px;text-align:center;padding:20px;
}
.rep-name{font-size:clamp(24px,2.4vw,32px);font-weight:900;margin-bottom:6px;line-height:1.2}
.rep-name span{font-size:13px;font-weight:500;color:var(--text-muted);margin-left:12px;letter-spacing:0.06em}
.rep-role{font-size:11px;font-weight:700;color:var(--brand-deep);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:28px;display:block}
.rep-bio{font-size:14px;color:var(--text-secondary);line-height:2;margin-bottom:20px}
.rep-bio:last-child{margin-bottom:0}

/* ===== STATS（case: 実績数字タイル） ===== */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border)}
.stat{background:#fff;padding:48px 32px;text-align:center}
.stat-num{font-size:clamp(40px,5vw,64px);font-weight:900;color:var(--brand-deep);letter-spacing:-0.03em;line-height:1;display:block}
.stat-num em{font-style:normal;font-size:0.5em;color:var(--brand);margin-left:2px}
.stat-label{font-size:13px;color:var(--text-secondary);margin-top:16px;line-height:1.7}

/* ===== CASE LIST（case: 事例カード） ===== */
.case-list{display:flex;flex-direction:column;gap:16px}
.case-study{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:28px 32px;display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;
}
.case-study-side{border-right:1px solid var(--border-light);padding-right:24px}
.case-study-cat{font-size:11px;font-weight:700;letter-spacing:0.12em;color:var(--brand-deep);background:var(--brand-light);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:10px}
.case-study-client{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.5}
.case-study-main{min-width:0}
.case-study-title{font-size:clamp(18px,2vw,24px);font-weight:700;margin-bottom:14px;line-height:1.4}
.case-study-row{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-light);font-size:13.5px}
.case-study-row:last-child{border-bottom:none}
.case-study-row dt{font-weight:700;color:var(--brand-deep)}
.case-study-row dd{color:var(--text-secondary);line-height:1.7}
.case-study-btn-wrap{margin-top:16px;display:flex;justify-content:flex-end}
.case-study-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 28px;border:1.5px solid var(--text-primary);
  font-size:12px;font-weight:700;letter-spacing:0.1em;
  color:var(--text-primary);text-decoration:none;background:transparent;
  transition:background .25s,color .25s,border-color .25s,gap .25s;
}
.case-study-btn::after{content:'→';font-size:15px;transition:transform .25s}
.case-study-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand);gap:16px}
.case-study-btn:hover::after{transform:translateX(4px)}
.case-study-btn.disabled{
  border-color:var(--border);color:var(--text-muted);
  cursor:default;pointer-events:none;
}
.case-study-btn.disabled::after{content:''}

/* ===== CLIENT LOGOS（case: 取引先） ===== */
.logos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;background:var(--border);border:1px solid var(--border)}
.logo-cell{background:#fff;padding:28px 20px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:700;color:var(--text-secondary);min-height:88px;letter-spacing:0.02em}

/* ===== CATEGORY TABS（contents） ===== */
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.cat-tab{
  font-size:13px;font-weight:700;letter-spacing:0.04em;
  padding:10px 20px;border-radius:100px;border:1px solid var(--border);
  color:var(--text-secondary);background:#fff;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.cat-tab:hover{border-color:var(--brand);color:var(--brand-deep)}
.cat-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.case-empty{padding:64px 0;text-align:center;font-size:14px;color:var(--text-muted)}

/* ===== CONTENTS LIST（contents: 記事カード） ===== */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
/* column.html の記事一覧はPC=3カラム（.col-gridと同じ）、タブレット/スマホで2カラム×5行に切り替える（@media側で指定） */
.col-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border-light);border-radius:8px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.col-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 12px 32px rgba(0,0,0,0.06)}
.col-thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--brand-light),var(--bg-dark));display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:11px;letter-spacing:0.08em}
.col-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.col-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.col-badge{font-size:10px;font-weight:700;letter-spacing:0.1em;color:#fff;background:var(--brand-dark);padding:3px 10px;border-radius:100px;align-self:flex-start;margin-bottom:14px}
.col-card-title{font-size:15px;font-weight:700;line-height:1.6;margin-bottom:14px;flex:1;transition:color .2s}
.col-card:hover .col-card-title{color:var(--brand-deep)}
.col-card-date{font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:0.04em}

/* ===== PAGINATION（contents / news） ===== */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:64px}
.pagination a,.pagination span{
  min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;border:1px solid var(--border);border-radius:4px;
  color:var(--text-secondary);text-decoration:none;transition:background .2s,color .2s,border-color .2s;
}
.pagination a:hover{border-color:var(--brand);color:var(--brand-deep)}
.pagination .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination .disabled{opacity:0.4;pointer-events:none}

/* ===== NEWS LIST（news: 単独ページ用 — トップのnews-*を流用しつつ余白調整） ===== */
.newslist{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.newslist .news-item{
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:90px 104px 1fr;
  column-gap:16px;align-items:baseline;
}
.newslist .news-cat{justify-self:start}
.newslist .news-item:first-child{border-top:none}

/* ===== CONTACT FORM（contact） ===== */
.form-group{margin-bottom:28px}
.form-label{display:block;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:10px;letter-spacing:0.02em}
.form-required{font-size:10px;font-weight:700;color:#fff;background:var(--accent);padding:2px 8px;border-radius:3px;margin-left:8px;letter-spacing:0.06em}
.form-optional{font-size:10px;font-weight:700;color:var(--text-muted);background:var(--bg-dark);padding:2px 8px;border-radius:3px;margin-left:8px;letter-spacing:0.06em}
.form-input,.form-textarea,.form-select{
  box-sizing:border-box;
  width:100%;font-family:inherit;font-size:14px;color:var(--text-primary);
  padding:14px 16px;border:1px solid var(--border);border-radius:4px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}
.form-textarea{resize:vertical;min-height:160px;line-height:1.8}
.form-agree{display:flex;align-items:flex-start;gap:12px;margin:8px 0 32px;font-size:13px;color:var(--text-secondary);line-height:1.7}
.form-agree input{margin-top:3px;flex-shrink:0}
.form-agree a{color:var(--brand-deep);text-decoration:underline}
.form-submit{
  display:block;width:fit-content;margin:0 auto;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  padding:18px 64px;font-size:15px;font-weight:700;letter-spacing:0.06em;border-radius:4px;
  font-family:inherit;transition:background .2s,transform .15s;
}
.form-submit:hover{background:var(--accent-dark);transform:translateY(-2px)}

/* MW WP Form専用（mockupには対応する静的HTMLが無いためtheme側のみに追加。
   確認画面(戻る+送信)ボタンの並び、バリデーションエラー表示） */
.form-actions{display:flex;gap:16px;justify-content:center;align-items:center}
.form-actions .form-submit{margin:0}
.form-back{
  display:block;width:fit-content;
  background:transparent;color:var(--text-primary);border:1.5px solid var(--border);cursor:pointer;
  padding:18px 40px;font-size:15px;font-weight:700;letter-spacing:0.06em;border-radius:4px;
  font-family:inherit;transition:background .2s,border-color .2s;
}
.form-back:hover{background:var(--bg-dark);border-color:var(--text-muted)}
.mw_wp_form .error{color:#dc2626;font-size:13px;margin-top:6px;display:block}

/* ===== サンクスページ（お問い合わせ完了） ===== */
.thanks-section{padding:80px var(--side-pad);text-align:center}
.thanks-inner{max-width:800px;margin:0 auto}
.thanks-inner p{margin-bottom:20px;line-height:2;font-size:14px;color:var(--text-secondary)}
.thanks-actions{margin-top:48px}

/* ===== FAQページ（/faq/） ===== */
.faq-section{padding:80px var(--side-pad)}
.faq-inner{max-width:900px;margin:0 auto}
.faq-cat-section + .faq-cat-section{margin-top:64px}
.faq-cat-title{
  font-size:clamp(20px,2.2vw,26px);font-weight:900;line-height:1.4;
  color:var(--text-primary);margin:0 0 28px;
  padding-left:16px;border-left:4px solid var(--brand);
}
.faq-list{display:flex;flex-direction:column;gap:32px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:8px;padding:32px 36px}
.faq-question{font-size:18px;font-weight:700;color:var(--text-primary);display:flex;gap:16px;align-items:flex-start;margin:0 0 20px 0;line-height:1.6}
.faq-answer{display:flex;gap:16px;align-items:flex-start}
.faq-answer-body{flex:1;line-height:1.9;color:var(--text-secondary);font-size:15px}
.faq-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;font-size:15px;flex-shrink:0}
.faq-mark-a{background:var(--accent)}
@media(max-width:768px){
  .faq-section{padding:48px var(--side-pad)}
  .faq-item{padding:24px}
  .faq-question{font-size:16px}
  .faq-answer-body{font-size:14px}
}

/* --- Phase3 コンポーネントのレスポンシブ --- */
@media(max-width:1024px){
  .secw{padding:64px var(--side-pad)}
  .secw-2col{grid-template-columns:1fr}
  .secw-meta{position:static}
  .secw-body{padding-left:0;padding-top:32px}
  .biz-grid{grid-template-columns:repeat(2,1fr)}
  .col-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .secw{padding:64px var(--side-pad)}
  .mission{padding:80px var(--side-pad)}
  .stat{padding:32px 16px}
  .case-study{grid-template-columns:1fr;gap:16px;padding:24px 20px}
  .case-study-side{border-right:none;border-bottom:1px solid var(--border-light);padding-right:0;padding-bottom:16px}
  .case-study-row{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .col-grid{grid-template-columns:1fr}
  .col-grid.col-grid-list{grid-template-columns:repeat(2,1fr);gap:16px}
  .col-card-body{padding:16px}
  .col-badge{font-size:10px;padding:3px 8px;white-space:nowrap;margin-bottom:10px}
  .col-card-title{font-size:14px;line-height:1.6;margin-top:0;margin-bottom:10px}
  .col-card-date{font-size:11px}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .col-grid{grid-template-columns:1fr}
  /* column.html記事一覧は480pxでも2カラム×5行を維持 */

  /* about: 事業カードを縦積み1列+横型カード（番号セル+内容セル）に変更 */
  .biz-grid{grid-template-columns:1fr;gap:16px}
  .biz-card{
    display:grid;grid-template-columns:56px 1fr;
    column-gap:16px;row-gap:6px;
    align-items:start;padding:20px;
  }
  .biz-card-num{
    grid-column:1;grid-row:1 / span 3;
    align-self:center;text-align:center;
    font-size:40px;line-height:1;margin-bottom:0;
  }
  .biz-card-title{grid-column:2;grid-row:1;font-size:15px;margin-bottom:0}
  .biz-card-desc{grid-column:2;grid-row:2;font-size:12px;line-height:1.6;margin-bottom:0}
  .biz-card-link{grid-column:2;grid-row:3}
}