/* At-Land 制作事例 パターン②（成果レポート型）— 数字を主役に */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

.al-case{
  --ink:#0B0B0B;--ink-2:#3A3A38;--ink-3:#6B6B66;--line:#E6E6E2;--bg:#F7F7F5;
  --blue:#2B6CFF;--orange:#FF6A1F;--green:#1FB26B;--purple:#7A4DFF;
  --font-en:'Inter','Zen Kaku Gothic New',sans-serif;
  --font-jp:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:#fff;color:var(--ink);font-family:var(--font-jp);
  -webkit-font-smoothing:antialiased;
}
.al-case *,.al-case *::before,.al-case *::after{box-sizing:border-box}
/* 余白のリセット。:where() で詳細度を 0 にして、下の個別指定（margin-top 等）に必ず負けるようにする。
   🔴 親の work-redesign.css に .al-work p,.al-work ul{margin:0}（詳細度0,1,1）があるため、
   p / ul に margin を指定する行はすべて「.al-case + クラス」（0,2,0）にして勝たせている。 */
.al-case :where(p,h1,h2,h3,h4,ul,li,dl,dd){margin:0}
.al-case :where(ul){padding:0;list-style:none}
.al-case__inner{max-width:1080px;margin:0 auto;padding:0 24px}

/* ============ HERO（黒・全幅・数字が主役） ============ */
.al-case__hero{background:var(--ink);color:#fff;padding:96px 0 0}
.al-case .al-case__eyebrow{
  font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.34em;
  color:#8A8A84;margin-bottom:22px;
}
.al-case__title{
  font-weight:900;font-size:clamp(26px,3.3vw,44px);line-height:1.42;letter-spacing:.01em;
  text-wrap:pretty;max-width:26em;
}
.al-case .al-case__meta{
  display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:44px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.16);
}
.al-case__meta li{font-size:14px;color:#D6D6D2;line-height:1.7}
.al-case__meta li span{
  display:block;font-family:var(--font-en);font-weight:700;font-size:11px;
  letter-spacing:.18em;color:#7C7C76;margin-bottom:4px;
}

/* KPI */
.al-case__kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:56px;border-top:1px solid rgba(255,255,255,.16);
}
.al-case__kpis[data-count="1"]{grid-template-columns:1fr}
.al-case__kpis[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.al-kpi{padding:40px 32px 52px;border-right:1px solid rgba(255,255,255,.16)}
.al-kpi:first-child{padding-left:0}
.al-kpi:last-child{border-right:0}
.al-case .al-kpi__label{font-size:13px;letter-spacing:.06em;color:#9A9A94;margin-bottom:14px}
.al-kpi__value{
  font-family:var(--font-en);font-weight:900;font-size:clamp(46px,5.4vw,76px);
  line-height:1;letter-spacing:-.02em;
}
.al-kpi__pre{
  font-family:var(--font-jp);font-weight:700;font-size:.32em;letter-spacing:.02em;
  margin-right:.08em;vertical-align:.28em;
}
.al-kpi__unit{
  font-family:var(--font-jp);font-weight:900;font-size:.4em;letter-spacing:.02em;
  margin-left:.1em;
}
.al-case .al-kpi__note{margin-top:16px;font-size:12.5px;line-height:1.7;color:#8A8A84}
.al-kpi--orange .al-kpi__value{color:var(--orange)}
.al-kpi--blue   .al-kpi__value{color:#5E90FF}
.al-kpi--green  .al-kpi__value{color:#33C486}
.al-kpi--purple .al-kpi__value{color:#9D7CFF}

/* ============ セクション共通 ============ */
.al-case__sec{padding:96px 0}
.al-case__sec + .al-case__sec{padding-top:0}
.al-case__sec-head{margin-bottom:40px}
.al-case__sec-no{
  font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.24em;
  color:#A8A8A2;display:block;margin-bottom:12px;
}
.al-case__sec-title{font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:.03em;line-height:1.5}

/* ============ 背景 ＋ 課題 ============ */
.al-case__ground{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.al-case__ground.is-single{grid-template-columns:1fr}
.al-case__lead{font-size:15.5px;line-height:2.1;color:var(--ink-2);text-wrap:pretty}
.al-issues{counter-reset:iss}
.al-issues li{
  counter-increment:iss;position:relative;padding:22px 0 22px 52px;
  border-top:1px solid var(--line);font-size:15px;line-height:1.85;color:var(--ink);
}
.al-issues li:last-child{border-bottom:1px solid var(--line)}
.al-issues li::before{
  content:counter(iss,decimal-leading-zero);position:absolute;left:0;top:23px;
  font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--blue);
}

/* ============ 会話 ============ */
.al-case__talk{display:grid;gap:8px;margin-top:64px}
.al-talk{position:relative;padding:22px 0 22px 26px;border-left:2px solid var(--line);max-width:46em}
.al-talk--atland{margin-left:auto;border-left-color:var(--ink);background:var(--bg);padding-right:26px}
.al-case .al-talk__who{
  font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.18em;
  color:#8A8A84;margin-bottom:10px;
}
.al-talk--client .al-talk__who{color:var(--blue)}
.al-talk__main{font-size:17px;font-weight:500;line-height:1.85;text-wrap:pretty}
.al-talk__main em{font-style:normal;font-weight:900;box-shadow:inset 0 -.42em 0 rgba(43,108,255,.16)}
.al-case .al-talk__sub{margin-top:8px;font-size:14px;color:var(--ink-3)}
.al-talk--atland .al-talk__main{font-size:15px;font-weight:400;color:var(--ink-2)}

/* ============ 打ち手と結果 ============ */
.al-case .al-case__resultlead{
  font-size:15.5px;line-height:2;color:var(--ink-2);max-width:40em;margin-bottom:56px;text-wrap:pretty;
}
.al-result{
  display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line);
}
.al-result:last-of-type{border-bottom:1px solid var(--line)}
.al-result__num{
  font-family:var(--font-en);font-weight:900;line-height:1;letter-spacing:-.02em;
  font-size:clamp(46px,5.2vw,68px);
}
.al-result__num .p{font-family:var(--font-jp);font-weight:700;font-size:.32em;margin-right:.08em;vertical-align:.3em}
.al-result__num .u{font-family:var(--font-jp);font-size:.38em;margin-left:.1em}
.al-result--c1 .al-result__num{color:var(--orange)}
.al-result--c2 .al-result__num{color:var(--blue)}
.al-result--c3 .al-result__num{color:var(--green)}
.al-case .al-result__label{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.6}
.al-case .al-result__period{
  margin-top:8px;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-3);
}
/* 直下の p だけ（子孫まで効かせると BEFORE/AFTER・グラフの注記の文字サイズを上書きしてしまう） */
.al-result__body > p{font-size:15px;line-height:2;color:var(--ink-2);text-wrap:pretty}

/* before → after */
.al-ba{display:flex;align-items:center;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.al-ba__col{min-width:132px}
.al-case .al-ba__k{
  font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  color:#A8A8A2;margin-bottom:6px;
}
.al-ba__v{font-size:19px;font-weight:700;line-height:1.4}
.al-result--c1 .al-ba__col--after .al-ba__v{color:var(--orange)}
.al-result--c2 .al-ba__col--after .al-ba__v{color:var(--blue)}
.al-result--c3 .al-ba__col--after .al-ba__v{color:var(--green)}
.al-ba__arrow{font-family:var(--font-en);color:#C8C8C2;font-size:18px;line-height:1}

/* 折れ線グラフ（線1本だけ） */
.al-chart{margin-bottom:22px}
.al-chart svg{display:block;width:100%;height:132px}
.al-case .al-chart__cap{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--font-en);font-size:11px;letter-spacing:.06em;color:#A8A8A2;
}

/* ============ 継続サポート（POINT） ============ */
.al-support{
  background:var(--ink);color:#fff;border-radius:10px;padding:48px 48px 52px;
  display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;
}
.al-support__k{
  font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.2em;color:#8A8A84;
}
.al-case .al-support__title{margin-top:12px;font-size:18px;font-weight:700;line-height:1.7;text-wrap:pretty}
.al-case .al-support__strong{font-size:17px;font-weight:700;line-height:1.8;color:#fff;margin-bottom:14px;text-wrap:pretty}
.al-support__body{font-size:14.5px;line-height:2;color:#C6C6C0;text-wrap:pretty}

/* ============ 声 ============ */
.al-voices{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.al-voices.is-single{grid-template-columns:1fr}
.al-case .al-voice__k{
  font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:#A8A8A2;margin-bottom:16px;
}
.al-voice__t{
  padding-top:26px;border-top:2px solid var(--line);
  font-size:15px;line-height:2;color:var(--ink-2);text-wrap:pretty;
}
.al-voice--client .al-voice__k{color:var(--blue)}
.al-voice--client .al-voice__t{border-top-color:var(--blue)}
.al-voice--staff .al-voice__t{border-top-color:var(--ink)}

/* SWELL親テーマ自動出力のサイドバーを非表示 */
#sidebar.l-sidebar{display:none}

/* ============ レスポンシブ ============ */
@media (max-width:900px){
  .al-case__ground{grid-template-columns:1fr;gap:40px}
  .al-result{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .al-support{grid-template-columns:1fr;gap:24px;padding:36px 28px 40px}
  .al-voices{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .al-case__hero{padding-top:72px}
  .al-case__sec{padding:64px 0}
  .al-case__kpis,.al-case__kpis[data-count="2"]{grid-template-columns:1fr;margin-top:40px}
  .al-kpi{padding:28px 0 30px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .al-kpi:last-child{border-bottom:0;padding-bottom:44px}
  .al-case .al-case__meta{gap:16px 28px}
  .al-talk{max-width:none}
  .al-talk--atland{margin-left:0;padding-left:26px}
  /* BEFORE / AFTER が縦積みになるので、矢印も下向きにする */
  .al-ba{flex-direction:column;align-items:flex-start;gap:10px}
  .al-ba__arrow{transform:rotate(90deg)}
}