@charset "utf-8";
/* ============================================================
   T-4OO LP  —  css/style.css
   ------------------------------------------------------------
   1. ベース／グローバル      … 元 <style> ブロックをそのまま移設
   2. 見出し書体              … Design Canvas の applyTheme() 相当を静的化
   3. ホバー                  … style-hover 属性を実 CSS に変換
   4. スクロール表示アニメ    … runMotion() 相当（JS はクラス付与のみ）
   5. FAQ アコーディオン
   6. 導入事例の写真プレース
   7. レスポンシブ            … ★新規追加（不要なら丸ごと削除可）
   ============================================================ */

/* ---------- 1. ベース／グローバル ---------- */
body{margin:0;background:#FCFCFA;color:#17211E;font-family:'Zen Kaku Gothic New',sans-serif;--ac:#1E6FB0;-webkit-font-smoothing:antialiased}
a{color:#1E6FB0;text-decoration:none}
a:hover{color:#164F7E}
::selection{background:rgba(30,111,176,.18)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:860px){#fixNav a:not([href="#contact"]){display:none}}
@media (max-width:820px){#fixHeader{padding:14px 20px!important}#fixHeader span{display:none}}
:root{--ac:#1E6FB0;--ac-dark:#175486}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}
section,header,footer{overflow-wrap:anywhere}

/* ---------- 2. 見出し書体（gothic） ---------- */
/* Canvas 版では applyTheme() が !important で上書きしていたため同値を静的に固定 */
h1,h2{font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:900!important;letter-spacing:.02em!important}

/* ---------- 3. ホバー ---------- */
a{transition:color .18s ease,background-color .18s ease,opacity .18s ease}
.hv1:hover{color:var(--ac)}
.hv2:hover{background:var(--ac-dark);color:#fff}
.hv3:hover{background:#EAF2FB;color:var(--ac)}
.hv4:hover{opacity:.92;color:#fff}
.hv5:hover{background:#EAF2FB;color:#1E5FBF}

/* ---------- 4. スクロール表示アニメーション ---------- */
/* JS 無効時は最初から表示されるよう .js-rv 前提にしている */
.js-rv [data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.js-rv [data-rv].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-rv [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  .fv-kv,.fv-copy{animation:none!important}
}

/* ---------- 5. FAQ アコーディオン ---------- */
.faq-icon{flex:none;width:26px;height:26px;border-radius:50%;background:#EAF3FC;color:#1467B0;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
  transition:all .2s ease}
.faq-q[aria-expanded="true"] .faq-icon{background:#1467B0;color:#fff;transform:rotate(45deg)}
.faq-q:focus-visible{outline:2px solid var(--ac);outline-offset:-3px}
.faq-a[hidden]{display:none}

/* ---------- 6. 導入事例の写真プレースホルダー ---------- */
/* 写真が用意できたら <div class="case-photo">…</div> を
   <img src="assets/case-olympus.jpg" alt="…" style="width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px"> に差し替え */
.case-photo{width:100%;aspect-ratio:16/10;border-radius:10px;background:#EDF2F8;
  border:1px dashed #B9CBE2;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;color:#7A93B4;font-size:12.5px;line-height:1.7}
.case-photo code{font-size:11.5px;color:#5C7EA6}

/* ============================================================
   7. レスポンシブ（★新規追加）
   Canvas 版は 1536px 固定幅前提だったため、実機表示用に
   段組みの折り返しとFVの縦積みを追加している。
   ============================================================ */
@media (max-width:1024px){
  /* 3カラム／2カラムのグリッドを2カラム→1カラムへ */
  section [style*="grid-template-columns:1fr 1fr 1fr"],
  section [style*="grid-template-columns:repeat(3,1fr)"],
  section [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{
    grid-template-columns:1fr 1fr!important}
}
@media (max-width:860px){
  /* --- FV --- */
  .fv{background:linear-gradient(180deg,#FFFFFF 0%,#EFF5FD 70%,#E4EFFB 100%)!important}
  .fv-kv{position:static!important;width:100%!important;margin-top:8px}
  .fv-copy{width:100%!important;padding:28px 20px 0!important}
  .fv-copy h1{font-size:clamp(24px,6.4vw,34px)!important}
  .fv-copy>div[style*="display:flex"]{flex-wrap:wrap!important}
  .fv-copy a{flex:1 1 100%;justify-content:center}
  .fv+*,.fv [style*="padding:0 40px 40px"]{padding-left:20px!important;padding-right:20px!important}

  /* --- 汎用：段組みを1カラムへ --- */
  section [style*="grid-template-columns"],
  footer [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  section [style*="gap:120px"]{gap:56px!important}
  /* BEFORE→AFTER の矢印を横倒しに */
  section [style*="grid-template-columns:1fr 72px 1fr"] svg{transform:rotate(90deg)}
  /* 縦罫線を横罫線に */
  section [style*="border-left:1px solid #EDF1F7"]{border-left:none!important;
    border-top:1px solid #EDF1F7!important;padding:22px 0 0!important;margin-top:22px}

  /* --- セクション内側の余白を圧縮 --- */
  section>div{padding-left:20px!important;padding-right:20px!important}
  section>div[style*="padding:120px"],section>div[style*="padding:110px"],
  section>div[style*="padding:106px"],section>div[style*="padding:104px"],
  section>div[style*="padding:100px"],section>div[style*="padding:88px"]{
    padding-top:64px!important;padding-bottom:72px!important}

  /* --- カード内の余白 --- */
  [style*="padding:40px 44px"],[style*="padding:40px 44px"]{padding:26px 20px!important}
  [style*="padding:26px 40px 26px 44px"]{padding:22px 20px 22px 26px!important}
  [style*="padding:34px 32px 28px"]{padding:24px 20px!important}

  /* --- 動画埋め込み --- */
  iframe{height:64vw!important;min-height:320px}

  /* --- フッター --- */
  footer>div{flex-direction:column!important;align-items:flex-start!important;
    padding-left:20px!important;padding-right:20px!important}
}
@media (max-width:860px){
  /* grid / flex の子は既定で min-width:auto のため、中身の固定幅が
     セル幅より広いとカードごと画面外へはみ出す。縮小を許可する。 */
  section [style*="display:grid"]>*,
  section [style*="display:flex"]>*{min-width:0}
  /* BEFORE / AFTER の書類モック（固定幅の棒線の並び）は折り返す */
  [style*="display:flex;gap:9px"]{flex-wrap:wrap!important}
  [style*="display:flex;gap:9px"]>span{max-width:100%}
}

/* 見出し内の white-space:nowrap（強調ハイライト）は狭い画面で
   はみ出して文字が切れるため折り返しを許可する */
@media (max-width:860px){
  h1 span[style*="white-space:nowrap"],
  h2 span[style*="white-space:nowrap"],
  h3 span[style*="white-space:nowrap"],
  p span[style*="white-space:nowrap"]{white-space:normal!important}
}
@media (max-width:560px){
  h2{font-size:clamp(22px,6.6vw,30px)!important}
  .faq-q{padding:18px 16px!important}
  .faq-a>div{padding:0 16px 20px 40px!important}
  section [style*="padding:22px 26px"]{padding:18px 16px!important}
  [style*="min-width:300px"]{min-width:0!important;width:100%}
}