/* Walkers staging - ai-support (AI導入支援) SWELLネイティブ再現 v3（本番Elementor準拠：Noto Sans JP + Jost / 青メイン強調 / カーブSVG / fadeIn） */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

#ai-support-page{
  --wkas-blue:#0CACF0;--wkas-blue-d:#1694E0;--wkas-cyan:#69CEF1;
  --wkas-orange:#EE880F;--wkas-orange-d:#d8760f;
  --wkas-ink:#1A1A1A;--wkas-gray:#555E64;--wkas-num:#C4C4C4;
  --wkas-bg-problem:#F3FBFF;--wkas-bg-youtube:#F1FBFF;
  --wkas-cw:min(82%,1440px); /* 本番準拠：内容幅＝ビューポート82%・上限1440px（左右マージン約9%） */
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--wkas-ink);line-height:1.8;
}
#ai-support-page *{box-sizing:border-box;}

/* ---- fadeIn（スクロールイン） ---- */
@keyframes wkasFadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
#ai-support-page .wkas-fade{opacity:0;}
#ai-support-page .wkas-fade.is-in{animation:wkasFadeUp .9s cubic-bezier(.16,.84,.44,1) forwards;}
#ai-support-page .wkas-fade.d1{animation-delay:.12s;}
#ai-support-page .wkas-fade.d2{animation-delay:.24s;}
#ai-support-page .wkas-fade.d3{animation-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  #ai-support-page .wkas-fade{opacity:1!important;animation:none!important;}
}

/* ---- 共通：セクションタイトル（青JA＋下線ダッシュ青24×2） ---- */
#ai-support-page .wkas-secttl{text-align:center;margin:0 0 16px;font-weight:700;color:var(--wkas-blue);font-size:36px;letter-spacing:.02em;line-height:1.6;}
#ai-support-page .wkas-secttl::after{content:"";display:block;width:24px;height:2px;background:var(--wkas-blue);margin:16px auto 0;}

/* ---- 共通：ボタン（本番準拠：18×32 / hoverで白背景＋橙字） ---- */
#ai-support-page .wkas-btn{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;color:#fff;background:var(--wkas-orange);padding:18px 32px;border:1px solid var(--wkas-orange);border-radius:99px;box-shadow:0 10px 24px rgba(238,136,15,.28);transition:transform .18s,box-shadow .18s,background .2s,color .2s;letter-spacing:.04em;}
#ai-support-page .wkas-btn:hover{background:#fff;color:var(--wkas-orange);border-color:var(--wkas-orange);transform:translateY(-2px);box-shadow:0 14px 30px rgba(238,136,15,.32);}
#ai-support-page .wkas-btn--ghost{background:#fff;color:var(--wkas-blue);border:2px solid var(--wkas-blue);box-shadow:none;}
#ai-support-page .wkas-btn--ghost:hover{background:var(--wkas-blue);color:#fff;border-color:var(--wkas-blue);box-shadow:none;}

/* ---- hero（本番：キャッチ＋タイトル一体ブロック / 2.4em base・2em span） ---- */
#ai-support-page .wkas-hero{position:relative;isolation:isolate;padding:100px 9% 50px;text-align:center;background-color:var(--wkas-blue-d);background-image:url("https://walker-s.co.jp/wp-content/uploads/2024/05/building-scaled.jpeg");background-position:center right;background-size:cover;background-repeat:no-repeat;overflow:hidden;}
#ai-support-page .wkas-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,#1694E0 0%,#69CEF1 100%);opacity:.88;}
#ai-support-page .wkas-hero__inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:33px;}
#ai-support-page .wkas-hero__lead{margin:0;font-weight:700;color:#fff;font-size:clamp(22px,3.4vw,38.4px);line-height:1.6;letter-spacing:1px;}
#ai-support-page .wkas-hero__big{display:inline-block;font-size:2em;line-height:2;letter-spacing:.04em;}
#ai-support-page .wkas-hero__wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1;pointer-events:none;}
#ai-support-page .wkas-hero__wave svg{display:block;width:100%;height:auto;}

/* ---- example ---- */
#ai-support-page .wkas-example{width:var(--wkas-cw);margin:0 auto;padding:84px 0;}
#ai-support-page .wkas-example__lead{text-align:center;color:var(--wkas-gray);margin:0 0 44px;font-size:15px;line-height:1.9;}
#ai-support-page .wkas-example__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#ai-support-page .wkas-card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(20,60,100,.07);border:1px solid #e8eef3;transition:transform .18s,box-shadow .18s;}
#ai-support-page .wkas-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,100,.14);}
#ai-support-page .wkas-card__img{aspect-ratio:1024/538;overflow:hidden;background:#e9edf1;}
#ai-support-page .wkas-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
#ai-support-page .wkas-card__ttl{margin:16px 20px 20px;font-weight:700;color:var(--wkas-ink);font-size:15px;line-height:1.6;}
#ai-support-page .wkas-example__cta,#ai-support-page .wkas-solution__cta,#ai-support-page .wkas-media__cta{text-align:center;margin-top:48px;}

/* ---- problem（本番：テキスト見出し＋画像カードを枠なし直置き） ---- */
#ai-support-page .wkas-problem{background:var(--wkas-bg-problem);padding:80px 0;text-align:center;}
#ai-support-page .wkas-problem__eyebrow{margin:0;}
#ai-support-page .wkas-underline{display:inline-block;font-weight:600;font-size:20px;color:#00A6EC;border-bottom:2px solid #00A6EC;line-height:1.7;padding-bottom:2px;}
#ai-support-page .wkas-problem__shikashi{margin:10px 0 6px;font-weight:600;font-size:18px;color:#000;}
#ai-support-page .wkas-problem__sub{margin:0 0 42px;font-weight:700;color:#000;font-size:28px;line-height:1.4;letter-spacing:.2px;}
#ai-support-page .wkas-problem__grid{width:var(--wkas-cw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
#ai-support-page .wkas-problem__item img{width:100%;display:block;}

/* ---- solution（本番：青グラデ背景＋白半透明角丸パネル＋ピル＋大番号） ---- */
#ai-support-page .wkas-solution{position:relative;background-image:linear-gradient(90deg,#1694E0 0%,#69CEF1 100%);padding:74px 0 88px;}
#ai-support-page .wkas-solution::before{content:"";position:absolute;top:0;left:0;width:100%;height:64px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M500,98.9L0,6.1V0h1000v6.1L500,98.9z' fill='%23F3FBFF'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;line-height:0;}
#ai-support-page .wkas-solution__panel{position:relative;z-index:2;width:var(--wkas-cw);margin:0 auto;background:rgba(255,255,255,.84);border-radius:16px;padding:58px 32px 40px;text-align:center;box-shadow:0 18px 40px rgba(20,60,100,.12);}
#ai-support-page .wkas-solution__pill{position:absolute;top:-21px;left:50%;transform:translateX(-50%);margin:0;line-height:0;}
#ai-support-page .wkas-solution__pill img{display:block;height:42px;width:auto;}
#ai-support-page .wkas-solution__lead{margin:0 0 36px;font-weight:700;color:#000;font-size:28px;line-height:1.8;letter-spacing:.2px;}
#ai-support-page .wkas-solution__lead strong{color:var(--wkas-blue);font-size:1.4em;font-weight:700;}
#ai-support-page .wkas-solution__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#ai-support-page .wkas-solution__col{text-align:center;padding:0 8px;}
#ai-support-page .wkas-solution__no{font-family:"Jost",sans-serif;font-weight:700;font-size:36px;line-height:1;color:rgba(25,29,31,.29);margin-bottom:8px;}
#ai-support-page .wkas-solution__col img{width:214px;max-width:72%;height:auto;margin:0 auto 14px;display:block;}
#ai-support-page .wkas-solution__col h3{margin:0;font-weight:700;color:#000;font-size:16px;line-height:1.7;}
#ai-support-page .wkas-solution__col h3 strong{color:var(--wkas-blue);font-weight:700;}
#ai-support-page .wkas-solution__cta{text-align:center;margin-top:34px;}

/* ---- reason（ジグザグ画像＋テキスト） ---- */
#ai-support-page .wkas-reason{padding:88px 0;}
#ai-support-page .wkas-reason .wkas-secttl{width:var(--wkas-cw);margin-left:auto;margin-right:auto;}
#ai-support-page .wkas-reason__list{width:var(--wkas-cw);margin:54px auto 0;display:flex;flex-direction:column;gap:72px;}
#ai-support-page .wkas-reason__cta{text-align:center;margin-top:56px;}
#ai-support-page .wkas-rrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
#ai-support-page .wkas-rrow__text{min-width:0;}
#ai-support-page .wkas-rrow__no{display:block;font-family:"Jost",sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--wkas-num);letter-spacing:0;margin-bottom:8px;}
#ai-support-page .wkas-rrow__ttl{margin:0 0 18px;font-weight:700;color:#000;font-size:clamp(24px,2.6vw,32px);line-height:1.45;letter-spacing:.02em;}
#ai-support-page .wkas-rrow__ttl strong{color:var(--wkas-blue);font-weight:700;}
#ai-support-page .wkas-rrow--blue .wkas-rrow__ttl{color:var(--wkas-blue);}
#ai-support-page .wkas-rrow__txt{margin:0;color:var(--wkas-gray);font-size:15px;line-height:1.8;font-weight:400;}
#ai-support-page .wkas-rrow__media img{width:100%;height:auto;display:block;border-radius:14px;}
#ai-support-page .wkas-rrow--rev .wkas-rrow__media{order:-1;}
/* 02補助金：この画像だけ大きく見えるので他のreason画像に合わせて少し縮小 */
#ai-support-page .wkas-rrow__media img[src*="feature2-1"]{width:86%;margin:0 auto;}
/* 04セキュリティ：背景フルブリードのカラム */
#ai-support-page .wkas-rrow__cover{min-height:448px;border-radius:14px;background-size:cover;background-position:center;background-repeat:no-repeat;}
/* 担当者3カード */
#ai-support-page .wkas-rrow__people{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
/* 担当者PNGはカード背景・影込みの画像。CSSの角丸/影は透明部分に矩形の影を落とすため付けない */
#ai-support-page .wkas-rrow__people img{display:block;width:100%;height:auto;}

/* ---- media ---- */
#ai-support-page .wkas-media{padding:84px 0;}
#ai-support-page .wkas-media--alt{background:var(--wkas-bg-youtube);}
#ai-support-page .wkas-media .wkas-secttl,#ai-support-page .wkas-media__lead,#ai-support-page .wkas-media__grid,#ai-support-page .wkas-media__cta{width:var(--wkas-cw);margin-left:auto;margin-right:auto;}
#ai-support-page .wkas-media__lead{text-align:center;color:var(--wkas-gray);margin:8px auto 42px;font-size:15px;}
#ai-support-page .wkas-media__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#ai-support-page .wkas-mcard{display:block;text-decoration:none;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(20,60,100,.08);border:1px solid #e8eef3;transition:transform .18s,box-shadow .18s;}
#ai-support-page .wkas-mcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,60,100,.15);}
#ai-support-page .wkas-mcard__img{aspect-ratio:16/9;overflow:hidden;background:#e9edf1;}
#ai-support-page .wkas-mcard__img img{width:100%;height:100%;object-fit:cover;display:block;}
#ai-support-page .wkas-mcard__ttl{margin:14px 18px 18px;font-weight:500;color:var(--wkas-ink);font-size:14px;line-height:1.7;}

/* ---- contact CTA（全幅・青グラデ＋白パネル） ---- */
#ai-support-page .wkas-contact{padding:64px 6%;background:linear-gradient(120deg,#5277f0 0%,#6f9bff 52%,#a6c5ff 100%);}
#ai-support-page .wkas-cta{max-width:1760px;margin:0 auto;background:#fff;border-radius:26px;padding:74px 24px 80px;text-align:center;box-shadow:0 24px 60px rgba(40,80,180,.18);}
#ai-support-page .wkas-cta__ttl{margin:0 0 36px;font-weight:800;color:#111;font-size:clamp(28px,3.4vw,42px);line-height:1.5;letter-spacing:.02em;}
#ai-support-page .wkas-cta__lead{margin:0 0 42px;color:#666;font-size:clamp(14px,1.2vw,16px);line-height:2.1;font-weight:400;}
#ai-support-page .wkas-cta__btnwrap{text-align:center;}
#ai-support-page .wkas-cta__btn{display:inline-block;background:#1a56f0;color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:18px 42px;border-radius:10px;box-shadow:0 12px 26px rgba(26,86,240,.32);transition:transform .18s,background .2s;}
#ai-support-page .wkas-cta__btn:hover{background:#1346d0;transform:translateY(-2px);}

/* ===== レスポンシブ（本番Elementor準拠：tablet=834px / mobile=600px） ===== */
@media (max-width:834px){
  #ai-support-page{--wkas-cw:86%;}
  /* hero */
  #ai-support-page .wkas-hero{padding:80px 7% 46px;}
  /* セクション余白を圧縮 */
  #ai-support-page .wkas-example{padding:60px 0;}
  #ai-support-page .wkas-problem{padding:60px 0;}
  #ai-support-page .wkas-solution{padding:64px 0 68px;}
  #ai-support-page .wkas-reason{padding:64px 0;}
  #ai-support-page .wkas-media{padding:60px 0;}
  /* セクションタイトル 36→31.68px（本番値） */
  #ai-support-page .wkas-secttl{font-size:31.68px;}
  /* reason：画像＋テキストは縦積み（本番834で--width:100%） */
  #ai-support-page .wkas-rrow{grid-template-columns:1fr;gap:26px;}
  #ai-support-page .wkas-rrow__txt{line-height:1.75;}
  /* 縦積み時は全行「テキスト→画像（下）」の順に統一（本番モバイル準拠） */
  #ai-support-page .wkas-rrow__text{order:0;}
  #ai-support-page .wkas-rrow__media{order:1;}
  #ai-support-page .wkas-rrow--rev .wkas-rrow__media{order:1;}
  #ai-support-page .wkas-rrow__media img[src*="feature2-1"]{width:64%;}
  #ai-support-page .wkas-rrow__cover{min-height:300px;}
  /* 担当者3カードはタブレットでも3列維持（本番32%） */
  #ai-support-page .wkas-rrow__people{grid-template-columns:repeat(3,1fr);}
  /* 6枚カードは本番では33%＝3列維持。間隔と文字を詰める */
  #ai-support-page .wkas-example__grid,#ai-support-page .wkas-media__grid{gap:14px;}
  #ai-support-page .wkas-card__ttl{font-size:13px;margin:12px 13px 16px;}
  #ai-support-page .wkas-mcard__ttl{font-size:12.5px;margin:11px 12px 14px;}
  /* contact */
  #ai-support-page .wkas-cta{padding:60px 22px 64px;border-radius:22px;}
}

@media (max-width:600px){
  #ai-support-page{--wkas-cw:90%;} /* 左右約20px */
  /* hero（本番モバイル padding-top 64px相当） */
  #ai-support-page .wkas-hero{padding:60px 18px 40px;}
  #ai-support-page .wkas-hero__inner{gap:26px;}
  /* FV：指定の<br>位置で各行が1行に収まるようフォントと字間を縮小（中途半端な折返し防止） */
  #ai-support-page .wkas-hero__lead{font-size:clamp(15px,4.5vw,20px);letter-spacing:.2px;line-height:1.7;}
  #ai-support-page .wkas-hero__big{font-size:2.1em;line-height:1.6;}
  /* セクションタイトル 26px */
  #ai-support-page .wkas-secttl{font-size:26px;}
  #ai-support-page .wkas-secttl::after{margin-top:12px;}
  /* セクション余白さらに圧縮 */
  #ai-support-page .wkas-example,#ai-support-page .wkas-problem,#ai-support-page .wkas-media{padding:48px 0;}
  #ai-support-page .wkas-solution{padding:52px 0 56px;}
  #ai-support-page .wkas-reason{padding:52px 0;}
  /* problem（本番モバイル：sub24px） */
  #ai-support-page .wkas-problem__sub{font-size:24px;margin-bottom:30px;}
  #ai-support-page .wkas-problem__shikashi{font-size:16px;}
  #ai-support-page .wkas-underline{font-size:17px;}
  /* テキスト入り画像カードはモバイルで1列（可読性優先） */
  #ai-support-page .wkas-problem__grid,#ai-support-page .wkas-example__grid,#ai-support-page .wkas-media__grid{grid-template-columns:1fr;gap:18px;}
  #ai-support-page .wkas-problem__item img{max-width:420px;margin:0 auto;}
  #ai-support-page .wkas-card__ttl{font-size:15px;margin:16px 20px 20px;}
  #ai-support-page .wkas-mcard__ttl{font-size:14px;margin:14px 18px 18px;}
  /* solution：1列＋lead 20px（本番値） */
  #ai-support-page .wkas-solution__grid{grid-template-columns:1fr;gap:22px;}
  #ai-support-page .wkas-solution__panel{padding:46px 18px 32px;}
  #ai-support-page .wkas-solution__lead{font-size:20px;line-height:1.7;margin-bottom:28px;}
  #ai-support-page .wkas-solution__col img{width:180px;}
  /* reason */
  #ai-support-page .wkas-rrow{gap:20px;}
  #ai-support-page .wkas-rrow__media img[src*="feature2-1"]{width:78%;}
  #ai-support-page .wkas-rrow__cover{min-height:230px;}
  /* 担当者3カード → モバイル2列（本番48%） */
  #ai-support-page .wkas-rrow__people{grid-template-columns:repeat(2,1fr);gap:10px;}
  /* contact CTA */
  #ai-support-page .wkas-contact{padding:44px 16px;}
  #ai-support-page .wkas-cta{padding:48px 18px 52px;border-radius:18px;}
  #ai-support-page .wkas-cta__lead br{display:none;}
  #ai-support-page .wkas-btn{padding:16px 26px;font-size:15px;}
}

/* ---- このページのみ：右下フローティング「1分で見積もる」を非表示（本CSSはai-supportページ限定enqueueのため他ページ非影響） ---- */
#simulate-button-wrap{display:none!important;}
