/* 常磐訪問看護リハビリステーション 正看護師採用LP
   2026-09-19改版：スカイブルー #2E9BDA ／ 濃い空色 #1B7FC0 ／ 紙面 #E3F3FC ／ 濃紺 #0F2E4A ／ イエロー線・CTA #FFD84D（変数名 --green 等は互換のため据え置き＝値だけ空色）
   重ね要素は cqw ／ % で画像比率に追従（.lp-canvas は container-type: inline-size） */

:root {
  --green: #2E9BDA;
  --navy: #0F2E4A;
  --green2: #1B7FC0;
  --paper: #E3F3FC;
  --ink: #0F2E4A;
  --lime: #FFD84D;
  --cta: #FFD84D;
  --line: #C9DDEA;
  --cta-dark: #EBC02F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #CFE8F7; }
body {
  margin: 0;
  color: var(--ink);
  background: #CFE8F7;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* 幅430px上限のスマホキャンバス */
.lp-canvas {
  width: min(100%, 430px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(15, 46, 74, .35);
  container-type: inline-size;
  padding-bottom: 96px; /* 固定CTAぶん */
}
.slice { position: relative; margin: 0; padding: 0; line-height: 1.45; }
.slice > img { display: block; width: 100%; height: auto; margin: 0; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---- 共通部品 ---- */
.overlay { position: absolute; z-index: 2; }
.band { position: relative; z-index: 2; background: var(--paper); }

.btn-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 13cqw;
  padding: 2cqw 3cqw;
  border-radius: 8px;                    /* ピルにしない（design-harness） */
  background: var(--cta);
  color: var(--navy); font-weight: 900; font-size: 4.6cqw; letter-spacing: .01em; line-height: 1.25;
  text-align: center; text-decoration: none;
  box-shadow: 0 8px 20px rgba(15, 46, 74, .22), inset 0 -3px 0 rgba(15, 46, 74, .14);
}
.btn-cta:active { background: var(--cta-dark); }

.tel-line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 1.2cqw;
  margin-top: 2.4cqw; color: var(--navy); text-decoration: none; line-height: 1.25;
}
.tel-line strong { font-size: 6cqw; font-weight: 900; letter-spacing: .03em; }
.tel-line span { font-size: 2.7cqw; font-weight: 700; }
.tel-line--light, .tel-line--light strong, .tel-line--light span { color: #fff; }

.micro { margin: 1.6cqw 0 0; font-size: 2.4cqw; line-height: 1.55; color: var(--ink); text-align: center; }
.micro--light { color: rgba(255, 255, 255, .92); }

/* ---- 1 FV：画像直下の帯（画像内余白 約210px／1536px基準 ＝ 下13.7%）
       帯色は slice_01.png 下端の実測色 #2C96D8（2026-09-19 空色版で再実測） に合わせて継ぎ目を消している ---- */
.hero-cta { padding: 4.5cqw 6% 5.5cqw; background: #2C96D8;   margin-top: -13%; /* 画像内のHTML余白（下210px≒13.7%）に帯を食い込ませて空きを消す。画像差し替え時は再実測 */
}
.hero-cta .btn-cta { min-height: 13.5cqw; font-size: 4.9cqw; }
.hero-cta .tel-line, .hero-cta .tel-line strong, .hero-cta .tel-line span { color: #fff; }
.hero-cta .micro { color: rgba(255, 255, 255, .9); text-align: left; }

/* ---- 4 条件：画像内の下部余白（設計値 約170px＝下11.1%／実測は紙面の表が y≒77% で終わるため約23%）
       bottom は 430px 実測で調整済み（CTA上端 y≒84.4%・余白の中央）。画像差し替え時は再実測 ---- */
.mid-cta { left: 8%; right: 8%; bottom: 7%; }
.mid-cta .btn-cta { min-height: 12.4cqw; font-size: 4.4cqw; }

/* ---- 8 最終：画像内の下部余白 約420px ＝ 下27.3%（深緑帯は y≒52% から・本文は y≒79% で終わる）
       bottom は 430px 実測で調整済み（電話ブロック上端 y≒83.4%）。画像差し替え時は再実測。
       相談フォームは余白に収まらないため画像直下の帯（.inquiry-section）で足す ---- */
.final-contact { left: 8%; right: 8%; bottom: 5%; }
.final-contact .tel-line { margin-top: 0; }

/* ---- 相談フォーム（紙面） ---- */
.inquiry-section { padding: 11cqw 6% 10cqw; background: var(--paper); }
.inquiry-section h2 {
  margin: 0; color: var(--navy);
  font-size: 7cqw; font-weight: 900; line-height: 1.35; letter-spacing: -.03em;
}
.inquiry-section h2::after {
  content: ""; display: block; width: 16cqw; height: 3px; margin-top: 3cqw; background: var(--lime);
}
.inquiry-lead { margin: 3.5cqw 0 5cqw; font-size: 3.2cqw; line-height: 1.8; color: var(--ink); }

.contact-form { padding: 5cqw; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.form-grid { display: grid; gap: 4cqw; }
.form-field { display: grid; gap: 1.5cqw; }
.form-field > span { font-size: 3cqw; font-weight: 800; color: var(--navy); }
.form-field b, .form-field em {
  display: inline-block; margin-left: 1cqw; padding: .5cqw 1.4cqw; border-radius: 4px;
  font-size: 2.2cqw; font-style: normal; font-weight: 700;
}
.form-field b { color: #fff; background: var(--green2); }
.form-field em { color: var(--ink); background: #E3F3FC; }
.form-field input, .form-field select {
  width: 100%; min-height: 12cqw; padding: 2.6cqw 3cqw;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); font: inherit; font-size: 3.5cqw; line-height: 1.5;
}
.form-field input:focus, .form-field select:focus {
  outline: 3px solid rgba(27, 127, 192, .22); border-color: var(--green2);
}
.privacy-check {
  display: flex; gap: 2cqw; margin: 4.5cqw 0; align-items: flex-start;
  font-size: 2.8cqw; line-height: 1.65; color: var(--ink);
}
.privacy-check input { width: 5cqw; height: 5cqw; flex: none; margin-top: .3cqw; accent-color: var(--green2); }
.form-button {
  width: 100%; min-height: 13.5cqw; border: 0; border-radius: 8px;
  background: var(--cta); color: var(--navy);
  font: 900 4.6cqw/1.3 "Noto Sans JP", sans-serif;
  box-shadow: 0 8px 20px rgba(15, 46, 74, .22), inset 0 -3px 0 rgba(15, 46, 74, .14);
  cursor: pointer;
}
.form-button:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 1.5em; margin: 2.4cqw 0 0; color: #9c3226; font-size: 2.8cqw; font-weight: 700; text-align: center; }
.form-status.is-success { color: #1B7FC0; }
.form-done { padding: 4cqw 1cqw; text-align: center; }
.form-done h3 { margin: 0 0 2cqw; color: var(--navy); font-size: 5cqw; }
.form-done p { margin: 0; font-size: 3.2cqw; line-height: 1.8; }

.alternate-contact { margin-top: 6cqw; text-align: center; }
.alternate-contact > p { margin: 0; font-size: 3cqw; font-weight: 800; color: var(--navy); }

/* ---- フッター ---- */
.site-footer { margin: 0; padding: 7cqw 6% 8cqw; background: var(--green); color: #fff; text-align: center; }
.site-footer p { margin: 0 0 1cqw; font-size: 2.6cqw; line-height: 1.6; }
.site-footer .co { margin-bottom: 1.6cqw; font-size: 3.2cqw; font-weight: 900; }
.site-footer .legal { margin-top: 2.4cqw; font-size: 2.2cqw; color: rgba(255, 255, 255, .82); }

/* ---- 固定CTA（深緑の帯に黄色ボタン） ---- */
.sticky-contact {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 20;
  transform: translateX(-50%);
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; align-items: stretch;
  width: min(calc(100% - 22px), 408px); min-height: 62px;
  padding: 8px; border-radius: 12px; background: var(--navy);
  box-shadow: 0 12px 34px rgba(15, 46, 74, .38);
}
.sticky-contact a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 5px; border-radius: 8px; text-decoration: none; line-height: 1.2;
}
.sticky-contact__form { background: var(--cta); color: var(--navy); }
.sticky-contact__tel { border: 1px solid rgba(255, 255, 255, .75); color: #fff; }
.sticky-contact small { font-size: 9px; font-weight: 700; opacity: .85; }
.sticky-contact strong { font-size: 14px; font-weight: 900; letter-spacing: .02em; }

@media (min-width: 431px) {
  body { padding: 22px 0; }
  .lp-canvas { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ボット対策：人には見えない欄。埋まっていたら送信しない */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* ---- 移住版（/iju/）：移住スライドの画像内HTML余白（下190px≒12.4%）に重ねるリンク。画像差し替え時は再実測 ---- */
.iju-links { left: 6%; right: 6%; bottom: 1.2%; }
.btn-sub { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 11cqw; padding: 0 3cqw;
  border: 2px solid var(--green2); border-radius: 8px; background: #fff; color: var(--green2);
  font-weight: 900; font-size: 3.6cqw; text-decoration: none; text-align: center; line-height: 1.3; }
.iju-links .micro { margin-top: 1.4cqw; color: var(--navy); }

/* ---- 採用LINE（タレントプール）への入口。相談フォームより軽い2つ目の出口 ---- */
.btn-line { display: flex; align-items: center; justify-content: center; gap: 2cqw; width: 100%; min-height: 11cqw; margin-top: 2.6cqw; padding: 0 3cqw;
  border: 2px solid #06C755; border-radius: 8px; background: #fff; color: #06803A; font-weight: 900; font-size: 3.7cqw; text-decoration: none; text-align: center; line-height: 1.3; }
.btn-line::before { content: ""; width: 5.4cqw; height: 5.4cqw; flex: none; border-radius: 50%;
  background: #06C755 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 3C6.5 3 2 6.6 2 11c0 2.7 1.6 5 4.1 6.5L5.5 21l4-2.2c.8.2 1.6.2 2.5.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/></svg>") center/68% no-repeat; }
.btn-line--light { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); color: #fff; }
.line-pool { margin: 5cqw 0 0; padding: 4.5cqw 5cqw; border-radius: 8px; background: #F1FBF4; }
.line-pool .btn-line { margin-top: 0; }
.line-pool .micro { margin-top: 1.8cqw; color: var(--navy); }

/* ---- 漫画版（/manga/）2026-09-27：漫画4ページは下端の余白を切り落としてあるので、帯は食い込ませずに直下へ置く ---- */
.manga { background: #fff; }
.manga-note { margin: 0; padding: 1.4cqw 6% 2.4cqw; background: #fff; font-size: 2.4cqw; color: #5B6B78; text-align: right; }
.manga-cta { padding: 5cqw 6% 6cqw; background: #2C96D8; }
.manga-cta .btn-cta { min-height: 13.5cqw; font-size: 4.9cqw; }
.manga-cta .tel-line, .manga-cta .tel-line strong, .manga-cta .tel-line span { color: #fff; }
.manga-cta .micro { color: rgba(255, 255, 255, .9); text-align: left; }