/* FILE: assets/css/page-services.css */
/* 事業領域の詳細ページ（/services/argo/ /resonance/ /prometheus/ /kairos/）共通のスタイル */

/* =========================================================
   ヒーロー
   ========================================================= */
.program-hero__logo {
  margin-bottom: var(--space-md);
}

/* プログラムロゴは画像。テキスト描画しない（HANDOVER_v3.md §5-2） */
.program-hero__logo img {
  width: auto;
  max-width: min(320px, 70%);
  height: auto;
}

/* =========================================================
   サービスメニュー
   ========================================================= */
.service-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.service-menu__item {
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-width: 0;
}

.service-menu__item h3 {
  font-size: var(--fs-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--line-width) solid var(--color-line);
  margin-bottom: var(--space-xs);
  overflow-wrap: break-word;
}

/* =========================================================
   当社の強み
   ========================================================= */
.strength-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.strength-list__item {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-width: 0;
}

.strength-list__item h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-xs);
}

/* =========================================================
   独自ソリューション
   画像と本文を横並びにし、幅が狭くなったら縦積みにする。
   高さを固定しないので、本文が長くても短くても崩れない（HANDOVER_v3.md §6-1）
   ========================================================= */
.solution-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.solution-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-md);
  align-items: start;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.solution-block__body {
  min-width: 0;
}

.solution-block__body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
  overflow-wrap: break-word;
}

/* 偶数番目は画像を右に置いて、単調な並びにならないようにする */
.solution-block:nth-child(even) .wf-media {
  order: 2;
}

@media (max-width: 767px) {
  .solution-block {
    grid-template-columns: 1fr;
  }
  /* 縦積みのときは常に画像が先。order指定を打ち消す */
  .solution-block:nth-child(even) .wf-media {
    order: 0;
  }
  .solution-block__body h3 {
    font-size: var(--fs-md);
  }
}

/* =========================================================
   ARGO（マーケティングコンサルティング領域）の独自プログラム表示
   第18弾。4フェーズ A・R・G・O を同じ形の繰り返しで組む。
   フェーズが増減しても崩れないよう、個数を前提にした指定はしない。
   ========================================================= */

/* ページ冒頭のタグライン */
.argo-tagline {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  color: var(--color-ink-sub);
  letter-spacing: 0.02em;
}

/* --- こんな課題に応えます --- */
.argo-needs__list {
  margin-top: var(--space-md);
  max-width: 46em;
}

.argo-needs__list li {
  position: relative;
  padding-left: 1.4em;
  margin-top: var(--space-xs);
}

.argo-needs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 8px;
  background-color: var(--color-bar);
}

/* --- 4フェーズの索引（元資料の「A/R/G/O が並ぶ」見せ方に寄せたもの） ---
   元資料は「選択中のフェーズだけ濃色、他はグレーアウト」という
   1枚ずつのスライドでしたが、Webでは全フェーズを続けて読めたほうが
   分かりやすいため、上部の索引＋本文の縦積みに置き換えています。
   索引を押すと該当フェーズへ移動します。 */
.argo-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}

.argo-index__item {
  display: block;
  background-color: var(--color-surface);
  border: var(--line-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  transition: border-color 0.15s, background-color 0.15s;
}

.argo-index__item:hover {
  border-color: var(--color-ink);
}

.argo-index__letter {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.argo-index__name {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.argo-index__ja {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-ink-sub);
  margin-top: 0.2em;
}

/* --- 各フェーズ --- */
.argo-phase + .argo-phase {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--line-width) solid var(--color-line);
}

/* sticky headerに隠れないよう、リンクで飛んだときの余白を確保 */
.argo-phase {
  scroll-margin-top: 100px;
}

.argo-phase__letter {
  font-family: "Jost", sans-serif;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.argo-phase__ja {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink-sub);
  margin-top: 0.2em;
}

.argo-phase__body {
  margin-top: var(--space-lg);
}

/* --- 項目（アプローチ／ソリューション共通の箱） --- */
.argo-items,
.argo-solutions {
  margin-top: var(--space-lg);
}

.argo-items__label,
.argo-solutions__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  padding: 0.2em 0.8em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

/* アプローチ＝プログラムの進め方。黒でおとなしく */
.argo-items__label {
  background-color: var(--color-bar);
  color: #FFFFFF;
}

/* 独自ソリューション＝当社固有の型。CTAと同じオレンジで区別する */
.argo-solutions__label {
  background-color: var(--color-cta);
  color: #FFFFFF;
}

.argo-item {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-line);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.argo-item + .argo-item {
  margin-top: var(--space-sm);
}

.argo-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
}

/* ソリューションは見出しの色と縦線で、アプローチと見分けられるようにする。
   色だけに頼らないよう、左の線も太くしている */
.argo-item--solution {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  border-left: 3px solid var(--color-cta);
}

.argo-item--solution .argo-item__title {
  color: var(--color-cta);
}

.argo-item__media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background-color: var(--color-frame);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-sm);
}

@media (max-width: 1023px) {
  .argo-index {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .argo-index {
    grid-template-columns: 1fr;
  }
  .argo-phase__letter {
    font-size: var(--fs-xl);
  }
  .argo-item--solution {
    grid-template-columns: 1fr;
  }
}

/* --- 説明文と図版を左右に並べる（PC）。狭い画面では図版が上 --- */
.argo-phase__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-xl);
  align-items: start;
}

.argo-phase__text .measure {
  max-width: none; /* 左カラムの幅で既に読みやすい行長になっている */
}

.argo-phase__text p + p {
  margin-top: var(--space-sm);
}

/* 図版。第18弾までの max-width 指定はこちらに集約 */
.argo-phase__figure {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--color-frame);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-sm);
  margin-top: 0;
  max-width: none;
}

@media (max-width: 1023px) {
  .argo-phase__intro {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  /* 図版を説明文より上に出す */
  .argo-phase__figure {
    order: -1;
    max-width: 460px;
  }
}

/* =========================================================
   「当社の独自プログラム ARGO」概要：説明文の横に4フェーズの図版を2×2で
   ========================================================= */
.argo-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--space-xl);
  align-items: start;
}

.argo-overview__text .measure {
  max-width: none;
}

.argo-overview__text p + p {
  margin-top: var(--space-sm);
}

/* 2列・2行。A → R → G → O の順に左上から並ぶ */
.argo-overview__figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.argo-overview__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--color-frame);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-sm);
}

/* 狭い画面では、このページの他の箇所と同じく図版を先に出す */
@media (max-width: 1023px) {
  .argo-overview {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .argo-overview__figures {
    order: -1;
    max-width: 520px;
  }
}

/* =========================================================
   クリエイティブ＆コミュニケーション領域／クロスボーダー領域（第21弾）
   ========================================================= */

/* ソリューションの3つのまとまり（Strategic Modules ほか） */
.solution-group + .solution-group {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--line-width) solid var(--color-line);
}

.solution-group > .bar-label {
  font-size: var(--fs-md);
}

/* --- タブ状の見出しリンク（ARGOの4フェーズ索引と同じ考え方） ---
   押すと該当のまとまりへ移動する。JavaScriptは使っていない */
.tab-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.tab-nav__item {
  display: block;
  background-color: var(--color-surface);
  border: var(--line-width) solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  transition: border-color 0.15s;
}

.tab-nav__item:hover {
  border-color: var(--color-ink);
}

.tab-nav__title {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.tab-nav__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-ink-sub);
  margin-top: 0.2em;
}

/* 移動した先が、追従ヘッダーの下に隠れないようにする */
.solution-group[id] {
  scroll-margin-top: 100px;
}

/* --- Strategic Modules：8個のメソッドカード ---
   4列に並ぶので、サムネイル・見出し・説明の行がカードごとにずれないよう
   Subgrid で行を共有する（実績カードと同じ考え方） */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.module-card {
  display: grid;
  grid-row: span 3;                 /* サムネ / 見出し / 説明 */
  grid-template-rows: subgrid;
  row-gap: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  min-width: 0;
}

/* ★サムネイルは「スクエア」指定。
   サイト共通の16:10とは別の比率なので、ここで比率だけ上書きする。
   地色と枠線は base.css の共通ルールが当たる */
.module-card__media,
.exec-card__media,
.edu-block__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
}

.module-card__title {
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: var(--line-width) solid var(--color-line);
}

.module-card > p {
  font-size: var(--fs-sm);
}

/* --- Execution Models：2列×2行。4枚とも同じ幅・同じ高さに揃える --- */
.exec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: stretch;             /* 同じ行のカードを同じ高さに */
}

.exec-card {
  display: grid;
  grid-row: span 2;                 /* サムネ / 本文 */
  grid-template-rows: subgrid;
  row-gap: 0;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-width: 0;
}

/* サムネは正方形。カードの中央に置く */
.exec-card__media {
  max-width: 260px;
  margin-inline: auto;
}

.exec-card__body {
  padding-top: var(--space-md);
}

.exec-card__title {
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-ink);
}

.exec-card__catch {
  font-weight: var(--fw-bold);
  margin-top: var(--space-sm);
}

.exec-card__list {
  margin-top: var(--space-sm);
}

.exec-card__list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-sm);
}

.exec-card__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-ink-sub);
}

/* --- Education & Training：本文の右にサムネ --- */
.edu-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--space-xl);
  align-items: start;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

/* --- ソリューションのポイント（箇条書き） --- */
.solution-points {
  margin-top: var(--space-sm);
}

.solution-points li {
  position: relative;
  padding-left: 1.4em;
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
}

.solution-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background-color: var(--color-cta);
}

/* --- クロスボーダー：Inbound / Outbound --- */
.cross-model {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.cross-model + .cross-model {
  margin-top: var(--space-md);
}

.cross-model__list {
  margin-top: var(--space-md);
}

.cross-model__list li {
  position: relative;
  padding-left: 1.1em;
  margin-top: var(--space-xs);
}

.cross-model__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-ink-sub);
}

@media (max-width: 767px) {
  .exec-card,
  .cross-model {
    padding: var(--space-md);
  }
  .tab-nav {
    grid-template-columns: 1fr;
  }
  .exec-grid {
    grid-template-columns: 1fr;
  }
  .edu-block {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }
  .edu-block__media {
    order: -1;
    max-width: 320px;
  }
}