@charset "UTF-8";

/* =========================================================
   事例紹介ページ（導入事例 詳細記事）専用スタイル
   共通トークン・部品（common.css）とサイト規約に準拠。
   - コンテナ幅は min(84%, 65rem)（solution 系ページと同一）
   - パネル/帯の色は #EFF0FF、境界線は #E5EBF3
   - アイコンは共通 c-svg-icon システム（/assets/icons/）を使用
   ========================================================= */

.case-article {
  position: relative;
  line-height: 1.7;
}

/* --- 共通：フルワイド帯とインナーコンテナ --- */
/* dynamics.css の .solution-article__content と同じ考え方で、
   縦フレックス＋子の margin-inline: auto により直下の要素を左右中央に配置する。
   （.case-section__inner は自身の inline-size があるため見た目は従来どおり） */
.case-section {
  display: flex;
  flex-flow: column nowrap;
  padding: 2.5rem 0 3rem;
}

.case-section > * {
  margin-inline: auto;
}

.case-section.--lavender {
  background-color: #EFF0FF;
}

.case-section.--white {
  background-color: #fff;
}

/* 上余白を詰めるセクション（導入事例一覧リンクなど）。
   クラス2つ分の詳細度で、各ブレークポイントの padding 指定に優先する。 */
.case-section.--no-padding-top {
  padding-block-start: 0;
}

.case-section__inner {
  inline-size: min(84%, 65rem);
  margin-inline: auto;
}

/* --- 見出し（01 課題と効果 等） --- */
.case-section__heading {
  display: flex;
  align-items: baseline;
  column-gap: .75rem;
  margin-block-end: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.4;
  letter-spacing: .06rem;
}

.case-section__num {
  flex: 0 0 auto;
  color: var(--sys-hex-primary);
  font-family: var(--sys-font-family-en);
  font-size: 1.75rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   ヒーロー（詳細トップ：青帯＋バッジ＋タイトル＋画像）
   ========================================================= */
.case-hero {
  background-color: var(--sys-hex-primary);
  color: #fff;
  border-radius: 0 0 1.5rem 1.5rem;
}

.case-hero__inner {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  inline-size: min(84%, 65rem);
  margin-inline: auto;
  padding: 2.5rem 0 3rem;
}

.case-hero__body {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  row-gap: .5rem;
}

.case-hero__category {
  display: inline-flex;
  align-items: center;
  padding: .25rem 1rem;
  border-radius: .375rem;
  background-color: #fff;
  color: var(--sys-hex-primary);
  font-size: 1.25rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
}

.case-hero__title {
  margin-block: 0;
  font-size: 1.75rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.4;
  letter-spacing: .04rem;
}

/* タブレット以下（〜991px）はタイトル内の <br> を無効化して改行しない。
   PC（≥992px、ヒーローが2カラムになる幅）では意図位置で改行する。 */
.case-hero__title br {
  display: none;
}

.case-hero__media {
  /* Safari は aspect-ratio と max-block-size の組み合わせで幅を縦横比から
     逆算し、コンテナ幅まで伸びないことがあるため幅を明示する。 */
  inline-size: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-block-size: 110px;
  background-color: rgba(255, 255, 255, .15);
}

.case-hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* =========================================================
   01 課題と効果（課題→効果フロー）
   ========================================================= */
.case-flow {
  display: flex;
  flex-flow: column nowrap;
  /* スマホは 1 行が「課題→矢印→効果」の縦積みになるため、
     行どうしの区別がつくよう PC（1rem）より広めに取る */
  row-gap: 2rem;
}

.case-flow__row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "problem"
    "arrow"
    "effect";
  align-items: center;
  gap: 0.5rem;
}

.case-flow__box {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 0;
  padding: 1rem 1.5rem;
  border-radius: .5rem;
  /* 課題・効果どちらにも、下方向へやわらかく広がる影を付ける */
  box-shadow: 5px 7px 12px rgba(0, 0, 0, .48);
}

.case-flow__box.--problem {
  grid-area: problem;
  background-color: #fff;
}

.case-flow__box.--effect {
  grid-area: effect;
  background-color: var(--sys-hex-primary);
  color: #fff;
}

.case-flow__label {
  font-size: 1rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
  color: #4d4d4d;
}

.case-flow__box.--effect .case-flow__label {
  color: #fff;
}

.case-flow__text {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* 矢印は共通 c-svg-icon --arrow-right を使用。
   モバイルは下向き（課題→効果を縦に接続）、PC は右向き。 */
.case-flow__arrow {
  grid-area: arrow;
  justify-self: center;
  /* スマホは縦積みの箱をつなぐ役割のため控えめに（768px 以上で 2.75rem に拡大） */
  --svg-icon-size: 1.75rem;
  --svg-icon-fg: #3b3b44;
  rotate: 90deg;
}

/* =========================================================
   02 ソリューションおよび当社選定の理由（箇条書き）
   ========================================================= */
.case-points {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 0.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: .75rem;
  background-color: #EFF0FF;
}

.case-points__item {
  display: flex;
  align-items: flex-start;
  column-gap: .75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.case-points__item::before {
  content: "";
  flex: 0 0 auto;
  inline-size: .625rem;
  block-size: .625rem;
  margin-block-start: .5em;
  border-radius: 50%;
  background-color: var(--sys-hex-primary);
}

/* =========================================================
   03 導入の効果と今後の展開（本文）
   ========================================================= */
.case-section__lead {
  font-size: 1rem;
  line-height: 2;
}

/* =========================================================
   04 / 05 概要ボックス
   ========================================================= */
.case-infobox {
  display: flex;
  flex-flow: column nowrap;
  row-gap: .5rem;
  padding: 1.5rem 1.75rem;
  border-radius: .75rem;
  font-size: 1rem;
  line-height: 1.75;
}

.case-infobox.--lavender {
  background-color: #EFF0FF;
}

.case-infobox.--white {
  background-color: #fff;
  border: 1px solid #E5EBF3;
}

.case-related {
  display: flex;
  flex-flow: column nowrap;
  row-gap: .25rem;
  padding-block-start: 1.75rem;
  color: rgb(var(--sys-rgb-text) / 45%);
}

.case-related__title {
  /* 本文（1rem）より大きく、セクション見出し（1.3rem）より小さいサイズ */
  font-size: 1.25rem;
  font-weight: var(--sys-font-weight-bold);
}

.case-related__empty {
  font-size: .9375rem;
}

/* 関連記事リンク一覧 */
.case-related__list {
  display: flex;
  flex-flow: column nowrap;
  row-gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-related__link {
  display: inline-flex;
  align-items: center;
  column-gap: .375rem;
  color: var(--sys-hex-primary);
  font-size: 1rem;
  font-weight: var(--sys-font-weight-medium);
  line-height: 1.6;
  text-decoration: none;
  --svg-icon-size: .875rem;
  --svg-icon-fg: var(--sys-hex-primary);
}

@media (any-hover: hover) {
  .case-related__link:hover {
    text-decoration: underline;
  }
}

/* =========================================================
   下部 CTA バー
   ========================================================= */

.solution-article__banner {
  display: none;
  /* position: -webkit-sticky;
  position: sticky; */
  bottom: 0;
  padding: 1rem 0;
  background-color: #eff0ffe6
}

.solution-article__banner>* {
  margin-inline:auto
}

.solution-request-banner {
  display: none;
  max-inline-size: min(45rem,100%)
}

@media (min-width: 768px) {
  .solution-article__banner {
    display: revert;
    padding: 1.5rem 0
  }

  .solution-request-banner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem
  }
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (min-width: 768px) {
  .case-section__heading {
    font-size: 2rem;
    letter-spacing: .16rem;
  }

  .case-section__num {
    font-size: 2.25rem;
  }

  .case-hero__title {
    font-size: 2.25rem;
  }

  /* スマホ（〜767px）のみ高さを詰め、768px 以上は従来どおり */
  .case-hero__media {
    max-block-size: 140px;
  }

  /* 01：課題 → 矢印 → 効果 の横並び */
  .case-flow {
    row-gap: 1.5rem;
  }

  .case-flow__row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "problem arrow effect";
  }

  .case-flow__box {
    block-size: 100%;
    padding: 0.75rem 1.75rem;
  }

  .case-flow__arrow {
    --svg-icon-size: 2.75rem;
    rotate: none;
  }

  .case-points {
    padding: 1rem 2.5rem;
  }

  .case-infobox {
    padding: 1rem 2.5rem;
  }
}

@media (min-width: 992px) {
  .case-section {
    padding: 2rem 0 3rem;
  }

  /* ヒーロー：≥992px（PC）で左テキスト＋右画像の 2 カラム。
     タブレット以下（〜991px）は縦並び（基本スタイル）。
     本文の左端は他セクション（min(84%,65rem) 中央寄せ）と揃え、
     画像はヒーロー帯の右端いっぱいまで広げる（右パディング 0）。 */
  .case-hero__inner {
    flex-flow: row nowrap;
    align-items: center;
    gap: 2.5rem;
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding: 2rem 0;
    padding-inline-start: max(8%, calc(50% - 32.5rem));
  }

  .case-hero__body {
    flex: 1 1 auto;
  }

  .case-hero__media {
    flex: 0 0 50%;
    aspect-ratio: 5 / 2;
  }

  .case-hero__title {
    font-size: 2.5rem;
  }

  /* PC（≥992px）では <br> を有効化して意図位置で改行 */
  .case-hero__title br {
    display: inline;
  }
}