/* ===== 株式会社ミズタ PC-TOP ｜ base.css（Figma変数定義を:rootに写経・共通部品） ===== */
:root{
  /* color */
  --c-main:#1549a0; --c-main2:#01a0ea; --c-accent:#f4801d;
  --c-text:#1c222b; --c-text-sub:#1549a0; --c-text-sub2:#01a0ea; --c-gray:#767b85; --c-inverse:#fff;
  --c-base:#fff; --c-base2:#f1f6fd; --c-base3:#f0faff; --c-bg-inverse:#1c222b;
  --c-border:#c2cde0; --c-border2:#cdcdcd; --c-border-sub:#1549a0;
  /* font */
  --font-jp:'Noto Sans JP',sans-serif; --font-en:'Lato',sans-serif;
  --fs-h2-en:85px; --fs-h2-en2:16px; --fs-concept:36px; --fs-h3:28px; --fs-h4:24px; --fs-h5:20px;
  --fs-body-m:16px; --fs-body-s:14px; --fs-btn:16px;
  /* spacing */
  --sp-section-gap:160px; --sp-under-h3:24px; --sp-lead:40px; --sp-under-h4:20px;
  --sp-side-m:120px; --sp-side-l:30px; --sp-under-btn:80px; --sp-under-btn2:100px; --sp-under-h2:80px; --sp-card-gap:32px;
  /* radius / size */
  --r-s:3px; --r-m:5px; --r-l:65px; --inner:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-jp);color:var(--c-text);background:var(--c-base);line-height:1;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:auto}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.u-en{font-family:var(--font-en);font-feature-settings:normal}
/* レイアウト幅: 背景は全幅、コンテンツは最大1200px中央。1440幅でカンプと同一 */
.page{position:relative;width:100%;min-width:1200px;margin-inline:auto;--pad-side:max(30px,calc((100% - 1200px) / 2));--pad-side-wide:max(30px,calc((100% - 1380px) / 2))}
.inner{width:min(var(--inner),100%);margin-inline:auto}

/* ===== 共通ボタン（Figma component: button）
   bg main / border sub / pl24 pr12 py12 / gap40 / r5 / 文字16px 500 lh1.2 ls.16
   アイコン枠: 白 p10 r3 gap8 ＝ →(14) ＋ [↓(14)＋1.5px bar] ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:40px;padding:12px 12px 12px 24px;background:var(--c-main);border:1px solid var(--c-border-sub);border-radius:var(--r-m);color:var(--c-inverse)}
.btn__label{display:flex;align-items:center;justify-content:center;padding-bottom:1px;font-size:var(--fs-btn);font-weight:500;line-height:1.2;letter-spacing:.16px;white-space:nowrap}
.btn__icon{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:var(--c-base);border-radius:3px;overflow:hidden}
.btn__arrow{width:14px;height:14px;flex:none}
.btn__dl{display:flex;align-items:center;justify-content:center;height:18px;padding:0 2px;overflow:hidden}
.btn__dl-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:14px}
.btn__dl-col svg{width:14px;height:14px}
.btn__dl-bar{width:100%;height:1.5px;background:var(--c-main)}
/* アイコンはFigma Frame107/106 と同形状（横バー #01A0EA 1.5px ＋ 山形 #1549A0 stroke1.5） */
.btn__arrow .ic-bar{fill:var(--c-main2)}
.btn__arrow .ic-chev{fill:none;stroke:var(--c-main);stroke-width:1.5}
.btn__arrow--down{transform:rotate(90deg)}
.btn--sub .btn__arrow .ic-bar{fill:#b4e7ff}
.btn--sub .btn__arrow .ic-chev{stroke:#fff}
.btn--accent{background:var(--c-accent);border-color:var(--c-accent)}

/* ===== 共通アイコン色 ===== */
.ic-fill{fill:var(--c-text)}

/* ===== テキストロール（ホバーで文字が下から上へ回る。ボタン・ヘッダーナビ/CTA・フッターナビで共用） =====
   main.js「5. 共通ホバー」がテキストノードを <span class="flip" data-text="…"><span class="flip__t">…</span></span> に包み、
   ホバー対象（a / button）に .has-flip を付ける。複製文字は ::after（content の代替テキスト "" で読み上げ対象外）。
   JSなし＝素の文字のまま。動きは translate（transform と独立）。reduced-motion の停止は animation.css §6 */
.flip{position:relative;display:inline-block;flex:none;overflow:hidden;vertical-align:top} /* flex:none＝flex子として縮まない（overflow:hidden は min-width:auto を0にするため、SPの .btn で文字が3px欠けた） */
.flip__t,.flip::after{display:block;white-space:nowrap;translate:0 0;transition:translate .45s var(--ease-out-quint,cubic-bezier(.22,1,.36,1))}
.flip::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:0;width:100%;translate:0 100%}
@media (hover:hover){
  .has-flip:hover .flip__t{translate:0 -100%}
  .has-flip:hover .flip::after{translate:0 0}
}
.has-flip:focus-visible .flip__t{translate:0 -100%}
.has-flip:focus-visible .flip::after{translate:0 0}

/* ===== セクション見出し共通（英大見出し85px＋和ラベル）: TOP・下層フッターで共用 ===== */
.sec-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sec-title__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;white-space:nowrap}
.sec-title__label img{width:17px;height:10px;flex:none}
.sec-title__en{font-family:var(--font-en);font-weight:700;font-size:var(--fs-h2-en);line-height:1;white-space:nowrap;font-feature-settings:normal}
/* Figma(Lato)とChromeのカーニング差をインク幅実測で補正（Service 271 / Recruit 264 / Contact 382px） */
.sec-title__en--service{letter-spacing:-1px}.sec-title__en--recruit{letter-spacing:-1.5px}.contact__en{letter-spacing:-1.2px}

/* ===== タブレット（769〜1200px）: カンプ未支給のため、PCレイアウトのまま横だけ縮める =====
   あおさん指示「1200px〜769pxでレスポンシブができていない。左右パディングを各30pxに保ってテキストを折り返す」
   → .page の min-width を外して可変にし、余白は30px固定。中身の固定幅は各セクションCSSの同メディアで解除する */
@media (min-width:769px) and (max-width:1200px){
  .page{min-width:0;--pad-side:30px;--pad-side-wide:30px}
  .inner{width:100%}
  /* 英大見出し85pxは1200px未満では大きすぎて折り返せないため、幅に応じて縮める */
  :root{--fs-h2-en:clamp(56px,7.2vw,85px);--sp-section-gap:120px;--sp-side-m:30px}
}

/* ===== SP基盤（768px以下）: Figma SP-TOP（375幅）のトークンに切替。PC(769px〜)は従来どおり ===== */
@media (max-width:768px){
  :root{--fs-h2-en:64px;--fs-h2-en2:14px;--fs-concept:28px;--fs-h3:24px;--fs-h4:20px;--fs-h5:16px;--fs-body-m:15px;--fs-body-s:12px;--fs-btn:16px;
    --sp-section-gap:80px;--sp-under-h3:20px;--sp-lead:40px;--sp-under-h4:16px;--sp-side-m:24px;--sp-side-l:18px;--sp-under-btn:40px;--sp-under-btn2:40px;--sp-under-h2:40px;--sp-card-gap:24px}
  .page{min-width:0;--pad-side:24px;--pad-side-wide:24px}
  body{overflow-x:hidden}
}