/* ============================================ ひだまりの家（デモ） - style.css 全ページ共通スタイル。 「がんばりすぎる前に、頼れる場所を。」 配色刷新: ベージュ×コーラル×ミント×パウダーブルーの、 太くて親しみやすいトーン(参考: 湖山医療福祉グループ仙台採用サイトの 配色・動きを仕様として言語化し自前実装。コード/画像は直接コピーしていない)。 カード類は墨色の輪郭+ハードオフセット影、見出しはEN極太+日本語ピルバッジ、 区切り線は破線を積極活用。動きは .rv（スクロールリビール）＋ ヒーローのアーチ写真マーキー（CSSのみ）を基本とし、過度な演出は避ける。 ============================================ */ :root{ /* 2026-07-28、参考サイトと配色が丸かぶりだったため全面差し替え。 変数名は維持し値だけ差し替えることで、変数経由の参照箇所は すべて自動追従する（ハードコードされた旧hexはSVG側のみ残っていたため images/*.svgも合わせて置換済み）。 */ --cream:#f9eeed; /* 背景・淡いピンクホワイト地（維持） */ --paper:#ffffff; /* カード・ヘッダー等の純白 */ --brown:#3f3230; /* 本文・見出し・ボタン地（焦げ茶墨。旧#171717から変更） */ --ink:#3f3230; /* --brownの別名（輪郭・影・badge用） */ --persimmon:#d96c7f; /* アクセント・ローズ（ボタン/強調の地色。文字は基本 var(--ink)。旧#f89286から変更） */ --persimmon-soft:#f6dade; /* ローズの淡色背景（旧#fdeae7から変更） */ --leaf:#8fa97a; /* サブアクセント・セージグリーン（バッジ/アイコン地限定。旧#7dcdc3から変更） */ --leaf-soft:#ecf1e4; /* セージの淡色背景（旧#e6f5f3から変更） */ --sky:#cfc4e6; /* 藤色（帯セクション背景。旧#c4e9fb から変更） */ --sky-deep:#b3a3d8; /* 藤色濃色（ラベルタグ枠。文字は基本var(--ink)。旧#8bd2f2から変更） */ --yellow-soft:#f7dcae; /* 杏色（PEOPLEカルーセルのカード背景ローテーション用。旧#f5d76eから変更） */ --line:#e9d8d6; /* 罫線（ピンク寄りグレージュ。旧#e8d8d5から変更） */ --dim:#8a7a76; /* 補足テキスト（旧#6f6862から変更） */ --danger:#b4544a; /* 注意表記のみ（多用しない・変更なし） */ --ease:cubic-bezier(0.16,1,0.3,1); } /* ---------- リセット ---------- */ *{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; } /* 慣性スムーススクロール有効時、#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} .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;gap:6px; border:1.5px solid var(--ink);border-radius:20px; padding:7px 14px;font-size:.72rem;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(237,227,218,.94);backdrop-filter:blur(8px); border-bottom:2px dashed var(--ink); } /* フルスクリーンメニュー展開中は.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} .logo .mark{width:36px;height:36px;border-radius:50%;background:var(--persimmon);border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:1rem;flex-shrink:0} .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:.56rem;color:var(--dim);letter-spacing:.14em} .hd nav{display:flex;gap:14px;font-size:.68rem;font-weight:700;flex-wrap:wrap;max-width:600px} .hd nav a{padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap} .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:.68rem} @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:40px;height:40px;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}} /* フルスクリーンメニュー ハンバーガーボタン位置を中心に円形展開(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 dashed var(--ink);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:.6rem;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:2px solid var(--ink); } .sp-bar .sp-tab{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:9px 4px calc(9px + env(safe-area-inset-bottom,0px)); font-size:.6rem;font-weight:700;letter-spacing:.01em;color:var(--dim); border-right:1px dashed 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; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:var(--ink);color:#fff;font-size:.6rem;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} } /* ============================================ ボタン ============================================ */ .btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.82rem;letter-spacing:.04em;padding:15px 30px;border-radius:26px;border:2px solid var(--ink);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)} .btn.fill{background:var(--persimmon);color:var(--ink);box-shadow:4px 4px 0 var(--ink)} .btn.fill:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .btn.line{border:2px solid var(--ink);color:var(--ink);background:var(--paper)} .btn.line:hover{background:var(--ink);color:#fff} .btn.leaf{background:var(--leaf);color:var(--ink);box-shadow:4px 4px 0 var(--ink)} .btn.leaf:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} /* 「詳細を見る→」等に添える墨色の正円＋白矢印アイコンボタン共通クラス。 ホバーでコーラルに反転（アイコン色は墨に切り替え、コントラストを保つ）。 */ .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 HIDAMARI等)自体は変更せず、 視覚的な主従関係だけをCSSで入れ替えている。DOM順は変えない。 ============================================ */ .sec{max-width:1120px;margin:0 auto;padding:88px 24px 0;position:relative} .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(22px,3vw,32px);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; } .sec-lead{max-width:580px;color:var(--dim);margin-bottom:36px} /* カード（サービス紹介等）: 墨色の輪郭＋ハードオフセット影。 ホバーで影が縮み、カードごと2pxだけ沈み込む「押せる」演出。 */ .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(--paper);border:2px solid var(--ink);border-radius:18px;padding:28px 26px; box-shadow:4px 4px 0 var(--ink); transition:transform .2s var(--ease),box-shadow .2s var(--ease); display:block;position:relative; } .mcard:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .mcard .en{font-size:.6rem;color:var(--ink);font-weight:700;letter-spacing:.1em;opacity:.62} .mcard h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.08rem;font-weight:800;letter-spacing:.02em;margin:10px 0 10px} .mcard p{font-size:.86rem;color:var(--dim)} .mcard .fee{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.72rem;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:.72rem;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} .band .sec{padding:0 24px} .band + .sec,.sec + .band{margin-top:0} /* 選ばれる理由（3分割カード。帯の中に個別カードとして配置） */ .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(--paper);border:2px solid var(--ink);border-radius:18px;padding:26px 22px; box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .assure li:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .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:.8rem;color:var(--dim);line-height:1.8;display:block} /* 料金早見表（内側罫線は現状の実線を維持） */ table.fee{width:100%;border-collapse:collapse;background:var(--paper);border:2px solid var(--ink);border-radius:16px;overflow:hidden;font-size:.82rem} .fee thead th{background:var(--ink);color:#fff;font-weight:700;letter-spacing:.04em;font-size:.74rem;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:1rem} .fee-note{font-size:.76rem;color:var(--dim);margin-top:14px;line-height:1.9} .fee-note.warn{color:var(--danger)} /* ============================================ 下層ページ用: パンくず / ページヘッダー ============================================ */ .crumbs{max-width:1120px;margin:0 auto;padding:18px 24px 0;font-size:.72rem;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(26px,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:18px;border:2px solid var(--ink)} .policy-points{display:grid;gap:0;border-top:1px dashed var(--ink)} .pp{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px dashed var(--line)} .pp .no{font-family:"Manrope";font-weight:800;font-size:.76rem;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:.94rem;font-weight:800;letter-spacing:.02em;margin-bottom:4px} .pp p{font-size:.84rem;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:18px;border:2px solid var(--ink)} .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:.78rem;color:var(--dim);line-height:1.9} .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:.72rem;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(--paper);border:2px solid var(--ink);border-radius:18px;overflow:hidden; box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .staff-card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .staff-card .ph{aspect-ratio:1/1;border-radius:0;border:none;border-bottom:2px solid var(--ink)} .staff-card .body{padding:18px 20px} .staff-card .role{display:inline-block;font-size:.62rem;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:.98rem;font-weight:800;margin:8px 0 8px} .staff-card p{font-size:.78rem;color:var(--dim);line-height:1.8} .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(--paper);border:2px solid var(--ink);border-radius:18px;padding:24px 20px;position:relative; box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .fstep:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .fstep::before{counter-increment:step;content:"0" counter(step);font-family:"Manrope";font-weight:800;font-size:.76rem;color:var(--ink);letter-spacing:.1em;opacity:.55} .fstep h3{font-family:"Zen Maru Gothic",sans-serif;font-size:.9rem;font-weight:800;letter-spacing:.02em;margin:8px 0 6px} .fstep p{font-size:.8rem;color:var(--dim)} .fstep .time{margin-top:10px;font-size:.68rem;color:var(--dim)} .fstep .time b{color:var(--ink)} /* 1日の流れ（タイムライン） */ .timeline{display:grid;gap:0;border-top:1px dashed var(--ink)} .tl-item{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:20px 0;border-bottom:1px dashed 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:.9rem;font-weight:800;margin-bottom:4px} .tl-item p{font-size:.8rem;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:18px;margin-bottom:16px;border:2px solid var(--ink)} .access p{font-size:.86rem;color:var(--dim)} .access p b{color:var(--brown)} /* CTA: コーラル地には墨色文字を基本とする（白文字は使わない） */ .cta{max-width:1120px;margin:96px auto 0;padding:0 24px;position:relative} .cta .box{background:var(--persimmon);color:var(--ink);border:2px solid var(--ink);border-radius:22px;padding:56px 28px;text-align:center;position:relative;overflow:hidden;box-shadow:6px 6px 0 var(--ink)} .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 p{font-size:.86rem;color:rgba(23,23,23,.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 dashed var(--ink);border-bottom:1px dashed var(--ink);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:.7rem;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:.82rem;color:var(--dim);padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ticker-list a:hover{color:var(--ink)} .ticker-list time{font-family:"Manrope";font-size:.68rem;color:var(--dim);flex-shrink:0} .ticker-list .cat{flex-shrink:0;font-size:.64rem;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 dashed var(--ink)} .faq-item{border-bottom:1px dashed var(--line)} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;cursor:pointer;font-size:.92rem;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:.84rem;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:.82rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px} .field .req{font-size:.62rem;background:var(--persimmon);color:var(--ink);padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.04em} .field .opt{font-size:.62rem;background:var(--paper);color:var(--ink);border:1.5px 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%;border:1.5px solid var(--ink);border-radius:10px;padding:13px 16px; font:inherit;font-size:.9rem;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:.7rem;color:var(--dim)} .field-check{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;color:var(--dim)} .field-check input{margin-top:4px} /* ハニーポット（人には見えず、botの自動入力だけ拾うための隠しフィールド） */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0} .form-submit{margin-top:6px} .form-note{font-size:.74rem;color:var(--dim);margin-top:18px;line-height:1.9} .form-msg{display:none;border-radius:12px;padding:18px 20px;font-size:.86rem;line-height:1.8;margin-bottom:24px} .form-msg.is-show{display:block} .form-msg.ok{background:var(--leaf-soft);color:var(--ink);border:1.5px solid var(--ink)} .form-msg.err{background:rgba(180,84,74,.08);color:var(--danger);border:1.5px solid var(--danger)} /* ============================================ 共通フッター ============================================ */ .ft{margin-top:90px;border-top:2px dashed var(--ink);padding:56px 28px 30px;background:var(--persimmon-soft)} .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:.78rem;color:var(--dim);line-height:2.1;margin-top:16px} .ft-cols{display:flex;gap:52px;flex-wrap:wrap} .ft-col h4{font-size:.68rem;letter-spacing:.08em;color:var(--dim);margin-bottom:14px} .ft-col ul{display:flex;flex-direction:column;gap:10px;font-size:.8rem} .ft-col ul a{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:.64rem;color:#8f8378;letter-spacing:.04em;border-top:1px dashed var(--ink);padding-top:16px} @media(max-width:760px){ .ft-in{gap:32px} .ft-cols{gap:32px;width:100%} } /* ============================================ スクロールリビール ============================================ */ .rv{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s 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.56,0.64,1) は0〜1の間でy値が1を一瞬超える 「オーバーシュート」カーブのため、scale(.6)→scale(1)の単純な 2点間トランジションだけで scale(.6)→1.05→1 のバウンスが再現できる。 IntersectionObserverは.rvと共通(js/main.jsで .rv, .rv-pop をまとめて監視)。 */ .rv-pop{opacity:0;transform:scale(.6);transition:opacity .7s cubic-bezier(0.34,1.56,0.64,1),transform .7s cubic-bezier(0.34,1.56,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{ width:56px;height:56px;border-radius:50%;background:var(--persimmon);color:var(--ink);border:2px solid var(--ink); font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:1.4rem;display:grid;place-items:center; opacity:0;transform:scale(.82); animation:loaderIn .8s var(--ease) forwards; } @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」ラベルがコーラル地に浮かぶ。 ============================================ */ .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(23,23,23,.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__label{font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:.7rem;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(23,23,23,.06);border-color:rgba(23,23,23,.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で開閉。全ページ共通静的マークアップ） 内部リンククリック時に墨→コーラルの2枚パネルが覆ってから遷移し、 遷移先では覆った状態から開くリビールを見せる。JS無効環境では 常時非表示（.no-js側）にし、ページが隠れたままにならないようにする。 ============================================ */ .page-curtain{position:fixed;inset:0;z-index:250;pointer-events:none;display:flex} .page-curtain .pc-panel{position:absolute;top:0;bottom:0;width:56%;transition:transform .6s var(--ease)} .page-curtain .pc-1{left:0;background:var(--ink);transform:translateX(-100%)} .page-curtain .pc-2{right:0;background:var(--persimmon);transform:translateX(100%);transition-delay:.06s} .page-curtain.is-covering .pc-1, .page-curtain.is-covering .pc-2{transform:translateX(0)} .no-js .page-curtain{display:none!important} /* ============================================ 背景巨大アウトライン文字（スクロール連動で水平にゆっくり流す） 各セクションの中央奥に薄く敷き、js/main.jsのrAFループが data-hspeed の値に応じてtranslateXを更新する。可読性を保つため 不透明度は極薄(輪郭線のみ・3〜5%相当)。 ============================================ */ .bg-word{ position:absolute;top:50%;left:50%;z-index:-1; transform:translate(-50%,-50%);pointer-events:none; font-family:"Zen Maru Gothic",sans-serif;font-weight:900; font-size:clamp(6rem,17vw,15rem);line-height:1;letter-spacing:.04em;white-space:nowrap; color:transparent;-webkit-text-stroke:1.5px rgba(23,23,23,.045); } @media(max-width:760px){.bg-word{display:none}} /* ============================================ 施設のようすフォトバンド（Ken Burns風クロスフェード。CSSのみ） 既存WebP3枚(about-lounge/about-artwork/arch-02)を使い回し、 18秒周期でゆっくり拡大しながら順番にクロスフェードする。 ============================================ */ .photo-band{max-width:1120px;margin:0 auto;padding:88px 24px 0} .photo-band-stage{ position:relative;aspect-ratio:21/9;border-radius:22px;overflow:hidden; border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink); } .pb-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1); animation:pbFade 18s ease-in-out infinite, pbZoom 18s ease-out infinite; } .pb-img-1{animation-delay:0s,0s} .pb-img-2{animation-delay:6s,6s} .pb-img-3{animation-delay:12s,12s} @keyframes pbFade{ 0%{opacity:0} 4%{opacity:1} 30%{opacity:1} 36%{opacity:0} 100%{opacity:0} } @keyframes pbZoom{ 0%{transform:scale(1)} 100%{transform:scale(1.12)} } @media(max-width:640px){.photo-band-stage{aspect-ratio:4/3}} @media (prefers-reduced-motion: reduce){ .pb-img{animation:none!important;transform:none!important;opacity:0} .pb-img-1{opacity:1} } /* ============================================ 縦書きラベル（PEOPLEのテープラベルとは別の、セクション脇の和文アクセント） ============================================ */ .vert-label{ position:absolute;top:50%;transform:translateY(-50%);z-index:1; writing-mode:vertical-rl;text-orientation:upright; font-family:"Zen Maru Gothic",sans-serif;font-weight:800; font-size:.82rem;letter-spacing:.34em;color:var(--ink);opacity:.32; pointer-events:none; } .vert-label.right{right:-4px} .vert-label.left{left:-4px} @media(max-width:900px){.vert-label{display:none}} /* ============================================ 無限テキストマーキー帯（セクション区切り用） ============================================ */ .text-marquee{border-top:1px dashed var(--ink);border-bottom:1px dashed var(--ink);overflow:hidden;background:var(--ink)} .text-marquee-track{display:flex;width:max-content;gap:52px;padding:15px 0;animation:textMarquee 30s linear infinite} .text-marquee-track span{ display:inline-flex;align-items:center;gap:52px; font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:.92rem;letter-spacing:.06em; color:var(--cream);white-space:nowrap; } .text-marquee-track span::before{content:"—";color:var(--persimmon)} @keyframes textMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================ モーション低減設定 ============================================ */ @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto!important} .rv{opacity:1!important;transform:none!important} .loader{display:none!important} .page-curtain{display:none!important} .cursor-dot,.cursor-ring{display:none!important} body.is-hijack .smooth{position:static!important;transform:none!important} } /* デモ用トースト(tel:リンク押下時の案内) */ .demo-toast{ position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px); z-index:200;max-width:calc(100vw - 32px); background:var(--brown);color:var(--cream); font-size:.8rem;letter-spacing:.02em;line-height:1.7; padding:12px 20px;border-radius:12px;box-shadow:0 10px 28px rgba(23,23,23,.25); opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease); } .demo-toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================================ スタッフインタビュー・トレカ(recruit.html「先輩の声」/ interview.html共通) 2026-07-28追加。白地+人物ごとの色(--tcard-accent)の2px輪郭+角丸24pxの トレーディングカード風。recruit.htmlでは.tcardをrotateY(180deg)フリップの トリガーとして使い(ホバー/タッチ1回目タップで裏面、クリック/2回目タップで 詳細ページへ)、interview.htmlでは.tcard-staticとして表面のみ静的表示する。 ゆらゆら浮遊(translateY-1.5%+rotate±2deg)は.tcard/.tcard-static共通。 ============================================ */ .tcard,.tcard-static{ --tcard-accent: var(--persimmon); animation-name:tcardFloat;animation-timing-function:ease-in-out; animation-iteration-count:infinite;animation-direction:alternate; } @keyframes tcardFloat{ from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-6px) rotate(2deg)} } .no-js .tcard,.no-js .tcard-static{animation:none} @media (prefers-reduced-motion: reduce){ .tcard,.tcard-static{animation:none!important} } /* リンク化されたカード自体(recruit.html一覧) */ .tcard{ display:block;position:relative;height:420px;perspective:1400px; text-decoration:none;color:inherit; } .tcard-inner{ position:relative;width:100%;height:100%; transition:transform .6s var(--ease);transform-style:preserve-3d; } @media(hover:hover) and (pointer:fine){ .tcard:hover .tcard-inner{transform:rotateY(180deg)} } .tcard.is-flipped .tcard-inner{transform:rotateY(180deg)} .tcard-face{ position:absolute;inset:0;backface-visibility:hidden; border-radius:24px;border:2px solid var(--tcard-accent);background:var(--paper); padding:26px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center; box-shadow:4px 4px 0 var(--tcard-accent); } .tcard-back{ transform:rotateY(180deg);justify-content:center;gap:14px; } .tcard-back .tcard-mark{ width:52px;height:52px;border-radius:50%;background:var(--tcard-accent);border:2px solid var(--ink); display:grid;place-items:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:800;color:var(--ink);font-size:1.2rem; } .tcard-back p{font-size:.8rem;color:var(--dim);line-height:1.8} /* 表面/静的表示(interview.html)共通の中身レイアウト */ .tcard-static{ display:flex;flex-direction:column;align-items:center;text-align:center; border-radius:24px;border:2px solid var(--tcard-accent);background:var(--paper); padding:30px 24px 26px;box-shadow:5px 5px 0 var(--tcard-accent); } .tcard-en{font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.04em;color:var(--dim)} .tcard-motto{ font-family:"Zen Maru Gothic",sans-serif;font-weight:800;font-size:1rem;line-height:1.7; margin:10px 0 18px;text-decoration:underline;text-decoration-color:var(--tcard-accent); text-underline-offset:5px;text-decoration-thickness:2px; } /* 有機的ブロブ形マスク(border-radiusの非対称値で表現。写真自体は差し替え不要) */ .tcard-photo{ width:132px;height:132px;overflow:hidden;flex-shrink:0; border:2px solid var(--ink);background:var(--cream); border-radius:63% 37% 54% 46% / 43% 51% 49% 57%; } .tcard-photo img{width:100%;height:100%;object-fit:cover} .tcard-meta{margin-top:16px} .tcard-meta .tcard-role{display:inline-block;font-size:.62rem;color:#fff;background:var(--ink);font-weight:700;letter-spacing:.04em;padding:3px 12px;border-radius:999px} .tcard-meta h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1rem;font-weight:800;margin:8px 0 4px} .tcard-meta .tcard-joined{font-size:.72rem;color:var(--dim)} /* あなたの物語も、ここから(応募誘導カード。recruit.html一覧の末尾) */ .tcard-cta{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px; height:420px;border-radius:24px;border:2px dashed var(--ink);background:var(--persimmon-soft); padding:26px 22px;text-decoration:none;color:inherit; transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .tcard-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .tcard-cta .plus-mark{ width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff; display:grid;place-items:center;font-family:"Manrope";font-size:1.6rem;font-weight:800; } .tcard-cta h3{font-family:"Zen Maru Gothic",sans-serif;font-size:1.05rem;font-weight:800;line-height:1.6} .tcard-cta p{font-size:.8rem;color:var(--dim)} /* 手書き風の一言カード(interview.html締め。Google Fonts Yomogiを使用) */ .handwrite-card{ background:var(--leaf-soft);border:2px solid var(--ink);border-radius:20px; padding:36px 32px;text-align:center;max-width:560px;margin:0 auto; } .handwrite-card .hw-text{ font-family:"Yomogi",cursive;font-size:1.7rem;line-height:1.7;color:var(--ink); } .handwrite-card .hw-sign{margin-top:16px;font-family:"Yomogi",cursive;font-size:1.1rem;color:var(--dim)} /* ============================================ 汎用タグピル・カテゴリタブ(2026-07-29追加) voices.html / reports.html のカテゴリ絞り込みタブに使用。 見た目はfaq.htmlの.faq-tab（ページ内スタイル）と揃えているが、 voices.html・reports.htmlの2ページで共有するためcss/style.css側に置く。 ============================================ */ .tagpill{display:inline-block;font-size:.64rem;padding:3px 12px;border-radius:999px;color:var(--ink);font-weight:700;letter-spacing:.02em;white-space:nowrap} /* 「もっと見る」リンク。矢印は共通クラス.circle-arrowで統一。 2026-07-27にindex.htmlのページ内スタイルとして追加されたものを、 2026-07-29にabout.html/price.html/service.html/voices.html/reports.html でも使うため共通クラスとしてこちらに移動した。 */ .more{margin-top:32px} .more a{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--ink);transition:gap .2s} .more a:hover{gap:14px} .more a:hover .circle-arrow{background:var(--persimmon);color:var(--ink)} .cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px} .cat-tab{font-size:.76rem;letter-spacing:.02em;padding:9px 20px;border:1.5px solid var(--ink);border-radius:20px;color:var(--ink);background:var(--paper);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)} .cat-tab:hover{background:var(--sky)} .cat-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .cat-tab .cnt{margin-left:4px;font-family:"Manrope";font-size:.64rem;opacity:.8} /* ============================================ ご利用者様・ご家族の声(voices.html本体・index/price/service ダイジェスト共通) 個人情報配慮のため、写真は実在人物ではなく施設内外の風景を使用する （js/voices-data.js冒頭コメント参照）。 ============================================ */ .voice-list{display:grid;gap:0;border-top:1px dashed var(--ink)} .voice-item[hidden]{display:none!important} .voice-item{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:48px 0;border-bottom:1px dashed var(--line);align-items:start} .voice-item--rev{grid-template-columns:1fr 260px} .voice-item--rev .voice-photo{order:2} @media(max-width:760px){ .voice-item,.voice-item--rev{grid-template-columns:1fr;padding:36px 0} .voice-item--rev .voice-photo{order:0} } .voice-photo .ph{aspect-ratio:4/3;border-radius:18px;border:2px solid var(--ink)} .voice-body .tagpill{margin-bottom:14px} .voice-body .relation{font-size:.8rem;color:var(--dim);margin-bottom:2px} .voice-body .name-note{font-family:"Zen Maru Gothic",sans-serif;font-size:1rem;font-weight:800;margin-bottom:20px} .voice-qa{display:grid;gap:18px} .voice-qa .q{font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:6px} .voice-qa .q .qmark{color:var(--persimmon)} .voice-qa .a{font-size:.86rem;color:var(--brown)} .voice-qa .a .qmark{color:var(--dim)} .voice-empty{padding:40px 4px;text-align:center;color:var(--dim);font-size:.86rem;display:none} .voice-empty.is-visible{display:block} /* ダイジェスト用コンパクトカード(index.html・price.html・service.html) */ .voice-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.voice-mini-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.voice-mini-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}} .voice-mini{display:block;background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:22px 22px 20px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:inherit} .voice-mini:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .voice-mini .tagpill{margin-bottom:12px} .voice-mini .relation{font-size:.74rem;color:var(--dim);margin-bottom:2px} .voice-mini .name-note{font-family:"Zen Maru Gothic",sans-serif;font-size:.88rem;font-weight:800;margin-bottom:14px} .voice-mini .q{font-size:.78rem;font-weight:700;margin-bottom:6px} .voice-mini .a{font-size:.78rem;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* ============================================ 活動レポート(reports.html本体・about.html ダイジェスト・report-*.html詳細 共通) ============================================ */ .report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.report-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.report-grid{grid-template-columns:1fr}} .report-card[hidden]{display:none!important} .report-card{display:block;background:var(--paper);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:inherit} .report-card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .report-card .ph{aspect-ratio:4/3} .report-card .body{padding:18px 20px 20px} .report-card time{display:block;font-family:"Manrope";font-size:.68rem;color:var(--dim);margin-bottom:8px} .report-card .tagpill{margin-bottom:10px} .report-card h3{font-family:"Zen Maru Gothic",sans-serif;font-size:.94rem;font-weight:800;line-height:1.6;margin-bottom:8px} .report-card p{font-size:.78rem;color:var(--dim);line-height:1.8} .report-empty{padding:40px 4px;text-align:center;color:var(--dim);font-size:.86rem;display:none} .report-empty.is-visible{display:block} /* 活動レポート詳細(report-*.html。tools/build-report-pages.jsが生成) */ .report-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .report-meta time{font-family:"Manrope";font-size:.78rem;color:var(--dim)} .report-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .report-photos figure .ph{aspect-ratio:4/3;border-radius:18px;border:2px solid var(--ink)} .report-photos figcaption{margin-top:10px;font-size:.78rem;color:var(--dim);text-align:center} .report-body{max-width:720px} .report-body p{font-size:.92rem;color:var(--brown);margin-bottom:20px} .report-body p:last-child{margin-bottom:0} .rp-nav{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.rp-nav{grid-template-columns:1fr}} .rp-nav a{display:block;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:18px 20px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);color:inherit} .rp-nav a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .rp-nav a .en{display:block;font-size:.62rem;color:var(--ink);margin-bottom:6px;opacity:.62} .rp-nav a.next{text-align:right} .rp-nav a b{font-size:.9rem;letter-spacing:.02em}