/* =========================================================
   訪問看護ハートケアしが 共通スタイル
   色・フォントはこのファイルの変数で一元管理しています
   ========================================================= */

:root {
  /* ---- ブランドカラー（赤×緑） ---- */
  --green: #2E7D5B;        /* メインの深い緑 */
  --green-dark: #1F5C42;   /* 濃い緑（見出し・フッター） */
  --green-pale: #EAF3EE;   /* 淡い緑（背景） */
  --green-mist: #F5FAF7;   /* さらに淡い緑（背景） */
  --red: #D6503F;          /* アクセントの赤（採用CTA） */
  --red-dark: #B93E2F;     /* 赤のホバー */
  --ink: #2B2B2B;          /* 本文の文字色 */
  --ink-soft: #6B7772;     /* 補助テキスト */
  --white: #FFFFFF;
  --line: #DCE8E1;         /* 罫線 */

  /* ---- フォント ---- */
  --font-body: "Noto Sans JP", sans-serif;
  --font-round: "Zen Maru Gothic", sans-serif; /* 見出し・キャッチ・ロゴ */
  --font-en: "Poppins", sans-serif;            /* 英字 */
  --font-copy: "Zen Kaku Gothic New", sans-serif; /* キャッチコピー専用（丸み控えめ） */

  --header-h: 76px;
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.03em;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: var(--green-dark); text-decoration: none; transition: opacity .25s, background .25s, color .25s; }
a:hover { color: var(--green); }

/* ---- レイアウト共通 ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-pale { background: var(--green-mist); }

/* セクション見出し（英字＋日本語） */
.sec-head { margin-bottom: 48px; }
.sec-head .en {
  display: block;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sec-head h2 {
  font-family: var(--font-round);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.6;
}
.sec-head.center { text-align: center; }
.sec-lead { max-width: 720px; }
.sec-head.center + .sec-lead, .sec-lead.center { margin: -24px auto 48px; text-align: center; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-round);
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.4;
}
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--green-dark); border-color: var(--green); }
.btn-outline:hover { background: var(--green-pale); }
.btn-red { background: #fff; color: var(--red); border-color: var(--red); }  /* 赤ベタは重いので白＋赤枠に（ホバーで反転） */
.btn-red:hover { background: var(--red); color: #fff; }
.btn .arrow { font-family: var(--font-en); }

/* =========================================================
   写真プレースホルダー（実写真に差し替える前提の仮枠）
   ========================================================= */
.ph {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(135deg, #DDEDE4 0%, #EAF3EE 45%, #CFE5D8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}
.ph::before { /* PHOTOタグ */
  content: "PHOTO";
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--green);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 10px;
  border-radius: 999px;
}
.ph .ph-label {
  font-family: var(--font-round);
  color: var(--green-dark);
  font-size: 15px;
  text-align: center;
  padding: 0 16px;
  opacity: 0.75;
}
.ph-square { aspect-ratio: 1 / 1; }
.ph-wide { aspect-ratio: 16 / 10; }
.ph-tall { aspect-ratio: 3 / 4; }

/* ===== 実写真を入れるための仕組み（今は未使用・本番撮影後に使う） =====
   仮枠 .ph の中に <img class="ph-img" ...> を1枚置くだけで、
   緑グラデ・PHOTOタグ・説明文が自動で消えて、写真が枠に合わせて切り抜き表示される。
   枠の aspect-ratio はそのまま効くので、レイアウトは1ミリも動かない。

   使い方：
     <div class="ph"><img class="ph-img" src="uploads/○○.webp" alt="" width="W" height="H">
       <span class="ph-label">差し替え指示</span></div>
     ・ファーストビューの写真だけ loading="eager" fetchpriority="high"
     ・それ以外は loading="lazy" decoding="async"
     ・width / height を必ず入れる（読み込み中のガタつき防止）
   ※ 2026-08 のテストで62枠すべてに実写真を流し込んで検証済み。 */
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真が入ったら仮枠の背景を消す。
   ※ position はここで触らないこと。以前 position:relative を指定していたが、
     詳細度が .greet2-photo より強いため、PC幅で本来の absolute（帯の右に
     はみ出して重なる配置）まで潰していた。位置の基準は .ph の既定値
     （position:relative）と、下のスマホ用ルールで担保する。 */
.ph:has(.ph-img) { background: none; }
.ph:has(.ph-img)::before,
.ph:has(.ph-img) .ph-label { display: none; }

/* Googleマップ埋め込み枠 */
.access-map {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(31, 92, 66, 0.08);
}
.access-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* トップ：スタッフ紹介（大きな写真＋見出し＋紹介ページ誘導） */
.staff-lead-photo {
  aspect-ratio: 16 / 8;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(31, 92, 66, 0.16);
  margin-bottom: 40px;
}
.staff-lead-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }
.staff-lead-h {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 28px);
  color: var(--green-dark);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.staff-lead-h .line { flex: 1; height: 1px; background: var(--green); opacity: .45; min-width: 20px; max-width: 90px; }
.staff-lead-h .en { font-family: var(--font-en); font-size: 13px; letter-spacing: .14em; color: var(--green); font-weight: 600; white-space: nowrap; }
.staff-lead-text p { color: var(--ink); font-size: 15.5px; line-height: 2; }
.staff-lead-cta { display: flex; justify-content: flex-end; }
.staff-lead-cta .btn { padding: 20px 44px; font-size: 16px; }
@media (max-width: 900px) {
  .staff-lead-row { grid-template-columns: 1fr; gap: 24px; }
  .staff-lead-cta { justify-content: stretch; }
  .staff-lead-cta .btn { width: 100%; }
  .staff-lead-photo { aspect-ratio: 16 / 10; }
}

/* =========================================================
   ヘッダー（全ページ共通）
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }  /* JPGの四隅を丸くクリップ */
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 20px;
  color: var(--green-dark);
  white-space: nowrap;
}
.brand-sub { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; }

.global-nav { display: flex; align-items: center; gap: 18px; }  /* ヘッダーに電話を足した分、間隔を詰めて収める */
.nav-list { display: flex; align-items: center; gap: 18px; }
.nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-list a .en {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--green);
  text-transform: uppercase;
}
.nav-list a:hover { color: var(--green); }
.nav-list a.is-current { border-bottom-color: var(--green); color: var(--green-dark); }
.nav-list a.nav-recruit { color: var(--red); }
.nav-list a.nav-recruit .en { color: var(--red); }
.nav-list a.nav-recruit.is-current { border-bottom-color: var(--red); }

.header-cta { display: flex; align-items: center; gap: 8px; }
.header-cta .btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }

/* ハンバーガー（モバイル） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--green-dark);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   トップページ：ファーストビュー
   ========================================================= */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 540px;
  max-height: 860px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
  min-height: 100%;
}
.hero-photo .ph-label { font-size: 18px; }
.hero-copy {
  position: absolute;
  left: clamp(24px, 7vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
/* ファーストビュー：ページを開いたとき写真→コピー→採用カードの順にふわっとフェードイン
   ※.hero-copyはtransformで位置決めしているので、動かすのはopacityだけにする */
.hero-photo { animation: hero-fade 1.2s ease-out both; }
.hero-copy { animation: hero-fade 1.2s ease-out .4s both; }
.hero-recruit { animation: hero-fade 1.2s ease-out .8s both; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* オープニング：白背景の中央でハートのロゴが鼓動のように2回脈打ち、
   赤い波紋がふわっと広がってからページが現れる（index.htmlの<body>直後にだけ .intro を置いている） */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* 表示中もスクロール等の操作は妨げない */
  animation: intro-out .6s ease 2.1s both;
}
.intro-logo {
  /* logo-mark.png＝白丸背景を除いたマークだけの透過版（元はuploads/logo.jpg） */
  width: 112px;
  height: auto;
  animation: intro-in .5s ease .15s both, intro-beat 1.5s ease .7s;
}
.intro-ring {
  position: absolute;   /* flex中央配置の静的位置に置かれるので、ロゴと同心円になる */
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid var(--red);
  opacity: 0;
}
.intro-ring1 { animation: intro-ring 1s ease .75s; }
.intro-ring2 { animation: intro-ring 1s ease 1.45s; }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
/* 「トクン…トクン…」：すばやく膨らんで戻るを2回 */
@keyframes intro-beat {
  0%, 40%, 80%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  52% { transform: scale(1.16); }
}
@keyframes intro-ring {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
/* オープニングがあるページではヒーローのフェードを消え際まで待たせる
   （:has未対応の古いブラウザではオープニングの裏で早めに始まるだけで実害なし） */
body:has(.intro) .hero-photo { animation-delay: 1.7s; }
body:has(.intro) .hero-copy { animation-delay: 2.1s; }
body:has(.intro) .hero-recruit { animation-delay: 2.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-copy, .hero-recruit { animation: none; }
  .intro { display: none; }
}
.hero-copy .quote {
  font-family: var(--font-en);
  font-size: clamp(56px, 8vw, 96px);
  color: var(--green);
  line-height: 0.6;
  display: block;
}
.hero-copy .quote-close { text-align: right; }
.copy-line {
  display: inline-block;
  background: var(--white);
  font-family: var(--font-copy);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--green-dark);
  font-size: clamp(22px, 3.6vw, 40px);
  line-height: 1.5;
  padding: 10px 22px;
  margin: 6px 0;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(31, 92, 66, 0.10);
}
.copy-line em { font-style: normal; color: var(--red); }

/* ファーストビュー右下：写真入り・固定追従のRECRUITカード（ウミカヒ準拠のサイズ 300×200） */
.hero-recruit {
  position: fixed;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(16px, 5vh, 44px);
  z-index: 90;
  display: flex;
  width: 300px;
  height: 200px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(31, 92, 66, 0.18);
  transition: transform .25s, opacity .45s ease, visibility .45s;
}
.hero-recruit:hover { transform: translateY(-4px); }
.hero-recruit.is-hidden {  /* CONTACT帯以降ではフェードで消す（採用バナーと被るため） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 左：スタッフ写真 */
.hero-recruit .hr-photo {
  flex: 0 0 118px;
  min-height: 0;
  border-radius: 0;
  align-self: stretch;
}
.hero-recruit .hr-photo::before { display: none; } /* 小枠なのでPHOTOタグは非表示 */
.hero-recruit .hr-photo .ph-label { font-size: 12px; }
/* 右：テキストパネル */
.hero-recruit .hr-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  background: #EAF3EE;
}
.hero-recruit .hr-lead {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13px;
  color: var(--green-dark);
  line-height: 1.5;
}
.hero-recruit .hr-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--red);
  line-height: 1.05;
  margin: 6px 0 auto;
}
.hero-recruit .hr-go {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--red);
  border-radius: 8px;
  padding: 7px 10px;
  text-align: center;
}

/* =========================================================
   トップ：メッセージ／各セクション
   ========================================================= */
.message-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

/* トップのメッセージ：淡い緑の帯＋白箱見出し＋右に大きな写真2枚（参考サイトの型） */
.msg-hero { position: relative; padding: 0 0 96px; }
.msg-hero::before { /* 上部だけ淡い緑の帯 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  background: linear-gradient(160deg, var(--green-pale) 0%, var(--green-mist) 100%);
}
.msg-hero .wrap { position: relative; }
.msg-hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.msg-copy { padding-top: 88px; }
.msg-copy .copy-box {
  display: inline-block;
  background: var(--white);
  font-family: var(--font-copy);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--green-dark);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.5;
  padding: 8px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.msg-copy .copy-en {
  display: block;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--green);
  margin: 18px 0 40px;
}
.msg-copy .msg-panel {
  background: var(--white);
  border-radius: 4px;
  padding: 40px 36px;
  line-height: 2.3;
}
.msg-copy .msg-panel p { margin-bottom: 1.6em; }
.msg-copy .msg-panel p:last-child { margin-bottom: 0; }
.msg-copy .msg-panel em { font-style: normal; color: var(--green); font-weight: 700; }
.msg-copy .btn { margin-top: 36px; }
.msg-photos {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  padding-top: 56px;
}
.msg-photos .ph { border-radius: 4px; }
.msg-photos .ph:nth-child(1) { aspect-ratio: 10 / 19; }
.msg-photos .ph:nth-child(2) { aspect-ratio: 10 / 13; margin-top: 96px; }
.message-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.message-photos .ph:nth-child(2) { margin-top: 40px; }
.message-body h2 {
  font-family: var(--font-round);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--green-dark);
  line-height: 1.7;
  margin-bottom: 24px;
}
.message-body { container-type: inline-size; }
.message-body h2.philosophy-title {
  font-size: clamp(30px, 4.2vw, 44px);  /* About理念の見出しだけ大きく強調（古いブラウザ用の保険） */
  font-size: clamp(16px, 6.3cqw, 44px);  /* 1行目（赤かぎ括弧の拡大分込み）がカラム幅に収まる上限まで自動縮小・最小16px */
  line-height: 1.6;
}
.philosophy-title .no-break { white-space: nowrap; }  /* 「」内は途中で改行しない */
.philosophy-title .kakko {  /* かぎ括弧だけアクセント赤で大きく（採用ボタンの赤と呼応） */
  color: var(--red);
  font-size: 1.25em;
  font-weight: 900;  /* 拡大分で細く見えるのを補って、本文の太字と同じ太さ感に（900はabout.htmlのフォント読み込みに追加済み） */
}
.message-body p { margin-bottom: 1.2em; }
.message-body .btn { margin-top: 8px; }
/* 文中の強調（太字＋左から右へ引かれる下線マーカー） */
.emph {
  font-weight: 700;
  color: var(--green-dark);
  background-image: linear-gradient(#B7DEC8, #B7DEC8);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 0.5em;            /* 初期は幅0（線が引かれていない状態） */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.9s ease 0.2s;
  padding: 0 1px;
}
/* ブロックが画面に入ったら、下線を左→右に伸ばす */
.is-visible .emph,
.message-body.is-visible .emph { background-size: 100% 0.5em; }
@media (prefers-reduced-motion: reduce) {
  .emph { transition: none; background-size: 100% 0.5em; }
}

/* トップのサービス：左に大きな写真（左端まで裻足）＋緑のパネルを重ねる（参考サイトの型） */
.svc-hero { position: relative; padding: 96px 0 72px; }
.svc-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}
.svc-photo {
  aspect-ratio: 10 / 9;
  border-radius: 0;
  margin-left: calc(50% - 50vw); /* 画面左端まで裻足 */
}
.svc-panel {
  position: relative;
  z-index: 2;
  background: var(--green-pale);
  color: var(--green-dark);
  border-radius: 4px;
  padding: clamp(36px, 4.5vw, 72px);
  margin-left: clamp(-180px, -12vw, -60px); /* 写真に重ねる */
  box-shadow: 0 12px 40px rgba(31, 92, 66, 0.10);
}
.svc-panel h2 {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.7;
  margin-bottom: 24px;
}
.svc-panel p { font-size: 15.5px; line-height: 2.2; color: var(--ink); }
.svc-panel .btn-white {
  display: block;
  text-align: center;
  background: #fff;
  color: var(--green-dark);
  margin-top: 36px;
  padding: 18px 24px;
}
.svc-panel .btn-white:hover { background: var(--green); color: #fff; }
.svc-vert { /* 右端の縦書き英字 */
  position: absolute;
  top: 40px;
  right: 10px;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--green);
  text-transform: uppercase;
}

/* トップの採用ストーリー：左に大きな英字タイトル＋右に本文、下に段違いカード（参考サイトの型） */
.story-sec { position: relative; padding: 96px 0 72px; overflow: hidden; }
.story-sec::before { /* タイトルに重なる淡い緑の帯 */
  content: "";
  position: absolute;
  left: 12vw;
  right: 0;
  top: 220px;
  height: 340px;
  background: var(--green-mist);
}
.story-head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: 64px;
}
.story-tag {
  font-family: var(--font-round);
  color: var(--red);
  font-size: 15px;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 12px;
}
.story-title {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  color: var(--green);
  letter-spacing: 0.02em;
}
.story-title .accent { color: var(--red); }

/* 強み見出し・案B（日本語主役＋背後に薄い大ローマ字ウォーターマーク） */
.strength-head-b { position: relative; text-align: center; margin-bottom: 48px; padding-top: 24px; }
.strength-head-b .wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(56px, 11vw, 128px); color: var(--green);
  opacity: 0.09; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; z-index: 0;
}
.strength-head-b h2 {
  position: relative; z-index: 1;
  font-family: var(--font-round); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px); color: var(--green-dark); letter-spacing: 0.02em;
}
.strength-head-b .wm .accent { color: var(--red); opacity: .5; }

/* 強み見出し・案C（数「3つ」を強調＋左に赤の縦ライン） */
.strength-head-c { border-left: 5px solid var(--red); padding-left: 26px; margin-bottom: 48px; }
.strength-head-c .en { font-family: var(--font-en); font-size: 13px; letter-spacing: .14em; color: var(--green); font-weight: 600; display: block; margin-bottom: 8px; }
.strength-head-c h2 { font-family: var(--font-round); font-weight: 700; font-size: clamp(25px, 3.3vw, 36px); color: var(--green-dark); line-height: 1.4; }
.strength-head-c h2 .count { color: var(--red); white-space: nowrap; }
.strength-head-c h2 .count b { font-family: var(--font-en); font-size: 1.55em; font-weight: 600; vertical-align: -0.06em; margin: 0 2px; }

/* 強み見出し・案D（見出しに左→右で引かれるマーカー） */
.strength-head-d { text-align: center; margin-bottom: 48px; }
.strength-head-d .en { font-family: var(--font-en); font-size: 13px; letter-spacing: .14em; color: var(--green); font-weight: 600; display: block; margin-bottom: 12px; }
.strength-head-d h2 { font-family: var(--font-round); font-weight: 700; font-size: clamp(26px, 3.6vw, 38px); color: var(--green-dark); }
.strength-head-d .draw {
  background-image: linear-gradient(#B7DEC8, #B7DEC8);
  background-repeat: no-repeat; background-position: 0 92%;
  background-size: 0 0.36em;
  transition: background-size 1s ease 0.25s;
  padding: 0 4px;
}
.strength-head-d.is-visible .draw { background-size: 100% 0.36em; }
@media (prefers-reduced-motion: reduce) { .strength-head-d .draw { transition: none; background-size: 100% 0.36em; } }

/* 強み見出し・B+C（背後に薄い大STRENGTH＋「3つ」を赤強調） */
.strength-head-bc { position: relative; text-align: center; margin-bottom: 48px; padding-top: 24px; }
.strength-head-bc .wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(56px, 11vw, 128px); color: var(--green);
  opacity: 0.09; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; z-index: 0;
}
.strength-head-bc h2 {
  position: relative; z-index: 1;
  font-family: var(--font-round); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 50px); color: var(--green-dark); letter-spacing: 0.02em;
}
.strength-head-bc h2 .count { color: var(--red); white-space: nowrap; }
.strength-head-bc h2 .count b { font-family: var(--font-en); font-size: 1.5em; font-weight: 600; vertical-align: -0.05em; margin: 0 3px; }

/* 共同代表ごあいさつ（うみかひ準拠：緑の帯＋帯から上下にハミ出す大きな写真＋左下に小さい写真） */
.greet2 { position: relative; padding: 52px 0; }
.greet2-band {
  position: relative;
  background: var(--green-pale);   /* 淡い緑（濃色ベタは面積を減らす方針） */
  border-radius: 6px;
  padding: clamp(40px, 5vw, 72px);
  padding-right: 46%;               /* 右側は大きな写真用に空ける */
  min-height: 520px;
  display: flex; flex-direction: column; justify-content: center;
}
.greet2-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px; color: var(--green-dark);
  font-family: var(--font-round); font-weight: 700; font-size: clamp(23px, 2.8vw, 30px);
}
.greet2-head .line { flex: 0 1 72px; height: 1px; background: rgba(46,125,91,.45); min-width: 24px; }
.greet2-head .en { font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; color: var(--green); font-weight: 600; white-space: nowrap; }
.greet2-body p { color: var(--ink); margin-bottom: 1.25em; line-height: 2; }
.greet2-sign { color: var(--green-dark); font-family: var(--font-round); font-weight: 700; margin-top: 14px; }
.greet2-sign .en { font-family: var(--font-en); font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); display: block; margin-bottom: 2px; font-weight: 600; }
/* 大きな写真：帯の上下からハミ出して重なる（うみかひ風） */
.greet2-photo {
  position: absolute; top: -44px; bottom: -44px; right: clamp(24px, 3vw, 48px);
  width: 40%; min-height: 0;
  border-radius: 6px; z-index: 2;
  box-shadow: 0 26px 54px rgba(31, 92, 66, 0.30);
}
@media (max-width: 900px) {
  .greet2 { padding: 24px 0 40px; }
  .greet2-band { padding: clamp(28px, 6vw, 40px); padding-right: clamp(28px, 6vw, 40px); min-height: 0; }
  .greet2-photo { position: relative; width: auto; inset: auto; aspect-ratio: 4 / 4.2; margin-top: 22px; }   /* staticにすると中の写真の基準がこの枠でなくなる */
}
.story-head .story-intro { padding-top: 64px; line-height: 2.3; max-width: 620px; }
.story-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.story-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 26px 0;
  box-shadow: 0 10px 30px rgba(31, 92, 66, 0.08);
}
.story-card:nth-child(1) { margin-top: 56px; }
.story-card:nth-child(3) { margin-top: 88px; }
.story-card .tag {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--green);
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.story-card .ttl {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.6;
  padding: 8px 16px;
  margin-bottom: 20px;
}
.story-card .ph { aspect-ratio: 10 / 11; border-radius: 6px 6px 0 0; margin: 0 -26px; }
.story-card:hover { transform: translateY(-4px); transition: transform .25s; }

/* トップのジャーナル（ブログ）：大きな英字タイトル＋記事カード3枚（参考サイトの型） */
.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
}
.journal-title {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.1;
  color: var(--green);
  letter-spacing: 0.02em;
}
.journal-sub {
  font-family: var(--font-round);
  color: var(--green-dark);
  font-size: 15px;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 10px;
}
.journal-more {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--green);
  white-space: nowrap;
}
.journal-more:hover { color: var(--green); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.journal-card { display: block; }
.journal-card .ph { aspect-ratio: 10 / 8; border-radius: 8px; margin-bottom: 20px; }
.journal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.journal-meta .cat {
  font-size: 13px;
  color: var(--green-dark);
  border: 1.5px solid var(--green);
  border-radius: 999px;
  padding: 4px 16px;
  font-family: var(--font-round);
}
.journal-meta .date { font-family: var(--font-en); color: var(--ink-soft); font-size: 14px; }
.journal-card h3 {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 18px;
  margin-bottom: 8px;
  line-height: 1.6;
}
.journal-card p { font-size: 14.5px; color: var(--ink); }
.journal-card:hover h3 { color: var(--green); }

/* サービスカード（3本柱） */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(31, 92, 66, 0.08);
  display: flex;
  flex-direction: column;
}
.service-card .ph { border-radius: 0; }
.service-card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.service-card h3 {
  font-family: var(--font-round);
  font-size: 20px;
  color: var(--green-dark);
}
.service-card h3 .en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 500;
}
.service-card p { font-size: 14.5px; color: var(--ink); flex: 1; }
.service-card .more { font-family: var(--font-en); font-size: 12.5px; letter-spacing: 0.1em; color: var(--green); }

/* 特徴・強みリスト */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-item {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  padding: 30px 30px 28px;
  box-shadow: 0 6px 22px rgba(31, 92, 66, 0.08);
  border-top: 4px solid var(--green);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(31, 92, 66, 0.15);
  border-color: var(--red);
}
/* 番号を緑の丸バッジにして際立たせる */
.feature-item .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  box-shadow: 0 6px 14px rgba(46, 125, 91, 0.3);
}
.feature-item h3 {
  font-family: var(--font-round);
  font-size: 19px;
  color: var(--green-dark);
  margin-bottom: 10px;
  line-height: 1.55;
}
.feature-item p { font-size: 14.5px; color: var(--ink); line-height: 1.9; }

/* スタッフカード（ポラロイド／付箋風：少し傾けて手作り感・人の温度を出す） */
.staff-note { text-align: center; font-size: 13px; color: var(--ink-soft); margin: -24px 0 44px; }
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; padding-top: 8px; }
.staff-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 15px 15px 22px;
  box-shadow: 0 10px 26px rgba(31, 92, 66, 0.11);
  transition: transform .28s, box-shadow .28s;
}
/* カードごとに少しずつ傾ける（ポラロイドを重ねたようなラフさ）
   ※fade-upの is-visible が transform:none を当てるので、それに勝つ特異度で指定する */
.staff-card:nth-child(3n+1),
.js .staff-card.is-visible:nth-child(3n+1) { transform: rotate(-1.4deg); }
.staff-card:nth-child(3n+2),
.js .staff-card.is-visible:nth-child(3n+2) { transform: rotate(1deg); }
.staff-card:nth-child(3n),
.js .staff-card.is-visible:nth-child(3n)   { transform: rotate(-0.5deg); }
.staff-card:hover,
.js .staff-card.is-visible:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 18px 40px rgba(31, 92, 66, 0.16); }
.staff-card .staff-photo {
  position: relative;
  aspect-ratio: 1 / 1;       /* ポラロイドらしい正方形 */
  min-height: 0;
  border-radius: 2px;
  margin-bottom: 16px;
}
.staff-card .role {            /* 職種タグを写真の左上に重ねる */
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 4px 14px;
}
.staff-card-body { padding: 0 8px; text-align: center; }
.staff-card h3 {
  font-family: var(--font-round);
  font-size: 18px;
  color: var(--green-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}
.staff-card h3 .staff-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--green);
  margin-top: 3px;
}
.staff-card p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .staff-card, .staff-card:hover { transform: none; }
}

/* =========================================================
   下層ページ共通：ページタイトル帯
   ========================================================= */
.page-hero {
  background: var(--green-pale);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero::after { /* 淡い緑のにじみ */
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 125, 91, 0.12), transparent 70%);
}
.page-hero .en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 48px);
  letter-spacing: 0.1em;
  color: var(--green);
  display: block;
  line-height: 1.2;
}
.page-hero h1 {
  font-family: var(--font-round);
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--green-dark);
  font-weight: 700;
  margin-top: 4px;
}
.page-hero .lead { margin-top: 16px; max-width: 680px; color: var(--ink); }

/* パンくず的な現在地（省略可） */

/* サービス詳細：交互レイアウト */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.service-detail:last-of-type { border-bottom: none; }
.service-detail.rev .sd-photo { order: 2; }
.sd-body h3, .sd-body h2 {
  font-family: var(--font-round);
  font-size: 24px;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.sd-body .en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--green);
  display: block;
  margin-bottom: 14px;
}
.sd-body p { margin-bottom: 14px; }
.sd-list { margin: 6px 0 14px; }
.sd-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 15px;
}
.sd-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

/* 表（募集要項・会社概要） */
.info-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.info-table th, .info-table td {
  text-align: left;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 15px;
}
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }
.info-table th {
  width: 190px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-family: var(--font-round);
  font-weight: 700;
  white-space: nowrap;
}

/* 採用：1日の流れタイムライン */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}
.timeline li { position: relative; padding-bottom: 30px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--green-pale);
}
.timeline .time {
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--green);
  font-size: 15px;
  letter-spacing: 0.06em;
  display: block;
}
.timeline h3 { font-family: var(--font-round); font-size: 17px; color: var(--ink); margin: 2px 0 4px; }
.timeline p { font-size: 14.5px; color: var(--ink-soft); }

/* 採用：不安に答えるQ&A */
.qa-item {
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 4px 18px rgba(31, 92, 66, 0.06);
  margin-bottom: 20px;
}
.qa-item .q {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 17px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
}
.qa-item .q::before {
  content: "Q";
  font-family: var(--font-en);
  color: #fff;
  background: var(--green);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.qa-item .a { display: flex; gap: 12px; font-size: 15px; }
.qa-item .a::before {
  content: "A";
  font-family: var(--font-en);
  color: var(--red);
  border: 2px solid var(--red);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.qa-item .a p { flex: 1; }

/* スタッフの声 */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.voice-card { background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 24px rgba(31, 92, 66, 0.08); }
.voice-card .ph { width: 84px; height: 84px; min-height: 84px; border-radius: 50%; margin-bottom: 16px; }
.voice-card .ph::before { display: none; }
.voice-card .ph .ph-label { font-size: 11px; }
.voice-card h3 { font-family: var(--font-round); font-size: 16.5px; color: var(--green-dark); margin-bottom: 4px; line-height: 1.6; }
.voice-card .who { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.voice-card p { font-size: 14px; }

/* =========================================================
   CONTACT／ACCESS（全ページ下部共通）
   ========================================================= */
.contact-band { background: var(--green-pale); }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-col {
  background: #fff;
  border-radius: 18px;
  padding: 36px 32px;
  text-align: center;
}
.contact-col h3 { font-family: var(--font-round); font-size: 17px; color: var(--green-dark); margin-bottom: 14px; }
.contact-col .tel {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ink);
  letter-spacing: 0.04em;
  display: inline-block;
  line-height: 1.3;
}
.contact-col .note { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.contact-col .btn { margin-top: 6px; }

/* トップ：CONTACT（大見出し＋電話/メール＋誘導バナー） */
.contact-top { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; margin-bottom: 44px; }
.contact-title .story-title { font-size: clamp(40px, 5.5vw, 64px); }
.contact-title p { color: var(--ink-soft); margin-top: 8px; font-size: 14.5px; }
.contact-info { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; border-left: 1px solid var(--line); padding-left: 48px; }
.ci-label { font-family: var(--font-round); font-weight: 700; font-size: 14px; color: var(--green-dark); display: block; margin-bottom: 6px; }
.contact-phone .tel { font-family: var(--font-en); font-weight: 600; font-size: clamp(26px, 3vw, 34px); color: var(--ink); letter-spacing: .04em; display: block; line-height: 1.25; }
.ci-note { font-size: 12.5px; color: var(--ink-soft); display: block; margin-top: 4px; }

.contact-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.promo-banner {
  display: grid; grid-template-columns: 1fr 150px; align-items: stretch;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(31, 92, 66, 0.08);
  transition: transform .25s, box-shadow .25s; min-height: 150px;
}
.promo-banner:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(31, 92, 66, 0.14); }
.pb-text { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.pb-tag { font-size: 12.5px; color: var(--red); font-family: var(--font-round); font-weight: 700; display: block; margin-bottom: 6px; }
.pb-title { font-family: var(--font-round); font-weight: 700; font-size: 22px; color: var(--green-dark); display: block; margin-bottom: 14px; line-height: 1.3; }
.pb-btn { align-self: flex-start; background: var(--green); color: #fff; font-family: var(--font-round); font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; }
.promo-banner.is-recruit .pb-btn { background: var(--red); }
.promo-banner .pb-photo { border-radius: 0; min-height: 0; }
@media (max-width: 900px) {
  .contact-top { grid-template-columns: 1fr; gap: 24px; }
  .contact-info { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .contact-banners { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-info { grid-template-columns: 1fr; gap: 18px; }
  .promo-banner { grid-template-columns: 1fr; }
  .promo-banner .pb-photo { display: none; }
}

.access-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.access-info h3 { font-family: var(--font-round); font-size: 19px; color: var(--green-dark); margin-bottom: 12px; line-height: 1.7; }
.access-info dl { font-size: 15px; }
.access-info dt { font-weight: 700; color: var(--green-dark); margin-top: 14px; font-size: 13.5px; }
.access-info dd { color: var(--ink); }

/* =========================================================
   フッター
   ========================================================= */
.site-footer { background: var(--green-pale); color: var(--ink); padding: 64px 0 32px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; align-items: start; }
.footer-brand .brand-name { color: var(--green-dark); font-size: 22px; }
.footer-brand .brand-sub { color: var(--ink-soft); }
.footer-brand p { font-size: 13.5px; margin-top: 14px; line-height: 2; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.footer-nav a { color: var(--green-dark); font-size: 14px; padding: 4px 0; display: inline-block; }
.footer-nav a:hover { color: var(--green); }
.footer-recruit {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 14px;
  padding: 20px 26px;
  display: block;
  min-width: 220px;
}
.footer-recruit:hover { background: var(--red); color: #fff; }
.footer-recruit .en { font-family: var(--font-en); font-weight: 600; letter-spacing: 0.14em; font-size: 16px; display: block; }
.footer-recruit .ja { font-size: 13px; display: block; margin-top: 2px; }
.copyright {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-en);
  letter-spacing: 0.06em;
}

/* =========================================================
   スクロールでフワッと表示（JS無効時は常に表示）
   ========================================================= */
.fade-up { transition: opacity .8s ease, transform .8s ease; }
.js .fade-up { opacity: 0; transform: translateY(24px); }
.js .fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
/* タブレット幅（〜1150px）はハンバーガーメニューに切り替え */
/* =========================================================
   トップ：日々の様子（Instagram フィード）
   ========================================================= */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ig-card { display: block; }
.ig-card .ph { aspect-ratio: 1 / 1; min-height: 0; border-radius: 10px; }
.ig-card .ph::before { display: none; } /* 正方形の投稿枠なのでPHOTOタグは非表示 */
.ig-card:hover { opacity: 0.88; }
.ig-follow { text-align: center; margin-top: 40px; }
@media (max-width: 600px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 1150px) {
  .section { padding: 64px 0; }

  /* ナビ→ドロワー */
  /* backdrop-filterを持つ親の中ではfixedがヘッダー基準になり、ドロワーが伸びないため
     モバイルではすりガラスを無効化して白背景に（見た目はほぼ変わらない） */
  .site-header { backdrop-filter: none; background: rgba(255, 255, 255, 0.98); }

  /* スマホ・タブレットでは追従RECRUITカードを非表示
     （下部固定バーに「見学・採用相談」があり導線が重複、画面占有も大きいため） */
  .hero-recruit { display: none; }
  .nav-toggle { display: flex; }
  .global-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 28px 28px 40px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(31, 92, 66, 0.12);
  }
  .global-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-list a {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav-list a.is-current { border-bottom: 1px solid var(--line); color: var(--green); }
  .header-cta { flex-direction: column; align-items: stretch; }
  .header-cta .btn { padding: 14px; font-size: 15px; }

  .service-cards, .staff-grid, .voice-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .section { padding: 64px 0; }

  .message-grid, .service-detail, .access-grid, .contact-cols { grid-template-columns: 1fr; }
  .svc-hero { padding: 64px 0 56px; }
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-photo { margin-left: -24px; margin-right: -24px; aspect-ratio: 4 / 3; }
  .svc-panel { margin: -56px 0 0; }
  .svc-vert { display: none; }
  .story-sec { padding: 64px 0 56px; }
  .story-sec::before { left: 0; top: 180px; height: 260px; }
  .story-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .story-head .story-intro { padding-top: 0; }
  .story-cards { grid-template-columns: 1fr; }
  .story-card:nth-child(1), .story-card:nth-child(3) { margin-top: 0; }
  .journal-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .journal-grid { grid-template-columns: 1fr; gap: 40px; }
  .msg-hero-grid { grid-template-columns: 1fr; }
  .msg-copy { padding-top: 56px; }
  .msg-photos { padding-top: 0; }
  .msg-photos .ph:nth-child(1) { aspect-ratio: 3 / 4; }
  .msg-photos .ph:nth-child(2) { aspect-ratio: 3 / 4; margin-top: 48px; }
  .msg-hero::before { height: 46%; }
  .service-detail.rev .sd-photo { order: 0; }
  .message-grid { gap: 36px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 10px; }
  .service-cards, .voice-grid { grid-template-columns: 1fr; }
  /* スタッフ紹介：スマホでも2人ずつ並べる（1人ずつ縦に大きく出すよりコンパクトでスクロールも半分） */
  .staff-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .staff-card { padding: 10px 10px 16px; }
  .staff-card .role { top: 8px; left: 8px; font-size: 10.5px; padding: 3px 10px; }
  .staff-card-body { padding: 0 2px; }
  .staff-card h3 { font-size: 15px; margin-bottom: 6px; }
  .staff-card h3 .staff-en { font-size: 9px; }
  .staff-card p { font-size: 12px; line-height: 1.75; text-align: left; }
  .hero { min-height: 480px; }
  .hero-copy { left: 20px; right: 20px; top: 42%; }
  /* 白箱は1行に収める。文字数が多い行でも折り返さないよう画面幅に追従させ、字間もわずかに詰める */
  .copy-line { font-size: clamp(15px, 4.8vw, 20px); letter-spacing: 0.08em; padding: 8px 14px; }
  /* スマホでは固定カードをコンパクトに */
  .hero-recruit { right: 12px; left: auto; width: 236px; height: 148px; bottom: 12px; }
  .hero-recruit .hr-photo { flex-basis: 90px; }
  .hero-recruit .hr-body { padding: 12px; }
  .hero-recruit .hr-en { font-size: 21px; }
  .hero-recruit .hr-lead { font-size: 11.5px; }
  .info-table th { width: auto; display: block; padding: 12px 18px 4px; }
  .info-table td { display: block; padding: 4px 18px 14px; border-bottom: 1px solid var(--line); }
  .info-table tr:last-child td { border-bottom: none; }
}

/* =========================================================
   About：バリュー（うみかひ準拠：緑帯の大きな英字＋01-03の3カラム）
   ========================================================= */
.value-band {
  background: var(--green-pale);
  padding: clamp(56px, 9vw, 110px) 22px;
}
.value-title {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(40px, 7.5vw, 92px);
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--green);  /* 帯が淡い緑になったので白→緑に */
  text-align: center;
}
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 0 64px;
}
.value-item {
  position: relative;
  padding: 100px 8px 40px;  /* 左右は詰めて説明文の1行幅を確保 */
  text-align: center;
}
.value-item + .value-item { border-left: 1px solid var(--line); }
.value-item > *:not(.value-num) { position: relative; z-index: 1; }
.value-num {  /* 背景の大きな薄い番号 */
  position: absolute;
  top: 10px; left: 2px;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(96px, 11vw, 150px);
  line-height: 1;
  color: var(--green-pale);
  z-index: 0;
  user-select: none;
}
.value-icon { margin-bottom: 16px; }
.value-en {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 25px);
  color: var(--ink);
  margin-bottom: 8px;
}
.value-ja {
  color: var(--green);
  font-size: 14px;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.value-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 2.1;
}
.value-text .vp { display: inline-block; }  /* 文節単位でしか折り返さない（不自然な改行の防止） */
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; padding-bottom: 40px; }
  .value-item { padding: 72px 10px 36px; }
  .value-item + .value-item { border-left: none; border-top: 1px solid var(--line); }
}

/* About：ページタイトルの右半分いっぱいに写真（スタッフの後ろ姿）を敷く */
.page-hero-split { min-height: 440px; display: grid; align-items: center; }
.page-hero-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 左＝文字、右＝写真ぶんの空き */
  gap: 48px;
  align-items: center;
}
.page-hero-photo {  /* 画面の右端まで届くフルブリード写真 */
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  border-radius: 0;
}
@media (max-width: 900px) {
  .page-hero-cols { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; }  /* スマホでは文字の下に通常表示 */
}

/* =========================================================
   Service：相談窓口を主役にした再構成（うみかひ準拠＋個人相談歓迎）
   ========================================================= */

/* 連携図 */
.renkei-fig { max-width: 880px; margin: 0 auto; }
.renkei-fig img { width: 100%; height: auto; border-radius: 18px; }

/* 相談窓口：CASEカード（ご本人・ご家族を主役に） */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
.case-card {
  background: #fff;  /* 淡緑背景のセクションに置くため白 */
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;  /* 上部写真をカードの角丸に沿わせる */
}
.case-photo { position: relative; }
.case-photo .ph { border-radius: 0; aspect-ratio: 16 / 9; min-height: 0; }
.case-no {  /* 写真の左上に重なる白タブ（うみかひ準拠） */
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  background: #fff;
  color: var(--green);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  padding: 7px 18px;
  border-radius: 0 0 14px 0;
}
.case-body { padding: 24px 28px 30px; }
.case-card.case-main {  /* 個人からの相談＝主役カード */
  background: #fff;
  border: 2px solid var(--green);
  box-shadow: 0 10px 30px rgba(31, 92, 66, 0.10);
}
.case-tag {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13.5px;
  padding: 4px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.case-tag-sub { background: var(--ink-soft); }
.case-card h3 {
  font-family: var(--font-round);
  font-size: clamp(18px, 2vw, 21px);
  color: var(--green-dark);
  line-height: 1.6;
  margin-bottom: 12px;
}
.case-card p { font-size: 14.5px; line-height: 2; }

/* スマホだけ改行したいときの目印。PC幅では改行せず1行で見せる（2026-09-19 こうすけ指示） */
@media (min-width: 901px) {
  .br-sp { display: none; }
}

/* 相談窓口：連絡手段（電話を主役に） */
.channel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}
.channel-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.channel-tel { border: 2px solid var(--green); }
.ch-label {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
  color: var(--green);
}
.ch-tel {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--green-dark);
  letter-spacing: .02em;
  line-height: 1.3;
}
.ch-value {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
  color: var(--green-dark);
}
.ch-mail { font-size: 15.5px; word-break: break-all; }
.ch-note { font-size: 12.5px; color: var(--ink-soft); }

/* 24時間緊急対応の流れ（うみかひ準拠：左に人物・右にSTEPの流れ図） */
.emg-flow {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 44px);
}
.emg-flow-title {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 15px;
  margin-bottom: 20px;
}
.emg-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: center;
  background: var(--green-mist);
  border-radius: 14px;
  padding: 26px 28px;
}
.emg-visual {
  background: #fff;
  border-radius: 12px;
  padding: 18px 12px 14px;
  text-align: center;
}
.emg-visual .ev-label {
  display: block;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
}
.emg-h { margin-bottom: 10px; }
.emg-h strong {
  font-family: var(--font-round);
  font-size: 18px;
  color: var(--green-dark);
}
.emg-stepno {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--green);
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  margin-right: 12px;
}
.emg-note { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.emg-text p { font-size: 14.5px; line-height: 2; }
.emg-text p strong { color: var(--green-dark); }
.emg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.emg-chips span {
  background: var(--green);
  color: #fff;
  font-size: 13px;
  padding: 4px 13px;
  border-radius: 6px;
}
.emg-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding: 16px 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--green-dark);
}
.emg-arrows .ea { display: flex; align-items: center; gap: 8px; }

/* 料金 */
.fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.fee-card {
  background: #fff;
  border: 2px dashed #BCD8C9;
  border-radius: 18px;
  padding: 32px 30px;
}
.fee-card h3 {
  font-family: var(--font-round);
  font-size: 19px;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green-pale);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.fee-card p { font-size: 14.5px; line-height: 2; margin-bottom: 10px; }

@media (max-width: 900px) {
  .case-grid, .fee-grid { grid-template-columns: 1fr; gap: 18px; }
  .channel-grid { grid-template-columns: 1fr; }
  .emg-row { grid-template-columns: 1fr; gap: 18px; }
  .emg-visual { max-width: 300px; margin: 0 auto; }
  .emg-arrows { flex-direction: column; gap: 8px; }
}

/* Service：相談窓口の導入（写真＋バッジ＋リード文） */
.consult-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto 48px;
}
.consult-photo { position: relative; }
.consult-badge {  /* 写真の右上に重なる丸バッジ */
  position: absolute;
  top: -22px; right: -14px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green);
  color: var(--green-dark);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 18px rgba(31, 92, 66, 0.14);
}
.consult-lead { font-size: 15.5px; line-height: 2.1; }

@media (max-width: 900px) {
  .consult-intro { grid-template-columns: 1fr; gap: 28px; }
  .consult-badge { top: -16px; right: 8px; width: 84px; height: 84px; font-size: 13px; }
}

/* ロゴ（フッター・緊急対応ボックス） */
.footer-logo { width: 54px; height: 54px; border-radius: 50%; display: block; margin-bottom: 12px; }
.ev-logo { width: 42px; height: 42px; border-radius: 50%; display: block; margin: 0 auto 8px; }
.ev-img { width: 100%; max-width: 190px; margin: 0 auto; display: block; }  /* 緊急対応ボックスのイラスト */

/* =========================================================
   電話導線の強化（PCヘッダー電話＋スマホ固定CTAバー）
   ========================================================= */
/* PCヘッダーの電話番号（ナビがドロワーになる1150px以下では固定バーに役割を渡す） */
.header-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
  margin-right: 4px;
  white-space: nowrap;  /* 番号・受付時間をハイフンや空白で折り返さない */
}
.header-tel .ht-num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--green-dark);
}
.header-tel:hover .ht-num { color: var(--green); }
.header-tel .ht-note { font-size: 10px; line-height: 1.4; text-align: center; color: var(--ink-soft); }

/* スマホ用固定CTAバー（電話＋採用の2ボタン） */
.mobile-cta-bar { display: none; }

@media (max-width: 1150px) {
  .header-tel { display: none; }
  /* 下部バーは白抜き（ベタ塗りは重いので、色は文字だけに。罫線＋影＋仕切りで「押せる感」を担保） */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(31, 92, 66, 0.10);
  }
  .mobile-cta-bar a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    font-family: var(--font-round);
    font-weight: 700;
    font-size: 15.5px;
  }
  .mobile-cta-bar a svg { width: 19px; height: 19px; }
  .mcb-tel { color: var(--green-dark); border-right: 1px solid var(--line); }
  .mcb-tel:hover, .mcb-tel:active { background: var(--green-pale); color: var(--green-dark); }
  .mcb-recruit { color: var(--red); }
  .mcb-recruit:hover, .mcb-recruit:active { background: #FBEFED; color: var(--red); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }  /* バーがコンテンツ・フッターに被らないように */
  .global-nav { padding-bottom: calc(40px + 60px); }  /* ドロワー下部のCTAがバーに隠れないように */
}

/* =========================================================
   Recruit：核ページ強化（代表の抜粋・中間CTA・1日の流れ2本立て）
   ========================================================= */
/* 代表メッセージの抜粋カード */
.rep-quote {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--green-mist);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 32px;
  margin-top: 48px;
}
.rq-photo { width: 110px; height: 110px; border-radius: 50%; min-height: 0; }
.rq-photo .ph-label { font-size: 12px; }
.rq-text {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 2;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.rq-who { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.rq-who .en {
  display: block;
  font-family: var(--font-en);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--green);
  text-transform: uppercase;
}
.rq-link { font-size: 14px; font-weight: 700; color: var(--green); }

/* 中間CTA（スタッフの声の下） */
.mid-cta { text-align: center; margin-top: 52px; }
.mc-text {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 17px;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.mc-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* 1日の流れ：看護師×リハ職の2本立て */
.day-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.day-tag {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  padding: 5px 20px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.day-tag-riha { background: var(--green-dark); }

@media (max-width: 900px) {
  .rep-quote { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
  .rq-photo { margin: 0 auto; }
  .day-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================
   全ページ共通：最下部のお問い合わせ（フォーム内蔵）
   ========================================================= */
.contact-cols2 {  /* 電話カード廃止によりフォーム1本の中央寄せ */
  max-width: 640px;
  margin: 0 auto;
}
.contact-logo {  /* 見出し上のワンポイントロゴ */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 14px;
}
.cform {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 30px;
  display: grid;
  gap: 16px;
}
.cform label {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--green-dark);
}
.cform .req { color: var(--red); font-size: 12px; margin-left: 4px; }
.cform select, .cform input, .cform textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  background: #fff;
  resize: vertical;
}
.cf-note { font-size: 12px; color: var(--ink-soft); }
.cform .btn { justify-self: start; }

@media (max-width: 900px) {
  .contact-cols2 { grid-template-columns: 1fr; gap: 20px; }
}

/* Recruit：働く4つの理由（雑誌風番号リスト・左右ジグザグ配置） */
.ra-list { max-width: 980px; margin: 0 auto; }
.ra-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
  padding: 26px 0;
  max-width: 660px;
}
.ra-item:nth-child(odd) { margin-right: auto; }   /* 01・03は左寄せ */
.ra-item:nth-child(even) { margin-left: auto; }   /* 02・04は右寄せ */

/* スクロールで左右からスライドイン（既存のfade-up仕組みを拡張） */
.js .fade-up.from-left:not(.is-visible) { transform: translateX(-56px); }
.js .fade-up.from-right:not(.is-visible) { transform: translateX(56px); }
@media (prefers-reduced-motion: reduce) {
  .js .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.ra-num {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 300;
  font-size: 96px;
  line-height: 1;
  color: #D9EAE1;  /* 淡緑背景でも見える薄さの透かし数字 */
  user-select: none;
}
.ra-item h3 {
  font-family: var(--font-round);
  font-size: 20px;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.ra-item p { font-size: 14.5px; line-height: 2; }
@media (max-width: 800px) {
  .ra-item { grid-template-columns: 74px 1fr; gap: 14px; padding: 26px 0; }
  .ra-num { font-size: 54px; }
}

/* =========================================================
   全ページ共通：アクセス（左マップ＋右外観写真、うみかひ準拠）
   ========================================================= */
.access2 {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: stretch;
  max-width: 1020px;
  margin: 0 auto;
}
.access2-map {
  aspect-ratio: auto;   /* 右カラムと同じ高さまで伸ばす */
  min-height: 380px;
  height: 100%;
}
.access2-photo { aspect-ratio: 16 / 10; min-height: 0; }   /* .ph の min-height:200px が残ると幅が320pxに固定され、360px幅で8pxはみ出す */
.ap-name {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 18px;
  color: var(--green-dark);
  margin: 16px 0 4px;
}
.ap-info { font-size: 14px; line-height: 2; }
.ap-info a { font-family: var(--font-en); font-weight: 600; }
@media (max-width: 900px) {
  .access2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }   /* 1fr だと中身の最小幅（Googleマップ320px）まで列が広がる */
  /* 以前は min-height:260px ＋ aspect-ratio:16/11 だったが、この組み合わせだと
     「高さ260px×16/11＝約378px」まで幅が広がり、360〜393pxのスマホで地図の右端が切れていた。
     縦横比をやめて高さを直接決め、幅は列いっぱいにする。
     min-width:0 は、中のGoogleマップ（最小幅320px）に引っ張られて360px幅で8pxはみ出すのを防ぐため（2026-09-14修正） */
  .access2-map { aspect-ratio: auto; min-height: 0; min-width: 0; width: 100%; height: clamp(260px, 64vw, 500px); }
}

/* アンカーで飛んだとき、固定ヘッダーに見出しが隠れないようにする */
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Staff：チームの考え方（うみかひ「できること」準拠：淡緑帯＋左テキスト＋右に大きな縦写真） */
.team-band {
  position: relative;
  background: var(--green-pale);
  border-radius: 12px;
  padding: clamp(38px, 5vw, 64px);
  padding-right: 50%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-band > .team-text > .en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.team-title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--green-dark);
  line-height: 1.6;
  margin-bottom: 20px;
}
.team-band p { font-size: 15px; line-height: 2.1; color: var(--ink); }
/* 右に大きな縦写真（帯の上下からハミ出して重なる） */
.team-photo {
  position: absolute;
  top: -44px; bottom: -44px;
  right: clamp(22px, 3vw, 44px);
  width: 44%;
  min-height: 0;
  border-radius: 10px;
  box-shadow: 0 24px 50px rgba(31, 92, 66, 0.22);
}
/* ※601px以上（タブレット含む）はPC版レイアウトのまま。
   900pxまで下のグリッドを効かせていた頃は、写真の高さに引っ張られて
   見出しの上に大きな空白ができていたため、スマホ幅だけに限定している */
@media (max-width: 600px) {
  /* スマホは「見出しの横に写真」レイアウト：左に見出し・右に縦長写真、本文は全幅。
     本文まで横に押し込むと1行9文字の縦長になるので、横に並べるのは見出しと写真だけ */
  .team-band {
    padding: clamp(28px, 6vw, 40px);
    padding-right: clamp(28px, 6vw, 40px);
    min-height: 0;
    display: grid;
    grid-template-columns: 1.35fr 38%;
    gap: 0 14px;
  }
  .team-text { display: contents; }
  .team-text > .en { grid-column: 1; }
  .team-title { grid-column: 1; margin-bottom: 0; align-self: center; font-size: 21px; line-height: 1.75; }
  .team-band p { grid-column: 1 / -1; margin-top: 20px; font-size: 15px; }
  /* position:relativeにしないとPHOTOチップが帯の左上へ飛ぶので注意 */
  .team-photo {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    width: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: -2px -14px 0 0;
  }
}

/* =========================================================
   スタッフ紹介：深掘り改修（入口タグ・一問一答・数字で見る）
   ※.st-qa-item は採用ページの .qa-item と衝突するため st- 付き
   ========================================================= */
/* --- 入口タグ（カード内のピル） --- */
.staff-tags{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px;}
.tag-pill{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  color:#8a5a52; background:#FBEAE7; border:1px solid #F2B8AE; border-radius:999px; padding:2px 10px;}

/* 文節の折り返し防止（単語の途中や行末ぶら下がりを避ける） */
.nb{display:inline-block;}
/* スマホ幅のみの文節固定（PCの折り返しには一切影響しない） */
.nb-sp{display:inline;}
@media (max-width:1150px){ .nb-sp{display:inline-block;} }
.qa-q .qa-qt{flex:1;}

/* --- 普段の写真（横に自動で流れるスナップ帯） --- */
.snap-marquee{overflow:hidden; margin-top:48px;}
.snap-track{display:flex; width:max-content; animation:snap-flow 48s linear infinite;}
.snap-half{display:flex; align-items:center; gap:20px; padding-right:20px;}
.snap-item{border-radius:14px; min-height:0; flex:none;}
.snap-item.s-a{width:400px; height:300px;}
.snap-item.s-b{width:250px; height:330px;}
.snap-item.s-c{width:340px; height:260px;}
.snap-item.up{transform:translateY(-26px);}
@keyframes snap-flow{to{transform:translateX(-50%)}}
@media (max-width:820px){
  .snap-marquee{margin-top:32px;}
  .snap-half{gap:12px; padding-right:12px;}
  .snap-item.s-a{width:250px; height:190px;}
  .snap-item.s-b{width:160px; height:210px;}
  .snap-item.s-c{width:215px; height:165px;}
  .snap-item.up{transform:translateY(-14px);}
}
/* トップのヒーロー：スマホは全画面をやめて6割程度の高さに（PCは従来どおり） */
@media (max-width:1150px){
  .hero{ height: 60svh; min-height: 440px; max-height: 600px; }
}

/* トップのInstagram：スマホは横流れマーキー（PCはグリッドのまま） */
.ig-marquee{display:none;}
@media (max-width:1150px){
  .ig-grid{display:none;}
  .ig-marquee{display:block; overflow:hidden; margin-top:8px;}
  .ig-track{display:flex; width:max-content; animation:snap-flow 30s linear infinite;}
  .ig-half{display:flex; gap:12px; padding-right:12px;}
  .ig-marquee .ig-card{flex:none; width:180px; display:block;}
  .ig-marquee .ph-square{width:180px; height:180px; min-height:0;}
}

@media (prefers-reduced-motion: reduce){
  .snap-track{animation:none;}
  .ig-track{animation:none;}
}

/* --- 一問一答（A案：雑誌インタビュー風。見出しはトップと同型の.story-title大ローマ字） --- */
.iv-block{display:grid; grid-template-columns:400px 1fr; gap:56px; align-items:start; margin:72px 0; position:relative;}
.iv-block.rev{grid-template-columns:1fr 400px;}
.iv-block.rev .iv-photo-wrap{order:2;}
.iv-photo-wrap{position:relative;}
.iv-photo{min-height:480px; border-radius:14px; position:relative; z-index:1;}
.iv-photo-wrap::after{content:""; position:absolute; inset:0; border-radius:14px; background:#EAF3EE;
  transform:translate(14px,14px); z-index:0;}
.iv-block.rev .iv-photo-wrap::after{transform:translate(-14px,14px);}
.iv-num{position:absolute; top:-38px; right:-6px; font-family:Poppins,sans-serif; font-weight:700;
  font-size:64px; color:#D6503F; z-index:2; line-height:1;}
.iv-block.rev .iv-num{right:auto; left:-6px;}
.iv-quote{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,30px);
  line-height:1.6; color:#2B2B2B; margin:0 0 14px;}
.iv-quote .kk{color:#D6503F;}
.iv-meta{display:flex; align-items:baseline; gap:14px; margin-bottom:6px;}
.iv-meta h3{font-family:"Zen Maru Gothic",sans-serif; font-size:22px; margin:0;}
.iv-meta .iv-role{font-size:13px; color:#8a5a52; font-weight:700; letter-spacing:.05em;}
.st-qa-item{padding:16px 18px; border-bottom:1px dashed #e5ddd6;}
.st-qa-item:last-child{border-bottom:none;}
.qa-q{display:flex; gap:10px; align-items:flex-start; font-weight:700; font-family:"Zen Maru Gothic",sans-serif; margin-bottom:6px;}
.qa-q::before{content:"Q"; flex:none; width:24px; height:24px; border-radius:50%;
  background:#F2B8AE; color:#fff; font-family:Poppins,sans-serif; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;}
.qa-a{color:#4a4440; font-size:14.5px; padding-left:34px;}
/* Q3（入る前の不安）はこのページで最も応募に効く質問のため淡く強調 */
.st-qa-item.qa-highlight{background:#FDF4F2; border-radius:12px; border-bottom:none; margin:6px 0;}

@media (max-width:820px){
  .iv-block,.iv-block.rev{grid-template-columns:1fr; gap:30px; margin:56px 0;}
  .iv-block.rev .iv-photo-wrap{order:0;}
  .iv-photo{min-height:300px;}
  .iv-photo-wrap::after,.iv-block.rev .iv-photo-wrap::after{transform:translate(8px,8px);}
  .iv-num{font-size:44px; top:-26px; right:4px;}
  .iv-block.rev .iv-num{left:auto; right:4px;}
}

/* =========================================================
   プライバシーポリシー
   ========================================================= */
.policy { max-width: 760px; }
.policy h2 {
  font-family: var(--font-round);
  font-size: 19px;
  color: var(--green-dark);
  border-left: 5px solid var(--green);
  padding-left: 12px;
  margin: 40px 0 12px;
}
.policy h2:first-child { margin-top: 0; }
.policy p, .policy li { font-size: 15px; line-height: 1.9; color: var(--ink); }
.policy ul { padding-left: 1.5em; margin: 10px 0; }
.policy li { margin-bottom: 6px; }
.policy-date { margin-top: 40px; color: var(--ink-soft); font-size: 13.5px; }

/* フッター最下部の法的リンク */
.footer-legal {
  text-align: center;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.footer-legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--green); }
.footer-legal .fl-sep { color: var(--ink-soft); margin: 0 10px; opacity: .5; }

/* =========================================================
   お問い合わせフォームの送信まわり（Turnstile・状態表示） */
.cf-hp {   /* ハニーポット：人間には見えない欄。botだけが埋める */
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.cf-turnstile { min-height: 65px; }   /* ウィジェット読み込み前のガタつき防止 */
.cf-status { font-size: 13.5px; color: var(--red-dark); }
.cf-done {
  background: var(--green-pale);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--ink);
}
.cf-done-title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 17px;
  color: var(--green-dark);
  margin-bottom: 6px;
}

/* 採用「働く魅力」の見出しブロック拡大版（.mb-big＝recruitのみで使用。aboutのmessage-bodyには影響なし） */
.message-body.mb-big h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.75;
}
.message-body.mb-big p {
  font-size: 16.5px;
  line-height: 2.3;
}

/* 採用：見出し「履歴書も、スーツも、いりません。」の1文字ずつぽんっと出る演出（M案） */
.pop-title .pw { display: inline-block; }   /* 折り返しは文節単位（1文字ずつだと句読点が行頭に来るため） */
.pop-title .pch {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) scale(.9);
}
.pop-title.is-pop .pch { animation: ch-pop .45s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes ch-pop { to { opacity: 1; transform: none; } }
.pop-title .pw-red { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .pop-title .pch { opacity: 1; transform: none; animation: none !important; }
}

/* =========================================================
   スマホ：行末に1文字だけ落ちる「孤立文字」を防ぐ
   balance＝見出しの行を均等に割る／pretty＝本文の最終行が短くなりすぎるのを避ける
   ※未対応ブラウザでは無視されるだけで、従来どおりの表示になる（害はない） */
@media (max-width: 600px) {
  h1, h2, h3, h4,
  .tag-pill, .qa-q, .story-tag, .copy-box { text-wrap: balance; }
  p, li, td, dd, .qa-a { text-wrap: pretty; }
  /* 「滋賀県草津市の訪問看護・訪問リハビリ」が360px級の端末で
     最後の1文字だけ折り返されるため、字間をわずかに詰めて1行に収める */
  .brand-sub { letter-spacing: 0.02em; }
}

/* 共同代表2名の枠：1つの枠に2人ぶんの顔写真を左右に並べる。
   .ph-img は本来「枠いっぱいに1枚」なので、ここだけ幅を半分ずつに上書きする */
.greet2-photo.is-duo { display: flex; }
.greet2-photo.is-duo .ph-img {
  position: static;      /* 絶対配置をやめて横に並べる */
  width: 50%;
  height: 100%;
  align-self: stretch;   /* 元の縦横比に関係なく、2枚とも枠いっぱいの同じ高さにする */
  object-fit: cover;
  object-position: center 22%;   /* 顔が中心に来るよう上寄りで切り抜く */
}
.greet2-photo.is-duo .duo-a { border-right: 2px solid #fff; }

/* 職種タグは写真の左上に置いていたが、実写真を入れると顔にかぶる。
   顔は写真の上半分に来るので、写真が入っているカードだけタグを左下へ逃がす。
   （仮枠のままのカードは今までどおり左上。写真が揃ったらこの分岐は不要になる） */
.staff-card .staff-photo:has(.ph-img) .role {
  top: auto;
  bottom: 10px;
  background: rgba(31, 92, 66, 0.88);   /* 服の色に沈まないよう少し濃く */
}

/* インタビュー写真は3枚とも同じ大きさに見せたい。
   これまでは min-height（高さの下限）だけだったため、中の画像の縦横比に
   引っぱられて1枚ずつ大きさが変わっていた。枠の比率を固定して揃える。
   （中の画像は object-fit:cover で切り抜かれるので、元の比率が違っても問題ない） */
.iv-photo { aspect-ratio: 5 / 6; min-height: 0; }
@media (max-width: 900px) {
  .iv-photo { aspect-ratio: 4 / 3; }   /* スマホは縦に長すぎると読みにくいので浅めに */
}

/* 1日の流れ：リハ職の列を削除し看護師の1本だけになったため、2列グリッドを1列に。
   横いっぱいに伸ばすと時刻と説明が離れて読みにくいので、幅を抑える。
   （リハ職の1日を戻すときは、この指定を消せば元の2列に戻る） */
.day-grid { grid-template-columns: 1fr; max-width: 640px; }

/* 採用：1日の流れ。タイムラインの横に、正方形のイラスト3枚を散らして置く
   （2026-09-14 こうすけ指示：PCは右側に互い違い、スマホは各項目の右に小さく）
   写真は該当する時刻の <li> の中に入れてあるので、PC・スマホとも時刻の横からずれない */
.day-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
  background: var(--green-pale);
  box-shadow: 0 14px 34px rgba(25, 84, 63, .12);
}
.day-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.day-photo:hover img { transform: scale(1.025); }
.day-photo figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--green-dark);
  font-family: var(--font-round);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 16px rgba(0,0,0,.08);
}
.day-photo figcaption span {
  color: var(--red);
  font-family: var(--font-en);
  margin-right: 5px;
}

/* PC：左40%がタイムライン、右側に3枚を互い違いに置く。
   cqw＝この枠の横幅の1%。枠の幅に合わせて、写真の大きさと位置が一緒に伸び縮みする */
@media (min-width: 901px) {
  .day-grid.day-grid-visual { display: block; max-width: none; container-type: inline-size; }
  .day-grid-visual .day-col { width: 40%; }
  .day-photo {
    position: absolute;
    width: 26cqw;
    transform: translateY(-50%);   /* top は「四角の中心」の高さとして指定する */
  }
  /* left の -34px は、タイムライン左の余白ぶん（項目の左端は枠の左端より34px右にある） */
  .day-photo-visit  { left: calc(61cqw - 34px); top: -56px; }  /* 9:00と9:30の間、真ん中寄り */
  .day-photo-lunch  { left: calc(74cqw - 34px); top: 96px; }   /* 12:30と13:30の間、右端 */
  .day-photo-record { left: calc(46cqw - 34px); top: 27px; }   /* 17:00の横、左寄り */
}

/* スマホ・タブレット：各項目の右に小さな正方形。文章は写真の左に回り込む */
@media (max-width: 900px) {
  .day-grid.day-grid-visual { max-width: 680px; }
  .day-grid-visual .timeline li { display: flow-root; }  /* 回り込みを項目の中で完結させる */
  .day-photo {
    float: right;
    width: clamp(88px, 26vw, 160px);
    margin: 0 0 8px 14px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(25, 84, 63, .12);
  }
  .day-photo figcaption { display: none; }  /* 小さい四角に文字は入らない。時刻は左に書いてある */
}