/* ============================================================
   BizMow Service List Page — service.css  v3
   functions.php の is_page('service') で自動読み込み
   plan.css / front-page.css の設計・変数・クラス名を完全踏襲

   カラー変更:
     バックオフィス  → #F97040（オレンジ）
     カスタマー      → #FFB800（ゴールド）
     オプション      → #2FA3BD（ティール）
   ============================================================ */

/* ------------------------------------------------------------
   Lightning テーマ干渉リセット
------------------------------------------------------------ */
#bizmow-service-list h1,
#bizmow-service-list h2,
#bizmow-service-list h3,
#bizmow-service-list h4 {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
#bizmow-service-list h1::before, #bizmow-service-list h1::after,
#bizmow-service-list h2::before, #bizmow-service-list h2::after,
#bizmow-service-list h3::before, #bizmow-service-list h3::after,
#bizmow-service-list h4::before, #bizmow-service-list h4::after {
  content: none !important;
}

#bizmow-service-list {
  padding-top: 3%;
}

/* ------------------------------------------------------------
   CSS 変数
------------------------------------------------------------ */
:root {
  /* バックオフィス（オレンジ）*/
  --sl-bo:        #F97040;
  --sl-bo-dark:   #C45420;
  --sl-bo-soft:   #FFF3EE;
  --sl-bo-line:   #FDDCC8;
  /* カスタマーサポート（ゴールド）*/
  --sl-cs:        #FFB800;
  --sl-cs-dark:   #8A6800;
  --sl-cs-soft:   #FFF9E0;
  --sl-cs-line:   #FFE680;
  /* オプション（ティール）*/
  --sl-opt:       #2FA3BD;
  --sl-opt-dark:  #0F6E56;
  --sl-opt-soft:  #E1F5EE;
  --sl-opt-line:  #90CEB8;
  /* 共通 */
  --sl-text:      #383838;
  --sl-mute:      #888888;
  --sl-border:    #E5E7EB;
}

/* ----------------------------------------------------------------
   2. CSS変数（カラーパレット）
---------------------------------------------------------------- */
:root {
  /* 事務アウトソーシング系（オレンジ） */
  --plan-or: #F97040;
  --plan-or-soft: #FFF7ED;
  --plan-or-line: #F0E0D0;
  /* 経営管理アウトソーシング系（ティール） */
  --plan-tl: #2FA3BD;
  --plan-tl-soft: #E1F5EE;
  --plan-tl-line: #C5E5DD;
  /* 共通アクセント */
  --plan-gold: #FFB800;
  --plan-gold-soft: #FFFBEB;
  /* テキスト・ボーダー */
  --plan-text: #383838;
  --plan-mute: #888888;
  --plan-line: #F0F0F0;
}


/* ============================================================
   [01] FV — plan-fv と完全同一（"SERVICE" 透かし文字）
============================================================ */
.sl-fv {
  padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 5vw, 50px);
  background: linear-gradient(135deg, #fff7f3 0%, #ffffff 50%, #f0fbff 100%);
  position: relative;
  overflow: hidden;
}
.sl-fv-bg-text {
  position: absolute;
  /* top: 50%; */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(64px, 14vw, 140px);
  font-weight: 900;
  /* color: #ebebed; */
  color: #ebebed80;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

.sl-fv::before, .sl-fv::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sl-fv::before {
  width: 500px; height: 500px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(249,112,64,.08) 0%, transparent 70%);
  animation: sl-float1 8s ease-in-out infinite;
}
.sl-fv::after {
  width: 360px; height: 360px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(47,163,189,.07) 0%, transparent 70%);
  animation: sl-float2 10s ease-in-out infinite;
}
@keyframes sl-float1 { 0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,20px) scale(1.05);} }
@keyframes sl-float2 { 0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(16px,-16px) scale(1.04);} }

.sl-fv-deco { position: absolute; z-index: 0; pointer-events: none; }
.sl-fv-deco--sq1 { width:32px;height:32px;top:60px;right:18%;border:2px solid rgba(249,112,64,.18);border-radius:6px;transform:rotate(20deg);animation:sl-spin 14s linear infinite; }
.sl-fv-deco--sq2 { width:18px;height:18px;top:140px;right:12%;background:rgba(255,184,0,.15);border-radius:4px;animation:sl-spin 20s linear infinite reverse; }
.sl-fv-deco--dot  { width:10px;height:10px;top:80px;left:14%;background:rgba(47,163,189,.18);border-radius:50%;animation:sl-float1 6s ease-in-out infinite; }
@keyframes sl-spin { from{transform:rotate(0deg);}to{transform:rotate(360deg);} }

.sl-fv .container-1280 { position: relative; z-index: 1; }
.sl-fv-lead { font-size: clamp(14px,1.6vw,16px); color:#555; line-height:2; margin-top:10px; text-align:center; }
.sl-fv-lead strong { font-weight: 700; }
.sl-fv-or { color: var(--sl-bo); }

/* ============================================================
   [02] PROBLEMS — 4列
============================================================ */
.sl-problem-section {
  background: #ffffff;
  padding: clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);
}
.sl-p-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
.sl-p-card {
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  background: #fff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sl-p-img-wrap { width:100%; display:flex; justify-content:center; align-items:center; height:140px; margin-bottom:14px; }
.sl-p-img      { max-height:120px; height:auto; width:auto; object-fit:contain; }
.sl-p-text     { font-size:clamp(13px,1.8vw,15px); font-weight:700; color:#404040; line-height:1.6; margin-bottom:8px; }
.sl-p-sub      { font-size:12px; color:#888; line-height:1.7; }

/* 矢印 4列 */
.sl-arrows-4 { grid-template-columns: repeat(4,1fr) !important; }

/* 解決カード 4列 */
.sl-s-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sl-s-wrap  { display:flex; flex-direction:column; align-items:center; }

/* ============================================================
   新しいお悩みカードスタイル
============================================================ */
.plan-worry-solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.plan-worry-solution-item {
  display: grid;
  grid-template-rows: auto 28px 1fr;
}

/* 悩みカード */
.plan-worry-card {
  height: 100%;
  min-height: 360px;
  background: #ffffff;
  border: 1px solid var(--plan-gold);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.plan-worry-card__img-wrap {
  /* height: 180px; */
  /* height: 130px; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: 18px; */
    margin: 8px auto 12px;
}

.plan-worry-card__img {
  max-height: 120px;
  width: auto;
  object-fit: contain;
}


.plan-worry-card__text {
  min-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--plan-text);
  line-height: 1.4;
  margin: 0;
}

.plan-worry-card {
  min-height: 110px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-solution-card {
  min-height: 260px;
  padding: 18px 16px;
}



/* 矢印 */
.plan-worry-arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plan-or);
  font-size: 20px;
  opacity: 0.75;
}

/* 解決カード */
.plan-solution-card {
  /* min-height: 132px; */
  /* background: var(--plan-tl-soft); */
  background: #fff;
  /* border: 1px solid var(--plan-tl-line); */
  border: 1px solid  var(--plan-gold);
  border-radius: 14px;
  /* padding: 18px 16px; */
  text-align: center;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
  padding: 22px 16px;
  display: grid;
  grid-template-rows: 28px 190px 1fr;
  align-items: center;
}

.plan-solution-card__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--plan-or);
  /* margin: 0 0 8px; */
  height: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-solution-card__text {
  font-size: 13px;
  color: var(--plan-text);
  /* line-height: 1.7; */
  margin: 0;
  min-height: 4.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.6;
  padding: 2px;
}

.plan-solution-card__img-wrap {
  height: 190px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-solution-card__img {
  max-height: 160px;
  max-width: 100%;
  width: auto;
  padding: 5px 0;
  object-fit: contain;
}


/* タブレット */
@media (max-width: 1100px) {
  .plan-worry-solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ */
@media (max-width: 767px) {
  .plan-worry-solution-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .plan-worry-card {
    min-height: auto;
  }

  .plan-worry-card__img-wrap {
    height: 140px;
  }

  .plan-worry-card__img {
    max-height: 130px;
  }

  .plan-solution-card {
    min-height: auto;
    grid-template-rows: 26px 150px auto;
  }

  .plan-solution-card__text {
    min-height: auto;
  }
}

/* ============================================================
   [03] CATEGORY NAV
============================================================ */
.sl-cat-section {
  background: linear-gradient(135deg,#fff7ed,#fff,#fefce8);
  padding: clamp(40px,5vw,64px) 0;
}

/* 見出し（添付画像：縦バー＋テキスト） */
.sl-block-heading {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
}
.sl-block-heading--mt { margin-top: 28px; }
.sl-block-bar {
  width: 5px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sl-block-bar--bo  { background: var(--sl-bo); }
.sl-block-bar--cs  { background: var(--sl-cs); }
.sl-block-bar--opt { background: var(--sl-opt); }
.sl-block-title {
  font-size: 17px;
  font-weight: 700;
  color: #383838;
  padding-left: 12px;
  line-height: 1.3;
}

/* カードグリッド */
.sl-cat-grid      { display:grid; gap:14px; }
.sl-cat-grid--3   { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sl-cat-grid--2   { grid-template-columns: repeat(2,minmax(0,1fr)); }

.sl-cat-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--sl-border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.sl-cat-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.10); }
.sl-cat-card--bo:hover  { border-color: var(--sl-bo); }
.sl-cat-card--cs:hover  { border-color: var(--sl-cs); }
.sl-cat-card--opt:hover { border-color: var(--sl-opt); }

.sl-cat-accent { position:absolute; top:0; left:0; right:0; height:4px; border-radius:10px 10px 0 0; }
.sl-cat-accent--bo  { background: var(--sl-bo); }
.sl-cat-accent--cs  { background: var(--sl-cs); }
.sl-cat-accent--opt { background: var(--sl-opt); }

.sl-cat-img { width:100%; aspect-ratio:16/7; overflow:hidden; position:relative; }
.sl-cat-img--bo  { background:linear-gradient(135deg,#FFF3EE,#FFE0CC); }
.sl-cat-img--cs  { background:linear-gradient(135deg,#FFFDF0,#FFF3CC); }
.sl-cat-img--opt { background:linear-gradient(135deg,#E1F5EE,#C0E8DA); }
.sl-cat-img-photo { width:100%; height:100%; object-fit:contain; display:block; padding:8px; }

.sl-cat-body { padding:14px 16px 16px; }
.sl-cat-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:9999px; margin-bottom:6px; }
.sl-cat-badge--bo  { background:var(--sl-bo-soft);  color:var(--sl-bo-dark); }
.sl-cat-badge--cs  { background:var(--sl-cs-soft);  color:var(--sl-cs-dark); }
.sl-cat-badge--opt { background:var(--sl-opt-soft); color:var(--sl-opt-dark); }
.sl-cat-name { font-size:14px; font-weight:700; color:#333; margin-bottom:4px; line-height:1.3; }
.sl-cat-sub  { font-size:12px; color:#777; line-height:1.6; margin-bottom:10px; }
.sl-cat-link { font-size:11px; font-weight:700; }
.sl-cat-link--bo  { color:var(--sl-bo); }
.sl-cat-link--cs  { color:var(--sl-cs-dark); }
.sl-cat-link--opt { color:var(--sl-opt); }

/* ============================================================
   [04–11] 各サービスセクション共通
============================================================ */
.sl-sec {
  padding: clamp(44px,6vw,72px) 0;
  scroll-margin-top: 80px;
}
.sl-sec--white    { background:#ffffff; }
.sl-sec--gray     { background:#F9FAFB; }
.sl-sec--warm     { background:linear-gradient(135deg,#fff7ed,#fff,#fefce8); }
.sl-sec--blue-lt  { background:linear-gradient(180deg,#f0f8fd 0%,#fff 100%); }
.sl-sec--amber-lt { background:linear-gradient(180deg,#fffdf5 0%,#fff 100%); }

/* セクション見出し（添付画像：縦バー＋タグ＋タイトル） */
.sl-sec-head {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sl-border);
  margin-bottom: 24px;
}
.sl-sec-bar {
  width: 5px;
  border-radius: 3px;
  flex-shrink: 0;
  min-height: 32px;
}
.sl-sec-bar--bo  { background: var(--sl-bo); }
.sl-sec-bar--cs  { background: var(--sl-cs); }
.sl-sec-bar--opt { background: var(--sl-opt); }
.sl-sec-title-wrap { padding-left: 12px; }
.sl-sec-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  margin-bottom: 4px;
}
.sl-sec-tag--bo  { background:var(--sl-bo-soft);  color:var(--sl-bo-dark); }
.sl-sec-tag--cs  { background:var(--sl-cs-soft);  color:var(--sl-cs-dark); }
.sl-sec-tag--opt { background:var(--sl-opt-soft); color:var(--sl-opt-dark); }
.sl-sec-title { font-size:clamp(20px,3vw,26px); font-weight:700; color:#222; line-height:1.3; }
.sl-sec-desc  { font-size:13px; color:#666; line-height:1.9; margin-bottom:20px; }
.sl-sec-desc small { font-size:11px; color:#aaa; }

/* ============================================================
   タスクカード（フジ子さん式 箇条書き）
============================================================ */
.sl-task-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.sl-task-card {
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.sl-task-card--empty { background: transparent; border: none; box-shadow: none; }
.sl-task-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 10px;
}
.sl-task-cat--bo  { background:var(--sl-bo-soft);  color:var(--sl-bo-dark); }
.sl-task-cat--cs  { background:var(--sl-cs-soft);  color:var(--sl-cs-dark); }
.sl-task-cat--opt { background:var(--sl-opt-soft); color:var(--sl-opt-dark); }
.sl-task-list { list-style:none; padding:0; margin:0; }
.sl-task-list li { font-size:12px; color:#555; line-height:1.85; padding-left:14px; position:relative; }
.sl-task-list li::before { content:"・"; position:absolute; left:0; color:#bbb; }
.sl-task-price { font-size:12px; font-weight:700; color:var(--sl-opt-dark); margin-top:10px; }
.sl-note-accent { font-size:11px; color:var(--sl-bo); }
.sl-note-gray   { font-size:11px; color:#888; }

/* ============================================================
   経理 上位プラン（管理会計・CFO代行）
============================================================ */
.sl-upper-plan {
  margin-top: 24px;
  background: linear-gradient(135deg,#EAF5FB,#f0fbff);
  border: 2px solid #2B8FC4;
  border-radius: 14px;
  padding: 20px 24px;
}
.sl-upper-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg,#2B8FC4,#1A6A9A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
}
.sl-upper-title { font-size:15px; font-weight:700; color:#1A6A9A; margin-bottom:8px; }
.sl-upper-desc  { font-size:12px; color:#555; line-height:1.85; margin-bottom:16px; }
.sl-upper-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sl-upper-card  { background:#fff; border:1px solid #A8D8F0; border-radius:8px; padding:12px; }
.sl-upper-cat   { display:inline-block; font-size:10px; font-weight:700; color:#1A6A9A; background:#EAF5FB; padding:2px 8px; border-radius:9999px; margin-bottom:8px; }
.sl-upper-list  { list-style:none; padding:0; margin:0; }
.sl-upper-list li { font-size:11px; color:#555; line-height:1.85; padding-left:12px; position:relative; }
.sl-upper-list li::before { content:"・"; position:absolute; left:0; color:#2B8FC4; }

/* ============================================================
   経理 FAQ カード（添付画像デザイン 4列）
============================================================ */
.sl-faq-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 28px;
}
.sl-faq-card {
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sl-faq-img-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.sl-faq-img-wrap img {
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sl-faq-q {
  font-size: 14px;
  font-weight: 700;
  color: #383838;
  line-height: 1.5;
  margin-bottom: 8px;
}
.sl-faq-a {
  font-size: 12px;
  color: #666;
  line-height: 1.75;
}

/* ============================================================
   セクション内 CTA ボタン
============================================================ */
.sl-cta-wrap { text-align:center; margin-top:28px; }
.sl-cta-btn {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sl-cta-btn::before {
  content:"";
  position:absolute;
  top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
}
.sl-cta-btn:hover::before { animation:sl-shine .8s ease; }
@keyframes sl-shine { 0%{left:-75%}100%{left:130%} }
.sl-cta-btn:hover { transform:translateY(-3px); color:#fff !important; }

.sl-cta-btn--bo  { background:linear-gradient(135deg,#FA5858 0%,var(--sl-bo) 100%); box-shadow:0 8px 0 rgba(196,84,32,.5); }
.sl-cta-btn--bo:hover  { box-shadow:0 12px 0 rgba(196,84,32,.5); }
.sl-cta-btn--cs  { background:linear-gradient(135deg,var(--sl-cs) 0%,#E09000 100%); box-shadow:0 8px 0 rgba(160,112,0,.45); color:#fff; }
.sl-cta-btn--cs:hover  { box-shadow:0 12px 0 rgba(160,112,0,.45); }
.sl-cta-btn--opt { background:linear-gradient(135deg,var(--sl-opt) 0%,#1A7A96 100%); box-shadow:0 8px 0 rgba(26,122,150,.5); }
.sl-cta-btn--opt:hover { box-shadow:0 12px 0 rgba(26,122,150,.5); }

/* ============================================================
   取り組み事例ボックス（セミナー事務局）
============================================================ */
.sl-case-wrap { background:#FFF8F5; border:2px solid #F5C9B3; border-radius:14px; padding:24px; margin-top:28px; }
.sl-case-head { margin-bottom:10px; }
.sl-case-title { font-size:14px; font-weight:700; color:var(--sl-text); line-height:1.55; padding-bottom:14px; border-bottom:1px solid #F5C9B3; margin-bottom:16px; }
.sl-case-flow  { display:grid; grid-template-columns:1fr 1.7fr 1fr; gap:14px; align-items:start; }
.sl-case-actor { font-size:11px; font-weight:700; color:#fff; text-align:center; padding:5px 8px; border-radius:6px; margin-bottom:10px; }
.sl-case-actor--client { background:var(--sl-opt); }
.sl-case-actor--bizmow { background:var(--sl-bo); }
.sl-case-actor--att    { background:#555; }
.sl-case-bubble { background:#fff; border:1px solid #ddd; border-radius:8px; padding:9px 10px; font-size:12px; font-weight:700; text-align:center; color:var(--sl-opt); margin-bottom:7px; }
.sl-case-focus-wrap { display:flex; flex-direction:column; align-items:center; margin:4px 0 8px; }
.sl-case-arrow { width:20px; height:40px; display:block; margin-bottom:2px; }
.sl-case-focus { font-size:12px; color:#888; text-align:center; line-height:1.5; }
.sl-case-result-box { background:#EAF5FB; border:2px solid #2B8FC4; border-radius:8px; padding:9px; font-size:13px; font-weight:700; text-align:center; color:#2B8FC4; }
.sl-case-steps { display:flex; flex-direction:column; gap:7px; }
.sl-case-step  { display:flex; align-items:flex-start; gap:7px; background:#fff; border:1px solid #F5C9B3; border-radius:8px; padding:9px 11px; }
.sl-step-no    { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; min-width:20px; background:var(--sl-bo); color:#fff; font-size:10px; font-weight:700; border-radius:50%; flex-shrink:0; margin-top:1px; }
.sl-step-text  { font-size:11px; color:var(--sl-text); line-height:1.55; }
.sl-case-att-steps { display:flex; flex-direction:column; gap:7px; }
.sl-case-att-step  { background:#fff; border:1px solid #ddd; border-radius:6px; padding:9px; font-size:12px; text-align:center; }
.sl-case-att-step--last { border:2px solid #555; font-weight:700; }

/* ============================================================
   コンサルティングカード
============================================================ */
.sl-consult-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.sl-consult-card { background:#fff; border:1px solid var(--sl-border); border-radius:12px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.sl-consult-type  { font-size:10px; font-weight:700; color:var(--sl-opt-dark); letter-spacing:.05em; margin-bottom:6px; }
.sl-consult-title { font-size:14px; font-weight:700; color:#333; margin-bottom:8px; line-height:1.4; }
.sl-consult-body  { font-size:12px; color:#666; line-height:1.8; margin-bottom:10px; }
.sl-consult-price { font-size:13px; color:var(--sl-text); margin-bottom:8px; }
.sl-consult-price strong { color:var(--sl-opt); font-size:16px; }
.sl-consult-opts  { list-style:none; padding:0; }
.sl-consult-opts li { font-size:11px; color:#999; line-height:1.8; padding-left:12px; position:relative; }
.sl-consult-opts li::before { content:"・"; position:absolute; left:0; }

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width: 1023px) {
  .sl-p-grid     { grid-template-columns:repeat(2,1fr); }
  .sl-s-grid     { grid-template-columns:repeat(2,1fr); }
  .sl-arrows-4   { grid-template-columns:repeat(2,1fr) !important; }
  .sl-cat-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sl-consult-grid { grid-template-columns:1fr; }
  .sl-faq-cards  { grid-template-columns:repeat(2,1fr); }
  .sl-case-flow  { grid-template-columns:1fr; gap:20px; }
  .sl-case-col--center { order:-1; }
  .sl-upper-grid { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
  .sl-fv { padding:28px 0 20px; }

  .sl-p-grid    { grid-template-columns:1fr; gap:12px; }
  .sl-s-grid    { grid-template-columns:1fr; }
  .sl-arrows-4  { display:none !important; }

  .sl-cat-grid--3,
  .sl-cat-grid--2 { grid-template-columns:1fr; gap:12px; }

  .sl-sec { padding:2.5rem 0; }
  .sl-sec-head { flex-wrap:wrap; gap:8px; }

  .sl-task-grid { grid-template-columns:1fr; }

  .sl-faq-cards { grid-template-columns:repeat(2,1fr); gap:12px; }
  .sl-faq-img-wrap { height:100px; }
  .sl-faq-img-wrap img { max-height:88px; }

  .sl-upper-grid { grid-template-columns:1fr; }

  .sl-cta-btn { width:100%; text-align:center; font-size:14px; padding:14px 20px; }

  .sl-case-wrap { padding:18px 14px; }
  .sl-case-flow { grid-template-columns:1fr; }

  .sl-p-img-wrap { height:100px; }
  .sl-p-img      { max-height:88px; }
}

/*260513追記分*/
/* ============================================================
   [CAT-NAV] カテゴリナビ共通ヘッダー
============================================================ */
.sl-cat-section {
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #fefce8 100%);
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
}

/* グループ見出し（バックオフィス / カスタマー / オプション）*/
.sl-block-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sl-block-heading--mt { margin-top: 32px; }

.sl-block-bar {
  width: 5px;
  height: 24px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sl-block-bar--bo  { background: var(--sl-bo); }
.sl-block-bar--cs  { background: var(--sl-cs); }
.sl-block-bar--opt { background: var(--sl-opt); }

.sl-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sl-text);
}


/* ============================================================
   [CAT-NAV] カードグリッド
============================================================ */
.sl2-cat-grid {
  margin-bottom: 0;
}
.sl2-cat-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sl2-cat-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


/* ============================================================
   [CAT-NAV] カード本体（usecase-linked-card ベース）
============================================================ */
.sl2-cat-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(31, 41, 55, 0.07);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.sl2-cat-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(31, 41, 55, 0.13);
}
.sl2-cat-card--bo:hover  { border-color: rgba(249, 112, 64, 0.4); }
.sl2-cat-card--cs:hover  { border-color: rgba(255, 184, 0, 0.45); }
.sl2-cat-card--opt:hover { border-color: rgba(47, 163, 189, 0.4); }

/* 画像エリア */
.sl2-cat-img {
  width: 100%;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl2-cat-img--bo  { background: linear-gradient(135deg, #FFF3EE, #FFE0CC); }
.sl2-cat-img--cs  { background: linear-gradient(135deg, #FFFDF0, #FFF3CC); }
.sl2-cat-img--opt { background: linear-gradient(135deg, #E1F5EE, #C0E8DA); }

.sl2-cat-img-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  padding: 8px 8px 0;
  transition: transform 0.4s ease;
}
.sl2-cat-card:hover .sl2-cat-img-photo {
  transform: scale(1.03);
}

/* テキストエリア */
.sl2-cat-inner {
  padding: 14px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* バッジ */
.sl2-cat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 7px;
}
.sl2-cat-badge--bo  { background: var(--sl-bo-soft);  color: var(--sl-bo-dark); }
.sl2-cat-badge--cs  { background: var(--sl-cs-soft);  color: var(--sl-cs-dark); }
.sl2-cat-badge--opt { background: var(--sl-opt-soft); color: var(--sl-opt-dark); }

/* カード名・サブテキスト */
.sl2-cat-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 5px;
  line-height: 1.35;
}
.sl2-cat-sub {
  font-size: 11px;
  color: var(--sl-mute);
  line-height: 1.75;
  margin-bottom: 10px;
}

/* 詳細リンクテキスト */
.sl2-cat-link {
  font-size: 11px;
  font-weight: 700;
  margin-top: auto;
}
.sl2-cat-link--bo  { color: var(--sl-bo); }
.sl2-cat-link--cs  { color: var(--sl-cs-dark); }
.sl2-cat-link--opt { color: var(--sl-opt); }


/* ============================================================
   [SECTION] サービス各セクション共通
============================================================ */
.sl2-sec {
  padding: clamp(40px, 5vw, 64px) 0;
}
.sl2-sec--white   { background: #ffffff; }
.sl2-sec--gray    { background: #F9FAFB; }
.sl2-sec--warm    { background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%); }
.sl2-sec--blue-lt { background: linear-gradient(135deg, #f0f8fd 0%, #ffffff 100%); }

/* セクションヘッダー */
.sl2-sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.sl2-sec-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.sl2-sec-tag--bo  { background: var(--sl-bo-soft);  color: var(--sl-bo-dark); }
.sl2-sec-tag--cs  { background: var(--sl-cs-soft);  color: var(--sl-cs-dark); }
.sl2-sec-tag--opt { background: var(--sl-opt-soft); color: var(--sl-opt-dark); }

.sl2-sec-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  color: var(--sl-text);
  line-height: 1.3;
}
.sl2-sec-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.95;
  margin: 10px 0 20px;
}
.sl2-sec-desc small {
  font-size: 11px;
  color: #aaa;
}


/* ============================================================
   [TASK] タスクカード — Bレイアウト（縦並び横長）
============================================================ */
.sl2-task-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.sl2-task-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: start;
}

/* カテゴリバッジ */
.sl2-task-cat {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}
.sl2-task-cat--bo  { background: var(--sl-bo-soft);  color: var(--sl-bo-dark); }
.sl2-task-cat--cs  { background: var(--sl-cs-soft);  color: var(--sl-cs-dark); }
.sl2-task-cat--opt { background: var(--sl-opt-soft); color: var(--sl-opt-dark); }

/* タスクリスト — 縦並び */
.sl2-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sl2-task-list li {
  font-size: 12px;
  color: var(--sl-text);
  line-height: 1.75;
  padding: 5px 0 5px 18px;
  position: relative;
  border-bottom: 1px solid var(--sl-border);
}
.sl2-task-list li:last-child { border-bottom: none; }
.sl2-task-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 10px;
  font-weight: 700;
}
.sl2-task-list--bo  li::before { color: var(--sl-bo); }
.sl2-task-list--cs  li::before { color: var(--sl-cs-dark); }
.sl2-task-list--opt li::before { color: var(--sl-opt); }

/* ============================================================
   カテゴリナビ 吹き出し＋イラストセル
============================================================ */
.sl2-cat-illust {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 8px 0;
  gap: 0;
}

/* 吹き出し */
.sl2-cat-illust__bubble {
  background: #fff;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  position: relative;
  width: 100%;
  margin-bottom: 0;
}
/* 下向き三角 — 外側（ボーダー色） */
.sl2-cat-illust__bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  z-index: 0;
}
/* 下向き三角 — 内側（白塗り） */
.sl2-cat-illust__bubble::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  z-index: 2;
}

/* バックオフィス版（オレンジ） */
.sl2-cat-illust__bubble--bo {
  border: 1.5px solid rgba(249, 112, 64, .4);
  color: var(--sl-bo-dark);
}
.sl2-cat-illust__bubble--bo::after {
  border-top-color: rgba(249, 112, 64, .4);
}

/* カスタマーサポート版（ゴールド） */
.sl2-cat-illust__bubble--cs {
  border: 1.5px solid rgba(255, 184, 0, .5);
  color: var(--sl-cs-dark);
}
.sl2-cat-illust__bubble--cs::after {
  border-top-color: rgba(255, 184, 0, .5);
}

/* イラスト画像 */
.sl2-cat-illust__img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  margin-top: 8px;
}

/* スマホでは非表示 */
@media (max-width: 767px) {
  .sl2-cat-illust { display: none; }
}

/* コンサル・内製化の価格テキスト */
.sl2-task-price {
  font-size: 12px;
  color: var(--sl-text);
  margin-top: 10px;
  grid-column: 2;
}
.sl2-task-price strong {
  font-size: 15px;
  color: var(--sl-opt);
}

/* 注記テキスト */
.sl2-note-accent { font-size: 11px; color: var(--sl-bo); }
.sl2-note-mute   { font-size: 11px; color: #aaa; }


/* ============================================================
   [UPPER] 上位プラン（経理・財務セクション内）
============================================================ */
.sl2-upper-plan {
  margin-top: 28px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #EAF5FB 0%, #f0fbff 60%, #e8f4fd 100%);
  border: 1.5px solid #A8D8F0;
  border-radius: 20px;
  padding: 24px 28px 28px;
  position: relative;
  overflow: hidden;
}
.sl2-upper-plan::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 143, 196, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sl2-upper-plan::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 163, 189, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.sl2-upper-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2B8FC4, #1A6A9A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(43, 143, 196, 0.3);
}
.sl2-upper-badge svg { flex-shrink: 0; }

.sl2-upper-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A6A9A;
  margin-bottom: 8px;
}
.sl2-upper-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.9;
  margin-bottom: 18px;
}

/* 上位プランのカードスタック（縦並び横長） */
.sl2-upper-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  z-index: 1;
}
.sl2-upper-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #A8D8F0;
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
  backdrop-filter: blur(4px);
}
.sl2-upper-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #1A6A9A;
  background: #EAF5FB;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}
.sl2-upper-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sl2-upper-list li {
  font-size: 12px;
  color: #444;
  line-height: 1.75;
  padding: 4px 0 4px 16px;
  position: relative;
  border-bottom: 1px solid rgba(168,216,240,.4);
}
.sl2-upper-list li:last-child { border-bottom: none; }
.sl2-upper-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 8px;
  color: #2B8FC4;
}


/* ============================================================
   [CTA] セクション内ボタン（きらりんアニメーション）
============================================================ */
.sl2-cta-wrap { text-align: center; margin-top: 24px; }

.sl2-cta-btn {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* きらりんシマー */
.sl2-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}
/* ホバーで1回キラリ */
.sl2-cta-btn:hover::before {
  animation: sl2-kirarin 0.65s ease forwards;
}
/* 自動ループキラリ（ページ表示後3.5秒ごと） */
.sl2-cta-btn.auto-shine::before {
  animation: sl2-kirarin-loop 3.5s ease 0.8s infinite;
}

@keyframes sl2-kirarin {
  0%   { left: -100%; }
  100% { left: 140%; }
}
@keyframes sl2-kirarin-loop {
  0%   { left: -100%; }
  35%  { left: 140%; }
  100% { left: 140%; }
}

.sl2-cta-btn:hover {
  transform: translateY(-2px);
  color: inherit;
}

/* カラー別 */
.sl2-cta-btn--bo {
  background: linear-gradient(135deg, #FA5858 0%, var(--sl-bo) 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(196, 84, 32, 0.45);
}
.sl2-cta-btn--bo:hover {
  box-shadow: 0 10px 0 rgba(196, 84, 32, 0.45);
  color: #fff;
}

.sl2-cta-btn--cs {
  background: linear-gradient(135deg, var(--sl-cs) 0%, #E09000 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(160, 112, 0, 0.4);
}
.sl2-cta-btn--cs:hover {
  box-shadow: 0 10px 0 rgba(160, 112, 0, 0.4);
  color: #fff;
}

.sl2-cta-btn--opt {
  background: linear-gradient(135deg, var(--sl-opt) 0%, #1A7A96 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(26, 122, 150, 0.45);
}
.sl2-cta-btn--opt:hover {
  box-shadow: 0 10px 0 rgba(26, 122, 150, 0.45);
  color: #fff;
}

.sl2-cta-btn--up {
  background: linear-gradient(135deg, #2B8FC4, #1A6A9A);
  color: #fff;
  box-shadow: 0 6px 0 rgba(26, 106, 154, 0.4);
}
.sl2-cta-btn--up:hover {
  box-shadow: 0 10px 0 rgba(26, 106, 154, 0.4);
  color: #fff;
}


/* ============================================================
   レスポンシブ
============================================================ */

/* タブレット（〜1023px）*/
@media (max-width: 1023px) {
  .sl2-cat-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sl2-cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .sl2-upper-card  { grid-template-columns: 80px 1fr; }
}

/* スマホ（〜767px）*/
@media (max-width: 767px) {

  /* カテゴリナビ：1列 */
  .sl2-cat-grid--3,
  .sl2-cat-grid--2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* タスクカード：ラベルと一覧を縦積み */
  .sl2-task-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .sl2-task-cat {
    text-align: left;
  }

  /* 上位プランカード：縦積み */
  .sl2-upper-plan {
    padding: 18px 16px 20px;
  }
  .sl2-upper-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .sl2-upper-cat {
    text-align: left;
  }

  /* CTAボタン：フル幅 */
  .sl2-cta-btn {
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 14px 20px;
  }

  /* セクション余白を縮小 */
  .sl2-sec { padding: 2.5rem 0; }

  /* コンサル価格テキストのgrid-column解除 */
  .sl2-task-price { grid-column: unset; }
}
/* FV下イラスト帯 */
.sl-fv-illust {
  background: #ffffff;
  padding: 0 0 8px;
  text-align: center;
}
.sl-fv-illust__img {
  max-width: 400px;   /* ← 画像サイズに合わせて調整 */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .sl-fv-illust__img {
    max-width: 280px;
  }
}