/* =========================================================
   sections/solution.css — サービス（Figma フレーム "solution" / 1440×1422）
   【C-2 パイロット：2層構造＋レスポンシブ】
   - 2層構造：外側 .solution        = 全幅の背景レイヤー（単色）
              内側 .solution__inner = max-width:1440 中央寄せのコンテンツ（cqw の基準）
     ※後続の画像セクションでは「外側に背景画像を敷く」だけで同じ骨格を横展開できる。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。
     サイズ・余白はトークン参照のみ（生px禁止）。@media 条件式は var() 不可のため
     px を直書きし、トークン名（--bp-tablet / --bp-sp）をコメント併記する。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー（画像セクションではここに背景画像） ---- */
.solution {
  background: var(--color-cream);
  padding-block: var(--space-72);   /* 上下 70px 相当 */
  overflow: hidden;                 /* 全幅背景・装飾のはみ出し抑制 */
}

/* ---- 内側：中央寄せコンテンツ（cqw の基準＝1440px 以下のこの幅） ---- */
.solution__inner {
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max);  /* 1440px */
  margin-inline: auto;
}

/* ---- ヘッダー（Figma: 上部タイトル群）---- */
.solution__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);          /* 9px */
  text-align: center;
}

/* サブタイトル＋背景の薄い「Service」（Figma: subbox） */
.solution__sub {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-16);   /* サブタイトル↔メイン見出し：head gap8 に+16＝24px */
}
/* 装飾「Service」Arial Bold Italic / 薄黄 / 70px（重なり装飾のため absolute） */
.solution__sub-deco {
  position: absolute;
  top: -3.2cqw;                 /* 上へ移動（約-46px）＝前面の黒文字との被りを軽減 */
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-4xl);     /* 70px */
  line-height: 1;
  color: rgba(252, 203, 12, 0.2);
  white-space: nowrap;
  pointer-events: none;
}
.solution__sub-title {
  position: relative;
  font-weight: 700;
  font-size: var(--fs-lg);      /* 30px */
  line-height: 1;
  color: var(--color-black);
  white-space: nowrap;
}

/* メイン見出し（Figma: maintext）56.579px ＋ 背景の縞帯（section title bg） */
.solution__main-wrap {
  position: relative;
  width: 54.861cqw;             /* 790px：mainbox 幅 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* メイン見出し。縞帯は「下端からはみ出す別要素」.solution__main-bar で表現（文字は前面）。 */
.solution__main {
  position: relative;           /* 帯 .solution__main-bar の配置基準 */
  z-index: 1;                   /* 文字を帯より前面に */
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-2xl);     /* 56.579px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
/* 縞帯：文字下端に軽く掛かりつつ下へはみ出す（bottomマイナス）。文字グリフの背後（z-index:-1）。 */
.solution__main-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.8cqw;              /* 下へのはみ出しを少し増やす（要目視微調整） */
  height: 2cqw;                 /* 帯の太さ ≈29px（約2倍）。要目視微調整 */
  z-index: -1;                  /* 文字（前面）の背後に */
  background: repeating-linear-gradient(
    -45deg,
    var(--color-stripe) 0,
    var(--color-stripe) 0.54cqw,    /* 線の太さ（0.18→0.54・3倍） */
    transparent 0.54cqw,
    transparent 1.47cqw             /* 1周期（0.49→1.47・3倍）＝密度1/3 */
  );
  pointer-events: none;
}

/* リード（Figma: textx）24px / Regular */
.solution__lead {
  margin: var(--space-24) 0 0;  /* 見出し↔リード：head gap8 に+24＝32px */
  font-weight: 400;
  font-size: var(--fs-base);    /* 24px */
  line-height: 1.6;
  color: var(--color-black);
}

/* ---- 3 つの特長（Figma: 行コンテナ）---- */
.solution__rows {
  width: 76.729%;               /* 1104.894px */
  margin: var(--space-96) auto 0; /* ヘッダーとの間 96px 相当 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* 行は左揃え（行幅が異なる） */
  gap: var(--space-88);         /* 88px */
}

.solution__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-56);         /* 60px */
}
.solution__row--rev { flex-direction: row; }  /* icon→content は HTML 順で対応 */

/* テキスト側（Figma: contentframe）番号 + textbox */
.solution__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-16);         /* 17px */
  min-width: 0;                 /* タブレットで flex 子が縮めるように */
}
.solution__num {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);     /* 50.667px */
  line-height: 1;
  color: var(--color-primary);
  white-space: nowrap;
}
.solution__textbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);          /* 8px */
}
.solution__textbox--w1 { width: 33.125cqw; }  /* 477px */
.solution__textbox--w2 { width: 43.264cqw; }  /* 623px */
.solution__textbox--w3 { width: 45.833cqw; }  /* 660px */

.solution__row-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);      /* 42px */
  line-height: 1;
  color: var(--color-black);
}
.solution__row-desc {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-base);    /* 24px */
  line-height: 1.5;
  color: var(--color-black);
}

/* アイコン（Figma: icon01〜03 / PNG）。幅は実寸比、高さ auto */
.solution__icon { height: auto; }
.solution__icon--01 { width: 31.875cqw; }   /* 459px */
.solution__icon--02 { width: 23.056cqw; }   /* 332px */
.solution__icon--03 { width: 21.597cqw; }   /* 311px */

/* =========================================================
   レスポンシブ切り替え（このセクションで全8セクションの「型」を確立）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット（768–1023px：--bp-sp 〜 --bp-tablet 未満）----
   独自レイアウトは作らず、PC の並びのまま幅に追従させて詰めるだけ。
   幅は cqw なので自動で追従。固定px（番号・gap）が効いて窮屈になる分を調整。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .solution__rows { width: 88%; }            /* 行の使用幅を広げ、はみ出しを回避 */
  .solution__row  { gap: var(--space-32); }  /* 画像↔テキストの間隔を詰める */
}

/* SP専用の改行制御ユーティリティ：PC/共通では改行なし（display:none で br 無効＝PC不変）。
   SP のみ @media 内で display:inline にして「最短・最安の／AIシステム開発」の改行を有効化。 */
.sp-only { display: none; }

/* ---- SP（≤767px：--bp-sp 未満）：縦積みに再構成（最小375px 合格基準）---- */
@media (max-width: 767px) {
  .sp-only { display: inline; }   /* SPのみ改行を有効化 */

  /* 左右に画面端ガター（16px）。密着を防ぐ */
  .solution__inner { padding-inline: var(--container-pad); }
  /* SP標準：セクション上下64px（外側 .solution に padding-block があるため外側を上書き） */
  .solution { padding-block: var(--space-64) 0; } /* 上64維持 / 下0（after見出しとの余白を詰める・ユーザー指定） */

  /* 見出しは 1〜2 段下げ（トークン付け替え）。長い行は折り返し許可 */
  /* 「Service」を上へ。少し文字にかぶる程度に配置（SP：deco56px、top -48pxで下端がサブタイトルに軽く重なる。実機で微調整可） */
  .solution__sub-deco  { font-size: var(--fs-2xl); top: calc(-1 * var(--space-40)); } /* 72→56 / top -48→-40（8px下げ） */
  .solution__sub-title { font-size: var(--fs-base); white-space: normal; line-height: 1.4; } /* SP：24px・2行の行間を広げる */
  .solution__main-wrap { width: 100%; }                                /* 固定cqw幅をやめる */
  .solution__main      { font-size: var(--fs-lg); white-space: normal; line-height: 1.3; }/* 56→32・折返し・2行の行間を広げる（基底1→1.3） */

  /* 縞マーカー：SPは全幅の下線帯(.solution__main-bar)をやめ、1行目「最短・最安の」と
     2行目「AIシステム開発」の文字幅内・下半分に同じ縞下線を付ける（PCの .solution__main-bar は display:none）。
     縞は em/em2 の背景として描画＝文字は前面／各行の文字幅にフィット。 */
  .solution__main-bar { display: none; }
  .solution__main-em,
  .solution__main-em2 {
    background-image: repeating-linear-gradient(
      -45deg,
      var(--color-stripe) 0,
      var(--color-stripe) 0.8cqw,       /* 線の太さ（0.54→0.8・太く） */
      transparent 0.8cqw,
      transparent 2cqw                  /* 1周期（1.47→2・線も隙間も広げて一本を太く） */
    );
    background-repeat: no-repeat;
    background-position: left bottom;    /* 下端に寄せる */
    background-size: 100% var(--space-24); /* 文字幅×下半分（太め：下24px）。実機で微調整可 */
  }
  .solution__lead      { font-size: var(--fs-sm); }                    /* SP本文統一 24→16 */

  /* 特長リスト：全行 column（縦積み） */
  .solution__rows {
    width: 100%;
    align-items: stretch;
    margin-top: var(--space-40);   /* PC の 96→40 に圧縮 */
    gap: var(--space-40);
  }
  .solution__row,
  .solution__row--rev {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }
  /* row02 は HTML が画像→テキストの順。order で「テキスト→画像」に統一 */
  .solution__row--rev .solution__icon { order: 1; }

  /* 番号+テキストを縦積みに（01→見出し→説明文）。左寄せ・番号↔テキストは8px */
  .solution__content   { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .solution__num       { font-size: var(--fs-xl); }  /* 50→42 */
  .solution__row-title { font-size: var(--fs-28); }  /* SP：1段戻し 24→28 */
  .solution__row-desc  { font-size: var(--fs-sm); }  /* SP本文統一 24→16 */
  /* 説明文の強制改行はSPで無効化＝自然折返し（PCの<br>は維持＝PC表示不変） */
  .solution__row-desc br { display: none; }

  /* 固定幅(cqw)をやめて幅いっぱいに */
  .solution__textbox--w1,
  .solution__textbox--w2,
  .solution__textbox--w3 { width: 100%; }

  /* イラストは高さ基準で統一（横長/縦長の大きさ差を解消）。
     幅は中身のアスペクト比に任せ、高さ上限200pxで揃える。中央寄せ。 */
  .solution__rows .solution__icon {
    width: auto;                /* 基底の cqw 幅指定(--01/02/03)を解除 */
    height: auto;               /* 縦横比維持 */
    max-height: 200px;          /* 高さの上限を統一（画像実寸系のためpx可） */
    display: block;
    margin-inline: auto;        /* ブロック中央寄せ */
    align-self: center;         /* flex縦積み内でも中央 */
  }
}

/* ---- 狭いPC（1024–1370）：solution 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.solution__inner=container-type:inline-size 基準）に換算。inner は padding-inline 無し
   → 1370時 content-box W=1370px、1cqw=13.70px、換算＝px÷13.70。1370で現行px一致（1370/1371段差なし）→1024へ比例縮小。
   white-space は未指定＝基底の nowrap 維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371(完成版1440)/タブレット(768–1023)/SP(≤767) には一切適用されない。
   ★既存cqw/%（main-wrap 54.861cqw・textbox--w1/2/3・icon--0x・rows 76.729%・bar/deco の cqw 等）は基底のまま比例追従。
   ★.solution(外側) の padding-block はコンテナ外のため cqw化せず据え置き。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .solution__head      { gap: 0.584cqw; }                 /* 8 */
  .solution__sub       { margin-bottom: 1.168cqw; }       /* 16 */
  .solution__sub-deco  { font-size: 5.255cqw; }           /* 72 */
  .solution__sub-title { font-size: 2.336cqw; }           /* 32 */
  .solution__main      { font-size: 4.088cqw; }           /* 56 */
  .solution__lead      { font-size: 1.752cqw; margin-top: 1.752cqw; } /* 24 / 上margin24 */
  .solution__rows      { margin-top: 7.007cqw; gap: 6.423cqw; }       /* 96 / 88 */
  .solution__row       { gap: 4.088cqw; }                 /* 56 */
  .solution__content   { gap: 1.168cqw; }                 /* 16 */
  .solution__num       { font-size: 4.088cqw; }           /* 56 */
  .solution__textbox   { gap: 0.584cqw; }                 /* 8 */
  .solution__row-title { font-size: 3.066cqw; }           /* 42 */
  .solution__row-desc  { font-size: 1.752cqw; }           /* 24 */
}