@charset "UTF-8";
/* ===================================
   ExcelAI LP - WordPress/SWELL対応CSS
   スコープ: main.lp-excelai
   =================================== */

/* リセット（スコープ内のみ） */
main.lp-excelai * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main.lp-excelai {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.6;
  color: #334155;
  background: #fff;
}

main.lp-excelai img {
  max-width: 100%;
  height: auto;
  display: block;
}

main.lp-excelai a {
  text-decoration: none;
  color: inherit;
}

/* 見出しの明示的リセット */
main.lp-excelai h1,
main.lp-excelai h2,
main.lp-excelai h3,
main.lp-excelai h4,
main.lp-excelai h5,
main.lp-excelai h6 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.3;
}

main.lp-excelai p {
  margin: 0;
  padding: 0;
}

main.lp-excelai ul,
main.lp-excelai ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

main.lp-excelai button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* ===================================
   共通要素
   =================================== */

/* コンテナ */
main.lp-excelai .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ボタン */
main.lp-excelai .btn-primary,
main.lp-excelai .btn-primary-large {
  display: inline-block;
  background: #1E3A8A;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
}

main.lp-excelai .btn-primary:hover,
main.lp-excelai .btn-primary-large:hover {
  background: #1E40AF;
}

main.lp-excelai .btn-primary-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

main.lp-excelai .btn-outline-large {
  display: inline-block;
  background: transparent;
  color: #1E3A8A;
  padding: 1rem 2rem;
  border: 2px solid #1E3A8A;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.3s;
}

main.lp-excelai .btn-outline-large:hover {
  background: #1E3A8A;
  color: #fff;
}

/* ===================================
   TOP BAR
   =================================== */

main.lp-excelai .top-bar {
  background: linear-gradient(to right, #FEF3C7, #FDE68A);
  border-bottom: 1px solid #FCD34D;
  padding: 0.75rem 0;
}

main.lp-excelai .top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

main.lp-excelai .top-bar-text {
  color: #78350F;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .top-bar-btn {
  display: inline-block;
  background: #D97706;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.3s;
}

main.lp-excelai .top-bar-btn:hover {
  background: #B45309;
}

/* ===================================
   HEADER
   =================================== */

main.lp-excelai .site-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  z-index: 50;
  padding: 1rem 0;
}

main.lp-excelai .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

main.lp-excelai .brand {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
}

main.lp-excelai .nav {
  display: none;
  gap: 1.5rem;
}

main.lp-excelai .nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4B5563;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}

main.lp-excelai .nav a:hover {
  color: #1E3A8A;
}

main.lp-excelai .header-cta {
  display: none;
}

main.lp-excelai .header-cta .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ===================================
   HERO
   =================================== */

main.lp-excelai .hero {
  padding: 4rem 0;
  background: linear-gradient(to bottom, #F9FAFB, #fff);
}

main.lp-excelai .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

main.lp-excelai .hero-label {
  font-size: 0.875rem;
  color: #1E3A8A;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

main.lp-excelai .hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .hero-description {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .hero-concept {
  font-size: 1rem;
  color: #334155;
  line-height: 1.75;
  font-weight: 500;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .hero-features {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

main.lp-excelai .hero-features li {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.75;
  margin: 0 0 0.5rem 0;
  padding-left: 1.25rem;
  position: relative;
}

main.lp-excelai .hero-features li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #1E3A8A;
}

main.lp-excelai .hero-note-example {
  font-size: 0.875rem;
  color: #6B7280;
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

main.lp-excelai .hero-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem 0;
}

main.lp-excelai .hero-note {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .hero-image img {
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* ===================================
   CURRENT STATE（V0寄せ）
   =================================== */

main.lp-excelai .current-state {
  padding: 5rem 0;
  background: #fff;
}

/* 見出しはV0に合わせて中央寄せ */
main.lp-excelai .current-state .section-label,
main.lp-excelai .current-state .section-title,
main.lp-excelai .current-state .section-intro,
main.lp-excelai .current-state .section-context,
main.lp-excelai .current-state .section-closing {
  text-align: center;
}

main.lp-excelai .current-state .section-label {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .current-state .section-title {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
  margin: 0 0 1.25rem 0;
}

main.lp-excelai .current-state .section-intro {
  font-size: 0.95rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .current-state .section-context {
  font-size: 0.85rem;
  color: #6B7280;
  line-height: 1.7;
  margin: 0 0 2.25rem 0;
}

/* 画像キャプションはV0には無いので非表示 */
main.lp-excelai .current-state .image-caption {
  display: none;
}

/* ===== ここが肝：コンテナ内を折り返しflexにして、上は100%・下は2カラムに ===== */
main.lp-excelai .current-state .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* 上部テキストは全幅 */
main.lp-excelai .current-state .section-label,
main.lp-excelai .current-state .section-title,
main.lp-excelai .current-state .section-intro,
main.lp-excelai .current-state .section-context,
main.lp-excelai .current-state .section-closing {
  width: 100%;
}

/* 画像（左枠） */
main.lp-excelai .current-state .current-state-image {
  width: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 1.25rem;
}

main.lp-excelai .current-state .current-state-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
  box-shadow: none; /* V0は影が控えめなので一旦OFF */
}

/* 右側（リスト枠） */
main.lp-excelai .current-state .problem-grid {
  width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* 区切り線で分けるのでgapは0 */
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 1.25rem 1.25rem;
}

/* “カード”をやめてリスト化 */
main.lp-excelai .current-state .problem-card {
  border: none;
  border-radius: 0;
  padding: 1rem 0;
  box-shadow: none;
  background: transparent;
}

main.lp-excelai .current-state .problem-card + .problem-card {
  border-top: 1px solid #E5E7EB; /* V0っぽい区切り */
}

/* 番号：小さい角丸スクエア */
main.lp-excelai .current-state .problem-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  background: #DBEAFE;
  color: #1E3A8A;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .current-state .problem-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.55;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .current-state .problem-text {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.7;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .current-state .problem-example {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  font-style: normal; /* V0はイタリック感が弱いので */
  margin: 0;
}

/* 下の締めの文 */
main.lp-excelai .current-state .section-closing {
  font-size: 0.95rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.8;
  margin: 2rem 0 0 0;
}

/* ===== PC幅：左画像／右リスト を“ひとつの枠”に見せる（境界線を結合） ===== */
@media (min-width: 1024px) {
  main.lp-excelai .current-state .current-state-image {
    flex: 0 0 42%;
    border-right: none;
    border-radius: 1rem 0 0 1rem;
    padding: 1.5rem;
  }

  main.lp-excelai .current-state .problem-grid {
    flex: 1 1 58%;
    border-left: none;
    border-radius: 0 1rem 1rem 0;
    padding: 1.5rem 1.75rem;
  }

  /* 画像とリストの高さを揃えやすくする */
  main.lp-excelai .current-state .current-state-image,
  main.lp-excelai .current-state .problem-grid {
    align-self: stretch;
  }
}

/* ===================================
   NEXT STEP
   =================================== */

main.lp-excelai .next-step {
  padding: 5rem 0;
  background: #fff;
}

main.lp-excelai .next-step-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .next-step-link {
  margin: 0;
}

main.lp-excelai .next-step-link a {
  font-size: 0.875rem;
  color: #1E3A8A;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* =========================
   WHY NOW - V0寄せ（full-bleed 方眼 / 見出し中央 / 2カラム / 比較表下段中央）
   色固定：DS #0f6cbd / リスキリング #00a692 / 生成AI #1a357d
   ========================= */
:root{
  --ds-blue: #0f6cbd;
  --reskill-green: #00a692;
  --genai-navy: #1a357d;
}

/* セクション背景を画面端まで（方眼も含めて伸ばす） */
.lp-excelai .why-now{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 72px 0 86px;
  background: #fff;
  overflow: hidden;
}

/* 方眼紙背景 */
.lp-excelai .why-now::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.28;
  pointer-events: none;
}

/* コンテンツは中央 */
.lp-excelai .why-now > .container{
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 見出しを中央に（V0と同じ） */
.lp-excelai .why-now-label{
  text-align: center;
  margin: 0 0 10px;
  letter-spacing: .08em;
}

.lp-excelai .why-now-title{
  text-align: center;
  margin: 0 0 38px;
}

/* 指定色固定（テキスト強調） */
.lp-excelai .why-now .ai-highlight{ color: var(--genai-navy); font-weight: 800; }
.lp-excelai .why-now .excel-highlight{ color: var(--reskill-green); font-weight: 800; }

/* 2カラム */
.lp-excelai .why-now-grid{
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 56px;
  align-items: start;
}

/* 本文（読みやすい行間） */
.lp-excelai .why-now-body p{
  margin: 0 0 14px;
  color: #334155;
  line-height: 1.9;
  font-size: 14px;
}

/* V0の“薄い枠の強調文” */
.lp-excelai .why-now-callout{
  margin: 14px 0 16px;
  padding: 14px 16px;
  background: rgba(15, 108, 189, 0.06);
  border: 1px solid rgba(15, 108, 189, 0.18);
  border-left: 4px solid var(--genai-navy);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

/* 右の画像カード（V0寄せ） */
.lp-excelai .why-now-image{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.lp-excelai .why-now-image img{
  width: 100%;
  height: auto;
  display: block;
}

.lp-excelai .why-now-image figcaption{
  display: none; /* V0はキャプションが目立たないので非表示（必要なら外す） */
}

/* 比較表：下段・中央（V0の見え方） */
.lp-excelai .why-now-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: min(760px, 100%);
  margin: 26px auto 0;
}

/* カード */
.lp-excelai .compare-card{
  border-radius: 14px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  background: rgba(255,255,255,0.9);
}

/* Nowカードだけ薄い青背景（V0寄せ） */
.lp-excelai .compare-card.now{
  background: rgba(15, 108, 189, 0.08);
  border-color: rgba(15, 108, 189, 0.22);
}

/* Before/Nowラベル */
.lp-excelai .compare-label{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}

.lp-excelai .compare-card.before .compare-label{
  color: var(--genai-navy);
  background: rgba(26, 53, 125, 0.08);
  border: 1px solid rgba(26, 53, 125, 0.18);
}

.lp-excelai .compare-card.now .compare-label{
  color: #fff;
  background: var(--genai-navy); /* V0の濃いバッジ感 */
  border: 1px solid rgba(26, 53, 125, 0.22);
}

.lp-excelai .compare-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.lp-excelai .compare-list{
  margin: 0;
  padding-left: 18px;
  color: #334155;
  line-height: 1.85;
  font-size: 14px;
}

/* 締めの文 */
.lp-excelai .why-now-closing{
  text-align: center;
  margin: 22px 0 0;
  color: #64748b;
  font-size: 12px;
}

/* レスポンシブ：縦積み + 比較表1列 */
@media (max-width: 1024px){
  .lp-excelai .why-now{
    padding: 56px 0 68px;
  }
  .lp-excelai .why-now-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .lp-excelai .why-now-compare{
    grid-template-columns: 1fr;
    width: min(520px, 100%);
    margin-top: 18px;
  }
}


/* INDUSTRY EXAMPLES Section - WordPress/SWELL対応版 */

main.lp-excelai .industry-examples {
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .industry-examples .industry-label {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  padding: 0;
  line-height: 1.2;
}

main.lp-excelai .industry-examples .industry-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  padding: 0;
}

main.lp-excelai .industry-examples .industry-intro {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 2.5rem 0;
  padding: 0;
}

/* Tabs */
main.lp-excelai .industry-examples .industry-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 2rem 0;
  padding: 0;
  flex-wrap: wrap;
}

main.lp-excelai .industry-examples .industry-tab {
  background: #fff;
  border: 2px solid #E5E7EB;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.3s;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .industry-examples .industry-tab:hover {
  border-color: #1E3A8A;
  color: #1E3A8A;
}

main.lp-excelai .industry-examples .industry-tab.active {
  background: #1E3A8A;
  border-color: #1E3A8A;
  color: #fff;
}

/* Carousel Container */
main.lp-excelai .industry-examples .industry-carousel {
  position: relative;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  margin: 0 0 1rem 0;
}

main.lp-excelai .industry-examples .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid #1E3A8A;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #1E3A8A;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
  line-height: 1;
  padding: 0;
  margin: 0;
}

main.lp-excelai .industry-examples .carousel-arrow:hover {
  background: #1E3A8A;
  color: #fff;
}

main.lp-excelai .industry-examples .carousel-prev {
  left: -1.5rem;
}

main.lp-excelai .industry-examples .carousel-next {
  right: -1.5rem;
}

main.lp-excelai .industry-examples .carousel-hint {
  font-size: 0.875rem;
  color: #6B7280;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Panel */
main.lp-excelai .industry-examples .industry-panel {
  display: none;
}

main.lp-excelai .industry-examples .industry-panel.active {
  display: block;
}

main.lp-excelai .industry-examples .panel-header {
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: center;
}

main.lp-excelai .industry-examples .panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .panel-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Panel Left */
main.lp-excelai .industry-examples .panel-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main.lp-excelai .industry-examples .panel-image {
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .panel-image img {
  width: 100%;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: block;
  margin: 0;
}

main.lp-excelai .industry-examples .voice-card {
  background: #F0F9FF;
  border: 1px solid #BFDBFE;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 0;
}

main.lp-excelai .industry-examples .voice-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1E3A8A;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  padding: 0;
  line-height: 1.2;
}

main.lp-excelai .industry-examples .voice-quote {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

main.lp-excelai .industry-examples .voice-author {
  font-size: 0.875rem;
  color: #6B7280;
  font-style: italic;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

main.lp-excelai .industry-examples .data-used {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 0;
}

main.lp-excelai .industry-examples .data-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400E;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  padding: 0;
  line-height: 1.2;
}

main.lp-excelai .industry-examples .data-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

main.lp-excelai .industry-examples .chip {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #78350F;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  line-height: 1.2;
  margin: 0;
}

/* Panel Right */
main.lp-excelai .industry-examples .panel-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main.lp-excelai .industry-examples .stage-block {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 0;
}

main.lp-excelai .industry-examples .before-block {
  border-left: 4px solid #CBD5E1;
}

main.lp-excelai .industry-examples .after-block {
  border-left: 4px solid #10B981;
}

main.lp-excelai .industry-examples .then-block {
  border-left: 4px solid #F59E0B;
  background: #FFFBEB;
  border-color: #FDE68A;
}

main.lp-excelai .industry-examples .stage-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  padding: 0;
  line-height: 1.2;
}

main.lp-excelai .industry-examples .stage-text {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .stage-detail {
  font-size: 0.8125rem;
  color: #6B7280;
  margin: 0.5rem 0 0 0;
  padding: 0;
  font-style: italic;
  line-height: 1.5;
}

main.lp-excelai .industry-examples .analysis-preview {
  margin: 1rem 0;
  padding: 0;
}

main.lp-excelai .industry-examples .preview-placeholder {
  background: #E5E7EB;
  border: 1px dashed #9CA3AF;
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .industry-examples .preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .decision-flow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0 0 0;
  padding: 0;
}

main.lp-excelai .industry-examples .decision-item {
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4B5563;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .industry-examples .decision-arrow {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F59E0B;
  line-height: 1;
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .decision-result {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #78350F;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .industry-examples .decision-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0 0;
  padding: 0;
}

main.lp-excelai .industry-examples .metric-item {
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4B5563;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .industry-examples .improvements {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 0;
}

main.lp-excelai .industry-examples .improvements-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.4;
}

main.lp-excelai .industry-examples .improvement-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem 0;
  padding: 0;
}

main.lp-excelai .industry-examples .improvement-item:last-child {
  margin-bottom: 0;
}

main.lp-excelai .industry-examples .improvement-num {
  width: 2rem;
  height: 2rem;
  background: #DBEAFE;
  color: #1E3A8A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
}

main.lp-excelai .industry-examples .improvement-heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem 0;
  padding: 0;
  line-height: 1.4;
}

main.lp-excelai .industry-examples .improvement-text {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Responsive */
@media (min-width: 768px) {
  main.lp-excelai .industry-examples .industry-title {
    font-size: 2.5rem;
  }

  main.lp-excelai .industry-examples .panel-content {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

@media (min-width: 1024px) {
  main.lp-excelai .industry-examples {
    padding: 6rem 0;
  }

  main.lp-excelai .industry-examples .industry-title {
    font-size: 2.75rem;
  }
}

/* ===================================
   USE CASE
   =================================== */

main.lp-excelai .usecase {
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .usecase-label {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .usecase-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .usecase-intro {
  max-width: 52rem;
  margin-bottom: 2rem;
}

main.lp-excelai .usecase-intro p {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .usecase-visual {
  margin: 2rem 0;
  text-align: center;
}


main.lp-excelai .usecase-image figcaption {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6B7280;
  margin: 0;
}

main.lp-excelai .usecase-note {
  font-size: 1rem;
  color: #334155;
  line-height: 1.75;
  margin: 2rem 0;
  text-align: center;
}

main.lp-excelai .moment-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 3rem 0 2rem;
  text-align: center;
}

main.lp-excelai .moment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

main.lp-excelai .moment-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .moment-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6B7280;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .moment-problem {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

main.lp-excelai .moment-solution {
  background: #F0F9FF;
  border: 1px solid #BFDBFE;
  border-radius: 0.75rem;
  padding: 1rem;
}

main.lp-excelai .moment-solution-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .moment-solution-text {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

main.lp-excelai .usecase-middle-visual {
  margin: 3rem 0;
  text-align: center;
}

main.lp-excelai .usecase-middle-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

main.lp-excelai .viewpoint-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
  margin: 3rem 0 1rem;
  text-align: center;
}

main.lp-excelai .viewpoint-sub {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #4B5563;
  line-height: 1.5;
  margin-top: 0.5rem;
}

main.lp-excelai .viewpoint-note {
  font-size: 0.875rem;
  color: #6B7280;
  line-height: 1.5;
  margin: 0 0 2rem 0;
  text-align: center;
}

main.lp-excelai .drawer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

main.lp-excelai .drawer-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .drawer-header {
  margin-bottom: 1rem;
}

main.lp-excelai .drawer-category {
  display: inline-block;
  background: #DBEAFE;
  color: #1E3A8A;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .drawer-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .drawer-method {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .drawer-description {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

main.lp-excelai .drawer-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

main.lp-excelai .example-chip {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #475569;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  margin: 0;
}

main.lp-excelai .usecase-closing {
  font-size: 1rem;
  color: #334155;
  line-height: 1.75;
  margin: 0 0 2rem 0;
  text-align: center;
}

main.lp-excelai .usecase-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1rem 0;
}

main.lp-excelai .usecase-note-cta {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}
/* ===================================
    AI POWERED
   =================================== */
/* =========================
   AI-POWERED section
========================= */
.lp-excelai .ai-powered{
  padding: 72px 0;
  background: #fff;
}

.lp-excelai .ai-powered-head{
  text-align: center;
  margin-bottom: 34px;
}

.lp-excelai .ai-powered-label{
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}

.lp-excelai .ai-powered-title{
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.lp-excelai .ai-powered-accent{
  color: #1f6fff;
}

.lp-excelai .ai-powered-lead{
  max-width: 820px;
  margin: 0 auto 26px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
}

.lp-excelai .ai-powered-hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
  text-align: left;
  max-width: 1040px;
  margin: 0 auto;
}

.lp-excelai .ai-powered-hero-text p{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(0,0,0,.78);
}

.lp-excelai .ai-powered-quote{
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid #1f6fff;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

.lp-excelai .ai-powered-hero-img{
  margin: 0;
}

.lp-excelai .ai-powered-hero-img img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  display: block;
}

/* 役割分担（2カード） */
.lp-excelai .ai-powered-split{
  margin: 36px auto 44px;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lp-excelai .split-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.lp-excelai .split-ai{
  background: #f4f8ff;
  border-color: rgba(31,111,255,.22);
}

.lp-excelai .split-title{
  margin: 0 0 4px;
  font-size: 16px;
}

.lp-excelai .split-sub{
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(0,0,0,.60);
}

.lp-excelai .split-ol{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lp-excelai .split-ol li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(0,0,0,.78);
}

.lp-excelai .split-num{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(0,0,0,.06);
}

.lp-excelai .split-ai .split-num{
  background: rgba(31,111,255,.14);
}

/* 左sticky / 右スクロール（画像3・4） */
.lp-excelai .ai-powered-stickyWrap{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
  align-items: start;
}

.lp-excelai .ai-powered-sticky{
  position: sticky;
  top: 96px; /* ← ヘッダー高さに合わせて調整 */
}

.lp-excelai .sticky-photo{
  margin: 0 0 12px;
}

.lp-excelai .sticky-photo img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.lp-excelai .sticky-body{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 16px 16px 14px;
}

.lp-excelai .sticky-kicker{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

.lp-excelai .sticky-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.45;
}

.lp-excelai .sticky-text{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0,0,0,.76);
}

.lp-excelai .sticky-box{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
  padding: 12px 12px 10px;
  margin: 10px 0;
}

.lp-excelai .sticky-box-title{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.lp-excelai .sticky-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.78);
  font-size: 13px;
  line-height: 1.8;
}

.lp-excelai .sticky-note{
  margin: 10px 0 12px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.lp-excelai .sticky-cta{
  margin-top: 8px;
}

/* 右側（8場面） */
.lp-excelai .ai-powered-scroll{
  padding-top: 8px;
}

.lp-excelai .use8-title{
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 900;
}

.lp-excelai .use8-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lp-excelai .use8-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.lp-excelai .use8-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lp-excelai .use8-kicker{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

.lp-excelai .use8-badge{
  font-size: 11px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(31,111,255,.12);
  color: rgba(31,111,255,.95);
  border: 1px solid rgba(31,111,255,.22);
  white-space: nowrap;
}

.lp-excelai .use8-badge.is-warn{
  background: rgba(255,153,0,.14);
  color: rgba(150,92,0,.95);
  border-color: rgba(255,153,0,.30);
}

.lp-excelai .use8-badge.is-attn{
  background: rgba(255,74,74,.10);
  color: rgba(170,0,0,.92);
  border-color: rgba(255,74,74,.26);
}

.lp-excelai .use8-badge.is-soft{
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.62);
  border-color: rgba(0,0,0,.08);
}

.lp-excelai .use8-head{
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.4;
}

.lp-excelai .use8-desc{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(0,0,0,.65);
}

.lp-excelai .use8-io{
  display: grid;
  gap: 8px;
}

.lp-excelai .io-block{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 10px 10px 9px;
}

.lp-excelai .io-label{
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.72);
}

.lp-excelai .io-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}

.lp-excelai .use8-cta{
  margin-top: 18px;
  text-align: center;
}

.lp-excelai .use8-cta-note{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* Responsive */
@media (max-width: 980px){
  .lp-excelai .ai-powered-title{ font-size: 32px; }
  .lp-excelai .ai-powered-hero{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .lp-excelai .ai-powered-split{
    grid-template-columns: 1fr;
  }
  .lp-excelai .ai-powered-stickyWrap{
    grid-template-columns: 1fr;
  }
  .lp-excelai .ai-powered-sticky{
    position: static; /* モバイルは自然流し */
  }
  .lp-excelai .use8-grid{
    grid-template-columns: 1fr;
  }
}


/* ===================================
   A DAY IN REAL WORK (1日の物語)
   =================================== */

main.lp-excelai .day-story {
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .day-story-label {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .day-story-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 1rem 0;
}

main.lp-excelai .day-story-intro {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 2.5rem 0;
}

main.lp-excelai .day-story-profile {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .profile-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

main.lp-excelai .profile-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

main.lp-excelai .profile-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6B7280;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0;
}

main.lp-excelai .profile-value {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .profile-concerns {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

main.lp-excelai .concerns-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400E;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .concerns-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

main.lp-excelai .concerns-list li {
  font-size: 0.875rem;
  color: #78350F;
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
  margin: 0;
}

main.lp-excelai .concerns-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #D97706;
}

main.lp-excelai .timeline-section {
  margin-bottom: 3rem;
}

main.lp-excelai .timeline-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  padding-left: 1rem;
  border-left: 4px solid #CBD5E1;
}

main.lp-excelai .timeline-heading.before {
  border-left-color: #CBD5E1;
}

main.lp-excelai .timeline-heading.after {
  border-left-color: #10B981;
}

main.lp-excelai .timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

main.lp-excelai .timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

main.lp-excelai .timeline-time {
  background: #DBEAFE;
  color: #1E3A8A;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  margin: 0;
}

main.lp-excelai .timeline-text {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  padding-top: 0.5rem;
  margin: 0;
}

main.lp-excelai .impact-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

main.lp-excelai .impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

main.lp-excelai .impact-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .impact-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .impact-text {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

main.lp-excelai .day-story-closing {
  font-size: 1rem;
  color: #334155;
  line-height: 1.75;
  margin: 0 0 2rem 0;
  text-align: center;
}

main.lp-excelai .day-story-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1rem 0;
}

main.lp-excelai .day-story-cta-note {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* ===================================
   SMALL WINS / REACTIONS
   =================================== */

main.lp-excelai .small-wins {
  padding: 5rem 0;
  background: #fff;
  text-align: center;
}

main.lp-excelai .small-wins-image {
  margin-bottom: 2.5rem;
}

main.lp-excelai .small-wins-image img {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

main.lp-excelai .small-wins-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 2.5rem 0;
}

main.lp-excelai .metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

main.lp-excelai .metric-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .metric-label {
  font-size: 0.875rem;
  color: #1E3A8A;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1.3;
  margin: 0;
}

main.lp-excelai .small-wins-note {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  max-width: 52rem;
  margin: 0 auto;
}

main.lp-excelai .reactions {
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .reactions-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 2.5rem 0;
}

main.lp-excelai .reactions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

main.lp-excelai .reaction-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #10B981;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 0;
}

main.lp-excelai .reaction-quote {
  font-size: 1rem;
  color: #111827;
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .reaction-author {
  font-size: 0.875rem;
  color: #6B7280;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

/* ===================================
   FREE SESSION (無料相談)
   =================================== */

main.lp-excelai .free-session {
  padding: 5rem 0;
  background: #fff;
}

main.lp-excelai .free-session-image {
  margin-bottom: 2.5rem;
  text-align: center;
}

main.lp-excelai .free-session-image img {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

main.lp-excelai .free-session-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

main.lp-excelai .free-session-intro {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 2.5rem 0;
  max-width: 52rem;
}

main.lp-excelai .free-session-subheading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

main.lp-excelai .free-session-list {
  list-style: none;
  counter-reset: session-counter;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 2rem 0;
  padding: 0;
}

main.lp-excelai .free-session-list li {
  counter-increment: session-counter;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  padding-left: 2rem;
  position: relative;
  margin: 0;
}

main.lp-excelai .free-session-list li::before {
  content: counter(session-counter);
  position: absolute;
  left: 0;
  background: #DBEAFE;
  color: #1E3A8A;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}

main.lp-excelai .free-session-checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

main.lp-excelai .check-item {
  font-size: 0.875rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

main.lp-excelai .free-session-external-link {
  margin-bottom: 2.5rem;
}

main.lp-excelai .free-session-external-link a {
  font-size: 0.875rem;
  color: #1E3A8A;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}

main.lp-excelai .free-box {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 2px solid #FCD34D;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

main.lp-excelai .free-box-label {
  font-size: 1rem;
  font-weight: 700;
  color: #92400E;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .free-box-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #78350F;
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .free-box-text {
  font-size: 1rem;
  color: #92400E;
  line-height: 1.6;
  margin: 0;
}

main.lp-excelai .session-details {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

main.lp-excelai .detail-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #E5E7EB;
}

main.lp-excelai .detail-item:last-child {
  border-bottom: none;
}

main.lp-excelai .detail-term {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  min-width: 5rem;
  margin: 0;
}

main.lp-excelai .detail-desc {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

main.lp-excelai .free-session-cta {
  text-align: center;
  margin-bottom: 1.5rem;
}

main.lp-excelai .free-session-cta-note {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  margin-top: 1rem;
}

main.lp-excelai .free-session-note {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.5;
  text-align: center;
  font-weight: 500;
  margin: 0;
}

/* ===================================
   FAQ
   =================================== */

main.lp-excelai .faq {
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .faq-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 2.5rem 0;
}

main.lp-excelai .faq-list {
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main.lp-excelai .faq-item {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .faq-question {
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}

main.lp-excelai .faq-question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1;
  transition: transform 0.3s;
}

main.lp-excelai .faq-item[open] .faq-question::after {
  content: "−";
}

main.lp-excelai .faq-answer {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.75;
}

main.lp-excelai .faq-answer p {
  margin: 0;
}

/* ===================================
   FINAL (最終CTA)
   =================================== */

main.lp-excelai .final {
  padding: 5rem 0;
  background: #fff;
  text-align: center;
}

main.lp-excelai .final-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .final-subtitle {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.5;
  margin: 0 0 2.5rem 0;
}

main.lp-excelai .final-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

main.lp-excelai .final-card {
  background: #F0F9FF;
  border: 1px solid #BFDBFE;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

main.lp-excelai .final-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .final-card-text {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

main.lp-excelai .final-cta {
  margin-bottom: 2.5rem;
}

main.lp-excelai .final-cta-note {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  margin-top: 1rem;
}

main.lp-excelai .final-testimonial {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
  border-left: 4px solid #10B981;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
  max-width: 52rem;
  margin: 0 auto;
}

main.lp-excelai .testimonial-quote {
  font-size: 1rem;
  color: #166534;
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
  font-style: italic;
  font-weight: 600;
}

main.lp-excelai .testimonial-author {
  font-size: 0.875rem;
  color: #15803D;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

/* ===================================
   FOOTER
   =================================== */

main.lp-excelai .site-footer {
  background: #111827;
  color: #D1D5DB;
  padding: 3rem 0 1.5rem;
}

main.lp-excelai .footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

main.lp-excelai .footer-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .footer-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #9CA3AF;
  margin: 0;
}

main.lp-excelai .footer-links-heading,
main.lp-excelai .footer-org-heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

main.lp-excelai .footer-links-list li {
  margin: 0;
}

main.lp-excelai .footer-links-list a {
  font-size: 0.875rem;
  color: #9CA3AF;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.3s;
}

main.lp-excelai .footer-links-list a:hover {
  color: #fff;
}

main.lp-excelai .footer-org-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}

main.lp-excelai .footer-address {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #9CA3AF;
  font-style: normal;
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .footer-cert {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #9CA3AF;
  margin: 0;
}

main.lp-excelai .footer-extra {
  padding: 1.5rem 0;
  border-top: 1px solid #374151;
  border-bottom: 1px solid #374151;
  margin-bottom: 1.5rem;
}

main.lp-excelai .footer-extra-link {
  margin: 0;
}

main.lp-excelai .footer-extra-link a {
  font-size: 0.875rem;
  color: #60A5FA;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}

main.lp-excelai .footer-bottom {
  text-align: center;
}

main.lp-excelai .footer-copyright {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (min-width: 768px) {
  main.lp-excelai .hero-grid {
    grid-template-columns: 1.2fr 1fr;
  }
  
  main.lp-excelai .hero-title {
    font-size: 2.5rem;
  }
  
  main.lp-excelai .hero-cta {
    flex-direction: row;
  }
  
  main.lp-excelai .nav {
    display: flex;
  }
  
  main.lp-excelai .header-cta {
    display: flex;
  }
  
  main.lp-excelai .section-title,
  main.lp-excelai .industry-title,
  main.lp-excelai .usecase-title,
  main.lp-excelai .ai-powered-title,
  main.lp-excelai .day-story-title,
  main.lp-excelai .small-wins-title,
  main.lp-excelai .reactions-title,
  main.lp-excelai .free-session-title,
  main.lp-excelai .faq-title,
  main.lp-excelai .final-title {
    font-size: 2.5rem;
  }
  
  main.lp-excelai .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .comparison-middle {
    padding: 0;
  }
  
  main.lp-excelai .ai-excel-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  
  main.lp-excelai .case-content {
    grid-template-columns: 1fr 1.5fr;
  }
  
  main.lp-excelai .next-step-cta {
    flex-direction: row;
    align-items: center;
  }
  
  main.lp-excelai .why-now-visual {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
  }
  
  main.lp-excelai .panel-content {
    grid-template-columns: 0.9fr 1.1fr;
  }
  
  main.lp-excelai .moment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .drawer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  main.lp-excelai .usecase-cta {
    flex-direction: row;
  }
  
  main.lp-excelai .ai-powered-stuck {
    grid-template-columns: repeat(2, 1fr);
  }
  
  main.lp-excelai .ai-powered-comparison {
    grid-template-columns: repeat(2, 1fr);
  }
  
  main.lp-excelai .mini-story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  main.lp-excelai .eight-scenes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  main.lp-excelai .profile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .impact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .day-story-cta {
    flex-direction: row;
  }
  
  main.lp-excelai .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .reactions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .final-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  main.lp-excelai .hero-title {
    font-size: 3rem;
  }
  
  main.lp-excelai .section-title,
  main.lp-excelai .industry-title,
  main.lp-excelai .usecase-title,
  main.lp-excelai .ai-powered-title,
  main.lp-excelai .day-story-title,
  main.lp-excelai .small-wins-title,
  main.lp-excelai .reactions-title,
  main.lp-excelai .free-session-title,
  main.lp-excelai .faq-title,
  main.lp-excelai .final-title {
    font-size: 2.75rem;
  }
  
  main.lp-excelai .drawer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  main.lp-excelai .eight-scenes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  main.lp-excelai .current-state,
  main.lp-excelai .outcome,
  main.lp-excelai .next-step,
  main.lp-excelai .why-now,
  main.lp-excelai .industry-examples,
  main.lp-excelai .usecase,
  main.lp-excelai .ai-powered,
  main.lp-excelai .day-story,
  main.lp-excelai .small-wins,
  main.lp-excelai .reactions,
  main.lp-excelai .free-session,
  main.lp-excelai .faq,
  main.lp-excelai .final {
    padding: 6rem 0;
  }
}

/* --- FIX: Hero構造が hero-grid ではなく container直下なので吸収 --- */
main.lp-excelai .hero .container{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px){
  main.lp-excelai .hero .container{
    grid-template-columns: 1.2fr 1fr;
  }
}

/* hero-content は現行HTMLに合わせて */
main.lp-excelai .hero-content{
  display: block;
}

/* =========================
   HERO - V0寄せ上書き
   ========================= */

/* ヒーロー全体の余白・2カラムの安定 */
main.lp-excelai .hero .container{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 767px){
  main.lp-excelai .hero .container{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

main.lp-excelai .hero{
  padding: 4.5rem 0;
  background: #fff; /* V0は白基調 */
}

/* AI-POWERED EXCEL：青系の小さめラベル */
main.lp-excelai .hero-label{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1E3A8A;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  margin-bottom: 1rem;
}

/* タイトル：太く、Excelだけアクセント */
main.lp-excelai .hero-title{
  font-size: 3rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin-bottom: 1.25rem;
}
@media (max-width: 1023px){
  main.lp-excelai .hero-title{ font-size: 2.4rem; }
}
@media (max-width: 767px){
  main.lp-excelai .hero-title{ font-size: 2rem; }
}
main.lp-excelai .hero-title .hero-accent{
  color: #0E9F6E; /* V0っぽいグリーン */
}

/* 本文の行間・色をV0寄せ */
main.lp-excelai .hero-description{
  color: #334155;
  line-height: 1.9;
  margin-bottom: 1rem;
}
main.lp-excelai .hero-concept{
  color: #475569;
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

/* 箇条書き：丸の大きさ・色（青）を調整 */
main.lp-excelai .hero-features{
  margin: 0 0 1rem 0;
}
main.lp-excelai .hero-features li{
  padding-left: 1.8rem;
  margin-bottom: .6rem;
  color: #0F172A;
  font-size: .95rem;
}
main.lp-excelai .hero-features li::before{
  content: "";
  width: .9rem;          /* 丸サイズ */
  height: .9rem;         /* 丸サイズ */
  border-radius: 9999px;
  position: absolute;
  left: 0;
  top: .35rem;
  background: #1E3A8A;   /* 丸色 */
  box-shadow: 0 0 0 3px #E0E7FF; /* 外側の淡いリング（V0ぽさ） */
}

/* ボタン：左は白アウトライン、右は濃紺 */
main.lp-excelai .hero-cta{
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  margin-top: 1.25rem;
}
@media (max-width: 767px){
  main.lp-excelai .hero-cta{ flex-direction: column; align-items: stretch; }
}

main.lp-excelai .btn-outline-large{
  border-color: #CBD5E1;
  color: #0F172A;
  background: #fff;
}
main.lp-excelai .btn-outline-large:hover{
  border-color: #1E3A8A;
  background: #EEF2FF;
  color: #1E3A8A;
}

main.lp-excelai .btn-primary-large{
  background: #1E3A8A;
}
main.lp-excelai .btn-primary-large:hover{
  background: #1D4ED8;
}

/* 画像カード：角丸・影を強めてV0寄せ */
main.lp-excelai .hero-image img{
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  background: #F8FAFC;
}

/* =========================
   CURRENT STATE / OUTCOME 崩れ止め + PCレイアウト
   ========================= */

/* 画像の基本（はみ出し防止） */
main.lp-excelai .current-state img,
main.lp-excelai .outcome img{
  display: block;
  max-width: 100%;
  height: auto;
}



/* 長文のはみ出し対策 */
main.lp-excelai .problem-title,
main.lp-excelai .problem-text,
main.lp-excelai .comparison-title,
main.lp-excelai .comparison-text,
main.lp-excelai .voice-text,
main.lp-excelai .stage-text{
  overflow-wrap: anywhere;
}



  /* Case：左（画像＋見出し） / 右（カード群） */
  main.lp-excelai .case-content{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2.5rem;
    align-items: start;
  }
}
/* ===================================
   OUTCOME（V0寄せ・統一版）※これだけ有効にする
   =================================== */

main.lp-excelai .outcome{
  padding: 5rem 0;
  background: #F9FAFB;
}

main.lp-excelai .outcome .comparison-intro,
main.lp-excelai .outcome .cases-intro{
  text-align: center;
}


/* before / after の箱は残す（display:contentsは禁止） */
main.lp-excelai .outcome .before-column,
main.lp-excelai .outcome .after-column{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* カード共通 */
main.lp-excelai .outcome .comparison-card{
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 中央：生成AI×Excel + 矢印（縦書き禁止） */
main.lp-excelai .outcome .comparison-middle{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

main.lp-excelai .outcome .ai-excel-label{
  writing-mode: horizontal-tb;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 2px solid #BFDBFE;
  background: #EFF6FF;
  color: #1E3A8A;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

main.lp-excelai .outcome .comparison-middle::after{
  content: "↓ ↓ ↓";
  letter-spacing: 6.2em;
  color: #94A3B8;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

/* PC：before 3列 / after 3列 */
@media (min-width: 960px){
  main.lp-excelai .outcome .before-column,
  main.lp-excelai .outcome .after-column{
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* 高さを揃えやすく */
  main.lp-excelai .outcome .comparison-card{
    height: 100%;
  }
}

/* Afterの色枠（青/黄/赤） */
main.lp-excelai .outcome .after-column .comparison-card{
  border-width: 2px;
}
main.lp-excelai .outcome .after-column .comparison-card:nth-child(1){ border-color:#2563EB; }
main.lp-excelai .outcome .after-column .comparison-card:nth-child(2){ border-color:#F59E0B; }
main.lp-excelai .outcome .after-column .comparison-card:nth-child(3){ border-color:#EF4444; }

/* ===================================
   OUTCOME 後半（ケース）テキストべた貼り解消
   =================================== */

/* ケース後半の本文に“段落余白”を戻す */
main.lp-excelai .outcome .case-block p{
  margin: 0 0 0.75rem 0;
  line-height: 1.75;
  color: #334155;
}

main.lp-excelai .outcome .case-block p:last-child{
  margin-bottom: 0;
}

/* 見出し周りの余白 */
main.lp-excelai .outcome .case-title{
  margin: 0 0 0.75rem 0;
}

main.lp-excelai .outcome .case-header{
  margin-bottom: 1.25rem;
}

/* リストが“ただのテキスト塊”にならないように（もし ul/li を使ってる場合） */
main.lp-excelai .outcome .case-block ul,
main.lp-excelai .outcome .case-block ol{
  margin: 0.75rem 0 0.75rem 1.25rem; /* インデント復活 */
  padding: 0;
  list-style: disc;
}

main.lp-excelai .outcome .case-block li{
  margin: 0 0 0.5rem 0;
}

/* もし「✓」の改善リストを使ってるなら、余白を整える */
main.lp-excelai .outcome .improvement-list{
  margin-top: 0.5rem;
}

main.lp-excelai .outcome .voice-text,
main.lp-excelai .outcome .voice-quote{
  margin: 0 0 0.75rem 0;
}

/* 画像とテキストがくっつくのも防ぐ */
main.lp-excelai .outcome .case-image{
  margin-top: 0.5rem;
}

/* ===================================
   OUTCOME 後半：クラス無し本文の救済（ベタ貼り解消）
   =================================== */

/* outcome内の文章ブロックに余白を復活 */
main.lp-excelai .outcome p{
  margin: 0 0 0.9rem 0;
  line-height: 1.85;
  color: #334155;
}

/* 強制的に「小見出しっぽい行」を見出し扱いにしたい場合（h3等があるなら） */
main.lp-excelai .outcome h3,
main.lp-excelai .outcome h4{
  margin: 1.6rem 0 0.75rem 0;
  line-height: 1.35;
  color: #0F172A;
  font-weight: 800;
}

/* ul/olがリセットされてるので復活（これがベタ貼りの主犯になりがち） */
main.lp-excelai .outcome ul,
main.lp-excelai .outcome ol{
  margin: 0.75rem 0 1.1rem 1.25rem;
  padding: 0;
  list-style: disc;
}

main.lp-excelai .outcome li{
  margin: 0 0 0.5rem 0;
  line-height: 1.8;
}

/* “— 担当者”みたいな署名行があるなら、少し引く */
main.lp-excelai .outcome p em,
main.lp-excelai .outcome p i{
  color: #64748B;
}

main.lp-excelai .outcome p:has(> em),
main.lp-excelai .outcome p:has(> i){
  margin-top: 0.5rem;
}

/* outcome内で、テキストが横に伸びすぎるのも読みづらいので制限 */
main.lp-excelai .outcome .container{
  max-width: 1120px;
}


/* =========================
   OUTCOME - CASE BLOCK
========================= */

.case-block {
  margin: 80px 0;
}

.case-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.case-left {
  position: relative;
}

.case-badge {
  display: inline-block;
  background: #0f172a;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  margin-top: 12px;
}

.voice-card {
  background: #f8fafc;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.improvement-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.flow-diagram {
  background: #f1f5f9;
  padding: 20px;
  border-radius: 12px;
}

/* =========================================================
   [SECTION: OUTCOME] Case 1/2/3 を横3枚カードにする（確定版）
   - case-block が container 直下にいない問題に対応
   ========================================================= */

/* OUTCOME: cases をPCで3列 / SPで1列 */
main.lp-excelai #outcome .cases-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}

@media (min-width: 981px){
  main.lp-excelai #outcome .cases-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
}

/* case-content は“縦積み”にする（2カラム解除） */
main.lp-excelai #outcome .cases-grid .case-content{
  display: block;
  padding: 18px;
}
main.lp-excelai #outcome .cases-grid .case-right{
  margin-top: 14px;
}

/* カード見た目（任意：すでにあれば不要） */
main.lp-excelai #outcome .cases-grid > .case-block{
  margin: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

main.lp-excelai #outcome{
  padding: 6rem 0;
}


main.lp-excelai #outcome .cases-grid{
  margin-top: 3rem;
}

@media (min-width: 981px){
  main.lp-excelai #outcome .cases-grid{
    align-items: stretch;
  }

  main.lp-excelai #outcome .case-block{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  main.lp-excelai #outcome .case-content{
    flex: 1;
  }
}

@media (min-width: 981px){
  main.lp-excelai #outcome .cases-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
}

@media (max-width: 980px){
  main.lp-excelai #outcome .cases-grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   OUTCOME - V0仕上げ（最終）
   ※このブロックはCSSの一番最後に置く
========================= */

main.lp-excelai #outcome{
  --label-blue:#1d3682;
  --c1:#2664eb;
  --c2:#f59f0a;
  --c3:#f04343;
}

/* 1) タイトル・文章：中央寄せ＆文字色 */
main.lp-excelai #outcome .section-label,
main.lp-excelai #outcome .section-title,
main.lp-excelai #outcome .section-intro,
main.lp-excelai #outcome .section-context,
main.lp-excelai #outcome .comparison-intro,
main.lp-excelai #outcome .cases-intro{
  text-align:center;
}

main.lp-excelai #outcome .section-title{
  color:#0f172a;
}
main.lp-excelai #outcome .section-intro,
main.lp-excelai #outcome .section-context{
  color:#475569;
  max-width:72ch;
  margin-left:auto;
  margin-right:auto;
}

/* 2) Before/After：上3枚 → ラベル → 下3枚（V0構造） */
main.lp-excelai #outcome .comparison-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  align-items:start;
}

main.lp-excelai #outcome .before-column,
main.lp-excelai #outcome .after-column{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

/* PC: before/after を横3枚 */
@media (min-width: 960px){
  main.lp-excelai #outcome .before-column,
  main.lp-excelai #outcome .after-column{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* カード共通 */
main.lp-excelai #outcome .comparison-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

main.lp-excelai #outcome .comparison-label{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  margin:0 0 6px;
}

main.lp-excelai #outcome .comparison-title{
  font-size:14px;
  font-weight:900;
  color:#0f172a;
  margin:0 0 6px;
}

main.lp-excelai #outcome .comparison-text{
  margin:0;
  color:#475569;
  line-height:1.7;
}

/* 3) 生成AI×Excel：#1d3682の横長丸＋白抜き、矢印も揃える */
main.lp-excelai #outcome .comparison-middle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:6px 0;
}

main.lp-excelai #outcome .ai-excel-label{
  background: var(--label-blue);
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:10px 20px;
  font-weight:900;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}

main.lp-excelai #outcome .comparison-middle::after{
  content:"↓  ↓  ↓";
  color: var(--label-blue);
  font-weight:900;
  letter-spacing: 10px;
  opacity:.55;
}

/* 4) Afterカード枠：指定の3色に統一（V0の青/橙/赤） */
main.lp-excelai #outcome .after-column .comparison-card{
  border-width:2px;
}
main.lp-excelai #outcome .after-column .comparison-card:nth-child(1){ border-color:var(--c1); }
main.lp-excelai #outcome .after-column .comparison-card:nth-child(2){ border-color:var(--c2); }
main.lp-excelai #outcome .after-column .comparison-card:nth-child(3){ border-color:var(--c3); }

/* =========================
   CASE 3枚：V0みたいに横並びカード
========================= */
main.lp-excelai #outcome .cases-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  margin-top:24px;
}

@media (min-width: 960px){
  main.lp-excelai #outcome .cases-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items:stretch;
  }
}

/* Caseごとにアクセント色を変数で持つ */
main.lp-excelai #outcome .cases-grid > .case-block{ --accent: var(--c1); }
main.lp-excelai #outcome .cases-grid > .case-block:nth-child(2){ --accent: var(--c2); }
main.lp-excelai #outcome .cases-grid > .case-block:nth-child(3){ --accent: var(--c3); }

/* Caseカード外枠（色統一） */
main.lp-excelai #outcome .cases-grid > .case-block{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  margin:0;
}

/* Caseヘッダー（上の①〜） */
main.lp-excelai #outcome .case-header{
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  margin:0;
}

main.lp-excelai #outcome .case-number{
  margin:0;
  font-weight:900;
  color:#0f172a;
}

main.lp-excelai #outcome .case-content{
  display:block;           /* 2カラムをやめて縦積み（V0寄せ） */
  padding:16px;
}

main.lp-excelai #outcome .case-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

/* 写真上の文字（バッジ）→アクセント色で統一 */
main.lp-excelai #outcome .case-badge{
  background: var(--accent);
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
}

/* 画像 */
main.lp-excelai #outcome .case-image{
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e5e7eb;
}
main.lp-excelai #outcome .case-image img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16/10;
  object-fit:cover;
}

/* 現場の声：左の縦線をアクセント色に */
main.lp-excelai #outcome .voice-card{
  background:#fff7ed;                 /* V0っぽい薄いベージュ */
  border:1px solid #fed7aa;
  border-left:6px solid var(--accent); /* ←これ */
  border-radius:12px;
  padding:14px;
  margin:14px 0 12px;
}
main.lp-excelai #outcome .voice-label{
  font-size:12px;
  font-weight:900;
  color:#9a3412;
  margin:0 0 8px;
}
main.lp-excelai #outcome .voice-text{
  margin:0 0 8px;
  color:#334155;
  line-height:1.75;
  font-size:13px;
}
main.lp-excelai #outcome .voice-author{
  margin:0;
  color:#64748b;
  font-size:12px;
}

/* 改善ポイント：チェックをアクセント色に */
main.lp-excelai #outcome .improvement-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  margin:0 0 12px;
}
main.lp-excelai #outcome .improvement-label{
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  margin:0 0 10px;
}
main.lp-excelai #outcome .improvement-list{
  list-style:none;
  padding:0;
  margin:0;
}
main.lp-excelai #outcome .improvement-list li{
  position:relative;
  padding-left:20px;
  margin:8px 0;
  color:#334155;
  line-height:1.65;
  font-size:13px;
}
main.lp-excelai #outcome .improvement-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);     /* ←これ */
  font-weight:900;
}

/* 図（フロー）の枠や強調色もアクセントで統一 */
main.lp-excelai #outcome .flow-diagram{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
}
main.lp-excelai #outcome .flow-steps .flow-step,
main.lp-excelai #outcome .flow-steps .flow-result,
main.lp-excelai #outcome .flow-table table{
  border-color: var(--accent);
}
main.lp-excelai #outcome .flow-table{
  overflow-x:auto;
}
main.lp-excelai #outcome .flow-table th,
main.lp-excelai #outcome .flow-table td{
  border:1px solid rgba(0,0,0,.12);
}

/* 下部UIの土台（すでに入ってるなら微調整） */
main.lp-excelai #outcome .case-block .case-bottom{
  padding: 12px;
  background: #f3f4f6;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* 図を“白いパネル”として整える */
main.lp-excelai #outcome .case-block .case-bottom .flow-diagram{
  margin-top: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}

/* 図の並び（前年比 → 理由？ → 要因まで見える） */
main.lp-excelai #outcome .case-block .case-bottom .flow-steps{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

/* 箱 */
main.lp-excelai #outcome .case-block .case-bottom .flow-step,
main.lp-excelai #outcome .case-block .case-bottom .flow-result{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

/* 矢印 */
main.lp-excelai #outcome .case-block .case-bottom .flow-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: rgba(0,0,0,.45);
  font-weight: 900;
}

/* “要因まで見える”はアクセント寄せ */
main.lp-excelai #outcome .case-block .case-bottom .flow-result{
  background: var(--accent-soft);
  border-color: rgba(0,0,0,.08);
}

/* SPは折り返し */
@media (max-width: 599px){
  main.lp-excelai #outcome .case-block .case-bottom .flow-steps{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #outcome .case-block .case-bottom .flow-arrow{
    display:none;
  }
}


/* =========================
   OUTCOME タイトル色指定
========================= */

main.lp-excelai #outcome .title-ai{
  color:#1e3b8a;
  font-weight:900;
}

main.lp-excelai #outcome .title-excel{
  color:#217044;
  font-weight:900;
}

/* OUTCOME / cases-grid cards */
main.lp-excelai #outcome .cases-grid .case-block{
  --accent: #2b6cff;          /* default: blue */
  --accent-soft: rgba(43,108,255,.12);

  border: 2px solid var(--accent);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* 2枚目=橙 / 3枚目=赤 */
main.lp-excelai #outcome .cases-grid .case-block:nth-child(2){
  --accent: #ff9a21;
  --accent-soft: rgba(255,154,33,.14);
}
main.lp-excelai #outcome .cases-grid .case-block:nth-child(3){
  --accent: #ff4b4b;
  --accent-soft: rgba(255,75,75,.12);
}

/* 下部に入る“区切り線” */
main.lp-excelai #outcome .cases-grid .case-block .case-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 16px 0;
}


/* V0風：カード下部の操作エリア（土台） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom{
  margin-top: 14px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
}

/* 入力欄2つ */
main.lp-excelai #outcome .case-bottom .case-inputs{
  display: flex;
  gap: 10px;
}
main.lp-excelai #outcome .case-bottom .case-input{
  flex: 1;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
}

/* ボタン（アウトライン） */
main.lp-excelai #outcome .case-bottom .case-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  margin-top: 10px;
}

main.lp-excelai #outcome .case-bottom .case-options{
  display: grid;
  gap: 8px;
}

/* 1行=選択肢 */
main.lp-excelai #outcome .case-bottom .case-option{
  position: relative;
  padding: 10px 12px 10px 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-size: 13px;
}

/* 左の●（ラジオ風） */
main.lp-excelai #outcome .case-bottom .case-option::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  background: #fff;
}

/* “選択中”をV0みたいに強調 */
main.lp-excelai #outcome .case-bottom .case-option.is-active{
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}
main.lp-excelai #outcome .case-bottom .case-option.is-active::before{
  border-color: var(--accent);
  background: var(--accent);
}

main.lp-excelai #outcome .case-bottom table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

main.lp-excelai #outcome .case-bottom th,
main.lp-excelai #outcome .case-bottom td{
  border: 1px solid rgba(0,0,0,.18);
  padding: 6px 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

main.lp-excelai #outcome .case-bottom .is-highlight{
  border: 2px solid var(--accent) !important;
  background: var(--accent-soft);
  font-weight: 700;
}

/* OUTCOME / cases-grid cards base */
main.lp-excelai #outcome .cases-grid .case-block{
  --accent: #2b6cff; /* Case1: blue */
  --accent-soft: rgba(43,108,255,.12);

  border: 2px solid var(--accent);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* 下部：V0っぽい薄グレー領域 */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom{
  margin-top: 16px;
  padding: 12px 12px 14px;
  background: #f3f4f6;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* 下部タイトル（V0の説明行） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-title{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

/* 入力2つ + ボタンの並び */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-ui{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}

/* 入力っぽい枠 */
main.lp-excelai #outcome .cases-grid .case-block .case-field{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
}

main.lp-excelai #outcome .cases-grid .case-block .case-field-label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

main.lp-excelai #outcome .cases-grid .case-block .case-field-input{
  font-size: 12px;
  color: rgba(0,0,0,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ボタン（アウトライン、アクセント色） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-btn:hover{
  opacity: .9;
}

@media (max-width: 599px){
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom-ui{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom-btn{
    width: 100%;
  }
}

/* Case1：タイトル風（黄色で囲った行の役割） */
main.lp-excelai #outcome .case-block .case-bottom-title{
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);

  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.78);

  /* 左のアクセント（カード色） */
  border-left: 6px solid var(--accent);
}

/* 下部全体：余白をV0寄せ */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom{
  margin-top: 16px;
  padding: 12px;
  background: #f3f4f6;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* タイトル（黄色部を見出し化） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-title{
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-left: 6px solid var(--accent);

  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
}

/* 図：白いパネル＋余白（V0の“図の周りの余白”） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-diagram{
  margin: 0 0 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}

/* 並び：3ボックス＋矢印をきれいに */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-steps{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

/* ボックス */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-step,
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-result{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-result{
  background: var(--accent-soft);
  border-color: rgba(0,0,0,.08);
}

/* 矢印 */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: rgba(0,0,0,.45);
  font-weight: 900;
}

/* 下部UI（期間/比較/ボタン）との間隔を整える */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-ui{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}

/* SPは縦積み（崩れ防止） */
@media (max-width: 599px){
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-steps{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-arrow{
    display:none;
  }
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom-ui{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom-btn{
    width: 100%;
  }
}

/* V0寄せ：Case下部を“シンプル図”に */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom{
  margin-top: 16px;
  padding: 12px;
  background: #f3f4f6;
  border-top: 1px solid rgba(0,0,0,.08);
}

main.lp-excelai #outcome .cases-grid .case-block .case-bottom-title{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
}

/* 図パネル */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-diagram{
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}

/* 2ボックス + 矢印 */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-steps{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-step{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-arrow{
  width: 18px;
  text-align: center;
  color: rgba(0,0,0,.45);
  font-weight: 900;
}

/* “要因まで見える”ボタン（V0の小ボタン） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom .flow-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* もしcase-bottom-uiを残してるなら非表示（V0寄せ） */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-ui{
  display: none;
}

/* 下部：白いデモパネル（Case1/2/3共通で使える） */
main.lp-excelai #outcome .cases-grid .case-block .demo-panel{
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}

/* Case2：選択肢リスト */
main.lp-excelai #outcome .cases-grid .case-block .demo-options{
  display: grid;
  gap: 8px;
}

main.lp-excelai #outcome .cases-grid .case-block .demo-option{
  display: flex;
  align-items: center;
  gap: 10px;

  height: 36px;
  padding: 0 12px;
  border-radius: 10px;

  background: #f8fafc;
  border: 1px solid rgba(0,0,0,.16);

  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.78);

  cursor: default;
}

main.lp-excelai #outcome .cases-grid .case-block .demo-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: rgba(0,0,0,.08);
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.70);
}

/* 選択中：アクセントで強調（V0っぽい） */
main.lp-excelai #outcome .cases-grid .case-block .demo-option.is-active{
  background: var(--accent-soft);
  border: 2px solid var(--accent);
}

main.lp-excelai #outcome .cases-grid .case-block .demo-option.is-active .demo-badge{
  background: var(--accent);
  color: #fff;
}

main.lp-excelai #outcome .cases-grid .case-block .demo-table table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

main.lp-excelai #outcome .cases-grid .case-block .demo-table th,
main.lp-excelai #outcome .cases-grid .case-block .demo-table td{
  border: 1px solid rgba(0,0,0,.16);
  padding: 8px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0,0,0,.78);
}

main.lp-excelai #outcome .cases-grid .case-block .demo-table th{
  background: #f8fafc;
  font-weight: 800;
}

/* ハイライトセル（V0の赤枠っぽい） */
main.lp-excelai #outcome .cases-grid .case-block .demo-table .is-highlight{
  background: var(--accent-soft);
  border: 2px solid var(--accent) !important;
  font-weight: 900;
}

/* Case下部タイトルの高さを統一 */
main.lp-excelai #outcome .cases-grid .case-block .case-bottom-title{
  display: flex;
  align-items: center;

  height: 40px;          /* ← 全カード共通の高さ */
  padding: 0 12px;       /* 上下paddingを消して高さ固定 */

  margin: 0 0 12px;      /* 下余白も統一 */
  line-height: 1.2;

  border-radius: 8px;
}

/* OUTCOME：下部ブロックの開始位置を見た目で揃える（崩れにくい版） */
@media (min-width: 960px){
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom{
    margin-top: 24px; /* ここはベース */
    position: relative;
  }

  /* 追加の“見た目スペーサー”を常に確保 */
  main.lp-excelai #outcome .cases-grid .case-block .case-bottom::before{
    content: "";
    display: block;
    height: 18px; /* ← ここを調整するだけで揃う */
  }
}

/* =========================
   CURRENT STATE（V0寄せ）
   ・写真と文章の配置
   ・タイトル中のExcelを #29a63e
   ・課題リストを「1つのボックス内の3行」風に
========================= */
main.lp-excelai #current-state{
  padding: 72px 0;
}

main.lp-excelai #current-state .section-label{
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.45);
  text-align: center;
  margin: 0 0 10px;
}

main.lp-excelai #current-state .section-title{
  text-align: center;
  font-size: 30px;
  line-height: 1.35;
  margin: 0 0 12px;
}

main.lp-excelai #current-state .excel-highlight{
  color: #29a63e;
  font-weight: 900;
}

main.lp-excelai #current-state .section-intro{
  text-align: center;
  color: rgba(0,0,0,.65);
  margin: 0 0 10px;
}

main.lp-excelai #current-state .section-context{
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: 13px;
  margin: 0 0 28px;
}

/* 画像（左）＋課題（右） */
main.lp-excelai #current-state .current-state-body{
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 28px;
  align-items: start;
}

main.lp-excelai #current-state .current-state-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

/* 右側：1つの囲みの中に3行（V0寄せ） */
main.lp-excelai #current-state .problem-grid{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
}

main.lp-excelai #current-state .problem-card{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 16px;
}

main.lp-excelai #current-state .problem-card + .problem-card{
  border-top: 1px solid rgba(0,0,0,.10);
}

main.lp-excelai #current-state .problem-number{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  background: rgba(0,0,0,.06);
}

main.lp-excelai #current-state .problem-title{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
}

main.lp-excelai #current-state .problem-text{
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(0,0,0,.60);
  line-height: 1.6;
}

main.lp-excelai #current-state .problem-example{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}

/* 締め */
main.lp-excelai #current-state .section-closing{
  text-align: center;
  margin: 24px 0 0;
  color: rgba(0,0,0,.60);
}

/* SP：縦積み */
@media (max-width: 899px){
  main.lp-excelai #current-state{
    padding: 56px 0;
  }

  main.lp-excelai #current-state .section-title{
    font-size: 24px;
  }

  main.lp-excelai #current-state .current-state-body{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* =========================
   NEXT STEP（V0寄せ）
   ・薄いグレー背景＋中央カード
   ・中央寄せ
   ・ボタン2つ横並び
========================= */
main.lp-excelai #next-step{
  padding: 80px 0;
  background: #f6f7f9;
}

main.lp-excelai #next-step .container{
  /* SWELLのcontainer幅を活かしつつ中央にカードを置く */
}

/* 中央カード化 */
main.lp-excelai #next-step .container{
  max-width: 980px;
}

main.lp-excelai #next-step .container::before{
  content: "";
  display: block;
}

/* カード本体（container内の要素をカードに見せる） */
main.lp-excelai #next-step .section-label,
main.lp-excelai #next-step .section-title,
main.lp-excelai #next-step .section-intro,
main.lp-excelai #next-step .next-step-cta,
main.lp-excelai #next-step .next-step-link{
  text-align: center;
}

/* “カード”の枠を container に持たせる */
main.lp-excelai #next-step .container{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 44px 28px 26px;
}

/* ラベルをピル化 */
main.lp-excelai #next-step .section-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef1f5;
  color: rgba(0,0,0,.55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0 auto 14px;
}

/* タイトル */
main.lp-excelai #next-step .section-title{
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
  color: rgba(0,0,0,.88);
}

/* 説明文 */
main.lp-excelai #next-step .section-intro{
  margin: 0 auto 22px;
  max-width: 620px;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  line-height: 1.75;
}

/* CTAボタン2つ */
main.lp-excelai #next-step .next-step-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

/* ボタン共通（高さと角丸を揃える） */
main.lp-excelai #next-step .next-step-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  min-width: 240px; /* V0っぽい横幅 */
}

/* 主要ボタン */
main.lp-excelai #next-step .btn-primary-large{
  background: #173b8f;
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

/* アウトラインボタン */
main.lp-excelai #next-step .btn-outline-large{
  background: #fff;
  color: rgba(0,0,0,.78);
  border: 1px solid rgba(0,0,0,.22);
}

/* 下のリンク：区切り線＋小さめ */
main.lp-excelai #next-step .next-step-link{
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.10);
  max-width: 640px;
  font-size: 13px;
}

main.lp-excelai #next-step .next-step-link a{
  color: #2b6cff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SP */
@media (max-width: 599px){
  main.lp-excelai #next-step{
    padding: 56px 0;
  }
  main.lp-excelai #next-step .container{
    padding: 34px 18px 20px;
  }
  main.lp-excelai #next-step .section-title{
    font-size: 24px;
  }
  main.lp-excelai #next-step .next-step-cta a{
    width: 100%;
    min-width: 0;
  }
}

/* NEXT STEP：見出し周りを完全中央寄せ */
main.lp-excelai #next-step .container{
  text-align: center;
}

main.lp-excelai #next-step .section-label{
  margin: 0 auto 14px;
}

main.lp-excelai #next-step .section-title{
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   WHY NOW（V0寄せ）
   必須カラー:
   - 紺: #1e3b8a
   - Excel緑: #217346
   対応:
   ・文字/写真レイアウト
   ・タイトル文字色
   ・「データの量は増え…」の横線
   ・下パネル（Before/Now）
   ・背景グリッド
========================= */
main.lp-excelai #why-now{
  --ai-navy: #1e3b8a;
  --excel-green: #217346;

  position: relative;
  padding: 88px 0 78px;
  overflow: hidden;
  background: #fff;
}

/* 背景グリッド（V0の薄い方眼） */
main.lp-excelai #why-now::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .18;
  pointer-events: none;
}

/* ラベル */
main.lp-excelai #why-now .section-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(0,0,0,.50);
  margin: 0 0 10px;
}

/* タイトル：Excelのみ緑、他は紺 */
main.lp-excelai #why-now .section-title{
  margin: 0 0 22px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--ai-navy);
  letter-spacing: .02em;
}

/* タイトル内の "Excel" だけ緑にする（HTMLを増やさずに対応） */
main.lp-excelai #why-now .section-title{
  /* 文字列置換はできないので、強調したい場合は後でspan推奨 */
}
/* すでに本文などでExcel強調がある場合に備えて */
main.lp-excelai #why-now .excel-highlight{
  color: var(--excel-green);
  font-weight: 900;
}

/* 本文ブロック（左カラム） */
main.lp-excelai #why-now .why-now-body{
  max-width: 520px;
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.9;
}
main.lp-excelai #why-now .why-now-body p{
  margin: 0 0 12px;
}

/* 「データの量は増え…」の横線（2段落目に付与） */
main.lp-excelai #why-now .why-now-body p:nth-child(2){
  position: relative;
  padding-left: 12px;
  margin-top: 4px;
}
main.lp-excelai #why-now .why-now-body p:nth-child(2)::before{
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--excel-green);
}
main.lp-excelai #why-now .why-now-body p:nth-child(2)::after{
  content: "";
  position: absolute;
  left: 12px;
  right: -18px;   /* 横に伸びる“線”感 */
  top: 1.08em;
  height: 1px;
  background: rgba(33,115,70,.35);
}

/* 右側ビジュアル全体の配置（2カラム） */
main.lp-excelai #why-now .why-now-visual{
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 34px;
  align-items: start;
  margin-top: 18px;
}

/* 画像（右上）：向き/位置を整える */
main.lp-excelai #why-now .why-now-image{
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  position: relative;
}
main.lp-excelai #why-now .why-now-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  object-fit: cover;
  /* 写真の“向き”＝トリミング位置（必要なら調整） */
  object-position: 55% 35%;
}

/* キャプション（V0の青いタグっぽく） */
main.lp-excelai #why-now .why-now-image figcaption{
  position: absolute;
  right: 16px;
  bottom: 14px;
  background: var(--ai-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Before/Now パネル（下の2枚） */
main.lp-excelai #why-now .why-now-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-self: end;
}

/* カード共通 */
main.lp-excelai #why-now .compare-card{
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 14px 14px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
main.lp-excelai #why-now .compare-label{
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(0,0,0,.55);
}
main.lp-excelai #why-now .compare-title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}
main.lp-excelai #why-now .compare-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.70);
  font-size: 12.5px;
  line-height: 1.75;
}

/* Nowだけアクセント（V0の青/緑寄りのニュアンス） */
main.lp-excelai #why-now .compare-card.now{
  border-color: rgba(30,59,138,.35);
  background: rgba(30,59,138,.05);
}
main.lp-excelai #why-now .compare-card.now .compare-label{
  color: var(--ai-navy);
}

/* Beforeは控えめ */
main.lp-excelai #why-now .compare-card.before{
  background: #fff;
}

/* 締め */
main.lp-excelai #why-now .why-now-closing{
  margin: 18px 0 0;
  text-align: center;
  color: rgba(0,0,0,.60);
  font-size: 13px;
}

/* SP：縦積み（V0のスマホ版寄せ） */
@media (max-width: 899px){
  main.lp-excelai #why-now{
    padding: 64px 0 58px;
  }
  main.lp-excelai #why-now .section-title{
    font-size: 26px;
  }
  main.lp-excelai #why-now .why-now-visual{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  main.lp-excelai #why-now .why-now-body{
    max-width: none;
  }
  main.lp-excelai #why-now .why-now-image{
    justify-self: center;
    max-width: 640px;
  }
  main.lp-excelai #why-now .why-now-compare{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #why-now .why-now-body p:nth-child(2)::after{
    right: 0;
  }
}

object-position: 55% 35%;

/* =========================
   WHY NOW（V0寄せ：ここを修正）
   目的:
   - 紺: #1e3b8a / Excel緑: #217346 を固定
   - 背景のグリッドを出す
   - 文章(左) + 写真/パネル(右) を整列
   - 「データの量は増え…」の横線を綺麗に
========================= */

main.lp-excelai #why-now{
  --ai-navy: #1e3b8a;
  --excel-green: #217346;

  position: relative;
  padding: 88px 0 78px;
  background: #fff;
  overflow: hidden;
}

/* 背景グリッド（見えるように少し濃く＆細かく） */
main.lp-excelai #why-now::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .22;
  pointer-events: none;
}


/* タイトル：基本は黒、単語だけ色 */
main.lp-excelai #why-now .section-title{
  margin: 0 0 22px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(0,0,0,.88);
}

main.lp-excelai #why-now .ai-highlight{
  color: var(--ai-navy);
  font-weight: 900;
}
main.lp-excelai #why-now .excel-highlight{
  color: var(--excel-green);
  font-weight: 900;
}

main.lp-excelai #why-now .section-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(0,0,0,.50);
  margin: 0 0 10px;
}

/* =========================
   WHY NOW（最終：why-now-grid構造専用 / containerは触らない）
   指定色:
   - 紺: #1e3b8a
   - Excel緑: #217346
========================= */
main.lp-excelai #why-now{
  --ai-navy: #1e3b8a;
  --excel-green: #217346;

  position: relative;
  padding: 88px 0 78px;
  background: #fff;
  overflow: hidden;
}

/* 背景グリッド */
main.lp-excelai #why-now::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .22;
  pointer-events: none;
}

main.lp-excelai #why-now .container{
  position: relative;
  z-index: 1;
  max-width: 1060px;
}

/* 2カラムは why-now-grid で組む（ここが唯一のレイアウト定義） */
main.lp-excelai #why-now .why-now-grid{
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 34px;
  align-items: start;
}

/* 左：ラベル/タイトル */
main.lp-excelai #why-now .section-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(0,0,0,.50);
  margin: 0 0 10px;
}
main.lp-excelai #why-now .section-title{
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(0,0,0,.88);
}
main.lp-excelai #why-now .ai-highlight{ color: var(--ai-navy); font-weight: 900; }
main.lp-excelai #why-now .excel-highlight{ color: var(--excel-green); font-weight: 900; }

/* 左：本文 */
main.lp-excelai #why-now .why-now-body{
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.9;
}
main.lp-excelai #why-now .why-now-body p{ margin: 0 0 12px; }

/* 「データの量は増え…」点＋横線 */
main.lp-excelai #why-now .why-now-body p:nth-child(2){
  position: relative;
  padding-left: 14px;
}
main.lp-excelai #why-now .why-now-body p:nth-child(2)::before{
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--excel-green);
}
main.lp-excelai #why-now .why-now-body p:nth-child(2)::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  top: 1.08em;
  height: 1px;
  background: rgba(33,115,70,.35);
}

/* 右：画像＋比較 */
main.lp-excelai #why-now .why-now-side{
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
}

main.lp-excelai #why-now .why-now-image{
  margin: 0;
  position: relative;
}
main.lp-excelai #why-now .why-now-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  object-fit: cover;
  object-position: 55% 35%;
}
main.lp-excelai #why-now .why-now-image figcaption{
  position: absolute;
  right: 14px;
  bottom: 12px;
  background: var(--ai-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

/* Before/Now */
main.lp-excelai #why-now .why-now-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
main.lp-excelai #why-now .compare-card{
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 14px 14px 12px;
}
main.lp-excelai #why-now .compare-label{
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(0,0,0,.55);
}
main.lp-excelai #why-now .compare-title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}
main.lp-excelai #why-now .compare-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.70);
  font-size: 12.5px;
  line-height: 1.75;
}
main.lp-excelai #why-now .compare-card.now{
  border-color: rgba(30,59,138,.35);
  background: rgba(30,59,138,.05);
}
main.lp-excelai #why-now .compare-card.now .compare-label{
  color: var(--ai-navy);
}

/* 締め */
main.lp-excelai #why-now .why-now-closing{
  margin: 18px 0 0;
  text-align: center;
  color: rgba(0,0,0,.60);
  font-size: 13px;
}

/* SP */
@media (max-width: 899px){
  main.lp-excelai #why-now{ padding: 64px 0 58px; }
  main.lp-excelai #why-now .section-title{ font-size: 26px; }
  main.lp-excelai #why-now .why-now-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  main.lp-excelai #why-now .why-now-compare{
    grid-template-columns: 1fr;
  }
}

/* WHY NOW（仕上げ①：タイトルを中央） */
main.lp-excelai #why-now .section-title{
  text-align: center;
}

main.lp-excelai #why-now .section-label{
  text-align: center;
}

/* WHY NOW（仕上げ②：データ…の横線を消す） */
main.lp-excelai #why-now .why-now-body p:nth-child(2)::after{
  content: none;
}

main.lp-excelai #why-now .why-now-body p:nth-child(2)::before{
  content: none;
}
main.lp-excelai #why-now .why-now-body p:nth-child(2){
  padding-left: 0;
}

/* WHY NOW（仕上げ：タイトル/ラベルをセクション中央に） */
main.lp-excelai #why-now .why-now-text{
  display: contents; /* 子要素をグリッド直下扱いにして幅制限を外す */
}

main.lp-excelai #why-now .section-label,
main.lp-excelai #why-now .section-title{
  grid-column: 1 / -1;   /* 2カラム全幅 */
  text-align: center;
}

main.lp-excelai #why-now .why-now-body{
  grid-column: 1;        /* 本文は左カラムのまま */
}

/* ===================================
   INDUSTRY EXAMPLES（V0構造寄せ・差し替え版）
   - 色（パネル別）
     小売: #2664eb / 製造: #fa7516 / SaaS: 薄いピンク / 物流: #6b7280
=================================== */

main.lp-excelai #industry-examples{
  --retail: #2664eb;
  --manufacturing: #fa7516;
  --saas: #f9a8d4;      /* 薄いピンク（必要なら変更OK） */
  --logistics: #6b7280;

  --card-bg: #ffffff;
  --text: rgba(0,0,0,.86);
  --muted: rgba(0,0,0,.60);
  --line: rgba(0,0,0,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

main.lp-excelai #industry-examples.industry-examples{
  padding: 96px 0;
  background: #fff;
}

main.lp-excelai #industry-examples .container{
  max-width: 1080px;
}

/* 上のタイトル類：真ん中寄せ（V0） */
main.lp-excelai #industry-examples .industry-label{
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}

main.lp-excelai #industry-examples .industry-title{
  text-align: center;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 14px;
}

main.lp-excelai #industry-examples .industry-intro{
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0,0,0,.64);
  margin: 0 auto 26px;
  max-width: 820px;
}

/* Tabs：カード幅の帯 */
main.lp-excelai #industry-examples .industry-tabs-wrap{
  max-width: 980px;
  margin: 0 auto 18px;
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

main.lp-excelai #industry-examples .industry-tab{
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 12px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
  margin: 0;
}

main.lp-excelai #industry-examples .industry-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.7);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

main.lp-excelai #industry-examples .industry-tab.active{
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* カルーセル本体 */
main.lp-excelai #industry-examples .industry-carousel{
  position: relative;
  max-width: 980px;
  margin: 0 auto 12px;
  background: transparent;
  border: 0;
  padding: 0;
}

/* 左右矢印 */
main.lp-excelai #industry-examples .carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  color: rgba(0,0,0,.60);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  z-index: 5;
  cursor: pointer;
}

main.lp-excelai #industry-examples .carousel-prev{ left: -18px; }
main.lp-excelai #industry-examples .carousel-next{ right: -18px; }

main.lp-excelai #industry-examples .carousel-hint{
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  margin: 0;
}

/* パネル表示制御（JSでactive付与） */
main.lp-excelai #industry-examples .industry-panel{ display: none; }
main.lp-excelai #industry-examples .industry-panel.active{ display: block; }

/* カード（V0の白カード） */
main.lp-excelai #industry-examples .industry-card{
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}

/* ===== パネル別テーマ色 ===== */
main.lp-excelai #industry-examples .industry-panel{ --accent: var(--retail); } /* default */
main.lp-excelai #industry-examples .industry-panel.is-retail{ --accent: var(--retail); }
main.lp-excelai #industry-examples .industry-panel.is-manufacturing{ --accent: var(--manufacturing); }
main.lp-excelai #industry-examples .industry-panel.is-saas{ --accent: var(--saas); }
main.lp-excelai #industry-examples .industry-panel.is-logistics{ --accent: var(--logistics); }

/* ===== 1段目：写真 + コメント ===== */
main.lp-excelai #industry-examples .hero-row{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

main.lp-excelai #industry-examples .hero-image{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
}

main.lp-excelai #industry-examples .hero-image img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

main.lp-excelai #industry-examples .hero-image-tag{
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(0,0,0,.68);
}

main.lp-excelai #industry-examples .hero-voice{
  border-radius: 14px;
  background: rgba(38,100,235,.06);
  border: 1px solid rgba(38,100,235,.16);
  padding: 16px;
}

main.lp-excelai #industry-examples .industry-panel.is-manufacturing .hero-voice{
  background: rgba(250,117,22,.06);
  border-color: rgba(250,117,22,.18);
}
main.lp-excelai #industry-examples .industry-panel.is-saas .hero-voice{
  background: rgba(249,168,212,.16);
  border-color: rgba(249,168,212,.30);
}
main.lp-excelai #industry-examples .industry-panel.is-logistics .hero-voice{
  background: rgba(107,114,128,.10);
  border-color: rgba(107,114,128,.22);
}

main.lp-excelai #industry-examples .hero-voice-title{
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--accent);
}
main.lp-excelai #industry-examples .hero-voice-text{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(0,0,0,.74);
}
main.lp-excelai #industry-examples .hero-voice-author{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* ===== 2段目：使用データ ===== */
main.lp-excelai #industry-examples .data-used-row{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  display: flex;
  align-items: center;
  gap: 10px;
}

main.lp-excelai #industry-examples .data-used-label{
  font-size: 11px;
  font-weight: 900;
  color: rgba(0,0,0,.62);
  white-space: nowrap;
}

main.lp-excelai #industry-examples .data-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

main.lp-excelai #industry-examples .chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,.66);
}

/* ===== 3段目：BEFORE / AFTER / THEN ===== */
main.lp-excelai #industry-examples .stage-row{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

main.lp-excelai #industry-examples .stage-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 14px;
  min-height: 170px;
}

main.lp-excelai #industry-examples .stage-kicker{
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(0,0,0,.55);
}

main.lp-excelai #industry-examples .stage-title{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}

main.lp-excelai #industry-examples .stage-text{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(0,0,0,.66);
}

main.lp-excelai #industry-examples .stage-arrow{
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,0,0,.25);
  align-self: center;
}

main.lp-excelai #industry-examples .stage-after{
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

main.lp-excelai #industry-examples .stage-after-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

main.lp-excelai #industry-examples .stage-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  flex: 0 0 auto;
}
main.lp-excelai #industry-examples .stage-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* THENのミニ図 */
main.lp-excelai #industry-examples .then-mini{
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  padding: 10px;
}

main.lp-excelai #industry-examples .then-mini-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

main.lp-excelai #industry-examples .then-pill{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: rgba(0,0,0,.68);
}

main.lp-excelai #industry-examples .then-mini-arrow{
  color: rgba(0,0,0,.35);
  font-weight: 900;
}

main.lp-excelai #industry-examples .then-result{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(38,100,235,.12);
  border: 1px solid rgba(38,100,235,.24);
  color: rgba(38,100,235,.95);
}
main.lp-excelai #industry-examples .industry-panel.is-manufacturing .then-result{
  background: rgba(250,117,22,.14);
  border-color: rgba(250,117,22,.28);
  color: rgba(250,117,22,.95);
}
main.lp-excelai #industry-examples .industry-panel.is-saas .then-result{
  background: rgba(249,168,212,.22);
  border-color: rgba(249,168,212,.40);
  color: rgba(180,60,120,.95);
}
main.lp-excelai #industry-examples .industry-panel.is-logistics .then-result{
  background: rgba(107,114,128,.18);
  border-color: rgba(107,114,128,.32);
  color: rgba(107,114,128,.95);
}

main.lp-excelai #industry-examples .then-mini-note{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(0,0,0,.50);
}

/* ===== 4段目：改善 + 右下写真 ===== */
main.lp-excelai #industry-examples .improve-row{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: stretch;
}

main.lp-excelai #industry-examples .improve-box{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 14px;
}

main.lp-excelai #industry-examples .improve-title{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}

main.lp-excelai #industry-examples .improve-item{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}
main.lp-excelai #industry-examples .improve-item:first-of-type{
  border-top: 0;
  padding-top: 0;
}

main.lp-excelai #industry-examples .improve-num{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.68);
}

main.lp-excelai #industry-examples .industry-panel .improve-num{
  background: color-mix(in srgb, var(--accent) 18%, #fff);
  color: color-mix(in srgb, var(--accent) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, #fff);
}

main.lp-excelai #industry-examples .improve-head{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.78);
  margin-bottom: 4px;
}
main.lp-excelai #industry-examples .improve-text{
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(0,0,0,.64);
}

main.lp-excelai #industry-examples .improve-image{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
}
main.lp-excelai #industry-examples .improve-image img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* レスポンシブ */
@media (max-width: 1024px){
  main.lp-excelai #industry-examples .industry-tabs-wrap,
  main.lp-excelai #industry-examples .industry-carousel{
    max-width: 100%;
  }
  main.lp-excelai #industry-examples .carousel-prev{ left: -10px; }
  main.lp-excelai #industry-examples .carousel-next{ right: -10px; }
}

@media (max-width: 900px){
  main.lp-excelai #industry-examples.industry-examples{
    padding: 72px 0;
  }
  main.lp-excelai #industry-examples .industry-title{
    font-size: 28px;
  }
  main.lp-excelai #industry-examples .industry-tabs-wrap{
    grid-template-columns: repeat(2, 1fr);
  }
  main.lp-excelai #industry-examples .hero-row{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #industry-examples .hero-image img{
    height: 220px;
  }
  main.lp-excelai #industry-examples .stage-row{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #industry-examples .stage-arrow{
    display: none;
  }
  main.lp-excelai #industry-examples .improve-row{
    grid-template-columns: 1fr;
  }
  main.lp-excelai #industry-examples .improve-image img{
    min-height: 180px;
  }
}

/* ================================
   Industry Examples V0寄せ（差分パッチ）
   - 帯の色/ボタン色
   - AFTERパネルの見え方
   - 写真とコメントの間の仕切り線
   追記場所：Industry Examples のCSSの一番下
================================ */

/* まずは小売の基準色（必要ならJS側で active panel に合わせて切替可能） */
main.lp-excelai #industry-examples,
main.lp-excelai .industry-examples{
  --industry-accent: #2664eb; /* 小売 */
  --industry-accent-soft: rgba(38, 100, 235, .08);
  --industry-accent-border: rgba(38, 100, 235, .35);
  --ui-border: #E5E7EB;
  --ui-bg: #F3F4F6;
}

/* ====== 1) タブの帯（カード幅 / V0っぽい薄グレー） ====== */
main.lp-excelai .industry-examples .industry-tabs{
  max-width: 980px;                 /* カード幅に寄せる（必要なら微調整） */
  margin: 0 auto 22px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 6px;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* タブボタン（非アクティブ） */
main.lp-excelai .industry-examples .industry-tab{
  border: 0 !important;
  background: transparent !important;
  color: #6B7280;
  border-radius: 999px;
  padding: 10px 18px;
  line-height: 1;
}

/* アクティブ：業界色 */
main.lp-excelai .industry-examples .industry-tab.active{
  background: var(--industry-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(38,100,235,.25);
}

/* ====== 2) THEN内の小ボタン類（業界色で統一） ====== */
main.lp-excelai .industry-examples .decision-item,
main.lp-excelai .industry-examples .metric-item{
  border-color: rgba(0,0,0,.12);
}

main.lp-excelai .industry-examples .decision-result{
  background: var(--industry-accent-soft);
  border-color: var(--industry-accent-border);
  color: var(--industry-accent);
  font-weight: 800;
}

/* ====== 3) AFTERパネル（中央が主役になる見え方） ====== */
main.lp-excelai .industry-examples .stage-block.after-block{
  background: var(--industry-accent-soft);
  border: 1px solid var(--industry-accent-border);
  border-left: 4px solid var(--industry-accent);
}

main.lp-excelai .industry-examples .stage-block.after-block .stage-label{
  color: var(--industry-accent);
}

main.lp-excelai .industry-examples .stage-block.after-block .preview-placeholder{
  background: #fff;
  border: 1px dashed var(--industry-accent-border);
}

/* ====== 4) 1つ目の「写真＋コメント」間の仕切り線 ======
   ※クラス名が環境で違う可能性があるので、当たりやすい候補を並べています。
   もし効かなければ、該当ブロックのクラス名を教えてください（1行でOK）。 */
main.lp-excelai .industry-examples .hero,
main.lp-excelai .industry-examples .panel-hero,
main.lp-excelai .industry-examples .top-card,
main.lp-excelai .industry-examples .panel-top{
  overflow: hidden;
}

/* 左側（写真側）に右ボーダーを出す */
main.lp-excelai .industry-examples .hero .hero-media,
main.lp-excelai .industry-examples .panel-hero .panel-hero-media,
main.lp-excelai .industry-examples .top-card .top-media,
main.lp-excelai .industry-examples .panel-top .panel-top-media{
  border-right: 1px solid var(--ui-border);
}

/* 右側（コメント側）の余白を整える */
main.lp-excelai .industry-examples .hero .hero-comment,
main.lp-excelai .industry-examples .panel-hero .panel-hero-comment,
main.lp-excelai .industry-examples .top-card .top-comment,
main.lp-excelai .industry-examples .panel-top .panel-top-comment{
  padding-left: 18px;
}

/* 仕切り線が「縦」ではなく「横」で出てしまう場合の保険（いったん無効化） */
main.lp-excelai .industry-examples .voice-card{
  border-top: none;
}

/* ===================================
   USE CASE（V0寄せ・差し替え用）
   - Excel緑: #217346
   - 生成AI/紺: #1e3b8a（既存ボタン等の整合用）
=================================== */

main.lp-excelai #usecase.usecase{
  --ai-navy: #1e3b8a;
  --excel-green: #217346;

  padding: 88px 0 78px;
  background: #fff;
}

main.lp-excelai #usecase .container{
  max-width: 1060px;
}

/* ラベル/タイトル（V0：中央寄せ） */
main.lp-excelai #usecase .usecase-label{
  font-size: 12px;
  color: rgba(0,0,0,.50);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 10px;
  text-align: center;
}

main.lp-excelai #usecase .usecase-title{
  font-size: 34px;
  font-weight: 900;
  color: rgba(0,0,0,.88);
  line-height: 1.25;
  margin: 0 0 22px;
  text-align: center;
}

/* Excelだけ緑 */
main.lp-excelai #usecase .excel-highlight{
  color: var(--excel-green);
  font-weight: 900;
}

/* テキスト強調（V0っぽく太め+下線ニュアンス） */
main.lp-excelai #usecase .text-em{
  font-weight: 900;
  color: rgba(0,0,0,.86);
  box-shadow: inset 0 -0.35em 0 rgba(33,115,70,.16);
}

/* Hero：左テキスト / 右丸写真 */
main.lp-excelai #usecase .usecase-hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin: 0 0 30px;
}

main.lp-excelai #usecase .usecase-intro{
  max-width: 760px;
  margin: 0 auto;
}

main.lp-excelai #usecase .usecase-intro p{
  font-size: 14px;
  color: rgba(0,0,0,.70);
  line-height: 1.95;
  margin: 0 0 10px;
}

main.lp-excelai #usecase .usecase-visual{
  display: flex;
  justify-content: center;
}




main.lp-excelai #usecase .usecase-image figcaption{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1.5;
}

/* 中央サブタイトル */
main.lp-excelai #usecase .moment-heading{
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
  margin: 26px 0 18px;
}

/* 3つの横長カード（V0寄せ） */
main.lp-excelai #usecase .moment-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto 34px;
}

main.lp-excelai #usecase .moment-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 16px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

main.lp-excelai #usecase .moment-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(0,0,0,.45);
  text-transform: uppercase;
  margin: 0 0 6px;
}

main.lp-excelai #usecase .moment-problem{
  font-size: 16px;
  font-weight: 900;
  color: rgba(0,0,0,.86);
  margin: 0 0 10px;
}

main.lp-excelai #usecase .moment-solution{
  background: rgba(30,59,138,.06);
  border: 1px solid rgba(30,59,138,.18);
  border-radius: 12px;
  padding: 12px 12px;
}

main.lp-excelai #usecase .moment-solution-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ai-navy);
  text-transform: uppercase;
  margin: 0 0 6px;
}

main.lp-excelai #usecase .moment-solution-text{
  font-size: 13px;
  color: rgba(0,0,0,.72);
  line-height: 1.75;
  margin: 0;
}

/* 右の写真 */
main.lp-excelai #usecase .moment-thumb{
  margin: 0;
  width: 100%;
  max-width: 220px;
  justify-self: end;
}

main.lp-excelai #usecase .moment-thumb img{
  width: 100%;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  display: block;
}

/* 横長の写真 */
main.lp-excelai #usecase .usecase-middle-visual{
  margin: 30px auto 24px;
  max-width: 940px;
}

main.lp-excelai #usecase .usecase-middle-visual img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* 見出し（中央） */
main.lp-excelai #usecase .viewpoint-heading{
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,0,0,.86);
  line-height: 1.45;
  margin: 24px 0 10px;
}

main.lp-excelai #usecase .viewpoint-sub{
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
  margin-top: 8px;
}

main.lp-excelai #usecase .viewpoint-note{
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,.50);
  margin: 0 0 18px;
}

/* 6つの引き出し（V0寄せ） */
main.lp-excelai #usecase .drawer-grid{
  max-width: 940px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

main.lp-excelai #usecase .drawer-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  position: relative;
}

/* 上部：左◎ + 右上カテゴリ */
main.lp-excelai #usecase .drawer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

main.lp-excelai #usecase .drawer-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #1549e6;
  box-shadow: 0 0 0 4px rgba(21,73,230,.12);
  flex: 0 0 auto;
}

main.lp-excelai #usecase .drawer-category{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.08);
}

/* 指定のカテゴリ色 */
main.lp-excelai #usecase .drawer-category.cat-organize{
  background: #cafaf0;
  color: #13857b;
}
main.lp-excelai #usecase .drawer-category.cat-prioritize{
  background: #f3e8ff;
  color: #8810de;
}
main.lp-excelai #usecase .drawer-category.cat-decide{
  background: #e1e8f0;
  color: #485366;
}

main.lp-excelai #usecase .drawer-subtitle{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
  margin: 0 0 6px;
}

main.lp-excelai #usecase .drawer-method{
  font-size: 16px;
  font-weight: 900;
  color: rgba(0,0,0,.86);
  margin: 0 0 10px;
}

/* 中央アイコン風（V0の“アイコンみたいなもの”） */
main.lp-excelai #usecase .drawer-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(21,73,230,.08);
  border: 1px solid rgba(21,73,230,.16);
  color: #1549e6;
  font-weight: 900;
  margin: 6px 0 10px;
}

main.lp-excelai #usecase .drawer-description{
  font-size: 13px;
  color: rgba(0,0,0,.70);
  line-height: 1.8;
  margin: 0 0 12px;
}

main.lp-excelai #usecase .drawer-examples{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

main.lp-excelai #usecase .example-chip{
  background: #f6f7fb;
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.65);
  font-size: 11px;
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 999px;
  margin: 0;
}

/* クロージング & CTA（中央寄せ） */
main.lp-excelai #usecase .usecase-closing{
  text-align: center;
  font-size: 14px;
  color: rgba(0,0,0,.70);
  line-height: 1.9;
  margin: 18px auto 18px;
  max-width: 820px;
}

main.lp-excelai #usecase .usecase-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

main.lp-excelai #usecase .usecase-note-cta{
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,.50);
  margin: 0;
}

/* Desktop */
@media (min-width: 860px){
  main.lp-excelai #usecase .usecase-hero{
    grid-template-columns: 1fr 180px;
    gap: 26px;
    align-items: start;
    max-width: 940px;
    margin: 0 auto 30px;
  }
  main.lp-excelai #usecase .usecase-intro{
    max-width: none;
    margin: 0;
  }
  main.lp-excelai #usecase .usecase-visual{
    justify-content: flex-end;
  }

  main.lp-excelai #usecase .moment-card{
    grid-template-columns: 1fr 220px;
    align-items: center;
  }

  main.lp-excelai #usecase .drawer-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  main.lp-excelai #usecase .usecase-cta{
    flex-direction: row;
    justify-content: center;
  }
}


main.lp-excelai #usecase .usecase-image figcaption{
  padding: 8px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}


main.lp-excelai .usecase-image figcaption{
  padding: 10px 0 0 0;
  color: rgba(0,0,0,.55);
}

/* USECASE moments：強制上書き（効かない問題の対策） */
main.lp-excelai #usecase .moment-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

main.lp-excelai #usecase .moment-card{
  display: grid !important;
  grid-template-columns: 220px 1fr 220px !important;
  gap: 18px !important;
  align-items: center !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;
}

/* 旧：青背景を完全無効化（残ってても青くならない） */
main.lp-excelai #usecase .moment-solution{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 左 */
main.lp-excelai #usecase .moment-title{
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: rgba(0,0,0,.45) !important;
  margin: 0 0 6px 0 !important;
}
main.lp-excelai #usecase .moment-problem{
  font-size: 18px !important;
  font-weight: 900 !important;
  color: rgba(0,0,0,.86) !important;
  margin: 0 !important;
}

/* 中：効果 */
main.lp-excelai #usecase .moment-mid{
  position: relative !important;
  padding: 0 18px !important;
}
main.lp-excelai #usecase .moment-mid::before,
main.lp-excelai #usecase .moment-mid::after{
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 1px !important;
  background: rgba(0,0,0,.08) !important;
}
main.lp-excelai #usecase .moment-mid::before{ left: 0 !important; }
main.lp-excelai #usecase .moment-mid::after{ right: 0 !important; }

main.lp-excelai #usecase .moment-solution-label{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #1E3A8A !important;
  margin: 0 0 8px 0 !important;
}
main.lp-excelai #usecase .moment-solution-text{
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: rgba(0,0,0,.70) !important;
  margin: 0 !important;
}

/* 右：写真（長丸防止） */
main.lp-excelai #usecase .moment-right{
  display: flex !important;
  justify-content: flex-end !important;
}
main.lp-excelai #usecase .moment-thumb{
  width: 200px !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  display: block !important;
}

/* SP */
@media (max-width: 899px){
  main.lp-excelai #usecase .moment-card{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  main.lp-excelai #usecase .moment-mid{
    padding: 0 !important;
  }
  main.lp-excelai #usecase .moment-mid::before,
  main.lp-excelai #usecase .moment-mid::after{
    display: none !important;
  }
  main.lp-excelai #usecase .moment-right{
    justify-content: flex-start !important;
  }
  main.lp-excelai #usecase .moment-thumb{
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* --- Drawer icon (V0 like) --- */
main.lp-excelai .drawer-card{
  position: relative;
}

main.lp-excelai .drawer-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;               /* 角丸スクエア */
  background: #EFF6FF;               /* 薄い青 */
  border: 1px solid #BFDBFE;         /* 青の枠 */
  display: grid;
  place-items: center;
  margin: 10px 0 12px;               /* タイトルと本文の間 */
}

main.lp-excelai .drawer-icon svg{
  width: 22px;
  height: 22px;
  stroke: #1549E6;                   /* V0の青に寄せる */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* もし既存の「◎」系要素が残ってたら消す（クラス名が違うなら教えてください） */
main.lp-excelai .drawer-card .drawer-dot,
main.lp-excelai .drawer-card .drawer-bullet{
  display: none !important;
}

/* =========================
   USECASE patch (V0差分)
   ========================= */

/* 背景色（セクション最下部含め統一） */
main.lp-excelai #usecase.usecase{
  background: #f7f9fc !important;
}

/* Drawerカード：アイコンを中央へ（テキストは左のまま） */
main.lp-excelai #usecase .drawer-icon{
  margin: 10px auto 12px !important; /* ←左右autoで中央寄せ */
}

/* アイコン：青＋緑の“点”を追加してV0のニュアンス */
main.lp-excelai #usecase .drawer-icon{
  position: relative !important;
}

/* 青い点（左上寄り） */
main.lp-excelai #usecase .drawer-icon::before{
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  left: 8px !important;
  top: 8px !important;
  background: #1549e6 !important;
  box-shadow: 0 0 0 3px rgba(21,73,230,.14) !important;
}

/* 緑の点（右下寄り） */
main.lp-excelai #usecase .drawer-icon::after{
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  right: 8px !important;
  bottom: 8px !important;
  background: var(--excel-green) !important;
  box-shadow: 0 0 0 3px rgba(33,115,70,.14) !important;
}

/* ===== Drawer icon 整形（ぐちゃっと解消） ===== */
main.lp-excelai #usecase .drawer-icon{
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  margin: 12px auto 14px !important;

  display: grid !important;
  place-items: center !important;
  overflow: visible !important; /* 点を外側に逃がしても切れない */
}

/* SVGを少し大きく＆中央を安定させる */
main.lp-excelai #usecase .drawer-icon svg{
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

/* 点は小さくして“外側寄り”に配置（密集回避） */
main.lp-excelai #usecase .drawer-icon::before,
main.lp-excelai #usecase .drawer-icon::after{
  width: 6px !important;
  height: 6px !important;
}

/* 青点：左上に少し逃がす */
main.lp-excelai #usecase .drawer-icon::before{
  left: -2px !important;
  top: -2px !important;
  box-shadow: 0 0 0 3px rgba(21,73,230,.12) !important;
}

/* 緑点：右下に少し逃がす */
main.lp-excelai #usecase .drawer-icon::after{
  right: -2px !important;
  bottom: -2px !important;
  box-shadow: 0 0 0 3px rgba(33,115,70,.12) !important;
}

/* 点を消す（違和感の元） */
main.lp-excelai #usecase .drawer-icon::before,
main.lp-excelai #usecase .drawer-icon::after{
  display: none !important;
}

/* 通常は青 */
main.lp-excelai #usecase .drawer-icon svg{
  stroke: #1549e6;
}
main.lp-excelai #usecase .drawer-icon svg *{
  stroke: #1549e6;
}

/* アクセントだけ緑 */
main.lp-excelai #usecase .drawer-icon svg .svg-accent{
  stroke: var(--excel-green) !important;
}

/* ===== Drawer icon：点は使わない（違和感の元） ===== */
main.lp-excelai #usecase .drawer-icon::before,
main.lp-excelai #usecase .drawer-icon::after{
  display: none !important;
}

/* ===== SVG：基本は青、アクセントだけ緑 ===== */
main.lp-excelai #usecase .drawer-icon svg{
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

main.lp-excelai #usecase .drawer-icon svg *{
  stroke: #1549e6;                 /* 基本の青 */
}

main.lp-excelai #usecase .drawer-icon svg .svg-accent{
  stroke: var(--excel-green) !important; /* アクセントの緑 */
}

/* =========================
   HERO - V0寄せレイアウト
   ========================= */

/* 2カラムを安定させる */
.lp-excelai .hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* 左を少し広く、右をしっかり確保 */
  gap: 56px;
  align-items: center;
}

/* 右側：画像エリア */
.lp-excelai .hero-image {
  display: flex;
  justify-content: flex-end;
}

/* 画像カード（縦長・影・角丸） */
.lp-excelai .hero-image-card {
  position: relative;
  width: min(520px, 100%);
  height: 580px;                 /* ←ここが“縦長見え”の核 */
  border-radius: 22px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* 画像はカードを満たす */
.lp-excelai .hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 切り抜きで“写真が大きく見える” */
  object-position: 50% 25%;      /* 顔が上に来ることが多いので少し上寄せ */
  display: block;
}

/* 右上の小カード */
.lp-excelai .hero-image-float {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: 12px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  max-width: 220px;
}

.lp-excelai .hero-float-badge {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 4px;
}

.lp-excelai .hero-float-text {
  font-size: 12px;
  line-height: 1.4;
  color: #0f172a;
}

/* 左下タグ */
.lp-excelai .hero-image-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(20, 83, 45, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
}

/* タブレット以下：縦積み＋画像を横長に寄せる */
@media (max-width: 1024px) {
  .lp-excelai .hero .container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lp-excelai .hero-image {
    justify-content: center;
  }

  .lp-excelai .hero-image-card {
    width: min(720px, 100%);
    height: 360px;               /* モバイル寄せで横長に */
    border-radius: 18px;
  }
}

/* スマホ：さらに少し小さく */
@media (max-width: 480px) {
  .lp-excelai .hero-image-card {
    height: 300px;
  }
}

/* ===== Color Tokens（固定） ===== */
:root{
  --ds-blue: #0f6cbd;
  --reskill-green: #00a692;
  --genai-navy: #1a357d;
}

/* 左上ラベル（AI-POWERED EXCEL）を生成AI色に固定 */
.lp-excelai .hero-label{
  color: var(--genai-navy);
  border: 2px solid rgba(26, 53, 125, 0.25);
  background: rgba(26, 53, 125, 0.06);
  font-weight: 700;
}

/* 見出し横の縦線（データサイエンス色に固定したい場合） */
.lp-excelai .section-title::before{
  background: var(--ds-blue) !important;
}

/* =========================
   NEXT STEP 背景を画面端まで（full-bleed）
   ========================= */
.lp-excelai .next-step{
  /* 背景色は今使っている色に合わせて変更OK */
  background: #f6f8fb;

  /* 画面幅いっぱいにする（本文幅制限の外へ） */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* セクションの上下余白 */
  padding: 72px 0;
}

/* 中のコンテンツは従来通り中央寄せ */
.lp-excelai .next-step .container{
  max-width: 1120px; /* 既存に合わせてOK */
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================
   INDUSTRY: 変な左上の丸（装飾）を無効化
   ========================= */
.lp-excelai .industry-examples .industry-card::before,
.lp-excelai .industry-examples .industry-card::after,
.lp-excelai .industry-examples .hero-row::before,
.lp-excelai .industry-examples .hero-row::after,
.lp-excelai .industry-examples .hero-image::before,
.lp-excelai .industry-examples .hero-image::after,
.lp-excelai .industry-examples .industry-panel::before,
.lp-excelai .industry-examples .industry-panel::after{
  content: none !important;
}

/* もし画像の上に“白い円形背景”が div で置かれている場合の保険（よくある命名） */
.lp-excelai .industry-examples .bg-circle,
.lp-excelai .industry-examples .decor-circle,
.lp-excelai .industry-examples .circle,
.lp-excelai .industry-examples .orb{
  display: none !important;
}

/* =========================
   INDUSTRY: テーマカラーを変数で統一
   - ①②③の丸（.improve-num）
   - 太字（strong, .improve-head など）
   - AFTERカード（.stage-after）
   ========================= */
.lp-excelai .industry-examples .industry-panel{
  --industry-accent: #2664eb;        /* デフォルト（保険） */
  --industry-accent-soft: rgba(38, 100, 235, 0.10);
  --industry-accent-border: rgba(38, 100, 235, 0.28);
}

/* 各業界テーマ色（コメントの色に合わせ） */
.lp-excelai .industry-examples .industry-panel[data-theme="retail"],
.lp-excelai .industry-examples .industry-panel.is-retail{
  --industry-accent: #2664eb;
  --industry-accent-soft: rgba(38, 100, 235, 0.10);
  --industry-accent-border: rgba(38, 100, 235, 0.28);
}
.lp-excelai .industry-examples .industry-panel[data-theme="manufacturing"],
.lp-excelai .industry-examples .industry-panel.is-manufacturing{
  --industry-accent: #fa7516;
  --industry-accent-soft: rgba(250, 117, 22, 0.10);
  --industry-accent-border: rgba(250, 117, 22, 0.28);
}
/* SaaS（仮）— ここは好きな色に後で変更してください */
.lp-excelai .industry-examples .industry-panel[data-theme="saas"],
.lp-excelai .industry-examples .industry-panel.is-saas{
  --industry-accent: #ec4899;
  --industry-accent-soft: rgba(236, 72, 153, 0.10);
  --industry-accent-border: rgba(236, 72, 153, 0.28);
}
.lp-excelai .industry-examples .industry-panel[data-theme="logistics"],
.lp-excelai .industry-examples .industry-panel.is-logistics{
  --industry-accent: #6b7280;
  --industry-accent-soft: rgba(107, 114, 128, 0.12);
  --industry-accent-border: rgba(107, 114, 128, 0.28);
}

/* --------
   ①②③の丸（現場業務の改善の番号）
   HTML上 .improve-num がある前提（あなたのコードにあり）
   -------- */
.lp-excelai .industry-examples .improve-num{
  background: var(--industry-accent-soft);
  border: 1px solid var(--industry-accent-border);
  color: var(--industry-accent);
  font-weight: 800;
}

/* 「太字」：パネル内の強調（strongや見出し系） */
.lp-excelai .industry-examples .industry-panel strong{
  color: var(--industry-accent);
  font-weight: 800;
}

/* よく太字にしたい所：改善の小見出し等（存在するクラスだけ効く） */
.lp-excelai .industry-examples .improve-head,
.lp-excelai .industry-examples .stage-title{
  font-weight: 800;
}

/* --------
   AFTERカードの色（ステージのAFTER）
   -------- */
.lp-excelai .industry-examples .stage-card.stage-after{
  background: var(--industry-accent-soft);
  border: 1px solid var(--industry-accent-border);
}

/* AFTERの “AFTER” ラベルやタイトルも寄せる（ある場合だけ効く） */
.lp-excelai .industry-examples .stage-card.stage-after .stage-kicker{
  color: var(--industry-accent);
  font-weight: 900;
}

/* サムネ枠がある場合（.stage-thumb img） */
.lp-excelai .industry-examples .stage-card.stage-after .stage-thumb{
  border: 1px solid var(--industry-accent-border);
  background: rgba(255,255,255,0.7);
}

/* =========================================================
   INDUSTRY EXAMPLES : 強制上書き（SWELLに負けない版）
   目的：
   1) 変な左上の白い丸（装飾）を消す
   2) 業界色を
      - ①②③の丸（improve-num）
      - 強調（太字）
      - AFTERカード（stage-after）
      に反映する
   ========================================================= */

/* 1) “白い丸”の原因になりがちな疑似要素を徹底的に無効化 */
.industry-examples .industry-card::before,
.industry-examples .industry-card::after,
.industry-examples .industry-panel::before,
.industry-examples .industry-panel::after,
.industry-examples .hero-row::before,
.industry-examples .hero-row::after,
.industry-examples .hero-image::before,
.industry-examples .hero-image::after,
.industry-examples figure::before,
.industry-examples figure::after{
  content: none !important;
  display: none !important;
}

/* 念のため：背景やマスクで円を作ってるケースも潰す */
.industry-examples .hero-image{
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.industry-examples .hero-image img{
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* 2) テーマ色（CSS変数）をパネルごとに付与 */
.industry-examples .industry-panel{
  --industry-accent: #2664eb;
  --industry-soft: rgba(38, 100, 235, 0.10);
  --industry-border: rgba(38, 100, 235, 0.28);
}

/* 小売 */
.industry-examples .industry-panel[data-theme="retail"],
.industry-examples .industry-panel.is-retail{
  --industry-accent: #2664eb;
  --industry-soft: rgba(38, 100, 235, 0.10);
  --industry-border: rgba(38, 100, 235, 0.28);
}
/* 製造 */
.industry-examples .industry-panel[data-theme="manufacturing"],
.industry-examples .industry-panel.is-manufacturing{
  --industry-accent: #fa7516;
  --industry-soft: rgba(250, 117, 22, 0.10);
  --industry-border: rgba(250, 117, 22, 0.28);
}
/* SaaS（薄いピンク。色はここを好みで変更OK） */
.industry-examples .industry-panel[data-theme="saas"],
.industry-examples .industry-panel.is-saas{
  --industry-accent: #ec4899;
  --industry-soft: rgba(236, 72, 153, 0.10);
  --industry-border: rgba(236, 72, 153, 0.28);
}
/* 物流 */
.industry-examples .industry-panel[data-theme="logistics"],
.industry-examples .industry-panel.is-logistics{
  --industry-accent: #6b7280;
  --industry-soft: rgba(107, 114, 128, 0.12);
  --industry-border: rgba(107, 114, 128, 0.28);
}

/* 3) ①②③の丸（番号） */
.industry-examples .industry-panel .improve-num{
  background: var(--industry-soft) !important;
  border: 1px solid var(--industry-border) !important;
  color: var(--industry-accent) !important;
  font-weight: 800 !important;
}

/* 4) AFTERカードを業界色に */
.industry-examples .industry-panel .stage-card.stage-after{
  background: var(--industry-soft) !important;
  border: 1px solid var(--industry-border) !important;
}

/* AFTERラベルも寄せる */
.industry-examples .industry-panel .stage-card.stage-after .stage-kicker{
  color: var(--industry-accent) !important;
  font-weight: 900 !important;
}

/* 5) 「太字」：まずは strong を確実に業界色へ */
.industry-examples .industry-panel strong{
  color: var(--industry-accent) !important;
  font-weight: 800 !important;
}

/* 6) “太字っぽく見せたい”でよく狙う箇所（あなたのHTMLに存在しているものだけ当たる） */
.industry-examples .industry-panel .improve-head{
  color: var(--industry-accent) !important;
  font-weight: 800 !important;
}

/* =========================================================
   INDUSTRY：白い丸（装飾）を強制除去
   ねらい：hero-row内に“どこかの要素::before/after”で描かれた円を全部止める
   ========================================================= */

/* 1) hero-row配下の全ての疑似要素を無効化（Industry内だけ） */
.industry-examples .industry-card .hero-row *::before,
.industry-examples .industry-card .hero-row *::after{
  content: none !important;
  display: none !important;
}

/* 2) figure.hero-image の中に img/figcaption 以外が差し込まれていたら消す */
.industry-examples figure.hero-image > *:not(img):not(figcaption){
  display: none !important;
}

/* 3) 念のため：画像側にradial-gradient等が当たっているケースも潰す */
.industry-examples figure.hero-image,
.industry-examples figure.hero-image img{
  background: none !important;
  background-image: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 4) overflowで“はみ出し円”を隠す（安全策） */
.industry-examples figure.hero-image{
  overflow: hidden !important;
}

/* INDUSTRY：画像左上ラベルを“普通の小さなタグ”に戻す */
.industry-examples .hero-image{
  position: relative; /* 念のため */
}

.industry-examples .hero-image-tag{
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  bottom: auto !important;   /* ←これが重要（引き伸び防止） */
  right: auto !important;

  padding: 8px 10px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.68) !important;

  z-index: 2 !important;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* INDUSTRY：写真タグを右下へ */
.industry-examples .hero-image-tag{
  top: auto !important;
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;

  /* 右下に置いた時に角丸カードからはみ出さない保険 */
  max-width: calc(100% - 24px);
}

/* AFTER：右上サムネを大きくする */
.industry-examples .stage-after .stage-after-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.industry-examples .stage-after .stage-thumb{
  width: 64px;          /* ←ここでサイズ調整（例：64〜88） */
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.industry-examples .stage-after .stage-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 引き伸ばさない */
  display: block;
}

/* AFTER：サムネを大きく（約2倍） */
.industry-examples .stage-after .stage-thumb{
  width: 140px;   /* ←ここを128〜140で調整 */
  height: 140px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.industry-examples .stage-after .stage-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 引き伸ばさない */
  display: block;
}
.industry-examples .stage-after .stage-after-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* AFTERサムネ：強制サイズ変更 */
.industry-examples .stage-after .stage-thumb{
  width: 140px !important;
  height: 140px !important;
  max-width: none !important;
  flex: 0 0 140px !important;
}

.industry-examples .stage-after .stage-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ====== 3カードの見出し開始位置を揃える ====== */
.industry-examples .stage-card{
  display: flex;
  flex-direction: column;
}

/* BEFORE/THEN：kicker分の高さを確保（AFTERと揃えるため） */
.industry-examples .stage-before .stage-kicker,
.industry-examples .stage-then .stage-kicker{
  min-height: 18px; /* kicker行の高さ */
  margin-bottom: 8px;
}

/* AFTER：ヘッダー領域の高さを固定して、下のタイトル位置を揃える */
.industry-examples .stage-after .stage-after-head{
  min-height: 56px;           /* ←ここがキモ（サムネを大きくした分だけ調整） */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* AFTERのkickerは上下のズレを抑える */
.industry-examples .stage-after .stage-kicker{
  margin: 0;
  line-height: 1;
  padding-top: 2px;
}

/* AFTERサムネがでかくて押し下げるなら、ヘッダー内に収める */
.industry-examples .stage-after .stage-thumb{
  flex: 0 0 auto;
}

/* =========================================
   AFTER のサムネを浮かせて、見出し位置を揃える
   ========================================= */

/* AFTERカードを基準にする */
.industry-examples .stage-card.stage-after{
  position: relative !important;
  padding-right: 110px !important; /* サムネ分の余白（必要なら調整） */
}

/* AFTERのヘッダーは普通に縦並びでOK */
.industry-examples .stage-card.stage-after .stage-after-head{
  display: block !important;
  margin-bottom: 8px !important;
}

/* サムネを右上に固定（文章を押さない） */
.industry-examples .stage-card.stage-after .stage-thumb{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 84px !important;   /* ←大きくしたいならここ */
  height: 84px !important;  /* ←大きくしたいならここ */
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* 画像を枠にフィット（引き延ばし防止） */
.industry-examples .stage-card.stage-after .stage-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* AFTERのkicker/タイトルの余白を統一 */
.industry-examples .stage-card.stage-after .stage-kicker{
  margin: 0 0 8px 0 !important;
}
.industry-examples .stage-card.stage-after .stage-title{
  margin-top: 0 !important;
}

/* =========================
   INDUSTRY: Stage head 揃え
   ========================= */
.industry-examples .stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  min-height: 44px;   /* ← ここで3枚の見出し開始位置が揃う */
  margin-bottom: 10px;
}

/* サムネ枠（AFTERだけimgが入る / BEFORE・THENは空枠） */
.industry-examples .stage-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}

.industry-examples .stage-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 引き延ばさない */
  display: block;
}

.industry-examples .stage-thumb.is-empty{
  background: transparent;
  border: 0;
}

/* =========================
   Hero tag: 右下に固定
   ========================= */
.industry-examples .hero-image{
  position: relative;
}

.industry-examples .hero-image-tag{
  position: absolute;
  left: auto;
  top: auto;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  z-index: 2;
}
/* 空のサムネ（BEFORE/THEN）の四角を完全に消す */
.industry-examples .stage-thumb.is-empty{
  display: none !important;
}

/* AFTERのサムネだけ表示（安全策） */
.industry-examples .stage-after .stage-thumb{
  display: block;
}

/* ===== USECASE：上の横長画像を「縦だけ短く」 ===== */
.usecase-hero,
.usecase-banner,
.usecase-wide,
#usecase .usecase-hero,
#usecase .usecase-banner{
  /* どれかに当たればOK */
  border-radius: 14px;
  overflow: hidden;
}


/* 中のimgを引き延ばさずトリミング */
.usecase-hero img,
.usecase-banner img,
.usecase-wide img,
#usecase .usecase-hero img,
#usecase .usecase-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 引き延ばさない */
  display: block;
}


/* ===== USECASE：6カードのグリッド感（V0寄せ） ===== */
.usecase-grid,
#usecase .usecase-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  .usecase-grid,
  #usecase .usecase-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .usecase-grid,
  #usecase .usecase-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== カード本体：正方形寄り + メリハリ ===== */
.usecase-card,
#usecase .usecase-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  min-height: 240px;     /* ← ここが「正方形寄り」に効く。220〜280で調整 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* “専門性強すぎ”を弱める：本文を長く見せない */
.usecase-card p,
#usecase .usecase-card p{
  margin: 0;
  color: rgba(0,0,0,.72);
  font-size: 13px;
  line-height: 1.75;
}

/* タイトルは太め＆大きめ（メリハリ） */
.usecase-card .usecase-title,
#usecase .usecase-card .usecase-title{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: rgba(0,0,0,.86);
  letter-spacing: .01em;
}

/* 先頭のラベル（例：データサイエンス/リスキリング/生成AI） */
.usecase-card .usecase-tag,
#usecase .usecase-card .usecase-tag{
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}

/* ===== 色固定：指定の3色（クラスで付け分け） ===== */
/* 例：<span class="usecase-tag is-ds">データサイエンス</span> */
.usecase-tag.is-ds{ color: #0f6cbd; border-color: rgba(15,108,189,.28); background: rgba(15,108,189,.08); }
.usecase-tag.is-reskill{ color: #00a692; border-color: rgba(0,166,146,.28); background: rgba(0,166,146,.08); }
.usecase-tag.is-genai{ color: #1a357d; border-color: rgba(26,53,125,.28); background: rgba(26,53,125,.08); }

/* アイコン枠（ある場合）を揃える：視認性UP */
.usecase-card .usecase-icon,
#usecase .usecase-card .usecase-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* カード下部のチップ（ある場合）を整える */
.usecase-card .usecase-chips,
#usecase .usecase-card .usecase-chips{
  margin-top: auto;         /* ← 重要：下に寄せて揃う */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.usecase-card .usecase-chip,
#usecase .usecase-card .usecase-chip{
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.70);
}

/* =========================
   USECASE（drawer-構造向け）
   ========================= */

/* 0) まずカードの外枠を整える（正方形寄り＆メリハリ） */
.drawer-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);

  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* 正方形寄り：高さの基準 */
  min-height: 260px;   /* ← 240〜300で調整OK */
}

/* 1) 見出し周り：詰めて“専門性の圧”を弱める */
.drawer-subtitle{
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  color: rgba(0,0,0,.70);
}
.drawer-method{
  font-size: 18px;     /* メリハリ：ここを大きく */
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
  color: rgba(0,0,0,.86);
}

/* 2) 説明文：少し読みやすく（詰めすぎない） */
.drawer-description{
  font-size: 13px;
  line-height: 1.75;
  color: rgba(0,0,0,.72);
}

/* 3) チップ群：下に寄せてカードの見た目を揃える */
.drawer-examples{
  margin-top: auto;   /* ← これが揃うキー */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 4) 上段（ドット＋カテゴリ）：見た目を整理 */
.drawer-top{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ドット：小さく、主張しすぎない */
.drawer-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
}

/* カテゴリ：ピルを少しだけ軽く */
.drawer-category{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

/* 5) アイコン：少し小さくして余白を確保 */
.drawer-icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.drawer-icon svg{
  width: 22px;
  height: 22px;
  stroke: rgba(0,0,0,.55);
  stroke-width: 1.8;
}

/* 6) 6カードの並び（グリッド化）
   ※親が何であっても、.drawer-card を並べる親がflex/gridなら効かせたいので、
   親候補に当たりやすい指定をします。
*/
.drawer-grid,
.drawer-cards,
.usecase-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* タブレット */
@media (max-width: 980px){
  .drawer-grid,
  .drawer-cards,
  .usecase-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ */
@media (max-width: 680px){
  .drawer-grid,
  .drawer-cards,
  .usecase-grid{
    grid-template-columns: 1fr;
  }
}



<!-- USE CASE（完全置換：V0寄せ・崩れ防止・カード正方形寄せ） -->
<section id="usecase" class="usecase">
  <div class="container">
    <p class="usecase-label">USE CASE</p>
    <h2 class="usecase-title">
      <span class="excel-highlight">Excel</span>分析で手が止まる瞬間は、<br>
      だいたい決まっています
    </h2>

    <!-- Hero（左テキスト + 右の丸写真） -->
    <div class="usecase-hero">
      <div class="usecase-intro">
        <p>数字は出せる。前年比も計算できる。月次分析やKPI集計もこなしている。</p>
        <p>でも「<span class="text-em">なぜ？</span>」「<span class="text-em">次どうする？</span>」で、手が止まる——。</p>
        <p>それはスキル不足ではなく、「<span class="text-em">見る視点</span>」が足りないだけです。</p>
        <p>難しく感じるかもしれません。でも大丈夫です。</p>
        <p>次のセクションで、生成AI（ChatGPT / Copilot / Gemini）を使えば、これらが「楽」になることを示します。</p>
      </div>

      <div class="usecase-visual">
        <figure class="usecase-image">
          <img src="/wp-content/themes/swell_child/assets/excelai/img/usecase_hero.jpg" alt="Excel分析で手が止まり悩むビジネスパーソン">
          <figcaption>会議前、「なぜ？」で止まる瞬間</figcaption>
        </figure>
      </div>
    </div>

    <h3 class="moment-heading">Excel分析で手が止まる、3つの瞬間</h3>

    <!-- 3つの横長カード -->
    <div class="moment-grid" aria-label="Excel分析で手が止まる3つの瞬間">
      <article class="moment-card">
        <div class="moment-left">
          <div class="moment-title">手が止まる瞬間</div>
          <div class="moment-problem">理由を説明できない</div>
        </div>

        <div class="moment-mid">
          <div class="moment-solution-label">分析の改善による効果</div>
          <div class="moment-solution-text">
            「なぜ変わったのか」を、数字で説明できるようにする。まず「どこがいつもと違うか」を特定し、次に「なぜそうなったか」を要因に分けます。
          </div>
        </div>

        <div class="moment-right">
          <img class="moment-thumb" src="/wp-content/themes/swell_child/assets/excelai/img/moment_reason.jpg" alt="理由を説明できない場面のイメージ">
        </div>
      </article>

      <article class="moment-card">
        <div class="moment-left">
          <div class="moment-title">手が止まる瞬間</div>
          <div class="moment-problem">優先順位が決められない</div>
        </div>

        <div class="moment-mid">
          <div class="moment-solution-label">分析の改善による効果</div>
          <div class="moment-solution-text">
            全部を追わずに、優先順位を決められるようにする。ばらつきや偏りを見て、影響が大きいところから手を付けられる形にします。
          </div>
        </div>

        <div class="moment-right">
          <img class="moment-thumb" src="/wp-content/themes/swell_child/assets/excelai/img/moment_priority.jpg" alt="優先順位が決められない場面のイメージ">
        </div>
      </article>

      <article class="moment-card">
        <div class="moment-left">
          <div class="moment-title">手が止まる瞬間</div>
          <div class="moment-problem">次の一手が選べない</div>
        </div>

        <div class="moment-mid">
          <div class="moment-solution-label">分析の改善による効果</div>
          <div class="moment-solution-text">
            報告で終わらせず、次の打ち手を「選べる状態」をつくる。複数の選択肢を並べて、判断できる材料をそろえることです。
          </div>
        </div>

        <div class="moment-right">
          <img class="moment-thumb" src="/wp-content/themes/swell_child/assets/excelai/img/moment_next.jpg" alt="次の一手が選べない場面のイメージ">
        </div>
      </article>
    </div>

    <!-- 横長の写真（縦を短くするためラップ） -->
    <div class="usecase-middle-visual" aria-hidden="true">
      <img src="/wp-content/themes/swell_child/assets/excelai/img/usecase_wide.jpg" alt="データ分析のネットワークイメージ・視点が増えると判断までの距離が短くなる">
    </div>

    <!-- 中央見出し -->
    <div class="viewpoint-head">
      <h3 class="viewpoint-heading">
        "見る視点"が増えると、判断までの距離が短くなります
      </h3>
      <p class="viewpoint-sub">この変化を支える「分析の引き出し」</p>
      <p class="viewpoint-note">※すべてを理解する必要はありません。気になる視点だけ、拾ってください。</p>
    </div>

    <!-- 6つの引き出し -->
    <div class="drawer-grid" aria-label="分析の引き出し（6つ）">
      <!-- 1 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-organize">状況を整理する</span>
        </div>
        <div class="drawer-subtitle">最初に"怪しい場所"を当てる</div>
        <div class="drawer-method">異常値検出</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M4 19V5"></path>
            <path d="M4 19H20"></path>
            <path d="M7 15l4-5 4 3 3-6"></path>
            <circle cx="7" cy="15" r="1"></circle>
            <circle cx="11" cy="10" r="1"></circle>
            <circle cx="15" cy="13" r="1"></circle>
            <circle cx="18" cy="7" r="1"></circle>
            <circle class="svg-accent" cx="18" cy="7" r="1"></circle>
          </svg>
        </div>

        <div class="drawer-description">
          日次・週次・月次の推移や明細データの中から、通常の範囲を外れた点を見つけます。<br><br>
          これにより、会議では「<span class="text-em">どこが変わったか</span>」を最初に示せるようになり、説明の入口がぶれなくなります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">時系列（売上/粗利/件数）</span>
          <span class="example-chip">拠点別推移</span>
          <span class="example-chip">取引明細</span>
        </div>
      </article>

      <!-- 2 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-organize">状況を整理する</span>
        </div>
        <div class="drawer-subtitle">説明できる"仮説"に分ける</div>
        <div class="drawer-method">要因整理</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M6 6l6 7 6-7"></path>
            <path class="svg-accent" d="M12 13v6"></path>
          </svg>
        </div>

        <div class="drawer-description">
          変化の理由を、思いつきの列挙ではなく「<span class="text-em">検証できる仮説</span>」に分けて整理します。<br><br>
          これにより、「まずA→次にB」の順で確かめれば説明できる、という進め方に変わります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">売上/利益の内訳</span>
          <span class="example-chip">顧客×商品×期間</span>
          <span class="example-chip">原価・値引き明細</span>
        </div>
      </article>

      <!-- 3 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-prioritize">優先順位を決める</span>
        </div>
        <div class="drawer-subtitle">優先順位を"根拠"で決める</div>
        <div class="drawer-method">ばらつき分析</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M5 18V10"></path>
            <path d="M9 18V6"></path>
            <path class="svg-accent" d="M13 18V12"></path>
            <path d="M17 18V8"></path>
            <path d="M21 18H3"></path>
          </svg>
        </div>

        <div class="drawer-description">
          平均や合計だけでは見えない"安定度"を、分布やばらつきで捉えます。<br><br>
          これにより、「<span class="text-em">どこに手を入れると効くか</span>」を感覚ではなく根拠を持って決められるようになります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">工数</span>
          <span class="example-chip">原価</span>
          <span class="example-chip">リードタイム</span>
          <span class="example-chip">拠点別KPI</span>
        </div>
      </article>

      <!-- 4 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-prioritize">優先順位を決める</span>
        </div>
        <div class="drawer-subtitle">効く"一点"を先に特定</div>
        <div class="drawer-method">対象の整理</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M4 4h7v7H4z"></path>
            <path class="svg-accent" d="M13 4h7v7h-7z"></path>
            <path d="M4 13h7v7H4z"></path>
            <path d="M13 13h7v7h-7z"></path>
          </svg>
        </div>

        <div class="drawer-description">
          顧客・商品・拠点などを切り分けて、「効いているところ／効いていないところ」を見分けます。<br><br>
          これにより、全件対応ではなく「<span class="text-em">まずここから着手</span>」が言えるようになり、実行に移る速度が上がります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">顧客別売上</span>
          <span class="example-chip">商品別粗利</span>
          <span class="example-chip">案件パイプライン</span>
          <span class="example-chip">拠点別生産性</span>
        </div>
      </article>

      <!-- 5 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-decide">意思決定につなげる</span>
        </div>
        <div class="drawer-subtitle">選択肢を並べて比較</div>
        <div class="drawer-method">シミュレーション</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M5 7h14"></path>
            <path d="M5 17h14"></path>
            <path d="M9 7v10"></path>
            <path d="M15 17V7"></path>
            <circle cx="9" cy="12" r="1.5"></circle>
            <circle class="svg-accent" cx="15" cy="12" r="1.5"></circle>
          </svg>
        </div>

        <div class="drawer-description">
          条件を変えた複数のケースを並べ、結果の違いを比較します。<br><br>
          これにより、主張ではなく比較で話せるようになり、<span class="text-em">合意形成</span>が進みやすくなります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">価格改定</span>
          <span class="example-chip">施策別効果</span>
          <span class="example-chip">採用/配員</span>
          <span class="example-chip">在庫/発注</span>
          <span class="example-chip">目標配分</span>
        </div>
      </article>

      <!-- 6 -->
      <article class="drawer-card">
        <div class="drawer-top">
          <span class="drawer-category cat-decide">意思決定につなげる</span>
        </div>
        <div class="drawer-subtitle">判断基準を"共通言語"に</div>
        <div class="drawer-method">基準づくり（代表値）</div>

        <div class="drawer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M6 12h12"></path>
            <circle cx="9" cy="12" r="1.5"></circle>
            <circle class="svg-accent" cx="12" cy="12" r="1.5"></circle>
            <circle cx="15" cy="12" r="1.5"></circle>
          </svg>
        </div>

        <div class="drawer-description">
          平均・中央値・分布などを使い、「通常状態（基準）」を定義します。<br><br>
          これにより、「どのくらい外れたら異常か」を共通言語にでき、判断が属人化しにくくなります。
        </div>
        <div class="drawer-examples">
          <span class="example-chip">日次KPI</span>
          <span class="example-chip">品質指標</span>
          <span class="example-chip">納期</span>
          <span class="example-chip">問い合わせ件数</span>
          <span class="example-chip">工程時間</span>
        </div>
      </article>
    </div>

    <p class="usecase-closing">
      ここまでは「考え方（視点）」の話でした。<br>
      次のセクションでは、これらを生成AI（ChatGPT / Copilot / Gemini）と組み合わせることで、
      <span class="excel-highlight">Excel</span>分析の「詰まり」が一段ずつ楽になる体験を示します。
    </p>

    <div class="usecase-cta">
      <a href="#ai-powered" class="btn-outline-large">生成AIで楽になるポイントを見る</a>
      <a href="https://timerex.net/s/info_1215_1cb6/8a9d1d52/" class="btn-primary-large">分析の相談をしてみる</a>
    </div>
    <p class="usecase-note-cta">※分析の相談は30分無料 / オンライン / クリックで予約ページへ移動します</p>
  </div>
</section>


/* ===== USECASE：崩さない安全調整 ===== */

/* 上の横長画像（ネットワーク）の高さを縮める */
#usecase .usecase-middle-visual img{
  max-height: 140px;     /* まずはこれ。もっと薄くしたければ 120px */
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* 6カード：専門性の圧を下げて、少し“正方形寄せ”に（余白を締めるだけ） */
#usecase .drawer-card{
  padding: 14px 14px;
}
#usecase .drawer-method{
  margin-top: 6px;
  font-size: 16px;
}
#usecase .drawer-description{
  margin-top: 8px;
  line-height: 1.65;
}
#usecase .drawer-examples{
  margin-top: 10px;
  gap: 6px;
}
#usecase .example-chip{
  padding: 4px 8px;
  font-size: 11px;
/* ===== USECASE：崩さない安全調整 ===== */

/* 上の横長画像（ネットワーク）の高さを縮める */
#usecase .usecase-middle-visual img{
  max-height: 140px;     /* まずはこれ。もっと薄くしたければ 120px */
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* 6カード：専門性の圧を下げて、少し“正方形寄せ”に（余白を締めるだけ） */
#usecase .drawer-card{
  padding: 14px 14px;
}
#usecase .drawer-method{
  margin-top: 6px;
  font-size: 16px;
}
#usecase .drawer-description{
  margin-top: 8px;
  line-height: 1.65;
}
#usecase .drawer-examples{
  margin-top: 10px;
  gap: 6px;
}
#usecase .example-chip{
  padding: 4px 8px;
  font-size: 11px;
}

/* =========================================
   USECASE：ヒーロー画像が半円になる問題を止める
   原因：親要素の overflow / border-radius / mask 等の影響が多い
   対応：usecase hero 周辺だけ「切り抜き」を無効化し、画像は確実に丸で表示
========================================= */
#usecase .usecase-hero,
#usecase .usecase-visual{
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

/* キャプションが回り込みで崩れないように */
#usecase .usecase-image figcaption{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}

/* もし ::before / ::after の装飾が乗っている場合は無効化（保険） */
#usecase .usecase-image::before,
#usecase .usecase-image::after,
#usecase .usecase-visual::before,
#usecase .usecase-visual::after,
#usecase .usecase-hero::before,
#usecase .usecase-hero::after{
  content: none !important;
  display: none !important;
}

/* キャプション */
#usecase .usecase-image figcaption{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}

#usecase .usecase-visual,
#usecase .usecase-hero{
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}
#usecase .usecase-visual,
#usecase .usecase-hero{
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

/* =========================================
   USE CASE：右の丸画像が半円になる問題を強制修正
   （excelai.css の一番下に貼る）
========================================= */


/* figcaptionは丸の外に出す（丸の中に入って崩れる事故防止） */
#usecase .usecase-image > figcaption{
  position: static !important;
  margin-top: 10px !important;
  font-size: 12px !important;
  color: rgba(0,0,0,.6) !important;
  text-align: center !important;
}
/* ==============================
   USECASE hero circle FIX (強制)
   excelai.css の一番下に貼る
============================== */

/* レイアウト崩れの原因になりやすい flex の伸びを止める */
body .usecase .usecase-hero{
  display: flex !important;
  gap: 24px !important;
  align-items: center !important; /* stretchを殺す */
}

body .usecase .usecase-visual{
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}


/* キャプションは丸の外へ */
body .usecase .usecase-image > figcaption{
  position: static !important;
  margin-top: 10px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(0,0,0,.6) !important;
}


/* =========================
   page-id-88：USE CASEの丸画像を「完全な円」に固定
   ========================= */


/* 4) 犯人：img[src*="usecase_hero"] が 180×180 を強制してるのを潰す */
.page-id-88 main.lp-excelai img[src*="usecase_hero"]{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

/* ================================
   USECASE（ページID:88）最終パッチ
   症状：丸画像が半分に見える/下のカードに隠れる
   原因：親の高さが足りない or overflow:hidden で切られてる
================================ */

body.page-id-88 main.lp-excelai section.usecase .usecase-hero{
  /* ここで“画像分の高さ”を確保して、次の要素がかぶらないようにする */
  min-height: 360px !important;
  padding-bottom: 40px !important;
  overflow: visible !important;

  /* グリッド/フレックスが潰してくるのを防ぐ */
  align-items: start !important;
}


/* 丸の器（figure）を“確実に320×320の円”に固定 */
body.page-id-88 main.lp-excelai section.usecase .usecase-image{
  width: 320px !important;
  height: 320px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin: 0 !important;

  /* absolute等でレイアウトから浮いてると、下に隠れるので殺す */
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* 中の画像も器いっぱいに */
body.page-id-88 main.lp-excelai section.usecase .usecase-image > img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;

  /* “半円マスク/クリップ”系が入ってたら全部無効化 */
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}
/* ========= page 88: USECASEの右画像が半円になる（親が120px＋overflow hidden）対策 ========= */

/* 1) まず「切ってる親」を解除する（ここが本丸） */
body.page-id-88 main.lp-excelai #usecase .usecase-hero,
body.page-id-88 main.lp-excelai section#usecase .usecase-hero {
  height: auto !important;
  min-height: 320px !important;      /* 右の丸のサイズに合わせる */
  overflow: visible !important;      /* ここ重要：切らない */
  align-items: start !important;
}


/* 3) 丸い写真（figure）を正方形→円にして、はみ出しを隠す */
body.page-id-88 main.lp-excelai #usecase .usecase-image {
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* 4) 中のimgはピッタリ埋める */
body.page-id-88 main.lp-excelai #usecase .usecase-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 緑枠がデバッグ由来でも、別CSS由来でも、とにかく消す保険 */
body.page-id-88 main.lp-excelai .usecase-image,
body.page-id-88 main.lp-excelai .usecase-image > img{
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* USECASE セクション：背景を全幅にする（画面端まで） */
body.page-id-88 main.lp-excelai section.usecase{
  background: #f5f7fb; /* 好きな色に */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 0; /* 上下余白 */
}

/* 中身は中央の最大幅に閉じ込める */
body.page-id-88 main.lp-excelai .usecase-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px; /* 左右の内側余白 */
}

/* =========================
   USECASE: 緑枠/デバッグ枠を完全に殺す（暫定）
   ========================= */
body.page-id-88 main.lp-excelai #usecase .usecase-visual,
body.page-id-88 main.lp-excelai #usecase .usecase-image,
body.page-id-88 main.lp-excelai #usecase .usecase-image > img{
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================
   USECASE: 背景を画面端まで（中身は中央）
   ========================= */
body.page-id-88 main.lp-excelai #usecase.usecase{
  background: #f7f9fc;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 88px 0 78px;
}

body.page-id-88 main.lp-excelai #usecase .container{
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}
/* =========================
   USECASE: 右の丸画像（正円）
   ========================= */
body.page-id-88 main.lp-excelai #usecase .usecase-hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 860px){
  body.page-id-88 main.lp-excelai #usecase .usecase-hero{
    grid-template-columns: 1fr 320px;
    align-items: center;
  }
}

body.page-id-88 main.lp-excelai #usecase .usecase-visual{
  display: flex;
  justify-content: center;
}

@media (min-width: 860px){
  body.page-id-88 main.lp-excelai #usecase .usecase-visual{
    justify-content: flex-end;
  }
}

body.page-id-88 main.lp-excelai #usecase figure.usecase-image{
  width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0;
  background: none;
}

body.page-id-88 main.lp-excelai #usecase figure.usecase-image > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================
   USECASE: 右の丸画像（正円・クラス一致版）
   ========================= */
body.page-id-88 main.lp-excelai #usecase .usecase-visual{
  display: flex;
  justify-content: center;
}

@media (min-width: 860px){
  body.page-id-88 main.lp-excelai #usecase .usecase-visual{
    justify-content: flex-end;
  }
}

body.page-id-88 main.lp-excelai #usecase figure.usecase-image{
  width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0;
  background: none;
}

body.page-id-88 main.lp-excelai #usecase figure.usecase-image > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャプションは丸の外 */
body.page-id-88 main.lp-excelai #usecase figure.usecase-image > figcaption{
  position: static;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: center;
}

/* =========================
   USECASE 最終パッチ：右の丸を必ず正円にする
   （既存の !important 地獄に勝つ用）
   ========================= */

/* 右カラムを 320px に固定（180px指定を潰す） */
@media (min-width: 860px){
  body.page-id-88 main.lp-excelai #usecase .usecase-hero{
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 32px !important;
    align-items: center !important;
  }
}

/* 右側ブロックも縮ませない */
body.page-id-88 main.lp-excelai #usecase .usecase-visual{
  width: 320px !important;
  flex: 0 0 320px !important;
  justify-self: end !important;
  display: flex !important;
  justify-content: center !important;
}

/* figure を「正方形の箱」に固定して丸抜き */
body.page-id-88 main.lp-excelai #usecase figure.usecase-image{
  width: 320px !important;
  height: 320px !important;          /* ← aspect-ratio だと他CSSに負けることがあるので固定 */
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin: 0 !important;
  position: relative !important;
  background: none !important;
}

/* img を箱いっぱいに */
body.page-id-88 main.lp-excelai #usecase figure.usecase-image > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* figcaption が高さを壊すのを防ぐ（いったん figure の外に出すのが理想だが、CSSで逃がす） */
body.page-id-88 main.lp-excelai #usecase figure.usecase-image > figcaption{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: rgba(0,0,0,.55) !important;
}

/* SPは少し小さく */
@media (max-width: 768px){
  body.page-id-88 main.lp-excelai #usecase .usecase-hero{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  body.page-id-88 main.lp-excelai #usecase .usecase-visual{
    width: 240px !important;
    flex-basis: 240px !important;
    margin: 0 auto !important;
  }
  body.page-id-88 main.lp-excelai #usecase figure.usecase-image{
    width: 240px !important;
    height: 240px !important;
  }
}