/* ============================================================
   AIリスクを、先に見ていた。（bs/lp/ad-ai）
   Figma PC版: node-id=202:264 (1440px基準) / SP版: node-id=199:563 (390px基準)
   レスポンシブ方針（コンテンツクエリ）:
     - コンテナ幅 1280px〜1440px: 2カラム。右カラム(main)は740px固定、
       左カラム(visual)は幅が縮む分アスペクト比とテキストサイズ比率を保持
     - コンテナ幅 768px〜1279px: 1カラムに段落ち（PC本文サイズのまま）
     - コンテナ幅 767px以下: SP版デザイン(390px基準)をコンテンツクエリで表示
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

:root {
  /* ── DESIGN-CORE.md より値が一致するトークンを流用 ── */
  --space-4:  4px;
  --space-8:  8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --radius-8: 8px;
  --font-size-10: 10px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-weight-400: 400;
  --font-weight-700: 700;
  --text-accent: #003e8e;
  --shadow: 0 4px 12px rgba(0, 62, 142, 0.10);
  --white: #FFFFFF;
  --font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
    "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* ── 本ページ固有トークン（DESIGN-COREに該当なし） ── */
  --ad-ai-bg-navy: #001038;
  --ad-ai-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.ad-ai {
  background-color: var(--ad-ai-bg-navy);
  font-family: var(--font-family-base);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /* コンテナクエリの起点はここに置く（.ad-ai__inner自身を
     @container ad-ai-hero で書き換えると自己参照になり無効化されるため、
     1階層親のここをコンテナにする） */
  container-type: inline-size;
  container-name: ad-ai-hero;
}

.ad-ai__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}

/* ============================================================
   左カラム：visual（写真＋見出し＋リード文）
   ============================================================ */
.ad-ai__visual {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  aspect-ratio: 700 / 1024;
  container-type: inline-size;
  container-name: ad-ai-visual;
}

.ad-ai__visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ad-ai__visual-bg--sp { display: none; }

.ad-ai__logo--sp {
  display: none;
}

.ad-ai__copy {
  position: absolute;
  left: clamp(0px, 9.1429cqw, 64px);
  top: clamp(0px, 9.1429cqw, 64px);
  width: clamp(0px, 75cqw, 525px);
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 3.4286cqw, 24px);
}

.ad-ai__h1 {
  font-family: var(--ad-ai-font-serif);
  font-weight: 500;
  font-size: clamp(0px, 11.4286cqw, 80px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--white);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ad-ai__lead {
  font-weight: var(--font-weight-700);
  font-size: clamp(0px, 2.5714cqw, 18px);
  line-height: 1.8;
  color: var(--white);
}

.ad-ai__br--sp { display: none; }

/* ============================================================
   右カラム：main（ロゴ／本文／カード／バナー／フッター注記）
   ============================================================ */
.ad-ai__main {
  flex: 0 0 740px;
  width: 740px;
}

.ad-ai__logo {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-24);
}
.ad-ai__logo img { width: 200px; height: 50px; }

.ad-ai__body {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.ad-ai__body-text {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16);
  line-height: 1.8;
  color: var(--white);
}

.ad-ai__h2 {
  font-family: var(--ad-ai-font-serif);
  font-weight: 700;
  font-size: var(--font-size-24);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--white);
}

.ad-ai__technology,
.ad-ai__white,
.ad-ai__products {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ── 特許カード（アイコン左・テキスト右。2列×2行のグリッド） ── */
.ad-ai__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}

.ad-ai__card {
  flex: 0 0 310px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-8);
}

.ad-ai__card-icon {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.ad-ai__card-icon img { position: absolute; }
.ad-ai__card-icon--security img { inset: 5.21% 14.81% 5.3% 15%; }
.ad-ai__card-icon--monitor img  { inset: 12.92% 8.8% 12.95% 8.96%; }
.ad-ai__card-icon--iot img      { inset: 3.96% 9.04% 3.8% 8.96%; }
.ad-ai__card-icon--analysis { display: flex; align-items: center; justify-content: center; }
.ad-ai__card-icon--analysis img { position: static; width: 60px; height: 59px; }

.ad-ai__card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ad-ai__card-title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-20);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--white);
}
.ad-ai__card-desc {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--white);
}
.ad-ai__card-note {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-10);
  line-height: 1.35;
  color: var(--white);
}

/* ── ホワイト運用バナー ── */
.ad-ai__white-banner {
  position: relative;
  display: block;
  height: 110px;
  background-color: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow);
  overflow: hidden;
  container-type: inline-size;
  container-name: ad-ai-banner-white;
}

.ad-ai__white-banner-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: 116px;
}

.ad-ai__white-banner-text {
  position: absolute;
  left: 20px;
  top: 35px;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  white-space: nowrap;
  color: var(--text-accent);
}

.ad-ai__white-banner-title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-32);
  line-height: 1.25;
  letter-spacing: 0.01em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ad-ai__white-banner-desc {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-13);
  line-height: 1.5;
}

/* ── 導入製品バナー ── */
.ad-ai__product-banners {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ad-ai__product-banner {
  flex: 0 0 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 110px;
  padding: var(--space-16);
  background-color: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ad-ai__product-banner-label {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-14);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  color: #000;
  white-space: nowrap;
}
.ad-ai__product-banner-label-note { font-size: 9px; }

.ad-ai__ifilter-logo {
  position: relative;
  width: 172px;
  height: 50px;
}
.ad-ai__ifilter-logo-mark { position: absolute; inset: 18.76% 5.81% 19.28% 5.81%; width: auto; height: auto; }
.ad-ai__ifilter-logo-r    { position: absolute; inset: 71.52% 1.83% 18.83% 95.37%; width: auto; height: auto; }

.ad-ai__zfilter-logo { width: 186px; height: 50px; }

/* ── フッター注記 ── */
.ad-ai__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

.ad-ai__foot-note {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-10);
  line-height: 1.35;
  color: var(--white);
  width: 100%;
}

.ad-ai__foot-copyright {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-13);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: right;
  color: var(--white);
  width: 100%;
}

/* ============================================================
   段階2：コンテナ幅 768px〜1279px → 1カラムに段落ち
   （本文サイズはPC版のまま。visual/mainを縦積みにするのみ）
   ============================================================ */
@container ad-ai-hero (max-width: 1279.98px) {
  .ad-ai__inner {
    flex-direction: column;
  }
  .ad-ai__visual {
    flex: 0 0 auto;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
  }
  .ad-ai__main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
  }
}

/* ============================================================
   段階3：コンテナ幅 767px以下 → SP専用デザイン（390px基準）
   すべて390px基準のコンテンツクエリ（cqw）で比例スケールする
   ============================================================ */
@container ad-ai-hero (max-width: 767.98px) {
  .ad-ai__visual-bg--pc { display: none; }
  .ad-ai__visual-bg--sp { display: block; }
  .ad-ai__visual { aspect-ratio: 390 / 571; }

  /* ロゴ：写真の右上にオーバーレイ表示に切り替え */
  .ad-ai__logo--pc { display: none; }
  .ad-ai__logo--sp {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    justify-content: flex-end;
    padding: var(--space-16) var(--space-8);
    z-index: 1;
  }
  .ad-ai__logo--sp img { width: 120px; height: 30px; }

  /* 見出し・リード文：390px基準のcqwで配置しなおす */
  .ad-ai__copy {
    left: 7.6923cqw;
    top: 15.8974cqw;
    width: 84.6154cqw;
    height: 125.641cqw;
    justify-content: space-between;
    gap: 0;
  }
  .ad-ai__h1 { font-size: 12.3077cqw; }
  .ad-ai__lead { font-size: 4.1026cqw; }
  .ad-ai__br--sp { display: inline; }

  /* 本文カラム：左右16pxパディングで358px相当の幅に */
  .ad-ai__main { padding-inline: var(--space-16); }
  .ad-ai__body { max-width: none; margin: 0; }

  .ad-ai__h2 { font-size: var(--font-size-20); }

  /* 特許カード：1列積みに（アイコン左・テキスト右の構成自体はPCと共通） */
  .ad-ai__cards {
    flex-wrap: nowrap;
    flex-direction: column;
    gap: var(--space-24);
  }
  .ad-ai__card {
    flex: 0 0 auto;
    width: 100%;
  }

  /* ホワイト運用バナー：背景写真位置をSP基準(358px)で再配置 */
  .ad-ai__white-banner-bg {
    right: 0;
    bottom: 0;
    width: auto;
    height: 84px;
  }
  .ad-ai__white-banner-text {
    left: 20px;
    top: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* 導入製品バナー：縦積みに */
  .ad-ai__product-banners {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  .ad-ai__product-banner { flex: 0 0 auto; width: 100%; }

  .ad-ai__foot { padding: var(--space-16) 0; }
}