/* =========================================================
   共通変数・ベース
   automation / visualization / marketing / modernize / recruit / corporate / dx
   の7ページで共通して読み込む基盤スタイル
========================================================= */
:root{
  --white:#FFFFFF;
  --brand:#00A0E9;
  --brand-text:#0073AD;
  --brand-deep:#005E8C;
  --navy:var(--brand-text);
  --ink:#1c2b33;
  --sub:#47515c;
  --faint:#98a1ab;
  --hairline:#c5d9e5;  /* 白背景で線が見えにくかったため濃くした（旧 #d9e9f2） */
  --wash:#f5f7f8;
  --serif:'Noto Sans JP', "Hiragino Kaku Gothic ProN", sans-serif;
  --sans:'Noto Sans JP', "Hiragino Kaku Gothic ProN", sans-serif;
  --max:var(--main-max);  /* common.css のサイト共通幅 */
  --pad:var(--main-pad);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.03em;
  color:var(--ink);
  background:#fdfdfc;
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:auto;
}
img{max-width:100%;display:block}
.footer-action img{display:inline}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* 青帯にページタイトルが出るので、重複するパンくずリストは非表示 */
nav.breadcrumbs{display:none}

/* =========================================================
   タイポグラフィ
========================================================= */
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.6;letter-spacing:.03em}
.eyebrow{
  font-family:var(--sans);font-weight:400;
  font-size:12px;letter-spacing:.26em;color:var(--faint);
  text-transform:uppercase;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";display:block;width:24px;height:1px;background:var(--faint);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .15s}
.inview .eyebrow::before{transform:scaleX(1)}
.sec-title{font-size:clamp(22.5px,3vw,31px);margin-top:22px;color:var(--ink);font-weight:700}
.sec-lead{margin-top:22px;max-width:640px;color:var(--sub);font-size:16.5px;line-height:1.9}

/* =========================================================
   レイアウト
========================================================= */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(56px,7vw,88px) 0}
.hairline-top{border-top:1px solid #e8edf1}

/* =========================================================
   フェードインアニメーション
========================================================= */
.fade{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.fade.inview{opacity:1;transform:none}
.fade.d1{transition-delay:.12s}.fade.d2{transition-delay:.24s}.fade.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
  .eyebrow::before{transform:scaleX(1);transition:none}
  *{animation:none!important;transition:none!important}
}

/* =========================================================
   ページヒーロー（各ページ共通の見出し部）
========================================================= */
.page-hero{padding:40px 0 70px;border-bottom:1px solid var(--hairline);background:#fdfdfc}
.page-hero .pnum{font-family:var(--serif);color:var(--navy);font-size:15.5px;letter-spacing:.2em;font-weight:700}
.page-hero h2{font-size:clamp(30px,4.7vw,47px);margin-top:16px;color:var(--ink);font-weight:700}
.page-hero h2 small{display:block;font-family:var(--sans);font-weight:400;font-size:13.5px;letter-spacing:.26em;color:var(--navy);margin-bottom:14px}
.page-hero .ptag{margin-top:24px;font-family:var(--serif);font-size:clamp(17.5px,2.1vw,21.5px);color:var(--navy);letter-spacing:.1em;font-weight:500}
.page-hero .plead{margin-top:20px;max-width:680px;color:var(--sub);font-size:17px}
.page-hero .ptargets{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.page-hero .ptargets span{font-size:12.5px;letter-spacing:.14em;color:var(--sub);border:1px solid var(--hairline);padding:5px 14px;font-weight:400}

/* =========================================================
   環境グリッド（recruit「はたらく環境」/ dx「開発環境」共通）
========================================================= */
.env-grid{margin-top:56px;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:40px}
@media(max-width:860px){.env-grid{grid-template-columns:1fr}}
.env-cell{border-top:1px solid var(--hairline);padding:24px 0 0}
.env-cell:first-child{border-top:2px solid var(--ink)}
.env-cell .e-label{font-size:12.5px;letter-spacing:.26em;color:var(--navy);font-weight:400}
.env-cell h3{font-size:18.5px;margin-top:12px}
.env-cell p{font-size:15.5px;color:var(--sub);margin-top:12px;line-height:1.85}

/* =========================================================
   CTAバンド（共通）
========================================================= */
.cta-band{text-align:center;padding:clamp(56px,7vw,88px) 0;background:#f5f7f8}
.cta-band h2{font-size:clamp(21.5px,3.2vw,30px)}
.cta-band p{margin-top:18px;color:var(--sub);font-size:16.5px}
.btn{
  display:inline-block;margin-top:38px;border:none;background:var(--ink);color:#fff !important;
  font-size:14px;letter-spacing:.14em;font-weight:500;padding:16px 46px;
  border-radius:2px;transition:background .3s;text-decoration:none !important;
}
.btn:hover{background:var(--brand-text)}

/* =========================================================
   左に見出し・右に中身の2カラム（会社紹介・採用の改善案デザイン）
========================================================= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:clamp(32px,6vw,88px);row-gap:28px;align-items:start}
.split > *{margin-top:0 !important}
.split-head .sec-title{margin-top:22px;word-break:auto-phrase}
@media(max-width:860px){.split{grid-template-columns:1fr}}