@charset "UTF-8";

/* ============================================================
   CareSend LP  -  style.css
   ※数値はすべて Figma「TOP-PC」（1536×6412）/「TOP-SP」（375×7785）実測
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root{
  --c-primary:      #007FC6;
  --c-primary-dark: #00669e;
  --c-grad-from:    #007FC6;
  --c-grad-to:      #02D1FF;
  --c-orange:       #F47500;
  --c-text:         #333333;
  --c-text-dark:    #222222;
  --c-text-light:   #6b7684;
  --c-bg:           #ffffff;
  --c-bg-gray:      #F9F9F9;
  --c-border:       #d5e0ea;
  --c-req:          #F90000;

  --header-h: 96px;       /* 実測 1536×96（SPは64px） */
  --container: 1024px;    /* 実測 1536 − 左右256px */
  --fv-container: 1200px; /* FVだけ別枠：左168 〜 右1368（左カラムは+24で192） */

  --fade-y: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; height:auto; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,button,textarea,select{ font:inherit; }

body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--c-text);
  line-height:1.8;
  background:var(--c-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Utilities ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:0;        /* Figmaは1024pxちょうど。余白は狭い画面だけ付ける */
}
.container--narrow{ max-width:var(--container); }
.sp-only{ display:none; }
.br-sp{ display:none; }        /* SPだけで効かせる改行 */

/* セクション見出し（32px / Bold / 中央） */
.sec-title{
  text-align:center;
  font-size:32px; font-weight:700; line-height:1.5;
  color:var(--c-text-dark); letter-spacing:0;
}

/* ---------- ふわっと出現アニメ（JS有効時のみ初期状態を適用） ----------
   ※ will-change は付けない。22個もレイヤーを作るとChromeが再描画に失敗して
     文字が二重に見える（ゴースト）原因になる                              */
.js [data-fade]{
  opacity:0;
  transform:translateY(var(--fade-y));
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-fade].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .js [data-fade]{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   ヘッダー（追従）
   実測：1536×96 / ロゴ227×52（上22・左20）
        ナビ 16px Bold 中央768 / CTA 189×96 右端ぴったり
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.08);
  z-index:1000;
}
.header__inner{
  position:relative;
  height:100%; width:100%;
  padding-left:20px;
  display:flex; align-items:center;
}
.header__logo{ flex-shrink:0; display:flex; align-items:center; }
.header__logo-img{ width:227px; height:52px; object-fit:contain; }

/* ナビは「画面の中央768px」に来るので絶対配置で中央寄せ */
.gnav{
  position:absolute; left:50%; top:0; height:100%;
  transform:translateX(-50%);
  display:flex; align-items:center;
}
.gnav__list{ display:flex; gap:28px; }
.gnav__list a{
  font-size:16px; font-weight:700; line-height:1; color:var(--c-primary);
  position:relative; padding:6px 0; transition:color .2s;
}
.gnav__list a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--c-primary);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.gnav__list a:hover::after{ transform:scaleX(1); }

/* 資料請求ボタン：アイコンと文字は「横並び」 */
.header__cta{
  margin-left:auto; align-self:stretch;
  width:189px; flex-shrink:0;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:7px;
  background:var(--c-primary); color:#fff;
  transition:background .2s;
}
.header__cta:hover{ background:var(--c-primary-dark); }
.header__cta-icon{ display:flex; }
.header__cta-icon svg{ width:32px; height:32px; }
.header__cta-text{ font-size:16px; font-weight:700; line-height:1; }

/* ハンバーガー（PCでは非表示） */
.hamburger{
  display:none; align-self:stretch;
  width:76px; flex-shrink:0; margin-left:auto;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:#3f444b; color:#fff;
}
.hamburger__icon,
.hamburger__icon::before,
.hamburger__icon::after{
  display:block; width:26px; height:2px; background:#fff;
  transition:transform .3s var(--ease), opacity .2s;
}
.hamburger__icon{ position:relative; }
.hamburger__icon::before,.hamburger__icon::after{ content:""; position:absolute; left:0; }
.hamburger__icon::before{ top:-8px; }
.hamburger__icon::after{ top:8px; }
.hamburger__label{ font-size:11px; font-weight:700; }
.hamburger.is-open .hamburger__icon{ background:transparent; }
.hamburger.is-open .hamburger__icon::before{ transform:translateY(8px) rotate(45deg); }
.hamburger.is-open .hamburger__icon::after{ transform:translateY(-8px) rotate(-45deg); }

/* スマホ用ドロワー */
.drawer{
  position:fixed; top:var(--header-h); right:0;
  width:100%; height:calc(100dvh - var(--header-h));
  background:var(--c-primary);
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  z-index:999; overflow-y:auto; visibility:hidden;
}
.drawer.is-open{ transform:translateX(0); visibility:visible; }
.drawer__list{ padding:8px 0; }
.drawer__list > li > a{
  display:block; padding:20px 28px; color:#fff; font-weight:700; font-size:17px;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.drawer__cta a{ display:flex; align-items:center; gap:10px; }
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:opacity .3s; z-index:998;
}
.drawer-overlay.is-open{ opacity:1; visibility:visible; }

/* ============================================================
   ファーストビュー
   実測：1536×850 / 左カラム 左192・幅615 / フォーム 400×586（左968・上180）
   ============================================================ */
.fv{
  position:relative;
  min-height:850px;
  padding-top:180px;      /* タグラインの上端 */
  background:linear-gradient(135deg, var(--c-grad-from) 0%, var(--c-grad-to) 100%);
  color:#fff;
  overflow:hidden;
}
.fv__inner{
  position:relative; z-index:1;
  max-width:var(--fv-container); margin-inline:auto;
  padding-left:24px;                /* 左カラムを192pxから始める */
  display:grid; grid-template-columns:615px 400px;
  justify-content:space-between;   /* 余り161pxが自動でカラム間に入る */
  align-items:start;
}

.fv__tagline{ font-size:20px; font-weight:400; line-height:1.5; margin-bottom:11px; }
.fv__title{ font-size:56px; font-weight:700; line-height:1.5; letter-spacing:0; white-space:nowrap; }
.fv__title-accent{ display:inline-block; }
.fv__desc{ margin-top:15px; font-size:20px; font-weight:400; line-height:1.5; }

/* 実績：白い正円3つ（164×164・間隔22px） */
.fv__stats{ margin-top:37px; padding-left:5px; display:flex; gap:22px; flex-wrap:wrap; }
.fv__stat{
  width:164px; height:164px; border-radius:50%;
  background:#fff; flex-shrink:0;
  border:1px solid var(--c-primary);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; line-height:1;
}
.fv__stat-label{ display:block; font-size:24px; font-weight:700; line-height:1; color:var(--c-primary); }
.fv__stat-num{
  display:block; margin-top:26px; font-size:32px; font-weight:700; line-height:1;
  color:var(--c-primary); white-space:nowrap;
}
.fv__stat-unit--sm{ font-size:24px; font-weight:700; }   /* 登録者「58,000人」の「人」だけ小さく */
.fv__stat-num sup{ font-size:12px; font-weight:700; line-height:1; vertical-align:top; margin-left:0; color:#333333; }
/* 正社員雇用だけ「693人」自体を中央に置き、*2 は右にぶら下げる */
.fv__stat-num--hang{ position:relative; }
.fv__stat-num--hang sup{ position:absolute; left:100%; top:0; }

/* 注釈は左下・イラストは重ねて右下に絶対配置（Figma 左588 / 上648） */
.fv__bottom{ display:block; margin-top:27px; }
.fv__note{ font-size:12px; font-weight:400; line-height:1.6; }
.fv__illust{
  position:absolute; left:420px; top:468px;
  width:360px; margin:0;
}
.fv__illust img{ width:100%; height:auto; }

/* ---------- 資料請求フォーム（共通）実測 400×586 ----------
   青バー 384×52（カード上8・左8・角丸5）／三角16×16
   ラベル14px Bold → 8px → 入力48px（#F5F8FA・border#CED4DA・角丸5）
   フィールド間15px ／ 注意書き14px×1.5 ／ ボタン320×52 角丸25
   ------------------------------------------------------------ */
.dlform{
  width:400px; max-width:100%; min-height:586px;   /* エラー表示で伸びられるように */
  background:#fff; border-radius:5px; color:var(--c-text);
  padding:8px 16px 28px;
  display:flex; flex-direction:column;             /* 送信完了メッセージを中央に置くため */
}

.dlform__title{
  position:relative;
  margin:0 -8px 24px;                 /* 左右に広げて384pxにする */
  height:52px;
  background:var(--c-primary); border-radius:5px;
  color:#fff; text-align:center;
  font-size:20px; font-weight:700; line-height:52px;
  white-space:nowrap;
}
.dlform__title::after{                /* 下向きの三角（16×16） */
  content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:16px solid var(--c-primary);
}
.dlform__row--half{ display:grid; grid-template-columns:175px 175px; gap:18px; margin-bottom:15px; }
.dlform__row--half .dlform__field{ margin-bottom:0; }
.dlform__field{ display:block; margin-bottom:15px; }
.dlform__body > .dlform__field:last-of-type{ margin-bottom:0; }
.dlform__label{
  display:block; margin-bottom:8px;
  font-size:14px; font-weight:700; line-height:1; color:var(--c-text);
}
.req{ color:var(--c-req); font-weight:400; margin-left:1px; }
.dlform__field input{
  width:100%; height:48px; padding:0 8px;
  border:1px solid #CED4DA; border-radius:5px;
  font-size:16px; line-height:1; color:var(--c-text);
  background:#F5F8FA;
  transition:border-color .2s, box-shadow .2s;
}
.dlform__field input::placeholder{ color:#AAAAAA; }
.dlform__field input:focus{
  outline:none; border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(0,127,198,.15); background:#fff;
}
.dlform__privacy{
  margin:24px 0 31px;
  font-size:14px; font-weight:400; line-height:1.5; color:var(--c-text);
}
.dlform__privacy a{ color:var(--c-primary); text-decoration:underline; }
.dlform__submit{
  display:flex; align-items:center; justify-content:center;
  width:320px; height:52px; margin-inline:auto; padding:0;
  border-radius:25px;
  background:var(--c-primary); color:#fff; font-weight:700; font-size:20px; line-height:1;
  transition:transform .15s, background .2s, opacity .2s;
}
.dlform__submit:not(:disabled):hover{ background:var(--c-primary-dark); transform:translateY(-2px); }
.dlform__submit:disabled{ background:#c3ccd6; color:#fff; cursor:not-allowed; opacity:.9; }
.dlform__done{
  flex:1 1 auto; padding:24px 8px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dlform__done-icon{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center;
}
.dlform__done p{ font-size:18px; font-weight:700; color:var(--c-text-dark); }

/* 入力エラー（カンプには無い状態。不要ならこの3行を消せば元通り） */
.dlform__error{ margin-top:4px; font-size:12px; font-weight:400; line-height:1.5; color:var(--c-req); }
.dlform__error:empty{ display:none; }
.dlform__field.is-error input{ border-color:var(--c-req); background:#FFF5F5; }
/* ============================================================
   選ばれ続けています
   実測：850〜1357 / 見出し上930 / 実績上1002（428×146・間隔84）
        ロゴ上1212（248×99・ピッチ328）
   ============================================================ */
.clients{ padding:80px 0 46px; text-align:center; background:#fff; }
.clients__head{ font-size:32px; font-weight:700; line-height:1; color:var(--c-text); }

.clients__stats{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:24px 84px;
  margin-top:40px;
}
.clients__stat-img{ width:428px; height:146px; object-fit:contain; }

/* ※ mask-image は付けない。動いている要素にマスクを重ねるとChromeが
     残像を出す（ゴースト）ので、両端のフェードは諦める              */
.logoloop{
  margin-top:64px; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw);   /* ロゴ列だけ画面幅いっぱい */
}
.logoloop__track{
  display:flex; width:max-content;
  animation:logoloop 28s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.logoloop__item{
  flex:0 0 auto; width:328px; height:99px;
  display:flex; align-items:center; justify-content:center;
}
.logoloop__item img{ width:248px; height:99px; object-fit:contain; }
@keyframes logoloop{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.logoloop:hover .logoloop__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .logoloop__track{ animation:none; } }

/* ============================================================
   CareSendについて / 特徴
   実測：白ボックス1024×1534（上1357・左256）
        カード480×325・間隔24（左276/780・上2186/2535）
   ============================================================ */
.intro-box{ padding:50px 0 31px; background:#fff; }
.intro-box .container{ padding:0; }

.about{ margin-bottom:116px; }
.about .sec-title{ margin-bottom:51px; }
.about__lead{
  width:fit-content; max-width:100%; margin-inline:auto;
  text-align:center; font-size:24px; font-weight:700; line-height:1.8;
}
/* 強調部分だけ32px（Figma実測：ベース24px／この span だけ32px・行間180%） */
.marker{ font-size:32px; font-weight:700; line-height:1.8; color:var(--c-primary); }

/* グレーの台（808×276）の上に、イラスト（562×316）が上下20pxはみ出す */
.about__fig{
  width:808px; max-width:100%; height:276px;
  margin:45px auto 0;
  background:var(--c-bg-gray); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
}
.about__fig img{ width:562px; max-width:none; height:auto; flex:0 0 auto; }

.feature .sec-title{ margin-bottom:51px; }
.feature__grid{
  display:grid; grid-template-columns:repeat(2,480px);
  gap:24px; justify-content:center;
}
.fcard{
  width:480px; min-height:325px;
  border:1px solid var(--c-primary); border-radius:0;
  padding:14px 32px 0; background:#fff;
}
.fcard__icon{ display:block; height:77px; width:auto; margin:0 auto; }
.fcard__title{
  margin:18px 0 0;
  font-size:20px; font-weight:700; line-height:1.5;
  text-align:center; color:var(--c-orange);
}
.fcard__text{ margin-top:18px; font-size:16px; font-weight:400; line-height:1.8; }

/* ============================================================
   CTAバナー  実測：1536×240（上2891）／文言もボタンも中央、縦積み
   ============================================================ */
.cta-band{
  height:240px;
  background:url(img/raba-bak.jpg) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.cta-band__inner{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:0;
}
.cta-band__text{
  color:#fff; font-size:24px; font-weight:700; line-height:1.8;
  text-align:center; letter-spacing:0;
}
.cta-band__btn{
  display:flex; align-items:center; justify-content:center;
  width:320px; height:52px; border-radius:25px;
  background:#fff; color:var(--c-primary); font-weight:700; font-size:20px; line-height:1;
  transition:transform .15s, box-shadow .2s;
}
.cta-band__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.28); }

/* ============================================================
   導入事例  実測：3131〜3891 / カード405×488（上3348・左328/803）
   ============================================================ */
.case{ padding:96px 0 37px; background:#fff; }
.case .sec-title{ margin-bottom:65px; }

.caseslider{ display:flex; align-items:center; justify-content:center; gap:8px; }
.caseslider__viewport{
  width:904px;            /* 880（カード2枚＋間70）＋ 影の逃げ左右12px */
  max-width:100%;
  padding:8px 12px 18px;
  overflow:hidden;
}
.caseslider__track{ display:flex; transition:transform .5s var(--ease); }

.casecard{ flex:0 0 405px; margin-right:70px; }
.casecard__inner{
  min-height:488px; height:100%; background:#fff;
  border-radius:30px 0 30px 0;                  /* 左上・右下だけ30px */
  box-shadow:0 5px 8px 3px rgba(51,51,51,.25);
  padding:32px 20px 20px;
  display:flex; flex-direction:column;
}
.casecard__title{ font-size:24px; font-weight:700; line-height:1.8; color:var(--c-text-dark); margin-bottom:24px; }
.casecard__hl{ color:var(--c-primary); }
.casecard__text{ font-size:14px; font-weight:400; line-height:1.8; color:var(--c-text); }
.casecard__author{ margin-top:auto; padding-top:37px; text-align:left; }
.casecard__author img{ width:164px; height:64px; object-fit:contain; object-position:left center; }

.caseslider__arrow{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:var(--c-primary); border:none; cursor:pointer; padding:0;
  font-size:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, opacity .2s;
}
.caseslider__arrow::before{
  content:""; width:9px; height:9px;
  border-top:2px solid #fff; border-right:2px solid #fff;
}
.caseslider__arrow--prev::before{ transform:rotate(-135deg); margin-left:3px; }
.caseslider__arrow--next::before{ transform:rotate(45deg);   margin-right:3px; }
.caseslider__arrow:hover{ background:var(--c-primary-dark); }
.caseslider__arrow:disabled{ opacity:.35; cursor:default; }

/* ============================================================
   料金  実測：グレー帯 3891〜5417（#F9F9F9）／見出し上3987／カード上4088
        カード296×277・間隔12・左312/620/928／上の青帯296×12（角丸上5）
        注釈 684×75（上4413・左312）
   ============================================================ */
.price{ padding:96px 0 0; background:var(--c-bg-gray); }
.price .sec-title{ line-height:1; color:var(--c-text); margin-bottom:69px; }
.price__grid{ display:grid; grid-template-columns:repeat(3,296px); gap:12px; justify-content:center; }
.pcard{
  height:277px;
  background:#fff; border:none; border-radius:5px;
  border-top:12px solid var(--c-primary);
  box-shadow:0 4px 4px rgba(51,51,51,.25);
  padding:32px 16px 0;          /* 上ボーダー12＋32＝ラベル上端44px（Figma実測） */
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.pcard--accent{ /* カンプでは3枚とも同じ見た目 */ }
/* ラベル24px(行間100%) → 23px → 数字96px(行間100%)。44+24+23+96=187、残り90pxが下 */
.pcard__label{ display:block; font-size:24px; font-weight:700; line-height:1; color:var(--c-text); margin-bottom:23px; }
.pcard__num{ display:block; font-size:96px; font-weight:700; color:var(--c-primary); line-height:1; }
.pcard__unit{ font-size:32px; font-weight:700; line-height:1; margin-left:0; }  /* 実測：円/％は32px */
.price__note{
  width:684px; max-width:100%; margin:48px auto 0 56px;   /* 左312pxに合わせる */
  font-size:14px; font-weight:400; line-height:1.8; color:var(--c-text);
}

/* ============================================================
   よくある質問  実測：見出し上4641／1項目1024×80（上4743・間隔24・角丸10）
        Q円44×44（左36・中央寄せ）／質問文 左360（16px Bold）
        ＋ 32×32・線2px・中心x1240（右端から24px）
        開いた項目は 1024×186（青ヘッダ80＋答え106）／答え 16px/180%・左292・幅952
   ============================================================ */
.faq{ padding:153px 0 72px; background:var(--c-bg-gray); }
.faq .sec-title{ line-height:1; color:var(--c-text); margin-bottom:70px; }
.faqlist{ display:flex; flex-direction:column; gap:24px; }
.faq__item{ background:#fff; border:none; border-radius:10px; overflow:hidden; }
.faq__q{
  width:100%; min-height:80px;
  display:flex; align-items:center; gap:24px;      /* 円→質問文 24px */
  padding:0 24px 0 36px;                           /* 実測：円の左36px／＋(32×32)の右24px */
  text-align:left; font-weight:700; color:var(--c-text); font-size:16px; line-height:1.6;
  transition:background .25s, color .25s;
}
.faq__q-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;   /* 実測44×44の正円 */
  background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Goldman","Noto Sans JP",sans-serif;             /* 実測：Qだけ Goldman */
  font-weight:400; font-size:32px; line-height:1;
  transition:background .25s, color .25s;
}
.faq__q-text{ flex:1; }
.faq__mark{ flex:0 0 auto; position:relative; width:32px; height:32px; }   /* 実測32×32・線2px */
.faq__mark::before,.faq__mark::after{
  content:""; position:absolute; background:var(--c-text);
  transition:transform .3s var(--ease), background .25s;
}
.faq__mark::before{ top:15px; left:0; width:32px; height:2px; }
.faq__mark::after{ top:0; left:15px; width:2px; height:32px; }
.faq__item.is-open .faq__mark::after{ transform:scaleY(0); }
.faq__item.is-open .faq__q{ background:var(--c-primary); color:#fff; }
.faq__item.is-open .faq__q-icon{ background:#fff; color:var(--c-primary); }
.faq__item.is-open .faq__mark::before,
.faq__item.is-open .faq__mark::after{ background:#fff; }
.faq__a{ display:none; padding:24px 36px; }   /* 実測：上下24px・左右36px */
.faq__a p{ font-size:16px; font-weight:400; line-height:1.8; color:var(--c-text); }

/* ============================================================
   資料ダウンロードフォーム  実測：5417〜6267 / 左413 ＋ 間35 ＋ フォーム400
   ============================================================ */
.contact{
  padding:96px 0 57px;
  background:linear-gradient(135deg, var(--c-grad-from) 0%, var(--c-grad-to) 100%);
}
.contact__title{
  text-align:center; color:#fff;
  font-size:32px; font-weight:700; line-height:1;
  margin-bottom:79px; letter-spacing:0;
}
.contact__inner{
  display:grid; grid-template-columns:413px 400px;
  gap:35px; justify-content:center; align-items:start;
}
.contact__lead{ color:#fff; padding-top:32px; }
.contact__lead p{ font-size:16px; font-weight:400; line-height:1.8; margin:0; }
.contact__doc{ display:block; width:413px; max-width:100%; height:auto; margin-top:48px; }

/* ============================================================
   フッター  実測：1536×145（上6267）／ロゴ227×52（上6293）／コピー上6382
   ============================================================ */
.footer{ background:#fff; padding:26px 0 18px; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; }
.footer__logo{ width:227px; height:52px; object-fit:contain; }
.footer__copy{ margin-top:37px; font-family:"Goldman","Noto Sans JP",sans-serif; font-size:12px; font-weight:400; line-height:1; color:var(--c-text); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1216px){
  .fv__inner{ max-width:100%; padding-inline:20px; grid-template-columns:1fr 400px; column-gap:40px; }
  .fv__title{ font-size:46px; }
  .fv__illust{ left:auto; right:420px; }
}
@media (max-width:1064px){
  .container{ padding-inline:20px; }
  .feature__grid{ grid-template-columns:repeat(2,1fr); }
  .fcard{ width:auto; }
  .about__fig{ height:auto; padding:20px 0; }
  .about__fig img{ width:100%; max-width:562px; }
}

/* ============================================================
   スマホ ― Figma「TOP-SP」（375×7785）実測ベース
   左右余白16px（コンテンツ343px）／ヘッダー64px
   ============================================================ */
@media (max-width:900px){
  :root{ --header-h:64px; }

  .container{ padding-inline:16px; }
  .br-sp{ display:inline; }
  .sec-title{ font-size:24px; line-height:1.5; }   /* 実測 24px/150% */

  /* ---------- ヘッダー 375×64 ---------- */
  .header__inner{ padding-left:16px; }
  .header__logo-img{ width:139px; height:32px; }   /* 実測 139×32・左16上16 */
  .gnav{ display:none; }

  /* 資料請求：64×64の青ボタン（アイコン24＋ラベル10px の縦積み） */
  .header__cta{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:64px; gap:4px; margin-left:auto;
  }
  .header__cta-icon svg{ width:24px; height:24px; }
  .header__cta-text{ font-size:10px; font-weight:400; line-height:1; }

  /* メニュー：64×64のグレーボタン（線32×1px・間隔9px） */
  .hamburger{ display:flex; width:64px; margin-left:0; gap:8px; }
  .hamburger__icon,
  .hamburger__icon::before,
  .hamburger__icon::after{ width:32px; height:1px; }
  .hamburger__icon::before{ top:-9px; }
  .hamburger__icon::after{ top:9px; }
  .hamburger.is-open .hamburger__icon::before{ transform:translateY(9px) rotate(45deg); }
  .hamburger.is-open .hamburger__icon::after{ transform:translateY(-9px) rotate(-45deg); }
  .hamburger__label{ font-size:10px; font-weight:400; }

  /* ドロワーは白地＋青文字（Figma「NAV」フレーム） */
  .drawer{ background:#fff; }
  .drawer__list{ padding:0; }
  .drawer__list > li > a{
    padding:14px 16px; color:var(--c-primary);
    font-size:16px; font-weight:700; border-bottom:1px solid #E5E5E5;
  }
  .drawer__cta a{ gap:8px; }

  /* ---------- FV（グラデ帯 64〜1340） ---------- */
  .fv{
    min-height:0;
    padding-top:104px;      /* ヘッダー64 ＋ タグラインまで40 */
    padding-bottom:26px;
    text-align:center;
    overflow:visible;
  }
  .fv__inner{
    max-width:100%; padding-left:0; padding-inline:16px;
    grid-template-columns:minmax(0,1fr); row-gap:44px;   /* イラスト下端 → フォーム 44px */
  }
  .fv__tagline{ font-size:14px; line-height:1.5; margin-bottom:18px; }
  .fv__title{ font-size:24px; line-height:1.8; white-space:normal; }
  .fv__desc{ font-size:14px; line-height:1.8; margin-top:24px; }

  /* 実績の円：112×112・間隔4px */
  .fv__stats{ margin-top:16px; padding-left:0; gap:4px; justify-content:center; flex-wrap:nowrap; }
  .fv__stat{ width:112px; height:112px; flex:0 1 112px; }
  .fv__stat-label{ font-size:16px; }
  .fv__stat-num{ font-size:18px; margin-top:18px; }
  .fv__stat-unit--sm{ font-size:18px; }          /* SPは「人」も同じ18px */
  .fv__stat-num sup{ font-size:10px; }
  .fv__stat-num--hang{ position:static; }        /* 693人の*2もSPでは行内 */
  .fv__stat-num--hang sup{ position:static; }

  .fv__bottom{ margin-top:10px; }
  .fv__note{ text-align:left; font-size:12px; line-height:1.6; }
  .fv__illust{ position:static; width:calc(100% + 16px); max-width:360px; margin:10px 0 0 -8px; }  /* 実測 360×201・左8 */

  /* ---------- 資料請求フォーム（SP共通）343×571 ---------- */
  .dlform{
    width:100%; max-width:343px; min-height:571px;
    margin-inline:auto;
    padding:8px 8px 19px;      /* 青バーが327pxになる */
  }
  .dlform__title{
    margin:0 0 24px; height:52px; line-height:52px;
    font-size:16px; white-space:nowrap; padding:0;
  }
  .dlform__row--half{ grid-template-columns:1fr 1fr; gap:9px; }
  .dlform__privacy{ margin:24px 0 40px; font-size:12px; line-height:1.5; }
  .dlform__submit{
    width:246px; height:42px; font-size:16px; border-radius:25px;
  }

  /* ---------- 選ばれ続けています ---------- */
  .clients{ padding:40px 0 0; }
  .clients__head{ font-size:20px; line-height:1; }
  .clients__stats{ flex-direction:column; gap:8px; margin-top:30px; }
  .clients__stat-img{ width:280px; height:auto; }
  .logoloop{ margin-top:39px; }
  .logoloop__item{ width:223px; height:64px; }    /* 実測ピッチ223px */
  .logoloop__item img{ width:160px; height:64px; }

  /* ---------- CareSendについて / 特徴 ---------- */
  .intro-box{ padding:72px 0 24px; }
  .intro-box .container{ padding-inline:17px; }   /* カード341px（左右17） */
  .about{ margin-bottom:72px; }
  .about .sec-title{ margin-bottom:63px; }
  .about__lead{
    width:auto; max-width:290px; margin-inline:auto;
    font-size:20px; line-height:1.8;
  }
  .marker{ font-size:24px; }
  .about__fig{
    width:auto; max-width:341px; height:auto;
    margin:54px auto 0; padding:0;
  }
  .about__fig img{ width:100%; max-width:315px; }

  .feature .sec-title{ margin-bottom:51px; }
  .feature__grid{ grid-template-columns:1fr; gap:24px; }
  .fcard{ width:auto; min-height:0; padding:14px 30px 22px; }
  .fcard__icon{ height:76px; }
  .fcard__title{ margin-top:19px; font-size:20px; line-height:1.5; }
  .fcard__text{ margin-top:19px; font-size:16px; line-height:1.8; }

  /* ---------- CTAバナー 375×257 ---------- */
  .cta-band{ height:257px; padding:0; }
  .cta-band__inner{ gap:44px; }
  .cta-band__text{ font-size:24px; line-height:1.8; }
  .cta-band__btn{ width:246px; height:42px; font-size:20px; border-radius:25px; }

  /* ---------- 導入事例 ---------- */
  .case{ padding:72px 0 45px; }
  .case .container{ padding-inline:0; }
  .case .sec-title{ margin-bottom:57px; }
  /* カード311px＋矢印は左右6pxに重ねる（Figma実測） */
  .caseslider{ position:relative; gap:0; padding-inline:20px; }
  .caseslider__viewport{ width:100%; padding:8px 12px 14px; }
  .casecard{ flex:0 0 100%; margin-right:40px; }   /* 隣のカードが余白から覗かない幅 */
  .casecard__inner{ min-height:0; padding:31px 10px 20px; }
  .casecard__title{ font-size:18px; line-height:1.8; margin-bottom:24px; }
  .casecard__text{ font-size:12px; line-height:1.8; }
  .casecard__author{ padding-top:48px; }
  .caseslider__arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    flex:0 0 20px; width:20px; height:20px;
  }
  .caseslider__arrow--prev{ left:6px; }
  .caseslider__arrow--next{ right:6px; }
  .caseslider__arrow::before{ width:6px; height:6px; }

  /* ---------- 料金（SPも3列！カード96×91） ---------- */
  .price{ padding:72px 0 0; }
  .price .sec-title{ margin-bottom:31px; }
  .price__grid{
    grid-template-columns:repeat(3,1fr); gap:12px;
    max-width:312px; margin-inline:auto;   /* 96×3 + 12×2 */
  }
  .pcard{
    height:91px; border-top-width:6px;      /* 実測：上の青帯は6px */
    padding:10px 2px 0;
  }
  .pcard__label{ font-size:12px; margin-bottom:10px; }
  .pcard__num{ font-size:36px; }
  .pcard__unit{ font-size:12px; }
  .price__note{
    width:auto; max-width:311px; margin:48px auto 0;
    font-size:12px; line-height:1.8;
  }

  /* ---------- よくある質問 ---------- */
  .faq{ padding:89px 0 42px; }
  .faq .sec-title{ margin-bottom:54px; }
  .faqlist{ gap:24px; }
  .faq__q{
    min-height:52px; padding:10px; gap:14px;
    font-size:14px; line-height:1.5;
  }
  .faq__q-icon{ width:32px; height:32px; font-size:16px; }
  .faq__mark{ width:16px; height:16px; }
  .faq__mark::before{ top:7px; left:0; width:16px; height:2px; }
  .faq__mark::after{ top:0; left:7px; width:2px; height:16px; }
  .faq__a{ padding:11px 10px 10px; }
  .faq__a p{ font-size:14px; line-height:1.8; }

  /* ---------- 資料ダウンロード ---------- */
  .contact{ padding:72px 0 46px; }
  .contact__title{ font-size:24px; line-height:1.5; margin-bottom:26px; }
  .contact__inner{ grid-template-columns:minmax(0,1fr); row-gap:40px; justify-content:stretch; }
  .contact__lead{ padding-top:0; text-align:center; }
  .contact__lead p{ font-size:12px; line-height:1.8; }
  .contact__doc{ width:240px; max-width:100%; margin:16px auto 0; }

  /* ---------- フッター 375×149 ---------- */
  .footer{ padding:26px 0 24px; }
  .footer__logo{ width:139px; height:32px; }
  .footer__copy{ margin-top:55px; }
}

/* ごく細い端末だけの微調整 */
@media (max-width:374px){
  .fv__stat{ width:auto; height:auto; flex:1 1 0; min-width:0; aspect-ratio:1/1; }
  .fv__stat-label{ font-size:15px; }
  .fv__stat-num{ font-size:17px; margin-top:14px; }
  .fv__stat-unit--sm{ font-size:17px; }
  .clients__stat-img{ width:100%; }
  .fcard{ padding:14px 18px 22px; }
  .casecard__inner{ padding:24px 10px 18px; }
}