@charset "UTF-8";
/* ==========================================================================
   AI Security Solution LP  (/service/special/ai_security01.html)
   --------------------------------------------------------------------------
   命名規約: servicelp.css に準拠
     - ページ固有ブロックは  p-aisec-<block>
     - 要素は  p-aisec-<block>__<element>
     - 装飾差分は  --<modifier> / 状態は is-*
   汎用名（.container / .hero / .cta / .header-logo 等）は他CSSと衝突するため
   すべて p-aisec- 名前空間へ閉じ込めている。
   ========================================================================== */

/* ===== Design tokens ===== */
:root{
  --aisec-red:#d8063b;
  --aisec-pink:#df3560;
  --aisec-purple:#71359a;
  --aisec-ink:#00171c;
  --aisec-cta-bg:#01121c;
  --aisec-dark-card:#242424;
  --aisec-text:#333;

  --aisec-maxw:1160px;          /* 標準コンテンツ幅 */
  --aisec-maxw-wide:1440px;     /* ヒーロー／ベン図など全幅寄り */

  --aisec-card-shadow:0 0 24px rgba(243,229,245,.9);
  --aisec-card-radius:8px;

  /* テーマ別グラデーション（見出しバンド／タグ等で共用） */
  --aisec-grad-gov:linear-gradient(135deg,#16c2a3 0%,#37d67a 100%);
  --aisec-grad-aifs:linear-gradient(135deg,#7b3ff2 0%,#5566ee 100%);
  --aisec-grad-sfa:linear-gradient(135deg,#ff3d6b 0%,#e6002d 100%);

  /* 縦リズム（セクション余白） */
  --aisec-section-y:80px;
  --aisec-section-y-sm:56px;
  --aisec-gutter:24px;
}

/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  color:var(--aisec-text);line-height:1.8;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.p-aisec-container{max-width:var(--aisec-maxw);margin:0 auto;padding:0 var(--aisec-gutter)}

/* ===== Hero ===== */
.p-aisec-hero{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#d6356b 0%,#c0318a 28%,#883aa3 56%,#5a26ab 82%,#4a1da9 100%)}
/* IIJ Global ロゴ（白バッジ・右上） */
.p-aisec-hero__logo{position:absolute;top:0;right:12.5%;z-index:3;background:#fff;padding:12px 18px}
.p-aisec-hero__logo img{height:38px;width:auto}
@media(min-width:1460px){ .p-aisec-hero__logo{right:calc((100% - 1456px)/2)} }
@media(max-width:949px){ .p-aisec-hero__logo{right:6px} }

.p-aisec-hero__inner{max-width:var(--aisec-maxw-wide);margin:0 auto;
  display:grid;grid-template-columns:50% 50%;align-items:center;min-height:600px}
.p-aisec-hero__illust{align-self:stretch}
.p-aisec-hero__illust img{width:100%;height:auto;max-width:none}
.p-aisec-hero__copy{display:flex;flex-direction:column;justify-content:center;gap:32px;
  color:#fff;padding:40px 60px 40px 48px}
.p-aisec-hero__copy h1{font-weight:900;font-size:clamp(40px,5.35vw,77px);line-height:1.3;letter-spacing:.14px}
.p-aisec-hero__copy p{font-weight:600;font-size:clamp(15px,1.45vw,20px);line-height:1.7;letter-spacing:1px;max-width:529px}

/* ===== 課題 (Issues) ===== */
.p-aisec-issues{padding:var(--aisec-section-y) 0 96px;
  background:linear-gradient(180deg,#e4f1ff 0%,#e4f1ff 50%,#d3e1fc 88%,#becefa 100%)}
.p-aisec-issues__title{margin-bottom:48px;color:var(--aisec-red);
  font-size:clamp(22px,3vw,42px);font-weight:700;text-align:center;line-height:1.3}
.p-aisec-issues__cards{display:flex;justify-content:center;flex-wrap:wrap;gap:15px}
.p-aisec-issues__card{position:relative;display:flex;align-items:center;gap:18px;
  width:320px;max-width:100%;height:155px;padding:0 22px;background:var(--aisec-dark-card)}
.p-aisec-issues__card::after{content:"";position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);
  border-left:20px solid transparent;border-right:20px solid transparent;border-top:27px solid var(--aisec-dark-card)}
.p-aisec-issues__card img{width:65px;height:65px;flex:none}
.p-aisec-issues__card h3{color:#fff;font-size:20px;font-weight:700;line-height:1.5;letter-spacing:-.5px}

/* ===== 担当者の声 (Voices) ===== */
.p-aisec-voices__banner{padding:30px 20px;background:var(--aisec-pink);
  color:#fff;text-align:center;font-weight:700;font-size:26px;line-height:1.3}
.p-aisec-voices{position:relative;padding:64px 0 76px;background:#e4e4e4}
.p-aisec-voices::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);z-index:2;
  border-left:26px solid transparent;border-right:26px solid transparent;border-top:26px solid #e4e4e4}
.p-aisec-voices__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;
  max-width:1180px;margin:0 auto;padding:0 30px}
.p-aisec-voices__card{display:flex;align-items:center;gap:30px;padding:36px 40px;background:#fff}
.p-aisec-voices__avatar{width:90px;height:90px;border-radius:50%;background:#9ed8f6;flex:none;overflow:hidden}
.p-aisec-voices__avatar img{width:100%;height:100%;object-fit:cover}
.p-aisec-voices__body{flex:1;min-width:0}
.p-aisec-voices__company{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #cbcbcb;
  font-weight:700;font-size:18px;color:var(--aisec-text);letter-spacing:1px}
.p-aisec-voices__quote{font-size:15px;color:var(--aisec-text);letter-spacing:.8px;line-height:2}

/* ===== テーマ別セクション共通 ===== */
/* overview はベン図カードを bokeh 背景に浮かせる（他ベン図セクションと統一） */
.p-aisec-overview{padding:10px 0 44px;background:#fff}

/* 見出しバンド（下向き吹き出し。尾はピルのグラデーションを継承して同色に） */
.p-aisec-band{display:flex;justify-content:center;padding:34px 20px 54px;text-align:center;background:#fff}
.p-aisec-band__pill{position:relative;display:inline-block;padding:16px 58px;border-radius:10px;
  color:#fff;font-weight:800;font-size:clamp(20px,2.6vw,28px);letter-spacing:2px}
.p-aisec-band__pill::after{content:"";position:absolute;left:50%;bottom:-9px;
  width:24px;height:24px;transform:translateX(-50%) rotate(45deg);border-radius:0 0 5px 0;background:inherit}
.p-aisec-band--gov  .p-aisec-band__pill{background:var(--aisec-grad-gov)}
.p-aisec-band--aifs .p-aisec-band__pill{background:var(--aisec-grad-aifs)}
.p-aisec-band--sfa  .p-aisec-band__pill{background:var(--aisec-grad-sfa)}

/* テーマ背景：viewport 固定の bokeh を全域で共有し、一続きの背景に見せる */
.p-aisec-theme-bg{
  background-image:
    linear-gradient(rgba(255,205,205,.22),rgba(255,205,205,.22)),
    url("/service/images_v2/special/ai_security/bg-bokeh.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#fbeef2;
}

/* ベン図カード（透過PNG）— drop-shadow でアルファ形状に沿った影 */
.p-aisec-venn{display:flex;justify-content:center;width:100%;padding:36px 24px 18px}
.p-aisec-venn img{width:100%;max-width:1080px;height:auto;
  filter:drop-shadow(0 12px 26px rgba(120,80,110,.16))}

/* テーマ本文（ベン図下のピンク背景を継続） */
.p-aisec-theme-body{padding:14px 24px 70px}
.p-aisec-theme-body__inner{max-width:1100px;margin:0 auto;padding:0 12px}

/* ----- Governance: 詳細カード 2x2 ----- */
.p-aisec-detail{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:18px}
.p-aisec-detail__card{padding:30px 28px;background:#fdfdfd;border-radius:var(--aisec-card-radius);box-shadow:var(--aisec-card-shadow)}
.p-aisec-detail__title{margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--aisec-red);
  text-align:center;font-size:18px;font-weight:800;color:#000}
.p-aisec-detail__desc{margin-bottom:20px;font-size:14.5px;line-height:1.85;color:#111}
.p-aisec-detail__subtitle{margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--aisec-red);
  text-align:center;font-size:18px;font-weight:800;color:#000}
.p-aisec-detail__card ul{list-style:none;margin:0;padding:0 4px}
.p-aisec-detail__card li{position:relative;margin-bottom:6px;padding-left:14px;
  font-size:13.5px;line-height:1.75;color:#111}
.p-aisec-detail__card li::before{content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;background:#000;border-radius:1px}

/* ----- AI for Security: リード＋2カラム＋注記 ----- */
.p-aisec-aifs__lead{max-width:840px;margin:0 auto;padding:32px 12px 4px;
  text-align:center;font-size:15px;line-height:1.95;color:#222}
.p-aisec-aifs__blocks{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:18px}
.p-aisec-aifs__block{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:30px 26px;text-align:center;background:#fdfdfd;border-radius:10px;box-shadow:var(--aisec-card-shadow)}
.p-aisec-aifs__icon{display:grid;place-items:center;width:64px;height:64px;flex:none;
  border-radius:50%;background:#fff;border:2.5px solid var(--aisec-red);color:#1a1a1a}
.p-aisec-aifs__icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6}
.p-aisec-aifs__block p{margin:0;font-size:14px;line-height:1.95;color:#222}
.p-aisec-aifs__cat{margin-top:auto;padding-top:6px;font-size:12px;color:#666;letter-spacing:1.5px}
.p-aisec-aifs__tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding-top:4px}
.p-aisec-aifs__tag{padding:6px 16px;border-radius:4px;background:#7b3ff2;
  color:#fff;font-size:12px;font-weight:700;letter-spacing:1.2px}
.p-aisec-aifs__tag--alt{background:#5566ee}
.p-aisec-aifs__tag--alt2{background:#3a3ad0}
.p-aisec-aifs__note{margin-top:24px;padding:18px 24px;border-radius:10px;
  background:linear-gradient(105deg,#9e2ed8 0%,#d63a78 100%);
  color:#fff;text-align:center;font-weight:700;font-size:15px;letter-spacing:.5px}

/* ----- Security for AI: グラデーションパネル内に3サブセクション＋注記 ----- */
.p-aisec-sfa__panel{margin-top:18px;padding:48px 56px 56px;border-radius:8px;
  background:linear-gradient(94deg,#d9d9d9 60%,#ffb0b1 90%,#ff7274 103%)}
.p-aisec-sfa__subs{display:grid;gap:40px;justify-items:center}
.p-aisec-sfa__block{width:100%;max-width:600px}
.p-aisec-sfa__head{display:flex;align-items:center;gap:16px;padding:0 0 18px}
.p-aisec-sfa__bar{width:8px;height:26px;background:var(--aisec-red);flex:none}
.p-aisec-sfa__label{font-size:21px;font-weight:600;color:var(--aisec-ink);letter-spacing:.5px}
.p-aisec-sfa__card{padding:26px 26px 28px;background:#fdfdfd;border-radius:6px;box-shadow:0 0 26px rgba(243,229,245,.9)}
.p-aisec-sfa__title{margin-bottom:10px;font-size:20px;font-weight:700;color:var(--aisec-red);line-height:1.5}
.p-aisec-sfa__card h3{margin-bottom:8px;font-size:17px;font-weight:700;color:#010101;line-height:1.5}
.p-aisec-sfa__card p{font-size:14.5px;color:#000;line-height:1.85}
.p-aisec-sfa__note{width:fit-content;margin:40px auto 0;padding:14px 30px;border-radius:2px;
  background:#fff;color:#0e0e0e;text-align:center;font-weight:700;font-size:17px;letter-spacing:.3px;
  box-shadow:0 2px 10px rgba(0,0,0,.08)}

/* ----- テーマ別セクション レスポンシブ ----- */
@media(max-width:780px){
  .p-aisec-detail,.p-aisec-aifs__blocks{grid-template-columns:1fr}
  .p-aisec-band{padding:28px 16px 42px}
  .p-aisec-band__pill{padding:12px 30px}
  .p-aisec-theme-body{padding-bottom:54px}
  /* iOS Safari では fixed が不安定なため scroll にフォールバック */
  .p-aisec-theme-bg{background-attachment:scroll}
}
@media(max-width:560px){
  .p-aisec-band__pill{font-size:17px;padding:13px 24px;letter-spacing:1px}
  .p-aisec-band__pill::after{width:18px;height:18px;bottom:-7px}
  .p-aisec-theme-body{padding:8px 18px 50px}
  .p-aisec-theme-body__inner{padding:0 4px}
  .p-aisec-detail__card{padding:24px 20px}
  .p-aisec-detail__title,.p-aisec-detail__subtitle{font-size:16px}
  .p-aisec-detail__desc{font-size:13.5px}
  .p-aisec-detail__card li{font-size:12.5px}
  .p-aisec-aifs__block{padding:24px 20px}
  .p-aisec-aifs__block p{font-size:13.5px}
  .p-aisec-aifs__note{font-size:13.5px;padding:14px 18px}
  .p-aisec-sfa__panel{padding:28px 18px 32px}
  .p-aisec-sfa__subs{gap:28px}
  .p-aisec-sfa__label{font-size:18px}
  .p-aisec-sfa__card{padding:20px 20px 22px}
  .p-aisec-sfa__title{font-size:17px}
  .p-aisec-sfa__card h3{font-size:15px}
  .p-aisec-sfa__card p{font-size:13.5px}
  .p-aisec-sfa__note{font-size:14px;padding:13px 20px;margin-top:30px}
}

/* ===== ラインアップ (Lineup) ===== */
.p-aisec-lineup{padding:60px 0 72px;text-align:center;
  background:linear-gradient(120deg,var(--aisec-purple) 0%,var(--aisec-pink) 100%)}
.p-aisec-lineup__title{margin-bottom:34px;color:#fff;font-size:clamp(26px,3.2vw,45px);font-weight:700;letter-spacing:.5px}
.p-aisec-lineup__card{max-width:1087px;margin:0 auto;padding:38px 60px;
  background:#fdfdfd;border-radius:6px;box-shadow:0 0 20px #f3e5f5}
.p-aisec-lineup__card img{width:100%;max-width:908px;margin:0 auto;height:auto}

/* ===== CTA ===== */
.p-aisec-cta{padding:56px 20px 64px;text-align:center;background:var(--aisec-cta-bg)}
.p-aisec-cta__title{margin-bottom:26px;color:#fff;font-size:24px;font-weight:700;letter-spacing:.5px}
.p-aisec-cta__button{display:inline-flex;align-items:center;justify-content:center;gap:18px;
  width:min(560px,90%);height:85px;border-radius:42.5px;
  background:linear-gradient(180deg,var(--aisec-red) 0%,#99082d 100%);
  color:#f2f2f2;font-size:22px;font-weight:600;letter-spacing:.5px}
.p-aisec-cta__button::after{content:"";width:11px;height:11px;margin-top:1px;
  border-top:2px solid #f2f2f2;border-right:2px solid #f2f2f2;transform:rotate(45deg)}
.p-aisec-cta__button:hover{opacity:.94;color:#fff}

/* ===== Footer ===== */
.p-aisec-footer{padding:30px 24px;text-align:center;font-size:12px;
  background:#01121c;color:#9aa6b2;border-top:1px solid #11222c}
.p-aisec-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:14px}
.p-aisec-footer a:hover{color:#fff}

/* ===== レスポンシブ ===== */
/* Tablet */
@media(max-width:1100px){
  .p-aisec-hero__copy{padding:34px 40px 34px 8px;gap:24px}
}
/* Mobile: 縦積みレイアウト */
@media(max-width:900px){
  .p-aisec-voices__grid{grid-template-columns:1fr;gap:24px}
  .p-aisec-hero__inner{grid-template-columns:1fr;min-height:0}
  .p-aisec-hero__copy{order:1;padding:40px 28px 10px;text-align:center}
  .p-aisec-hero__copy p{margin:0 auto}
  .p-aisec-hero__illust{order:2;padding:6px 24px 30px}
  .p-aisec-hero__illust img{max-width:78%;max-height:440px}
  .p-aisec-issues{padding:60px 0 72px}
  .p-aisec-issues__cards{gap:36px}
  .p-aisec-issues__card{width:100%;max-width:380px}
}
@media(max-width:560px){
  .p-aisec-hero__copy h1{font-size:32px}
  .p-aisec-hero__copy{padding:32px 20px 8px}
  .p-aisec-hero__copy p{font-size:13.5px}
  .p-aisec-hero__logo{padding:9px 12px}
  .p-aisec-hero__logo img{height:26px}
  .p-aisec-hero__illust img{max-width:74%;max-height:380px}
  .p-aisec-issues__title{font-size:20px}
  .p-aisec-voices__card{gap:16px;padding:22px 18px}
  .p-aisec-voices__avatar{width:60px;height:60px}
  .p-aisec-voices__banner{font-size:19px;padding:24px 16px}
  .p-aisec-lineup{padding:50px 20px 60px}
  .p-aisec-lineup__title{font-size:20px;letter-spacing:0;margin-bottom:22px;line-height:1.45}
  .p-aisec-lineup__card{padding:22px 16px}
  .p-aisec-cta__title{font-size:20px}
  .p-aisec-cta__button{font-size:17px;height:70px}
}

/* ===== SP: ヘッダー上部の空白対策（cato-cloud02 準拠） =====
   SP では固定ヘッダー(.l-fixed-header)が display:none になる一方、
   #c-container 側に確保された固定ヘッダー分のオフセットが残り、
   ページ上部に空白が生じる。cato と同じく offset を打ち消す。 */
@media only screen and (max-width:767px){
  header{position:relative !important}
  #c-container{top:0 !important;position:relative !important}
}