@charset "UTF-8";
/* ============================================================
   介護事業所むけ 営業デモ・共通スタイル（4ページ共通）
   kaigo-3page の雛形をそのまま土台にしています。
   触るのは site.json の theme だけです。CSSは全サイト共通で1本。
   ------------------------------------------------------------
   1社ぶん作るときに触るのは、すぐ下の「色」と「文字の大きさ」だけです。
   ここを変えれば3ページとも一度に変わります。
   ============================================================ */

:root{
  color-scheme:light only;

  /* ---- 色（ここを差し替えると事業所ごとの雰囲気になります）---- */
  --ground:#F6F5F2;   /* 全体の下地 */
  --surface:#FFFFFF;  /* カードや表の背景 */
  --mist:#E7EEE9;     /* うすい色の帯 */
  --deep:#2A4A3F;     /* 濃い色。ヘッダー・ボタン・見出しの線 */
  --brand:#7E9C8C;    /* 中間色。小見出しやアイコン */
  --accent:#A9642F;   /* さし色。リンクの下線や強調 */
  --ink:#1E2422;      /* 本文の文字 */
  --ink-2:#5A665F;    /* 補足の文字 */
  --line:#DDE3DE;     /* 罫線 */

  /* ---- 文字 ---- */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;

  --gutter:clamp(1.25rem,5vw,4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  /* 17px。ご家族だけでなくご本人も読むので、一般的なサイトより少し大きくしています */
  font-size:17px;line-height:1.95;letter-spacing:.03em;
  font-feature-settings:"palt" 1;text-spacing-trim:trim-start;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:66rem;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(3.5rem,8vw,6rem);--sect-bg:var(--ground)}
section.alt{background:var(--mist);--sect-bg:var(--mist)}
.center{text-align:center}

/* ---------- ヘッダー ---------- */
header{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.4rem}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.4}
.logo b{font-family:var(--mincho);font-size:1.12rem;font-weight:600;letter-spacing:.05em}
.logo small{font-size:.68rem;color:var(--ink-2);letter-spacing:.04em}

/* ヘッダー右側。メニュー・電話・三本線をひとまとめにしています */
.bar-right{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem)}
.gnav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.gnav a{text-decoration:none;font-size:.88rem;color:var(--ink-2);position:relative;padding-block:.3rem}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.gnav a:hover{color:var(--ink)}
.gnav a:hover::after{transform:scaleX(1);transform-origin:left}
.gnav a[aria-current="page"]{color:var(--ink)}
.gnav a[aria-current="page"]::after{transform:scaleX(1)}

/* 電話。介護事業所はここが一番押されます */
.tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--deep);color:#fff;border-radius:2px;padding:.6rem 1.1rem;
  font-size:.9rem;font-weight:600;white-space:nowrap;transition:background .3s}
.tel:hover{background:#20382F}
.tel small{font-size:.68rem;font-weight:400;opacity:.8}

/* ---------- スマホ用メニュー ---------- */
.menu-btn{display:none;width:2.8rem;height:2.8rem;margin-right:-.6rem;padding:0;border:0;
  background:none;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:1.35rem;height:1.5px;margin:.34rem auto;background:currentColor;
  border-radius:1px;transition:transform .35s var(--ease),opacity .2s}
header.nav-open .menu-btn span:nth-child(1){transform:translateY(.48rem) rotate(45deg)}
header.nav-open .menu-btn span:nth-child(2){opacity:0}
header.nav-open .menu-btn span:nth-child(3){transform:translateY(-.48rem) rotate(-45deg)}

#drawer{position:absolute;top:100%;left:0;right:0;background:var(--deep);
  opacity:0;visibility:hidden;transform:translateY(-.6rem);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
  box-shadow:0 20px 36px rgba(20,36,30,.28)}
header.nav-open #drawer{opacity:1;visibility:visible;transform:none}
#drawer ul{list-style:none;margin:0;padding:.3rem 0 1rem}
#drawer li+li{border-top:1px solid rgba(255,255,255,.14)}
#drawer a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gutter);text-decoration:none;color:rgba(255,255,255,.94);
  font-family:var(--mincho);font-size:1.02rem;letter-spacing:.08em}
#drawer a::after{content:"→";font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.45)}
#scrim{position:absolute;top:100%;left:0;right:0;height:100svh;background:rgba(20,36,30,.42);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
header.nav-open #scrim{opacity:1;visibility:visible}

@media (max-width:56rem){
  .gnav{display:none}
  .menu-btn{display:block}
  /* 狭いときは電話ボタンを番号だけにする。介護事業所ではここを消してはいけません */
  .tel{padding:.5rem .85rem;font-size:.86rem}
  .tel span,.tel small{display:none}
}
@media (max-width:24rem){ .logo small{display:none} }
@media (min-width:56.0625rem){ #drawer,#scrim{display:none} }
html.nav-lock{overflow:hidden}

/* ---------- 見出し ---------- */
.eyebrow{margin:0;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:.75rem}
.eyebrow::before{content:"";width:1.7rem;height:1px;background:currentColor;opacity:.6;flex:none}
.sect-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sect-head h2,.sect-head h1{font-family:var(--mincho);font-weight:600;margin:.75rem 0 0;
  font-size:clamp(1.45rem,3.5vw,2.15rem);line-height:1.68;letter-spacing:.075em;text-wrap:balance}
.sect-head p{margin:.9rem 0 0;color:var(--ink-2);max-width:36rem}
.center .sect-head p{margin-inline:auto}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;border-radius:2px;
  font-size:.92rem;font-weight:600;padding:.95rem 1.8rem;
  background:var(--deep);color:#fff;transition:background .3s,transform .3s var(--ease)}
.btn:hover{background:#20382F;transform:translateY(-2px)}
.btn i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(.3rem)}
.btn.ghost{background:transparent;color:var(--deep);border:1px solid var(--deep)}
.btn.ghost:hover{background:var(--deep);color:#fff}

/* ---------- 写真の枠 ----------
   写真がまだ無いときは、この枠のまま置いておけます。
   差し替えるときは中身を <img src="images/○○.jpg" alt="説明"> に入れ替えてください。 */
.photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  background:linear-gradient(140deg,var(--mist),#D7E2DA 55%,#C6D4CB);
  display:grid;place-items:center}
.photo img{width:100%;height:100%;object-fit:cover}
.photo span{font-size:.76rem;letter-spacing:.14em;color:#4E6459;opacity:.75}
.photo.wide{aspect-ratio:16/9}

/* ---------- ヒーロー ---------- */
.hero{position:relative;min-height:min(78svh,40rem);display:flex;align-items:flex-end;
  overflow:hidden;padding-block:6rem 3.2rem;color:#fff}
.hero .photo{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.hero .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,44,36,.30) 0%,rgba(24,44,36,.28) 45%,rgba(24,44,36,.74) 100%)}
.hero .wrap{position:relative;width:100%}
.hero-copy{max-width:34rem;display:flex;flex-direction:column;gap:1.2rem;
  text-shadow:0 1px 18px rgba(14,26,20,.45)}
.hero h1{font-family:var(--mincho);font-weight:600;margin:0;
  font-size:clamp(1.75rem,5.2vw,3.05rem);line-height:1.72;letter-spacing:.11em;text-wrap:balance}
.hero p{margin:0;color:rgba(255,255,255,.92)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero .btn{background:#fff;color:var(--deep)}
.hero .btn:hover{background:#F0EFEA}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- カード ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:56rem){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:36rem){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.card h3{font-family:var(--mincho);font-weight:600;margin:0;font-size:1.12rem;letter-spacing:.06em;line-height:1.7}
.card p{margin:0;font-size:.94rem;color:var(--ink-2)}
.card .mark{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--mist);
  display:grid;place-items:center;color:var(--deep);font-size:.9rem;font-weight:600}

/* ---------- 二段組み ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,3.5rem);align-items:center}
.split.text-first{direction:ltr}
@media (max-width:52rem){.split{grid-template-columns:1fr}}
.split h2,.split h1{font-family:var(--mincho);font-weight:600;margin:.75rem 0 1.2rem;
  font-size:clamp(1.4rem,3.3vw,1.95rem);line-height:1.72;letter-spacing:.075em;text-wrap:balance}
.split p{margin:0 0 1.1rem;color:var(--ink-2)}
.split p:last-child{margin-bottom:0}

/* ---------- 料金表 ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:30rem;border-collapse:collapse;background:var(--surface);
  font-size:.94rem;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:.82rem;color:var(--ink-2);padding-bottom:.7rem}
th,td{padding:.95rem 1.1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--deep);color:#fff;font-weight:600;font-size:.86rem;letter-spacing:.04em;
  border-bottom:0}
tbody th{font-weight:600;width:38%}
td.num{text-align:right;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.note{margin:1rem 0 0;font-size:.85rem;color:var(--ink-2)}

/* ---------- ご利用の流れ（順番に意味があるので番号をふっています）---------- */
.flow{list-style:none;margin:0;padding:0;counter-reset:step;
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.flow li{counter-increment:step;background:var(--surface);padding:1.5rem 1.5rem 1.5rem 4.6rem;
  position:relative}
.flow li::before{content:counter(step,decimal-leading-zero);position:absolute;left:1.5rem;top:1.5rem;
  font-family:var(--mincho);font-size:1.05rem;color:var(--accent);letter-spacing:.06em}
.flow strong{display:block;font-family:var(--mincho);font-weight:600;font-size:1.05rem;
  letter-spacing:.04em;margin-bottom:.3rem}
.flow span{display:block;font-size:.93rem;color:var(--ink-2)}

/* ---------- 定義リスト（事業所概要）---------- */
.spec{margin:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:11rem 1fr;gap:1.2rem;
  padding:1.05rem .2rem;border-bottom:1px solid var(--line)}
@media (max-width:40rem){.spec div{grid-template-columns:1fr;gap:.2rem}}
.spec dt{font-size:.88rem;color:var(--ink-2)}
.spec dd{margin:0}

/* ---------- よくあるご質問 ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:.4rem;top:1.1rem;
  color:var(--accent);font-weight:400;transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 1.3rem;color:var(--ink-2);font-size:.95rem;padding-right:2.5rem}

/* ---------- お問い合わせ ---------- */
.contact{background:var(--deep);color:#fff}
.contact h2{font-family:var(--mincho);font-weight:600;margin:.75rem 0 1.1rem;
  font-size:clamp(1.4rem,3.3vw,2rem);line-height:1.7;letter-spacing:.075em;text-wrap:balance}
.contact .eyebrow{color:rgba(255,255,255,.6)}
.contact p{margin:0 0 1.6rem;color:rgba(255,255,255,.86);max-width:34rem}
.contact .actions{display:flex;flex-wrap:wrap;gap:.9rem}
.contact .btn{background:#fff;color:var(--deep)}
.contact .btn:hover{background:#F0EFEA}
.contact .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.contact .btn.ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- フッター ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);
  padding-block:2.6rem;font-size:.88rem}
.foot{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;justify-content:space-between;align-items:flex-start}
footer nav ul{display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;margin:0;padding:0}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.copy{margin:1.8rem 0 0;font-size:.76rem;color:var(--ink-2)}

/* ---------- スクロールでふわりと出る ----------
   html.js が付いているときだけ隠します。
   JavaScript が無効な環境では、最初から全部見えている状態になります。 */
html.js .rise{opacity:0;transform:translateY(1.3rem);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rise.in{opacity:1;transform:none}
html.js .rise[data-d="1"]{transition-delay:.1s}
html.js .rise[data-d="2"]{transition-delay:.2s}
html.js .rise[data-d="3"]{transition-delay:.3s}

/* ---------- これはデモです、の帯（納品時は消してください）---------- */
.demobar{background:var(--accent);color:#fff;font-size:.78rem;letter-spacing:.06em;
  padding:.5rem 0;text-align:center}
.demobar b{font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.js .rise{opacity:1;transform:none}
}

/* ============================================================
   ここから下は「採用サイト」として使うために足した分です。
   3ページ雛形には無い節だけを追加しています。
   ============================================================ */

/* ---------- 提案用イメージであることの注記 ----------
   営業先ごとの専用デモに必ず出します。消してはいけません。 */
.notebar{background:var(--mist);color:var(--ink-2);font-size:.78rem;line-height:1.7;
  padding:.6rem 0;border-bottom:1px solid var(--line)}
.notebar .wrap{display:flex;gap:.6rem;align-items:baseline}
.notebar b{color:var(--deep);font-weight:600;white-space:nowrap}
.proposal{margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.8;color:var(--ink-2)}

/* ---------- 求人の入口（トップに置く帯）---------- */
.hiring{background:var(--mist)}
.hiring .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem 2.4rem;
  align-items:center}
@media (max-width:52rem){.hiring .inner{grid-template-columns:1fr}}
.hiring h2{font-family:var(--mincho);font-weight:600;margin:.6rem 0 .8rem;
  font-size:clamp(1.35rem,3.4vw,1.95rem);line-height:1.6;letter-spacing:.04em;text-wrap:balance}
.hiring p{margin:0;color:var(--ink-2)}
.hiring .actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- 募集職種 ---------- */
.jobs{display:grid;gap:1.2rem}
.job{background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:1.7rem clamp(1.2rem,3vw,1.9rem)}
.job h3{font-family:var(--mincho);font-weight:600;margin:0 0 .3rem;font-size:1.22rem;
  letter-spacing:.04em}
.job .kind{display:inline-block;font-size:.74rem;letter-spacing:.1em;color:#fff;
  background:var(--brand);border-radius:2px;padding:.2rem .6rem;margin-bottom:.9rem}
.job .spec{margin-top:1rem}
.job .spec div:last-child{border-bottom:0}

/* ---------- 待遇のピル ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.tags li{font-size:.86rem;line-height:1.6;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.45rem 1rem;color:var(--ink-2)}

/* ---------- 1日の流れ（時刻つき）---------- */
.day{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.day li{display:grid;grid-template-columns:6.5rem 1fr;gap:1.2rem;
  padding:1.05rem .2rem;border-bottom:1px solid var(--line)}
@media (max-width:40rem){.day li{grid-template-columns:1fr;gap:.2rem}}
.day time{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.95rem}
.day strong{display:block;font-weight:600;font-size:1rem}
.day span{display:block;font-size:.93rem;color:var(--ink-2)}

/* ---------- はたらく人の声（匿名。実名・顔写真は載せません）---------- */
.voice{background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:1.7rem clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.9rem}
.voice blockquote{margin:0;font-family:var(--mincho);font-size:1.06rem;line-height:1.9;
  letter-spacing:.03em}
.voice .who{font-size:.84rem;color:var(--ink-2)}
.voice .who b{color:var(--deep);font-weight:600}

/* ---------- 大きめのリード文 ---------- */
.lead{font-size:1.06rem;line-height:2;margin:0 0 1.4rem}

/* ---------- スマホの下に出しっぱなしにするボタン ----------
   介護事業所への問い合わせも、求人の応募も、いまだに電話が大半です。
   スクロールしても消えないようにしてあります。 */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(20,36,30,.10)}
.sticky-cta ul{display:flex;list-style:none;margin:0;padding:0}
.sticky-cta li{flex:1}
.sticky-cta li+li{border-left:1px solid var(--line)}
.sticky-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:3.4rem;padding:.5rem .3rem;text-decoration:none;font-size:.82rem;font-weight:600;
  color:var(--deep)}
.sticky-cta a small{font-size:.66rem;font-weight:400;color:var(--ink-2);letter-spacing:.04em}
.sticky-cta li.main a{background:var(--deep);color:#fff}
.sticky-cta li.main a small{color:rgba(255,255,255,.75)}
@media (max-width:52rem){
  .sticky-cta{display:block}
  body{padding-bottom:3.6rem}
}

/* ---------- 写真の枠に「何を・どの大きさで」を書いておく ---------- */
.photo span{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  padding:1rem}
.photo span b{font-weight:400;font-size:.68rem;letter-spacing:.1em;opacity:.75}

/* ---------- 雰囲気の切り替え（site.json の theme.mood）---------- */
body.mood-warm .card,body.mood-warm .job,body.mood-warm .voice,
body.mood-warm .btn,body.mood-warm .tel,body.mood-warm .photo{border-radius:10px}
body.mood-warm .hero .photo{border-radius:0}
body.mood-clean .logo b,body.mood-clean .hero h1,body.mood-clean .sect-head h2,
body.mood-clean .split h2,body.mood-clean .split h1,body.mood-clean .sect-head h1,body.mood-clean .hiring h2,body.mood-clean .card h3,
body.mood-clean .job h3,body.mood-clean .contact h2,body.mood-clean .voice blockquote,
body.mood-clean .flow strong,body.mood-clean #drawer a{font-family:var(--sans)}

/* ---------- 印刷（商談で紙に出すことがあります）---------- */
@media print{
  header,.sticky-cta,.notebar,.hero .actions{display:none}
  body{padding-bottom:0;font-size:11pt}
  .hero{min-height:auto;color:var(--ink)}
  .hero .photo{display:none}
}

/* ---------- 明るい写真のヒーロー（site.json の hero.light: true）----------
   桜・空・白い外観など、高キーの写真は濃い暗幕をかけると濁ります。
   下から白くぼかして、文字を濃い色にします。 */
.hero.light{color:var(--ink)}
.hero.light .photo::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.30) 30%,
    rgba(255,255,255,.72) 58%,
    rgba(255,255,255,.94) 100%)}
.hero.light .hero-copy{text-shadow:0 1px 14px rgba(255,255,255,.85)}
.hero.light h1{color:var(--ink)}
.hero.light p{color:var(--ink-2)}
.hero.light .btn{background:var(--deep);color:#fff}
.hero.light .btn:hover{background:var(--ink)}
.hero.light .btn.ghost{background:rgba(255,255,255,.72);color:var(--deep);border-color:var(--deep)}
.hero.light .btn.ghost:hover{background:var(--deep);color:#fff}

/* ============================================================
   ここから下は「見え方の仕上げ」です。
   レイクケア本体サイト（lakecare.co.jp）の動きに合わせています。
   すべて html.js が付いているときだけ効きます。
   JavaScript を切っても、内容は最初から全部見えます。
   ============================================================ */

/* ---------- 開幕の幕（トップページだけ）----------
   CSSだけで上に上がります。JavaScript が止まっても幕は必ず開きます。 */
#curtain{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:var(--ground);transform-origin:top;
  animation:curtain-up 1.5s var(--ease) forwards}
html.js #curtain{display:grid}
#curtain b{font-family:var(--mincho);font-weight:600;
  font-size:clamp(1rem,3.2vw,1.42rem);letter-spacing:.34em;color:var(--deep);
  padding-bottom:.9rem;position:relative;opacity:0;
  animation:curtain-mark 1.5s var(--ease) forwards}
#curtain b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  animation:curtain-line 1.5s var(--ease) forwards}
@keyframes curtain-up{0%,58%{transform:scaleY(1)}100%{transform:scaleY(0);visibility:hidden}}
@keyframes curtain-mark{0%{opacity:0;transform:translateY(.55rem)}
  26%{opacity:1;transform:none}50%{opacity:1}70%,100%{opacity:0}}
@keyframes curtain-line{0%,12%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}

/* ---------- ヒーローに重ねるヘッダー（トップページだけ）----------
   最初は写真の上に透けて乗り、スクロールすると白くすりガラスになります。 */
body.hashero header{position:fixed;top:0;left:0;right:0;background:transparent;
  border-bottom-color:transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s}
body.hashero .bar{min-height:5.2rem;transition:min-height .4s var(--ease)}
body.hashero header.stuck{background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
body.hashero header.stuck .bar{min-height:4.4rem}
@supports not (backdrop-filter:blur(1px)){
  body.hashero header.stuck{background:var(--surface)}
}
/* 写真が暗いときは、ヘッダーの文字を白に */
body.hashero.hero-dark header .logo,
body.hashero.hero-dark header .menu-btn{color:#fff}
body.hashero.hero-dark header .logo small,
body.hashero.hero-dark .gnav a{color:rgba(255,255,255,.84)}
body.hashero.hero-dark .gnav a:hover,
body.hashero.hero-dark .gnav a[aria-current="page"]{color:#fff}
body.hashero.hero-dark header .logo,
body.hashero.hero-dark .gnav a{text-shadow:0 1px 12px rgba(12,22,18,.5)}
body.hashero.hero-dark header.stuck .logo,
body.hashero.hero-dark header.stuck .menu-btn{color:var(--ink);text-shadow:none}
body.hashero.hero-dark header.stuck .logo small,
body.hashero.hero-dark header.stuck .gnav a{color:var(--ink-2);text-shadow:none}
body.hashero.hero-dark header.stuck .gnav a:hover,
body.hashero.hero-dark header.stuck .gnav a[aria-current="page"]{color:var(--ink)}
/* 写真が明るいときは、もともとの黒文字のまま。うっすら白い縁だけ足す */
body.hashero.hero-light header .logo,
body.hashero.hero-light .gnav a{text-shadow:0 1px 14px rgba(255,255,255,.9)}
body.hashero.hero-light header.stuck .logo,
body.hashero.hero-light header.stuck .gnav a{text-shadow:none}

/* ---------- ヒーローの写真を、ゆっくり寄せる ---------- */
html.js .hero .photo img{transform:scale(1.05);animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.15)}}

/* ---------- ヒーローの見出しを1文字ずつ ----------
   JavaScript が文字を包みます。包まれなければ、ふつうに全部見えます。 */
html.js .hero h1 .ch{display:inline-block;opacity:0;transform:translateY(-.45em);
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .hero h1.in .ch{opacity:1;transform:none}
@media (max-width:50rem){html.js .hero h1 .ch{transform:translateY(.4em)}}
/* 見出しの下の一行と、ボタンは、文字のあとから */
html.js body.hashero .hero-copy p,
html.js body.hashero .hero .actions{opacity:0;transform:translateY(.9rem);
  transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s}
html.js body.hashero .hero.in .hero-copy p{opacity:1;transform:none}
html.js body.hashero .hero.in .actions{opacity:1;transform:none;transition-delay:.24s}

/* ---------- 写真が、幕を開くように現れる ----------
   その節の下地の色の幕が右へ引かれ、同時に写真の寄りがほどけます。 */
html.js .photo.rv img{transform:scale(1.1);transition:transform 1.5s var(--ease)}
html.js .photo.rv.in img{transform:none}
html.js .photo.rv::before{content:"";position:absolute;inset:0;z-index:2;
  background:var(--sect-bg,var(--ground));transform-origin:right;
  transition:transform 1.1s var(--ease)}
html.js .photo.rv.in::before{transform:scaleX(0)}

/* ---------- ふわりと出る量を、本体サイトに合わせる ---------- */
html.js .rise{transform:translateY(1.7rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rise[data-d="4"]{transition-delay:.4s}
html.js .rise[data-d="5"]{transition-delay:.5s}
html.js .rise[data-d="6"]{transition-delay:.6s}

/* ---------- カード。触れるとわずかに浮く ---------- */
.card{transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{border-color:var(--brand);transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(30,36,34,.08)}
.card .mark{transition:background .4s var(--ease),color .4s var(--ease)}
.card:hover .mark{background:var(--deep);color:#fff}

/* ---------- 流れ・声・仕事の枠にも、同じ浮き上がりを ---------- */
.flow li,.job,.voice{transition:background .4s var(--ease)}
.flow li:hover,.job:hover{background:color-mix(in srgb,var(--mist) 45%,var(--surface))}

/* ---------- 数字は等幅に（料金表・時刻・電話）---------- */
.day time,.spec dd,.tel,.lines,.job dd{font-variant-numeric:tabular-nums}

/* ---------- 節の変わり目に、細い罫線 ---------- */
section+section:not(.alt):not(.contact){border-top:1px solid var(--line)}
section.alt+section:not(.alt):not(.contact){border-top:0}

/* ---------- 動きを減らす設定の人には、動かさない ---------- */
@media (prefers-reduced-motion:reduce){
  #curtain{display:none!important}
  html.js .hero .photo img{animation:none;transform:none}
  html.js .hero h1 .ch,
  html.js body.hashero .hero-copy p,
  html.js body.hashero .hero .actions{opacity:1;transform:none}
  html.js .photo.rv img{transform:none}
  html.js .photo.rv::before{display:none}
}

/* ---------- トップのヒーローは画面いっぱいに ----------
   ヘッダーが写真の上に乗るぶん、上の余白を広くとっています。 */
body.hashero .hero{min-height:100svh;padding-block:9rem 4.5rem}
@media (max-width:50rem){body.hashero .hero{min-height:88svh;padding-block:7.5rem 3.5rem}}
/* 固定ヘッダーのぶん、ページ内リンクの着地点を下げる */
body.hashero [id]{scroll-margin-top:6rem}

/* ---------- 仕上げの微調整 ---------- */
/* ヒーローの上に、ヘッダーの文字が読めるだけの薄い膜をかける */
body.hashero .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:10rem;
  z-index:1;pointer-events:none}
body.hashero.hero-light .hero::before{
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,0) 100%)}
body.hashero.hero-dark .hero::before{
  background:linear-gradient(180deg,rgba(12,22,18,.5) 0%,rgba(12,22,18,0) 100%)}
body.hashero .hero .wrap{z-index:2}
/* ヒーローの直後だけは、罫線を引かない */
.hero+section{border-top:0}

/* 明朝の見出しは、どこも同じ字間にそろえる */
.hiring h2{letter-spacing:.075em;line-height:1.7}
.job h3,.flow strong{letter-spacing:.06em}
.voice blockquote{letter-spacing:.06em;position:relative;padding-left:1.6rem}
.voice blockquote::before{content:"“";position:absolute;left:0;top:-.15em;
  font-size:2.2rem;line-height:1;color:var(--brand);opacity:.55}

/* 求人の帯は、この事業所の主役。上下に細い線を入れて格を上げる */
.hiring{border-block:1px solid var(--line)}

/* 表の見出し行の字間 */
thead th{letter-spacing:.08em}

/* ============================================================
   トップのヒーロー：文字は下三分の一に収め、写真を主役にする
   ------------------------------------------------------------
   ・上の三分の二は、膜をかけずに写真そのものを見せる
   ・文字組みを一段小さくたたんで、下の帯に収まる高さにする
   ============================================================ */

/* 文字は最下段。上三分の二は空けておく */
body.hashero .hero{display:grid;grid-template-rows:2fr auto;align-items:end;
  padding-block:9rem 4rem}
body.hashero .hero>.wrap{grid-row:2}

/* 見出しをひとまわり小さく、行間も詰めて、下三分の一に収める */
body.hashero .hero h1{font-size:clamp(1.55rem,4.2vw,2.5rem);line-height:1.6;letter-spacing:.1em}
body.hashero .hero-copy{max-width:31rem;gap:1.05rem}
body.hashero .hero-copy p{font-size:.98rem;line-height:1.85}
body.hashero .hero .actions{margin-top:.15rem}
body.hashero .hero .btn{padding:.82rem 1.55rem;font-size:.88rem}

/* 写真にかける膜を、下三分の一だけにする（上は写真そのまま）*/
body.hashero .hero.light .photo::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.42) 68%,
    rgba(255,255,255,.86) 86%,
    rgba(255,255,255,.96) 100%)}
body.hashero:not(.hero-light) .hero .photo::after{
  background:linear-gradient(180deg,
    rgba(24,44,36,.18) 0%,
    rgba(24,44,36,.06) 46%,
    rgba(24,44,36,.52) 74%,
    rgba(24,44,36,.86) 100%)}

/* 上の膜は、ヘッダーの文字が読めるぶんだけに薄くする */
body.hashero .hero::before{height:7rem}
body.hashero.hero-light .hero::before{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 100%)}
body.hashero.hero-dark .hero::before{
  background:linear-gradient(180deg,rgba(12,22,18,.42) 0%,rgba(12,22,18,0) 100%)}

/* スマホは画面が縦長なので、もう一段たたむ */
@media (max-width:50rem){
  body.hashero .hero{padding-block:7rem 2.6rem}
  body.hashero .hero h1{font-size:clamp(1.42rem,5.6vw,1.85rem);line-height:1.62;letter-spacing:.06em}
  body.hashero .hero-copy{gap:.85rem}
  body.hashero .hero-copy p{font-size:.92rem;line-height:1.8}
  body.hashero .hero .actions{gap:.6rem}
  body.hashero .hero .btn{padding:.72rem 1.15rem;font-size:.82rem}
}

/* ---------- ヒーローの見出しを、横一行に ----------
   20文字 × 字間.1em ＝ 約22em。文字の幅より本文欄が広くなるように
   min() で頭を押さえてある。窮屈な画面では自然に2行へ折り返す。 */
@media (min-width:50.01rem){
  body.hashero .hero h1{font-size:min(2.8rem,3.75vw);line-height:1.5;letter-spacing:.1em;
    white-space:nowrap}
  body.hashero .hero-copy{max-width:41rem}
  body.hashero .hero-copy p{max-width:36rem}
}
/* スマホは1行に入らないので、「。」のところで折れる大きさにしてある。
   （見出しは1文字ずつ span に包まれるため、大きさで折り返し位置を決める）*/
@media (max-width:50rem){
  body.hashero .hero h1{font-size:clamp(1.5rem,7.6vw,1.95rem);line-height:1.62;letter-spacing:.06em}
}

/* ---------- 運営に関する公表事項（重要事項・運営規程・処遇改善）----------
   介護保険法の運営基準で、ウェブサイトへの掲載が求められている項目です。
   書類のPDFがまだ無いときは href を null にしておけば「準備中」と出ます。 */
.docs{background:var(--surface)}
.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doclist li{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;align-items:center;
  justify-content:space-between;padding:1.4rem .2rem;border-bottom:1px solid var(--line);
  transition:background .35s var(--ease)}
.doclist li:hover{background:var(--ground)}
.doclist li>div{min-width:min(100%,20rem);flex:1 1 22rem}
.doclist strong{display:block;font-family:var(--mincho);font-weight:600;
  font-size:1.06rem;letter-spacing:.06em;line-height:1.7}
.doclist span{display:block;font-size:.9rem;line-height:1.85;color:var(--ink-2);margin-top:.15rem}
.doclist a{display:inline-flex;align-items:center;gap:.55rem;flex:none;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--deep);white-space:nowrap;
  border:1px solid var(--line);border-radius:2px;padding:.62rem 1.25rem;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s}
.doclist a:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.doclist a i{font-style:normal;transition:transform .3s var(--ease)}
.doclist a:hover i{transform:translateX(.25rem)}
.doclist em{flex:none;font-style:normal;font-size:.78rem;letter-spacing:.08em;color:var(--ink-2);
  border:1px dashed var(--line);border-radius:2px;padding:.6rem 1.05rem;white-space:nowrap}
.docs .note{max-width:46rem}
@media (max-width:40rem){
  .doclist li{flex-direction:column;align-items:stretch}
  .doclist a,.doclist em{align-self:flex-start}
}

/* ---------- 募集要項の帯 ----------
   お約束とアクセスの間に移したので、前後のどちらとも違う色にして浮かせます。
   この帯がこのサイトの目的なので、少し温かい色を敷いています。 */
.hiring{background:var(--surface);
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  --sect-bg:var(--surface)}

/* ---------- 一行に収めたい文のための幅 ----------
   ヒーローの説明文と、中央寄せの節のリード文は、折り返さない長さで書いています。
   その長さが入るだけの幅を確保しておきます。 */
@media (min-width:50.01rem){
  body.hashero .hero-copy p{max-width:41rem}
  .center .sect-head p{max-width:41rem}
}

/* ---------- 募集要項へ飛ぶボタンは、少し縦長にして目方を持たせる ---------- */
.hiring .btn{padding:1.45rem 2.1rem;font-size:.97rem;letter-spacing:.04em}
@media (max-width:52rem){
  .hiring .actions{width:100%}
  .hiring .btn{padding:1.25rem 1.8rem;justify-content:center;width:100%}
}

/* ============================================================
   mood:"art" ── 塗装のための顔
   ------------------------------------------------------------
   塗装は「色そのもの」が商品なので、記録写真を並べる作りにしない。
   写真を大きく、余白を広く、文字を少なく。見出しはゴシックで字間を開ける。
   site.json の theme.mood を "art" にすると、ここが効く。
   ============================================================ */

/* 見出しは明朝をやめる。塗装は硬質なほうが色が立つ */
body.mood-art .logo b,body.mood-art .hero h1,body.mood-art .sect-head h2,body.mood-art .sect-head h1,
body.mood-art .split h2,body.mood-art .split h1,body.mood-art .hiring h2,body.mood-art .card h3,
body.mood-art .job h3,body.mood-art .contact h2,body.mood-art .voice blockquote,
body.mood-art .flow strong,body.mood-art .doclist strong,body.mood-art #drawer a,
body.mood-art #curtain b{font-family:var(--sans)}

/* 字間を大きく開ける。ここが「作品らしさ」の芯 */
body.mood-art .hero h1{font-weight:700;letter-spacing:.2em}
body.mood-art .sect-head h2,body.mood-art .sect-head h1,
body.mood-art .split h2,body.mood-art .split h1,
body.mood-art .hiring h2,body.mood-art .contact h2{font-weight:700;letter-spacing:.16em;line-height:1.85}
body.mood-art .card h3,body.mood-art .job h3,body.mood-art .doclist strong{letter-spacing:.12em}
body.mood-art .eyebrow{letter-spacing:.34em;font-size:.66rem}
body.mood-art .eyebrow::before{width:3rem}

/* 余白を広げる。詰まっていると作品に見えない */
body.mood-art section{padding-block:clamp(4.5rem,11vw,9rem)}
body.mood-art .sect-head{margin-bottom:clamp(2.8rem,6vw,4.5rem)}
body.mood-art .split{gap:clamp(2rem,7vw,5rem)}

/* 写真は縦に大きく。額装のように見せる */
body.mood-art .split .photo{aspect-ratio:4/5}
@media (max-width:52rem){body.mood-art .split .photo{aspect-ratio:4/3}}

/* カードの囲みを外す。線ではなく、色の一本で仕切る */
body.mood-art .card{background:transparent;border:0;border-top:2px solid var(--accent);
  border-radius:0;padding:1.5rem 0 0}
body.mood-art .card:hover{transform:translateY(-4px);box-shadow:none;border-top-color:var(--deep)}
body.mood-art .card .mark{display:none}
body.mood-art .cards{gap:clamp(1.6rem,4vw,3rem)}

/* 見積りの帯は、下地を敷かずに罫線だけで持たせる */
body.mood-art .hiring{background:transparent;border-block:1px solid var(--line)}

/* ヒーローの足元に、塗料の色見本の帯を一本通す。
   これが「色を売る店」だという合図になる。 */
body.mood-art .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.55rem;z-index:3;
  background:linear-gradient(90deg,
    var(--accent) 0 20%, #2E5E6B 20% 40%, #C9B36A 40% 60%, #7C8A72 60% 80%, #6E5A6B 80% 100%)}

/* 引用は大きく、作品の解説文のように */
body.mood-art .voice blockquote{font-size:1.14rem;line-height:2.05;letter-spacing:.08em}
body.mood-art .voice blockquote::before{color:var(--accent);opacity:.8}

/* ---------- カードの上に出す業種ラベル（ハブの見本一覧で使う）---------- */
.card .tag{align-self:flex-start;font-size:.7rem;letter-spacing:.14em;font-weight:600;
  color:var(--accent);border:1px solid currentColor;border-radius:2px;padding:.2rem .6rem}

/* ---------- site.json に書いた改行は、スマホでだけ効かせる ----------
   広い画面では改行を消して一続きに流し、折り返し位置はブラウザに決めさせる。
   日本語は語間に空白が要らないので、つないでも文が壊れない。 */
@media (min-width:50.01rem){ br.sp{display:none} }

/* ---------- ハブの「実際に公開しているサイト」カード ----------
   架空の見本と並ぶので、本物のほうが一目で分かるようにする。 */
.card.live{border-color:var(--accent);box-shadow:0 10px 30px rgba(30,36,34,.07)}
.card.live .tag{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---------- 施工実績 ----------
   写真が無くても読めることを優先している。
   建設は「何を、どこで、いつ」が分かれば元請けにも施主にも伝わる。 */
.worklist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
@media (max-width:52rem){.worklist{grid-template-columns:1fr}}
.worklist li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:2px;padding:1.5rem clamp(1.2rem,3vw,1.7rem);
  display:flex;flex-direction:column;gap:.65rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.worklist li:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(30,36,34,.08)}
.worklist .meta{margin:0;font-size:.74rem;letter-spacing:.12em;color:var(--ink-2)}
.worklist h3{margin:0;font-family:var(--mincho);font-weight:600;
  font-size:1.1rem;letter-spacing:.06em;line-height:1.7}
.worklist p{margin:0;font-size:.94rem;color:var(--ink-2)}
.worklist .photo{margin-bottom:.4rem;aspect-ratio:16/9}
.worklist .tags{margin-top:.25rem}
.worklist .tags li{background:var(--mist);border-color:transparent;font-size:.8rem;padding:.32rem .8rem}

/* 塗装（mood:"art"）は囲みを外して、色の一本線だけで仕切る */
body.mood-art .worklist li{background:transparent;border:0;border-top:2px solid var(--accent);
  border-radius:0;padding:1.4rem 0 0}
body.mood-art .worklist li:hover{box-shadow:none;border-top-color:var(--deep)}
body.mood-art .worklist h3{font-family:var(--sans);font-weight:700;letter-spacing:.12em}
body.mood-art .worklist .tags li{background:transparent;border:1px solid var(--line)}

/* ---------- 連絡先の並び（電話・メールを1行ずつ）----------
   ボタンだけだと、電話番号とアドレスを控えられない。
   スマホでは押せて、パソコンでは目で読める形にしておく。 */
.lines{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.2rem;max-width:34rem}
.lines li{display:flex;align-items:baseline;gap:1rem;
  padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.22)}
.lines li:last-child{border-bottom:0}
.lines small{flex:none;width:3.4rem;font-size:.74rem;letter-spacing:.14em;color:rgba(255,255,255,.65)}
.lines a{color:#fff;text-decoration:none;word-break:break-all;
  border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
.lines a:hover{border-bottom-color:#fff}
.contact .note{color:rgba(255,255,255,.68);margin-top:1.1rem}