@charset "UTF-8";
/* =========================================================
   AIDX-Navi LP
   BP: SP ≤768 / PC ≥769 / ヘッダーのみ ≤1180 でハンバーガー
   PC帯: .inner(1120) を JS の --z で zoom 縮小、KVは --zk(1440基準)
   ========================================================= */
:root{
  --blue:#0178C1;
  --purple:#4D3F88;
  --black:#373737;
  --gray:#F2F5F9;
  --hl:#BAE4FD;
  --white:#fff;
  --header-h:88px;
  --ff-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --ff-en:"Figtree","Noto Sans JP",sans-serif;
}
@media (max-width:1180px){ :root{ --header-h:64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* 下層ページから ../#id で戻った時に固定ヘッダーで見出しが隠れないように */
[id]{ scroll-margin-top:var(--header-h); }
body{
  margin:0; padding-top:var(--header-h);
  font-family:var(--ff-ja); color:var(--black); background:#fff;
  line-height:1.5; font-size:16px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-lock{ overflow:hidden; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; vertical-align:top; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
em{ font-style:normal; }
.c-blue{ color:var(--blue); }

.pc{ display:block; }
.sp{ display:none; }
br.pc{ display:inline; }
@media (max-width:768px){
  .pc, br.pc{ display:none; }
  .sp{ display:block; }
  br.sp{ display:inline; }
}

/* ---------- 共通 inner ---------- */
.inner{ width:1120px; margin-inline:auto; zoom:var(--z,1); }
@media (max-width:768px){
  .inner{ width:auto; max-width:540px; padding-inline:20px; zoom:1; }
}

/* ---------- フェードイン（参考サイト準拠: opacity のみ） ---------- */
/* ---------- スクロールアニメーション（kikagaku.co.jp/business/training 準拠）
   fade  : 下から40px + フェード（0.5s）
   clip  : 左→右のマスク展開（0.5s）
   shine : テキストに光沢が走る（1s）
   遅延  : data-delay × 0.2s（[data-stagger] 直下は同時発火した要素で自動スタッガー）
   使い分け（kikagaku.co.jp/business/training/feature 準拠）:
     セクション見出し（英字＋h2＋ライン）… まとめて fade
     番号ラベル（Reasons 01）・KVキャッチ・Contact … clip + shine
     小見出し・本文・画像・カード … fade
   発火  : 要素上端が画面の84%位置を越えたら1回だけ（js/main.js）
   ---------------------------------------------------------- */
:root{ --anim-ease:cubic-bezier(.45,0,.55,1); }
.js-anim [data-anim~="fade"]{ opacity:0; translate:0 40px; transition:opacity .5s var(--anim-ease), translate .5s var(--anim-ease); transition-delay:var(--anim-delay,0s); }
.js-anim [data-anim~="clip"]{ clip-path:inset(-10% 100% -10% 0); transition:clip-path .5s var(--anim-ease); transition-delay:var(--anim-delay,0s); }
.js-anim [data-anim~="fade"].is-in{ opacity:1; translate:0 0; }
/* fade-soft: 補助セクション用の控えめなフェードアップ（セキュリティ・FAQ） */
.js-anim [data-anim~="fade-soft"]{ opacity:0; translate:0 20px; transition:opacity .6s ease-out, translate .6s ease-out; }
.js-anim [data-anim~="fade-soft"].is-in{ opacity:1; translate:0 0; }
.js-anim [data-anim~="clip"].is-in{ clip-path:inset(-10% 0 -10% 0); }
[data-anim~="shine"], [data-anim~="shine-w"]{
  -webkit-text-fill-color:transparent; background-clip:text; -webkit-background-clip:text;
  background-repeat:no-repeat; background-size:300% auto; background-position:0 0; width:fit-content;
}
[data-anim~="shine"]{ background-image:linear-gradient(90deg, currentColor 0%, currentColor 34%, #B2C3CC 44.5%, #DFEAEE 46%, #FBFAF8 47.5%, currentColor 66%, currentColor 100%); }
[data-anim~="shine-w"]{ background-image:linear-gradient(90deg, currentColor 0%, currentColor 34%, #E2E2E2 39%, #AAAAAA 42.8%, #555 46%, #444 47.5%, #E0E0E0 58.9%, currentColor 66%, currentColor 100%); }
.js-anim [data-anim~="shine"], .js-anim [data-anim~="shine-w"]{ background-position:100% 0; }
.js-anim [data-anim~="shine"].is-in, .js-anim [data-anim~="shine-w"].is-in{ background-position:0 0; transition:clip-path .5s var(--anim-ease) var(--anim-delay,0s), background-position 1s var(--anim-ease) var(--anim-delay,0s); }
@media (prefers-reduced-motion:reduce){
  .js-anim [data-anim]{ opacity:1 !important; translate:none !important; clip-path:none !important; transition:none !important; }
}

/* ---------- 見出し h2 ---------- */
.h2{ display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center; }
.h2__en{ font-family:var(--ff-en); font-weight:600; font-size:20px; line-height:1.2; color:var(--blue); }
.h2__ja{ font-weight:700; font-size:38px; line-height:1.3; }
.h2__line{ display:block; width:50px; height:3px; background:var(--blue); }
@media (max-width:768px){
  .h2{ gap:26px; }
  .h2__ja{ font-size:28px; }
}

/* ---------- リード（下線つき見出し） ---------- */
.lead-block{ display:flex; flex-direction:column; gap:20px; }
.lead-block__ttl{
  font-weight:700; font-size:28px; line-height:1.5; padding-bottom:12px;
  background:
    linear-gradient(var(--blue),var(--blue)) left bottom / 100px 2px no-repeat,
    linear-gradient(#C4D0E0,#C4D0E0) left bottom / 100% 2px no-repeat;
}
.lead-block__txt{ font-size:18px; line-height:1.5; }
@media (max-width:768px){
  .lead-block__ttl{ font-size:18px; background-size:60px 2px,100% 2px; }
  .lead-block__txt{ font-size:16px; }
}

/* =========================================================
   header
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto; z-index:900; height:var(--header-h);
  background:#fff; box-shadow:0 0 10px rgba(0,0,0,.1);
}
.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; padding-inline:35px; }
.header__logo{ flex-shrink:0; transition:opacity .3s; }
.header__logo img{ width:221px; height:50px; display:block; }
.header__menu{ display:flex; align-items:center; gap:30px; white-space:nowrap; }
.header__nav{ display:flex; align-items:center; gap:20px; font-weight:700; font-size:14px; line-height:1.45; }
.header__nav a{ transition:color .3s; }
.header__nav a:hover{ color:var(--blue); }
.header__cta{ display:flex; gap:10px; }
.header__btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 32px; border-radius:50px; color:#fff; font-weight:700; font-size:14px; line-height:1.21; transition:opacity .3s; }
.header__btn--blue{ background:var(--blue); }
.header__btn--purple{ background:var(--purple); }
.header__btn:hover{ opacity:.8; }
.header__toggle{ display:none; }
@media (max-width:1180px){
  .header__inner{ padding-inline:20px; }
  .header__logo img{ width:141px; height:32px; }
  .header__menu{ display:none; }
  .header__toggle{ display:flex; flex-direction:column; justify-content:space-between; width:22px; height:16.5px; position:relative; }
  .header__toggle::before{ content:""; position:absolute; inset:-14px; }
  .header__toggle span{ display:block; height:2px; border-radius:2px; background:var(--black); }
}

/* ---------- SPメニュー（参考サイト準拠：全画面白・中央揃え） ---------- */
.spmenu{
  position:fixed; inset:0; z-index:1000; background:#fff;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s linear .3s;
}
.spmenu.is-open{ opacity:1; visibility:visible; transition:opacity .3s, visibility 0s; }
.spmenu__close{ position:absolute; top:12px; right:12px; width:40px; height:40px; }
.spmenu__close::before,.spmenu__close::after{ content:""; position:absolute; top:50%; left:50%; width:30px; height:3px; border-radius:2px; background:var(--black); }
.spmenu__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.spmenu__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.spmenu__inner{ display:flex; flex-direction:column; align-items:center; padding:36px 20px 60px; }
.spmenu__logo img{ width:176px; height:auto; display:block; }
.spmenu__nav{ display:flex; flex-direction:column; align-items:center; gap:25px; margin-top:40px; font-size:16px; line-height:1.5; }
.spmenu__nav a{ transition:color .3s; }
.spmenu__nav a:hover{ color:var(--blue); }
.spmenu__cta{ display:flex; flex-direction:column; gap:15px; width:100%; max-width:350px; margin-top:40px; }

/* =========================================================
   KV
   ========================================================= */
.kv{ position:relative; overflow:hidden; background:linear-gradient(-68.42deg, rgba(77,63,136,.5) 0%, rgba(227,225,236,.922) 59.26%, #fff 100%); }
.kv__bg{ position:absolute; inset:0; display:block; }
.kv__bg img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.kv__inner{ position:relative; width:1440px; height:550px; margin-inline:auto; zoom:var(--zk,1); display:flex; gap:25px; padding:76px 60px 0 120px; }
.kv__body{ width:640px; flex-shrink:0; display:flex; flex-direction:column; gap:30px; }
.kv__title{ display:flex; flex-direction:column; gap:20px; }
.kv__tag{ display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap; line-height:1.45; }
.kv__tag-ja{ font-size:25px; }
.kv__tag-en{ font-family:var(--ff-en); font-size:30px; color:var(--blue); line-height:1.2; }
.kv__catch{ font-weight:700; font-size:42px; line-height:1.3; white-space:nowrap; }
.kv__lead{ max-width:609px; font-weight:500; font-size:16px; line-height:1.5; }
.kv__cta{ display:flex; gap:10px; }
.kv__pct--pc{ width:595px; flex-shrink:0; }
.kv__pct--pc img{ width:595px; height:auto; display:block; }

/* KV CTA ボタン（spmenu でも使用） */
.kv-btn{ display:flex; align-items:center; gap:20px; height:80px; padding:0 30px 0 17px; border-radius:10px; color:#fff; font-weight:700; font-size:18px; line-height:1.45; white-space:nowrap; transition:opacity .3s; }
.kv-btn:hover{ opacity:.85; }
.kv-btn--blue{ background:var(--blue); }
.kv-btn--purple{ background:var(--purple); padding-left:40px; }
.kv-btn__in{ display:flex; align-items:center; gap:7px; }
.kv-btn__doc{ width:80px; height:45px; }
.kv-btn__arrow{ width:13px; height:auto; flex-shrink:0; }

@media (max-width:768px){
  .kv{ background:linear-gradient(-58.56deg, rgba(77,63,136,.5) 21.36%, rgba(212,209,227,.88) 60.8%, #fff 77.12%); }
  .kv__inner{ width:auto; max-width:540px; height:auto; zoom:1; display:block; padding:40px 20px 71px; }
  .kv__body{ width:auto; gap:20px; }
  .kv__title{ gap:15px; }
  .kv__tag{ gap:5px; }
  .kv__tag-ja{ font-size:14px; }
  .kv__tag-en{ font-size:16px; }
  .kv__catch{ font-size:28px; white-space:normal; }
  .kv__lead{ font-size:16px; white-space:normal; }
  .kv__pct--sp{ text-align:center; }
  .kv__pct--sp img{ width:350px; height:auto; }
  .kv__cta{ flex-direction:column; gap:15px; }
}
@media (max-width:1180px){
  /* spmenu 内のボタンは常に SP 仕様 */
  .spmenu .kv-btn{ justify-content:space-between; height:64px; border-radius:5px; padding:0 30px 0 17px; }
  .spmenu .kv-btn--purple{ padding-left:30px; }
  .spmenu .kv-btn__in{ flex:1; gap:0; padding-right:20px; }
  .spmenu .kv-btn__txt{ flex:1; text-align:center; }
}
@media (max-width:768px){
  .kv-btn{ justify-content:space-between; height:64px; border-radius:5px; padding:0 30px 0 17px; }
  .kv-btn--purple{ padding-left:30px; }
  .kv-btn__in{ flex:1; gap:0; padding-right:20px; }
  .kv-btn--purple .kv-btn__in{ padding-right:0; }
  .kv-btn__txt{ flex:1; text-align:center; }
  .kv-btn__arrow{ width:12.8px; }
}

/* =========================================================
   content（KVに食い込む白ベース）
   ========================================================= */
.content{ position:relative; margin-top:-50px; }
@media (max-width:768px){ .content{ margin-top:-30px; } }
.sec-round{ border-radius:50px 50px 0 0; }
@media (max-width:768px){ .sec-round{ border-radius:30px 30px 0 0; } }

/* ---------- achievements ---------- */
.achievements{ position:relative; background:#fff; border-radius:50px 50px 0 0; padding:60px 0; }
.achievements .inner{ display:flex; flex-direction:column; align-items:center; gap:50px; }
.achievements__ttl{ font-weight:700; font-size:32px; line-height:1.45; white-space:nowrap; text-align:center; padding-inline:8px;
  background:linear-gradient(var(--hl),var(--hl)) 0 32px / 715px 16px no-repeat; }
.achievements__ttl .hl{ display:inline; }
.achievements__ttl em{ font-size:38px; color:var(--blue); margin-inline:7px; }
.achievements__logos{ width:100%; }
.achievements__logos img{ width:100%; height:auto; display:block; }
@media (max-width:768px){
  .achievements{ border-radius:30px 30px 0 0; padding:40px 0; }
  .achievements .inner{ gap:30px; }
  .achievements__ttl{ background:none; padding:0; font-size:20px; display:flex; flex-direction:column; align-items:center; gap:10px; line-height:1.45; }
  .achievements__ttl br{ display:none; }
  .achievements__ttl .hl{ display:inline-block; background:linear-gradient(var(--hl),var(--hl)) 0 23px / 100% 12px no-repeat; }
  .achievements__ttl em{ font-size:28px; }
  .achievements__logos{ max-width:350px; }
}

/* ---------- service ---------- */
.service{ position:relative; background:var(--gray); padding:80px 0; }
.service .inner{ display:flex; flex-direction:column; gap:80px; }
.service__body{ display:flex; flex-direction:column; gap:50px; }
.service__flow{ display:flex; flex-direction:column; align-items:center; }
.service__card{ width:100%; background:#fff; border-radius:10px; padding:30px; display:flex; align-items:center; gap:30px; }
.service__who{ width:110px; flex-shrink:0; }
.service__who img{ width:110px; height:auto; display:block; }
.service__steps{ flex:1 1 0; min-width:0; display:flex; gap:5px; }
.service__step{ flex:1 1 0; min-width:0; background:var(--gray); border-radius:10px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; }
.service__step + .service__step{ margin-left:28.3px; }
.service__step + .service__step::before{ content:""; position:absolute; left:-24.5px; top:50%; width:17px; height:30px; margin-top:-15px; background:url(../images/service_arrow_right.svg) no-repeat center / contain; }
.service__step-no{ font-family:var(--ff-en); font-weight:700; font-size:20px; line-height:1; color:var(--blue); white-space:nowrap; }
.service__step-no span{ font-size:25px; }
.service__step-ttl{ font-weight:700; font-size:20px; line-height:1.2; white-space:nowrap; width:100%; text-align:center; padding-bottom:10px; border-bottom:1px solid var(--blue); }
.service__step-ttl small{ font-size:14px; }
.service__step-txt{ font-size:16px; line-height:1.4; width:100%; }
/* 矢印：吹き出しの高さに追従させる。
   吹き出し下端〜矢印（三角）上端に 8px のすき間を確保（Figma準拠）。
   SVG(192×176)は下端に固定し、吹き出しが高くなった分は上に同色(#CBD5E1)の帯を継ぎ足す */
.service__link{ position:relative; width:100%; min-height:176px; padding-bottom:45.5px; display:flex; justify-content:center; }
.service__down{ position:absolute; top:0; bottom:0; left:50%; width:192px; margin-left:-96px; background:url(../images/service_arrow_down.svg) no-repeat center bottom / 192px 176px; }
.service__down::before{ content:""; position:absolute; left:47.5px; top:0; width:100px; bottom:175px; background:#CBD5E1; }
.service__bubble{ position:relative; margin-top:21.67px; align-self:flex-start; background:#fff; border:2px solid #CBD5E1; border-radius:100px; padding:15px 40px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.service__bubble-txt{ font-weight:500; font-size:16px; line-height:1.45; white-space:nowrap; }
.service__tags{ display:flex; gap:10px; }
.service__tag{ display:inline-flex; align-items:center; gap:5px; background:var(--purple); color:#fff; border-radius:5px; padding:10px 16px; font-weight:700; font-size:18px; line-height:1.45; white-space:nowrap; }
.service__tag img{ width:24px; height:24px; }
.service__sec{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.service__sec-lead{ font-size:18px; line-height:1.45; }
.service__uses{ display:flex; gap:20px; }
.service__use{ flex:1 1 0; min-width:0; background:var(--gray); border-radius:10px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.service__use-ttl{ font-weight:700; font-size:20px; line-height:1.2; color:var(--blue); width:100%; text-align:center; padding-bottom:10px; border-bottom:1px solid var(--blue); }
.service__use-txt{ font-size:16px; line-height:1.4; width:100%; }
@media (max-width:768px){
  .service{ padding:60px 0; }
  .service .inner{ gap:60px; }
  .service__body{ gap:30px; }
  .service__card{ flex-direction:column; align-items:center; gap:10px; padding:20px; border-radius:5px; }
  .service__card--sec{ border-radius:10px; }
  .service__who{ width:90px; }
  .service__who img{ width:90px; }
  .service__steps{ flex:none; width:100%; flex-direction:column; gap:5px; }
  .service__step{ flex:none; width:100%; padding:15px; border-radius:5px; }
  /* ボックス間 = margin 28.3px + gap 5px = 33.3px（矢印の見た目の高さ 17px×0.78≒13.3px ＋ 上下10pxずつ） */
  .service__step + .service__step{ margin-left:0; margin-top:28.3px; }
  /* 矢印をボックス間（margin 28.3px + gap 5px）の上下中央に：-(間隔/2) - 矢印高さ30px/2 */
  .service__step + .service__step::before{ left:50%; top:calc(-1 * (28.3px + 5px) / 2 - 15px); margin:0 0 0 -8.5px; width:17px; height:30px; transform:rotate(90deg) scale(.78); transform-origin:center; }
  .service__step-no{ font-size:18px; margin-bottom:-5px; }
  .service__step-no span{ font-size:22px; }
  .service__step-ttl{ font-size:18px; }
  .service__bubble{ margin-top:17.46px; width:100%; max-width:350px; border-radius:30px; padding:15px 30px; align-self:flex-start; }
  .service__link{ justify-content:center; }
  .service__bubble{ align-self:flex-start; }
  .service__bubble-txt{ white-space:normal; }
  .service__tag{ padding:8px 14px; font-size:16px; }
  .service__tag img{ width:20px; height:20px; }
  .service__sec{ flex:none; width:100%; }
  .service__sec-lead{ font-size:16px; }
  .service__uses{ flex-direction:column; gap:10px; }
  .service__use{ flex:none; width:100%; padding:15px; border-radius:5px; }
  .service__use-ttl{ font-size:18px; }
}

/* ---------- チェックリスト（reasons / products 共通） ---------- */
.check-list{ display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:center; gap:10px; font-size:16px; line-height:1.45; }
.check-list li::before{ content:""; flex-shrink:0; width:20px; height:20px; background:url(../images/reasons_icon_list.svg) no-repeat center / contain; }
.h2__lead{ font-size:18px; line-height:1.5; }
@media (max-width:768px){
  .h2__lead{ font-size:16px; text-align:left; width:100%; }
}

/* ---------- reasons ---------- */
.reasons{ background:var(--gray); }
.reasons__wrap{ background:#fff; padding:80px 0; }
.reasons .inner{ display:flex; flex-direction:column; gap:80px; }
.reasons__list{ display:flex; flex-direction:column; gap:50px; }
.reason{ display:flex; align-items:flex-start; gap:50px; }
.reason--rev{ flex-direction:row-reverse; }
.reason__txt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:15px; }
.reason__no{ font-family:var(--ff-en); font-weight:600; font-size:28px; line-height:1.2; color:var(--blue); }
.reason__no span{ font-size:54px; }
.reason__ttl{ font-weight:700; font-size:28px; line-height:1.5; }
.reason__img{ width:560px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.reason__img img{ width:100%; height:auto; display:block; }
@media (max-width:768px){
  .reasons__wrap{ padding:60px 0; }
  .reasons .inner{ gap:60px; }
  .reasons__list{ gap:40px; }
  .reason, .reason--rev{ flex-direction:column; align-items:stretch; gap:20px; }
  .reason__txt{ flex:none; }
  .reason__no{ font-size:24px; }
  .reason__no span{ font-size:44px; }
  .reason__ttl{ font-size:20px; }
  .reason__img{ width:100%; border-radius:5px; }
}

/* ---------- solution ---------- */
.solution{ position:relative; background:var(--gray); padding:80px 0; }
.solution .inner{ display:flex; flex-direction:column; gap:80px; }
.solution__body{ display:flex; flex-direction:column; gap:50px; }
.solution__table{ display:flex; flex-direction:column; gap:20px; }
.solution__head{ display:flex; gap:70px; font-weight:700; font-size:20px; line-height:1.45; }
.solution__head p{ flex:1 1 0; min-width:0; }
.solution__row{ display:flex; align-items:stretch; gap:70px; position:relative; }
.solution__row::after{ content:""; position:absolute; left:50%; top:50%; width:22px; height:32px; margin:-16px 0 0 -11px; background:url(../images/solution_arrow.svg) no-repeat center / contain; }
.solution__before, .solution__after{ flex:1 1 0; min-width:0; border-radius:10px; padding:20px; font-size:16px; line-height:1.4; display:flex; align-items:center; }
.solution__before{ border:2px solid #CBD5E1; background:linear-gradient(90deg, var(--gray), #fff); }
.solution__after{ border:2px solid var(--blue); background:#fff; font-weight:500; gap:15px; }
.solution__after::before{ content:""; flex-shrink:0; width:30px; height:30px; background:url(../images/solution_icon_list.svg) no-repeat center / contain; }
.solution__txt{ flex:1 1 0; min-width:0; }
@media (max-width:768px){
  .solution{ padding:60px 0; }
  .solution .inner{ gap:60px; }
  .solution__body{ gap:30px; }
  .solution__table{ gap:15px; }
  .solution__head{ gap:30px; font-size:16px; text-align:center; }
  .solution__row{ gap:30px; }
  .solution__row::after{ width:13.8px; height:20px; margin:-10px 0 0 -6.9px; }
  .solution__before, .solution__after{ border-radius:5px; padding:15px; }
  .solution__after{ flex-direction:column; justify-content:center; gap:5px; }
  .solution__after::before{ width:25px; height:25px; }
  .solution__txt{ flex:none; width:100%; }
}

/* ---------- products ---------- */
.products{ background:var(--gray); }
.products__wrap{ background:#fff; padding:80px 0; }
.products .inner{ display:flex; flex-direction:column; gap:80px; }
.products .h2__ja{ line-height:1; }
.products__tablist{ display:flex; gap:20px; }
.products__tab{ flex:1 1 0; min-width:0; padding:20px 16px; border-radius:10px 10px 0 0; background:#CBD5E1; color:var(--black); font-weight:700; font-size:22px; line-height:1.45; white-space:nowrap; transition:background-color .3s, color .3s; }
.products__tab.is-active{ background:var(--gray); color:var(--blue); cursor:default; }
.products__tab:not(.is-active):hover{ background:#dbe2ec; }
.products__tab:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; }
.products__panels{ background:var(--gray); border-radius:0 0 10px 10px; padding:40px; }
.products__panel{ display:flex; flex-direction:column; gap:30px; }
.products__panel[hidden]{ display:none; }
.pcard{ display:flex; align-items:flex-start; background:#fff; border-radius:10px; padding:20px 20px 20px 0; }
.pcard__txt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:15px; padding:10px 20px 20px; }
.pcard__ttl{ font-weight:700; font-size:20px; line-height:1.2; color:var(--blue); padding-bottom:15px; border-bottom:1px solid var(--blue); }
.pcard__desc{ font-size:16px; line-height:1.4; }
.pcard__desc em{ font-weight:500; }
.pcard__img{ width:480px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.pcard__img img{ width:100%; height:auto; display:block; }
.check-list--sm li::before{ background-image:url(../images/products_icon_list.svg); }
.products__block{ display:flex; flex-direction:column; gap:50px; }
.elearn{ display:flex; align-items:flex-start; gap:30px; }
.elearn__txt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:15px; }
.elearn__img{ width:600px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.elearn__img img{ width:100%; height:auto; display:block; }
.basis{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.bcard{ background:var(--gray); border-radius:10px; overflow:hidden; padding-bottom:20px; display:flex; flex-direction:column; gap:20px; }
.bcard__img img{ width:100%; height:auto; display:block; }
.bcard__txt{ padding:0 20px; display:flex; flex-direction:column; gap:15px; }
.pbl{ display:flex; gap:28.3px; }
.pbl__step{ flex:1 1 0; min-width:0; background:var(--gray); border-radius:10px; padding:20px 15px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; }
.pbl__step + .pbl__step::before{ content:""; position:absolute; left:-22.5px; top:50%; width:17px; height:30px; margin-top:-15px; background:url(../images/products_arrow.svg) no-repeat center / contain; }
.pbl__head{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.pbl__no{ font-family:var(--ff-en); font-weight:700; font-size:18px; line-height:1; color:var(--blue); white-space:nowrap; }
.pbl__no span{ font-size:22px; }
.pbl__badge{ background:var(--purple); color:#fff; border-radius:5px; padding:6px 12px; font-weight:700; font-size:14px; line-height:1.45; white-space:nowrap; }
.pbl__badge--blue{ background:var(--blue); }
.pbl__ttl{ width:100%; text-align:center; font-weight:700; font-size:20px; line-height:1.2; white-space:nowrap; padding-bottom:10px; border-bottom:1px solid var(--blue); }
.pbl__body{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.pbl__lv{ background:#fff; color:var(--blue); border-radius:5px; padding:6px 12px; font-weight:700; font-size:14px; line-height:1.45; white-space:nowrap; }
.pbl__list{ list-style:disc; padding-left:24px; font-size:16px; line-height:1.4; }
@media (max-width:768px){
  .products__wrap{ padding:60px 0; }
  .products .inner{ gap:60px; }
  .products .h2__ja{ line-height:1.3; }
  .products__tablist{ gap:10px; }
  .products__tab{ padding:15px 0; font-size:16px; }
  .products__panels{ padding:20px; border-radius:0 0 5px 5px; }
  .products__panel{ gap:20px; }
  .pcard{ flex-direction:column; align-items:stretch; gap:15px; padding:20px 0 0; border-radius:5px; overflow:hidden; }
  .pcard__txt{ flex:none; padding:0 15px; gap:10px; }
  .pcard__ttl{ font-size:18px; padding-bottom:10px; }
  .pcard__img{ width:100%; border-radius:0 0 5px 5px; aspect-ratio:310 / 189; }
  .pcard__img img{ height:100%; object-fit:cover; object-position:center top; }
  .check-list--sm li{ font-size:14px; }
  .products__block{ gap:30px; }
  .elearn{ flex-direction:column; align-items:stretch; gap:20px; }
  .elearn__txt{ flex:none; }
  .elearn__img{ width:100%; border-radius:5px; }
  .basis{ grid-template-columns:1fr; gap:20px; }
  .bcard__img{ border-radius:5px 5px 0 0; overflow:hidden; }
  .bcard__txt{ padding:0 15px; gap:10px; }
  .pbl{ flex-direction:column; gap:43.3px; }
  .pbl__step{ flex:none; width:100%; }
  .pbl__step + .pbl__step::before{ left:50%; top:-37px; margin:0 0 0 -8.5px; transform:rotate(90deg); }
  .pbl__head{ align-items:flex-start; }
  .pbl__ttl{ font-size:18px; text-align:left; margin-top:-10px; }
  .pbl__step{ align-items:stretch; }
}

/* ---------- cta ---------- */
.cta{ position:relative; overflow:hidden; background:#1b1b1b; }
.cta__bg{ position:absolute; inset:0; display:block; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.cta__inner{ position:relative; width:900px; margin-inline:auto; zoom:var(--z,1); padding:69.5px 0; display:flex; flex-direction:column; align-items:center; gap:40px; min-height:294px; }
.cta__ttl{ color:#fff; font-weight:700; font-size:24px; line-height:1.5; text-align:center; }
.cta__btns{ display:flex; gap:30px; width:100%; }
.cta-btn{ flex:1 1 0; min-width:0; height:80px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; color:#fff; font-weight:700; font-size:18px; line-height:1.45; white-space:nowrap; transition:opacity .3s; }
.cta-btn:hover{ opacity:.85; }
.cta-btn--blue{ background:var(--blue); padding:0 20px 0 8px; }
.cta-btn--purple{ background:var(--purple); padding:0 20px; }
.cta-btn--purple .cta-btn__txt{ flex:1; text-align:center; }
.cta-btn__doc{ width:95px; height:53px; }
.cta-btn__arrow{ width:36px; height:36px; flex-shrink:0; }
@media (max-width:768px){
  .cta__inner{ width:auto; max-width:540px; zoom:1; padding:53px 20px; gap:20px; min-height:330px; }
  .cta__ttl{ font-size:20px; }
  .cta__btns{ flex-direction:column; gap:15px; }
  .cta-btn{ flex:none; height:64px; border-radius:5px; }
  .cta-btn--blue{ padding:0 20px 0 17px; }
  .cta-btn--blue .cta-btn__txt{ flex:1; text-align:center; padding-right:20px; }
  .cta-btn--purple{ padding:0 20px 0 30px; }
  .cta-btn__doc{ width:80px; height:45px; }
  .cta-btn__arrow{ width:30px; height:30px; }
}

/* ---------- case ---------- */
.case{ background:var(--gray); padding:80px 0; }
.case .inner{ display:flex; flex-direction:column; gap:80px; }
.case .h2__ja{ line-height:1; }
.case__list{ display:flex; flex-direction:column; gap:50px; }
.case-card{ display:flex; align-items:center; gap:40px; padding:40px 0 40px 40px; border-radius:10px; background:linear-gradient(90deg, #fff 50%, var(--gray) 90%); }
.case-card--rev{ flex-direction:row-reverse; padding:40px 40px 40px 0; background:linear-gradient(270deg, #fff 50%, var(--gray) 90%); }
.case-card__txt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:20px; }
.case-card__head{ width:100%; display:flex; flex-direction:column; gap:16px; line-height:1.5; }
.case-card__co{ font-weight:700; font-size:20px; color:var(--blue); }
.case-card__ttl{ font-weight:700; font-size:24px; line-height:1.5; }
.case-card__desc{ font-size:16px; }
.case-card__svc{ width:100%; min-height:126px; background:var(--gray); border-radius:10px; padding:20px 23px; display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:1.5; }
.case-card__svc-ttl{ font-weight:700; color:var(--blue); }
.case-card__svc ul{ list-style:disc; padding-left:24px; }
.case-card__link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; line-height:1.5; transition:opacity .3s; }
.case-card__link img{ width:34px; height:34px; transition:transform .3s; }
.case-card__link:hover{ opacity:.8; }
.case-card__link:hover img{ transform:translateX(3px); }
.case-card__img{ width:500px; flex-shrink:0; border-radius:10px; overflow:hidden; }
.case-card__img img{ width:100%; height:auto; aspect-ratio:500 / 327; object-fit:cover; display:block; }
@media (max-width:768px){
  .case{ padding:60px 0; }
  .case .inner{ gap:60px; }
  .case .h2__ja{ line-height:1.3; }
  .case__list{ gap:40px; }
  .case-card, .case-card--rev{ flex-direction:column-reverse; align-items:stretch; gap:20px; padding:0 0 20px; border-radius:5px; overflow:hidden; background:linear-gradient(0deg, #fff 50%, var(--gray) 90%); }
  .case-card__txt{ flex:none; padding:0 20px; gap:10px; }
  .case-card__head{ gap:10px; }
  .case-card__co{ font-size:16px; }
  .case-card__ttl{ font-size:18px; }
  .case-card__svc{ min-height:0; padding:15px; gap:5px; }
  .case-card__img{ width:100%; border-radius:0; }
  .case-card__img img{ aspect-ratio:350 / 229; }
}

/* ---------- security / faq ---------- */
.secfaq{ background:var(--gray); }
.secfaq__wrap{ background:#fff; padding:80px 0; }
.secfaq .inner{ display:flex; flex-direction:column; gap:60px; }
.secfaq__row{ display:flex; align-items:flex-start; }
.secfaq__ttl{ width:460px; flex-shrink:0; font-weight:700; font-size:34px; line-height:1.2; white-space:nowrap; }
.secfaq__body{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.secfaq__line{ margin:0; border:0; height:2px; background:#CBD5E1; }
.security__badges{ display:flex; gap:20px; }
.security__badge{ height:150px; background:#fff; border:2px solid var(--gray); border-radius:10px; box-shadow:2px 2px 15px rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center; }
.security__badge--p{ width:150px; }
.security__badge--p img{ width:100px; height:auto; }
.security__badge--iso{ width:250px; }
.security__badge--iso img{ width:181px; height:auto; }
.security__txt{ font-size:16px; line-height:1.5; text-align:justify; }
.faq{ gap:15px; }
.faq__item{ border:2px solid var(--gray); border-radius:10px; overflow:hidden; }
.faq__item h3{ font:inherit; }
.faq__q{ width:100%; display:flex; align-items:center; gap:15px; padding:13px 18px; background:var(--gray); text-align:left; font-weight:500; font-size:16px; line-height:1.5; transition:background-color .3s; }
.faq__q:hover{ background:#e6ebf2; }
.faq__q:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.faq__q-txt{ flex:1 1 0; min-width:0; }
.faq__icon{ position:relative; width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--blue); }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; top:50%; left:50%; width:13px; height:2.5px; margin:-1.25px 0 0 -6.5px; border-radius:2px; background:#fff; transition:transform .3s; }
.faq__icon::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__icon::after{ transform:rotate(0deg); }
.faq__a{ height:0; overflow:hidden; transition:height .3s ease; }
.faq__a-txt{ padding:15px 18px; font-size:16px; line-height:1.5; }
@media (max-width:768px){
  .secfaq__wrap{ padding:60px 0; }
  .secfaq .inner{ gap:40px; }
  .secfaq__row{ flex-direction:column; align-items:stretch; gap:30px; }
  .secfaq__ttl{ width:auto; font-size:24px; white-space:normal; }
  .secfaq__body{ flex:none; }
  .faq{ gap:15px; }
  .security__badges{ gap:10px; }
  .security__badge{ height:auto; aspect-ratio:1; border-radius:5px; border-width:1.7px; box-shadow:1px 1px 10px rgba(0,0,0,.1); }
  .security__badge--p{ width:auto; flex:127.3 1 0; }
  .security__badge--iso{ width:auto; flex:212.2 1 0; aspect-ratio:212.2 / 127.3; }
  .security__badge--p img{ width:66.7%; }
  .security__badge--iso img{ width:72.4%; }
}

/* ---------- flow ---------- */
.flow{ position:relative; background:var(--gray); padding:80px 0; }
.flow .inner{ display:flex; flex-direction:column; gap:50px; }
.flow__list{ display:flex; gap:69px; }
.flow__step{ flex:1 1 0; min-width:0; position:relative; padding-top:39.5px; display:flex; }
.flow__step + .flow__step::before{ content:""; position:absolute; left:calc(-69px / 2 - 10.5px); /* ボックス間69pxの中央 − 矢印幅21pxの半分 */ top:calc(50% + 19.75px); width:21px; height:35px; margin-top:-17.5px; background:url(../images/flow_arrow.svg) no-repeat center / contain; }
.flow__num{ position:absolute; left:20px; top:0; width:80px; height:80px; z-index:1; }
.flow__card{ flex:1; background:#fff; border-radius:10px; padding:50px 26px 30px; /* STEP02「動画視聴 or アセスメント受検」を1行に収めるため左右26px */ display:flex; flex-direction:column; align-items:center; gap:20px; }
.flow__ttl{ width:100%; font-weight:700; font-size:20px; line-height:1.5; text-align:center; }
.flow__ttl--1line{ min-height:60px; display:flex; align-items:center; justify-content:center; }
.flow__txt{ font-size:16px; line-height:1.5; width:100%; }
@media (max-width:768px){
  .flow{ padding:60px 0; }
  .flow__list{ flex-direction:column; gap:23.3px; }
  .flow__step{ flex:none; padding-top:27px; }
  /* 矢印をカード間の上下中央に：前カード下端〜次カード上端 = gap 23.3px + padding-top 27px。
     中心 = ステップ上端から (27 - 23.3)/2、矢印ボックス高さ35pxの半分を引く */
  .flow__step + .flow__step::before{ left:50%; top:calc((27px - 23.3px) / 2 - 17.5px); margin:0 0 0 -10.5px; transform:rotate(90deg) scale(.9); }
  .flow__num{ left:0; width:70px; height:70px; }
  .flow__card{ padding:20px 15px; gap:10px; }
  .flow__ttl{ padding-inline:0; }
}
/* 幅が狭い端末では、中央揃えのタイトル1行目が左上のSTEP丸（70px）に重なるため、タイトルを丸の下から始める */
@media (max-width:374px){
  .flow__ttl{ margin-top:25px; }
  .flow__ttl--1line{ min-height:0; }
}

/* ---------- contact ---------- */
.contact{ position:relative; overflow:hidden; background:#1b1b1b; }
.contact__inner{ position:relative; width:900px; margin-inline:auto; zoom:var(--z,1); min-height:505px; padding:71px 0; display:flex; flex-direction:column; align-items:center; gap:50px; color:#fff; }
.contact__h2{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; white-space:nowrap; }
.contact__en{ font-family:var(--ff-en); font-weight:600; font-size:20px; line-height:1.2; }
.contact__ja{ font-weight:700; font-size:38px; line-height:1.45; }
.contact__corp{ width:300px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.contact__corp-lead{ font-weight:700; font-size:16px; line-height:1.5; }
.contact__corp-btn{ width:100%; height:60px; border:2px solid #fff; border-radius:10px; display:flex; align-items:center; padding:0 20px; font-weight:700; font-size:16px; line-height:1.45; transition:background-color .3s; }
.contact__corp-btn span{ flex:1; text-align:center; }
.contact__corp-btn img{ width:26px; height:26px; flex-shrink:0; }
.contact__corp-btn:hover{ background:rgba(255,255,255,.15); }
@media (max-width:768px){
  .contact__inner{ width:auto; max-width:540px; zoom:1; min-height:530px; padding:57.5px 20px; }
  .contact__h2{ gap:20px; }
  .contact__ja{ font-size:28px; }
  .contact__corp{ gap:10px; }
  .contact__corp-btn{ border-radius:5px; }
}

/* =========================================================
   footer
   ========================================================= */
.footer{ background:#fff; padding:30px 35px; display:flex; flex-direction:column; gap:30px; }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer__logo img{ width:221px; height:50px; display:block; }
.footer__nav{ display:flex; align-items:center; gap:30px; }
.footer__nav a{ display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:1.45; white-space:nowrap; transition:color .3s; }
.footer__nav a.is-bold{ font-weight:700; }
.footer__nav a::after{ content:""; width:13px; height:13px; flex-shrink:0; background:url(../images/footer_icon_link.svg) no-repeat center / contain; }
.footer__nav a:hover{ color:var(--blue); }
.footer__line{ margin:0; border:0; height:2px; background:#CBD5E1; }
.footer__bottom{ display:flex; align-items:center; justify-content:center; gap:15px; font-size:12px; line-height:1.45; }
.footer__pmark{ width:50px; height:50px; }
.footer__copy small{ font-size:12px; }
@media (max-width:1180px){
  .footer__top{ align-items:flex-start; }
  .footer__nav{ flex-wrap:wrap; justify-content:flex-end; gap:12px 24px; }
}
@media (max-width:768px){
  .footer{ padding:40px 20px; }
  .footer__logo img{ width:133px; height:auto; }
  .footer__nav{ flex-direction:column; align-items:flex-start; gap:20px; }
  .footer__line{ background:#F3F3F3; }
  .footer__bottom{ display:grid; grid-template-columns:50px 1fr; column-gap:8px; row-gap:10px; justify-content:start; max-width:335px; }
  .footer__license{ padding-top:11px; }
  .footer__copy{ grid-column:1 / -1; text-align:center; }
}

/* ---------- 追従CTA ---------- */
/* 表示区間: Service セクションが画面に入ってから、Contact セクションが画面に入るまで（js/main.js）
   出現: 右→左へスライド＋フェードイン／非表示: その逆。
   速度・イージングはコンテンツのスクロールアニメ（0.5s / --anim-ease）に合わせる */
.float-cta{ position:fixed; right:0; bottom:20px; z-index:800; width:330px;
  opacity:0; translate:100% 0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--anim-ease), translate .5s var(--anim-ease), visibility 0s linear .5s; }
.float-cta.is-show{ opacity:1; translate:0 0; visibility:visible; pointer-events:auto;
  transition:opacity .5s var(--anim-ease), translate .5s var(--anim-ease), visibility 0s; }
.float-cta img{ width:100%; height:auto; display:block; transition:opacity .3s; }
.float-cta:hover img{ opacity:.9; }
@media (prefers-reduced-motion:reduce){ .float-cta, .float-cta.is-show{ translate:0 0; transition:opacity .2s, visibility 0s; } }
@media (max-width:768px){
  .float-cta{ width:260px; bottom:10px; }
}