/* ============================================================
   Service Page — Figma design implementation
   ============================================================ */

/* ---------- Hero ---------- */
.service-hero {
  padding: 60px 40px 80px;
}

/* Figma: 左タイトル 280px / 右リード+概念図 1fr、gap 60px */
.service-hero-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: start;
  width: 100%;
}

.service-hero-text {
  min-width: 0;
}

.service-hero-text .page-page-title-en {
  margin-top: 0;
}

.service-lead {
  font: 400 16px/1.8 "Inter", "Noto Sans JP", sans-serif;
  color: #1e1e1e;
}

.service-lead p {
  margin-bottom: 1em;
}

.service-lead p:last-child {
  margin-bottom: 0;
}

.service-hero-link {
  margin-top: 24px;
}

.service-hero-link .service-card-btn {
  margin-top: 0;
}

/* ---------- 右列: リード＋概念図（Figma: pt 60px）---------- */
.service-hero-right {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 60px;
  min-width: 0;
}

.service-hero-diagram {
  flex-shrink: 0;
  width: 100%;
}

/* 概念図を1枚画像で表示する場合 */
.service-hero-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* 概念図を動画で表示する場合：横幅いっぱい。SPで高さが0にならないよう aspect-ratio で確保 */
.service-diagram--video {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}

.service-diagram--video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* 上下・左右を切らず動画全体を表示 */
}

/* ---------- Diagram（顧客を捉える / 施策を実行する）HTML版 ---------- */
.service-diagram:not(.service-diagram--video) {
  background: var(--color-bg-gray);
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.service-diagram-outer {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
}

.service-diagram-left,
.service-diagram-right {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-diagram-label {
  display: inline-block;
  font: 400 12px/1 "Inter", "Noto Sans JP", sans-serif;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.service-diagram-label--red {
  background: #f05064;
  color: #fff;
}

.service-diagram-label--blue {
  background: #4a90d9;
  color: #fff;
}

.service-diagram-caption {
  font: 700 14px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 12px;
}

.service-diagram-list {
  font: 400 13px/1.5 "Inter", "Noto Sans JP", sans-serif;
  color: #737070;
  list-style: none;
}

.service-diagram-list li + li {
  margin-top: 4px;
}

.service-diagram-creative {
  width: 100%;
}

.service-diagram-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  font: 400 11px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #737070;
  justify-content: center;
}

/* ---------- Section common ---------- */
/* サービス一覧は service-hero-right 内のため、section-inner は右列幅いっぱいに */
.service-hero-right .section-inner {
  max-width: 100%;
}

.service-section {
  padding: 0 24px 40px 24px;
  background: #fff;
}

.service-section--gray {
  background: var(--color-bg-gray);
}

/* Figma: 日本語 18px Bold + 英語 13px 横並び、gap 24px, align end */
.service-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}

.service-section-title-jp {
  font: 700 18px/1.6 "Inter", "Noto Sans JP", sans-serif;
  color: #1e1e1e;
}

.service-section-title-en {
  font: 400 13px/1.5 "Inter", sans-serif;
  color: #bfbdbd;
}

/* ---------- Card grid ---------- */
.service-card-grid {
  display: grid;
  gap: 24px;
  padding: 8px 0;
}

.service-card-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card-grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Service card（Figma 19:4504 service-box）---------- */
.service-card {
  background: #fff;
  border-radius: 20px;
  padding: 0 20px 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  min-width: 0;
  overflow: hidden;
}

.service-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ロゴエリア: カード幅いっぱい（高さ 80px） */
.service-card-head:not(.service-card-head--text) {
  height: 80px;
  min-height: 80px;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ロゴ画像（Kaname.ax 等）: エリア内に収めて中央配置 */
.service-card-head-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ロゴなしカード: テキストタイトル（上下中央揃え。タイトルに<br>が入っても中央に収める） */
.service-card-head--text {
  height: 80px;
  min-height: 80px;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.service-card-head--placeholder {
  background: #e8e6e6;
  border-radius: 10px;
}

/* タイトルの margin をリセットし、<br> で複数行でも head 内で上下中央になる */
.service-card-head--text .service-card-title {
  margin: 0;
  text-align: center;
}

/* head の直下に配置・カード幅の中央に表示（ロゴなしカードのみ） */
.service-card-title-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-aa-red);
  align-self: center;
}

.service-card-title {
  font: 700 14px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.service-card-title br {
  display: block;
}

.service-card-logo {
  font: 700 18px/1.3 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
}

.service-card-logo--3c1 {
  font-size: 24px;
  font-weight: 700;
}

.service-card-desc {
  color: #737070;
  font: 400 13px/1.5 "Inter", "Noto Sans JP", sans-serif;
  margin-bottom: 10px;
  flex: 1;
}

/* Figma cta-box: gap 12px、ボタンは w-full・中央揃え */
.service-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 400 13px/1 "Inter", "Noto Sans JP", sans-serif;
  margin-top: auto;
  width: 100%;
}


.service-card-btn .icon-chevron-right-small {
  flex-shrink: 0;
}

/* アウトラインボタン（お問い合わせ用）*/
.btn-outline-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  background: transparent;
  border: 1px solid #302a2b;
  border-radius: 100px;
  color: #302a2b;
  font: 400 12px/1 "Inter", "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  white-space: nowrap;
}

.btn-outline-small:hover {
  opacity: 0.85;
  background: rgba(48, 42, 43, 0.05);
}

/* サービスページカード内: Figma 赤枠・赤文字 (#F05064) */
.service-card .btn-outline-small,
.service-card .service-card-btn.btn-outline-small {
  border-color: #f05064;
  color: #f05064;
  margin-bottom: 15px;
}

.service-card .btn-outline-small:hover,
.service-card .service-card-btn.btn-outline-small:hover {
  background: rgba(240, 80, 100, 0.05);
}

/* ---------- Responsive ---------- */
/* 1081px〜1599px: 4列だとボタンテキストがはみ出すため3列に */
@media (min-width: 1081px) and (max-width: 1599px) {
  .service-card-grid--4col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1279px) {
  .service-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1079px) {
  .service-hero {
    padding: 40px 24px 60px;
  }

  .service-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-hero-right {
    padding-top: 0;
    gap: 40px;
  }

  .service-hero-diagram {
    max-width: 360px;
    margin: 0 auto;
  }

  .service-diagram-outer {
    flex-direction: column;
    max-width: 280px;
    margin: 0 auto;
  }

  .service-section {
    padding: 0 0 40px 0;
  }

  .service-card-grid--3col,
  .service-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .service-hero {
    padding: 32px 16px 48px;
  }

  /* SP: 動画エリアが潰れないよう高さを確保（aspect-ratio のフォールバック） */
  .service-hero-diagram {
    min-height: 200px;
  }
  .service-diagram--video {
    min-height: 200px;
  }

  .page-service .site-main .page-breadcrumb {
    margin-bottom: 40px;
    font-size: 12px;
  }

  .service-hero-text .page-page-title-en {
    font-size: 40px;
  }

  .service-hero-text .page-page-title-jp {
    font-size: 20px;
  }

  .service-lead {
    font-size: 14px;
  }

  .service-section-title-jp {
    font-size: 20px;
  }

  .service-card-grid--3col,
  .service-card-grid--4col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 0 20px 20px;
  }

  .service-card-head {
    min-height: 100px;
    height: auto;
  }

  .service-card-head--text {
    min-height: 100px;
    height: auto;
  }
}