/*
Theme Name: Ryuko - Hidamari to Kaze
Theme URI: https://ryuko.link
Author: 合同会社 龍公
Description: 龍公公式サイト「陽だまりと風」カスタムテーマ。丸ゴシック、光の粒と風の帯、昇龍オープニング。
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ryuko
*/

:root{
--c-paper:#faf5ec;
--c-paper-deep:#f3ead7;
--c-card:#fffdf7;
--c-card-line:#eadfc8;
--c-ink:#3d3227;
--c-body:#5c4d3d;
--c-muted:#8a7862;
--c-soft:#a08c6c;
--c-terra:#a4653a;
--c-terra-deep:#8a5230;
--c-coral:#D85A30;
--c-amber:#FAC775;
--c-pink:#ED93B1;
--c-footer:#2b2318;
--c-night:#10131d;
--radius:14px;
--fold-back:#e9d8ba;   /* 折りの裏。下で季節の波の色と混ぜて上書きする */

/* ── 季節と時刻（season.js が実測の太陽高度と暦から毎分上書きする）──
   ここの値は JS 無効時のフォールバック。PHP が html[data-season|data-sky] を
   先に付けるので、初期表示でも季節・昼夜が合った状態で描画される。 */
--sky-1:#B8D7EE;--sky-2:#DCE8EE;--sky-3:#FAF5EC;
--sea-1:#FAC775;--sea-2:#F0997B;--sea-3:#ED93B1;--sea-4:#D85A30;
--dust:#E2A048;
--hero-ink:var(--c-ink);--hero-body:var(--c-body);--hero-tag:var(--c-terra);
--hero-glow:0 1px 2px rgba(255,255,255,.55);
}

/* 季節（波の帯の色） */
html[data-season="spring"]{--sea-1:#F4B4C9;--sea-2:#F2CE85;--sea-3:#B4DA92;--sea-4:#B49FDE;--dust:#F3C6D6}
html[data-season="summer"]{--sea-1:#8CD8E8;--sea-2:#6DC7A6;--sea-3:#FFE08A;--sea-4:#4E93C9;--dust:#BFEAF2}
html[data-season="autumn"]{--sea-1:#FAC775;--sea-2:#F0997B;--sea-3:#ED93B1;--sea-4:#D85A30;--dust:#E2A048}
html[data-season="winter"]{--sea-1:#D3E4F0;--sea-2:#9DBEDA;--sea-3:#B9C6D4;--sea-4:#BC8AA5;--dust:#DCE9F5}
/* 折りの裏に季節を通す（対応ブラウザのみ。非対応は上の固定色） */
@supports (color: color-mix(in srgb,#000,#fff)){
html{--fold-back:color-mix(in srgb,var(--sea-2) 40%,#fff)}
}
/* 夜は下層も照明をわずかに落とす。読める明るさは保つ */
html[data-sky="night"]{--c-paper:#f4ecdd;--c-card:#fbf6ea;--c-paper-deep:#ecdfc6}

/* 時刻（空の色と、その上に乗る文字） */
html[data-sky="dawn"]{--sky-1:#7FA0C8;--sky-2:#BAC5D8;--sky-3:#F6D9BE;
--hero-ink:#2C2438;--hero-body:#4A3F52;--hero-tag:#9B4E2E;--hero-glow:0 1px 12px rgba(255,247,232,.9)}
html[data-sky="dusk"]{--sky-1:#5E7BB0;--sky-2:#C08A88;--sky-3:#F8B476;
--hero-ink:#2E2230;--hero-body:#4B3A42;--hero-tag:#7E2F1C;--hero-glow:0 1px 12px rgba(255,240,220,.9)}
html[data-sky="night"]{--sky-1:#070B18;--sky-2:#0E1428;--sky-3:#191F36;
--hero-ink:#F3F0F8;--hero-body:#CBD3E4;--hero-tag:#E9BE8C;--hero-glow:0 2px 16px rgba(4,8,20,.95)}

*{box-sizing:border-box;margin:0;padding:0}
/* 文字選択も紙の世界観で */
::selection{background:var(--c-terra);color:#fffdf7}
/* スクロールバーの配色（対応ブラウザのみ） */
html{scrollbar-color:var(--c-soft) var(--c-paper)}
html{scroll-behavior:smooth}
body{
font-family:'Zen Maru Gothic',sans-serif;
background:var(--c-paper);
color:var(--c-body);
font-size:16px;
line-height:2;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-terra);text-decoration:none}
a:hover{opacity:.85}
/* 本文中のテキストリンクは hover で下線を出す。opacity の変化だけでは
   「押せる」ことが伝わりにくい（司令官指摘 2026-07-31）。 */
.prose a:hover,.entry-content a:hover,.lead a:hover,.spec dd a:hover,.liaison dd a:hover,
.qa-list dd a:hover,.cases dd a:hover,.minutes-note a:hover,.note-list a:hover,
.timeline a:hover,.pricing a:hover,.coming-foot a:hover,
.breadcrumb a:hover,.footer-nav a:hover{
opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* 色はページ本文側だけ濃くする（フッターの暗地・パンくずは色をいじらない） */
.prose a:hover,.entry-content a:hover,.lead a:hover,.spec dd a:hover,.liaison dd a:hover,
.qa-list dd a:hover,.cases dd a:hover,.minutes-note a:hover,.note-list a:hover,
.timeline a:hover,.pricing a:hover,.coming-foot a:hover{color:var(--c-terra-deep)}
/* キーボード操作の焦点。全リンク・ボタン共通で terra の輪郭を揃える */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--c-terra);outline-offset:2px}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 34px;background:rgba(250,245,236,.9);backdrop-filter:blur(8px)}
.site-brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;color:var(--c-ink);letter-spacing:.12em}
.site-brand img{width:40px;height:auto}
.site-nav ul{display:flex;gap:26px;list-style:none}
.site-nav a{font-size:13.5px;color:var(--c-muted);letter-spacing:.1em;font-weight:500}
.site-nav a:hover{color:var(--c-terra)}
.nav-cta{background:var(--c-terra);color:var(--c-paper)!important;font-weight:700;padding:9px 20px;border-radius:999px}

/* hero ─ 空は CSS が持ち、canvas は太陽・月・星・波・季節の粒を重ねる */
.hero{position:relative;height:min(88vh,760px);overflow:hidden;
background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 56%,var(--sky-3) 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
/* 下端はいつでも本文の紙色へ溶かす（夜でもページとの継ぎ目が出ない） */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
background:linear-gradient(180deg,rgba(250,245,236,0),var(--c-paper))}
.hero-vcopy{position:absolute;top:12%;right:6%;writing-mode:vertical-rl;font-size:clamp(26px,3.4vw,42px);font-weight:700;color:var(--hero-ink);line-height:2;letter-spacing:.2em;pointer-events:none;text-shadow:var(--hero-glow)}
.hero-copy{position:absolute;left:6%;top:26%;max-width:460px;pointer-events:none;text-shadow:var(--hero-glow)}
/* 文字の白黒は season.js が空の明るさで二択で切り替える。
   その一瞬の切替をゆっくりに見せる（中間調で長居させないための二択なので、
   ここの transition を長くしすぎないこと） */
.hero-vcopy,.hero-copy,.hero-copy .tag,.hero-copy .sub{transition:color 2.5s ease,text-shadow 2.5s ease}
.hero-copy .tag{font-size:13px;color:var(--hero-tag);letter-spacing:.22em;font-weight:700;margin-bottom:12px}
.hero-copy .sub{font-size:16px;line-height:2.2;font-weight:500;margin-bottom:26px;color:var(--hero-body)}
.hero-copy .btn{pointer-events:auto;text-shadow:none}

/* buttons */
.btn{display:inline-block;background:var(--c-terra);color:var(--c-paper);font-size:14px;font-weight:700;letter-spacing:.12em;padding:14px 34px;border-radius:999px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
/* hover は浮くだけでなく背景も濃くする。色の変化がないと押せる実感が薄い */
.btn:hover{transform:translateY(-2px);opacity:1;background:var(--c-terra-deep);
box-shadow:0 6px 16px rgba(107,79,49,.28)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(107,79,49,.24)}
.btn-ghost{display:inline-block;border:1px solid #b59a76;color:#8a6f4d;font-size:13px;letter-spacing:.12em;padding:10px 26px;border-radius:999px;
transition:background-color .25s ease,color .25s ease,border-color .25s ease}
/* ghost は hover で terra にうっすら染まり、文字と枠が濃くなる */
.btn-ghost:hover{opacity:1;background:rgba(164,101,58,.08);color:var(--c-terra-deep);border-color:var(--c-terra)}
.nav-cta:hover{background:var(--c-terra-deep)}

/* sections */
.section{padding:84px 6%;--page-bg:var(--c-paper)}
.section-label{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.3em;color:var(--c-terra);font-weight:700;margin-bottom:10px}
/* 英語ラベルの代わりの、小さな折り紙のしるし（半分が季節の色） */
.section-label::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:1.5px;
transform:rotate(45deg);background:linear-gradient(135deg,var(--c-terra) 0 50%,var(--fold-back) 50% 100%)}
.section-title{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--c-ink);letter-spacing:.12em;margin-bottom:26px}
.section-deep{background:var(--c-paper-deep);--page-bg:var(--c-paper-deep)}
.wave{display:block;width:100%}

/* cards */
/* カードは面ごと押せるようにする。中のリンクを疑似要素でカード全面に広げ、
   小さな「詳しく見る →」だけを狙わせない（司令官 2026-07-30）。 */
.card{position:relative;background:var(--card-tint,var(--c-card));border:1px solid color-mix(in srgb,var(--card-tint,var(--c-card)) 55%,#cbb894);
border-radius:var(--radius);padding:26px;
transition:transform .3s cubic-bezier(.2,.85,.3,1.12),box-shadow .3s ease,background .3s ease}
.card:has(a),a.card{cursor:pointer;overflow:hidden}
/* 全面クリックは a.card-link を明示的に付けたリンクだけに与える。
   ::before を .card（position:relative）基準で全面に広げる。リンク側に position を
   付けないこと ── 付けると当たり判定がリンク自身の大きさに縮む（検証で発覚 2026-07-31）。
   ::after は矢印「→」が使っているので当たり判定には使わない（矢印が消える）。
   複数リンクを持つカード（議事録一覧など）には card-link を付けないこと。 */
.card:has(a.card-link){cursor:pointer}
.card a.card-link::before{content:"";position:absolute;inset:0;border-radius:var(--radius)}
/* カード全体が <a> の場合（施設カードなど）。中の文字色はリンク色にしない */
a.card{color:inherit;display:block}
a.card .card-more{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--c-terra)}
a.card:hover .card-more{color:var(--c-terra-deep)}
/* ホバー＝「折り」。汎用の帯ではなく、右上の角が紙のようにめくれる。
   めくれた裏には季節の波を薄めた色（--fold-back）がのぞく ── 折り紙のサイトの所作。
   上の三角は置かれた地の色（--page-bg）で塗り、角が切れているように見せる。
   .steps .card は ::before を STEP ラベルに使っており、後方の規則が勝つので折りは出ない（意図どおり） */
.card:has(a)::before,a.card::before{content:"";position:absolute;top:-1px;right:-1px;width:20px;height:20px;
background:linear-gradient(225deg,var(--page-bg,var(--c-paper)) 0 49.6%,var(--fold-back) 50% 100%);
border-bottom-left-radius:9px;box-shadow:-3px 3px 5px rgba(60,45,30,.10);
transition:width .32s cubic-bezier(.2,.75,.3,1.05),height .32s cubic-bezier(.2,.75,.3,1.05);
pointer-events:none;z-index:1}
.card:has(a):hover::before,.card:has(a):focus-within::before,
a.card:hover::before,a.card:focus-visible::before{width:48px;height:48px}
/* 枠線で示すのをやめた（茶色い縁が野暮ったい／司令官 2026-07-31）。
   浮き・影・折り・明度で「持ち上がった紙」を見せる。動きも一段強く。
   輪郭のリングはキーボード操作（:focus-visible）のときだけ出す */
.card:hover,.card:focus-within{transform:translateY(-9px) scale(1.02);
box-shadow:0 22px 44px rgba(107,79,49,.22),0 4px 10px rgba(107,79,49,.10);
background:color-mix(in srgb,var(--card-tint,var(--c-card)) 55%,#fff)}
.card:has(a:focus-visible){outline:2px solid var(--c-terra);outline-offset:3px}
/* カード内の誘導文。ホバーで矢印が動き、文字も濃くなって押せる場所だと分かる */
.card a[href]{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--c-terra);
transition:color .25s ease}
.card:hover a[href],.card:focus-within a[href]{color:var(--c-terra-deep)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card h3{font-size:17px;color:var(--c-ink);margin:12px 0 10px;font-weight:700}
.card .ico{font-size:26px;color:var(--c-terra)}
.facility-photo{height:220px;border-radius:12px 12px 0 0;object-fit:cover;width:100%}
/* ── 写真全面のカード（施設） ──
   写真が帯状に見切れるのをやめ、カード全体に敷く。ホーム名などの情報は
   下端の半透明の帯（すりガラス）に載せ、写真がその奥まで見えるようにする */
.photo-card{padding:0;min-height:300px;aspect-ratio:16/10;display:block}
.photo-card .facility-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:0;transition:transform 1.1s ease}
.photo-card:hover .facility-photo{transform:scale(1.045)}
.photo-card .photo-card-info{position:absolute;left:0;right:0;bottom:0;padding:16px 24px 18px;
background:rgba(255,253,247,.80);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
/* 家のカードは「めくれ」ではなく「灯り」。触れると、夕方に窓の明かりが
   ともるように、写真へゆっくり暖色が差す（司令官 2026-07-31「めくれる感じは
   なくていい。他のカードと同じだとつまんない」）。
   「ここが、帰りたい場所になる。」の家にだけ与える演出 */
.photo-card::before{content:none!important}   /* 折りは出さない */
.photo-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
/* 灯りは中心でなく周囲から差す（司令官 2026-07-31「中心に灯りをいれるより、周囲がいいな」）。
   中央は素通しのまま、縁に向かって暖色がにじむ */
background:
 radial-gradient(115% 95% at 50% 45%, rgba(255,180,90,0) 46%, rgba(255,178,88,.14) 72%, rgba(255,165,75,.34) 100%),
 linear-gradient(180deg, rgba(70,45,25,0) 62%, rgba(70,45,25,.08) 100%);
opacity:0;transition:opacity .9s ease}
.photo-card:hover::after,.photo-card:focus-visible::after{opacity:1}
/* カードの外側にも、窓明かりが漏れるようなあたたかい暈を足す */
.js .fx.on.photo-card:hover,.photo-card:hover,.photo-card:focus-within{
box-shadow:0 22px 44px rgba(107,79,49,.20),0 0 36px rgba(255,175,90,.38)}
.photo-card .facility-photo{filter:brightness(1) saturate(1);transition:transform 1.1s ease,filter .9s ease}
.photo-card:hover .facility-photo{filter:brightness(1.06) saturate(1.08)}
.photo-card .photo-card-info{z-index:1}
@media (max-width:640px){.photo-card{aspect-ratio:4/3}}

/* ── 食事の実例写真(暮らしと食事) ──
   ただ並べず「白フチの写真プリントを和紙テープで紙に貼った」体裁にする
   (司令官 2026-07-31「さりげなく写真の上にフレームを載せれないかな」)。
   テープの色は --fold-back(季節色)なので、空や波と一緒に季節で変わる */
/* 2枚なら2列・3枚なら3列に自然に割れる */
.meal-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:34px 28px;max-width:1020px;margin:36px 0 0}
.meal-photos figure{position:relative;background:#fffdf8;padding:10px 10px 12px;border-radius:3px;
box-shadow:0 1px 2px rgba(107,79,49,.10),0 14px 30px rgba(107,79,49,.18);
transform:rotate(-1.1deg);transition:transform .5s ease,box-shadow .5s ease}
.meal-photos figure:nth-child(2n){transform:rotate(1deg)}
.meal-photos figure:hover{transform:rotate(0) translateY(-3px);box-shadow:0 2px 4px rgba(107,79,49,.10),0 20px 40px rgba(107,79,49,.22)}
.meal-photos img{width:100%;height:auto;display:block;border-radius:2px}
/* 和紙テープ。半透明で下の紙がうっすら透ける */
.meal-photos figure::before,.meal-photos figure::after{content:"";position:absolute;top:-11px;width:86px;height:24px;
background:color-mix(in srgb,var(--fold-back,#e8d9be) 72%,#fff);opacity:.82;
box-shadow:0 1px 3px rgba(107,79,49,.18);
-webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.meal-photos figure::before{left:-24px;transform:rotate(-42deg)}
.meal-photos figure::after{right:-24px;transform:rotate(42deg)}
.meal-photos figcaption{font-size:12.5px;color:var(--c-muted);margin-top:9px;line-height:1.8;padding:0 2px}
@media (max-width:720px){.meal-photos{grid-template-columns:1fr;gap:30px}}
@media print{.meal-photos figure{transform:none;box-shadow:none;border:1px solid #ddd}}

/* ── カードの浮遊 ──
   紙が空気に載っているように、ごくゆっくり漂う。
   範囲を決めている: 横 ±4px ／ 縦 上方向に 7px まで ／ 傾き ±0.55°。
   傾きは移動方向に連動 ── 左へ流れる区間は左へ、右へ流れる区間は右へ傾く。
   ・登場スライド（.fx）を邪魔しないよう 1.4 秒遅れて漂い始める
   ・ホバー・フォーカス中は漂いを止めて浮く（カーソルが追いかけずに済む速さと挙動）
   ・格子の中では周期と向きを散らし、全員が同じ動きで揃って見えないようにする */
@keyframes card-drift{
0%{transform:translate(0,0) rotate(0deg)}
22%{transform:translate(-4px,-3px) rotate(-.55deg)}   /* 左上へ → 左に傾く */
46%{transform:translate(-1px,-7px) rotate(-.15deg)}   /* ほぼ真上 → 傾き戻る */
72%{transform:translate(4px,-3px) rotate(.55deg)}     /* 右下へ → 右に傾く */
100%{transform:translate(0,0) rotate(0deg)}
}
/* 浮遊させるのはトップの「暮らしの、ぜんぶを支える。」の格子だけ */
.float-grid>.card{animation:card-drift 11.5s ease-in-out 1.4s infinite}
.float-grid>:nth-child(2n){animation-duration:13.5s;animation-delay:2.1s}
.float-grid>:nth-child(3n){animation-direction:reverse;animation-duration:12.5s;animation-delay:1.7s}
.card:hover,.card:focus-within,.post-card:hover,.post-card:focus-visible{animation:none}
@media (prefers-reduced-motion:reduce){.card,.post-card{animation:none!important}}

/* scroll fade-in */
/* スクロール表示。html.js が付いているときだけ隠す。
   JavaScript が動かない環境では最初から見えている状態にしておく
   （でないと本文がまるごと消える） */
.js .fx{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .fx.on{opacity:1;transform:none}
/* カードは .fx.on の transform:none と 0.9s の遷移が hover の持ち上がりに勝ってしまい、
   「反応しない・鈍い」と見えていた（司令官 2026-07-31「動きが弱い」）。
   登場後のカードに限って、素早い遷移と持ち上がりを勝たせ直す */
.js .fx.on.card,.js .fx.on.post-card{transition:transform .3s cubic-bezier(.2,.85,.3,1.12),box-shadow .3s ease,background .3s ease,opacity .9s ease}
.js .fx.on.card:hover,.js .fx.on.card:focus-within,
.js .fx.on.post-card:hover,.js .fx.on.post-card:focus-visible{transform:translateY(-9px) scale(1.02)}

/* CTA band */
.cta-band{background:var(--c-terra);text-align:center;padding:64px 6%;color:var(--c-paper)}
.cta-band h2{font-size:24px;letter-spacing:.16em;font-weight:700;margin-bottom:10px}
.cta-band p{color:#ecd9bd;font-size:13px}
.cta-facilities{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin:26px 0 8px}
.cta-fac{min-width:280px}
.cta-fac .fac-name{font-size:14px;font-weight:700;color:#f7ead2;letter-spacing:.14em;margin-bottom:6px}

/* phone shine (ゆっくり版) */
.tel-wrap{position:relative;display:inline-block;font-size:30px;font-weight:500;letter-spacing:.06em;color:#f7ead2}
.tel-wrap a{color:inherit}
.tel-sweep{position:absolute;inset:0;pointer-events:none;color:transparent;
background-image:linear-gradient(100deg,rgba(255,248,220,0) 25%,rgba(255,250,228,.95) 43%,#fffdf4 50%,rgba(255,250,228,.95) 57%,rgba(255,248,220,0) 75%);
background-size:250% 100%;background-position:120% 0;
-webkit-background-clip:text;background-clip:text;
filter:drop-shadow(0 0 6px rgba(255,222,150,.9));
animation:telsweep 9s ease-in-out infinite}
.tel-wrap:hover .tel-sweep{animation:telsweep-h 4.5s ease-in-out infinite}
@keyframes telsweep{0%{background-position:120% 0}48%{background-position:-20% 0}100%{background-position:-20% 0}}
@keyframes telsweep-h{0%{background-position:120% 0}88%{background-position:-20% 0}100%{background-position:-20% 0}}

/* 代表の似顔絵（「今後の取り組み」の節） */
.vision-wrap{display:flex;gap:38px;align-items:flex-end;max-width:1000px}
.vision-wrap .narrow{margin:0}
.ceo-illust{flex:0 0 230px;margin:0;text-align:center}
.ceo-illust img{width:100%;height:auto;display:block}
.ceo-illust figcaption{margin-top:6px;font-size:12px;color:var(--c-muted);letter-spacing:.08em;line-height:1.8}
.ceo-illust figcaption span{display:block;font-size:14px;font-weight:700;color:var(--c-ink);letter-spacing:.1em}
@media (max-width:860px){
.vision-wrap{display:block}
.ceo-illust{float:right;width:150px;flex:none;margin:0 0 12px 20px}
}
@media (max-width:480px){
.ceo-illust{float:none;width:170px;margin:0 auto 18px}
}


/* 署名と落款。人が判を押した文書の顔にする */
.sign{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:30px;
font-size:14px;color:var(--c-ink);letter-spacing:.12em;font-weight:700}
.seal{width:46px;height:46px;flex:0 0 auto;transform:rotate(-2.5deg);opacity:.92}

/* 頁の結びの一行。巻物のように縦書きで置く */
.tate-sec{display:flex;justify-content:center;padding:64px 6% 20px}
.tate{writing-mode:vertical-rl;font-weight:700;color:var(--c-ink);margin:0;
font-size:clamp(19px,2.2vw,26px);letter-spacing:.34em;line-height:1.6}

/* ── 議事録 ── */
.minutes-h{font-size:17px;color:var(--c-ink);letter-spacing:.1em;margin:38px 0 14px;
padding-left:12px;border-left:4px solid var(--c-terra)}
.spec-cap{font-size:13px;font-weight:700;color:var(--c-ink);letter-spacing:.08em;margin-bottom:8px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:900px}
.two-col .spec{max-width:none}
.table-scroll{overflow-x:auto;max-width:900px}
.mtable{font-variant-numeric:tabular-nums;border-collapse:collapse;width:100%;min-width:620px;background:var(--c-card);
border:1px solid var(--c-card-line);border-radius:var(--radius);overflow:hidden;font-size:13px}
.mtable th,.mtable td{border:1px solid var(--c-card-line);padding:9px 12px;text-align:center}
.mtable thead th{background:var(--c-paper-deep);font-size:12px;letter-spacing:.04em;color:var(--c-ink)}
.mtable tbody th{text-align:left;font-weight:700;color:var(--c-ink);white-space:nowrap}
/* 職員表は行数が多いので、偶数行の薄い縞と行ホバーで目の迷子を防ぐ */
.mtable tbody tr:nth-child(even){background:rgba(243,234,215,.45)}
.mtable tbody tr:hover{background:rgba(164,101,58,.08)}
/* 事故・ヒヤリはっとの棒 */
.bars{list-style:none;margin:0;padding:0;max-width:640px}
.bars li{display:grid;grid-template-columns:5.5em 1fr 4em;align-items:center;gap:10px;margin-bottom:7px;font-size:13px}
.bars .bg{background:var(--c-paper-deep);border-radius:3px;height:15px;overflow:hidden}
/* 棒グラフではなく「端が折れた紙の帯」。折り紙の言語で数字を見せる */
.bars .bv{display:block;height:100%;border-radius:2px 0 0 2px;
background:linear-gradient(90deg,var(--c-terra) 0 calc(100% - 8px),var(--c-terra-deep) calc(100% - 8px));
clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 8px) 100%,0 100%)}
.bars .bn{text-align:right;color:var(--c-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
/* 事例・議案・質疑 */
.cases,.qa-list{max-width:900px;margin:0}
.cases dt,.qa-list dt{font-weight:700;color:var(--c-ink);font-size:14.5px;letter-spacing:.04em;margin-top:16px}
/* 問い（Q・事例名）に薄い背景帯と terra の左罫を付け、答えの本文と一目で区別できるようにする */
.cases dt,.qa-list dt{background:rgba(164,101,58,.06);border-left:3px solid var(--c-terra);
border-radius:0 8px 8px 0;padding:7px 14px}
.cases dd,.qa-list dd{margin:8px 0 0;font-size:13.5px;line-height:1.95;color:var(--c-body);padding-left:17px}
.qa-list dt::before{content:"Q．";color:var(--c-terra)}
.qa-list dd::before{content:"A．";color:var(--c-terra);font-weight:700}
.minutes-note{background:var(--c-card);border:1px solid var(--c-card-line);border-radius:var(--radius);
padding:16px 20px;font-size:13.5px;line-height:1.95}
@media (max-width:640px){
.bars li{grid-template-columns:4.6em 1fr 3.4em;font-size:12px}
.minutes-h{font-size:15.5px}
}

/* ── 間取り図の押せる部屋 ── */
.plan-wrap{position:relative;line-height:0}
.plan-hot{position:absolute;border:0;padding:0;cursor:pointer;border-radius:6px;
background:transparent;transition:background .2s ease,box-shadow .2s ease}
.plan-hot:hover,.plan-hot:focus-visible{background:rgba(164,101,58,.16);
box-shadow:inset 0 0 0 2px var(--c-terra);outline:0}
.plan-hot-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* 触る端末はホバーが無いので、押せる場所を最初から薄く示す */
html[data-pointer="coarse"] .plan-hot{background:rgba(164,101,58,.10);box-shadow:inset 0 0 0 1px rgba(164,101,58,.35)}
.plan-hint{display:block;font-weight:400;font-size:12px;color:var(--c-terra);margin-top:6px}

/* ── 写真のモーダル ── */
.photo-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.photo-modal[hidden]{display:none}
.pm-backdrop{position:absolute;inset:0;background:rgba(22,17,10,.72);backdrop-filter:blur(3px);
opacity:0;transition:opacity .28s ease}
.pm-box{position:relative;max-width:min(880px,92vw);max-height:88vh;background:var(--c-card);
border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(20,14,6,.45);
opacity:0;transform:translateY(26px) scale(.94);
transition:opacity .32s ease,transform .42s cubic-bezier(.16,1.02,.3,1)}
.photo-modal.on .pm-backdrop{opacity:1}
.photo-modal.on .pm-box{opacity:1;transform:none}
.pm-img{display:block;width:100%;max-height:66vh;object-fit:contain;background:#efe7d6}
.pm-img[hidden]{display:none}
.pm-soon{display:flex;align-items:center;justify-content:center;height:min(46vh,320px);
background:var(--c-paper-deep);color:var(--c-muted);font-size:14px;letter-spacing:.1em}
.pm-soon[hidden]{display:none}
/* 写真がまだ無い部屋は、控えめな色で区別する */
.plan-hot.no-photo:hover,.plan-hot.no-photo:focus-visible{background:rgba(138,120,98,.14);
box-shadow:inset 0 0 0 2px var(--c-muted)}
html[data-pointer="coarse"] .plan-hot.no-photo{background:rgba(138,120,98,.08);
box-shadow:inset 0 0 0 1px rgba(138,120,98,.3)}
.pm-cap{padding:16px 22px 20px}
.pm-title{font-size:16px;font-weight:700;color:var(--c-ink);letter-spacing:.08em;line-height:1.7}
.pm-desc{font-size:13px;color:var(--c-muted);line-height:1.9;margin-top:4px}
.pm-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;
background:rgba(255,253,247,.92);color:var(--c-ink);font-size:24px;line-height:1;cursor:pointer;
box-shadow:0 4px 14px rgba(20,14,6,.28)}
.pm-close:hover,.pm-close:focus-visible{background:var(--c-terra);color:var(--c-paper);outline:0}
@media (max-width:640px){
.photo-modal{padding:12px}
.pm-img{max-height:56vh}
.pm-cap{padding:14px 16px 18px}
}
@media (prefers-reduced-motion:reduce){
.pm-backdrop,.pm-box{transition:none}
.pm-box{transform:none}
}

/* これまでの行事（予定表ではなく実績の並び） */
.event-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:22px 0 0;padding:0;max-width:820px}
.event-list li{background:var(--c-card);border:1px solid var(--c-card-line);border-radius:999px;
padding:8px 20px;font-size:14px;color:var(--c-ink);letter-spacing:.04em}

/* ── メディア掲載バナー（私のカクゴ・先方指定の公式バナー） ── */
.media-banner{display:block;max-width:600px;border-radius:12px;overflow:hidden;
border:1px solid var(--c-card-line);background:var(--c-card);line-height:0;
transition:box-shadow .25s ease,transform .25s ease}
.media-banner img{width:100%;height:auto;display:block}
.media-banner:hover,.media-banner:focus-visible{box-shadow:0 10px 26px rgba(60,45,30,.16);transform:translateY(-2px)}
.media-banner:focus-visible{outline:2px solid var(--c-terra);outline-offset:2px}

/* ── スマホ用の固定CTA（端末が mobile のときだけ） ── */
/* 幅は right:0 ではなく 100vw で決める。画面外に退避したナビ（fixed）が
   初期包含ブロックを広げるため、right:0 だと画面より広くなり
   「見学のご予約」が画面外へ出ていた（司令官指摘 2026-07-30） */
.mobile-cta{display:none;position:fixed;left:0;right:auto;width:100vw;max-width:100vw;bottom:0;z-index:80;
gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
background:rgba(250,245,236,.96);backdrop-filter:blur(8px);
box-shadow:0 -6px 20px rgba(60,45,30,.14)}
.mobile-cta a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
min-height:50px;border-radius:999px;font-size:14.5px;font-weight:700;letter-spacing:.06em}
.mobile-cta .mc-tel{background:#fffdf7;border:1.5px solid var(--c-terra);color:var(--c-terra)}
.mobile-cta .mc-form{background:var(--c-terra);color:var(--c-paper)}
.mobile-cta .mc-ico{font-size:16px}
html[data-device="mobile"] .mobile-cta{display:flex}
html[data-device="mobile"] body,html[data-device="mobile"] .site-footer{padding-bottom:0}
html[data-device="mobile"] .site-footer{padding-bottom:84px}
/* ホバー前提の演出は指の端末では切る */
html[data-pointer="coarse"] .card:hover{transform:none;box-shadow:none}
html[data-pointer="coarse"] .tel-wrap .tel-sweep{animation-duration:14s}
/* 触る端末にはホバーが無いので、押せるカードには上辺の帯を最初から薄く出しておく */
/* タッチ端末は折りが常時 20px 見えているのが「押せる」手掛かり（帯の代替） */
html[data-pointer="coarse"] .post-card:hover{transform:none;box-shadow:none}

/* ── 準備中のご案内（カミングスーン） ──
   紙の隅を折り返したような角。色は季節に追従する。 */
.coming-sec{background:linear-gradient(180deg,var(--c-paper) 0%,var(--c-paper-deep) 100%)}
.coming-lead{max-width:660px;margin-bottom:30px;font-size:15px}
.coming-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;max-width:1020px}
.coming-list li{position:relative;background:var(--c-card);border:1px dashed #d8c6a6;
border-radius:var(--radius);padding:24px 24px 22px;overflow:hidden}
.ci-fold{position:absolute;top:0;right:0;width:36px;height:36px;pointer-events:none;
background:linear-gradient(225deg,var(--sea-1) 0 50%,transparent 50%);opacity:.6}
.ci-fold::after{content:"";position:absolute;top:0;right:0;width:36px;height:36px;
background:linear-gradient(225deg,rgba(80,60,35,.16) 0 50%,transparent 50%);
clip-path:polygon(100% 0,100% 100%,0 0)}
.ci-name{font-size:16px;font-weight:700;color:var(--c-ink);letter-spacing:.08em;
margin-bottom:8px;padding-right:26px}
.ci-name::before{content:"準備中";display:inline-block;font-size:10px;letter-spacing:.16em;
color:var(--c-terra);border:1px solid #cfa878;border-radius:999px;padding:1px 9px;
margin-right:10px;font-weight:700;vertical-align:2px}
.ci-note{font-size:13px;line-height:2;color:var(--c-muted)}
.coming-foot{margin-top:28px;font-size:14px}
.coming-foot a{font-size:20px;font-weight:700;letter-spacing:.04em}
.coming-foot span{font-size:12.5px;color:var(--c-muted);margin-left:6px}
@media (max-width:640px){
.coming-foot a{display:block;margin-top:4px}
.coming-foot span{margin-left:0}
}

/* footer */
.site-footer{background:var(--c-footer);color:#a3937a;padding:56px 6% 30px}
.footer-cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.footer-brand{font-size:18px;font-weight:700;color:#f2ead8;letter-spacing:.14em;margin-bottom:12px}
.footer-info{font-size:12.5px;line-height:2}
.footer-nav{font-size:12.5px;line-height:2.4;text-align:right}
.footer-nav a{color:#a3937a}
.badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.badge-card{background:var(--c-card);border-radius:12px;padding:14px;width:170px;text-align:center}
.badge-card img{height:84px;width:auto;margin:0 auto 8px}
.badge-card p{font-size:10.5px;color:#5f5e5a;line-height:1.6}
.copyright{font-size:11px;color:#7a6c56;text-align:center}

/* intro overlay */
#ryuko-intro{position:fixed;inset:0;background:var(--c-night);z-index:999;transition:opacity 1.4s ease}
#ryuko-intro.out{opacity:0;pointer-events:none}
#ryuko-intro canvas{position:absolute;inset:0;width:100%;height:100%}
#ryuko-intro .intro-logo{position:absolute;opacity:0;transform:scale(1.045);transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.22,1,.36,1);pointer-events:none}
#ryuko-intro .intro-logo.on{opacity:1;transform:scale(1)}
/* 折り紙のロゴ ─ 本ロゴの下に敷き、最後に溶け合って本来のロゴへ渡す */
#ryuko-intro .intro-logo-ori{position:absolute;opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .95s cubic-bezier(.22,1,.36,1);pointer-events:none}
#ryuko-intro .intro-logo-ori.on{opacity:1;transform:scale(1)}
#ryuko-intro .intro-logo-ori.on.out{opacity:0;transition:opacity 1.15s ease}
#ryuko-intro .intro-skip{position:absolute;right:22px;bottom:26px;background:transparent;border:1px solid #33304a;color:#767092;font-size:12px;padding:6px 18px;border-radius:999px;cursor:pointer;font-family:inherit;letter-spacing:.14em}

/* ── 下層ページ共通 ── */
.page-head{padding:56px 6% 30px}
/* ページ見出し直後のセクションは上余白を少し詰め、以降の 84px と差を付けて
   余白のリズムを作る（page-head 側に既に 30px の下余白があるため） */
.page-head+.section{padding-top:56px}
.page-head .lead{max-width:720px;font-size:15px;margin-top:14px}
.breadcrumb{font-size:11.5px;color:var(--c-soft);letter-spacing:.08em;padding:14px 6% 0}
.breadcrumb a{color:var(--c-soft)}
.narrow{max-width:820px;margin:0 auto}
.prose p{margin-bottom:20px}
.prose .strong-lead{font-size:clamp(18px,2.2vw,23px);font-weight:700;color:var(--c-ink);line-height:1.9;letter-spacing:.08em;margin-bottom:28px}

/* 1日の流れ */
.timeline{list-style:none;position:relative;padding-left:30px;max-width:760px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--sea-1),var(--sea-2),var(--sea-4));opacity:.55}
.timeline li{position:relative;padding:0 0 26px 6px}
.timeline li::before{content:"";position:absolute;left:-30px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--c-card);border:3px solid var(--c-terra)}
.timeline .t{font-size:14px;font-weight:700;color:var(--c-terra);letter-spacing:.1em}
.timeline .h{font-size:16.5px;font-weight:700;color:var(--c-ink);margin:2px 0 6px}
.timeline p{font-size:13.5px;line-height:1.95;margin-bottom:6px}
.timeline .note{font-size:12.5px;color:var(--c-muted);background:var(--c-paper-deep);border-radius:10px;padding:10px 14px;margin-top:8px}

/* 料金表 */
.pricing{font-variant-numeric:tabular-nums;max-width:560px;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:var(--radius);padding:8px 24px 20px}
.pricing dl{display:grid;grid-template-columns:1fr minmax(7em,auto);margin:0;align-items:baseline}
.pricing dt{padding:13px 0;border-bottom:1px dashed var(--c-card-line);font-size:14px}
.pricing dd{text-align:right;padding:13px 0;border-bottom:1px dashed var(--c-card-line);margin:0;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.pricing .total dt,.pricing .total dd{font-weight:700;color:var(--c-ink);font-size:17px;border-bottom:none;padding-top:18px}
.pricing .sub{font-size:11.5px;color:var(--c-muted);display:block;line-height:1.7}
.note-list{list-style:none;font-size:12.5px;color:var(--c-muted);line-height:1.9;margin-top:14px;max-width:560px}

/* 申し込みの流れ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;counter-reset:s}
.steps .card{position:relative;padding-top:34px}
.steps .card::before{counter-increment:s;content:"STEP " counter(s);position:absolute;top:14px;left:26px;font-size:10.5px;letter-spacing:.2em;color:var(--c-terra);font-weight:700}

/* よくある質問 */
.faq{max-width:820px}
.faq details{background:var(--c-card);border:1px solid var(--c-card-line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-size:15px;font-weight:700;color:var(--c-ink);position:relative;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--c-terra);font-size:17px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 22px 20px;font-size:13.5px;line-height:2;color:var(--c-body)}

/* 定義リスト（募集要項・会社概要） */
.spec{max-width:820px;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:var(--radius);padding:6px 26px 18px}
/* grid にしているのは、見出しが2行に折り返しても値とずれないようにするため。
   flex + % 幅だと、折り返した2行目が値の下に回り込んで表示が崩れる。 */
.spec dl{display:grid;grid-template-columns:minmax(7.5em,27%) 1fr;margin:0}
.spec dt,.spec dd{padding:15px 0;border-bottom:1px solid var(--c-card-line);min-width:0}
.spec dt{font-size:13px;font-weight:700;color:var(--c-ink);letter-spacing:.06em;padding-right:14px}
.spec dd{margin:0;font-size:14px;line-height:1.95;overflow-wrap:anywhere}
.spec dl>:nth-last-child(1),.spec dl>:nth-last-child(2){border-bottom:none}
/* 長い表でも行を目で追いやすいよう、偶数行にごく薄い縞を敷く
   （dt/dd は grid の同じ行に並ぶので、両方に同じ縞を付ければ一続きに見える） */
.spec dt:nth-of-type(even),.spec dd:nth-of-type(even){background:rgba(243,234,215,.42)}
.spec dt:nth-of-type(even){padding-left:10px;margin-left:-10px}
.spec dd:nth-of-type(even){padding-right:10px;margin-right:-10px}
.spec .small{font-size:12.5px;color:var(--c-muted);display:block;margin-top:4px}

/* 登記事項の「目的」─ 登記のとおり番号を振る */
.registry-purposes{margin:0;padding-left:2.4em;list-style:decimal}
.registry-purposes li{margin-bottom:5px;line-height:1.8;text-indent:0}
.registry-purposes li:last-child{margin-bottom:0}

/* 地域連携推進会議の一覧 */
.liaison{display:flex;flex-wrap:wrap;margin-top:6px}
.liaison dt{flex:0 0 28%;padding:9px 0;border-bottom:1px dashed var(--c-card-line);
font-size:13px;font-weight:700;color:var(--c-terra)}
.liaison dd{flex:0 0 72%;padding:9px 0;border-bottom:1px dashed var(--c-card-line);margin:0;font-size:13.5px}
.liaison dd span{font-size:12px;color:var(--c-muted);margin-left:8px}
.liaison dd a{font-size:12.5px;margin-left:8px}
.liaison>:nth-last-child(1),.liaison>:nth-last-child(2){border-bottom:none}

/* 書類リンク */
.doc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:820px}
.doc-links a{display:flex;align-items:center;gap:10px;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:12px;padding:14px 18px;font-size:13.5px;color:var(--c-body)}
.doc-links a:hover{border-color:#cfa878}
.doc-links .ico{color:var(--c-terra);font-size:15px}

/* 施設ギャラリー */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.gallery figure{margin:0;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:var(--radius);overflow:hidden}
.gallery img{width:100%;height:250px;object-fit:cover;display:block}
.gallery figcaption{padding:12px 16px;font-size:13px;color:var(--c-ink);font-weight:700}
.gallery .wide img{height:420px}
/* 枠と縦横比が合わない写真は、切らずに全体を見せる（まんじゅうの外観） */
.gallery .wide.fit img{object-fit:contain;background:var(--c-paper)}

/* 間取り図（線画なので切らずに全体を見せる） */
.gallery.plans img{height:auto;aspect-ratio:auto;object-fit:contain;background:#fff;padding:10px}

/* 地図 ─ 自前の SVG。外部への通信は発生しない */
.access-map{margin:0 0 6px;max-width:820px}
.map{position:relative;display:block;width:100%;height:320px;border:1px solid var(--c-card-line);border-radius:var(--radius);overflow:hidden;background:var(--c-card);text-decoration:none}
.map svg{display:block;width:100%;height:100%}
.am-bg{fill:var(--c-card)}
.am-park{fill:#c3d9b6;stroke:#a9c69a;stroke-width:1.5}
.am-small path{fill:none;stroke:var(--c-card-line);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.am-big path{fill:none;stroke:#d9c3a4;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.am-place{font-size:11px;fill:#5d7a54;letter-spacing:.04em;paint-order:stroke;stroke:var(--c-card);stroke-width:3}
.am-scale path{fill:none;stroke:var(--c-muted);stroke-width:1.4}
.am-scale text{font-size:10px;fill:var(--c-muted)}
.am-pin-shadow{fill:rgba(22,9,40,.18)}
.am-pin-a{fill:var(--c-terra)}
.am-pin-b{fill:#8e5b3c}
.am-pin-label{font-size:13px;font-weight:700;fill:var(--c-ink);letter-spacing:.06em;paint-order:stroke;stroke:var(--c-card);stroke-width:4}
.map-open{position:absolute;right:10px;bottom:10px;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:999px;padding:5px 14px;font-size:12px;color:var(--c-ink);letter-spacing:.04em}
.map:hover .map-open,.map:focus-visible .map-open{background:var(--c-terra);border-color:var(--c-terra);color:#fff}
.map:focus-visible{outline:2px solid var(--c-terra);outline-offset:2px}
.access-map figcaption{margin-top:8px;font-size:12.5px;color:var(--c-muted);line-height:1.8}
.access-map .am-roads,.access-map .am-credit{display:block}
.access-map .am-credit{font-size:11px;color:var(--c-soft)}
@media (max-width:640px){.map{height:250px}}

@media (max-width:640px){
.spec dl{grid-template-columns:1fr}
.spec dt{padding-bottom:0;border-bottom:none;padding-right:0}
/* 1カラム積みでは dt/dd の縞の左右端を揃える（片側だけ広げると段差が見える） */
.spec dt:nth-of-type(even),.spec dd:nth-of-type(even){
margin:0 -10px;padding-left:10px;padding-right:10px}
.spec dt:nth-of-type(even){padding-bottom:0}
.pricing dt,.pricing dd{flex:0 0 50%}
.gallery img{height:210px}
.gallery .wide img{height:280px}
}

/* blog/content */
.entry-content{max-width:760px;margin:0 auto;padding:60px 6%}
.entry-content h2{color:var(--c-ink);margin:36px 0 14px;font-size:22px}
.entry-content p{margin-bottom:18px}
/* 活動報告カード。.card と同じ「上辺の帯＋浮き」で押せることを示す */
.post-card{display:block;position:relative;overflow:hidden;background:var(--c-card);border:1px solid var(--c-card-line);border-radius:var(--radius);padding:22px;color:var(--c-body);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.post-card::before{content:"";position:absolute;top:-1px;right:-1px;width:20px;height:20px;
background:linear-gradient(225deg,var(--page-bg,var(--c-paper)) 0 49.6%,var(--fold-back) 50% 100%);
border-bottom-left-radius:9px;box-shadow:-3px 3px 5px rgba(60,45,30,.10);
transition:width .32s cubic-bezier(.2,.75,.3,1.05),height .32s cubic-bezier(.2,.75,.3,1.05);
pointer-events:none;z-index:1}
.post-card:hover,.post-card:focus-visible{opacity:1;transform:translateY(-9px) scale(1.02);
box-shadow:0 22px 44px rgba(107,79,49,.22),0 4px 10px rgba(107,79,49,.10)}
.post-card:hover::before,.post-card:focus-visible::before{width:48px;height:48px}
.post-card:hover h3{color:var(--c-terra-deep)}
.post-card time{font-size:12px;color:var(--c-soft)}
.post-card h3{font-size:15.5px;color:var(--c-ink);margin-top:6px;font-weight:700;transition:color .25s ease}

/* ハンバーガー（820px 以下） */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--c-ink);position:relative;transition:transform .25s,background .25s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--c-ink);transition:transform .25s}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;background:rgba(38,30,20,.42);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
.nav-backdrop.on{opacity:1;pointer-events:auto}

/* スキップリンク（left:-9999px は横あふれを作るので使わない） */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
top:0;left:0;z-index:200;background:var(--c-terra);color:#fff;padding:10px 18px;border-radius:0 0 8px 0}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* 640px 以下では縦書きの見出しを横組みに倒し、上下に分ける
   （縦書きのままだと横書きのコピーと重なる） */
@media (max-width:640px){
.hero{height:min(86vh,640px)}
.hero-vcopy{writing-mode:horizontal-tb;top:11%;left:6%;right:auto;
font-size:clamp(23px,7.2vw,30px);line-height:1.65;letter-spacing:.1em}
.hero-copy{top:auto;bottom:7%;left:6%;right:6%;max-width:none}
.hero-copy .sub{font-size:14px;line-height:2}
.hero-copy .tag{font-size:11.5px;letter-spacing:.14em}
.badge-card{width:calc(50% - 7px);padding:12px}
.badge-card img{height:62px}
.cta-fac{min-width:0;flex:1 1 100%}
.tel-wrap{font-size:26px}
.section{padding:60px 6%}
.page-head{padding:40px 6% 22px}
}

@media (max-width:820px){
/* 画面外に退避したパネルが横スクロールを生むのを止める。
   clip は新しいスクロールコンテナを作らないので sticky ヘッダーは生きたまま。
   （clip 非対応ブラウザ向けに hidden を先に置く） */
html{overflow-x:hidden;overflow-x:clip}
.nav-toggle{display:flex}
.site-nav{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);background:var(--c-paper);
z-index:70;transform:translateX(101%);transition:transform .3s ease;padding:72px 24px 32px;overflow-y:auto;
box-shadow:-10px 0 34px rgba(60,45,30,.18)}
.site-nav.open{transform:none}
.site-nav ul{display:block}
.site-nav li{border-bottom:1px solid var(--c-card-line)}
.site-nav li:last-child{border-bottom:0;margin-top:16px}
.site-nav a{display:block;padding:14px 2px;font-size:15px}
.nav-cta{display:inline-block;padding:12px 24px}
.hero-vcopy{right:4%;font-size:24px}
.hero-copy{left:5%;top:30%}
.footer-nav{text-align:left}
}
@media (prefers-reduced-motion: reduce){
.js .fx{opacity:1;transform:none;transition:none}
.tel-sweep{animation:none}
/* 動きを抑えたい設定では、カード・ボタンの浮きと帯の伸びを止める
   （色の変化だけで手掛かりは残る） */
.card,.post-card,.btn,.btn-ghost,.media-banner,.card::before,.card a[href],
.post-card::before,.post-card h3{transition:none}
.card:hover,.card:focus-within,.post-card:hover,.post-card:focus-visible,
.btn:hover,.media-banner:hover{transform:none}
.card:hover a[href]::after{transform:none}
.card:has(a)::before,.post-card::before{transition:none}
}

/* ホームのマーク（フクロウ／まんじゅう） */
.fac-mark{float:right;width:54px;height:auto;margin:0 0 6px 12px;opacity:.92}
.has-mark{position:relative}
.section-label+.fac-mark{float:none;display:block;margin:0 0 10px}
@media (max-width:640px){.fac-mark{width:44px}}

/* ── 印刷 ── ご家族が紙に刷って読む前提。装飾は落とし、本文を確実に出す。
   .fx の初期透明のまま印刷すると本文がまるごと白紙になるので、必ず可視化する */
@media print{
.js .fx{opacity:1!important;transform:none!important;transition:none!important}
.site-nav,.nav-toggle,.nav-backdrop,.mobile-cta,.cta-band,#ryuko-intro,
.hero canvas,.btn,.btn-ghost,.media-banner,.map-open,.intro-skip{display:none!important}
body{background:#fff;color:#111}
.hero{height:auto;background:none;padding:20px 0}
.hero-vcopy{position:static;writing-mode:horizontal-tb;text-shadow:none}
.hero-copy{position:static;max-width:none;text-shadow:none}
.section,.section-deep{background:#fff;padding:18px 0;--page-bg:#fff}
.wave{display:none}
.card,.post-card,.spec,.pricing,.mtable,.minutes-note{box-shadow:none;border-color:#bbb;background:#fff!important}
a{color:#111}
}