/* =========================================================
   社会福祉法人ふれあいの里 リニューアルデモ ― 追加コンポーネント
   ・アクセントを「新緑グリーン」に変更（理念「地域とともに歩み続けます」／農園・パン工房＝自然と成長）
   ・3拠点を横断する統一カード、基本理念5本柱、お知らせ（更新性）、採用導線を追加
   ========================================================= */

/* ---------- アクセント（オレンジ → 新緑グリーン） ---------- */
:root{ --orange:#3E8E4F; --orange-d:#2E6D3B; }
.header-cta:hover{ box-shadow:0 12px 26px -12px rgba(62,142,79,.6); }
.btn-pill--orange:hover{ box-shadow:0 12px 26px -12px rgba(62,142,79,.6); }
.ribbon__dot{ box-shadow:0 0 0 4px rgba(62,142,79,.16); }

/* ---------- ロゴ（先方の実ロゴ 459x85） ---------- */
.site-header__logo img{ height:46px; }
.site-footer__logo img{ height:42px; background:#fff; padding:8px 12px; border-radius:8px; }

/* ---------- ヘッダー：電話番号（福祉法人の一次導線） ---------- */
.header-actions{ gap:18px; }
.header-tel{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding-right:18px; border-right:1px solid var(--line); }
.header-tel__ico{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:rgba(62,142,79,.09); border:1px solid rgba(62,142,79,.3); transition:background .3s; }
.header-tel:hover .header-tel__ico{ background:rgba(62,142,79,.18); }
.header-tel__body{ display:flex; flex-direction:column; line-height:1.2; }
.header-tel__lead{ font-size:10px; letter-spacing:.08em; color:var(--muted); }
.header-tel__num{ font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:500;
  color:var(--navy); letter-spacing:.02em; transition:color .3s; }
.header-tel:hover .header-tel__num{ color:var(--orange-d); }
.header-tel__sub{ font-size:9.5px; letter-spacing:.04em; color:var(--muted-2); }
@media (max-width:1280px){ .gnav{ gap:20px; } .header-tel__sub{ display:none; } }
@media (max-width:1120px){ .header-tel{ display:none; } }

/* =========================================================
   ヒーロー（本サイト限定・エディトリアル／縦書き）
   生成りの余白 × 縦書きの明朝大見出し × 写真2枚のオフセット配置
   ※ 他サイトの hero-mosaic は使わず、この .vhero に置き換えている
   ========================================================= */
/* 高さは画面に追従（clamp）。低い画面では自動で縮み、ファーストビューにCTAまで収まる。
   min-height でノートPCの短い縦でも 1画面に収め、広い画面では最大 600px で間延びさせない。 */
.vhero{ position:relative; background:#FAF8F5; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:clamp(430px, 60vh, 600px); }
/* 右側のトーン面（エディトリアルの余白づくり） */
.vhero::after{ content:''; position:absolute; top:0; right:0; width:44%; height:100%; background:#EFEDE7; z-index:0; }

/* --- 裏側に薄く流すアンビエント動画（静けさは保ったまま気配だけ足す） ---
   重なり順: 背景色 < ::after(トーン面) < __ambient(薄い動画) < __inner(文字・写真)
   opacity を低く抑え、生成りの紙面の上で色と動きが「気配」程度に留まるようにする。 */
.vhero__ambient{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.vhero__ambient video{ width:100%; height:100%; object-fit:cover; opacity:.16; }
/* 左（縦書き文字side）を生成りで持ち上げ、文字のコントラストを確保する */
.vhero__ambient::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(250,248,245,.60) 0%, rgba(250,248,245,.28) 34%,
                                    rgba(250,248,245,.05) 56%, rgba(250,248,245,0) 72%); }

/* アンビエント動画の一時停止（自動再生ループの必須手段・WCAG 2.2.2）。控えめに置く */
.vhero__toggle{ position:absolute; right:18px; bottom:16px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(0,48,114,.16); background:rgba(250,248,245,.72); backdrop-filter:blur(5px);
  color:var(--navy); font-size:11px; letter-spacing:.05em; cursor:pointer; opacity:.55;
  transition:opacity .3s, background .3s, border-color .3s; }
.vhero__toggle:hover{ opacity:1; background:#fff; border-color:var(--orange); }
.vhero__toggle .ico-pause{ display:inline-flex; }
.vhero__toggle .ico-play{ display:none; }
.vhero__toggle[data-playing="false"] .ico-pause{ display:none; }
.vhero__toggle[data-playing="false"] .ico-play{ display:inline-flex; }
.vhero__toggle[data-playing="false"]{ opacity:.85; }

.vhero__inner{ position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto;
  padding:clamp(20px, 3vh, 46px) 40px;
  display:grid; grid-template-columns:1fr 0.9fr; gap:clamp(28px, 3.4vw, 48px); align-items:center; }

/* --- 見出しまわり --- */
.vhero__head{ display:flex; align-items:flex-start; gap:22px; }
/* 縦書きは「段の長さ＝高さ」。7文字 × フォント × 1.2 ≒ 高さ になるので、
   高さ(clamp)とフォント(clamp)を約8.4:1で連動させ、どの画面高でも文字が段からはみ出さない。 */
.vhero__title{ writing-mode:vertical-rl; font-family:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;
  font-weight:600; font-size:clamp(26px, 3.25vh, 35px); letter-spacing:.2em; line-height:1.7;
  color:var(--navy); height:clamp(220px, 27.5vh, 300px); margin:0; }
.vhero__rule{ width:1px; height:clamp(220px, 27.5vh, 300px); flex-shrink:0;
  background:linear-gradient(180deg,#3E8E4F,rgba(62,142,79,0)); }
.vhero__en{ padding-top:5px; font-family:'Cormorant Garamond',serif; font-size:12.5px; letter-spacing:.22em;
  line-height:2.05; color:var(--muted); }
.vhero__en b{ display:block; margin-top:2px; font-size:16px; font-weight:500; letter-spacing:.2em; color:var(--orange-d); }
.vhero__en i{ display:block; margin-top:6px; font-size:11px; color:var(--muted-2); letter-spacing:.16em; }

/* --- リード・CTA（余白も画面高に追従させ、短い画面でCTAを押し出さない） --- */
.vhero__foot{ margin-top:clamp(16px, 2.4vh, 28px); }
.vhero__lead{ font-size:13.5px; line-height:2.0; letter-spacing:.04em; color:var(--ink-2); }
.vhero__meta{ margin-top:clamp(10px, 1.6vh, 15px); display:inline-flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.05em; color:var(--muted); }
.vhero__dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(62,142,79,.16); }
.vhero__actions{ margin-top:clamp(16px, 2.6vh, 26px); display:flex; gap:12px; flex-wrap:wrap; }
.vhero__btn{ display:inline-flex; align-items:center; justify-content:center; height:clamp(48px, 6.4vh, 54px); padding:0 28px;
  font-size:13.5px; font-weight:500; letter-spacing:.06em; text-decoration:none; transition:all .35s var(--ease); }
.vhero__btn--fill{ background:var(--navy); color:#fff; }
.vhero__btn--fill:hover{ background:var(--orange-d); }
.vhero__btn--line{ border:1px solid rgba(0,48,114,.28); color:var(--navy); }
.vhero__btn--line:hover{ border-color:var(--orange); color:var(--orange-d); }

/* --- 写真（大＋小のオフセット）。高さ上限を画面追従にしてコピー側とバランスさせる --- */
.vhero__visual{ position:relative; aspect-ratio:5/6; max-height:clamp(330px, 48vh, 500px); }
.vhero__ph{ margin:0; overflow:hidden; background:#E6E3DA; }
.vhero__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.vhero__ph--main{ position:absolute; top:0; right:0; width:82%; height:100%;
  box-shadow:0 40px 70px -44px rgba(31,42,36,.55); }
.vhero__ph--sub{ position:absolute; left:0; bottom:-24px; width:45%; aspect-ratio:1/1;
  border:7px solid #FAF8F5; box-shadow:0 26px 46px -30px rgba(31,42,36,.5); }
.vhero__cap{ position:absolute; left:0; top:4px; writing-mode:vertical-rl;
  font-family:'Noto Serif JP','Yu Mincho',serif; font-size:11px; letter-spacing:.3em; color:var(--muted-2); }

@media (max-width:1000px){
  .vhero__inner{ grid-template-columns:1fr 0.82fr; gap:30px; }
  .vhero__title{ font-size:clamp(24px, 3vh, 32px); height:clamp(200px, 26vh, 280px); }
  .vhero__rule{ height:clamp(200px, 26vh, 280px); }
}
@media (max-width:900px){
  /* モバイルは内容なりの高さに。写真を先頭に出して“ファーストビューに絵がある”構成にする */
  .vhero{ display:block; min-height:0; }
  .vhero::after{ display:none; }
  /* 背景動画はモバイルでは出さない（視認性ほぼゼロ・データ量が重い） */
  .vhero__ambient, .vhero__toggle{ display:none; }
  .vhero__inner{ grid-template-columns:1fr; gap:18px; padding:20px 22px 30px; }
  /* 写真を最上部へ（絵で掴む）。コンパクトなコラージュ帯にする */
  .vhero__visual{ order:-1; aspect-ratio:16/10; max-height:none; margin:0; }
  .vhero__ph--main{ width:84%; }
  .vhero__ph--sub{ width:38%; bottom:-14px; border-width:5px; }
  .vhero__cap{ display:none; }
  /* スマホは縦書きをやめて横組みに（狭い画面で縦書きは読みにくいため） */
  .vhero__head{ flex-direction:column-reverse; align-items:flex-start; gap:9px; }
  .vhero__title{ writing-mode:horizontal-tb; height:auto; font-size:29px; letter-spacing:.06em; line-height:1.55; }
  .vhero__rule{ display:none; }
  .vhero__en{ padding-top:0; }
  .vhero__en b{ font-size:15px; }
  .vhero__foot{ margin-top:15px; }
  .vhero__lead{ font-size:13px; line-height:1.95; }
  .vhero__meta{ margin-top:11px; }
  .vhero__actions{ margin-top:16px; }
}
@media (max-width:560px){
  .vhero__title{ font-size:27px; }
  .vhero__btn{ flex:1; padding:0 14px; }
}
/* モーション軽減：アンビエント動画を消して、元の静止版の見た目に戻す */
@media (prefers-reduced-motion: reduce){
  .vhero__ambient{ display:none; }
  .vhero__toggle{ display:none; }
}

/* ---------- 数字 ---------- */
.stats{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; padding:24px 12px; border-radius:16px; background:#fff; box-shadow:0 22px 46px -38px rgba(0,48,114,.4); }
.stat__num{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:50px; line-height:1; color:var(--navy); }
.stat__num small{ font-size:17px; color:var(--orange); font-family:'Noto Sans JP',sans-serif; font-weight:700; margin-left:2px; }
.stat__label{ margin-top:12px; font-size:12.5px; letter-spacing:.06em; color:var(--muted); line-height:1.7; }
.stat__cap{ display:block; font-size:11px; color:var(--muted-2); margin-top:4px; }

/* ---------- 基本理念（5本柱） ---------- */
.philo{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.philo__item{ position:relative; text-align:center; padding:30px 10px 26px; border-radius:14px; background:#fff;
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s; }
.philo__item:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -32px rgba(0,48,114,.5); }
.philo__mark{ width:46px; height:46px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:rgba(62,142,79,.1); border:1px solid rgba(62,142,79,.3); }
.philo__ja{ font-size:19px; font-weight:800; letter-spacing:.14em; color:var(--navy); }
.philo__en{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; letter-spacing:.1em; color:var(--orange); }
.philo__txt{ margin-top:10px; font-size:11.5px; line-height:1.85; color:var(--muted); }

/* ---------- 3拠点カード（統一フォーマット） ---------- */
.facs{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.fac{ display:flex; flex-direction:column; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 26px 54px -40px rgba(0,48,114,.55); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s; }
.fac:hover{ transform:translateY(-5px); box-shadow:0 34px 66px -38px rgba(0,48,114,.6); }
.fac__photo{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.fac__photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.fac:hover .fac__photo img{ transform:scale(1.05); }
.fac__badge{ position:absolute; left:12px; top:12px; padding:6px 13px; border-radius:999px; font-size:11px; font-weight:700; color:#fff; letter-spacing:.04em; }
.fac__badge--care{ background:#2F6FB5; }
.fac__badge--work{ background:var(--orange); }
.fac__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.fac__name{ font-size:20px; font-weight:800; color:var(--navy); letter-spacing:.04em; line-height:1.45; }
.fac__en{ display:block; margin-top:3px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--orange); letter-spacing:.1em; }
.fac__desc{ margin:12px 0 16px; font-size:13px; line-height:1.95; color:var(--muted); flex:1; }
.fac__data{ border-top:1px solid var(--line-2); padding-top:12px; }
.fac__row{ display:grid; grid-template-columns:62px 1fr; gap:8px; padding:4px 0; font-size:12px; }
.fac__k{ color:var(--orange-d); font-weight:700; }
.fac__v{ color:var(--ink-2); line-height:1.7; }
.fac__tel{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:'Cormorant Garamond',serif;
  font-size:21px; color:var(--navy); text-decoration:none; font-weight:500; }

/* ---------- 現場の取り組み ---------- */
.acts{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.act{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.act__photo{ aspect-ratio:4/3; overflow:hidden; }
.act__photo img{ width:100%;height:100%;object-fit:cover; }
.act__body{ padding:16px 16px 18px; }
.act__ttl{ font-size:14.5px; font-weight:700; color:var(--navy); }
.act__txt{ margin-top:7px; font-size:12px; line-height:1.85; color:var(--muted); }

/* ---------- お知らせ（更新性の可視化） ---------- */
.news{ max-width:900px; margin:0 auto; }
.news__item{ display:grid; grid-template-columns:104px 92px 1fr; gap:16px; align-items:center;
  padding:15px 8px; border-bottom:1px solid var(--line-2); text-decoration:none; transition:background .3s; }
.news__item:hover{ background:var(--bg-soft); }
.news__date{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--muted); letter-spacing:.04em; }
.news__cat{ text-align:center; padding:4px 8px; border-radius:999px; font-size:10.5px; font-weight:700; color:#fff; }
.news__cat--secure{ background:#2F6FB5; }
.news__cat--labo{ background:var(--orange); }
.news__cat--houjin{ background:#7A6A55; }
.news__ttl{ font-size:13.5px; color:var(--ink); line-height:1.7; }
.news__note{ max-width:900px; margin:18px auto 0; padding:14px 18px; border-radius:10px;
  background:rgba(62,142,79,.07); border:1px dashed rgba(62,142,79,.4); font-size:12px; line-height:1.9; color:var(--ink-2); }
.news__note b{ color:var(--orange-d); }

/* ---------- 採用 ---------- */
.jobs{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.job{ background:#fff; border-radius:16px; border:1px solid var(--line); padding:26px 24px;
  box-shadow:0 22px 46px -40px rgba(0,48,114,.5); }
.job__tag{ display:inline-block; padding:5px 12px; border-radius:999px; background:rgba(62,142,79,.1);
  color:var(--orange-d); font-size:11px; font-weight:700; margin-bottom:12px; }
.job__ttl{ font-size:21px; font-weight:800; color:var(--navy); }
.job__place{ margin-top:5px; font-size:12px; color:var(--muted); }
.job__pay{ margin:16px 0; padding:14px 16px; border-radius:10px; background:var(--bg-soft); }
.job__pay-k{ font-size:11px; color:var(--muted); letter-spacing:.08em; }
.job__pay-v{ margin-top:3px; font-size:19px; font-weight:800; color:var(--orange-d); font-family:'Cormorant Garamond',serif; letter-spacing:.02em; }
.job__pay-v span{ font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:500; color:var(--ink-2); }
.job__list{ list-style:none; padding:0; margin:0; }
.job__list li{ position:relative; padding-left:18px; font-size:12.5px; line-height:2; color:var(--ink-2); }
.job__list li::before{ content:''; position:absolute; left:0; top:12px; width:8px; height:8px; border-radius:50%;
  background:rgba(62,142,79,.25); border:1px solid var(--orange); }

/* ---------- 法人概要 ---------- */
.profile{ max-width:860px; margin:0 auto; border-top:1px solid var(--line-2); }
.profile__row{ display:grid; grid-template-columns:180px 1fr; gap:26px; padding:16px 10px; border-bottom:1px solid var(--line-2); }
.profile__key{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--navy); }
.profile__val{ font-size:13.5px; line-height:1.95; color:var(--ink-2); }
.profile__val a{ color:var(--orange-d); text-decoration:none; }

@media (max-width:1000px){
  .philo{ grid-template-columns:repeat(3,1fr); }
  .facs{ grid-template-columns:1fr; max-width:560px; }
  .acts{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .stats{ grid-template-columns:1fr 1fr; gap:14px; }
  .stat__num{ font-size:42px; }
  .jobs{ grid-template-columns:1fr; }
  .news__item{ grid-template-columns:86px 78px 1fr; gap:10px; }
  .news__ttl{ font-size:12.5px; }
  .profile__row{ grid-template-columns:112px 1fr; gap:14px; }
  .site-header__logo img{ height:38px; }
}
@media (max-width:560px){
  .philo{ grid-template-columns:1fr 1fr; }
  .acts{ grid-template-columns:1fr; }
  .news__item{ grid-template-columns:1fr; gap:5px; padding:14px 6px; }
  .news__cat{ justify-self:start; padding:3px 10px; }
}