/* ====================================================================
   TripClear — EC運用・システム連携支援ページ専用レイヤ（/sns/ec/）
   sns.css / pov.css / service-page.css のトークンを前提に、
   このページにしか出てこないセクションだけを .ec- prefix で足す。

   守っていること（.claude/skills/design-fb/SKILL.md）:
     - グラデーションは --tc-grad のみ。新しい紫を増やさない
     - 角丸は --radius-sm / md / lg のみ（ピル型の 999px は既存と同じ扱い）
     - ダーク面は --home-*、ライト面は --tc-light-* を再利用
     - 図はストックフォトや生成イラストではなく、実画面に近い HTML/CSS モック
       （recruit の .rc-jobcard / .rc-vertical と同じ考え方）
     - 面の並び: ヒーロー(紺) → Approach(#f5f5f6) → Why(紺) → Service(#f5f5f6)
       → Scene(紺面に白カード) → Process(#f5f5f6) → FAQ(紺) → Services(サンセット) → CTA(紺)
     - スマホ（〜600px）は PC の縮小ではなく縦積み専用レイアウト
   ==================================================================== */

.ec-page { line-break: strict; }

.ec-page .sns-section-sub,
.ec-intro-title,
.ec-why-card-title,
.ec-svc-title,
.ec-svc-lead { text-wrap: balance; }

/* ==========================================================================
   共通：セクション末尾の締めの帯
   ========================================================================== */
.ec-band {
  position: relative;
  margin-top: 56px;
  padding: 6px 0 6px 26px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  color: var(--home-ink);
  max-width: 30em;
}
.ec-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--tc-grad);
}

/* ==========================================================================
   S1 APPROACH — ライト面。宣言 → 仕組みの図 → 対応ツール表
   ========================================================================== */
.ec-intro { margin-top: 36px; }
.ec-intro-body { max-width: 52em; }
.ec-intro-eyebrow {
  font-family: var(--font-body-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-light-ink-3);
  margin-bottom: 8px;
}
.ec-intro-title {
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  color: var(--tc-light-ink);
  margin-bottom: 10px;
}
.ec-intro-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--tc-light-ink-2);
}
/* --- 仕組みの図: 集客 → 受け皿（当社） → 成果。枠なし。イラスト＋ラベル＋プレーンなリスト --- */
.ec-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.15fr) 32px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 40px;
}
.ec-map-step img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
  mix-blend-mode: multiply;
}
.ec-map-col-label {
  margin: 12px 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--tc-light-ink);
}
.ec-map-col-label--hub {
  color: transparent;
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.ec-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 300px;
}
.ec-map-list li {
  padding: 7px 0;
  border-top: 1px solid var(--tc-light-line);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--tc-light-ink-2);
}
.ec-map-step--hub .ec-map-list li { color: var(--tc-purple-deep); font-weight: 700; }
.ec-map-hub-foot {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tc-light-ink-3);
}
/* 矢印はイラストの高さの中央に置く（260px の画像の半分 − 矢印の半分） */
.ec-map-link {
  display: block;
  width: 32px;
  height: 22px;
  margin-top: 119px;
  background: #7b6bff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- 対応ツール表（チップではなく仕様表の体裁） --- */
.ec-tools-table {
  margin-top: 28px;
  border-top: 1px solid rgba(20, 23, 46, 0.18);
}
.ec-tools-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--tc-light-line);
}
.ec-tools-cat {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--tc-light-ink);
}
.ec-tools-cat small {
  display: block;
  font-family: var(--font-body-en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-light-ink-3);
  margin-bottom: 2px;
}
.ec-tools-names {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--tc-light-ink-2);
}
.ec-tools-names span { display: inline-block; }
.ec-tools-names span + span::before {
  content: "／";
  margin: 0 0.35em;
  color: var(--tc-light-ink-3);
}
.ec-tools-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--tc-light-ink-3);
}

/* ==========================================================================
   S2 WHY — ダーク面。上罫線だけの3カード（recruit / japan-entry と同型）
   ========================================================================== */
.ec-why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
}
.ec-why-card { padding: 24px 0 0; border-top: 1px solid var(--home-line); }
.ec-why-ico { display: inline-flex; margin-bottom: 16px; color: var(--home-accent-2); }
.ec-why-ico svg { width: 24px; height: 24px; }
.ec-why-card-title { font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--home-ink); margin-bottom: 6px; }
.ec-why-card-lead { font-size: 13px; font-weight: 700; color: var(--home-accent-2); margin-bottom: 10px; }
.ec-why-card-desc { font-size: 13.5px; line-height: 1.9; color: var(--home-ink-2); }

/* ==========================================================================
   S3 SERVICE — ライト面。領域ごとに「見出し＋リード」の左列と、
   「できるようになること」3つ（codex イラスト＋一言）の右列。枠線・カードは使わない
   ========================================================================== */
.ec-svc-list { margin-top: 40px; }
.ec-svc {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 52px 0;
  border-top: 1px solid var(--tc-light-line);
}
.ec-svc-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-body-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-light-ink-3);
  margin-bottom: 12px;
}
.ec-svc-eyebrow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--tc-grad);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.ec-svc-eyebrow em {
  font-style: normal;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tc-purple-deep);
}
.ec-svc-eyebrow em::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 10px;
  background: var(--tc-light-line);
  vertical-align: -1px;
}
.ec-svc-title {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  color: var(--tc-light-ink);
  margin-bottom: 8px;
}
.ec-svc-lead {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--tc-purple-deep);
}

/* --- できるようになること: イラスト ＋ 一言 × 3（Process の flow 画像と同じく multiply で地に溶かす） --- */
.ec-can {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.ec-can-item { margin: 0; }
.ec-can-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  mix-blend-mode: multiply;
}
.ec-can-title {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  color: var(--tc-light-ink);
  text-wrap: balance;
}
.ec-can-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--tc-light-ink-2);
}
.ec-svc-note {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--tc-light-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tc-light-ink-3);
}

/* Service（ライト面）の直後に Process（ライト面）が続くので、
   1px の境界線が2本重なって太く見えるのを1本にまとめる */
.body-home .ec-menu-sec + .sns-details--light { border-top: none; }

/* ==========================================================================
   S6 FAQ — ダーク面。details/summary
   ========================================================================== */
.ec-faq { margin-top: 40px; border-top: 1px solid var(--home-line); }
.ec-faq-item { border-bottom: 1px solid var(--home-line); }
.ec-faq-q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 48px 22px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--home-ink);
}
.ec-faq-q::-webkit-details-marker { display: none; }
.ec-faq-q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background: var(--home-accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s;
}
.ec-faq-item[open] .ec-faq-q::after { transform: rotate(45deg); }
.ec-faq-a { padding: 0 0 24px; }
.ec-faq-a p { font-size: 14px; line-height: 1.95; color: var(--home-ink-2); max-width: 44em; }

/* ==========================================================================
   タブレット（〜1000px）
   ========================================================================== */
@media (max-width: 1000px) {
  .ec-map { grid-template-columns: 1fr; gap: 12px; }
  .ec-map-link { transform: rotate(90deg); margin: 0 auto; }
  .ec-map-step { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .ec-map-step img { grid-row: 1 / span 3; max-width: none; }
  .ec-map-col-label { margin-top: 0; }
  .ec-tools-row { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
  .ec-why-cards { gap: 28px; }
  .ec-svc { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .ec-can { gap: 20px; }
}

/* ==========================================================================
   スマホ（〜600px）: 縦積み専用レイアウト
   ========================================================================== */
@media (max-width: 600px) {
  .ec-band { margin-top: 36px; font-size: 16px; padding-left: 18px; }

  .ec-intro { margin-top: 24px; }
  .ec-intro-title { font-size: 17px; }
  .ec-intro-desc { font-size: 13.5px; }

  .ec-map { margin-top: 28px; gap: 8px; }
  .ec-map-step { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
  .ec-map-col-label { font-size: 14.5px; margin-bottom: 4px; }
  .ec-map-list li { padding: 5px 0; font-size: 13px; }

  .ec-tools-table { margin-top: 20px; }
  .ec-tools-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .ec-tools-names { font-size: 13px; line-height: 1.9; }

  .ec-why-cards { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
  .ec-why-card { padding-top: 18px; }

  .ec-svc-list { margin-top: 28px; }
  .ec-svc { padding: 30px 0; gap: 18px; }
  .ec-svc-title { font-size: 18px; }
  .ec-svc-lead { font-size: 14px; }
  /* スマホは「画像を左・一言を右」の1カラムリストに組み替える（画像を縦に並べない） */
  .ec-can { grid-template-columns: 1fr; gap: 14px; }
  .ec-can-item { display: flex; align-items: center; gap: 14px; }
  .ec-can-item img { flex: 0 0 auto; width: 96px; }
  .ec-can-body { min-width: 0; }
  .ec-can-title { margin: 0 0 4px; font-size: 14.5px; }
  .ec-can-desc { font-size: 12.5px; line-height: 1.7; }

  .ec-faq { margin-top: 28px; }
  .ec-faq-q { padding: 16px 36px 16px 0; font-size: 14.5px; }
  .ec-faq-q::after { width: 18px; height: 18px; top: calc(50% - 9px); right: 0; }
  .ec-faq-a { padding-bottom: 18px; }
  .ec-faq-a p { font-size: 13.5px; }
}