/* ============================================ まどろみの家（デモ） - style.css 全ページ共通スタイル。 「がんばりすぎる前に、頼れる場所を。」 2026-08-03、施主承認のリブランドA案「和モダン・和紙」へ 全面リスタイル。地色を生成り和紙(#f7f1e8)に、輪郭は太い墨2px線+ ハードオフセット影から、細い墨1px罫・カード面の白さの差・下辺の 色線1本(茜→松葉→藤のローテーション)へ置き換えた。朱・落款・はんこ風の 要素は使わない。コピー・ページ構成・レイアウト構造・JSの挙動は 変更せず、視覚トーン（色・線・影・角丸）とロゴのみを差し替えている。 動きは .rv（スクロールリビール）＋ヒーローのアーチ写真マーキー （CSSのみ）を基本とし、過度な演出は避ける。 ============================================ */ :root{ /* 2026-08-03、和モダンA案。アクセント3色(茜・松葉・藤)は 旧トーン(ローズ・セージグリーン・藤色)の値をそのまま維持し、 呼び名だけ和名に変更した。変数名は維持し値だけ差し替えているため 変数経由の参照箇所はすべて自動追従する。 */ --cream:#f7f1e8; /* 生成り和紙（地）。旧#f9eeedから変更 */ --paper:#ffffff; /* フォーム入力等、純白が必要な箇所用 */ --card:#fcf9f4; /* カード面（地より一段白い和紙。C3カード様式用に新設） */ --brown:#3f3230; /* 本文・見出し・ボタン地（墨。変更なし） */ --ink:#3f3230; /* --brownの別名（輪郭・見出し・badge用） */ --ink-line:rgba(63,50,48,.18); /* 細い墨1px罫線（ハードオフセット影の廃止に伴い新設） */ --persimmon:#d96c7f; /* 茜（アクセント。ボタン/強調の地色。文字は基本 var(--ink)。値は変更なし） */ --persimmon-soft:#f6dade; /* 茜の淡色背景 */ --leaf:#8fa97a; /* 松葉（サブアクセント。バッジ/アイコン地限定。値は変更なし） */ --leaf-soft:#ecf1e4; /* 松葉の淡色背景 */ --sky:#cfc4e6; /* 藤（帯セクション背景。値は変更なし） */ --sky-deep:#b3a3d8; /* 藤の濃色（ラベルタグ枠。文字は基本var(--ink)） */ --yellow-soft:#f7dcae; /* 杏色（PEOPLEカルーセルのカード背景ローテーション用） */ --line:#e6dcc9; /* 罫線（生成りに馴染むグレージュ。旧#e9d8d6から微調整） */ --dim:#6b5d58; /* 補足テキスト。2026-08-03、UI/UX改善で#8a7a76(生成り地で約3.65:1)から コントラスト是正。4時間帯の地色いずれでも5.1:1以上を確保(WCAG AA適合)。 */ --danger:#b4544a; /* 注意表記のみ（多用しない・変更なし） */ --ease:cubic-bezier(0.16,1,0.3,1); /* 季節のしつらえ用（2026-08-04、「時刻連動グロー」の取り下げに伴い --sun-x等から差し替え）。季節モチーフSVG・季節プレビューUIの装飾色 にのみ使う変数で、本文色・ボタン等のvar(--persimmon)自体には影響 しない（コントラストへの影響を避けるため分離）。既定は茜そのまま。 */ --season-accent: var(--persimmon); } /* ---------- リセット ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px;transition:font-size .3s var(--ease)} body{ font-family:"Zen Kaku Gothic New",sans-serif; background:var(--cream); color:var(--brown); line-height:2; font-size:1rem; /* = 16px。歯科の15.5pxより大きく、家族世代にも読みやすいサイズ */ -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color 2s var(--ease); } /* 慣性スムーススクロール有効時、#smooth側で本文を描画するため ネイティブスクロールバーの出入りによるガタつきを防ぐ */ body.is-hijack{overflow-y:scroll} body.is-hijack .smooth{position:fixed;top:0;left:0;width:100%;will-change:transform} /* 演出フルセット有効時（ファインポインタ環境）はリンク/ボタンの既定カーソルを消し、 カスタムカーソル（ドット+リング）に置き換える */ body.is-fine-pointer a, body.is-fine-pointer button{cursor:none} a{color:inherit;text-decoration:none} ul,ol{list-style:none} img,svg{max-width:100%;display:block} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} table{border-collapse:collapse} /* ============================================ フォーカスリング（キーボード操作時のみ表示。item3） マウスクリックでは出ず、Tab移動時のみ茜色の可視リングを角丸に沿って表示する。 カスタムカーソル演出(is-fine-pointer)とは独立して常に機能する。 ============================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2.5px solid var(--persimmon); outline-offset:2px; } .maru{font-family:"Zen Maru Gothic",sans-serif;font-weight:800;letter-spacing:.04em} .en{font-family:"Manrope",sans-serif;letter-spacing:.06em} /* ============================================ 文字サイズ切替（アクセシビリティ機能） .text-size-btn クリックで に .large-text を付け外しし、 本CSS内の主要な font-size を rem 指定にしていることで html { font-size:16px→18.4px(約115%) } だけでサイト全体の文字が 連動して拡大する仕組み。状態は localStorage に保存し、全ページで維持する （実装は js/main.js）。JS無効時はボタン自体を非表示にする（.no-js側で制御）。 ============================================ */ html.large-text{font-size:18.4px} .text-size-btn{ display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px; border:1px solid var(--ink);border-radius:999px; padding:7px 14px;font-size:.8rem;font-weight:700;letter-spacing:.04em; color:var(--ink);background:var(--paper);flex-shrink:0; transition:border-color .2s,background .2s; } .text-size-btn:hover{background:var(--sky)} .text-size-btn .ts-ico{font-family:"Manrope";font-weight:800;font-size:.85em} .text-size-btn[aria-pressed="true"]{background:var(--persimmon);border-color:var(--ink);color:var(--ink)} .no-js .text-size-btn{display:none} @media(max-width:640px){.text-size-btn .ts-label{display:none}.text-size-btn{padding:8px 10px}} /* 写真プレースホルダー（写真が用意できるまでの仮置き用） */ .ph{position:relative;background:linear-gradient(135deg,var(--persimmon-soft),var(--cream) 55%,var(--leaf-soft));overflow:hidden} .ph img,.ph svg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} /* ============================================ 共通ヘッダー ============================================ */ .hd{ position:sticky;top:0;z-index:60; display:flex;justify-content:space-between;align-items:center; padding:14px 28px;background:rgba(252,249,244,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--ink-line); } /* フルスクリーンメニュー展開中は.hdを.fs-menu(z-index:110)より前面に出し、 .menu-btn(ハンバーガー→×変形)がそのまま閉じるボタンとして見える/押せるようにする。 .menu-btnはz-index:120を持つが.hdの子(独立したスタッキングコンテキスト)のため、 .hd自体を持ち上げないと.fs-menuの下に隠れてしまう。 */ body.menu-open .hd{z-index:130} .logo{display:flex;align-items:center;gap:12px} /* ============================================ ロゴマーク（L1・2026-08-03刷新） 旧「ローズ丸+H」から、丸背景なし・生成り地に直接置く 「ひ」の一文字(Zen Maru Gothic 900)+右上の光点3つ(茜・松葉・藤)へ。 光点は::afterひとつにbox-shadowを重ねる手法で3点とも表現しており、 HTML側は文字を"ひ"に差し替えるだけで済む（.logo .mark / .loader .mark / admin.htmlの.admin-header .mark、いずれも同じ考え方）。 ============================================ */ .logo .mark{ position:relative;width:auto;height:auto;flex-shrink:0; background:none;border:none;border-radius:0; display:inline-flex;align-items:flex-start;justify-content:center; padding:2px 13px 6px 1px; font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:1.55rem;line-height:1; color:var(--ink); } .logo .mark::after{ content:"";position:absolute;top:3px;right:2px; width:4px;height:4px;border-radius:50%;background:var(--leaf); box-shadow:7px -3px 0 0 var(--sky),-6px 7px 0 0 var(--persimmon); } .logo .txt b{display:block;font-size:.94rem;font-weight:800;letter-spacing:.06em;font-family:"Zen Maru Gothic",sans-serif} .logo .txt span{font-size:.64rem;color:var(--dim);letter-spacing:.14em} .hd nav{display:flex;gap:14px;font-size:.875rem;font-weight:700;flex-wrap:wrap;max-width:600px} /* ヘッダーnavリンク: 見た目のpadding(4px 0)は維持しつつ、::beforeで 上下方向に44px相当のヒットエリアを確保する(item4)。 */ .hd nav a{position:relative;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap;display:inline-block} .hd nav a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} .hd nav a:hover,.hd nav a.is-current{border-color:var(--ink);color:var(--ink)} .hd-right{display:flex;align-items:center;gap:12px} .hd .btn.sm{padding:10px 20px;font-size:.8rem} @media(max-width:1180px){ .hd nav{display:none} } @media(max-width:640px){ .hd .btn.sm{display:none} .hd{padding:12px 16px;gap:8px} } /* ハンバーガーボタン（1180px以下で表示） */ .menu-btn{ display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px; position:relative;z-index:120;flex-shrink:0; } .menu-btn span{display:block;width:22px;height:2px;background:var(--brown);transition:transform .3s var(--ease),opacity .2s var(--ease)} body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .menu-btn span:nth-child(2){opacity:0} body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1180px){.menu-btn{display:flex}} /* トップページFV: ページ内CSSより詳細度を上げ、デスクトップだけ画面高に追従 */ @media(min-width:881px){ html .hero-kv{min-height:max(560px,calc(100vh - 91px));min-height:max(560px,calc(100svh - 91px))} } @media(min-width:1121px){ html .hero-kv-inner{margin-left:min(calc((100vw - 1120px)/2),clamp(0px,12vw,320px));margin-right:auto} } /* フルスクリーンメニュー ハンバーガーボタン位置を中心に円形展開(clip-path circle)で開閉する。 ボタンはヘッダー右端付近に常に位置するため、固定の rem オフセットで 近似する(土木会社HPと同じ手法)。開閉時はpointer-eventsも連動させ、 閉時に透明な全画面レイヤーがクリックを奪わないようにする。 */ .fs-menu{ position:fixed;inset:0;z-index:110;background:var(--cream); display:flex;flex-direction:column;justify-content:flex-start;align-items:center; padding:96px 28px 40px;overflow-y:auto; clip-path:circle(0% at calc(100% - 3.6rem) 3.4rem); pointer-events:none; transition:clip-path .7s var(--ease); } body.menu-open{overflow:hidden} body.menu-open .fs-menu{clip-path:circle(150% at calc(100% - 3.6rem) 3.4rem);pointer-events:auto} @media(max-width:640px){ .fs-menu{clip-path:circle(0% at calc(100% - 2.6rem) 2.9rem)} body.menu-open .fs-menu{clip-path:circle(150% at calc(100% - 2.6rem) 2.9rem)} } /* 画面高さに余裕があるときだけ上下の auto マージンが余白を分け合い縦中央寄せに見える。 はみ出す高さでは auto が 0 に収束し、先頭の「トップ」から順に上詰め表示→overflow-yでスクロール可能になる （justify-content:centerだと表示上部がscrollTop負方向に隠れて到達不能になるため使わない）。 */ .fs-menu nav{display:flex;flex-direction:column;width:100%;max-width:480px;margin:auto auto 0} .fs-menu nav a{ font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:clamp(18px,4.6vw,25px);letter-spacing:.06em; padding:14px 2px;border-bottom:1px solid var(--ink-line);display:flex;justify-content:space-between;align-items:center; opacity:0;transform:translateY(14px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s; } .fs-menu nav a span{font-family:"Manrope";font-size:.68rem;color:var(--dim);letter-spacing:.1em} .fs-menu nav a:hover{color:var(--ink);background:var(--sky)} body.menu-open .fs-menu nav a{opacity:1;transform:translateY(0)} .fs-menu nav a:nth-child(1){transition-delay:.04s} .fs-menu nav a:nth-child(2){transition-delay:.07s} .fs-menu nav a:nth-child(3){transition-delay:.10s} .fs-menu nav a:nth-child(4){transition-delay:.13s} .fs-menu nav a:nth-child(5){transition-delay:.16s} .fs-menu nav a:nth-child(6){transition-delay:.19s} .fs-menu nav a:nth-child(7){transition-delay:.22s} .fs-menu nav a:nth-child(8){transition-delay:.25s} .fs-menu nav a:nth-child(9){transition-delay:.28s} .fs-menu nav a:nth-child(10){transition-delay:.31s} .fs-menu nav a:nth-child(11){transition-delay:.34s} .fs-menu .fs-foot{ width:100%;max-width:480px;margin:26px auto auto;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center; opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .4s,transform .5s var(--ease) .4s; } body.menu-open .fs-menu .fs-foot{opacity:1;transform:translateY(0)} .fs-menu .fs-foot .tel-big{font-family:"Manrope";font-size:1.3rem;letter-spacing:.04em;color:var(--brown)} .fs-menu .fs-foot .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} /* 縦幅の狭い端末（〜667px程度）向けに行間・余白を詰めてスクロール量を抑える */ @media(max-height:700px){ .fs-menu{padding:84px 28px 28px} .fs-menu nav a{padding:9px 2px} .fs-menu .fs-foot{margin-top:16px;gap:8px} } .menu-close{position:absolute;top:14px;right:22px;width:40px;height:40px;display:none} /* ============================================ スマホ下部固定タブバー（560px以下） トップ／サービス／料金／見学予約の4タブ＋右端「メニュー」ブロック （タップで fsMenu を開く。js/main.js の [data-sp-menu-open] バインド） アイコンは自作の簡易インラインSVG。 ============================================ */ .sp-bar{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:90; grid-template-columns:repeat(4,1fr) auto; background:var(--paper);border-top:1px solid var(--ink-line); } .sp-bar .sp-tab{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:44px; padding:9px 4px calc(9px + env(safe-area-inset-bottom,0px)); font-size:.72rem;font-weight:700;letter-spacing:.01em;color:var(--dim); border-right:1px solid var(--line); transition:background .2s,color .2s; } .sp-bar .sp-tab .ico{width:20px;height:20px;color:var(--dim);transition:color .2s} .sp-bar .sp-tab.is-current{color:var(--ink);background:var(--sky)} .sp-bar .sp-tab.is-current .ico{color:var(--ink)} .sp-bar .sp-tab:active{background:var(--persimmon-soft)} .sp-bar .sp-menu-btn{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:44px; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:var(--ink);color:#fff;font-size:.72rem;font-weight:700; } .sp-bar .sp-menu-btn .ico{width:20px;height:20px;color:#fff} .sp-bar .sp-menu-btn:active{background:var(--persimmon);color:var(--ink)} .sp-bar .sp-menu-btn:active .ico{color:var(--ink)} @media(max-width:560px){ .sp-bar{display:grid} body{padding-bottom:64px} } /* ============================================ ボタン ============================================ */ /* B1: 主ボタン=茜ベタ+白文字+角丸999pxの丸ピル。ハード影は使わない。 線ボタンは墨1px線+墨文字、ホバーで茜線+茜文字に切り替える（塗りつぶさない）。 */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-weight:800;font-size:.9rem;letter-spacing:.04em;padding:15px 30px;border-radius:999px;border:1px solid var(--ink);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .2s var(--ease)} .btn.fill{background:var(--persimmon);color:#fff;border-color:var(--persimmon)} .btn.fill:hover{background:#c65a6d} .btn.line{border:1px solid var(--ink);color:var(--ink);background:var(--paper)} .btn.line:hover{border-color:var(--persimmon);color:var(--persimmon);background:var(--paper)} .btn.leaf{background:var(--leaf);color:#fff;border-color:var(--leaf)} .btn.leaf:hover{background:#7c9868} /* 「詳細を見る→」等に添える墨色の正円＋白矢印アイコンボタン共通クラス。 ホバーでコーラルに反転（アイコン色は墨に切り替え、コントラストを保つ）。 */ .circle-arrow{ display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:32px;height:32px;border-radius:50%; background:var(--ink);color:#fff;font-family:"Manrope";font-size:.9rem; transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease); } /* ============================================ セクション見出し（2026-07-28 主従反転） 旧仕様（Manrope極太の大きなEN見出し＋日本語ピルバッジ）から、 大きな日本語h2(Zen Maru Gothic 900・現ENと同等の存在感)＋ 小さいENキャプション(Manrope・dim色・レタースペース広め・装飾扱い) へ反転。ENキャプションの文言(WHY MADOROMI等)自体は変更せず、 視覚的な主従関係だけをCSSで入れ替えている。DOM順は変えない。 ============================================ */ .sec{max-width:1120px;margin:0 auto;padding:88px 24px 0;position:relative} /* モバイル縦リズム(item8): 640px以下はセクション上余白を8の倍数3段階 (40/64/96px)の中段に整理し、デスクトップ比で詰め過ぎ・空き過ぎを均す。 */ @media(max-width:640px){.sec{padding-top:64px}} .label{display:block;margin-bottom:14px} .label .en{ display:inline-block;font-family:"Manrope",sans-serif;font-weight:700; font-size:.72rem;letter-spacing:.16em;line-height:1; color:var(--dim);text-transform:uppercase; } /* 素のh2はCTA見出し・フォーム完了メッセージ等、.labelを伴わない単独見出し用の 既定スタイル（大きな墨色の太字見出し）。 */ h2{ font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:800; letter-spacing:.03em;line-height:1.6;margin-bottom:22px;color:var(--brown); } /* セクション見出しパターン（.label直後のh2）は主見出しとして ENキャプションと同等以上の存在感を持たせる大きな日本語見出しにする。 */ .label + h2{ display:block; font-size:clamp(30px,5.4vw,52px);font-weight:900;letter-spacing:.03em;line-height:1.6; background:none;color:var(--brown);padding:0;border-radius:0;margin-bottom:24px; } /* T3: セクション見出し(h2.maru)の下に茜の短い下線を敷く（落款は使わない）。 単独h2(CTA見出し・フォーム完了メッセージ等)にも同じ下線を統一で付ける。 */ h2.maru::after{ content:"";display:block;width:2.5em;height:3px;border-radius:3px; background:var(--persimmon);margin-top:12px; } .sec-lead{max-width:580px;color:var(--dim);margin-bottom:36px} /* ============================================ C3: カード様式（理由カード・サービスmcard・statタイル・空き状況カード・ 声カード・FAQアイテム等の「カード的な箱」共通の考え方） 枠線なし・地より一段白い面(var(--card))・下辺にのみ3pxの色線 （並び順に茜→松葉→藤のローテーション）。ホバーは「下辺色線が僅かに 太る/面が僅かに白くなる」程度の静かな変化に留め、跳ねる動き・ ハードオフセット影は使わない。 ============================================ */ .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:820px){.menu-grid{grid-template-columns:1fr}} .mcard{ background:var(--card);border:none;border-radius:8px;padding:28px 26px; border-bottom:3px solid var(--persimmon); box-shadow:none; transition:border-bottom-width .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease); display:block;position:relative; } .mcard:hover{border-bottom-width:5px;background:#fffdf9;box-shadow:0 2px 12px rgba(63,50,48,.06)} .menu-grid .mcard:nth-child(3n+2){border-bottom-color:var(--leaf)} .menu-grid .mcard:nth-child(3n+3){border-bottom-color:var(--sky)} .mcard .en{font-size:.68rem;color:var(--ink);font-weight:700;letter-spacing:.1em;opacity:.62} .mcard h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:.02em;margin:10px 0 10px} .mcard p{font-size:1rem;color:var(--dim)} .mcard .fee{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem;color:var(--dim)} .mcard .fee b{font-family:"Manrope";font-size:1rem;color:var(--ink);letter-spacing:.02em;font-weight:700} .mcard::after{ content:"→";position:absolute;right:20px;bottom:20px; width:32px;height:32px;border-radius:50%; background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center; font-family:"Manrope";font-size:.9rem; transition:background .25s var(--ease),color .25s var(--ease); } .mcard:hover::after{background:var(--persimmon);color:var(--ink)} .menu-note{font-size:.875rem;color:var(--dim);margin-top:16px;line-height:1.9} /* ============================================ 帯セクション（パウダーブルー全幅帯） .band で全幅の背景色を敷き、内側の .sec は上余白0で中央寄せのみ担当する。 index の「選ばれる3つの理由」「ご利用までの流れ」、price の 「自己負担のしくみ」に使用し、ベージュ地との交互リズムを作る。 ============================================ */ .band{width:100%;background:var(--sky);padding:80px 0} @media(max-width:640px){.band{padding:64px 0}} .band .sec{padding:0 24px} .band + .sec,.sec + .band{margin-top:0} /* 選ばれる理由（3分割カード。帯の中に個別カードとして配置。C3様式＋色ローテーション） */ .assure{max-width:1120px;margin:0 auto;padding:0 24px} .assure ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:760px){.assure ul{grid-template-columns:1fr}} .assure li{ background:var(--card);border:none;border-radius:8px;padding:26px 22px; border-bottom:3px solid var(--persimmon);box-shadow:none; transition:border-bottom-width .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease); } .assure li:hover{border-bottom-width:5px;background:#fffdf9;box-shadow:0 2px 12px rgba(63,50,48,.06)} .assure ul li:nth-child(3n+2){border-bottom-color:var(--leaf)} .assure ul li:nth-child(3n+3){border-bottom-color:var(--sky)} .assure li .ico{width:46px;height:46px;border-radius:50%;background:var(--leaf-soft);display:grid;place-items:center;margin-bottom:14px} .assure li b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:1rem;letter-spacing:.02em;margin-bottom:6px} .assure li span{font-size:1rem;color:var(--dim);line-height:1.8;display:block} /* 料金早見表（内側罫線は現状の実線を維持） */ table.fee{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--ink-line);border-radius:8px;overflow:hidden;font-size:1rem} .fee thead th{background:var(--ink);color:#fff;font-weight:700;letter-spacing:.04em;font-size:.875rem;padding:14px 10px;text-align:left} .fee td,.fee th{padding:14px 10px;border-bottom:1px solid var(--line);text-align:left} .fee tbody th{font-weight:700;letter-spacing:.02em;white-space:nowrap} .fee tbody tr:last-child td,.fee tbody tr:last-child th{border-bottom:none} .fee td .amt{font-family:"Manrope";font-weight:700;color:var(--ink);font-size:1.1rem} .fee-note{font-size:.875rem;color:var(--dim);margin-top:14px;line-height:1.9} .fee-note.warn{color:var(--danger)} /* 今週の空き状況（デイサービス。js/availability-data.jsのAVAILABILITY_DATAから day.htmlの本体表・トップのミニ表示をJS生成する共通コンポーネント）。 ○△×の記号だけに頼らず、色＋テキストで判別できるようにしている。 */ .avail-card{background:var(--card);border:none;border-radius:8px;padding:26px 28px;border-bottom:3px solid var(--persimmon);box-shadow:none} .avail-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:18px} .avail-card-head .wk{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.02em} .avail-card-head .upd{font-size:.8rem;color:var(--dim)} .avail-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} @media(max-width:640px){.avail-grid{grid-template-columns:repeat(3,1fr)}} .avail-note{font-size:.875rem;color:var(--dim);margin-top:16px;line-height:1.9} .avail-cta{margin-top:20px} .avail-pill{border:1px solid var(--ink-line);border-radius:8px;padding:10px 4px;text-align:center;background:var(--paper)} .avail-pill .d{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:.9rem;margin-bottom:6px} .avail-pill .st{display:block;font-size:.78rem;font-weight:700;letter-spacing:.01em;padding:4px 2px;border-radius:8px;line-height:1.4} .avail-pill.is-ok .st{background:var(--leaf-soft);color:var(--ink)} .avail-pill.is-few .st{background:var(--yellow-soft);color:var(--ink)} .avail-pill.is-full .st{background:rgba(180,84,74,.12);color:var(--danger)} /* トップページ用ミニ表示（デイサービスダイジェスト直後の控えめな表示） */ .avail-mini{background:var(--card);border:none;border-radius:8px;padding:16px 18px;border-bottom:3px solid var(--persimmon);box-shadow:none;margin-top:24px} .avail-mini-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap} .avail-mini-head b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:.875rem} .avail-mini-head a{font-size:.8rem;color:var(--dim)} .avail-mini-head a:hover{color:var(--ink)} .avail-mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} @media(max-width:520px){.avail-mini-grid{grid-template-columns:repeat(3,1fr)}} .avail-mini-grid .avail-pill{padding:7px 2px} .avail-mini-grid .avail-pill .d{font-size:.78rem;margin-bottom:4px} .avail-mini-grid .avail-pill .st{font-size:.68rem;padding:3px 1px} /* ============================================ 下層ページ用: パンくず / ページヘッダー ============================================ */ .crumbs{max-width:1120px;margin:0 auto;padding:18px 24px 0;font-size:.875rem;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px;align-items:center} .crumbs a{color:var(--dim);transition:color .2s} .crumbs a:hover{color:var(--ink)} .crumbs .sep{color:#b8ab9a} .crumbs .now{color:var(--brown)} .page-head{max-width:1120px;margin:0 auto;padding:26px 24px 0;position:relative} .page-head .en{display:block;font-family:"Manrope",sans-serif;font-size:.86rem;font-weight:800;letter-spacing:.08em;color:var(--ink);margin-bottom:14px} .page-head h1{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:.03em;line-height:1.6} .page-head p{max-width:600px;margin-top:16px;color:var(--dim)} /* ============================================ 施設紹介 / スタッフ紹介 / ご利用の流れ / アクセス （下層ページで使う共通レイアウト部品） ============================================ */ .policy{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} @media(max-width:820px){.policy{grid-template-columns:1fr}} .policy .ph{aspect-ratio:4/3;border-radius:12px;border:1px solid var(--ink-line)} .policy-points{display:grid;gap:0;border-top:1px solid var(--ink-line)} .pp{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)} .pp .no{font-family:"Manrope";font-weight:800;font-size:.8rem;color:#fff;background:var(--ink);border-radius:50%;width:38px;height:38px;display:grid;place-items:center} .pp h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:.02em;margin-bottom:4px} .pp p{font-size:1rem;color:var(--dim)} .doc{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center} @media(max-width:820px){.doc{grid-template-columns:1fr}} .doc .ph{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--ink-line)} .doc blockquote{font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:1.1rem;line-height:2;letter-spacing:.03em} .doc .who{margin-top:22px;font-size:.875rem;color:var(--dim);line-height:1.9;max-width:42em} .doc .who b{display:block;font-size:1rem;color:var(--brown);letter-spacing:.04em;font-family:"Zen Maru Gothic",sans-serif;font-weight:800} .doc ul{margin-top:14px;font-size:.875rem;color:var(--dim);line-height:1.9} .doc ul li::before{content:"／ ";color:var(--ink)} /* スタッフグリッド */ .staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:820px){.staff-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.staff-grid{grid-template-columns:1fr}} .staff-card{ background:var(--card);border:none;border-radius:8px;overflow:hidden; border-bottom:3px solid var(--persimmon);box-shadow:none; transition:border-bottom-width .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease); } .staff-card:hover{border-bottom-width:5px;background:#fffdf9;box-shadow:0 2px 12px rgba(63,50,48,.06)} .staff-grid .staff-card:nth-child(3n+2){border-bottom-color:var(--leaf)} .staff-grid .staff-card:nth-child(3n+3){border-bottom-color:var(--sky)} .staff-card .ph{aspect-ratio:1/1;border-radius:0;border:none;border-bottom:1px solid var(--ink-line)} .staff-card .body{padding:18px 20px} .staff-card .role{display:inline-block;font-size:.72rem;color:#fff;background:var(--ink);font-weight:700;letter-spacing:.04em;padding:3px 12px;border-radius:999px} .staff-card h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.15rem;font-weight:800;margin:8px 0 8px} .staff-card p{font-size:1rem;color:var(--dim);line-height:1.8} /* スタッフ紹介→採用インタビュー2件のクロスセル表示用（.staff-cardを流用しつつ2列に固定） */ .staff-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:640px;margin:0 auto} @media(max-width:560px){.staff-grid.cols-2{grid-template-columns:1fr}} .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step} @media(max-width:820px){.flow{grid-template-columns:1fr 1fr}} @media(max-width:520px){.flow{grid-template-columns:1fr}} .fstep{ background:var(--card);border:none;border-radius:8px;padding:24px 20px;position:relative; border-bottom:3px solid var(--persimmon);box-shadow:none; transition:border-bottom-width .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease); } .fstep:hover{border-bottom-width:5px;background:#fffdf9;box-shadow:0 2px 12px rgba(63,50,48,.06)} .flow .fstep:nth-child(3n+2){border-bottom-color:var(--leaf)} .flow .fstep:nth-child(3n+3){border-bottom-color:var(--sky)} .fstep::before{counter-increment:step;content:"0" counter(step);font-family:"Manrope";font-weight:800;font-size:.8rem;color:var(--ink);letter-spacing:.1em;opacity:.55} .fstep h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:.02em;margin:8px 0 6px} .fstep p{font-size:1rem;color:var(--dim)} .fstep .time{margin-top:10px;font-size:.875rem;color:var(--dim)} .fstep .time b{color:var(--ink)} /* 1日の流れ（タイムライン） */ .timeline{display:grid;gap:0;border-top:1px solid var(--ink-line)} .tl-item{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline} @media(max-width:560px){.tl-item{grid-template-columns:78px 1fr}} .tl-item .time{font-family:"Manrope";font-weight:800;color:var(--ink);font-size:.9rem;white-space:nowrap} .tl-item h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.15rem;font-weight:800;margin-bottom:4px} .tl-item p{font-size:1rem;color:var(--dim)} .info{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start} @media(max-width:820px){.info{grid-template-columns:1fr}} .access .ph{aspect-ratio:16/9;border-radius:12px;margin-bottom:16px;border:1px solid var(--ink-line)} .access p{font-size:1rem;color:var(--dim);max-width:42em} .access p b{color:var(--brown)} /* CTA: コーラル地には墨色文字を基本とする（白文字は使わない） */ .cta{max-width:1120px;margin:96px auto 0;padding:0 24px;position:relative} @media(max-width:640px){.cta{margin-top:64px}} .cta .box{background:var(--persimmon);color:var(--ink);border:none;border-radius:12px;padding:56px 28px;text-align:center;position:relative;overflow:hidden;box-shadow:none} @media(max-width:640px){.cta .box{padding:40px 24px}} .cta .box::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.25);top:-160px;right:-100px} .cta h2{color:var(--ink);margin-bottom:8px} .cta h2::after{background:var(--ink)} .cta p{font-size:1rem;color:rgba(63,50,48,.68);margin-bottom:28px;position:relative} .cta .btn.fill{background:#fff;color:var(--ink)} .cta .btn.line{border-color:var(--ink);color:var(--ink);margin-left:10px;background:transparent} .cta .btn.line:hover{background:var(--ink);color:#fff} @media(max-width:560px){.cta .btn{display:flex;justify-content:center}.cta .btn.line{margin:12px 0 0}} /* お知らせティッカー / FAQ抜粋（トップページ用） */ .ticker{border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);overflow:hidden} .ticker-in{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:22px} .ticker-in .en{font-family:"Manrope",sans-serif;font-size:.72rem;color:var(--ink);font-weight:800;flex-shrink:0;letter-spacing:.1em} .ticker-list{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .ticker-list a{display:flex;gap:14px;align-items:baseline;font-size:.9rem;color:var(--dim);padding:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px} .ticker-list a:hover{color:var(--ink)} .ticker-list time{font-family:"Manrope";font-size:.78rem;color:var(--dim);flex-shrink:0} .ticker-list .cat{flex-shrink:0;font-size:.72rem;padding:2px 10px;border-radius:999px;background:var(--sky);color:var(--ink);letter-spacing:.02em;font-weight:700} .ticker-list .ttl{color:var(--brown);overflow:hidden;text-overflow:ellipsis} .faq-top{display:grid;gap:0;border-top:1px solid var(--ink-line)} /* FAQアイテムもC3カード様式の考え方(下辺3pxの色線ローテーション)を踏襲する。 レイアウト・余白は変えないため面色や角丸は付けない（罫線の質だけ変える）。 */ .faq-item{border-bottom:3px solid var(--persimmon);transition:border-bottom-width .2s var(--ease)} .faq-item:hover{border-bottom-width:4px} .faq-top .faq-item:nth-child(3n+2){border-bottom-color:var(--leaf)} .faq-top .faq-item:nth-child(3n+3){border-bottom-color:var(--sky)} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:22px 4px;cursor:pointer;font-size:1rem;font-weight:500} .faq-q .qmark{font-family:"Manrope";color:var(--ink);font-weight:800;flex-shrink:0} .faq-q .plus{flex-shrink:0;width:22px;height:22px;position:relative} .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--brown);top:50%;left:50%;transform:translate(-50%,-50%)} .faq-q .plus::before{width:14px;height:1.5px} .faq-q .plus::after{width:1.5px;height:14px;transition:transform .25s var(--ease)} .faq-item.is-open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .faq-a p{padding:0 4px 22px;font-size:1rem;color:var(--dim);max-width:660px} .faq-item.is-open .faq-a{max-height:500px} .faq-cat-label{font-family:"Zen Maru Gothic",sans-serif;font-size:1rem;font-weight:800;margin:40px 0 8px;color:var(--brown)} .faq-cat-label:first-child{margin-top:0} /* ============================================ フォーム（見学予約・お問い合わせ共通） バッジ3種: 墨地×白文字(h2見出し等) / 白地×墨縁アウトライン(.opt) / コーラル地×墨文字(.req) ============================================ */ .form{max-width:680px} .form-grid{display:grid;gap:20px} .field{display:grid;gap:8px} .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:560px){.field.row2{grid-template-columns:1fr}} .field label{font-size:1rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px} .field .req{font-size:.75rem;background:var(--persimmon);color:var(--ink);padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.04em} .field .opt{font-size:.75rem;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:1px 8px;border-radius:10px;font-weight:700;letter-spacing:.04em} .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea{ width:100%;min-height:44px;border:1px solid var(--ink);border-radius:10px;padding:13px 16px; font:inherit;font-size:1rem;color:var(--brown);background:var(--paper); transition:border-color .2s,box-shadow .2s; } .field textarea{resize:vertical;min-height:130px;line-height:1.8} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sky)} .field .hint{font-size:1rem;color:var(--dim)} .field-check{display:flex;align-items:flex-start;gap:10px;font-size:1rem;color:var(--dim)} .field-check input{margin-top:4px;width:18px;height:18px;flex-shrink:0} /* ハニーポット（人には見えず、botの自動入力だけ拾うための隠しフィールド） */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0} .form-submit{margin-top:6px} .form-note{font-size:1rem;color:var(--dim);margin-top:18px;line-height:1.9} .form-msg{display:none;border-radius:12px;padding:18px 20px;font-size:1rem;line-height:1.8;margin-bottom:24px} .form-msg.is-show{display:block} .form-msg.ok{background:var(--leaf-soft);color:var(--ink);border:1px solid var(--ink)} .form-msg.err{background:rgba(180,84,74,.08);color:var(--danger);border:1px solid var(--danger)} /* ============================================ 共通フッター ============================================ */ .ft{margin-top:90px;border-top:1px solid var(--ink-line);padding:56px 28px 30px;background:var(--persimmon-soft)} @media(max-width:640px){.ft{margin-top:64px;padding:40px 20px 24px}} .ft-in{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px} .ft-brand address{font-style:normal;font-size:.875rem;color:var(--dim);line-height:2.1;margin-top:16px} .ft-cols{display:flex;gap:52px;flex-wrap:wrap} .ft-col h4{font-size:.8rem;letter-spacing:.08em;color:var(--dim);margin-bottom:14px} .ft-col ul{display:flex;flex-direction:column;gap:2px;font-size:.9rem} /* フッターリンク: 見た目の行間(旧gap:10px)は::beforeの44pxヒットエリアで 吸収する（visible spacingはpadding分だけ広がるがテキストサイズ・色は不変）。 */ .ft-col ul a{position:relative;display:flex;align-items:center;min-height:44px;color:var(--brown);transition:color .2s} .ft-col ul a:hover{color:var(--ink);text-decoration:underline} .ft .cp{max-width:1120px;margin:36px auto 0;font-size:.8rem;color:#8f8378;letter-spacing:.04em;border-top:1px solid var(--ink-line);padding-top:16px} .ft .footer-disclaimer{max-width:1120px;margin:8px auto 0;font-size:.72rem;color:#8f8378;letter-spacing:.02em;line-height:1.6} @media(max-width:760px){ .ft-in{gap:32px} .ft-cols{gap:32px;width:100%} } /* ============================================ スクロールリビール ============================================ */ .rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .rv.on{opacity:1;transform:translateY(0)} .rv-d1{transition-delay:.1s} .rv-d2{transition-delay:.2s} .rv-d3{transition-delay:.3s} .rv-d4{transition-delay:.4s} /* 画像・イラスト専用の「ぽわん」リビール(バウンス付きスケールイン)。 cubic-bezier(0.34,1.2,0.64,1) は0〜1の間でy値が1をごく僅かに超える 「オーバーシュート」カーブのため、scale(.6)→scale(1)の単純な 2点間トランジションだけで scale(.6)→約1.03→1 の控えめなバウンスが 再現できる(2026-08-03、UI/UX改善でy2を1.56→1.2に弱め、約1.05超えの 跳ねを1.03程度まで抑えた)。 IntersectionObserverは.rvと共通(js/main.jsで .rv, .rv-pop をまとめて監視)。 */ .rv-pop{opacity:0;transform:scale(.6);transition:opacity .7s cubic-bezier(0.34,1.2,0.64,1),transform .7s cubic-bezier(0.34,1.2,0.64,1)} .rv-pop.on{opacity:1;transform:scale(1)} .rv-pop-d1{transition-delay:.05s} .rv-pop-d2{transition-delay:.1s} .rv-pop-d3{transition-delay:.15s} .rv-pop-d4{transition-delay:.2s} .rv-pop-d5{transition-delay:.25s} .no-js .rv-pop{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .rv-pop{transition:opacity .5s ease!important;transform:none!important} } /* ============================================ ゆらゆらドードル（小さな一枚絵の揺れ演出） .doodle クラスを付けた要素が左右にゆっくり揺れ続ける。 配置(position/top/left等の座標)は使用する各ページのローカルCSSで指定し、 このブロックでは揺れそのものだけを定義する。要素ごとに animation-duration/delayをインラインstyleで変え、同期を避ける。 テキストの可読性を妨げないよう装飾要素として扱う(aria-hidden)。 ============================================ */ .doodle{position:absolute;pointer-events:none;z-index:1;animation-name:doodleWiggle;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} @keyframes doodleWiggle{ from{transform:translateX(-8px) rotate(-4deg)} to{transform:translateX(8px) rotate(4deg)} } @media(max-width:640px){.doodle{display:none}} @media (prefers-reduced-motion: reduce){ .doodle{animation:none!important} } /* ============================================ no-js フォールバック（JS無効環境・検索クローラー対策） は内のインラインscriptがJS実行時に 即座に外すため、JS有効時はこのブロックは効かない。 ============================================ */ .no-js .rv{opacity:1;transform:none} .no-js .loader{display:none} .no-js .faq-a{max-height:none} /* ============================================ ローダー ============================================ */ .loader{ position:fixed;inset:0;z-index:200;background:var(--cream); display:flex;align-items:center;justify-content:center; transition:opacity .5s ease,visibility .5s ease; } .loader .mark{ position:relative;width:auto;height:auto;background:none;border:none;border-radius:0; color:var(--ink); font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:2.6rem;line-height:1; display:block;padding:4px 24px 10px 2px; opacity:0;transform:scale(.82); animation:loaderIn .8s var(--ease) forwards; } .loader .mark::after{ content:"";position:absolute;top:4px;right:4px; width:7px;height:7px;border-radius:50%;background:var(--leaf); box-shadow:12px -4px 0 0 var(--sky),-10px 11px 0 0 var(--persimmon); } @keyframes loaderIn{ 0%{opacity:0;transform:scale(.82)} 55%{opacity:1;transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} } .loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none} .loader.is-skip{display:none} /* ============================================ カスタムカーソル（ファインポインタ環境のみ・js/main.jsで生成） 小さな墨色ドット+追従リング。リンク/ボタンhoverでリングが拡大し、 [data-hover-view]要素では「view」ラベルがコーラル地に浮かぶ。 2026-08-03、リング内側にごく淡い暖色グロー(.cursor-ring__glow)を追加し 「小さな陽だまり」に見せた。2026-08-04、「季節のしつらえ」への差し替え に伴い、時間帯でグローの明るさを変える連動(旧html.tod-night)は廃止し、 常時同じ淡い暖色で固定している。 「みる」「NEXT」等ホバー時の挙動・判定ロジックは一切変更していない。 ============================================ */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;opacity:0} body.is-fine-pointer .cursor-dot, body.is-fine-pointer .cursor-ring{opacity:1} .cursor-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--ink)} .cursor-ring{ width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(63,50,48,.45); display:flex;align-items:center;justify-content:center; transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,border-color .35s; } .cursor-ring__glow{ position:absolute;inset:5px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,214,150,.5) 0%,transparent 72%); opacity:.55;transition:opacity .5s,background-color .5s; } .cursor-ring__label{position:relative;font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.04em;color:var(--ink);opacity:0;transition:opacity .25s} .cursor-ring.is-hover{width:50px;height:50px;margin:-25px 0 0 -25px;background:rgba(63,50,48,.06);border-color:rgba(63,50,48,.3)} .cursor-ring.is-view{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--persimmon);border-color:transparent} .cursor-ring.is-view .cursor-ring__label{opacity:1} /* 「まどろみの人たち」カルーセル上専用(2026-07-29追加。旧NEXTボタンの代替)。 焦げ茶墨地の大きめリングに「NEXT」ラベル(白文字)。js/main.js側で カルーセル領域のmouseover時にa[href]上かどうかを判定してこのクラスを 付け外しする（リンク上は通常のis-view/is-hoverに戻す）。 */ .cursor-ring.is-next{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--ink);border-color:transparent} .cursor-ring.is-next .cursor-ring__label{opacity:1;color:#fff} /* ============================================ ページ遷移演出（市松タイル。js/main.jsで開閉。全ページ共通静的マークアップ） 3×3の市松(いちまつ)柄タイル（茜の淡色⇄生成りの2色交互）が左上→右下の 対角線順にscale(0)→scale(1)で覆ってから遷移する。遷移先ページでは、 の早期スクリプトがsessionStorageのフラグを見てに.pc-init を付与（初回ペイント前に反映されるためチラつきなし＝最初から覆われた 状態で描画）し、js/main.js側が1フレーム後に.pc-initを外すことで、同じ 対角線順のtransition-delayでscale(1)→scale(0)へ開く（開閉とも同一の .pc-tile transitionを使うため方向が違うだけで対角線順は共通）。 JS無効環境では常時非表示（.no-js側）にし、ページが隠れたままに ならないようにする。reduced-motion環境はタイル演出自体を出さない （下部の共通ブロックで.page-curtain{display:none}）。 ============================================ */ .page-curtain{ position:fixed;inset:0;z-index:250;pointer-events:none; display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); } .page-curtain .pc-tile{ transform:scale(0);opacity:0;background:var(--persimmon-soft); transition:transform .28s var(--ease),opacity .28s var(--ease); } .page-curtain .pc-tile:nth-child(2n){background:var(--cream)} .page-curtain .pc-tile:nth-child(2), .page-curtain .pc-tile:nth-child(4){transition-delay:.05s} .page-curtain .pc-tile:nth-child(3), .page-curtain .pc-tile:nth-child(5), .page-curtain .pc-tile:nth-child(7){transition-delay:.1s} .page-curtain .pc-tile:nth-child(6), .page-curtain .pc-tile:nth-child(8){transition-delay:.15s} .page-curtain .pc-tile:nth-child(9){transition-delay:.2s} .page-curtain.is-covering .pc-tile{transform:scale(1);opacity:1} /* 遷移先の初期状態（早期スクリプトが付与）。ペイント前に確定する 初期スタイルのためtransitionは発火しない（挿入前の旧値が存在しない）。 transition:noneは保険。 */ html.pc-init .page-curtain .pc-tile{transform:scale(1);opacity:1;transition:none} .no-js .page-curtain{display:none!important} /* ============================================ 季節のしつらえ（カラーグレーディング。全ページ共通） 2026-08-04、施主判断により「時刻連動グロー」を取り下げ、代替の 看板演出として新設。実装インフラ（のクラス切替だけで地の色を 2秒かけてゆっくり移す仕組み・5秒操作なしでの自動復帰ロジック）は 最大限流用し、判定軸を「時刻」から「日付（月）」に置き換えた。 js/main.jsが実日付（またはindex.htmlの季節プレビューUI操作中は仮の 季節）の月から季節を判定し、にseason-spring/summer/autumn/ winterのいずれかひとつを付け外しする。本文の文字色(var(--brown)) 自体は変更しないため、どの季節でもコントラスト比は据え置き（WCAG AA 可読性を最優先。4季節×本文2色いずれも5.5:1以上を確認済み）。 季節モチーフSVG(.season-motif／index.html固有の.season-hero-motif)・ 季節プレビューUI(.season-preview。index.html固有)は下記.smブロックと index.htmlのページ内