/* ============================================================
   コノヒカラ TOP — v3「ロゴのグラフィック言語」版
   ロゴ＝斜めに交差する半透明バー。重なりから色が生まれる。
   曲線を排し、直線・矩形・multiply の重なりで構成する。
   カラー：#FDD7E1 / #C6E6FB / #f0f5b8 / #303030 / #fffdfa
   ============================================================ */
:root{
  --bg:#fffdfa;
  --ink:#303030;
  --pink:#FDD7E1;
  --blue:#C6E6FB;
  --yellow:#f0f5b8;
  --white:#ffffff;
  /* 派生（可読性確保の機能色） */
  --pink-ink:#b95c7d;
  --blue-ink:#4f7fa3;
  --grey:#8f8d88;
  --grey-light:#f1efeb;
  --line:#e7e3dc;
  --f-en:"Jost",sans-serif;
  --f-jp:"Zen Kaku Gothic New",sans-serif;
  /* 中身の最大幅と左右の余白。
     **rem で持つ**ので、文字サイズを上げると枠も一緒に広がる（2026-08-10）。
     標準16pxでは 70rem = 1120px なので、これまでの見た目と1pxも変わらない。 */
  --maxw:70rem;
  --wrap-pad:24px;
  --fs-base:16px;
  /* 影：ぼかさない「パキッと分かれる」ハードシャドウで統一する（直線基調の言語に合わせる）。
     rest＝置いてある状態、hover＝持ち上がった状態。
     ※タブ直下の入口ブロックだけは全幅で面が大きいため、別途もっと浅い影を当てている。 */
  --shadow-hard:6px 6px 0 rgba(48,48,48,.09);
  --shadow-hard-hover:10px 10px 0 rgba(48,48,48,.12);
}
/* 文字サイズ切替。html に当てる（body に当てると rem 指定が動かない。過去に踏んだバグ）。
   **左右の余白は文字を大きくするほど削る**（2026-08-10 追加）。
   文字だけ大きくして枠が同じだと、1行に入る文字数が減って改行だらけになるため、
   画面の端まで使って1行を長くする。枠そのもの（--maxw ほか）は rem なので自動で広がる。 */
html[data-fontsize="large"]{--fs-base:19px;--wrap-pad:20px;}
html[data-fontsize="xl"]{--fs-base:24px;--wrap-pad:16px;}
@media (max-width:640px){html[data-fontsize="xl"]{--fs-base:21px;--wrap-pad:14px;}}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:var(--fs-base);scroll-behavior:smooth;scroll-padding-top:96px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}
body{
  font-family:var(--f-jp);
  font-size:1rem;
  color:var(--ink);
  background:var(--bg);
  line-height:1.95;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;}

/* ---------- 共通 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad);}
.section{padding:110px 0;}
.sec-head{text-align:center;margin-bottom:60px;}
/* 見出しの横にイラストを置くとき（2026-08-10）。
   絵が入るぶん中央揃えだと重心が崩れるので、**このときだけ左揃えにしてよい**（えいちゃん了承）。
   イラストが無い環境ではクラス自体が付かず、中央揃えのままになる。 */
.sec-head--illust{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;text-align:left;
}
.sec-head--illust .section-lead{margin-left:0;margin-right:0;text-align:left;max-width:none;}
/* 3つの価値観をつないだ1文（大切にしていること）も、見出しと同じ左の軸にそろえる。 */
.sec-head--illust .values-sentence{text-align:left;margin:24px 0 0;max-width:none;}
.sec-head__illust{width:min(210px,26vw);}
/* 横長のイラスト（水やり）は同じ幅だと小さく見えるので、大きめの枠を用意する。 */
.sec-head__illust--lg{width:min(320px,34vw);}
.sec-head__illust img{display:block;width:100%;height:auto;}
@media (max-width:720px){
  .sec-head--illust{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center;}
  .sec-head--illust .section-lead{text-align:center;}
  .sec-head--illust .values-sentence{text-align:center;margin-top:20px;}
  .sec-head__illust{width:min(180px,52vw);}
  .sec-head__illust--lg{width:min(280px,72vw);}
}
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-en);font-weight:500;font-size:.82rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--grey);
}
/* ロゴ引用：重なる2枚の小さなバー */
.sec-eyebrow::before{
  content:"";width:22px;height:9px;flex-shrink:0;
  background:
    linear-gradient(var(--blue),var(--blue)) 0 0/14px 9px no-repeat,
    linear-gradient(var(--pink),var(--pink)) 8px 0/14px 9px no-repeat;
  background-blend-mode:multiply;
  background-color:var(--bg);
  transform:skewX(-18deg);
}
.sec-title{
  font-weight:700;font-size:clamp(1.55rem,3.2vw,2.05rem);
  margin-top:14px;line-height:1.6;letter-spacing:.1em;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-jp);font-weight:700;font-size:.98rem;letter-spacing:.08em;
  padding:1em 2.4em;border:1px solid var(--ink);cursor:pointer;
  background:var(--white);color:var(--ink);line-height:1.4;text-align:center;
  position:relative;box-shadow:var(--shadow-hard);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.btn:hover{box-shadow:var(--shadow-hard-hover);transform:translate(-4px,-4px);}
.btn .arrow{font-family:var(--f-en);font-weight:400;transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--pink);}
.btn-primary:hover{background:#fcc9d8;}
.btn-outline:hover{background:var(--grey-light);}
.btn-ghost{font-size:.9rem;padding:.8em 2em;}
.btn-ghost:hover{background:var(--grey-light);}

/* 枠線で囲んだボックス類も同じハードシャドウでトーンを揃える。
   （ホバー時の深い影は各コンポーネント側の :hover で上書きする） */
.dp-card,.jobkind,.value-card,.stat,.voice-card,.article-card,.job-card,
.pt-card,.fac-card,.info-link-card,.flow-step,.adm-check-block{
  box-shadow:var(--shadow-hard);
}

/* スクロールで出てくる要素。
   **`html.js` が付いているとき（＝JSが動いているとき）だけ隠す。**
   素の `.reveal{opacity:0}` にすると、JSが読み込めなかった環境で中身が永久に消える。
   `js` クラスは header.php の <head> で付けている。 */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
html.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;}}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:10px 18px;z-index:200;
}
.skip-link:focus{left:0;}

/* ---------- ヘッダー ---------- */
/* ⚠️ backdrop-filter / filter / transform をこの要素に付けないこと。
   付けると position:fixed の基準がビューポートではなく .header になり、
   中にあるモバイルドロワー（.gnav.open）が**ヘッダーの高さに潰れて開かなくなる**
   （実際に踏んだ：高さ1px＋padding で48pxしか出なかった）。
   以前は backdrop-filter:blur(8px) が付いていたので、不透明な背景色に置き換えた。 */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--ink);
}
.header-bar{
  max-width:80rem;margin:0 auto;padding:0 var(--wrap-pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px;
}
.header-tools{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo img{height:38px;width:auto;display:block;}
.footer .logo img{height:50px;}
.gnav{border-top:1px solid var(--line);}
.gnav>ul{max-width:80rem;margin:0 auto;padding:0 var(--wrap-pad);display:flex;gap:2px;justify-content:center;}
.gnav>ul>li{position:relative;}
.gnav>ul>li>a,.gnav>ul>li>button{
  display:block;padding:10px 13px;font-size:.9rem;font-weight:500;
  background:none;border:none;font-family:var(--f-jp);color:var(--ink);
  cursor:pointer;letter-spacing:.05em;position:relative;
}
.gnav>ul>li>a::after,.gnav>ul>li>button::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
  background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.gnav>ul>li>a:hover::after,.gnav>ul>li>button:hover::after,
.gnav>ul>li:focus-within>button::after,
.gnav>ul>li:focus-within>a::after{transform:scaleX(1);}
/* ドロップダウンは廃止（2026-08-06 決定）。下層を1ページに畳んだので、
   開くメニューで行き先を選ばせる必要が無くなった。ナビは1階層のフラット7項目。
   ページ内の各セクションへは、各ページ冒頭のアンカーナビ（.area-nav）で移動する。 */
.header-ctas{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.header-ctas .btn{font-size:.85rem;padding:.72em 1.5em;}
/* 電話番号はボタンより先・より大きく（問い合わせは電話が最優先）。 */
.header-tel{display:flex;flex-direction:column;line-height:1.15;}
.header-tel__label{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--grey);}
.header-tel__num{font-family:var(--f-en);font-weight:500;font-size:1.32rem;letter-spacing:.05em;color:var(--ink);}
.header-tel:hover .header-tel__num{text-decoration:underline;text-underline-offset:3px;}
.fontsize-toggle{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ft-label{font-size:.74rem;font-weight:700;color:var(--grey);letter-spacing:.06em;}
.ft-group{display:flex;}
.fontsize-toggle button{
  border:none;font-family:var(--f-jp);font-weight:700;cursor:pointer;
  padding:6px 15px;font-size:.76rem;line-height:1.4;
  background:var(--grey-light);color:var(--grey);
  transition:background .2s ease,color .2s ease;
}
.fontsize-toggle button:first-child{border-radius:5px 0 0 5px;}
.fontsize-toggle button:last-child{border-radius:0 5px 5px 0;}
.fontsize-toggle button:hover{color:var(--ink);}
.fontsize-toggle button.active{background:var(--pink);color:var(--ink);}
@media (max-width:480px){.ft-label{display:none;}}
/* スマホ幅でヘッダーが横にはみ出し、MENUボタンが画面外に出て押せなくなっていた
   （390px で実測 31px オーバー）。ロゴ・文字サイズ切替・MENUを縮めて収める。 */
@media (max-width:560px){
  .header-bar{padding:0 14px;gap:10px;min-height:58px;}
  .header-tools{gap:10px;}
  .logo img{height:30px;}
  .fontsize-toggle{gap:0;}
  .fontsize-toggle button{padding:5px 9px;font-size:.68rem;}
  .menu-btn{padding:8px 11px !important;font-size:.7rem !important;letter-spacing:.08em !important;}
}
@media (max-width:360px){
  .header-bar{padding:0 10px;}
  .logo img{height:26px;}
  .fontsize-toggle button{padding:5px 7px;font-size:.64rem;}
}
.menu-btn{display:none;}
/* ハンバーガー時のナビ（開いたときの見た目）。表示条件はブレークポイント側で切り替えるため、
   .open が付いたときだけ効くこのルール自体は基準CSSに置く（切替閾値ごとの重複を避ける）。
   .open はハンバーガーが見えているときしか付かない（JS側で非表示になったら閉じる）。 */
/* 開始位置と高さは JS が測った実寸（--kh-header-h）を使う。
   62px 決め打ちだと、文字サイズ「大きく／特大」でヘッダーが高くなったときにズレる。
   高さは明示する（上下 inset による自動伸長に頼らない）。 */
.gnav.open{
  display:block;position:fixed;left:0;right:0;top:var(--kh-header-h,62px);
  height:calc(100dvh - var(--kh-header-h,62px));
  background:var(--bg);border-top:1px solid var(--line);
  overflow-y:auto;padding:8px var(--wrap-pad) 40px;z-index:99;
  overscroll-behavior:contain;
}
@supports not (height:100dvh){
  .gnav.open{height:calc(100vh - var(--kh-header-h,62px));}
}
.gnav.open>ul{padding:0;justify-content:flex-start;flex-direction:column;gap:0;}
.gnav.open>ul>li{border-bottom:1px solid var(--line);}
.gnav.open>ul>li>a{padding:16px 4px;font-size:1rem;}
/* メニューを開いているあいだは背面をスクロールさせない */
body.is-menu-open{overflow:hidden;}
/* 文字サイズを上げるとナビの実寸が伸びて1行に収まらなくなるため、切替閾値も比例して上げる
   （標準16px=1024px を基準に、大きく19px≒1240px／特大24px≒1560px）。
   1024pxより広い範囲ではCTAボタン（見学予約・お問い合わせ）は出したままにし、導線を弱めない。 */
@media (min-width:1025px) and (max-width:1240px){
  html[data-fontsize="large"] .gnav:not(.open){display:none;}
  html[data-fontsize="large"] .menu-btn{
    display:block;margin-left:auto;border:1px solid var(--ink);background:var(--white);
    padding:10px 16px;font-family:var(--f-en);font-weight:500;letter-spacing:.15em;
    font-size:.78rem;cursor:pointer;color:var(--ink);
  }
}
@media (min-width:1025px) and (max-width:1560px){
  html[data-fontsize="xl"] .gnav:not(.open){display:none;}
  html[data-fontsize="xl"] .menu-btn{
    display:block;margin-left:auto;border:1px solid var(--ink);background:var(--white);
    padding:10px 16px;font-family:var(--f-en);font-weight:500;letter-spacing:.15em;
    font-size:.78rem;cursor:pointer;color:var(--ink);
  }
}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;padding:110px 0 130px;}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-copy .hero-en{
  font-family:var(--f-en);font-weight:500;font-size:.8rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--grey);display:block;margin-bottom:26px;
}
.hero-copy h1{
  font-weight:700;font-size:clamp(1.9rem,4.3vw,2.9rem);
  line-height:1.75;letter-spacing:.09em;
}
.hero-copy h1 .mark{
  background:linear-gradient(transparent 70%,var(--yellow) 70%);padding:0 .04em;
}
.hero-copy p{margin-top:30px;color:#5a5854;max-width:32em;font-size:.98rem;}
/* ロゴの「K」構造の引用：交差する半透明バー */
.hero-visual{position:relative;height:460px;}
.hv-bar{position:absolute;mix-blend-mode:multiply;}
.hv-bar.v{width:120px;height:92%;left:26%;top:0;background:var(--yellow);}
.hv-bar.d1{width:64%;height:110px;left:6%;top:22%;background:var(--pink);transform:rotate(-32deg);}
.hv-bar.d2{width:58%;height:110px;left:16%;top:52%;background:var(--blue);transform:rotate(28deg);}
/* 写真は「外観 → カスタマイズ → TOPページのヒーロー写真」で選んだときだけ出る。
   未選択のあいだは .hv-photo ごと出力されず、バーだけが残る（.hero-visual.is-bare）。 */
.hv-photo{
  position:absolute;right:0;bottom:6%;width:54%;height:56%;
  background:var(--grey-light);border:1px solid var(--ink);overflow:hidden;
}
/* 全面カバー＋暗めオーバーレイでパステルにメリハリを付ける */
.hv-photo.has-photo{background-size:cover;background-position:center;}
.hv-photo.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(48,48,48,.04),rgba(48,48,48,.30));
}
.hero-scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--f-en);font-size:.7rem;letter-spacing:.4em;color:var(--grey);
  text-transform:uppercase;
}


/* ---------- ファーストビュー：1回きりの登場シーケンス（分類B） ----------
   ロゴの構造を再演：バーが順に重なり、色が生まれてから言葉が現れる。
   0.00s 縦バー → 0.15s ピンクバー → 0.30s ブルーバー → 0.45s 写真
   0.45s 見出し1行目 → 0.60s 2行目 → 0.95s「場所」マーカー → 完了1.4s
   ループなし。prefers-reduced-motion時は全て静止（完成形表示）。 ---------- */
@keyframes fv-fade{from{opacity:0;}to{opacity:1;}}
@keyframes fv-fadeup{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fv-bar-v{from{opacity:0;transform:translateY(-46px);}to{opacity:1;transform:none;}}
@keyframes fv-bar-d1{from{opacity:0;transform:rotate(-32deg) translateX(-90px);}to{opacity:1;transform:rotate(-32deg) translateX(0);}}
@keyframes fv-bar-d2{from{opacity:0;transform:rotate(28deg) translateX(90px);}to{opacity:1;transform:rotate(28deg) translateX(0);}}
@keyframes fv-mark{from{background-size:0% 100%;}to{background-size:100% 100%;}}
.hero-en{animation:fv-fade .6s ease-out .3s both;}
.hl-line{display:inline-block;animation:fv-fadeup .6s cubic-bezier(.22,.61,.36,1) both;}
.hero-copy h1 .hl-line:nth-of-type(1){animation-delay:.45s;}
.hero-copy h1 .hl-line:nth-of-type(2){animation-delay:.6s;}
.hero-copy h1 .mark{
  background-repeat:no-repeat;background-size:100% 100%;
  animation:fv-mark .45s ease-out .95s both;
}
.hero-copy p{animation:fv-fadeup .6s ease-out .75s both;}
.hv-bar.v{animation:fv-bar-v .5s ease-out 0s both;}
.hv-bar.d1{animation:fv-bar-d1 .55s cubic-bezier(.22,.61,.36,1) .15s both;}
.hv-bar.d2{animation:fv-bar-d2 .55s cubic-bezier(.22,.61,.36,1) .3s both;}
.hv-photo{animation:fv-fade .6s ease-out .45s both;}
.hero-scroll{animation:fv-fade .6s ease-out 1.2s both;}

/* ---------- お知らせ帯 ---------- */
.news-strip{background:var(--white);border-block:1px solid var(--ink);}
.news-strip .wrap{display:flex;align-items:center;gap:22px;padding-block:18px;flex-wrap:wrap;}
.news-strip .label{
  font-family:var(--f-en);font-weight:500;font-size:.78rem;letter-spacing:.3em;
  text-transform:uppercase;flex-shrink:0;color:var(--grey);
}
.news-item{display:flex;align-items:center;gap:14px;font-size:.92rem;min-width:0;}
.news-item time{font-family:var(--f-en);color:var(--grey);font-size:.85rem;flex-shrink:0;letter-spacing:.06em;}
.news-tag{
  font-size:.72rem;font-weight:700;padding:2px 12px;background:var(--blue);flex-shrink:0;
  transform:skewX(-12deg);
}
.news-tag span{display:inline-block;transform:skewX(12deg);}
.news-tag.is-recruit{background:var(--yellow);}
.news-item .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-item:hover .t{text-decoration:underline;text-underline-offset:4px;}
/* お知らせ一覧リンク：濃ピンクのアンダーバーで目立たせる（ヒーロー「場所」マーカーと同系のアクセント） */
.news-strip .more{position:relative;margin-left:auto;flex-shrink:0;font-weight:700;font-size:.9rem;color:var(--ink);padding-bottom:5px;letter-spacing:.02em;}
.news-strip .more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pink-ink);transform:skewX(-12deg);}
.news-strip .more:hover{color:var(--pink-ink);}
.news-strip .more{margin-left:auto;font-size:.85rem;font-weight:700;flex-shrink:0;}
.news-strip .more:hover{color:var(--blue-ink);}

/* ---------- 目的別ナビ ---------- */
/* ============================================================
   目的別ナビ：タブUI（ARIA Tabs・全幅／タブごとにパステル配色）
   タブごとに独立したミニLP。パネルはテーマ変数（--tab / --tab-ink / --tab-bg）で配色。
   ============================================================ */
.doors{padding:96px 0 0;}
.doors .sec-head{margin-bottom:34px;}
/* タブ全体をナビと同じ最大幅=1280pxに収め、タブバーとカードの左右端を揃える。
   上の padding は選択タブが伸びるぶんの余白。 */
.door-tabs{width:100%;max-width:80rem;margin:0 auto;padding:30px var(--wrap-pad) 0;}
/* タブリスト（align-items:end で下端固定 → 選択タブは box が上へ「伸びる」＝隙間が出ない） */
/* 列数はタブの数に追随させる（タブを増減してもCSSを触らない） */
.door-tablist{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;}
.door-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:82px;padding:14px 16px;border:1px solid var(--ink);margin-left:-1px;
  cursor:pointer;text-align:center;
  /* 入口ブロックと同じハードシャドウ。タブと直下の面がひと続きに持ち上がって見える */
  box-shadow:0 -6px 0 rgba(48,48,48,.13);
  transition:min-height .28s cubic-bezier(.33,1.3,.62,1),box-shadow .2s ease;
}
.door-tab:first-child{margin-left:0;}
/* デフォルト配色：タブごとにパステル三原色 */
.door-tab--1{background:var(--pink);}
.door-tab--2{background:var(--blue);}
/* 非選択は白いベールで少し沈ませ、選択タブを引き立てる（テキストはベールの上） */
.door-tab::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.36);transition:opacity .2s ease;pointer-events:none;}
.door-tab>*{position:relative;z-index:1;}
.door-tab__chev{width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s ease;}
.door-tab__en{font-family:var(--f-en);font-weight:500;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);}
.door-tab__ja{font-weight:700;font-size:1.1rem;letter-spacing:.04em;line-height:1.5;color:var(--ink);transition:transform .2s ease;}
/* ホバー反応（非選択）：ベールが晴れて少し伸び、シェブロンとラベルがふわっと動く */
.door-tab:hover:not([aria-selected="true"])::before{opacity:.18;}
.door-tab:not([aria-selected="true"]):hover{min-height:96px;box-shadow:0 0 0 1px var(--ink),0 -6px 0 rgba(48,48,48,.13);}
.door-tab:not([aria-selected="true"]):hover .door-tab__chev{transform:translateY(3px) rotate(45deg);}
.door-tab:not([aria-selected="true"]):hover .door-tab__ja{transform:translateY(-2px);}
/* 選択タブ：ベールを外し、ボックスが上へ伸びる（下端は固定＝隙間なし）＋黒枠を最前面に */
.door-tab[aria-selected="true"]{
  cursor:default;z-index:3;min-height:110px;
  box-shadow:0 0 0 1px var(--ink),0 -6px 0 rgba(48,48,48,.13);
}
.door-tab[aria-selected="true"]::before{opacity:0;}
.door-tab:focus-visible{outline:3px solid var(--ink);outline-offset:-6px;z-index:4;}

/* パネル＝そのタブのページ全体。タブごとの配色変数だけを持つ素の入れ物で、
   中身（入口ブロック＋本文セクション群）はそれぞれの背景を持つ。 */
.door-panel{position:relative;--tab-bg:var(--tab-tint);}
.door-panel[hidden]{display:none;}
/* --tab-tint は「そのタブのブランドパステルを背景色 #fffdfa に重ねた面」。
   新しい色は作らず、指定色（ブランド3色＋背景色）だけで面をつくる（デザインルール準拠）。
   --accent-a / --accent-b は「そのタブ以外の2色」。地の色と同化しないよう、
   マーカー・ピルなど地の上に置く要素にはタブ色ではなくこちらを使う。 */
.door-panel--1{
  --tab:var(--pink);--tab-ink:var(--pink-ink);--tab-tint:rgba(253,215,225,.3);   /* #FDD7E1 */
  --accent-a:var(--yellow);--accent-b:var(--blue);
}
.door-panel--2{
  --tab:var(--blue);--tab-ink:var(--blue-ink);--tab-tint:rgba(198,230,251,.3);   /* #C6E6FB */
  --accent-a:var(--pink);--accent-b:var(--yellow);
}

/* タブの色を、タブより下のセクションにも最後まで引き継ぐ。
   「背景色」と「そのタブの色の面」をセクションごとに交互に切り替えることで、
   どのタブを見ているのかがページを下っても分かるようにする（色は上記2つだけを反復）。 */
.door-panel > section{background:var(--bg);}
.door-panel > section:nth-of-type(even){background:var(--tab-tint);}
/* 面が交互に変わるため、カードは常に白にして地と分ける（下地に溶けないように） */
.door-panel .flow-step,
.door-panel .article-card,
.door-panel .faq-item{background:var(--white);}
/* 募集バナーは元々「直前のセクションに続けて置く」前提で上余白がないため、
   面を持つようになったぶん上下の余白を揃える。 */
/* 入口ブロック＝タブ直下のカード。画面幅いっぱい（全幅）で、上辺の罫線＋上部だけ角丸にして
   「切り替わっている」印象を出す。左右と下辺の枠線は付けない（下は本文へ流れで続くため）。
   中身は .wrap で中央寄せ。 */
/* 影：ぼかさず、面が一段持ち上がったように見せるハードシャドウ（境目がパキッと分かれる）。
   枠線は選択タブ（1px枠＋1pxリング＝実質2px）と同じ太さに揃える。
   全幅ブロックなので左右の影は画面外に出る＝上へ落として輪郭を見せる。 */
.dp-intro{
  position:relative;margin-top:-2px;background:var(--tab-bg);
  border-top:2px solid var(--ink);border-radius:18px 18px 0 0;
  box-shadow:0 -6px 0 rgba(48,48,48,.13);
}
.dp-wrap{padding-top:56px;padding-bottom:64px;}
/* パネル見出し */
.dp-head{text-align:center;margin-bottom:42px;}
.dp-head .door-no{display:block;color:var(--tab-ink);}
.door-no{font-family:var(--f-en);font-weight:500;font-size:.75rem;letter-spacing:.3em;color:var(--grey);text-transform:uppercase;margin-bottom:10px;}
.dp-title{font-size:1.8rem;font-weight:700;letter-spacing:.06em;line-height:1.5;}
.dp-title .em{position:relative;z-index:0;}
/* 見出しのマーカー：地がタブ色の面なので、同化しないよう他タブの色を使う。
   色そのものはブランドパステルのまま（透過も彩度調整も入れない）。 */
.dp-title .em::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:10px;z-index:-1;
  background:var(--accent-a);transform:skewX(-10deg);
}
.dp-lead{max-width:42.5rem;margin:16px auto 0;font-size:.98rem;line-height:1.95;color:#4c4a46;}
/* ブロック */
.dp-block{margin-bottom:40px;}
.dp-block:last-of-type{margin-bottom:0;}
/* 小見出しピル：地がタブ色の面なので、同化しないよう他タブの色を使う */
.dp-pill{display:block;width:fit-content;margin:0 auto 26px;background:var(--accent-a);color:var(--ink);font-weight:700;font-size:1.02rem;letter-spacing:.06em;padding:9px 30px;border:1px solid var(--ink);}
/* カード3列。枠は黒罫線で囲み、色は左上に置くパステルのバーで示す
   （上辺だけをタブ色の太線にすると、地がタブ色の面のときに同化して見えなくなるため）。 */
.dp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.dp-card{position:relative;background:var(--white);border:1px solid var(--ink);padding:26px 22px;text-align:center;}
.dp-card::before{content:"";position:absolute;top:-1px;left:-1px;width:52px;height:12px;mix-blend-mode:multiply;}
.dp-card:nth-child(1)::before{background:var(--pink);}
.dp-card:nth-child(2)::before{background:var(--blue);}
.dp-card:nth-child(3)::before{background:var(--yellow);}
.dp-ico{display:inline-flex;width:44px;height:44px;color:var(--ink);margin-bottom:12px;}
.dp-card h4{font-size:1.05rem;font-weight:700;letter-spacing:.03em;margin-bottom:10px;line-height:1.6;}
.dp-card h4:last-child{margin-bottom:0;}
.dp-card p{font-size:.88rem;color:#4c4a46;line-height:1.85;}
/* 数字（採用タブ） */
.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);max-width:41.25rem;margin:0 auto;}
.dp-stat{background:var(--white);padding:20px 12px;text-align:center;}
.dp-stat .n{display:block;font-family:var(--f-en);font-weight:600;font-size:2rem;line-height:1;color:var(--ink);}
.dp-stat .n small{font-size:.9rem;margin-left:2px;}
.dp-stat .l{display:block;font-size:.78rem;color:var(--grey);margin-top:8px;}
/* 信頼テキスト（事業者タブ） */
.dp-trust{text-align:center;font-size:.96rem;line-height:1.95;color:#4c4a46;max-width:45rem;margin:0 auto;}
.dp-trust b{color:var(--tab-ink);font-weight:700;}
/* フット：クイックリンク＋CTA */
.dp-foot{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line);align-items:center;}
.dp-links a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 6px;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:500;}
.dp-links a:first-child{border-top:1px solid var(--ink);}
.dp-links a::after{content:"→";font-family:var(--f-en);color:var(--tab-ink);flex-shrink:0;transition:transform .2s ease;}
.dp-links a:hover{background:rgba(255,255,255,.6);}
.dp-links a:hover::after{transform:translateX(5px);}
.dp-cta{text-align:center;}
.dp-cta__note{font-weight:700;font-size:1rem;letter-spacing:.04em;margin-bottom:16px;}
/* CTAボタンも地がタブ色の面なので、同化しないよう他タブの色を使う
   （強調は色ではなく #303030 の枠線で行う＝デザインルール） */
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:21.25rem;padding:16px 24px;background:var(--accent-a);border:1px solid var(--ink);font-weight:700;font-size:1rem;letter-spacing:.06em;box-shadow:var(--shadow-hard);transition:transform .15s ease,box-shadow .15s ease;}
.dp-btn:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-hard-hover);}
.dp-btn .arrow{font-family:var(--f-en);}
.dp-tel{display:inline-block;font-family:var(--f-en);font-weight:600;font-size:1.5rem;letter-spacing:.04em;margin-top:16px;color:var(--ink);}
.dp-tel__note{display:block;font-size:.78rem;color:var(--grey);margin-top:2px;}

/* ---------- どのような仕事か（採用タブ） ---------- */
.jobkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
/* 枠は黒罫線で囲み、色は左上のパステルバーで示す（.dp-card と同じ扱い） */
.jobkind{
  position:relative;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--ink);background:var(--white);padding:26px 22px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.jobkind::before{content:"";position:absolute;top:-1px;left:-1px;width:52px;height:12px;mix-blend-mode:multiply;}
.jobkind:nth-child(1)::before{background:var(--pink);}
.jobkind:nth-child(2)::before{background:var(--blue);}
.jobkind:nth-child(3)::before{background:var(--yellow);}
.jobkind:nth-child(4)::before{background:var(--pink);}
/* 2026-08-10：カードはリンクではなくなったので、押せそうに見えるホバーは付けない。 */
/* 職種は人物のイラスト。小さいと顔がつぶれて粗く見えるので、カード幅いっぱいに近い大きさで出す。 */
.jobkind__ico{display:block;width:min(220px,72%);margin:0 auto 4px;color:var(--ink);}
.jobkind__ico .ci{width:100%;height:auto;}
.jobkind__name{font-size:1.08rem;font-weight:700;letter-spacing:.04em;}
.jobkind__catch{font-size:.92rem;font-weight:700;line-height:1.8;}
.jobkind__text{font-size:.86rem;color:#4c4a46;line-height:1.85;}
@media (max-width:860px){
  .dp-cards{grid-template-columns:1fr;max-width:27.5rem;margin:0 auto;}
  .dp-foot{grid-template-columns:1fr;gap:34px;}
  .dp-title{font-size:1.55rem;}
}
/* スマホでもタブは**左右に並べる**（2026-08-07 決定）。
   縦積みにするとタブに見えず、ページ全体が切り替わることが伝わらないため。
   幅が足りないので、英字ラベルとシェブロンを外して日本語だけを詰めて入れる。 */
@media (max-width:560px){
  .door-tabs{padding:16px 12px 0;}
  .door-tab{padding:12px 8px;gap:3px;min-height:70px;}
  .door-tab__chev{display:none;}
  .door-tab__en{font-size:.58rem;letter-spacing:.12em;}
  .door-tab__ja{font-size:.88rem;letter-spacing:0;line-height:1.45;}
  .door-tab:not([aria-selected="true"]):hover{min-height:78px;}
  .door-tab[aria-selected="true"]{min-height:88px;}
  .dp-wrap{padding-top:40px;padding-bottom:48px;}
  .dp-title{font-size:1.35rem;}
  .dp-stats{grid-template-columns:1fr;}
  .dp-btn{max-width:none;}
}
@media (max-width:390px){
  .door-tabs{padding:14px 8px 0;}
  .door-tab{padding:11px 5px;}
  .door-tab__en{display:none;}
  .door-tab__ja{font-size:.83rem;}
}
@media (prefers-reduced-motion: reduce){
  .door-tab,.dp-btn,.dp-links a::after{transition:none;}
}

/* ---------- コノヒカラとは ---------- */
.about{background:var(--white);position:relative;overflow:hidden;}
.about-bars{position:absolute;inset:0;pointer-events:none;}
.about-bars i{position:absolute;mix-blend-mode:multiply;}
.about-bars i:nth-child(1){width:200px;height:46px;left:-60px;top:14%;background:var(--blue);transform:rotate(-32deg);}
.about-bars i:nth-child(2){width:170px;height:46px;left:-70px;top:22%;background:var(--yellow);transform:rotate(-32deg);}
.about-bars i:nth-child(3){width:200px;height:46px;right:-60px;bottom:16%;background:var(--pink);transform:rotate(-32deg);}
.about-bars i:nth-child(4){width:160px;height:46px;right:-80px;bottom:8%;background:var(--blue);transform:rotate(-32deg);}
.about-poem{
  text-align:center;font-weight:500;position:relative;
  font-size:clamp(.98rem,2vw,1.12rem);line-height:2.7;letter-spacing:.1em;
}
.about-poem strong{
  display:block;font-size:clamp(1.5rem,3vw,1.95rem);font-weight:700;
  margin-bottom:40px;letter-spacing:.16em;
}
.about-poem strong .mark{background:linear-gradient(transparent 70%,var(--pink) 70%);padding:0 .08em;}
.about .btn-ghost{display:table;margin:48px auto 0;position:relative;}

/* ---------- 大切にしていること ---------- */
.values-sentence{
  text-align:center;font-weight:700;
  font-size:clamp(1.25rem,3vw,1.8rem);line-height:2.2;letter-spacing:.1em;
  max-width:27em;margin:0 auto 68px;
}
.values-sentence .comma{color:var(--pink-ink);}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value-card{
  background:var(--white);border:1px solid var(--ink);padding:36px 30px;position:relative;
}
.value-card::before{
  content:"";position:absolute;top:-1px;left:-1px;width:52px;height:12px;
  mix-blend-mode:multiply;transform-origin:left top;
}
.value-card:nth-child(1)::before{background:var(--pink);}
.value-card:nth-child(2)::before{background:var(--yellow);}
.value-card:nth-child(3)::before{background:var(--blue);}
.value-card .num{
  font-family:var(--f-en);font-weight:400;font-size:2rem;line-height:1;
  color:var(--grey);letter-spacing:.06em;display:block;margin-bottom:14px;
}
.value-card h3{font-size:1.15rem;font-weight:700;margin-bottom:16px;letter-spacing:.08em;}
.value-card li{
  position:relative;padding-left:1.2em;font-size:.9rem;color:#4c4a46;margin-bottom:9px;line-height:1.85;
}
.value-card li::before{
  content:"";position:absolute;left:0;top:.75em;width:8px;height:4px;background:var(--line);
  transform:skewX(-18deg);
}

/* ---------- 運営施設（事業所単位 → /facilities/#office-{slug} へ渡す） ----------
   2026-08-07：エリア別集約から事業所別に変更。写真が主役になったので、
   旧 .fac-area*（CSSで描いたエリア別プレースホルダー）は廃止した。 */
.facility{background:var(--white);}
.sec-head .section-lead{margin-bottom:0;margin-top:18px;}
/* 事業所数は可変（CPTのterm数）。auto-fit で3〜6事業所のどれでも成立させる */
/* ⚠️ クラス名に .fac-office を使わないこと。運営施設のご紹介ページ側で
   「1事業所＝1ブロック」の `.fac-office`（`.fac-office + .fac-office{margin-top:44px}` を持つ）に
   すでに使っており、名前が衝突すると2枚目以降のカードが44pxずつ下がる（実際に踏んだ）。 */
/* 5事業所が横一列に収まる下限にしてある（4＋1 で最後の1枚だけ次の行に残ると寂しいため）。
   事業所が増えたら auto-fit が自動で折り返す。 */
.fac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px;}
.fac-card{
  display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--bg);color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease;
}
.fac-card:hover,.fac-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);}
.fac-card__photo{
  display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--ink);background:#f1efeb center/cover no-repeat;
}
/* 写真が無い事業所は、ロゴのバー言語でプレースホルダーを出す */
.fac-card__photo.is-empty{display:flex;align-items:center;justify-content:center;}
.fac-card__body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1;}
/* 事業所名は1〜3行と長さがバラつく。名前の下に余白を逃がして、
   「区・ユニット数」と「この事業所を見る」はカード下端に揃える（カード高さは揃うので位置が一致する）。 */
.fac-card__name{font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1.55;}
.fac-card__meta{
  margin-top:auto;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:.88rem;color:#4c4a46;
}
.fac-card__area{font-weight:700;padding:2px 10px;background:var(--white);border:1px solid var(--ink);font-size:.78rem;}
.fac-card__count strong{font-family:var(--f-en);font-size:1.5rem;font-weight:500;margin-right:3px;}
/* 特大モードで文言が折り返しても矢印が置き去りにならないよう、矢印は文の流れに乗せる */
.fac-card__more{
  padding-top:10px;font-size:.82rem;font-weight:700;color:var(--blue-ink);
  display:block;
}
.fac-card__more .arrow{
  font-family:var(--f-en);display:inline-block;margin-left:5px;
  transition:transform .2s ease;
}
.fac-card:hover .fac-card__more .arrow{transform:translateX(4px);}
.fac-all{text-align:center;margin-top:34px;}
.fac-note{text-align:center;font-size:.85rem;color:var(--grey);margin-top:20px;}

/* ---------- 数字で見る ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{
  text-align:center;background:var(--white);border:1px solid var(--ink);padding:38px 16px 32px;
  position:relative;
}
.stat::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%) skewX(-18deg);
  width:44px;height:6px;mix-blend-mode:multiply;
}
.stat:nth-child(1)::after{background:var(--pink);}
.stat:nth-child(2)::after{background:var(--blue);}
.stat:nth-child(3)::after{background:var(--yellow);}
.stat:nth-child(4)::after{background:var(--grey-light);}
/* 数字と単位は必ず同じ行に置く（狭い幅で「22ユニ／ット」と割れていた） */
.stat .n{font-family:var(--f-en);font-weight:400;font-size:3rem;line-height:1.1;letter-spacing:.02em;white-space:nowrap;}
.stat .n small{font-family:var(--f-jp);font-size:1rem;font-weight:700;margin-left:4px;}
.stat .l{font-size:.88rem;font-weight:500;margin-top:10px;color:#5a5854;}
.stats .note{text-align:center;font-size:.78rem;color:var(--grey);margin-top:20px;}

/* ---------- ご入居までの流れ ---------- */
.flow{background:var(--white);}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step;}
.flow-step{
  position:relative;text-align:center;background:var(--bg);
  border:1px solid var(--ink);padding:32px 12px 26px;
}
/* 番号は「何番目か」を示すだけの補助。アイコンが入ったら主役はそちらなので、
   左上に小さく逃がして高さを取らない（2026-08-06 変更）。 */
.flow-step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--f-en);font-weight:400;font-size:1.4rem;color:var(--grey);
  display:block;margin-bottom:10px;letter-spacing:.06em;
}
.flow-step--ico::before{
  position:absolute;top:9px;left:12px;margin:0;font-size:.86rem;
}
.flow-step__ico{display:block;width:42px;height:42px;margin:0 auto 12px;color:var(--ink);}
.flow-step::after{
  content:"→";font-family:var(--f-en);position:absolute;right:-15px;top:50%;
  transform:translateY(-50%);color:var(--grey);z-index:1;
}
.flow-step:last-child::after{display:none;}
.flow-step h3{font-size:.98rem;font-weight:700;letter-spacing:.05em;}
.flow-step p{font-size:.78rem;color:var(--grey);margin-top:6px;line-height:1.75;}
.flow-ctas{display:flex;gap:16px;justify-content:center;margin-top:52px;flex-wrap:wrap;}

/* ---------- 声 ---------- */
.voices-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.voice-card{
  background:var(--white);border:1px solid var(--ink);padding:34px 32px 30px;position:relative;
}
.voice-tag{
  position:absolute;top:-11px;left:22px;font-size:.7rem;font-weight:700;
  padding:2px 16px;background:var(--grey-light);letter-spacing:.08em;
  transform:skewX(-12deg);
}
.voice-tag span{display:inline-block;transform:skewX(12deg);}
.voice-card.is-staff .voice-tag{background:var(--yellow);}
.voice-card.is-resident .voice-tag{background:var(--pink);}
.voice-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.voice-avatar{
  width:50px;height:50px;flex-shrink:0;border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-en);font-weight:500;font-size:1.05rem;background:var(--grey-light);
}
.voice-card.is-resident:nth-child(1) .voice-avatar{background:var(--pink);}
.voice-card.is-resident:nth-child(2) .voice-avatar{background:var(--blue);}
.voice-card.is-staff .voice-avatar{background:var(--yellow);}
/* メイン画像がある記事は顔写真をアバター枠にはめる（無ければ頭文字のまま） */
.voice-avatar.is-photo{padding:0;overflow:hidden;background:var(--grey-light);}
.voice-avatar.is-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.voice-meta .name{font-weight:700;font-size:.98rem;}
.voice-meta .sub{font-size:.78rem;color:var(--grey);}
.voice-card p{font-size:.92rem;color:#4c4a46;}
/* ※「お話を読む」リンク（.voice-more）は 2026-08-07 に廃止。
   声が独立した投稿タイプになり、1件ずつのページを持たなくなったため。 */

/* ---------- 記事 ---------- */
.articles{background:var(--white);}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.article-card{
  border:1px solid var(--ink);background:var(--bg);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);border-color:var(--ink);}
.article-photo{
  height:170px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--grey);letter-spacing:.12em;background:var(--grey-light);
}
.article-photo::after{
  content:"";position:absolute;left:-26px;top:-14px;width:100px;height:26px;
  mix-blend-mode:multiply;transform:rotate(-32deg);
}
.article-card:nth-child(1) .article-photo::after{background:var(--yellow);}
.article-card:nth-child(2) .article-photo::after{background:var(--blue);}
.article-card:nth-child(3) .article-photo::after{background:var(--pink);}
.article-body{padding:24px 22px;display:flex;flex-direction:column;flex:1;}
.article-body h3{font-size:1rem;font-weight:700;line-height:1.75;letter-spacing:.04em;}
.article-body p{
  font-size:.85rem;color:#5a5854;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.article-body time{
  font-family:var(--f-en);font-size:.75rem;color:var(--grey);
  margin-top:auto;padding-top:16px;display:block;letter-spacing:.08em;
}
.center-btn{text-align:center;margin-top:52px;}

/* ---------- 採用 ---------- */
.recruit-lead{text-align:center;max-width:38em;margin:-28px auto 46px;color:#5a5854;font-size:.95rem;}
.recruit-filter{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:38px;}
.filter-btn{
  border:1px solid var(--ink);background:var(--white);
  padding:8px 20px;font-family:var(--f-jp);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:background .2s;color:var(--ink);letter-spacing:.04em;
}
.filter-btn:hover{background:var(--grey-light);}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.job-card{
  background:var(--white);border:1px solid var(--ink);
  transition:transform .2s ease,box-shadow .2s ease;
}
.job-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);border-color:var(--ink);}
.job-card.hidden{display:none;}
.job-photo{
  height:110px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--grey);letter-spacing:.12em;background:var(--grey-light);
}
.job-photo::after{
  content:"";position:absolute;right:-26px;bottom:-14px;width:96px;height:24px;
  mix-blend-mode:multiply;transform:rotate(-32deg);
}
.job-photo.p1::after{background:var(--blue);}
.job-photo.p2::after{background:var(--yellow);}
.job-photo.p3::after{background:var(--pink);}
.job-body{padding:20px;}
.job-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.job-tag{font-size:.68rem;font-weight:700;padding:2px 10px;background:var(--grey-light);}
.job-tag.area{background:var(--blue);}
.job-body h3{font-size:.98rem;font-weight:700;line-height:1.75;letter-spacing:.03em;}
.job-body .cond{font-size:.8rem;color:var(--grey);margin-top:8px;}
.jobs-empty{display:none;text-align:center;color:var(--grey);font-size:.9rem;padding:40px 0;}
.jobs-empty.show{display:block;}

/* ---------- TOP採用タブ：職種一覧（写真を使わず、イラスト＋1行の条件） ---------- */
.joblist{display:flex;flex-direction:column;gap:-1px;max-width:51.25rem;margin:0 auto;}
.joblist__item{
  display:flex;align-items:center;gap:18px;
  border:1px solid var(--ink);background:var(--white);padding:18px 22px;margin-bottom:-1px;
  transition:background .2s ease;
}
.joblist__item:hover{background:var(--white);}
.joblist__ico{flex:0 0 40px;width:40px;height:40px;}
.joblist__ico .ci{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;}
.joblist__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.joblist__name{font-size:1.02rem;font-weight:700;letter-spacing:.04em;}
.joblist__cond{font-size:.8rem;color:#5a5854;line-height:1.7;}
.joblist__arrow{font-family:var(--f-en);color:var(--pink-ink);flex:0 0 auto;transition:transform .2s ease;}
.joblist__item:hover .joblist__arrow{transform:translateX(5px);}
@media (max-width:560px){
  .joblist__item{align-items:flex-start;gap:14px;padding:16px 16px;}
}

/* ---------- FAQ ---------- */
.faq{background:var(--white);}
.faq-list{max-width:51.25rem;margin:0 auto;}
.faq-item{border:1px solid var(--ink);margin-bottom:-1px;background:var(--bg);}
.faq-q{
  width:100%;display:flex;align-items:center;gap:18px;text-align:left;
  background:none;border:none;font-family:var(--f-jp);font-size:.98rem;font-weight:700;
  color:var(--ink);padding:22px 24px;cursor:pointer;line-height:1.7;letter-spacing:.04em;
}
.faq-q .q-mark{
  flex-shrink:0;font-family:var(--f-en);font-weight:500;font-size:1.15rem;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--blue);
}
.faq-q .toggle{
  margin-left:auto;flex-shrink:0;font-family:var(--f-en);font-size:1.3rem;font-weight:400;
  color:var(--grey);transition:transform .25s;
}
.faq-item.open .toggle{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-inner{padding:0 24px 24px 76px;font-size:.92rem;color:#4c4a46;}

/* ---------- お問い合わせ ---------- */
.contact{text-align:center;position:relative;overflow:hidden;}
.contact-bars{position:absolute;inset:0;pointer-events:none;}
.contact-bars i{position:absolute;mix-blend-mode:multiply;}
.contact-bars i:nth-child(1){width:240px;height:54px;left:-70px;bottom:18%;background:var(--pink);transform:rotate(-32deg);}
.contact-bars i:nth-child(2){width:200px;height:54px;left:-90px;bottom:34%;background:var(--blue);transform:rotate(-32deg);}
.contact-bars i:nth-child(3){width:240px;height:54px;right:-70px;top:22%;background:var(--yellow);transform:rotate(-32deg);}
.contact-bars i:nth-child(4){width:190px;height:54px;right:-90px;top:38%;background:var(--pink);transform:rotate(-32deg);}
/* 問い合わせは電話が最優先（2026-08-05 決定）。
   電話番号をこのセクションで一番大きい要素にし、枠と面で「押せる」ことを明示する。
   フォームのボタンは同じ幅感の従属CTAとして下に置く。 */
.contact .tel,.tel-hero .tel{
  font-family:var(--f-en);font-weight:500;font-size:clamp(2.4rem,6.4vw,4rem);
  letter-spacing:.06em;line-height:1.15;margin:22px 0 0;position:relative;
  display:inline-block;padding:.22em .5em .26em;
  background:var(--pink);border:1px solid var(--ink);box-shadow:var(--shadow-hard);
  transition:transform .2s ease,box-shadow .2s ease;
}
.contact .tel:hover,.tel-hero .tel:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);}
.contact .tel-note,.tel-hero .tel-note{font-size:.9rem;font-weight:700;color:var(--ink);position:relative;margin-top:12px;}
/* 入居のご相談ページ：ページ名のすぐ下に電話番号を大きく出す（2026-08-10）。
   .contact の外にあるため、上の .contact .tel と同じ見た目を共有させている。 */
.tel-hero{text-align:center;}
.tel-hero__label{
  font-weight:700;font-size:.95rem;letter-spacing:.08em;color:var(--ink);margin:0;
}
.contact-ctas{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap;position:relative;}
.contact-ctas .btn{min-width:270px;}

/* ---------- フッター ---------- */
.footer{background:var(--grey-light);border-top:1px solid var(--ink);padding:76px 0 130px;font-size:.88rem;}
.footer-top{display:flex;justify-content:space-between;gap:40px 56px;flex-wrap:wrap;margin-bottom:56px;}
.footer-brand{flex:0 0 auto;max-width:21.25rem;}
.footer-brand .logo{margin-bottom:18px;}
.footer-brand address{font-style:normal;color:#5a5854;line-height:2;font-size:.84rem;}
/* 電話は押せるものとして大きめに出す（問い合わせは電話が最優先） */
.footer-tel{margin:16px 0 4px;line-height:1.2;}
.footer-tel a{font-family:var(--f-en);font-weight:500;font-size:1.6rem;letter-spacing:.04em;color:var(--ink);}
.footer-tel a:hover{text-decoration:underline;text-underline-offset:4px;}
.footer-tel__note{display:block;font-size:.76rem;color:var(--grey);margin-top:6px;}
.footer-mail{margin:0 0 20px;font-size:.84rem;}
.footer-mail a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;}
.footer-cta .btn{width:100%;max-width:17.5rem;}
.footer-sns{display:flex;gap:10px;margin-top:20px;}
.footer-sns a{
  width:38px;height:38px;background:var(--white);border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-en);font-size:.68rem;font-weight:500;color:#5a5854;letter-spacing:.05em;
}
.footer-sns a:hover{background:var(--blue);border-color:var(--ink);}
/* 見出しは日本語（ヘッダーの言葉に合わせる）。英字の字間設定は使わない。 */
.footer-nav{display:flex;gap:20px 40px;flex-wrap:wrap;flex:1 1 auto;justify-content:flex-end;}
.footer-nav > div{min-width:132px;}
.footer-nav h3{
  font-size:.86rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--ink);position:relative;
}
.footer-nav h3::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:var(--pink);}
.footer-nav > div:nth-child(2) h3::after{background:var(--blue);}
.footer-nav > div:nth-child(3) h3::after{background:var(--yellow);}
.footer-nav li{margin-bottom:9px;line-height:1.6;}
.footer-nav a{color:#4c4a46;font-size:.84rem;}
.footer-nav a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:4px;}
@media (max-width:900px){
  .footer-brand{max-width:none;}
  .footer-nav{gap:24px 36px;}
  .footer-nav > div{min-width:140px;flex:1 1 40%;}
}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:26px;display:flex;
  align-items:center;gap:10px 22px;flex-wrap:wrap;color:var(--grey);font-size:.8rem;
}
.footer-bottom .en{font-family:var(--f-en);letter-spacing:.1em;}
.footer-bottom__link{color:var(--grey);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom__link:hover{color:var(--blue-ink);}
/* キャッチだけ右端に寄せる（著作権表示とポリシーは左にまとめる） */
.footer-bottom__tag{margin-left:auto;}
@media (max-width:640px){.footer-bottom__tag{margin-left:0;}}

/* ---------- スマホ固定CTA ---------- */
.mobile-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:110;
  background:var(--white);
  /* 電話が最優先なので、電話の枠を広くとる（2026-08-05 決定）。
     2026-08-10 に3項目→2項目にしたので、列も2つ。 */
  grid-template-columns:1.15fr 1fr;
}
/* ボタン1つずつを枠線で囲って区切りを明確にする（面が隣り合うだけだと押せる範囲が分かりにくい）。
   隙間は作らず、隣り合う枠線どうしを1pxぶん重ねて1本の区切り線に見せる。 */
.mobile-cta a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:11px 4px;font-size:.72rem;font-weight:700;text-align:center;line-height:1.3;
  border:1px solid var(--ink);margin:0;
}
.mobile-cta a + a{margin-left:-1px;}
/* 2026-08-06：英字テキスト（Tel / Visit / Mail）からアイコンに変更。 */
.mobile-cta .m-ico{display:block;width:20px;height:20px;}
/* 電話を主役（ピンク）にし、フォームは従属（ブルー）に降ろす。 */
.mobile-cta .m-tel{background:var(--pink);font-size:.78rem;}
.mobile-cta .m-tour{background:var(--blue);}


/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){
  .gnav{display:none;}
  .menu-btn{
    display:block;margin-left:auto;border:1px solid var(--ink);background:var(--white);
    padding:10px 16px;font-family:var(--f-en);font-weight:500;letter-spacing:.15em;
    font-size:.78rem;cursor:pointer;color:var(--ink);
  }
  .header-ctas{display:none;}
  /* .gnav.open の見た目は基準CSS側に集約（閾値ごとの重複を避けるため） */
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  /* ヘッダーCTAが隠れる幅（=ハンバーガーに切り替わる幅）から固定CTAを出す。
     これが無いと641〜1024pxでCTAボタンがどこにも無い状態になる。 */
  .mobile-cta{display:grid;}
  body{padding-bottom:68px;}
  .door-panel__inner{grid-template-columns:1fr;gap:26px;padding:30px 24px 28px;}
  .door-tab{padding:13px 8px 12px;}
  .door-tab__ja{font-size:.9rem;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:340px;}
  .flow-steps{grid-template-columns:1fr;gap:28px;}
  .flow-step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%);}
  .voices-grid{grid-template-columns:1fr;}
  .articles-grid,.jobs-grid{grid-template-columns:1fr;}
  /* 3列のまま狭い幅に入ると、カード内の文字が1文字ずつ縦に折り返して崩れる */
  .values-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .section{padding:76px 0;}
  .hero{padding:68px 0 92px;}
  .faq-a-inner{padding-left:24px;}
  .contact-ctas .btn{min-width:100%;}
  /* 数字は2列だとラベル（対応エリアの区名など）が折り返して読みにくい。1枚ずつ縦に並べる。 */
  .stats-grid{grid-template-columns:1fr;max-width:26.25rem;margin-inline:auto;}
}

/* ============================================================
   下層ページ共通コンポーネント
   （パンくず／ページヒーロー／2列カード／フォームなど。TOPのトークンを再利用）
   ============================================================ */
/* 下層ページの面のリズム（2026-08-06 改定）：
   使う色は「背景色 #fffdfa」と「薄いピンク（ブランドピンク #FDD7E1 の30%）」の2つだけ。
   - **必ず背景色（白）から始める。**
   - **1つおきの機械的な交互にしない。** 白白／ピンクピンクの塊をつくって読みのリズムを出す
     （内容のまとまりと面のまとまりを一致させる。例：支援内容＋対象となる方＝ひと続きのピンク）。
   - 面が変わるので、上に載るカード類は常に白のままにして地と分ける。
   実際の並びは各ページのテンプレート冒頭のコメントに書いてある。
   ※旧クラス名は .pt-white（白い面）だったが、意味が変わったので改名した。
   ※旧 .alt-sections（描画順で自動交互）は、リズムを手で決める方針にしたため廃止した。 */
.section-tint{background:rgba(253,215,225,.3);}
.pt-note{text-align:center;font-size:.8rem;color:var(--grey);margin-top:22px;}

/* パンくず */
.crumbs{border-bottom:1px solid var(--line);}
.crumbs .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:14px;font-size:.78rem;color:var(--grey);letter-spacing:.04em;}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;}
.crumbs .sep{color:var(--line);}

/* ページヒーローの見出し（面そのものは .page-hero） */
.ph-eyebrow{font-family:var(--f-en);font-weight:500;font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--pink-ink);}
.ph-title{font-weight:700;font-size:clamp(1.7rem,3.8vw,2.5rem);letter-spacing:.1em;line-height:1.7;margin:14px 0 20px;}
.ph-lead{max-width:38em;margin:0 auto 30px;font-size:.98rem;color:#4c4a46;}
.ph-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* 募集条件（定義リスト） */
.cond-list{max-width:51.25rem;margin:0 auto;border-top:1px solid var(--ink);}
.cond-list dl{display:flex;gap:20px;border-bottom:1px solid var(--line);padding:18px 6px;margin:0;}
.cond-list dt{flex:0 0 160px;font-weight:700;font-size:.92rem;letter-spacing:.04em;}
.cond-list dd{margin:0;font-size:.92rem;color:#4c4a46;}
.cond-note{max-width:51.25rem;margin:22px auto 0;font-size:.85rem;color:var(--grey);text-align:center;}

/* サポート体制（2列カード：左上に色バー） */
.pt-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.pt-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.pt-card{border:1px solid var(--ink);background:var(--white);padding:30px 28px;position:relative;}
.pt-card::before{content:"";position:absolute;top:-1px;left:-1px;width:52px;height:12px;mix-blend-mode:multiply;}
.pt-card:nth-child(1)::before{background:var(--pink);}
.pt-card:nth-child(2)::before{background:var(--blue);}
.pt-card:nth-child(3)::before{background:var(--yellow);}
.pt-card:nth-child(4)::before{background:var(--pink);}
.pt-card h3{font-size:1.08rem;font-weight:700;letter-spacing:.06em;margin-bottom:12px;}
.pt-card p{font-size:.9rem;color:#4c4a46;}

/* 導入フロー4列 */
.flow-steps.cols-4{grid-template-columns:repeat(4,1fr);}

@media (max-width:1024px){
  .pt-grid2{grid-template-columns:1fr;}
  .flow-steps.cols-4{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .cond-list dl{flex-direction:column;gap:4px;}
  .cond-list dt{flex-basis:auto;}
}
/* フォーム設置予定スロット（暫定表示。フォーム実装後に置換） */
.form-slot{border:1px dashed var(--ink);background:var(--white);padding:26px 24px;max-width:37.5rem;margin:0 auto 30px;text-align:center;}
.form-slot p{font-size:.92rem;}
.form-slot__sub{font-size:.82rem;color:var(--grey);margin-top:8px;}

/* 埋め込みフォーム（Snow Monkey Forms 上書き）：左揃え・コンパクト・ラベル上スタック */
/* ハニーポット（人には見せない入力欄）。
   display:none だと埋めないボットがいるので、画面外へ逃がして読み上げからも外す。 */
.kh-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-block{max-width:35rem;margin:0 auto;text-align:left;}
.form-block .smf-item{display:block;margin:0 0 14px;padding:0;border:none;background:none;}
.form-block .smf-item__label{display:block;width:auto;margin:0 0 5px;padding:0;}
.form-block .smf-item__label__text{font-size:.85rem;font-weight:700;letter-spacing:.03em;line-height:1.6;}
.form-block .smf-item__controls{display:block;width:auto;padding:0;}
.form-block input[type="text"],
.form-block input[type="email"],
.form-block input[type="tel"],
.form-block select,
.form-block textarea{
  width:100%;font-family:var(--f-jp);font-size:.9rem;color:var(--ink);
  padding:8px 11px;border:1px solid var(--ink);background:var(--white);
  line-height:1.7;letter-spacing:.02em;border-radius:0;
}
.form-block textarea{min-height:190px;resize:vertical;line-height:1.8;}
.form-block .smf-action{margin-top:18px;text-align:left;display:flex;gap:12px;flex-wrap:wrap;}
.form-block .smf-action button,
.form-block .smf-action input[type="submit"],
.form-block .smf-action input[type="button"]{
  font-family:var(--f-jp);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  padding:.75em 2em;border:1px solid var(--ink);background:var(--pink);color:var(--ink);
  cursor:pointer;border-radius:0;transition:background .2s ease;
}
.form-block .smf-action button:hover,
.form-block .smf-action input[type="submit"]:hover{background:#fcc9d8;}
/* 電話補足（フォーム下） */
.form-tel-note{text-align:center;font-size:.85rem;color:var(--grey);margin:26px 0 6px;}

/* ?facility= で受け取った見学対象ホームの提示（フォーム上・.contact は中央寄せなので左揃えに戻す） */
.contact-preset{
  max-width:35rem;margin:0 auto 26px;text-align:left;position:relative;
  border:1px solid var(--ink);background:var(--pink);padding:16px 20px;
}
.contact-preset__label{font-size:.78rem;font-weight:700;letter-spacing:.08em;color:#5a5854;}
.contact-preset__name{font-size:1.08rem;font-weight:700;letter-spacing:.04em;margin-top:4px;}
.contact-preset__name a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.contact-preset__area{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-left:8px;vertical-align:2px;
  padding:2px 9px;background:var(--white);border:1px solid var(--ink);
}
.contact-preset__note{font-size:.8rem;line-height:1.8;color:#4c4a46;margin-top:8px;}

/* ============================================================
   よくある質問ページ / page-faq.php
   （.faq-* / .area-nav / .sec-head / .contact を再利用。差分のみ）
   ============================================================ */
.faq-cat{scroll-margin-top:96px;}
.faq-cat + .faq-cat{margin-top:60px;}
.faq-cat .sec-head{margin-bottom:24px;}
.faq-a-inner a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}

/* ============================================================
   採用トップ / page-recruit.php
   （.recruit-filter / .jobs-grid / .job-card / .stats / .flow / .form-block を再利用。差分のみ）
   ============================================================ */
#apply{scroll-margin-top:90px;}
/* --- 募集職種の比較（3職種を横並び・クリック不要でその場で読める） ---
   2026-08-05 決定：職種ごとの個別ページを作らないため、ここに全情報を出す。
   3枚が同じ行構成で並ぶので、上から順に見ていくと項目どうしを比較できる。 */
.jobs-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.jobc{
  border:1px solid var(--ink);background:var(--white);padding:28px 24px 24px;
  position:relative;display:flex;flex-direction:column;height:100%;scroll-margin-top:96px;
}
/* 左上のパステルバー（施設カードと同じ言語。ピンク→ブルー→イエローで巡回） */
.jobc::before{content:"";position:absolute;top:-1px;left:-1px;width:52px;height:12px;mix-blend-mode:multiply;}
.jobc:nth-child(1)::before{background:var(--pink);}
.jobc:nth-child(2)::before{background:var(--blue);}
.jobc:nth-child(3)::before{background:var(--yellow);}
.jobc__head{text-align:center;padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:16px;}
/* 写真ではなくイラスト。2026-08-10 に線画から人物のイラストへ差し替えたので、
   小さいアイコンの箱から「顔がはっきり見える大きさ」に広げてある（TOPの .jobkind__ico と同じ考え方）。 */
.jobc__ico{display:block;margin:0 auto 6px;width:min(240px,80%);height:auto;}
.jobc__ico .ci{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;}
.jobc__en{
  display:block;font-family:var(--f-en);font-weight:500;font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey);
}
.jobc__name{font-size:1.12rem;font-weight:700;letter-spacing:.05em;line-height:1.6;margin-top:5px;}
.jobc__catch{font-size:.88rem;line-height:1.9;color:#4c4a46;margin-bottom:18px;}
.jobc__sub{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#5a5854;
  padding-bottom:5px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.jobc__work{list-style:none;margin:0 0 18px;padding:0;}
.jobc__work li{position:relative;padding:4px 0 4px 18px;font-size:.85rem;line-height:1.75;}
.jobc__work li::before{
  content:"";position:absolute;left:0;top:.85em;width:8px;height:2px;background:var(--ink);
}
.jobc__spec{margin:0 0 22px;}
.jobc__spec > div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);}
.jobc__spec > div:last-child{border-bottom:none;}
.jobc__spec dt{flex:0 0 4.2em;font-size:.76rem;font-weight:700;color:var(--grey);margin:0;padding-top:2px;}
.jobc__spec dd{margin:0;font-size:.85rem;line-height:1.7;color:#4c4a46;}
/* 給与はいちばん知りたい条件なので、この行だけ本文色＋太字にして視線を止める。
   色は増やさない（デザインルール）。強調は太さと濃さだけで付ける。 */
.jobc__spec > div.is-pay dd{font-weight:700;color:var(--ink);}

/* 3職種に共通の待遇。カード3枚に同じ文言を書かず、下に1回だけ出す（2026-08-07 追加）。 */
.benefits{
  margin-top:36px;border:1px solid var(--ink);background:var(--white);padding:24px 26px;
}
.benefits__title{
  margin:0 0 16px;font-size:1rem;font-weight:700;letter-spacing:.02em;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.benefits__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;}
.benefits__list > div{padding:0 22px;border-left:1px solid var(--line);}
.benefits__list > div:first-child{padding-left:0;border-left:none;}
.benefits__list > div:last-child{padding-right:0;}
.benefits__list dt{
  margin:0 0 6px;font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--grey);
}
.benefits__list dd{margin:0;font-size:.9rem;line-height:1.75;}
@media (max-width:860px){
  .benefits{padding:20px;}
  .benefits__list{grid-template-columns:1fr;}
  .benefits__list > div{
    padding:12px 0;border-left:none;border-top:1px solid var(--line);
  }
  .benefits__list > div:first-child{padding-top:0;border-top:none;}
  .benefits__list > div:last-child{padding-bottom:0;}
}
/* 詳細ページへの導線。応募ボタンと並ぶので、色を落として主従を付ける。 */
.jobc__detail{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  font-size:.85rem;font-weight:500;letter-spacing:.03em;color:var(--blue-ink);
}
.jobc__detail .arrow{font-family:var(--f-en);transition:transform .2s ease;}
.jobc__detail:hover{text-decoration:underline;text-underline-offset:3px;}
.jobc__detail:hover .arrow{transform:translateX(4px);}
.jobc__apply{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);background:var(--pink);padding:.8em 1em;
  font-size:.88rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  box-shadow:var(--shadow-hard);transition:transform .2s ease,box-shadow .2s ease;
}
.jobc__apply:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);}
.jobc__apply .arrow{font-family:var(--f-en);font-weight:400;}
@media (max-width:1024px){
  .jobs-compare{grid-template-columns:1fr;}
}
.job-apply{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.85rem;font-weight:700;letter-spacing:.03em;color:var(--pink-ink);border-bottom:1px solid currentColor;padding-bottom:2px;}
.job-apply .arrow{font-family:var(--f-en);font-weight:400;transition:transform .2s ease;}
.job-apply:hover .arrow{transform:translateX(4px);}
/* 職種ページへの導線。応募リンクと並ぶので、色を落として主従を付ける */
.job-detail{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:.85rem;font-weight:500;letter-spacing:.03em;color:var(--blue-ink);}
.job-detail .arrow{font-family:var(--f-en);font-weight:400;transition:transform .2s ease;}
.job-detail:hover{text-decoration:underline;text-underline-offset:3px;}
.job-detail:hover .arrow{transform:translateX(4px);}

/* ============================================================
   ご入居について / page-admission.php
   （.area-nav / .pt-grid2 / .pt-card / .flow / .contact を再利用。差分のみ）
   ============================================================ */
.admission-sec{scroll-margin-top:96px;}
.admission-sec + .admission-sec{margin-top:64px;}
.admission-sec .sec-head{margin-bottom:24px;}
.adm-note{font-size:.85rem;color:var(--grey);line-height:1.9;margin-top:18px;}
.adm-note a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}
.adm-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.adm-check-block{border:1px solid var(--ink);background:var(--white);padding:24px 22px;}
.adm-check-block h3{font-size:1rem;font-weight:700;letter-spacing:.04em;margin-bottom:14px;}
.check-list{list-style:none;margin:0;padding:0;}
.check-list li{position:relative;padding:7px 0 7px 30px;font-size:.9rem;line-height:1.7;border-top:1px solid var(--line);}
.check-list li:first-child{border-top:none;}
.check-list li::before{content:"✓";position:absolute;left:4px;top:7px;color:var(--pink-ink);font-weight:700;}
@media (max-width:680px){.adm-check-grid{grid-template-columns:1fr;}}

/* ============================================================
   お知らせ・記事一覧 / page-news.php ＋ 記事詳細 / single.php
   （.articles-grid / .article-card / .news-tag / .filter-btn / .jobs-empty を再利用。差分のみ）
   ============================================================ */
.news-filter{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:38px;}
.article-card.hidden{display:none;}
.news-grid .article-body .news-tag{display:inline-block;margin-bottom:12px;}
/* タグの色。管理画面「投稿 → カテゴリー」で3色から選ぶ（既定はスラッグ別／未設定でも必ずどれかが付く） */
.news-tag.is-blue{background:var(--blue);}
.news-tag.is-pink,.news-tag.is-oshirase{background:var(--pink);}
.news-tag.is-yellow,.news-tag.is-meal{background:var(--yellow);}
.article-photo img{display:block;width:100%;height:100%;object-fit:cover;}
/* 記事詳細（single） */
.wrap-narrow{max-width:47.5rem;}
.single-head{border-bottom:1px solid var(--ink);padding-bottom:22px;margin-bottom:28px;}
.single-head .news-tag{display:inline-block;margin-bottom:14px;}
.single-title{font-size:1.5rem;font-weight:700;line-height:1.6;letter-spacing:.02em;}
.single-date{display:block;font-family:var(--f-en);color:var(--grey);font-size:.85rem;letter-spacing:.06em;margin-top:12px;}
.single-thumb{margin-bottom:28px;}
.single-thumb img{width:100%;height:auto;display:block;border:1px solid var(--line);}
.single-body{font-size:1rem;line-height:2;}
.single-body p{margin:0 0 1.4em;}
.single-body h2{font-size:1.2rem;font-weight:700;margin:1.8em 0 .8em;padding-left:12px;border-left:5px solid var(--pink);line-height:1.6;}
.single-body h3{font-size:1.05rem;font-weight:700;margin:1.6em 0 .6em;}
.single-body a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}
.single-body ul,.single-body ol{margin:0 0 1.4em;padding-left:1.4em;}
.single-body li{margin:.3em 0;}
.single-body img{max-width:100%;height:auto;}
/* 「見出し・写真・本文・ボタン」ブロック（template-parts/news-blocks.php） */
.article-block+.article-block{margin-top:2.2em;}
.article-block>h2:first-child{margin-top:0;}
/* 記事の途中や末尾に置けるボタン（2026-08-10）。本文の流れを止めて目立たせるため、
   前後に大きめの余白を取り、中央に置く。ボタンの見た目は共通の .btn-primary。 */
.article-cta{margin:2.2em 0 .6em;text-align:center;}
.article-cta .btn{min-width:min(20rem,100%);}
.single-figure{margin:0 0 1.4em;}
.single-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);}
/* キャプションも読ませる文章なのでコントラスト4.5:1を満たす色を使う（--greyは補助記号用） */
.single-figure figcaption{font-size:.82rem;line-height:1.8;color:#5a5854;margin-top:10px;}
.single-back{margin-top:36px;text-align:center;}

/* ============================================================
   コノヒカラとは？ / page-company-info.php
   （.sec-head / .section-tint / .center-btn / .contact を再利用。差分のみ）
   ============================================================ */
.section-lead{text-align:center;color:#4c4a46;font-size:.95rem;line-height:1.9;max-width:40rem;margin:0 auto 34px;}
/* インラインアイコン（線画・#303030） */
.ci{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:square;stroke-linejoin:miter;width:100%;height:100%;display:block;}
/* 差し替え用の画像アイコン（assets/img/icon/ に置いたもの）。
   枠に合わせて縮め、比率は保つ。色はCSSで変えられないので、画像側で #303030 にしておく。 */
.ci--file{object-fit:contain;}
.ac-ico,.gh-ico,.tl-ico{display:inline-flex;color:var(--ink);}
.ac-ico{width:40px;height:40px;}
.gh-ico{width:38px;height:38px;}
/* ステートメント */
.company-statement{max-width:47.5rem;margin:0 auto;text-align:center;}
.company-statement .sec-eyebrow{display:block;margin-bottom:18px;}
.cs-title{font-size:1.9rem;font-weight:700;line-height:1.5;letter-spacing:.04em;margin-bottom:28px;}
.cs-body{text-align:left;}
.cs-body p{font-size:1rem;line-height:2;margin:0 0 1.3em;}

/* --- 横に大きく組むステートメント（コノヒカラとは？の Our Mission） ---
   ページの先頭に来るので文字は大きくしたいが、縦に伸びると先が見えなくなる。
   見出しと本文を横に並べて幅を使い切り、高さを抑える。狭い画面では縦積みに戻す。
   上下の余白も通常のセクションより詰める（.section--tight）。 */
.section--tight{padding:76px 0;}
@media (max-width:900px){.section--tight{padding:56px 0;}}
.company-statement--wide{
  max-width:none;text-align:left;
  display:grid;grid-template-columns:minmax(20rem,.85fr) 1.15fr;gap:48px;align-items:start;
}
.company-statement--wide .sec-eyebrow{margin-bottom:14px;}
.company-statement--wide .cs-title{
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.35;margin-bottom:0;
}
.company-statement--wide .cs-body p{
  font-size:1.06rem;line-height:1.95;margin:0 0 1.15em;
}
.company-statement--wide .cs-body p:last-child{margin-bottom:0;}
/* Our Mission の見出しの下に置く歩くイラスト（2026-08-07）。
   本文（右カラム）のほうが背が高いぶん、左カラムの下が空くので、そこを使う。

   犬と猫は**1枚の絵**（影・歩幅・間隔まで描き込み済み）。
   並べ方をCSSで組み替えず、絵をそのまま置く。位置関係を変えたいときは絵のほうを直す。 */
.cs-illust{
  margin-top:36px;
}
.cs-illust img{
  width:min(100%,430px);height:auto;display:block;
}

@media (max-width:900px){
  .company-statement--wide{grid-template-columns:1fr;gap:26px;}
  .company-statement--wide .cs-title{font-size:clamp(1.7rem,6.4vw,2.3rem);}
  /* 縦積みになると見出しと本文のあいだに割り込むので、余白を詰めて小さくする。 */
  .cs-illust{margin-top:20px;}
  .cs-illust img{width:min(100%,300px);}
  /* 縦積みのときは見出しとイラストを中央に置く（2026-08-10）。
     横並びのときは左の列として左揃えで釣り合うが、縦積みだと見出しもイラストも
     画面幅より狭いため、左に寄って見える。本文だけは読みやすさ優先で左揃えのまま。 */
  .company-statement--wide .cs-head{text-align:center;}
  .company-statement--wide .cs-head .sec-eyebrow{display:inline-flex;}
  .cs-illust img{margin-inline:auto;}
}
.cs-cta{margin-top:26px;}
/* グループホームとは（2×2アイコンカード） */
.gh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:56.25rem;margin:0 auto;}
.gh-card{border:1px solid var(--ink);background:var(--white);padding:26px 24px;}
.gh-card .gh-ico{margin-bottom:14px;}
.gh-card h3{font-size:1.05rem;font-weight:700;letter-spacing:.03em;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);position:relative;}
.gh-card h3::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--pink);}
.gh-card p{font-size:.9rem;color:#4c4a46;line-height:1.85;}
.gh-more{text-align:center;margin-top:28px;}
.gh-more a{color:var(--blue-ink);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.gh-more a .arrow{font-family:var(--f-en);transition:transform .2s ease;}
.gh-more a:hover .arrow{transform:translateX(4px);}
/* 活動（アイコン＋見出し＋説明）
   支援内容は4つで確定（2026-08-05）。3列だと 3＋1 で最後の1枚が浮くので 2×2 にする。 */
.activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.activity-item{border:1px solid var(--ink);background:var(--white);padding:24px 20px;}
.activity-item .ac-ico{margin-bottom:12px;}
.activity-item h3{font-size:1rem;font-weight:700;letter-spacing:.04em;margin-bottom:8px;}
.activity-item p{font-size:.86rem;color:#4c4a46;line-height:1.7;}
/* 沿革（横型タイムライン） */
.timeline{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);max-width:51.25rem;position:relative;}
.timeline::before{content:"";position:absolute;top:21px;left:14%;right:14%;height:5px;background:var(--blue);transform:skewX(-12deg);}
.tl-node{position:relative;text-align:center;padding:0 10px;}
.tl-ico{width:44px;height:44px;box-sizing:border-box;padding:8px;background:var(--white);border:1px solid var(--ink);margin:0 auto 16px;position:relative;z-index:1;}
.tl-year{display:block;font-family:var(--f-en);font-weight:600;font-size:1.1rem;letter-spacing:.06em;color:var(--ink);}
.tl-label{display:block;font-weight:700;font-size:.92rem;margin-top:8px;}
.tl-desc{display:block;font-size:.82rem;color:var(--grey);line-height:1.7;margin-top:5px;}
/* 基本情報（写真＋情報の2カラム） */
.company-basic{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:stretch;max-width:55rem;margin:0 auto;}
.cb-photo{border:1px solid var(--ink);background:#f1efeb;min-height:230px;display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:.85rem;letter-spacing:.06em;}
.company-facts{border-top:1px solid var(--ink);}
.company-facts > div{display:flex;gap:20px;padding:14px 4px;border-bottom:1px solid var(--line);}
.company-facts dt{flex:0 0 96px;font-weight:700;font-size:.88rem;color:var(--grey);margin:0;}
.company-facts dd{margin:0;font-size:.92rem;line-height:1.7;}
.company-facts dd a{color:var(--blue-ink);}
/* リンクゾーン（3カード） */
.info-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.info-link-card{position:relative;display:block;border:1px solid var(--ink);background:var(--white);padding:24px 22px 46px;transition:transform .2s ease,box-shadow .2s ease;}
.info-link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);}
.info-link-card .il-en{font-family:var(--f-en);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);}
.info-link-card h3{font-size:1.1rem;font-weight:700;letter-spacing:.04em;margin:6px 0 10px;}
.info-link-card p{font-size:.85rem;color:#4c4a46;line-height:1.7;}
.info-link-card .il-arrow{position:absolute;right:20px;bottom:18px;font-family:var(--f-en);color:var(--pink-ink);transition:transform .2s ease;}
.info-link-card:hover .il-arrow{transform:translateX(5px);}
@media (max-width:768px){.info-links{grid-template-columns:1fr;}.gh-grid{grid-template-columns:1fr;}.company-basic{grid-template-columns:1fr;}}
@media (max-width:600px){
  .timeline{grid-template-columns:1fr;gap:22px;}
  .timeline::before{display:none;}
  .tl-node{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:0;}
  .tl-ico{margin:0;flex-shrink:0;}
}
@media (max-width:480px){.activity-grid{grid-template-columns:1fr;}.cs-title{font-size:1.5rem;}}

/* ============================================================
   コノヒカラとは？の各セクション（旧 page-company/history/vision.php 由来）
   ※2026-08-06 の一包化で3ページは廃止し、page-company-info.php に統合した。
   （.sec-head / .company-facts / .info-links / .contact 等を再利用。差分のみ）
   ============================================================ */
/* --- 代表ごあいさつ（写真＋メッセージ） --- */
.greeting{display:grid;grid-template-columns:18.75rem 1fr;gap:34px;align-items:start;max-width:58.75rem;margin:0 auto;}
.greeting--wide{grid-template-columns:17.5rem 1fr;}
.greeting-photo{border:1px solid var(--ink);background:#f1efeb;min-height:340px;display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:.85rem;letter-spacing:.06em;}
/* 写真は「外観 → カスタマイズ → 代表ごあいさつ」で登録したものだけ。
   登録するまでセクションごと出ないので、プレースホルダーの状態は存在しない（2026-08-10）。 */
.greeting-photo.is-photo{min-height:0;overflow:hidden;}
.greeting-photo.is-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.greeting-body .sec-eyebrow{display:block;margin-bottom:12px;}
.greeting-title{font-size:1.4rem;font-weight:700;line-height:1.6;letter-spacing:.03em;margin-bottom:18px;}
.greeting-body p{font-size:.96rem;line-height:2;margin:0 0 1.2em;}
.greeting-sign{text-align:right;font-size:.9rem;color:#4c4a46;margin-top:6px;}
.greeting-sign b{font-weight:700;color:var(--ink);letter-spacing:.06em;}
.greeting-more{margin-top:8px;}
.greeting-more a{color:var(--blue-ink);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.greeting-more a .arrow{font-family:var(--f-en);transition:transform .2s ease;}
.greeting-more a:hover .arrow{transform:translateX(4px);}
/* --- 会社情報テーブル（フル版はラベル幅を広めに） --- */
.company-facts--full{max-width:47.5rem;margin:0 auto;}
.company-facts--full dt{flex:0 0 120px;}
/* --- 運営事業所カード（事業内容ページ／写真つき・3列） ---
   建物の様子が先に伝わるように写真を主役にし、下に事業所の情報を置く。
   カード全体が /facilities/ の該当事業所ブロックへのリンク。 */
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:70rem;margin:0 auto;}
.office-card{
  display:flex;flex-direction:column;color:var(--ink);
  border:1px solid var(--ink);background:var(--white);
  box-shadow:var(--shadow-hard);transition:transform .2s ease,box-shadow .2s ease;
}
a.office-card:hover,a.office-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-hard-hover);}
.office-card__photo{
  display:block;position:relative;aspect-ratio:16/10;
  background:#f1efeb center/cover no-repeat;border-bottom:1px solid var(--ink);
}
/* 写真が無い事業所は、ロゴのバー言語でプレースホルダーを出す（文字と写真を混在させない） */
.office-card__photo.is-empty{display:flex;align-items:center;justify-content:center;}
.office-card__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px;}
.office-card h3{font-size:1.02rem;font-weight:700;letter-spacing:.03em;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);position:relative;}
/* 見出し下のバーはカードごとにピンク→ブルー→イエローで巡回（デザインルール） */
.office-card h3::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:3px;background:var(--pink);}
.office-card:nth-child(3n+2) h3::after{background:var(--blue);}
.office-card:nth-child(3n) h3::after{background:var(--yellow);}
.office-card__more{
  margin-top:auto;padding-top:16px;font-size:.86rem;font-weight:700;color:var(--blue-ink);
  display:inline-flex;align-items:center;gap:6px;
}
.office-card__more .arrow{font-family:var(--f-en);transition:transform .2s ease;}
a.office-card:hover .office-card__more .arrow{transform:translateX(4px);}
.office-facts > div{display:flex;gap:14px;padding:6px 0;font-size:.86rem;}
.office-facts dt{flex:0 0 72px;font-weight:700;color:var(--grey);margin:0;}
.office-facts dd{margin:0;color:#4c4a46;line-height:1.7;}
@media (max-width:1000px){.office-grid{grid-template-columns:repeat(2,1fr);max-width:47.5rem;}}
@media (max-width:600px){.office-grid{grid-template-columns:1fr;max-width:25rem;}}
/* --- 規約系の本文（プライバシーポリシー等）---
   読み物なので幅を詰め、見出しと本文の関係だけで構造を見せる（カードにしない）。 */
.legal{max-width:47.5rem;margin:0 auto;}
.legal__lead{font-size:.96rem;line-height:2;margin:0 0 40px;}
.legal h2{
  font-size:1.08rem;font-weight:700;letter-spacing:.04em;
  margin:38px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--ink);position:relative;
}
.legal h2::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pink);}
.legal h2:nth-of-type(3n+2)::after{background:var(--blue);}
.legal h2:nth-of-type(3n)::after{background:var(--yellow);}
.legal p{font-size:.92rem;line-height:2;margin:0 0 1.1em;}
.legal__list{list-style:none;margin:0 0 1.2em;padding:0;}
.legal__list li{position:relative;padding:7px 0 7px 20px;font-size:.92rem;line-height:1.9;}
.legal__list li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:2px;background:var(--ink);}
.legal__box{border:1px solid var(--ink);background:var(--white);padding:22px 24px;margin:0 0 1.2em;}
.legal__box p{margin:0;line-height:2.1;}
.legal__date{font-size:.84rem;color:var(--grey);margin-top:36px;}

/* --- アクセス（地図＋情報） --- */
/* 会社概要セクションの中に置く小見出し。セクション見出し（h2）より一段弱く、
   でも本文とは明確に切れるように、黒罫線＋パステルの短いバーで示す。 */
.sub-head{
  font-size:1.12rem;font-weight:700;letter-spacing:.06em;
  padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--ink);position:relative;
}
.sub-head::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;background:var(--blue);}
.access-block{max-width:58.75rem;margin:44px auto 0;}
.access-block .adm-note{margin-top:16px;}
.access-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:stretch;max-width:58.75rem;margin:0 auto;}
.access-map{border:1px solid var(--ink);min-height:300px;overflow:hidden;}
.access-map iframe{display:block;width:100%;height:100%;min-height:300px;border:0;filter:grayscale(.15);}
.access-facts{border-top:1px solid var(--ink);}
.access-facts > div{display:flex;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line);}
.access-facts dt{flex:0 0 72px;font-weight:700;font-size:.86rem;color:var(--grey);margin:0;}
.access-facts dd{margin:0;font-size:.9rem;line-height:1.8;}
/* --- マイルストーン（数字） --- */
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);max-width:56.25rem;margin:0 auto;}
.ms-item{background:var(--white);padding:28px 16px;text-align:center;}
.ms-num{display:block;font-family:var(--f-en);font-weight:600;font-size:2.6rem;line-height:1;letter-spacing:.02em;color:var(--ink);}
.ms-unit{font-size:.9rem;font-weight:500;margin-left:3px;letter-spacing:.04em;}
.ms-label{display:block;font-size:.82rem;color:var(--grey);line-height:1.6;margin-top:12px;}
/* --- 沿革（縦型タイムライン） --- */
/* 縦型タイムライン（コノヒカラの歩み）
   2026-08-07 改修：マーカーが小さく、右の本文だけが伸びて間延びして見えていた。
   ①年号を独立した左列に出して左の余白を埋める ②マーカーを 44→60px に拡大
   ③縦の余白を締める ④縦線はリスト全体ではなく**ノードごと**に引き、
     最後のマーカーから先に線が伸びないようにする。 */
.timeline-v{list-style:none;margin:0 auto;padding:0;max-width:55rem;}
.tlv-node{
  position:relative;display:grid;
  grid-template-columns:96px 60px 1fr;
  column-gap:18px;align-items:start;padding-bottom:30px;
}
.tlv-node:last-child{padding-bottom:0;}
/* マーカーの下端から次のマーカーの上端までをつなぐ線（最後のノードには引かない） */
.tlv-node::after{
  content:"";position:absolute;left:calc(96px + 18px + 30px - 1.5px);
  top:60px;bottom:0;width:3px;background:var(--blue);
}
.tlv-node:last-child::after{display:none;}
.tlv-year{
  grid-column:1;text-align:right;padding-top:15px;
  font-family:var(--f-en);font-weight:600;font-size:1.32rem;letter-spacing:.04em;
  color:var(--pink-ink);line-height:1.2;
}
.tlv-marker{
  grid-column:2;width:60px;height:60px;box-sizing:border-box;padding:13px;
  background:var(--white);border:1px solid var(--ink);position:relative;z-index:1;color:var(--ink);
}
.tlv-body{grid-column:3;padding-top:13px;}
.tlv-title{font-size:1.12rem;font-weight:700;letter-spacing:.03em;margin:0 0 6px;}
.tlv-body p{font-size:.92rem;color:#4c4a46;line-height:1.8;}
/* 「これから」だけは年号が日本語なので欧文フォントを当てない。マーカーはピンクで締める。 */
.tlv-node--future .tlv-year{font-family:var(--f-jp);font-size:1.02rem;color:var(--blue-ink);padding-top:17px;}
.tlv-node--future .tlv-marker{background:var(--pink);}
@media (max-width:680px){
  .tlv-node{grid-template-columns:48px 1fr;column-gap:14px;padding-bottom:26px;}
  .tlv-node::after{left:calc(24px - 1.5px);top:48px;}
  .tlv-marker{grid-column:1;grid-row:1 / span 2;width:48px;height:48px;padding:10px;}
  .tlv-year{grid-column:2;grid-row:1;text-align:left;padding-top:2px;font-size:1.16rem;}
  .tlv-node--future .tlv-year{padding-top:4px;}
  .tlv-body{grid-column:2;grid-row:2;padding-top:6px;}
}
/* --- 大切にしていること（3カード・番号付き） --- */
.value-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.value-card{position:relative;border:1px solid var(--ink);background:var(--white);padding:30px 24px 26px;overflow:hidden;}
.value-no{font-family:var(--f-en);font-weight:600;font-size:1.5rem;letter-spacing:.06em;color:var(--pink-ink);display:block;margin-bottom:10px;}
.value-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--pink);transform:skewX(-12deg) translateX(-6px);}
.value-card:nth-child(2)::before{background:var(--blue);}
.value-card:nth-child(3)::before{background:var(--yellow);}
.value-card h3{font-size:1.1rem;font-weight:700;letter-spacing:.03em;margin-bottom:12px;}
.value-card p{font-size:.9rem;color:#4c4a46;line-height:1.9;}
/* --- CI（ロゴの意味） --- */
.ci-block{display:grid;grid-template-columns:17.5rem 1fr;gap:36px;align-items:center;max-width:56.25rem;margin:0 auto;}
.ci-visual{position:relative;height:220px;border:1px solid var(--ink);background:var(--white);overflow:hidden;}
.ci-bar{position:absolute;width:150%;height:56px;left:-25%;mix-blend-mode:multiply;transform:skewX(-16deg);}
.ci-bar--pink{background:var(--pink);top:34px;}
.ci-bar--blue{background:var(--blue);top:82px;left:-10%;}
.ci-bar--yellow{background:var(--yellow);top:120px;}
.ci-text p{font-size:.96rem;line-height:2;margin:0 0 1.2em;}
.ci-text p:last-child{margin-bottom:0;}
@media (max-width:820px){
  .greeting,.greeting--wide,.access-grid,.ci-block{grid-template-columns:1fr;gap:22px;}
  .greeting-photo{min-height:240px;}
  .milestones{grid-template-columns:repeat(2,1fr);}
  .value-list{grid-template-columns:1fr;}
  .office-grid{grid-template-columns:1fr;}
  .ci-visual{height:180px;}
}
@media (max-width:480px){
  .ms-num{font-size:2.1rem;}
  .greeting-title{font-size:1.2rem;}
}

/* ============================================================
   事業内容・採用（page-business.php / page-recruit.php）
   ※2026-08-06 の一包化で page-service/staff/recruit-*.php は廃止。
     ここのコンポーネントは統合先の2ページが引き続き使っている。
   （.pt-grid2 / .stats-grid / .activity-grid / .company-facts / .info-links 等を再利用。差分のみ）
   ============================================================ */
/* --- 1日の流れ（時刻＋内容） --- */
.schedule{list-style:none;margin:0 auto;padding:0;max-width:38.75rem;}
.schedule li{display:flex;gap:18px;align-items:baseline;padding:14px 6px;border-bottom:1px solid var(--line);}
.schedule li:first-child{border-top:1px solid var(--ink);}
.sch-time{flex:0 0 66px;font-family:var(--f-en);font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:var(--pink-ink);}
.sch-act{font-size:.92rem;line-height:1.7;color:#4c4a46;}
/* --- チェックリスト --- */
.tick-list{list-style:none;margin:0;padding:0;max-width:40rem;}
.tick-list--center{margin:0 auto;}
.tick-list li{position:relative;padding:10px 6px 10px 34px;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.7;}
.tick-list li:first-child{border-top:1px solid var(--ink);}
.tick-list li::before{content:"";position:absolute;left:8px;top:15px;width:9px;height:14px;border:solid var(--pink-ink);border-width:0 2.5px 2.5px 0;transform:rotate(40deg);}
/* --- 対象となる方 --- */
.target-box{max-width:43.75rem;margin:0 auto;border:1px solid var(--ink);background:var(--white);padding:32px 30px;}
.target-box .adm-note{margin-top:18px;}
/* --- 採用職種別：キャッチ --- */
.jobd-catch{max-width:45rem;margin:0 auto;text-align:center;font-size:1.15rem;line-height:1.9;letter-spacing:.02em;}
.jobd-catch b{font-weight:700;color:var(--ink);}
/* --- 採用職種別：先輩の声 --- */
.jobd-voice{position:relative;max-width:42.5rem;margin:0 auto;border:1px solid var(--ink);background:var(--white);padding:34px 34px 26px;}
.jobd-voice__mark{position:absolute;top:10px;left:20px;font-family:var(--f-en);font-size:3rem;line-height:1;color:var(--pink);}
.jobd-voice p{font-size:1rem;line-height:2;position:relative;z-index:1;margin-bottom:14px;}
.jobd-voice__by{display:block;text-align:right;font-size:.85rem;font-weight:700;color:var(--grey);letter-spacing:.04em;}
@media (max-width:480px){
  .jobd-catch{font-size:1.02rem;}
  .sch-time{flex-basis:56px;}
}

/* ============================================================
   下層ページ共通：ページヒーロー（ニュートラル版）
   ============================================================ */
.page-hero{position:relative;overflow:hidden;background:var(--white);border-bottom:1px solid var(--ink);padding:72px 0 64px;text-align:center;}
.page-hero .wrap{position:relative;}
/* ヒーローの中に数字の欄を続けて置くとき用。区切りの罫線を外して1つの面としてつなげる
   （2026-08-06 決定。運営施設のご紹介で使用）。 */
.page-hero--flush{border-bottom:none;padding-bottom:56px;}
/* ページ名の横にイラストを置くとき（2026-08-10）。
   .sec-head--illust と同じ考え方で、**このときだけ左揃えにしてよい**（えいちゃん了承）。
   イラストが無い環境ではクラス自体が付かず、中央揃えのままになる。 */
.page-hero--illust{text-align:left;}
.page-hero--illust .ph-inner{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
}
.page-hero--illust .ph-lead{margin-left:0;margin-right:0;}
.ph-illust{width:min(230px,28vw);}
.ph-illust img{display:block;width:100%;height:auto;}
@media (max-width:720px){
  .page-hero--illust{text-align:center;}
  .page-hero--illust .ph-inner{grid-template-columns:1fr;gap:20px;justify-items:center;}
  .page-hero--illust .ph-lead{margin-inline:auto;}
  .ph-illust{width:min(190px,52vw);}
}
.ph-stats{margin-top:44px;}

/* ============================================================
   運営施設紹介ページ / page-facilities.php
   ============================================================ */
.area-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:46px;}
.area-nav a{border:1px solid var(--ink);background:var(--white);padding:7px 18px;font-size:.85rem;font-weight:500;letter-spacing:.04em;}
.area-nav a:hover{background:var(--grey-light);}
/* ※旧「事業所ごとの2列カード（.fac-group / .fac-units グリッド / .fac-spec / .vac）」は
   運営施設紹介の作り直し（2026-08-05）で不要になったため削除した。
   `.fac-units` はいま「ユニット一覧の表」として下で再定義している。 */

/* ============================================================
   運営施設一覧（CPT）/ page-facilities.php・single-facility.php
   絞り込み(.filter-btn を再利用)＋auto-fitグリッド＋ロゴ言語プレースホルダー
   ============================================================ */
/* 絞り込みバー（左寄せ・折り返し可・横スクロールにしない） */
.fac-filter{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.fac-filter__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.fac-filter__label{font-weight:700;font-size:.82rem;letter-spacing:.08em;color:var(--grey);flex:0 0 auto;min-width:3.2em;}
.fac-count{font-size:.92rem;color:#4c4a46;margin-bottom:22px;letter-spacing:.04em;}
.fac-count span{font-family:var(--f-en);font-weight:600;font-size:1.2rem;color:var(--ink);margin-right:3px;}
/* 一覧グリッド：固定カラムにせず auto-fit（特大モードでも破綻しない） */
/* 一覧は「事業所 → その中のユニット」の2階層（2026-08-05 決定） */
.fac-list{display:block;}
.fac-office+.fac-office{margin-top:44px;}
.fac-office.is-hidden{display:none;}
/* 事業内容ページの事業所カードから #office-{slug} で飛んでくる。
   ヘッダーが sticky なので、その高さぶん手前で止める。 */
.fac-office{scroll-margin-top:110px;}
/* 事業所の見出し：左に名称と規模、右に「その事業所の電話番号」を大きく置く。
   問い合わせは電話が最優先なので、事業所ブロックの中で一番目立つ要素にする。 */
.fac-office__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:20px;
}
.fac-office__id{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.fac-office__name{font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1.6;}
.fac-office__meta{font-size:.8rem;color:#5a5854;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.fac-office__count{font-family:var(--f-en);font-size:1rem;font-weight:500;margin-right:2px;}
.fac-office__cap{letter-spacing:.04em;}
.fac-office__no{font-family:var(--f-en);letter-spacing:.04em;color:var(--grey);}
.fac-office__contact{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--ink);background:var(--pink);padding:8px 18px 9px;
}
.fac-office__tel-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;}
.fac-office__tel{
  font-family:var(--f-en);font-weight:500;font-size:1.7rem;letter-spacing:.06em;line-height:1.2;
  color:var(--ink);
}
.fac-office__tel:hover{text-decoration:underline;text-underline-offset:4px;}
.fac-office__tel-note{font-size:.7rem;color:#5a5854;letter-spacing:.03em;}
/* --- 建物の写真カルーセル（事業所ごと・自動再生しない） ---
   デザインルールC準拠：ユーザーが押したときだけ動く。ループもしない（端でボタンを無効化）。
   居室（部屋）の写真は載せない。外観・共用部など「どんな建物か」が分かるカットだけ。 */
.fac-carousel{position:relative;border:1px solid var(--ink);background:var(--grey-light);margin-bottom:22px;}
.fac-carousel__viewport{overflow:hidden;}
.fac-carousel__track{
  display:flex;margin:0;padding:0;list-style:none;
  transition:transform .35s ease;
}
/* 写真は縦位置・横位置が混在している。cover で切り抜くと中央の帯しか見えないため、
   contain で全体を必ず見せる（写真が見えないほうが問題）。余白は下地色で埋める。 */
.fac-carousel__slide{
  position:relative;flex:0 0 100%;
  height:clamp(320px,46vw,560px);
  display:flex;align-items:center;justify-content:center;background:var(--grey-light);
}
.fac-carousel__slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
/* JS無効時：transform が当たらないので横スクロールで全枚数を見られるようにする */
.no-js .fac-carousel__viewport{overflow-x:auto;}
.fac-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer;
  font-family:var(--f-en);font-size:1.5rem;line-height:1;padding:0;
}
.fac-carousel__nav.prev{left:12px;}
.fac-carousel__nav.next{right:12px;}
.fac-carousel__nav:hover:not(:disabled){background:var(--pink);}
.fac-carousel__nav:disabled{opacity:.35;cursor:default;}
.fac-carousel__status{
  position:absolute;right:12px;bottom:12px;z-index:2;
  font-family:var(--f-en);font-size:.75rem;letter-spacing:.1em;
  background:var(--white);border:1px solid var(--ink);padding:2px 10px;
}
/* 写真が1枚も無いあいだのプレースホルダー（ロゴのグラフィック言語） */
.fac-carousel.is-empty{
  height:clamp(160px,24vw,240px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.fac-ph{position:absolute;inset:0;overflow:hidden;}
.fac-ph i{position:absolute;height:38%;width:150%;left:-25%;mix-blend-mode:multiply;}
.fac-ph i:nth-child(1){top:2%;transform:skewX(-18deg) skewY(-5deg);background:var(--pink);}
.fac-ph i:nth-child(2){top:34%;left:-12%;transform:skewX(-18deg);background:var(--blue);}
.fac-ph i:nth-child(3){top:64%;transform:skewX(-18deg) skewY(4deg);background:var(--yellow);}
.fac-ph__label{position:relative;z-index:1;font-weight:700;font-size:1.05rem;letter-spacing:.12em;color:var(--ink);background:rgba(255,255,255,.74);padding:5px 16px;border:1px solid var(--ink);}
/* ※旧「エリアごとに配色の起点をずらす」ルール（.fac-area__visual[data-area=…]）は、
   TOPが事業所別の写真カードになり、一覧のサムネ（.fac-item__thumb）も廃止されたため削除した。 */
/* --- ユニット一覧（表）---
   個別ページは作らないので、行はリンクにしない。出す項目はマスタにあるものだけ。 */
/* 1ユニット＝1行。折り返すと読みづらいので、全セルを nowrap にして横スクロールで逃がす。
   ラッパー側にスクロールを持たせる（table を display:block にすると列の幅が揃わなくなる）。 */
.fac-units-wrap{overflow-x:auto;}
.fac-units{
  display:table;width:100%;border-collapse:collapse;
  border:1px solid var(--ink);background:var(--white);
}
.fac-units__caption{
  caption-side:top;text-align:left;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:#5a5854;padding:0 0 8px;white-space:normal;
}
.fac-units th,.fac-units td{
  text-align:left;font-size:.88rem;line-height:1.7;padding:11px 16px;
  border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap;
}
.fac-units thead th{
  font-size:.76rem;font-weight:700;letter-spacing:.08em;color:#5a5854;
  background:var(--grey-light);border-bottom:1px solid var(--ink);
}
.fac-units tbody th{font-weight:700;letter-spacing:.03em;}
/* 名前の列だけ広げ、残りは内容ぶんに詰める（数字の列が間延びしないように） */
.fac-units tbody th:first-child,.fac-units thead th:first-child{width:34%;}
.fac-units tbody tr:last-child th,.fac-units tbody tr:last-child td{border-bottom:none;}
.fac-units tbody tr:nth-child(even){background:#fbfaf8;}
.fac-empty{text-align:center;color:var(--grey);font-size:.92rem;padding:44px 20px;border:1px dashed var(--line);}
/* 一覧の注記はTOPの .fac-note（中央寄せ）と用途が違うので、この面では左揃えにする */
#homes .fac-note{text-align:left;line-height:1.9;margin-top:26px;}
@media (max-width:768px){
  /* スマホ：絞り込みバーを画面上部に sticky（事業所が縦に長いため） */
  .fac-filter{position:sticky;top:0;z-index:30;background:var(--bg);padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--ink);}
  /* 表は .fac-units-wrap 側で横スクロールする（table のレイアウトは崩さない） */
  .fac-units th,.fac-units td{padding:10px 12px;font-size:.84rem;}
}
@media (prefers-reduced-motion: reduce){
  /* 動きは消すが、スライドの位置制御（transform）は機能として残す */
  .fac-carousel__track{transition:none;}
}

/* ============================================================
   写真スロット（konohikara_photo_slot / assets/img/ ・ assets/img/dummy/）
   各スロットは元々「文字のプレースホルダー」用のボックス。画像が入ったときだけ
   .is-photo が付くので、ここで画像を敷き詰める。
   ※各コンポーネント定義より後ろに置くこと（同じ詳細度なので後勝ちで上書きする）
   ============================================================ */
.is-photo{position:relative;overflow:hidden;padding:0;}
.is-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* ダミー画像は画面上でもひと目で分かるようにする（実写真に差し替えると自動で消える） */
.dummy-badge{
  position:absolute;top:0;left:0;z-index:3;
  font-family:var(--f-en);font-weight:500;font-size:.62rem;letter-spacing:.16em;
  padding:3px 9px;background:var(--ink);color:var(--white);pointer-events:none;
}