/* =====================================================================
   Fairlink 面談前ご案内 — 共有スタイル
   配色・フォントは fairlink.co.jp の実CSS変数に準拠
   （医療機関ごとの編集は各HTMLの CLINIC_DATA だけ。ここは触らない）
===================================================================== */
:root{
  --bg:        #f5f3f0;
  --ink:       #1c1e24;
  --ink-soft:  #4e5260;
  --line:      #d4d6da;
  --accent:    #4a6fa5;
  --accent-dark:#345285;
  --cream:     #e8ecf2;
  --blue-soft: #8aabcf;
  --dark:      #14161b;
  --serif: "Noto Serif JP","Yu Mincho","游明朝",serif;
  --sans:  "Zen Kaku Gothic New","Noto Sans JP",-apple-system,"Yu Gothic",sans-serif;
  --latin: "Cormorant Garamond",serif;
  --ease: cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.95;
  font-size:15px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:920px; margin:0 auto; padding:0 28px;}
::selection{background:var(--cream);}

.eyebrow{font-family:var(--latin); font-style:italic; font-weight:400; letter-spacing:.06em; color:var(--accent); font-size:18px;}

/* ヘッダー */
header.site{position:sticky; top:0; z-index:30; background:rgba(245,243,240,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px;}
.logo{font-family:var(--latin); font-weight:500; font-size:25px; letter-spacing:.02em; color:var(--ink); display:flex; align-items:baseline; gap:1px;}
.logo .dot{color:var(--accent);}
header.site .cta{font-size:12px; color:var(--ink); text-decoration:none; font-weight:500; letter-spacing:.12em; border:1px solid var(--ink); padding:9px 20px; border-radius:2px; transition:.3s var(--ease);}
header.site .cta:hover{background:var(--ink); color:var(--bg);}

/* ヒーロー */
.hero{background:var(--dark); color:#f3f1ee; padding:74px 0 78px; position:relative;}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.08);}
.hero .eyebrow{color:var(--blue-soft);}
.hero h1{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.6; margin:18px 0 10px; letter-spacing:.01em;}
.hero .to{font-size:14px; color:#b9c2cf; letter-spacing:.04em; margin:0 0 28px;}
.hero .lead{font-size:14.5px; color:#d7dbe2; max-width:680px; margin:0; line-height:2.1; font-weight:300;}
.hero .meta{margin-top:34px; display:flex; flex-wrap:wrap; gap:0;}
.hero .meta-item{padding-right:32px; margin-right:32px; border-right:1px solid rgba(255,255,255,.14);}
.hero .meta-item:last-child{border-right:none;}
.hero .meta-label{font-family:var(--latin); text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:#7f8ba0; display:block; margin-bottom:4px;}
.hero .meta-val{font-size:13.5px; color:#eceff3;}

/* セクション */
section.block{padding:64px 0; border-bottom:1px solid var(--line);}
section.block:last-child{border-bottom:none;}
.sec-head{margin:0 0 34px;}
.sec-head .no{font-family:var(--latin); font-size:15px; letter-spacing:.2em; color:var(--accent); display:block; margin-bottom:10px;}
.sec-head h2{font-family:var(--serif); font-weight:500; font-size:23px; margin:0; letter-spacing:.02em; color:var(--ink);}
.sec-head .sub{font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; letter-spacing:.04em;}

.summary{font-family:var(--serif); font-weight:300; font-size:17px; line-height:2; color:var(--ink); border-left:2px solid var(--accent); padding:2px 0 2px 22px; margin:0 0 30px;}

/* 基本情報 */
.facts{border-top:1px solid var(--line);}
.facts .row{display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--line); padding:14px 4px;}
.facts .k{font-size:12px; color:var(--ink-soft); letter-spacing:.08em; font-weight:500; padding-top:2px;}
.facts .v{font-size:14.5px; color:var(--ink);}

/* 運営クリニック・カード */
.clinics{display:grid; gap:16px;}
.clinic-card{border:1px solid var(--line); border-radius:2px; background:#fff; padding:22px 24px;}
.clinic-card .ch{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.clinic-card .ch h3{font-family:var(--serif); font-weight:500; font-size:18px; margin:0; color:var(--ink);}
.clinic-card .ch .opened{font-family:var(--latin); font-size:14px; color:var(--accent); letter-spacing:.05em;}
.clinic-card .ch .area{font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; margin-left:auto;}
.clinic-card .cfacts{display:grid; grid-template-columns:84px 1fr; gap:9px 16px; font-size:13.5px; line-height:1.7;}
.clinic-card .cfacts .ck{color:var(--ink-soft); font-size:12px; letter-spacing:.04em; padding-top:1px;}
.clinic-card .cfacts a{color:var(--accent-dark); text-decoration:none; border-bottom:1px solid var(--line);}
.clinic-card .cfacts a:hover{border-color:var(--accent);}

/* タイムライン */
.timeline{margin:0; padding:0; list-style:none;}
.timeline li{position:relative; padding:0 0 22px 30px; border-left:1px solid var(--line);}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:""; position:absolute; left:-4.5px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--bg); border:1.5px solid var(--accent);}
.timeline .yr{font-family:var(--latin); font-weight:500; color:var(--accent); font-size:15px; letter-spacing:.05em; margin-right:12px;}
.timeline .tx{font-size:14.5px; color:var(--ink);}

.director h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:0 0 10px; color:var(--ink);}
.director .prof{font-size:14.5px; color:var(--ink-soft); margin:0 0 26px; line-height:2; max-width:680px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;}
.chip{border:1px solid var(--line); color:var(--accent-dark); font-size:12px; letter-spacing:.04em; padding:6px 14px; border-radius:2px; background:#fff;}

/* 求人 */
.job{border-top:1px solid var(--line); padding:22px 0;}
.job:last-child{border-bottom:1px solid var(--line);}
.job-top{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.job-top h3{font-family:var(--serif); font-weight:500; margin:0; font-size:17px; color:var(--ink);}
.tag{font-size:10.5px; letter-spacing:.14em; padding:4px 11px; border-radius:2px; background:var(--cream); color:var(--accent-dark);}
.job-grid{display:grid; grid-template-columns:96px 1fr; gap:8px 18px; font-size:13.5px;}
.job-grid .jk{color:var(--ink-soft); font-size:12px; letter-spacing:.06em; padding-top:1px;}

/* 給与グラフ */
.chart-wrap{background:#fff; border:1px solid var(--line); border-radius:2px; padding:30px 28px 22px;}
.chart-head{margin-bottom:18px;}
.chart-head .ct{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); margin:0;}
.chart-head .cs{font-size:11.5px; color:var(--ink-soft); margin:5px 0 0; letter-spacing:.03em;}
.chart-svg{display:block; width:100%; height:auto;}
.legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.legend-item{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft);}
.legend-swatch{width:22px; height:0; border-top-width:2px; border-top-style:dashed;}
.legend-bar{width:12px; height:12px; border-radius:1px;}
.chart-note{font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; line-height:1.8; letter-spacing:.02em; padding-left:1.1em; text-indent:-1.1em;}
.chart-note::before{content:"※ "; color:var(--accent);}
.chart-section-note{font-size:12.5px; color:var(--ink-soft); margin:20px 0 0; padding:13px 16px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:2px; line-height:1.85;}

/* フォーム */
.form-intro{font-family:var(--serif); font-weight:300; font-size:15.5px; line-height:2.05; color:var(--ink); margin:0 0 32px; padding:18px 22px; background:var(--cream); border-left:3px solid var(--accent); border-radius:2px;}
.field{margin-bottom:30px;}
.field > .q{display:block; font-family:var(--serif); font-weight:500; color:var(--ink); font-size:16px; margin-bottom:6px;}
.field > .q .opt{font-weight:400; font-size:13px; color:var(--ink-soft); font-family:var(--sans);}
.field .hint{font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; letter-spacing:.02em;}
textarea, input[type=text], input[type=email]{width:100%; border:1px solid var(--line); border-radius:2px; padding:13px 15px; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; transition:.25s var(--ease);}
textarea::placeholder, input::placeholder{color:#a7adb8;}
textarea:focus, input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,111,165,.1);}
textarea{min-height:104px; resize:vertical; line-height:1.9;}
.check-list{display:grid; gap:9px;}
.check{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:2px; padding:13px 16px; cursor:pointer; transition:.2s var(--ease); background:#fff;}
.check:hover{border-color:var(--accent);}
.check input{margin-top:4px; accent-color:var(--accent); width:16px; height:16px; flex:none;}
.check span{font-size:14px; line-height:1.7;}
.check.sel{border-color:var(--accent); background:var(--cream);}
.date-grid{display:grid; gap:12px;}
.date-block{border:1px solid var(--line); border-radius:2px; padding:15px 17px; background:#fff;}
.date-block .d{font-family:var(--serif); font-weight:500; color:var(--ink); font-size:15px; margin-bottom:11px;}
.slots{display:flex; flex-wrap:wrap; gap:9px;}
.slot input{position:absolute; opacity:0; pointer-events:none;}
.slot label{display:inline-block; font-size:13px; padding:8px 16px; border-radius:2px; border:1px solid var(--line); cursor:pointer; transition:.2s var(--ease); letter-spacing:.03em;}
.slot label:hover{border-color:var(--accent);}
.slot input:checked + label{background:var(--accent); color:#fff; border-color:var(--accent);}
.date-free{margin-top:14px;}
.name-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-name{min-height:58px; line-height:1.7;}
.contact-email{margin-top:14px;}
@media(max-width:560px){ .name-grid{grid-template-columns:1fr;} .clinic-card .cfacts{grid-template-columns:74px 1fr;} }
.submit-row{text-align:center; margin-top:40px;}
.submit{background:var(--ink); color:var(--bg); border:none; font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.14em; padding:16px 48px; border-radius:2px; cursor:pointer; transition:.3s var(--ease);}
.submit:hover{background:var(--accent-dark);}
.done{display:none; text-align:center; padding:40px 10px;}
.done.show{display:block;}
.done .ic{font-family:var(--latin); font-size:34px; color:var(--accent);}
.done h3{font-family:var(--serif); font-weight:500; color:var(--ink); margin:6px 0 8px; font-size:20px;}
.done p{font-size:14px; color:var(--ink-soft);}
.done textarea{margin-top:14px;}

/* フッター */
footer.site{background:var(--dark); color:#aab2c0; padding:48px 0; font-size:13px;}
footer.site .brand{font-family:var(--latin); font-weight:500; font-size:24px; color:#f3f1ee; letter-spacing:.02em;}
footer.site .brand .dot{color:var(--blue-soft);}
footer.site .tg{font-family:var(--serif); font-weight:300; color:#c4cbd6; margin:8px 0 22px; font-size:14px;}
footer.site a{color:#aab2c0; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:1px;}
footer.site a:hover{color:#f3f1ee;}
footer.site .sep{margin:0 12px; color:rgba(255,255,255,.2);}

/* スクロール表示 */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:none;}