/* ==========================================================================
   AI Solution LP - スタイルシート
   構成:
     1. 変数・基本設定
     2. 共通パーツ（ユーティリティ：コンテナ／斜めカット／すかし文字／SP・PC改行など）
     3. ヘッダー
     4. ヒーロー（末尾にindex2/index3用の画像差し替え・グラデーション配色バリエーションを含む）
     5. AI Vision
     6. WHY 富士ソフト（Point 1〜3 の図解含む）
     7. 画像モーダル（「資料をみる」のポップアップ）
     8. AI戦略 3本柱
     9. 事例紹介
     10. お問い合わせ
     11. フッター
     12. レスポンシブ（スマホ表示）
   ※ クラス名は他システムとの干渉を避けるため "aisol-" を接頭辞として統一しています。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数・基本設定
   -------------------------------------------------------------------------- */
:root {
  /* カラーパレット：ロゴの青をベースにしたブランドカラー */
  --aisol-navy: #0a2c66;        /* 見出し・濃い背景に使う紺色 */
  --aisol-blue: #1550d6;        /* メインのアクセントブルー（ボタン・線など） */
  --aisol-blue-dark: #0d3aa8;   /* ホバー時などの濃いブルー */
  --aisol-blue-light: #eaf2fd;  /* セクション背景の薄い水色 */
  --aisol-tint-bg: #dee9fb;     /* AI Vision / AI戦略セクションの、白より少し濃いめの背景色 */
  --aisol-text: #222833;        /* 本文の基本文字色 */
  --aisol-text-sub: #55606e;    /* 補足文字色（少し薄いグレー） */
  --aisol-white: #ffffff;
  --aisol-border: #d7e2f3;      /* 罫線・区切り線 */

  /* レイアウト */
  --aisol-max-width: 1120px;    /* コンテンツの最大幅 */

  /* フォント */
  --aisol-font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* リセット的な最低限の初期化 */
.aisol-page * {
  box-sizing: border-box;
}
.aisol-page {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 何らかの要素が横にはみ出しても横スクロールバーが出ないようにする安全策 */
  font-family: var(--aisol-font);
  color: var(--aisol-text);
  line-height: 1.8;
  background: var(--aisol-white); /* 素材が白背景のため、ページ全体も白ベースに統一 */
  -webkit-font-smoothing: antialiased;
}
.aisol-page img { max-width: 100%; display: block; }
/* :where()で詳細度を0に抑え、各コンポーネント側の指定（詳細度0,1,0）が
   確実に優先されるようにする */
:where(.aisol-page a) { color: inherit; text-decoration: none; }
:where(.aisol-page ul) { list-style: none; margin: 0; padding: 0; }
:where(.aisol-page h1, .aisol-page h2, .aisol-page h3, .aisol-page p) { margin: 0; }

/* --------------------------------------------------------------------------
   2. 共通パーツ（ユーティリティ）
   -------------------------------------------------------------------------- */

/* セクション共通：中身を中央寄せ・最大幅で揃えるためのラッパー */
.aisol-container {
  position: relative; /* 透かし文字(z-index:0)より手前に表示されるようにする */
  max-width: var(--aisol-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* セクションごとの上下余白を統一 */
.aisol-section {
  position: relative;
  overflow: hidden; /* 透かし文字がはみ出さないように */
  background: var(--aisol-white); /* 明示的に指定しないとclip-path適用時に背景が透過し斜めカットが描画されないため必須 */
  padding: 96px 0;
}
.aisol-section--gray {
  background: var(--aisol-tint-bg);
}
.aisol-section.aisol-diagonal-top {
  padding-top: 136px; /* 斜め継ぎ目の分、上だけ余分に確保 */
}

/* セクション上部の小さな英字ラベル（例: "WHY" "STRATEGY"） */
.aisol-section-label {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--aisol-blue);
  margin-bottom: 12px;
}

/* セクション見出し（"WHY 富士ソフト" のような中央大見出し） */
.aisol-heading-lg {
  font-size: 34px;
  font-weight: 700;
  color: var(--aisol-navy);
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 72px; /* 見出しと本文の間隔 */
}

/* 縦横グリッド線を敷くセクション同士の継ぎ目を、ヒーロー以外は斜めのラインに */
.aisol-diagonal-top {
  position: relative;
  margin-top: -40px;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}

/* 差し替え待ちの画像プレースホルダー共通スタイル
   ※ PIXTA等で購入後、この要素を <img> に置き換えてください */
.aisol-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: repeating-linear-gradient(
    45deg,
    #f4f6fa,
    #f4f6fa 10px,
    #eef1f6 10px,
    #eef1f6 20px
  );
  border: 1px dashed #b7c3d6;
  color: #8896aa;
  font-size: 14px;
  text-align: center;
  border-radius: 8px;
}
.aisol-placeholder svg { opacity: 0.5; }

/* スマホ表示時だけ改行を入れたい箇所に使う（PCでは非表示にして詰めて表示） */
.u-sp-break { display: none; }
/* PC表示時だけ改行を入れたい箇所に使う（スマホでは非表示にして詰めて表示） */
.u-pc-break { display: inline; }

/* 縦横の薄い罫線グリッド装飾（ヒーロー以外の全セクションに使用。紺の低opacityで統一） */
.aisol-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aisol-grid-lines--dark {
  background-image:
    repeating-linear-gradient(to right, rgba(10,44,102,0.08) 0, rgba(10,44,102,0.08) 1px, transparent 1px, transparent calc(100% / 6)),
    repeating-linear-gradient(to bottom, rgba(10,44,102,0.08) 0, rgba(10,44,102,0.08) 1px, transparent 1px, transparent calc(100% / 4));
}

/* --------------------------------------------------------------------------
   3. ヘッダー
   -------------------------------------------------------------------------- */
.aisol-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--aisol-white);
  border-top: 4px solid var(--aisol-blue); /* ヘッダー上部のアクセントライン */
  border-bottom: 1px dashed var(--aisol-border); /* 点線の下部区切り */
}
.aisol-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px; /* ヘッダーの基準高さ */
}
.aisol-header__logo img {
  height: auto;
  width: 168px; /* ロゴの表示幅 */
}
.aisol-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}
.aisol-nav__list a {
  font-size: 14px;
  font-weight: 500;
  color: var(--aisol-text);
  transition: color 0.2s ease;
}
.aisol-nav__list a:hover {
  color: var(--aisol-blue);
}
.aisol-nav__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 22px !important;
  background: var(--aisol-blue);
  color: var(--aisol-white) !important;
  border-radius: 999px; /* ピル型ボタン */
  font-weight: 700 !important;
}
.aisol-nav__cta:hover {
  background: var(--aisol-blue-dark);
  color: var(--aisol-white) !important;
}
.aisol-nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
}

/* ハンバーガーメニュー（スマホ表示のみ使用） */
.aisol-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.aisol-nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--aisol-navy);
  display: block;
}

/* --------------------------------------------------------------------------
   4. ヒーロー
   ※ hero-bg.pngをトリミングせず表示するため、CSS背景ではなく実際の<img>を
     幅100%・高さautoで配置しています。ヒーロー全体は白背景の中に左右の余白をとった
     角丸フレームとして浮かせ、下のAI Visionセクション（白背景）と地続きに見えるようにしています。
   -------------------------------------------------------------------------- */
.aisol-hero {
  background: var(--aisol-white); /* 下のAI Visionセクションと同じ白にして背景を連続させる */
}
.aisol-hero__frame {
  position: relative;
  /* 下端を斜めにカットし、AI Visionセクションへの継ぎ目を演出 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
  background-color: #0a2c66; /* 画像読み込み前のフォールバック色 */
  color: var(--aisol-white);
}
.aisol-hero__bg {
  display: block;
  width: 100%;
  height: auto; /* 幅基準で自動計算し、画像全体を必ず表示（トリミングしない） */
}
.aisol-hero__scrim {
  /* 画像の上に重ねる紺色グラデーション。左側ほど濃くして文字を読みやすくする */
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,44,102,0.92) 0%, rgba(10,44,102,0.62) 45%, rgba(10,44,102,0.22) 100%);
}
.aisol-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-family: 'Jost', sans-serif; /* 日本語部分はグリフが無いため自動的にsans-serifにフォールバックする */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5vw;
}
/* 控えめで文字間の空いた英字ラベル */
.aisol-hero__label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3em;
  opacity: 0.9;
  margin-bottom: 20px;
}
.aisol-hero__textblock {
  /* 見出し・リード文・CTAボタンの右端の基準となる「文字ブロック」の幅 */
  max-width: 640px;
}
.aisol-hero__catch {
  /* 「ACTIONABLE AI」を主役にするため、それ以外の行はサイズは控えめ・太さはしっかりめに */
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.aisol-hero__catch .aisol-hero__accent {
  /* 「ACTIONABLE AI」だけ大胆に大きく */
  display: inline-block;
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #ffe27a;
  line-height: 1.2;
  margin: 6px 0;
}
a.aisol-hero__cta {
  /* 「.aisol-page a { color: inherit }」より詳細度を上げて、黄色背景に紺文字を確実に適用する */
  display: flex; /* margin-left:autoで文字ブロックの右端に寄せるため */
  width: fit-content;
  margin-left: auto;
  align-items: center;
  gap: 12px;
  margin-top: 16px; /* 見出しとの間隔 */
  padding: 8px 8px 8px 30px;
  background: #ffe27a;
  color: var(--aisol-navy);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}
a.aisol-hero__cta:hover {
  opacity: 0.8;
}
.aisol-hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--aisol-navy);
  color: var(--aisol-white);
  font-size: 14px;
}

/* ヒーロー差し替えパターン（index2/index3）用の見た目バリエーション。
   index.html本体は使用していないため影響なし。 */

/* 画像ごとに縦横比が違っても、フレームの高さ(=見た目の大きさ)を元のhero-bg.pngと
   揃えるための固定比率＋object-fit:cover。PC/SP共通でこの比率を基準にし、
   SPは既存のmin-heightがこれを上書きして従来通りの高さになる */
.aisol-hero__frame--cover {
  aspect-ratio: 2056 / 765;
}
.aisol-hero__bg--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 「ACTIONABLE AI」を黄色ではなく青→水色のグラデーション文字に（index2/index3用）
   ※ 「.aisol-hero__catch .aisol-hero__accent { color:#ffe27a }」(詳細度0,2,0)より
     詳細度を上げるため、クラスを2つ重ねたセレクタにして確実に上書きする */
.aisol-hero__catch .aisol-hero__accent.aisol-hero__accent--grad {
  background: linear-gradient(90deg, #1550d6 0%, #4fd8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* index.html用：色味は黄色のまま、濃い琥珀色→明るい黄色のグラデーションにする */
.aisol-hero__catch .aisol-hero__accent.aisol-hero__accent--grad-yellow {
  background: linear-gradient(90deg, #f2a900 0%, #ffe27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* お問い合わせボタンも同じ青→水色グラデーションに（文字色は白） */
a.aisol-hero__cta--grad {
  background: linear-gradient(90deg, #1550d6 0%, #4fd8ff 100%);
  color: var(--aisol-white) !important;
}
a.aisol-hero__cta--grad .aisol-hero__cta-icon {
  background: var(--aisol-white);
  color: var(--aisol-blue);
}

/* お問い合わせボタンを塗りつぶしボタンではなく下線テキストリンクに変えるモディファイア。
   ベースのスタイルは変更せず、上乗せする修飾クラスとして定義している */
a.aisol-hero__cta.aisol-hero__cta--underline {
  background: none;
  color: var(--aisol-white) !important;
  padding: 4px 0;
  border-radius: 0;
}
/* ホバーしなくても「ボタンだ」と分かるよう、矢印を太い「≫」で表現する。
   色は「ACTIONABLE AI」の文字色に揃える（デフォルトは黄色、--gradクラス併用時は
   青→水色グラデーション。現在は3パターンとも--gradを使用）。
   ※ 記号フォントのグリフはem枠内で上寄りに描画されることが多く、
     テキストとbox中心を揃えても見た目の中心はズレて見える。
     そのため記号フォントには頼らず、border+transformで山形を2つ描く
     CSS図形にして、box中心と見た目の中心を一致させている */
a.aisol-hero__cta--underline .aisol-hero__cta-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 20px;
  background: none;
}
a.aisol-hero__cta--underline .aisol-hero__cta-icon::before,
a.aisol-hero__cta--underline .aisol-hero__cta-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 9px;
  height: 9px;
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #ffe27a;
  transform: translateY(-50%) rotate(45deg);
}
a.aisol-hero__cta--underline .aisol-hero__cta-icon::after {
  left: 8px;
}
/* index2/index3用：アイコンも「ACTIONABLE AI」と同じ青→水色グラデーションの
   両端色を1本目・2本目の山形にそれぞれ割り当てる */
a.aisol-hero__cta--underline .aisol-hero__cta-icon.aisol-hero__cta-icon--grad::before {
  border-color: #1550d6;
}
a.aisol-hero__cta--underline .aisol-hero__cta-icon.aisol-hero__cta-icon--grad::after {
  border-color: #4fd8ff;
}
/* index.html用：アイコンも「ACTIONABLE AI」と同じ濃い琥珀色→明るい黄色の
   グラデーションの両端色を1本目・2本目の山形にそれぞれ割り当てる */
a.aisol-hero__cta--underline .aisol-hero__cta-icon.aisol-hero__cta-icon--grad-yellow::before {
  border-color: #f2a900;
}
a.aisol-hero__cta--underline .aisol-hero__cta-icon.aisol-hero__cta-icon--grad-yellow::after {
  border-color: #ffe27a;
}
/* テキスト部分の下に、ホバー時だけ左から右へシュッと伸びる下線を描く
   ※ padding-bottomでスペースを作ると、そのぶんspanの高さが増えて
     アイコン（»）とのFlex縦中央がテキストの見た目中心からズレてしまうため、
     paddingは使わずbottomをマイナス位置にしてspanの高さに影響を与えない */
a.aisol-hero__cta--underline > span:first-child {
  position: relative;
}
a.aisol-hero__cta--underline > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
a.aisol-hero__cta--underline:hover > span:first-child::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   5. AI Vision
   ※ 紺色はヒーローのみに使用する方針のため、白背景・紺文字のシンプルな構成にしている。
   -------------------------------------------------------------------------- */
.aisol-concept {
  position: relative;
  overflow: hidden;
  background: var(--aisol-tint-bg); /* 白よりわずかに濃いトーン */
  color: var(--aisol-text);
  padding: 136px 32px 96px; /* 斜め継ぎ目の分、上だけ余分に確保 */
}
.aisol-concept__wrap {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 8vw, 140px); /* 左に空白を作り、右の透かし画像とのバランスを中央寄りに */
}
.aisol-concept__title {
  position: relative;
  max-width: 620px; /* 右側の透かし画像とぶつからないよう幅を制限 */
}
.aisol-concept__label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--aisol-blue);
  margin-bottom: 20px;
}
.aisol-concept__title h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 700;
  color: var(--aisol-navy);
  line-height: 1.5;
}
/* セクションと同じ縦幅で右側に敷く、大きな透かしイメージ */
/* 白抜きアウトラインの大きな装飾文字（すかし演出） */
.aisol-giant-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-size: clamp(64px, 11vw, 160px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(10, 44, 102, 0.18);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.aisol-concept__watermark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 620px;
  opacity: 0.18;
  pointer-events: none;
}
.aisol-concept__watermark svg {
  width: 100%;
  height: 100%;
}

.aisol-concept__body {
  max-width: 1280px;
  margin: 48px auto 0;
  padding-left: clamp(24px, 8vw, 140px); /* 上のタイトルブロックと左端を揃える */
}
.aisol-concept__lead {
  /* 末尾の「を届けます。」と共通のスタイル */
  font-size: 15px;
  font-weight: 700;
  color: var(--aisol-navy);
  margin-bottom: 32px;
}
/* 4つの箇条書きだけを主役として大きく・太く見せる */
.aisol-concept__list li {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--aisol-navy);
  padding-left: 1.5em; /* ○マークと文字の間隔 */
  position: relative;
  margin-bottom: 14px;
  line-height: 1.5;
}
.aisol-concept__list li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--aisol-blue);
}
.aisol-concept__foot {
  margin-top: 32px;
  font-size: 15px;
  font-weight: 700;
  color: var(--aisol-navy);
}

/* --------------------------------------------------------------------------
   6. WHY 富士ソフト
   中央大見出し＋画像/テキストが左右交互に入れ替わる特徴紹介ブロックの構成
   -------------------------------------------------------------------------- */
.aisol-point-section {
  position: relative;
  overflow: hidden; /* 透かし文字がはみ出さないように */
  background: var(--aisol-white); /* Point画像が白背景のため、セクションも白に統一 */
  padding: 140px 0 100px; /* 斜め継ぎ目の分、上だけ余分に確保 */
}
.aisol-point-head {
  position: relative;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 88px;
  padding: 0 24px;
}
.aisol-point-head__title {
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 900;
  color: var(--aisol-navy);
  line-height: 1.5;
  margin: 16px 0 24px;
}
.aisol-point-head__lead {
  font-size: 15px;
  color: var(--aisol-text-sub);
}

/* Grid採用の理由：画像・テキスト・「資料をみる」の並び順をブレークポイントごとに
   grid-template-areasだけで組み替えられるようにするため（DOM順は変えずに済む） */
.aisol-point-feature {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 36% 1fr;
  grid-template-areas:
    "image detail"
    "image more";
  align-items: center;
  column-gap: 64px;
}
.aisol-point-feature + .aisol-point-feature {
  margin-top: 96px;
}
.aisol-point-feature.is-reverse {
  grid-template-columns: 1fr 36%;
  grid-template-areas:
    "detail image"
    "more image";
}
.aisol-point-feature__image { grid-area: image; }
.aisol-point-feature__detail { grid-area: detail; }
.aisol-point-feature__more { grid-area: more; }

/* 画像は白背景の図解のため、枠を主張しすぎない柔らかい影のみで縁取る。サイズもやや控えめに */
.aisol-point-feature__image img {
  /* 影で浮かせず、白背景の図解としてそのまま馴染ませる */
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* 「Point 01」は紺の縦線＋テキストのシンプルなラベルにする */
.aisol-point-feature__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  border-left: 6px solid var(--aisol-blue);
  padding: 4px 0 4px 18px;
  margin-bottom: 40px; /* バッジと見出しの間隔 */
}
.aisol-point-feature__badge span {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--aisol-blue);
}
.aisol-point-feature__badge em {
  font-size: 32px;
  font-weight: 900;
  font-style: normal;
  color: var(--aisol-navy);
}
.aisol-point-feature__detail h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--aisol-navy);
  line-height: 1.5;
  margin-bottom: 20px;
}
.aisol-point-feature__detail p {
  font-size: 16px;
  color: var(--aisol-text-sub);
}
.aisol-point-feature__more {
  display: flex;
  justify-content: flex-end; /* ブロック右下に配置 */
  margin-top: 20px;
}
.aisol-point-feature__more button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--aisol-blue);
  cursor: pointer;
}
/* テキスト部分の下に、ホバー時だけ左から右へシュッと伸びる下線を描く
   （ヒーローCTAの「お問い合わせ」と同じ演出） */
.aisol-point-feature__more button > span:first-child {
  position: relative;
}
.aisol-point-feature__more button > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.aisol-point-feature__more button:hover > span:first-child::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   7. 画像モーダル（「資料をみる」のポップアップ）
   -------------------------------------------------------------------------- */
.aisol-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.aisol-modal.is-open {
  display: flex;
}
.aisol-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 44, 102, 0.8); /* 背景を薄暗く */
}
.aisol-modal__content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
}
.aisol-modal__img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.aisol-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--aisol-white);
  color: var(--aisol-navy);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.aisol-modal__close:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   8. AI戦略 3本柱
   ※ 紺色はヒーローのみに使用する方針のため、白背景＋薄いボーダーのシンプルなカード構成にしている。
   -------------------------------------------------------------------------- */
.aisol-lineup {
  position: relative;
  overflow: hidden; /* 透かし文字がはみ出さないように */
  padding: 136px 24px 96px; /* 斜め継ぎ目の分、上だけ余分に確保 */
  background: var(--aisol-tint-bg); /* AI Visionセクションと同じ背景色に統一 */
}
.aisol-lineup__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.aisol-lineup__head {
  text-align: center;
  margin-bottom: 56px;
}
.aisol-lineup__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--aisol-blue);
}
.aisol-lineup__title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: var(--aisol-navy);
  margin: 16px 0;
}
.aisol-lineup__lead {
  font-size: 14px;
  color: var(--aisol-text-sub);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.aisol-lineup__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* icon / タイトル / サブタイトル / 箇条書き / オファリング見出し / タグ の6行 */
  grid-template-rows: auto auto auto auto auto auto;
  gap: 24px;
}
/* PCのみ：カードごとに本文量（サブタイトルの有無や箇条書きの行数）が違っても
   各要素の開始位置が3枚とも揃うよう、.aisol-lineup__rowの行トラックをsubgridで
   共有する。スマホでは display:block に戻して解除する（レスポンシブ側を参照） */
.aisol-lineup__card {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  overflow: hidden;
  background: var(--aisol-white);
  border: 1px solid var(--aisol-border);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
}
.aisol-lineup__card-body {
  /* このラッパー自体はレイアウトに関与させず、中の要素を直接subgridの行に参加させる */
  display: contents;
}
.aisol-lineup__card-icon {
  grid-row: 1;
  position: relative;
  z-index: 1; /* 背景の透かし数字より手前に表示する */
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--aisol-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.aisol-lineup__card-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.aisol-lineup__card-number {
  /* 右上に大きく薄い透かし数字として敷く */
  position: absolute;
  top: -0.15em;
  right: 8px;
  z-index: 0;
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  color: var(--aisol-blue-light);
  pointer-events: none;
  user-select: none;
}
.aisol-lineup__card h3 {
  grid-row: 2;
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 700;
  color: var(--aisol-navy);
  margin: 10px 0 8px;
}
.aisol-lineup__card-subtitle {
  grid-row: 3;
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: var(--aisol-text-sub);
  margin-bottom: 20px;
}
.aisol-lineup__bullets {
  grid-row: 4;
  position: relative;
  z-index: 1;
  text-align: left;
  margin-bottom: 20px;
}
.aisol-lineup__bullets li {
  font-size: 14px;
  color: var(--aisol-text);
  padding-left: 1.1em;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.6;
}
.aisol-lineup__bullets li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.aisol-lineup__offering-label {
  grid-row: 5;
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--aisol-blue);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.aisol-lineup__tags {
  grid-row: 6;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.aisol-lineup__tags li {
  border-radius: 6px; /* 角丸の控えめなタグ */
  overflow: hidden; /* 内側のaを角丸の形にクリップする */
}
/* オファリングタグはリンクなので、タグ全体をクリックできるよう
   padding/背景色をli自体ではなく中のaに持たせる */
.aisol-lineup__tags a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  padding: 6px 14px;
  background: var(--aisol-blue-light);
  color: var(--aisol-text);
  transition: background 0.2s ease, color 0.2s ease;
}
/* ホバーしなくてもリンクだと分かるよう、小さな矢印を常時薄く表示。
   ホバー時は背景を塗りつぶして矢印もはっきり見せる */
.aisol-lineup__tags a::after {
  content: "↗";
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.aisol-lineup__tags a:hover {
  background: var(--aisol-blue);
  color: var(--aisol-white);
}
.aisol-lineup__tags a:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9. 事例紹介
   -------------------------------------------------------------------------- */

/* 大型2枚（fsi.co.jp「AI活用事例」の上段カードを再現）。
   紺のバナー＋実写真＋会社名/メタ情報という構成で、下の小型カード群と差別化する */
.aisol-case-feature-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}
.aisol-case-feature {
  border-radius: 12px;
  overflow: hidden;
  background: var(--aisol-white);
  box-shadow: 0 4px 16px rgba(10, 44, 102, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aisol-case-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(10, 44, 102, 0.14);
}
.aisol-case-feature > a {
  display: block;
  color: inherit;
}
.aisol-case-feature__banner {
  position: relative;
  padding: 32px 28px 20px;
  color: var(--aisol-white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* バナー写真の上に紺を重ねて、白文字が確実に読めるようにする */
.aisol-case-feature__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 44, 102, 0.55) 0%, rgba(10, 44, 102, 0.92) 100%);
}
.aisol-case-feature__banner-en,
.aisol-case-feature__banner-ja {
  position: relative;
  z-index: 1;
  display: block;
}
.aisol-case-feature__banner-en {
  font-family: 'Jost', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  margin-bottom: 6px;
}
.aisol-case-feature__banner-ja {
  font-size: 14px;
  font-weight: 700;
}
.aisol-case-feature__photo {
  aspect-ratio: 500 / 340;
  overflow: hidden;
}
.aisol-case-feature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.aisol-case-feature:hover .aisol-case-feature__photo img {
  transform: scale(1.06);
}
.aisol-case-feature__body {
  padding: 24px 28px 28px;
}
.aisol-case-feature__name {
  font-size: 19px;
  font-weight: 700;
  color: var(--aisol-navy);
  margin-bottom: 16px;
}
.aisol-case-feature__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.aisol-case-feature__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--aisol-text);
}
.aisol-case-feature__meta li span {
  flex: 0 0 auto;
  background: var(--aisol-navy);
  color: var(--aisol-white);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}
.aisol-case-feature__desc {
  font-size: 14px;
  color: var(--aisol-text-sub);
  line-height: 1.8;
}

.aisol-case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.aisol-case-card {
  border: 1px solid var(--aisol-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--aisol-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* ホバーで少し浮き上がるように（事例紹介・コラム共通） */
.aisol-case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(10, 44, 102, 0.14);
}
/* カード全体をリンクにしている場合、a要素をブロック化して
   div構造そのままの見た目を保つ */
.aisol-case-card > a {
  display: block;
  color: inherit;
}
.aisol-case-card__img {
  /* 横:縦 ≒ 8:5の比率。固定pxではなくaspect-ratioでカード幅に追従させる */
  aspect-ratio: 8 / 5;
  height: auto;
  overflow: hidden;
}
.aisol-case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.aisol-case-card:hover .aisol-case-card__img img {
  transform: scale(1.08);
}
.aisol-case-card__body {
  padding: 16px;
}
.aisol-case-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--aisol-navy);
  margin-bottom: 8px;
}
.aisol-case-card__desc {
  /* 3行までに制限し、はみ出した分は...で省略 */
  font-size: 14px;
  color: var(--aisol-text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* --------------------------------------------------------------------------
   10. お問い合わせ
   ※ 事例紹介とフッターの間に配置する、水色地（aisol-section--gray）のお問い合わせ導線。
   -------------------------------------------------------------------------- */
.aisol-contact {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.aisol-contact__lead {
  font-size: 20px;
  font-weight: 700;
  color: var(--aisol-navy);
  margin-bottom: 16px;
}
.aisol-contact__desc {
  font-size: 15px;
  color: var(--aisol-text-sub);
  line-height: 1.9;
  margin-bottom: 40px;
}
a.aisol-contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 32px;
  background: var(--aisol-blue);
  color: var(--aisol-white);
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
a.aisol-contact__cta:hover {
  background: var(--aisol-blue-dark);
  transform: translateY(-2px);
}
.aisol-contact__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--aisol-white);
  color: var(--aisol-blue);
  font-size: 16px;
}
.aisol-contact__tel {
  margin-top: 28px;
  font-size: 26px;
  font-weight: 700;
  color: var(--aisol-navy);
}
.aisol-contact__tel a {
  color: inherit;
}
/* 右側に敷く透かし演出（配置はAI Visionの透かしと共通、絵柄は同心円で差別化） */
.aisol-contact__watermark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 620px;
  opacity: 0.18;
  pointer-events: none;
}
.aisol-contact__watermark svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.aisol-footer {
  position: relative;
  background: var(--aisol-navy);
  color: rgba(255, 255, 255, 0.8);
  padding: 88px 24px 24px; /* 斜め継ぎ目の分、上だけ余分に確保 */
}
.aisol-footer__inner {
  max-width: var(--aisol-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.aisol-footer__logo {
  width: 140px;
  height: auto;
  filter: brightness(0) invert(1); /* 紺背景で見えるようロゴを白反転 */
}
.aisol-footer__nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.aisol-footer__nav a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}
/* ホバーした感が出るよう、少し色を薄く（透過を上げて）する */
.aisol-footer__nav a:hover {
  color: rgba(255, 255, 255, 0.5);
}
.aisol-footer__copyright {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   12. レスポンシブ（スマホ表示）
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .aisol-section { padding: 64px 0; }
  .aisol-heading-lg { font-size: 26px; }

  /* ヘッダー：縦幅を詰め、ロゴ・ハンバーガーを画面端に寄せる */
  .aisol-header__inner {
    padding: 8px 16px;
    min-height: 56px;
  }
  .aisol-header__logo img {
    width: 120px;
  }

  /* ナビゲーションをハンバーガーメニューに切り替え
     ※ ヘッダー内はlogo/hamburger/navの3つがjustify-content:space-betweenの対象のため、
       navが閉じている間（幅0）でもハンバーガーが右端に固定されるよう margin-left:auto を指定 */
  .aisol-nav__toggle { display: flex; margin-left: auto; }
  .aisol-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--aisol-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    border-bottom: 1px solid var(--aisol-border);
    display: none;
  }
  .aisol-nav__list.is-open { display: flex; }
  .aisol-nav__list li { width: 100%; }
  .aisol-nav__list a { display: block; padding: 12px 0; }
  /* ハンバーガーメニュー内の「お問い合わせ」も、他のリンクと同じ見た目に揃える */
  .aisol-nav__list .aisol-nav__cta {
    display: block !important;
    background: none !important;
    color: var(--aisol-text) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    font-weight: 500 !important;
  }
  .aisol-nav__list .aisol-nav__cta-icon { display: none; }

  /* スマホもPCと同じく画像に文字を重ねるオーバーレイ構成に統一。
     画像は薄い「すかし」として敷き、上下を同じ角度の斜めカットで馴染ませる */
  .aisol-hero__frame {
    min-height: 420px;
    clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%);
  }
  /* index2/index3用のaspect-ratioはPCの高さ合わせ専用のため、SPでは解除する。
     （aspect-ratioを残したままだとmin-heightとの整合を取るため幅の方が広がり、
       横スクロールが発生してしまう） */
  .aisol-hero__frame--cover {
    aspect-ratio: auto;
  }
  .aisol-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.32; /* すかし表現 */
  }
  /* index2/index3のヒーロー画像はSPでもすかしにせず、PCと同じくそのまま見せる */
  .aisol-hero__bg--cover {
    opacity: 1;
  }
  .aisol-hero__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 44, 102, 0.6);
  }
  .aisol-hero__inner {
    /* position:staticだと通常のフロー要素扱いになり、position:absoluteのscrim
       (紺の半透明オーバーレイ)より背面に描画され文字が読みにくくなる。
       positionはrelativeのままにしてz-index:1(PCから継承)でscrimより手前に出す */
    position: relative;
    justify-content: flex-start;
    padding: 40px 24px 56px; /* 上下の斜めカットに文字がかからないよう十分な余白を確保 */
  }
  .aisol-hero__catch { font-size: 20px; max-width: none; }
  /* PCから引き継いだopacity:0.9のままだと、SPの背景では文字が薄く見えるため不透明に戻す */
  .aisol-hero__label {
    opacity: 1;
  }

  /* AI Vision（concept）：スマホでは透かし画像は非表示にして幅を圧迫しないように */
  .aisol-concept { padding: 64px 16px 48px; }
  /* PC用の左オフセット(padding-left)が残っていると、text-align:centerしても
     ボックスごと右にずれて見た目が中央にならないため、ここも0にする */
  .aisol-concept__wrap { padding-left: 0; }
  .aisol-concept__title { max-width: none; text-align: center; }
  /* SPでも右側の透かしを見せる（幅を少し広げて存在感を出す） */
  .aisol-concept__watermark,
  .aisol-contact__watermark {
    width: 60%;
  }
  .aisol-giant-label { font-size: 15vw; top: -6px; }
  .u-sp-break { display: block; }
  .u-pc-break { display: none; }
  /* リード文を中央揃えに。PC用の左オフセットも解除 */
  .aisol-concept__body { padding-left: 0; }
  .aisol-concept__lead {
    text-align: center;
    font-size: 15px;
  }
  .aisol-concept__foot { text-align: center; }
  .aisol-concept__list li {
    font-size: 19px; /* 折り返しにくいようやや縮小 */
    padding-left: 1.2em;
  }

  /* WHY 富士ソフト（point）：テキスト→画像→「資料をみる」の縦積みに統一
     （grid-template-areasの並びだけ変えればよく、DOM順を変える必要がない） */
  .aisol-point-section { padding: 64px 0; }
  .aisol-point-feature,
  .aisol-point-feature.is-reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "detail"
      "image"
      "more";
    row-gap: 28px;
  }
  .aisol-point-feature + .aisol-point-feature { margin-top: 56px; }
  .aisol-point-feature__detail h3 { font-size: 24px; }

  /* AI戦略 3本柱（lineup）：カードを縦積みに */
  .aisol-lineup { padding: 56px 20px; }
  .aisol-lineup__row { grid-template-columns: 1fr; gap: 20px; }
  /* PC専用のsubgrid行揃えを解除し、通常のブロック要素に戻す
     （縦積みでは隣のカードと行を揃える必要がないため） */
  .aisol-lineup__card { display: block; }
  .aisol-lineup__card-body { display: block; }

  /* 事例紹介の大型2枚は縦積みに */
  .aisol-case-feature-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  /* 事例紹介・コラムのカードは横スクロールに。1枚目はほぼ全幅、2枚目が少し覗く幅にして
     スクロールできることが一目でわかるようにする。
     ※ 親.aisol-containerの左右パディング(24px)をそのまま活かし、負のmarginでの
       相殺は行わない（左端の余白が崩れるため） */
  .aisol-case-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 0 16px;
  }
  .aisol-case-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .aisol-footer__inner { flex-direction: column; align-items: flex-start; }
}