@charset "UTF-8";
/* ============================================================
   laulea.css — Laulea Hale page (A案), from the v2 sample laulea-hale.html.
   Loaded after common.css on page-laulea-hale.php only (inc/enqueue.php).
   Not here (common.css): shared header/footer (gh-/gf-), skip link, .sr-only, CF7 form fields (.su-form).
   Removed from the sample: the design-sample label, the sample form, the 協力医療機関 note/placeholder rows.
   ============================================================ */

/* ===== Design tokens (A: Laulea Hale / house of happiness) ===== */
:root{
  --cream:#FBF7F1;
  --cream-2:#F4ECE1;
  --paper:#FFFFFF;
  --ink:#2B2420;
  --ink-2:#5E534B;
  --pink:#C8285A;        /* logo hibiscus. 5.04:1 on cream */
  --pink-ink:#AD1F4C;    /* body-text pink. 6.39:1 on cream */
  --pink-soft:#F7E6EA;
  --pink-light:#F2C6D3;
  --green:#1F4D3A;
  --green-2:#2F6B52;
  --green-soft:#EAF1EC;
  --blue:#2E6FB0;
  --teal-ink:#0F6B66;
  --line:#E6DACB;
  --radius-xl:36px;
  --radius-lg:28px;
  --radius:18px;
  --shadow:0 24px 48px -28px rgba(43,36,32,.38);
  --shadow-sm:0 10px 24px -16px rgba(43,36,32,.35);
  --font-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --header-h:64px;  /* matches shared header .gh (--gh-h) */
  --crumb-h:48px;   /* breadcrumb row overlaid at the top of the hero */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
/* Base. common.css already has box-sizing, body font (17px), overflow-x:clip, .sr-only and
   html scroll-padding-top (so the sample's section[id]{scroll-margin-top} is not repeated: it would add up).
   The sample's element rules are scoped to <main> so the shared header/footer keep their own look. */
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);line-height:1.85;font-feature-settings:"palt" 0}
main img{max-width:100%;height:auto;display:block}
main picture{display:contents} /* WebP wrapper: the <img> keeps its original box, so existing img rules still apply */
main a{color:var(--pink-ink);text-underline-offset:.2em}
main a:hover{text-decoration-thickness:2px}
main h1,main h2,main h3{font-family:var(--font-serif);font-weight:700;line-height:1.45;margin:0;letter-spacing:.02em}
main p{margin:0 0 1em}
main :focus-visible{outline:3px solid var(--pink-ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:#FFE3EC}
.wrap{width:min(1160px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.7em 1.6em;border-radius:999px;border:2px solid transparent;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.3;
  transition:transform .25s var(--ease-out),box-shadow .25s,background-color .25s,color .25s;
}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 12px 24px -12px rgba(200,40,90,.7)}
.btn-pink:hover{background:var(--pink-ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-light{background:#fff;color:var(--green)}
.btn-light:hover{background:var(--pink-soft);transform:translateY(-2px)}
.btn-lg{min-height:58px;padding:.85em 2.1em;font-size:1.125rem}


/* ===== Breadcrumb (template-parts/breadcrumb.php with class "crumb"; overlaid on the hero under the fixed header) ===== */
.crumb{position:absolute;left:0;right:0;top:var(--header-h);z-index:3;pointer-events:none;font-size:.9375rem;line-height:1.5}
.crumb ol{width:min(1160px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);flex-wrap:nowrap;gap:6px;min-height:var(--crumb-h);color:var(--ink-2)}
.crumb li{gap:6px;pointer-events:auto}
.crumb li+li::before{content:"＞";content:"＞"/"";color:var(--ink-2);opacity:1}
.crumb a{min-height:44px;padding:0 4px;color:var(--pink-ink);text-decoration:underline;text-underline-offset:.25em}
.crumb a:hover{text-decoration-thickness:2px}
.crumb a:focus-visible{outline-color:var(--pink-ink)}
@media (max-width:767px){
  /* the hero shade is lightest at the top on phones: give the trail the same backing as .motion-toggle */
  .crumb ol{display:inline-flex;width:auto;min-height:44px;margin:2px 0 0 12px;padding-inline:12px;background:rgba(255,252,245,.9);border-radius:999px}
}

/* ===== Page index (in-page links, right after the hero) ===== */
.page-toc{background:var(--paper);border-bottom:1px solid var(--line)}
.page-toc .wrap{display:flex;align-items:center;gap:16px}
.page-toc-label{flex:none;margin:0;font-size:.9375rem;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.page-toc ul{list-style:none;margin:0;padding:8px 0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.page-toc ul::-webkit-scrollbar{display:none}
.page-toc li{flex:none}
.page-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:500;font-size:1rem;white-space:nowrap}
.page-toc a:hover{background:var(--pink-soft);color:var(--pink-ink)}
.page-toc a:focus-visible{outline-offset:-3px}
@media (max-width:767px){
  .page-toc .wrap{padding-inline:0}
  .page-toc-label{display:none}
  .page-toc ul{padding:6px clamp(12px,4vw,20px);scroll-padding-inline:clamp(12px,4vw,20px)}
}

/* ===== Flower (signature) ===== */
.bloom .leaf{transform-box:fill-box;transform-origin:0% 50%}
.bloom .petal{transform-box:fill-box;transform-origin:50% 100%}
.bloom .core{transform-box:fill-box;transform-origin:50% 50%}
.bloom.play .leaf{animation:leafGrow .9s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0) * .12s)}
.bloom.play .petal{animation:petalOpen 1.05s cubic-bezier(.25,.8,.25,1.12) both;animation-delay:calc(.45s + var(--i) * .17s)}
.bloom.play .core{animation:corePop .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:1.45s}
@keyframes leafGrow{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:none}}
@keyframes petalOpen{0%{opacity:0;transform:scale(.12) rotate(-38deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes corePop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}

/* section mark */
.mark{width:1.15em;height:1.15em;flex:none;vertical-align:-.12em}
.sec-head{max-width:900px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{font-family:var(--font-sans);font-size:.8125rem;font-weight:700;letter-spacing:.28em;color:var(--pink-ink);margin:0 0 .6em}
.sec-title{display:flex;align-items:center;gap:.45em;font-size:clamp(1.6rem,3.4vw,2.3rem);text-wrap:balance}
.sec-head.center .sec-title{justify-content:center}
.sec-lead{margin-top:1em;color:var(--ink-2);font-size:1.0625rem}
html.js .sec-title .mark{transform:scale(.2) rotate(-90deg);opacity:0;transition:transform .9s cubic-bezier(.3,1.4,.5,1),opacity .5s}
html.js .sec-head.is-in .sec-title .mark{transform:none;opacity:1}

.section{padding-block:clamp(72px,11vw,140px)}
.section.tint{background:var(--cream-2)}

/* reveal */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--rd,0s)}
html.js .reveal.is-in{opacity:1;transform:none}

/* ===== Hero ===== */
/* 2026-10-09 代表承認 案5「生成りの覆い」: 深緑の下地と覆いを紙の色に、文字を墨に。写真と配置は従来のまま */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#FFFCF5;color:var(--ink);padding-top:calc(var(--header-h) + var(--crumb-h))}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:brightness(1.15) saturate(1.05);transform-origin:64% 48%;animation:kenburns 26s ease-in-out infinite alternate}
.hero.is-paused .hero-media img{animation-play-state:paused}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.14) translate(-1.2%,-.8%)}}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,252,245,.92) 0%,rgba(255,252,245,.78) 38%,rgba(255,252,245,.14) 70%,rgba(255,252,245,0) 100%),
  linear-gradient(0deg,rgba(255,252,245,.45),rgba(255,252,245,0) 40%)}
.hero-inner{position:relative;z-index:1;padding-block:56px 96px}
.hero .bloom{width:clamp(88px,10vw,124px);height:auto;margin-bottom:18px;filter:drop-shadow(0 10px 22px rgba(27,35,40,.16))}
.hero-eyebrow{font-size:clamp(1.0625rem,.9rem + .6vw,1.375rem);letter-spacing:.2em;font-weight:500;word-break:auto-phrase;color:var(--pink-ink);margin-bottom:.8em}
.hero-title{font-size:clamp(2.6rem,7.4vw,5.4rem);line-height:1.25;letter-spacing:.06em;font-weight:700}
.hero-title .line{display:block}
/* eyebrow now lives inside h1 (SEO): keep the former <p> look (sans, body line-height, no title shadow) */
.hero-title .hero-eyebrow{display:block;font-family:var(--font-sans);line-height:1.85;text-shadow:none}
.hero-title .h1-sub{display:block;margin-top:.7em;font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:.14em;font-weight:500;color:var(--pink-ink)}
.hero-title .h1-sub span[lang="en"]{font-family:var(--font-sans);font-size:.85em;letter-spacing:.2em;margin-left:.6em}
.hero-lead{margin:1.4em 0 2em;font-size:clamp(1.0625rem,1.6vw,1.1875rem);max-width:30em;color:var(--ink)}
/* 2026-10-10 代表指示: the eyebrow and the lead (the page's largest texts = LCP) are shown from the first paint, not faded in; the rest keep the reveal */
html.js .hero-title .line,html.js .hero-title .h1-sub,html.js .hero-cta,html.js .hero-vac{
  opacity:0;transform:translateY(.7em);filter:blur(8px);
  animation:lineIn 1.2s var(--ease-out) forwards;animation-delay:var(--d)
}
@keyframes lineIn{to{opacity:1;transform:none;filter:none}}
/* Facility name, large and soft over the hibiscus (2026-10-05 代表指示): after the two lines, it fades in to the right of
   them, at the height between the lines. Decorative (aria-hidden): the name is still read from .h1-sub below. */
.hero-title .hero-lines{position:relative;display:inline-block;vertical-align:top}
.hero-name{
  position:absolute;left:calc(100% + clamp(28px,4vw,72px));top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--font-serif);font-weight:500;line-height:1;
  font-size:clamp(2.5rem,5vw,4.6rem);letter-spacing:.16em;color:#AD1F4C;opacity:.94;font-weight:700;
  /* 2026-10-09 代表指示「もう少し目立つよう」: 濃いピンク・太字・紙色の縁取りを濃くしてハイビスカスの上でも読めるように */
  text-shadow:0 0 2px rgba(255,252,245,1),0 0 4px rgba(255,252,245,1),0 0 12px rgba(255,252,245,.95),0 0 28px rgba(255,252,245,.8),0 0 56px rgba(255,252,245,.6);
  pointer-events:none
}
html.js .hero-name{opacity:0;filter:blur(10px);letter-spacing:.04em;animation:nameIn 2.6s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d)}
@keyframes nameIn{to{opacity:.94;filter:none;letter-spacing:.16em}}
/* ...and the small「ラウレアハレ」below hands over to it: it fades out with the same timing, then closes up so that
   「Laulea Hale」moves to the start of the line. Final state is the base style (reduced motion / no JS show it at once).
   Still in the DOM (opacity / width only), so a screen reader keeps reading the name here. */
.hero-title .h1-sub-ja{display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;max-width:0;opacity:0}
.hero-title .h1-sub span[lang="en"]{margin-left:0}
html.js .hero-title .h1-sub-ja{animation:subOut 2.4s cubic-bezier(.4,0,.2,1) both;animation-delay:3.2s}
html.js .hero-title .h1-sub span[lang="en"]{animation:subClose 2.4s cubic-bezier(.4,0,.2,1) both;animation-delay:3.2s}
@keyframes subOut{0%{opacity:1;max-width:8em}55%{opacity:0;max-width:8em}100%{opacity:0;max-width:0}}
@keyframes subClose{0%,55%{margin-left:.6em}100%{margin-left:0}}
@media (max-width:767px){
  /* no room on the right on phones: a small vertical name at the right edge, between the two lines */
  .hero-title .hero-lines{display:block}
  .hero-name{left:auto;right:calc(-1 * clamp(4px,2vw,12px));top:.2em;transform:none;writing-mode:vertical-rl;font-size:1.4rem;letter-spacing:.14em}
  html.js .hero-name{letter-spacing:.02em}
  @keyframes nameIn{to{opacity:.94;filter:none;letter-spacing:.14em}}
}
.motion-toggle{
  position:absolute;z-index:2;right:clamp(12px,3vw,32px);top:calc(var(--header-h) + (var(--crumb-h) - 44px) / 2);
  min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(27,35,40,.45);
  background:rgba(255,252,245,.86);color:var(--ink);font:inherit;font-size:1rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px
}
.motion-toggle:hover{background:#FFFFFF}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1;width:2px;height:48px;background:rgba(27,35,40,.22);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;inset:0;background:var(--pink);transform:translateY(-100%);animation:cue 2.4s ease-in-out infinite}
.hero.is-paused .scroll-cue::after{animation-play-state:paused}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (min-width:900px){
  .hero-media{left:30%}
  .hero-shade{background:
    linear-gradient(90deg,#FFFCF5 0%,#FFFCF5 34%,rgba(255,252,245,.9) 44%,rgba(255,252,245,.3) 64%,rgba(255,252,245,0) 82%),
    linear-gradient(0deg,rgba(255,252,245,.45),rgba(255,252,245,0) 40%)}
}
@media (max-width:767px){
  .hero{align-items:flex-end;min-height:calc(100svh - 76px)}
  .hero-media img{object-position:66% 40%}
  .hero-shade{background:linear-gradient(0deg,rgba(255,252,245,.97) 0%,rgba(255,252,245,.93) 55%,rgba(255,252,245,.84) 78%,rgba(255,252,245,.6) 100%)}
  .hero-inner{padding-block:0 96px} /* breadcrumb row (--crumb-h) now takes the former 40px top space */
  .scroll-cue{display:none}
  .motion-toggle{top:calc(var(--header-h) + var(--crumb-h) + 4px);right:12px;background:rgba(255,252,245,.92)}
}

/* ===== 1. Support system ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:clamp(40px,6vw,64px);overflow:hidden}
.stat{padding:28px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat dt{font-size:1rem;color:var(--ink-2);font-weight:500}
.stat dd{margin:0;white-space:nowrap;font-family:var(--font-serif);font-weight:700;color:var(--green);font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.2}
.stat dd small{font-size:1.125rem;margin-left:.15em;font-family:var(--font-sans);font-weight:700}
@media (max-width:767px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:22px 8px}
  .stat dd{font-size:2rem}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
.card{
  position:relative;background:var(--paper);border-radius:var(--radius-lg);padding:clamp(26px,3vw,36px);
  box-shadow:var(--shadow);overflow:hidden
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--pink)}
.card:nth-child(2)::before{background:var(--green-2)}
.card:nth-child(3)::before{background:var(--blue)}
.card-num{font-size:.875rem;letter-spacing:.24em;font-weight:700;color:var(--ink-2);margin-bottom:.4em}
.card-figure{font-family:var(--font-serif);font-weight:700;color:var(--pink-ink);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.1;margin:.1em 0 .25em}
.card:nth-child(2) .card-figure{color:var(--green)}
.card:nth-child(3) .card-figure{color:#1F5F99}
.card-figure small{font-size:.42em;margin-left:.2em;font-family:var(--font-sans)}
.card h3,.card h4{font-family:var(--font-serif);font-weight:700;line-height:1.45;font-size:1.375rem;margin:0 0 .6em;word-break:auto-phrase;text-wrap:balance}
.card-figure small.pre{margin:0 .2em 0 0}
.card-night{margin-top:.8em;padding:.7em .9em;border-radius:12px;background:var(--pink-soft,#F7E6EA);color:var(--ink)}
.card p.card-night{color:var(--ink)}
/* 医療の充実 (2 cards under the three) */
.sys-sub{margin:clamp(40px,6vw,64px) 0 clamp(16px,2.4vw,24px);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sys-sub .eyebrow{margin:0}
.sys-sub__title{font-size:clamp(1.5rem,2.6vw,1.875rem)}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.cards2 .card:nth-child(1)::before{background:var(--green-2)}
.cards2 .card:nth-child(1) .card-figure{color:var(--green)}
.cards2 .card:nth-child(2)::before{background:var(--blue)}
.cards2 .card:nth-child(2) .card-figure{color:#1F5F99}
@media (max-width:900px){.cards2{grid-template-columns:1fr}}
.card p{margin:0;color:var(--ink-2)}
.card p + p{margin-top:.6em}

/* ===== 2. A day timeline ===== */
.tl-wrap{position:relative}
.tl{position:relative;list-style:none;margin:0;padding:0}
.tl-line{position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:var(--line);border-radius:4px}
.tl-line-fill{position:absolute;inset:0;background:linear-gradient(180deg,#F2A9BF,var(--pink) 40%,var(--green-2));border-radius:4px;transform-origin:top;transform:scaleY(0)}
html:not(.js) .tl-line-fill{transform:none}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding-block:clamp(20px,3vw,36px)}
.tl-time{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;
  width:84px;height:84px;border-radius:50%;background:var(--paper);border:4px solid var(--pink);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;font-size:1.25rem;color:var(--pink-ink);box-shadow:var(--shadow-sm)}
.tl-item:nth-child(n+7) .tl-time{border-color:var(--green-2);color:var(--green)}
.tl-media{grid-row:1;margin:0;position:relative}
.tl-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.tl-text{grid-row:1}
.tl-text h3{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-bottom:.4em}
.tl-text p{margin:0;color:var(--ink-2)}
.tl-item.odd .tl-media{grid-column:1;padding-right:clamp(12px,2vw,28px)}
.tl-item.odd .tl-text{grid-column:3;padding-left:clamp(12px,2vw,28px)}
.tl-item.even .tl-media{grid-column:3;padding-left:clamp(12px,2vw,28px)}
.tl-item.even .tl-text{grid-column:1;padding-right:clamp(12px,2vw,28px);text-align:right}
html.js .tl-item .tl-media{opacity:0;transform:translateX(-36px) scale(.97);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
html.js .tl-item.even .tl-media{transform:translateX(36px) scale(.97)}
html.js .tl-item .tl-text{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-out) .15s,transform 1s var(--ease-out) .15s}
html.js .tl-item .tl-time{transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .4s}
html.js .tl-item.is-in .tl-media,html.js .tl-item.is-in .tl-text{opacity:1;transform:none}
html.js .tl-item.is-in .tl-time{opacity:1;transform:none}
@media (max-width:767px){
  .tl-line{left:30px}
  .tl-item{grid-template-columns:60px 1fr;row-gap:14px;align-items:start}
  .tl-time{grid-column:1;grid-row:1 / span 2;width:60px;height:60px;font-size:1.0625rem;align-self:start;border-width:3px}
  .tl-item.odd .tl-media,.tl-item.even .tl-media{grid-column:2;grid-row:1;padding:0 0 0 16px}
  .tl-item.odd .tl-text,.tl-item.even .tl-text{grid-column:2;grid-row:2;padding:0 0 0 16px;text-align:left}
  html.js .tl-item.odd .tl-media,html.js .tl-item.even .tl-media{transform:translateY(24px)}
}

/* ===== 3. Monthly fee ===== */
.fee-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(32px,5vw,48px)}
@media (max-width:900px){.fee-hero{grid-template-columns:1fr}}
.fee-range-label{font-weight:700;color:var(--ink-2);margin-bottom:.2em}
.fee-range{font-family:var(--font-serif);font-weight:700;color:var(--pink-ink);font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.15;letter-spacing:.01em;margin:0}
.fee-range small{font-size:.4em;margin-left:.1em;font-family:var(--font-sans);color:var(--ink)}
.fee-range .tilde{color:var(--ink-2);font-size:.6em;margin-inline:.1em}
.fee-mech{background:var(--green);color:#fff;border-radius:var(--radius-lg);padding:24px 28px;margin:0}
.fee-mech strong{display:block;text-wrap:balance;font-family:var(--font-serif);font-size:1.3rem;margin-bottom:.3em;color:#fff}
.fee-mech strong.fee-free{margin:.7em 0 0} /* 「敷金などの一時金はいただいておりません。」 after the mechanism text */
.fee-panel{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(22px,4vw,44px)}
.lv-label{font-weight:700;margin-bottom:.6em;display:block}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:28px}
.lv{
  min-height:64px;border-radius:var(--radius);border:2px solid var(--line);background:var(--cream);
  color:var(--ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:8px 4px;
  transition:background-color .25s,border-color .25s,color .25s,transform .25s
}
.lv:hover{border-color:var(--pink)}
.lv .lv-k{font-size:1rem;font-weight:500}
.lv .lv-k b{font-family:var(--font-serif);font-size:1.5rem;margin-left:.1em}
.lv .lv-m{font-size:1rem;color:var(--ink-2)}
.lv[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff;transform:translateY(-2px)}
.lv[aria-pressed="true"] .lv-m{color:#fff}
@media (max-width:640px){.lv .lv-m,.lv .lv-k span{display:none}.lv .lv-k b{font-size:1.6rem}}
.fee-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:18px}
.fee-result .fr-lv{font-weight:700;font-size:1.125rem}
.fee-result .fr-total{font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,4.4vw,2.9rem);color:var(--ink);line-height:1.2}
.fee-result .fr-total small{font-size:.45em;font-family:var(--font-sans);margin-left:.15em}
.fr-total .nw,.creed footer .nw{white-space:nowrap} /* Zen Kaku: on narrow screens break before （税込概算）, not inside it */
.fee-result .fr-note{color:var(--ink-2);font-size:1rem}
.bar{display:flex;height:64px;border-radius:16px;overflow:hidden;background:var(--cream-2);margin-bottom:12px}
.seg{height:100%;width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;font-weight:700;font-size:1rem;transition:width 1.1s var(--ease-out)}
.seg + .seg{box-shadow:inset 2px 0 0 #fff}
.seg-rent{background:var(--green);color:#fff;transition-delay:.05s}
.seg-util{background:#8DB39C;color:var(--ink);transition-delay:.2s}
.seg-food{background:var(--pink);color:#fff;transition-delay:.35s}
.seg-mgmt{background:#EDA9BD;color:var(--ink);transition-delay:.5s}
.bar.is-set .seg{transition-delay:0s}
.seg span{padding-inline:6px}
html:not(.js) .seg{width:var(--w)} /* --w is printed by the template from inc/site-data.php */
.bar-scale{display:flex;justify-content:space-between;color:var(--ink-2);font-size:1rem;margin-bottom:24px}
.fee-table{width:100%;border-collapse:collapse;font-size:1.0625rem}
.fee-table caption{text-align:left;font-weight:700;margin-bottom:.5em}
.fee-table th,.fee-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.fee-table th:first-child,.fee-table td:first-child{text-align:left}
.fee-table thead th{font-size:1rem;color:var(--ink-2);font-weight:500}
.fee-table tbody th{font-weight:700}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-1px}
.fee-table tfoot th,.fee-table tfoot td{font-weight:700;border-bottom:0;font-size:1.125rem}
.fee-table .is-flash{animation:flash .9s ease}
@keyframes flash{from{background:var(--pink-soft)}to{background:transparent}}
@media (max-width:560px){
  .fee-table{font-size:1rem}
  .fee-table th,.fee-table td{padding:10px 6px}
  .fee-table .col-rate{display:none}
}
.fee-est{margin-top:24px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,2.6vw,24px) clamp(14px,2.6vw,24px)}
.fee-est-h{font-size:1.125rem;margin-bottom:.4em}
.fee-est-table th:first-child{font-weight:500}
.fee-est-table tfoot th,.fee-est-table tfoot td{font-weight:700;color:var(--pink-ink)}
.fee-est-table td{white-space:nowrap}
.fee-est-note{margin:.8em 0 0;font-size:1rem;color:var(--ink-2)}
.fee-notes{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.fee-notes li{position:relative;padding-left:1.3em;color:var(--ink-2)}
.fee-notes li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.fee-notes li.em{color:var(--ink);font-weight:700}

/* ===== 4. Three offices ===== */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:900px){.offices{grid-template-columns:1fr}}
.office{background:var(--paper);border-radius:var(--radius-xl);padding:clamp(26px,3vw,36px);box-shadow:var(--shadow);text-align:center;border-top:6px solid var(--pink);display:flex;flex-direction:column}
.office.blue{border-top-color:var(--blue)}
.office.teal{border-top-color:#2A9D96}
.office-flower{width:112px;height:112px;object-fit:contain;margin:0 auto 14px;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.office:hover .office-flower,.office:focus-within .office-flower{transform:rotate(24deg) scale(1.06)}
.office-kind{font-size:1rem;color:var(--ink-2);margin-bottom:.2em}
.office h3{font-size:1.6rem;margin-bottom:.5em}
.office.pink h3{color:var(--pink-ink)}
.office.blue h3{color:#1F5F99}
.office.teal h3{color:var(--teal-ink)}
.office p{color:var(--ink-2);text-align:left;margin:0}
.office p.office-kind{text-align:center;margin-bottom:.2em}
.office p.office-more{margin-top:auto;padding-top:20px;text-align:center}
.office-more a{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.4em;border-radius:999px;border:2px solid currentColor;font-weight:700;text-decoration:none;transition:background-color .25s,color .25s}
.office.blue .office-more a{color:#1F5F99}
.office.teal .office-more a{color:var(--teal-ink)}
.office.blue .office-more a:hover{background:#1F5F99;color:#fff}
.office.teal .office-more a:hover{background:var(--teal-ink);color:#fff}
.office-more svg{width:16px;height:16px;flex:none}
/* What each office does (list under the card text). The dot takes the office color. */
.office-list{list-style:none;margin:14px 0 0;padding:0;text-align:left;display:grid;gap:4px}
.office-list li{position:relative;padding-left:1.2em;font-size:1rem;line-height:1.7;color:var(--ink-2)}
.office-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.office.blue .office-list li::before{background:var(--blue)}
.office.teal .office-list li::before{background:#2A9D96}
.office-foot{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
@media (max-width:900px){.office-foot{grid-template-columns:1fr}}
.office-foot p{margin:0;color:var(--ink-2)}
.creed{margin:0;padding:22px 28px;border-left:4px solid var(--pink);background:var(--paper);border-radius:0 var(--radius) var(--radius) 0}
.creed p{font-family:var(--font-serif);font-size:1.125rem;line-height:1.9;font-weight:700;color:var(--ink);margin:0} /* the full company creed (long): smaller than the former one-line motto */
.creed footer{margin-top:.4em;color:var(--ink-2);font-size:1rem}

/* ===== 5. Inside the building: gallery ===== */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gallery-btns{display:flex;gap:10px;margin-bottom:clamp(32px,5vw,56px)}
.gbtn{width:52px;height:52px;border-radius:50%;border:2px solid var(--green);background:transparent;color:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center}
.gbtn:hover{background:var(--green);color:#fff}
.gbtn svg{width:22px;height:22px}
/* auto flow (laulea.js): pause / play. Shown only when the flow can run (no reduced motion). */
.gallery-btns{align-items:center}
.gauto{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;border:2px solid var(--green);background:#fff;color:var(--green);font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.gauto[hidden]{display:none}
.gauto:hover{background:var(--green);color:#fff}
.gauto svg{width:16px;height:16px;flex:none}
.gauto .gauto__play{display:none}
.gauto.is-paused .gauto__play{display:block}
.gauto.is-paused .gauto__pause{display:none}
.gallery.is-flow{scroll-snap-type:none}
/* chips above the strip (laulea.js unhides them): one line; on a phone the line scrolls sideways instead of wrapping */
.g-cats{display:flex;flex-wrap:wrap;gap:8px;margin:calc(-1 * clamp(16px,3vw,32px)) 0 clamp(14px,2vw,20px)}
.g-cats[hidden]{display:none}
.g-cat{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line,#d8d2c8);background:#fff;color:var(--ink);font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;white-space:nowrap}
.g-cat:hover{border-color:var(--green)}
.g-cat[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:599px){.g-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(20px,5vw,48px));padding-inline:clamp(20px,5vw,48px)}.g-cats::-webkit-scrollbar{display:none}}
@media (max-width:599px){.gauto span{font-size:.9375rem}}
.g-track{display:flex;align-items:flex-start;gap:clamp(14px,2vw,24px);width:max-content;margin:0;padding:0;list-style:none}
.gallery{
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px clamp(20px,5vw,48px) 24px;margin:0;
  scroll-padding-inline:clamp(20px,5vw,48px);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--pink) transparent
}
.gallery:focus-visible{outline-offset:-3px}
.g-item{flex:0 0 auto;width:min(420px,78vw);scroll-snap-align:start;margin:0}
.g-item.wide{width:min(760px,86vw)}
.g-item.small{width:min(360px,72vw)}
.g-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.g-item.small img{aspect-ratio:3/2}
.g-item figcaption{margin-top:12px;font-size:1rem;color:var(--ink-2)}
/* the photo is a button that opens the large view (laulea.js) */
.g-zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-lg)}
.g-zoom:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.g-view{width:min(1100px,96vw);max-height:96vh;padding:0;border:0;border-radius:var(--radius-lg);background:#111;color:#fff;overflow:hidden}
.g-view::backdrop{background:rgba(10,16,18,.82)}
.g-view__fig{margin:0;display:flex;flex-direction:column;align-items:center}
.g-view__fig img{display:block;width:100%;max-height:calc(96vh - 130px);object-fit:contain;background:#111}
.g-view__fig figcaption{padding:12px 16px 0;font-weight:700;font-size:1.0625rem}
.g-view__bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px 16px}
.g-view .gbtn{border-color:#fff;color:#fff}
.g-view .gbtn:hover{background:#fff;color:#111}
.g-view__count{min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums}
.g-view__close{min-height:48px;padding:0 20px;margin-left:8px;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.g-view__close:hover{background:#fff;color:#111}
.g-item figcaption b{color:var(--ink);font-weight:700;margin-right:.5em}
@media (min-width:1260px){.gallery{padding-inline:calc((100vw - 1160px)/2 + 48px);scroll-padding-inline:calc((100vw - 1160px)/2 + 48px)}}
.facility-notes{margin-top:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.facility-notes{grid-template-columns:1fr}}
.facility-notes p{margin:0;color:var(--ink-2)}

/* ===== 5a. Steps to moving in (like the recruit page's 応募の流れ, in this page's colors) ===== */
.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
@media (max-width:900px){.flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow-steps{grid-template-columns:minmax(0,1fr)}}
.flow-step{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px 24px;display:grid;gap:6px;align-content:start}
.flow-step .n{font-family:var(--font-serif);font-weight:700;font-size:2.2rem;line-height:1;color:var(--pink-ink)}
.flow-step .w{font-family:var(--font-serif);font-weight:700;font-size:1.25rem;line-height:1.45;color:var(--ink)}
.flow-step .d{font-size:1rem;line-height:1.75;color:var(--ink-2)}
.flow-step:last-child{background:var(--green)}
.flow-step:last-child .n{color:var(--pink-light)}
.flow-step:last-child .w{color:#fff}
.flow-note{margin:clamp(20px,3vw,28px) 0 0;max-width:900px;color:var(--ink-2)}

/* ===== 5a'. FAQ (details/summary, like the recruit page's FAQ) ===== */
.faq-list{max-width:900px;display:grid;gap:12px}
.faq-list details{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-list details[open]{border-color:var(--pink-light)}
.faq-list summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;padding:12px 60px 12px 20px;position:relative;font-weight:700;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";content:"+"/"";position:absolute;right:16px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;
  background:var(--pink);color:#fff;display:grid;place-items:center;font-size:22px;line-height:1;font-weight:700;
  transition:transform .35s var(--ease-out)
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{background:var(--pink-soft)}
.faq-list summary:focus-visible{outline-offset:-3px;border-radius:var(--radius)}
.faq-a{padding:0 20px 18px}
.faq-a p{margin:0;color:var(--ink-2)}

/* ===== 5b. Facility overview ===== */
.ov-section{padding-top:0} /* follows the FAQ section on the same cream background */
.ov-panel{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(22px,4vw,44px)}
.ov-table{width:100%;border-collapse:collapse;font-size:1.0625rem}
.ov-table th,.ov-table td{padding:14px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ov-table th{width:12em;font-weight:700;color:var(--ink)}
.ov-table tr:last-child th,.ov-table tr:last-child td{border-bottom:0}
.ov-note{margin:18px 0 0;color:var(--ink-2)}
@media (max-width:560px){
  .ov-table{font-size:1rem}
  .ov-table th{width:7.5em}
  .ov-table th,.ov-table td{padding:12px 6px}
}

/* ===== 6. Access ===== */
.access{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.access{grid-template-columns:1fr}}
.map-wrap{margin:0}
.map-svg{width:100%;height:auto;display:block;border-radius:var(--radius-xl);box-shadow:var(--shadow);background:#F1E7D8}
.map-wrap figcaption{margin-top:10px;font-size:1rem;color:var(--ink-2)}
.walk-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-out) .3s}
html:not(.js) .walk-draw,.map-wrap.is-in .walk-draw{stroke-dashoffset:0}
.map-pin{transform-box:fill-box;transform-origin:50% 100%}
html.js .map-wrap .map-pin{transform:translateY(-30px);opacity:0;transition:transform .8s cubic-bezier(.3,1.5,.5,1) 1.8s,opacity .4s 1.8s}
html.js .map-wrap.is-in .map-pin{transform:none;opacity:1}
.access-info dl{margin:0 0 24px;display:grid;gap:18px}
.access-info dt{font-weight:700;color:var(--pink-ink);font-size:1rem;letter-spacing:.1em}
.access-info dd{margin:0;font-size:1.125rem}
.access-info .big{font-family:var(--font-serif);font-weight:700;font-size:1.6rem;color:var(--green)}
.access-illust{margin:28px 0 0}
.access-illust img{border-radius:var(--radius-lg);width:100%;aspect-ratio:1566/811;object-fit:cover}
.access-illust figcaption{font-size:1rem;color:var(--ink-2);margin-top:8px}
.ext-note{font-size:1rem;color:var(--ink-2);margin-top:.5em}
.map-links{display:flex;flex-wrap:wrap;gap:10px}
.map-embed-ctl{margin-top:4px}
.map-embed{margin-top:14px;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:#F1E7D8;box-shadow:var(--shadow-sm)}
.map-embed[hidden]{display:none}
.map-embed iframe{display:block;width:100%;height:100%;border:0}

/* ===== 7. Recruit band ===== */
.recruit-band{background:var(--green);color:#fff;padding-block:clamp(36px,5vw,56px);position:relative;overflow:hidden}
.recruit-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:clamp(18px,3vw,40px);align-items:center}
@media (max-width:900px){.recruit-inner{grid-template-columns:1fr}}
.recruit-band .eyebrow{color:var(--pink-light)}
.recruit-band h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff;text-wrap:balance}
.recruit-band p{margin:.4em 0 0;color:#F3E9DC}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:8px 14px;font-size:1rem;line-height:1.5}
.chips li b{color:#fff}
.recruit-note{font-size:1rem;color:#DCE8E0;margin-top:10px}

/* ===== 8. Contact: the shared block (template-parts/contact-block.php) dressed like the sample's phone card ===== */
.contact-wrap .su-contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:900px){.contact-wrap .su-contact{grid-template-columns:minmax(0,1fr)}}
.contact-wrap .su-contact__tel{background:var(--pink);color:#fff;border-radius:var(--radius-xl);padding:clamp(26px,3vw,40px);box-shadow:0 24px 48px -24px rgba(200,40,90,.6)}
.contact-wrap .su-contact__tel .su-contact__h{font-size:1.3rem;margin-bottom:.6em;color:#fff}
.contact-wrap .su-contact__num{font-family:var(--font-serif);font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:.03em;color:#fff;white-space:nowrap}
.contact-wrap .su-contact__num:hover{text-decoration:underline;text-decoration-thickness:2px}
.contact-wrap .su-contact__num:focus-visible{outline:3px solid #FFE3EC;outline-offset:3px}
.contact-wrap .su-contact__tel .su-contact__hours,.contact-wrap .su-contact__tel .su-contact__note{color:#FFF3F6}
.contact-wrap .su-contact__form{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(22px,3.4vw,40px)}
.contact-wrap .su-contact__form .su-contact__h{font-size:1.3rem;margin-bottom:.8em}

/* ===== Mobile fixed bar ===== */
.mobile-bar{display:none}
@media (max-width:767px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:850;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(251,247,241,.96);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)
  }
  .mobile-bar a{min-height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;font-size:1.0625rem}
  .mobile-bar .mb-tel{background:var(--green);color:#fff}
  .mobile-bar .mb-visit{background:var(--pink);color:#fff}
  .mobile-bar svg{width:20px;height:20px}
}

/* ===== Reduced motion: stop everything, show everything ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal,html.js .tl-item .tl-media,html.js .tl-item .tl-text,html.js .tl-item .tl-time,
  html.js .hero-title .line,html.js .hero-title .h1-sub,html.js .hero-lead,html.js .hero-cta,html.js .hero-eyebrow,html.js .hero-vac,
  html.js .sec-title .mark,html.js .map-wrap .map-pin{opacity:1!important;transform:none!important;filter:none!important}
  .hero-media img{transform:none!important}
  html.js .hero-name{opacity:.94!important;filter:none!important;letter-spacing:.16em!important}
  .tl-line-fill{transform:none!important}
  .walk-draw{stroke-dashoffset:0!important}
  .motion-toggle,.scroll-cue{display:none!important}
  .office:hover .office-flower,.office:focus-within .office-flower{transform:none}
}