@charset "UTF-8";

/* ==================================================================
 * 株式会社NEXIA コーポレートサイト 共通スタイル
 *
 * モック（docs/*.html）のスタイルを統合したもの。
 * 下層ページ側の値を基準とし、トップだけ大きい値は .is-home で上書きする。
 * ================================================================== */

:root{
  /* 配色。ロゴのマゼンタを採用（spec.md §4）。
     --pink は線・面・ラベル、--pink-t は文字として読ませる箇所に使い分ける */
  --navy:#01103a;
  --navy-2:#0f2a5c;
  --pink:#e9648a;
  --pink-t:#b1275f;

  --bg:#f7f6f6;
  --bg-2:#f0f2f6;
  --white:#fff;
  --ink:#101828;
  --sub:#5c6470;
  --line:#dfe3ea;

  /* レイアウト */
  --wrap:1120px;
  --pad:clamp(20px,5vw,40px);
  --sec:clamp(56px,8vw,104px);

  /* 書体。欧文の見出し・ラベルは Jost（spec.md §4 で「実装時に確定」としていた枠） */
  --jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --la:"Jost","Zen Kaku Gothic New",sans-serif;
}

/* トップだけセクション余白が広い */
.is-home{--sec:clamp(64px,9vw,120px)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* hidden 属性を確実に効かせる。
   これがないと .drawer{display:flex} のほうが強く、閉じているドロワーに
   Tab でフォーカスが入ってしまう */
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font:400 16px/1.9 var(--jp);
  word-break:auto-phrase;
  overflow-wrap:anywhere;
}

a{color:var(--pink-t);text-underline-offset:.25em}

/* フォーカスリングは消さない（spec.md §4） */
:focus-visible{outline:2px solid var(--pink-t);outline-offset:3px}

img,canvas,svg{max-width:100%;display:block}

p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}

h2{font-size:clamp(21px,3.1vw,30px);line-height:1.62;color:var(--navy);font-weight:700;margin:0 0 26px}
h3{font-size:19px;color:var(--navy);margin:0 0 12px;font-weight:700}

.is-home h2{font-size:clamp(23px,3.4vw,34px);margin:0 0 28px}

/* ヘッダーの中身も本文と同じ幅・同じ左右パディングに収める。白い帯だけ全幅 */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.la{font-family:var(--la);letter-spacing:.16em}

.lead{max-width:38em;color:var(--sub);line-height:2.1}

/* スクリーンリーダー向け。視覚的には隠す */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------
 * ヘッダー
 * ------------------------------------------------------------------ */

.head{background:var(--white);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.head-logo{width:172px;flex:0 0 auto}

.nav{display:flex;gap:2px}
.nav a{
  font-size:14px;color:var(--navy);text-decoration:none;padding:0 13px;
  min-height:48px;display:flex;align-items:center;
}
.nav a:hover,.nav a[aria-current]{color:var(--pink-t)}

.burger{
  display:none;width:48px;height:48px;border:1px solid var(--line);background:none;
  border-radius:2px;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;
}
.burger span{width:20px;height:2px;background:var(--navy);display:block}

/* 1120px でナビ → ハンバーガー（spec.md §4） */
@media(max-width:1120px){
  .nav{display:none}
  .burger{display:flex}
}

/* ------------------------------------------------------------------
 * ドロワー
 * ------------------------------------------------------------------ */

.drawer-overlay{
  position:fixed;inset:0;z-index:40;background:rgba(1,16,58,.5);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;z-index:50;
  width:min(360px,86vw);height:100dvh;
  background:var(--white);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{transform:none}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);min-height:74px;border-bottom:1px solid var(--line);
}
.drawer-symbol{width:34px;display:block}

.drawer-close{
  width:48px;height:48px;border:1px solid var(--line);background:none;border-radius:2px;
  cursor:pointer;position:relative;flex:0 0 auto;
}
.drawer-close::before,.drawer-close::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;background:var(--navy);
}
.drawer-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-close:hover::before,.drawer-close:hover::after{background:var(--pink-t)}

.drawer-nav{list-style:none;margin:0;padding:8px var(--pad) 0}
.drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;color:var(--navy);text-decoration:none;font-size:16px;font-weight:500;
  border-bottom:1px solid var(--line);
}
.drawer-nav a::after{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-top:1px solid var(--pink);border-right:1px solid var(--pink);transform:rotate(45deg);
}
.drawer-nav a:hover,.drawer-nav a[aria-current]{color:var(--pink-t)}

/* 実体は電話モーダルを開くボタン */
.drawer-tel{
  margin:auto var(--pad) 28px;display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:58px;background:var(--navy);color:#fff;text-decoration:none;
  border:0;border-radius:2px;cursor:pointer;
  font:500 16px var(--la);letter-spacing:.06em;
}
.drawer-tel span{font-family:var(--jp);font-size:12px;opacity:.75;letter-spacing:normal;font-weight:400}
.drawer-tel:hover{background:var(--pink-t)}

/* ドロワーが開いている間は背面をスクロールさせない */
body.is-locked{overflow:hidden}

/* ------------------------------------------------------------------
 * セクション共通
 * ------------------------------------------------------------------ */

section{padding-block:var(--sec)}
.alt{background:var(--bg-2)}

.eyebrow{display:block;margin:0 0 26px;font-size:13px;color:var(--sub)}
.eyebrow>span{display:flex;align-items:baseline;gap:14px}
.eyebrow b{font-family:var(--la);font-size:12px;letter-spacing:.2em;color:var(--pink-t);font-weight:500}
.eyebrow u{text-decoration:none;color:var(--line)}

.is-home .eyebrow{margin:0 0 30px}

/* ------------------------------------------------------------------
 * 下層ページの見出し帯
 * ------------------------------------------------------------------ */

.phead{
  background:var(--bg);
  padding-block:clamp(46px,7vw,86px) clamp(46px,7vw,80px);
  border-bottom:1px solid var(--line);
}
.phead p.en{font-family:var(--la);font-size:12px;letter-spacing:.22em;color:var(--pink-t);margin:0 0 16px}
.phead h1{font-size:clamp(27px,4.4vw,44px);line-height:1.5;font-weight:700;color:var(--navy);margin:0}
.phead .sub{margin:22px 0 0;color:var(--sub);max-width:38em}

/* ------------------------------------------------------------------
 * 価値・仕事内容のリスト
 * ------------------------------------------------------------------ */

.vals{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.vals>div{
  background:var(--white);padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,3vw,40px);
}
.vals .no{font-family:var(--la);font-size:13px;letter-spacing:.2em;color:var(--pink-t)}
.vals p{color:var(--sub);margin:0}
@media(max-width:700px){.vals>div{grid-template-columns:1fr;gap:12px}}

/* 項目が1つのとき（ValueList が付ける）。番号を出さないので番号列も取らない */
.vals--single>div{grid-template-columns:1fr}

/* 採用ページ：灰色の面の上に白いカードとして置くので罫線を外す。
   余白は上下左右とも .vals>div の padding のまま揃える */
.vals--flush{border:0}

/* ------------------------------------------------------------------
 * 代表メッセージ
 * ------------------------------------------------------------------ */

.msg{display:grid;grid-template-columns:1fr 240px;gap:clamp(24px,4vw,56px);align-items:end}
.msg .sign{text-align:right;color:var(--sub);font-size:14px}
.msg .sign p{margin:0}
/* 署名画像。img は display:block なので text-align では寄らない */
.msg .sign img{width:200px;height:auto;margin:10px 0 0 auto}
/* 署名は文末に置くものなので、1カラムになっても右寄せのままにする */
@media(max-width:700px){
  .msg{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
 * 施設カード
 * ------------------------------------------------------------------ */

/* 写真を外したので1カラム。写真を戻すときは 1fr 1fr の2カラムに戻し、img の指定も戻す */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden;
  display:grid;grid-template-columns:1fr;
}
.card .txt{padding:clamp(26px,4vw,44px)}

.tag{
  display:inline-block;font-family:var(--la);font-size:12px;letter-spacing:.12em;
  background:var(--pink-t);color:#fff;padding:5px 12px;border-radius:2px;margin-bottom:16px;
}

dl.spec{margin:22px 0 0;display:grid;grid-template-columns:6.5em 1fr;gap:10px 18px;font-size:15px}
dl.spec dt{color:var(--sub)}
dl.spec dd{margin:0}
@media(max-width:700px){
  dl.spec{grid-template-columns:1fr;gap:2px}
  dl.spec dt{margin-top:12px;font-size:13px}
}

.note{font-size:14px;color:var(--sub);border-left:2px solid var(--line);padding-left:16px;margin:26px 0 0}

/* ------------------------------------------------------------------
 * 生成画像
 * ------------------------------------------------------------------ */

/* 注記は本文（16px）より小さく、控えめに。消してよい情報ではないので
   薄くしすぎない（--sub は白地に対して 5.98:1） */
.gen-img{margin:0}
.gen-img img{width:100%;height:auto;border-radius:2px}
.gen-img figcaption{margin-top:8px;font-size:12px;color:var(--sub)}

/* 本文（.lead）の下に置く版。本文と離しすぎない */
.lead-img{margin-top:clamp(28px,4vw,44px)}
/* 見出しの上に置く版は、見出しとの間隔をセクション内の余白に合わせる */
.gen-img + .eyebrow{margin-top:clamp(36px,5vw,56px)}

/* ------------------------------------------------------------------
 * テーブル
 * ------------------------------------------------------------------ */

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{width:9em;font-weight:500;color:var(--sub);padding-right:20px}
/* 未確定の「—」。本文より薄いが、白地に対して 4.5:1 は確保する */
td.pending,dl.spec dd.pending{color:#6f7783}

.is-home th,.is-home td{padding:20px 0}
.is-home th{width:10em}

/* 確認画面。項目名が「お問い合わせ種別」まであるので 9em では折り返す */
table.confirm th{width:11em}

table.jobs th{width:auto;background:var(--navy);color:#fff;padding:14px 18px;font-weight:500;font-size:14px}
table.jobs td{padding:18px}
table.jobs tr:nth-child(even) td{background:var(--bg)}
/* 狭い幅ではセルが詰まり、body の overflow-wrap:anywhere が効いて
   「パート」が「パー／ト」のように割れる。短い語は割らせない */
table.jobs th,
table.jobs td:nth-child(2){white-space:nowrap}

table.jobs .pay{color:var(--pink-t);font-weight:700;font-size:17px}
table.jobs .pay small{display:block;color:var(--sub);font-weight:400;font-size:13px}

/* 700px 以下は項目名と値を縦積みにする。
   失われるセマンティクスは role で補う（spec.md §4） */
@media(max-width:700px){
  table.plain,table.plain tbody,table.plain tr,table.plain th,table.plain td{display:block}
  table.plain tr{border-bottom:1px solid var(--line);padding:14px 0}
  table.plain th,table.plain td{border:0;padding:0;width:auto}
  table.plain th{font-size:13px;margin-bottom:4px}
  table.jobs{font-size:14px}
  table.jobs th,table.jobs td{padding:12px 10px}
}

/* ------------------------------------------------------------------
 * ボタン・リンク
 * ------------------------------------------------------------------ */

.cta{
  display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 28px;
  background:var(--navy);color:#fff;text-decoration:none;border-radius:2px;font-weight:500;margin-top:8px;
}
.cta:hover{background:var(--pink-t);color:#fff}
.cta span{font-size:12px;opacity:.75}

.btn-o{
  display:inline-flex;align-items:center;justify-content:space-between;gap:36px;
  min-height:58px;padding:0 26px;border:1px solid rgba(255,255,255,.5);color:#fff;
  text-decoration:none;margin-top:34px;border-radius:2px;font-weight:500;font-size:15px;
}
.btn-o:hover{background:#fff;color:var(--navy);border-color:#fff}

/* 明るい地の上に置く版。紺の上の白抜きと同じ考え方で、枠線は地に対して薄く取る */
.btn-o--light{border-color:rgba(1,16,58,.35);color:var(--navy)}
.btn-o--light:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 文中でも使うので inline。グローバルの svg{display:block} だと行が折れる */
.ext-icon{display:inline-block;vertical-align:-.15em;margin-left:.35em;flex:0 0 auto}
/* ボタンの中は gap で間隔を取っているので、左余白は要らない */
.btn-o .ext-icon{margin-left:0;vertical-align:baseline}

/* ------------------------------------------------------------------
 * 電話モーダル
 * ------------------------------------------------------------------ */

/* 本文中の電話番号。見た目はリンクに揃えるが、実体はモーダルを開くボタン */
.tel-link{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:var(--pink-t);cursor:pointer;
  text-decoration:underline;text-underline-offset:.25em;
}

.pm{
  border:0;padding:0;background:none;
  width:100%;max-width:min(420px,92vw);
  color:var(--ink);
}
.pm::backdrop{background:rgba(1,16,58,.55)}

.pm-body{
  background:var(--white);border-radius:2px;
  padding:clamp(28px,5vw,40px);text-align:center;
}
/* 開いた直後のフォーカスは器で受ける。番号に枠線が出るのを避ける */
.pm-body:focus{outline:none}

.pm-logo{width:150px;margin:0 auto 24px;display:block}

.pm-num{margin:0}
.pm-num-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:64px;padding:0 24px;
  border:1px solid var(--line);border-radius:2px;
  font-family:var(--la);font-size:clamp(23px,6vw,29px);letter-spacing:.04em;font-weight:500;
  color:var(--navy);text-decoration:none;
}
.pm-num-link:hover{border-color:var(--pink);color:var(--pink-t)}

.pm-badge{margin:14px 0 0;font-size:13px;color:var(--sub)}

.pm-outside{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.pm-outside p{margin:0 0 18px;font-size:14px;color:var(--sub);text-align:left;line-height:1.9}
.pm-outside .cta{margin-top:0;width:100%;justify-content:center}

.pm-close{
  margin-top:24px;width:100%;min-height:48px;padding:0 24px;
  background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--navy);font:500 15px var(--jp);cursor:pointer;
}
.pm-close:hover{border-color:var(--navy)}

/* ------------------------------------------------------------------
 * フォーム
 * ------------------------------------------------------------------ */

.formwrap{max-width:720px}

form label{display:block;margin-bottom:26px}
form .lb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--navy);margin-bottom:8px}
form .req{font-size:11px;background:var(--pink-t);color:#fff;padding:3px 8px;border-radius:2px;font-family:var(--la);font-style:normal}
form .opt{font-size:11px;border:1px solid var(--line);color:var(--sub);padding:2px 8px;border-radius:2px;font-style:normal}

input,textarea,select{
  width:100%;font:400 16px/1.7 var(--jp);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;padding:14px 16px;background:var(--white);
}
textarea{min-height:180px;resize:vertical}

/* outline を消す代わりに枠線を変える。キーボード操作時はリングも残す */
input:focus,textarea:focus,select:focus{border-color:var(--pink-t)}

.agree{display:flex;gap:12px;align-items:flex-start;background:var(--bg);padding:20px;border-radius:2px}
.agree input{width:auto;margin-top:5px}
.agree label{margin:0;font-size:15px;color:var(--sub)}
.agree-note{margin:6px 0 0;font-size:13px;color:var(--sub)}

/* 別窓で開くリンクに添える印。読み上げ用の文言は .visually-hidden で別に持つ */
.ext{margin-left:.35em;font-size:.85em;text-decoration:none;display:inline-block}

.turnstile{margin:26px 0}

/* ハニーポット。人には見せず、読み上げからも外す（aria-hidden はHTML側） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* iOSは font-size が16px未満の入力欄にフォーカスするとページごと拡大する。
   tabindex="-1" でもキーボード上のフォーム送りは到達するため、指定しておく */
.hp input{font-size:16px}

/* 入力エラーの一覧（send.php が出す再入力画面） */
.form-error{
  border:1px solid var(--pink-t);border-left-width:3px;border-radius:2px;
  padding:20px 22px;margin-bottom:30px;color:var(--ink);
}
.form-error b{display:block;margin-bottom:10px;color:var(--pink-t);font-size:15px}
.form-error ul{margin:0;padding-left:1.2em;font-size:14px;color:var(--sub)}
.form-error li{margin-bottom:.4em}
.form-error li:last-child{margin-bottom:0}

/* 1枚もののメッセージ画面（send.php） */
.center-page{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--sec)}
.center-page h1{font-size:clamp(22px,3.4vw,30px);color:var(--navy);margin:0 0 20px;font-weight:700}
.center-page p{color:var(--sub);margin:0 0 30px;text-align:left}

/* ------------------------------------------------------------------
 * プライバシーポリシー
 * ------------------------------------------------------------------ */

.pp h2{font-size:19px;margin-top:44px}
.pp h2:first-of-type{margin-top:0}
.pp p,.pp li{color:var(--sub)}
.pp ul{padding-left:1.2em}
.pp li{margin-bottom:.5em}

/* ------------------------------------------------------------------
 * フッター
 * ------------------------------------------------------------------ */

footer{background:var(--navy);color:#aebbd3;padding-block:44px;font-size:13px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot-logo{width:150px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0}
.foot-nav a{color:#dbe3f0;text-decoration:none}
.foot-nav a:hover{color:#fff;text-decoration:underline}
.copy{width:100%;text-align:center;font-family:var(--la);letter-spacing:.1em;color:#8fa0bf;margin-top:10px}

/* ------------------------------------------------------------------
 * 動き
 * ------------------------------------------------------------------ */

@media(prefers-reduced-motion:no-preference){
  a,.cta,.tel,.btn-o{transition:color .18s,background-color .18s,border-color .18s}
}
/* 確認用スイッチが入っているときは、設定が reduce でも同じ動きにする */
html.motion-on a,html.motion-on .cta,html.motion-on .tel,html.motion-on .btn-o{
  transition:color .18s,background-color .18s,border-color .18s
}

/* スクロールで下から入れる */
.rv{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.rv.in{opacity:1;transform:none}

.is-home .rv{
  transform:translateY(46px);
  transition-duration:.85s;
}
.is-home .rv.in{transform:none}

/* 罫線は横に伸ばす */
.rvline{
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.rvline.in{transform:scaleX(1)}

/* スクロール量に追従して上下する（出現アニメとは別レイヤー） */
.px{display:block;will-change:transform}

/*
 * 動きを減らす設定を尊重する（spec.md §4）。
 * モックは確認用に無視していたが、本番では全て静止させる。
 * JS 側（reveal / parallax / ヒーローの canvas）も同じ条件で止める。
 *
 * すべて html:not(.motion-on) 配下にしてある。制作側の確認用スイッチ
 * （ヒーローの再生ボタン）が入ったときだけ、この停止を解除するため。
 * **既定では .motion-on は付かないので、本番の挙動は変わらない。**
 * ここを html:not(.motion-on) 無しで書くと、JS 側だけ動いて見た目は
 * 止まったままになる。行を足すときも同じ形にすること。
 */
@media(prefers-reduced-motion:reduce){
  html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html:not(.motion-on) .rv,html:not(.motion-on) .is-home .rv{opacity:1;transform:none}
  html:not(.motion-on) .rvline{transform:scaleX(1)}
  html:not(.motion-on) .px{transform:none !important;will-change:auto}
  html:not(.motion-on) .drawer{transition:none}
}