が付きます。このファイル1本で両方に使えるよう、要素そのものを狙う指定はすべて .fh-root の中だけに効くようにしてあります。 -------------------------------------------------------------- */ .fh-root,.fh-root *,.fh-root *::before,.fh-root *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .fh-root *{ animation:none !important; transition:none !important; } } .fh-root{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .fh-root img{ max-width:100%; display:block; height:auto; } .fh-root a{ color:var(--brand); text-decoration:none; } .fh-root a:hover{ text-decoration:underline; } .fh-root :focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; } /* テーマ側の見出し・リスト指定を打ち消す（WordPress用。ローカルでは無害） */ .fh-root h1,.fh-root h2,.fh-root h3,.fh-root h4,.fh-root h5,.fh-root h6{ margin:0; clear:none; color:inherit; font-weight:700; } .fh-root ul,.fh-root ol{ margin:0; padding-left:0; } .fh-root figure{ margin:0; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; } .narrow{ max-width:760px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .fh-root .skip{ position:absolute; left:-9999px; top:0; z-index:2000; background:var(--brand); color:#fff; padding:10px 18px; } .fh-root .skip:focus{ left:12px; top:12px; } /* ====================== ヘッダー ====================== */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); display:flex; align-items:center; transition:background .3s ease, box-shadow .3s ease; } .header::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); transition:opacity .3s ease; } .header.solid{ background:var(--surface); box-shadow:var(--sh-s); } .header.solid::before{ opacity:0; } .header .wrap{ display:flex; align-items:center; gap:20px; } .fh-root .logo{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:21px; font-weight:700; letter-spacing:.04em; color:#fff; white-space:nowrap; } .fh-root .logo:hover{ text-decoration:none; } .fh-root .logo .mark{ width:30px; height:30px; border-radius:7px; flex:none; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:15px; font-weight:700; font-family:var(--f-body); } .header.solid .logo{ color:var(--ink); } .nav{ margin-left:auto; display:flex; align-items:center; gap:4px; } .nav a{ color:#fff; font-size:14px; padding:9px 13px; border-radius:var(--r-s); white-space:nowrap; transition:background .2s; } .nav a:hover{ background:rgba(255,255,255,.16); text-decoration:none; } .nav a[aria-current="page"]{ font-weight:700; } .header.solid .nav a{ color:var(--ink-2); } .header.solid .nav a:hover{ background:var(--surface-2); color:var(--ink); } /* 言語切替 */ .lang{ position:relative; } .lang-btn{ display:flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; color:#fff; cursor:pointer; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); padding:7px 13px; border-radius:999px; } .header.solid .lang-btn{ color:var(--ink); background:var(--surface-2); border-color:var(--line); } .lang-btn::after{ content:"▾"; font-size:10px; opacity:.8; } .lang-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-l); padding:6px; display:none; z-index:10; } .lang.open .lang-menu{ display:block; } .lang-menu button{ display:block; width:100%; text-align:left; font:inherit; font-size:14px; background:none; border:0; cursor:pointer; color:var(--ink-2); padding:9px 12px; border-radius:var(--r-s); } .lang-menu button:hover{ background:var(--surface-2); color:var(--ink); } .lang-menu button[aria-selected="true"]{ color:var(--brand); font-weight:700; background:var(--brand-l); } /* ハンバーガー */ .burger{ display:none; width:42px; height:42px; flex:none; cursor:pointer; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-s); padding:0; place-items:center; } .header.solid .burger{ background:var(--surface-2); border-color:var(--line); } .burger span{ display:block; width:18px; height:2px; background:#fff; margin:3px auto; border-radius:2px; } .header.solid .burger span{ background:var(--ink); } .drawer{ position:fixed; inset:0; z-index:200; background:var(--surface); padding:80px 28px 40px; display:none; overflow-y:auto; } .drawer.open{ display:block; } .drawer a{ display:block; font-family:var(--f-display); font-size:22px; color:var(--ink); padding:16px 0; border-bottom:1px solid var(--line); } .drawer a:hover{ text-decoration:none; color:var(--brand); } .drawer-close{ position:absolute; top:18px; right:22px; width:44px; height:44px; background:var(--surface-2); border:0; border-radius:var(--r-s); font-size:22px; line-height:1; cursor:pointer; color:var(--ink); } @media (max-width:900px){ .nav{ display:none; } .burger{ display:grid; } .lang{ margin-left:auto; } } /* ====================== ボタン ====================== */ .fh-root .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-body); font-size:15px; font-weight:700; line-height:1.4; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .18s, box-shadow .18s, background .18s; } .fh-root .btn:hover{ text-decoration:none; transform:translateY(-2px); } .fh-root .btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--sh); } .fh-root .btn-primary:hover{ background:var(--brand-d); } .fh-root .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); } .fh-root .btn-ghost:hover{ background:rgba(255,255,255,.14); } .fh-root .btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line); } .fh-root .btn-outline:hover{ border-color:var(--brand); color:var(--brand); } .fh-root .btn-line{ background:#06C755; color:#fff; } .fh-root .btn-wechat{ background:#07C160; color:#fff; } .fh-root .btn-tel{ background:var(--accent); color:#fff; } .fh-root .btn-sm{ font-size:13.5px; padding:10px 18px; } .fh-root .btn-block{ width:100%; } /* ====================== ヒーロー ====================== */ .hero{ position:relative; min-height:min(72vh, 580px); display:flex; align-items:flex-end; padding:var(--header-h) 0 64px; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; } .hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,20,23,.82) 0%, rgba(12,20,23,.42) 45%, rgba(12,20,23,.22) 100%); } .hero .wrap{ position:relative; z-index:1; } .hero-inner{ max-width:720px; color:#fff; } .kicker{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.9; margin:0 0 18px; font-weight:500; } .hero h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(30px, 6vw, 58px); line-height:1.32; letter-spacing:.02em; word-break:auto-phrase; line-break:strict; margin:0 0 20px; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.35); } .hero p.sub{ font-size:clamp(15px,2.1vw,18px); line-height:1.9; margin:0 0 32px; max-width:560px; opacity:.95; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; } /* 小さいヒーロー（下層ページ） */ .hero.sub-hero{ min-height:min(54vh, 440px); } .hero.sub-hero h1{ font-size:clamp(27px, 5vw, 46px); } /* ====================== セクション ====================== */ .section{ padding:88px 0; } .section.tight{ padding:60px 0; } .section.alt{ background:var(--surface); } .section-head{ margin-bottom:44px; max-width:720px; } .eyebrow{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 12px; } h2.h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(24px,3.6vw,36px); line-height:1.5; letter-spacing:.02em; margin:0 0 16px; text-wrap:balance; } h3.h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(19px,2.4vw,23px); line-height:1.6; margin:0 0 12px; } .lead{ font-size:16.5px; color:var(--ink-2); margin:0; } .fh-root p{ margin:0 0 18px; } .fh-root p:last-child{ margin-bottom:0; } /* ====================== 施設カード ====================== */ .houses{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:900px){ .houses{ grid-template-columns:1fr; gap:22px; } } .house{ position:relative; background:var(--surface); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; } .house:hover{ transform:translateY(-5px); box-shadow:var(--sh-l); } .house-photo{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); } .house-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .house:hover .house-photo img{ transform:scale(1.05); } .house-tag{ position:absolute; left:14px; top:14px; z-index:1; background:var(--surface); color:var(--ink); font-size:11.5px; font-weight:700; letter-spacing:.08em; padding:6px 12px; border-radius:999px; box-shadow:var(--sh-s); display:flex; align-items:center; gap:7px; } .house-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--dot,var(--brand)); } .house-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; gap:14px; } .house-name{ font-family:var(--f-display); font-size:23px; font-weight:700; margin:0; line-height:1.4; } .house-facts{ display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; } .house-facts li{ font-size:12.5px; color:var(--ink-2); background:var(--surface-2); padding:5px 11px; border-radius:999px; white-space:nowrap; } .house-desc{ font-size:14.5px; color:var(--ink-2); line-height:1.85; margin:0; flex:1; } .fh-root .house-link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:14.5px; font-weight:700; color:var(--brand); } .house-link::after{ content:"→"; transition:transform .2s; } .house:hover .house-link::after{ transform:translateX(4px); } /* ====================== 直接予約バンド ====================== */ .direct{ background:var(--brand); color:#fff; } .direct .wrap{ padding-block:70px; } .direct-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:center; } @media (max-width:860px){ .direct-grid{ grid-template-columns:1fr; gap:34px; } } .direct .eyebrow{ color:#8FC4D4; } .direct h2.h2{ color:#fff; } .direct p{ color:rgba(255,255,255,.86); font-size:16px; } .direct-points{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:12px; } .direct-points li{ position:relative; padding-left:30px; color:rgba(255,255,255,.92); font-size:15.5px; } .direct-points li::before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:11px; margin-top:.35em; } .contact-card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-l); padding:28px; } .contact-card h3{ font-family:var(--f-display); font-size:19px; margin:0 0 18px; color:#fff; } .contact-methods{ display:grid; gap:11px; } .qr-row{ display:none; gap:18px; margin-top:22px; } .qr-row figure{ margin:0; text-align:center; flex:1; } .qr-row img{ width:100%; max-width:140px; margin:0 auto 8px; background:#fff; padding:8px; border-radius:var(--r-s); } .qr-row figcaption{ font-size:11.5px; color:rgba(255,255,255,.7); } /* QRはPCだけ。スマホでは自分の画面のQRを読めないため出しません */ @media (min-width:861px){ .qr-row{ display:flex; } } /* ====================== 事実の帯（詳細ページ） ====================== */ .facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(164px,1fr)); background:var(--surface); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh); margin-top:-56px; position:relative; z-index:5; } .fact{ padding:22px 20px; border-right:1px solid var(--line); } .fact:last-child{ border-right:0; } @media (max-width:760px){ .facts{ margin-top:-30px; } .fact{ border-right:0; border-bottom:1px solid var(--line); } .fact:last-child{ border-bottom:0; } } .fact dt{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; margin-bottom:6px; font-weight:400; } .fact dd{ margin:0; font-family:var(--f-display); font-size:17px; font-weight:700; line-height:1.55; } /* 未確定データの目印。値を入れたらこのクラスを消してください */ .todo{ background:#FFF3CD; color:#7A5C00; border-bottom:2px dotted #C9A227; padding:0 4px; border-radius:3px; font-family:var(--f-body); font-size:.92em; } /* ====================== 設備アイコン ====================== */ .amenities{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; } .amenity{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:15px 16px; min-height:56px; display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink-2); line-height:1.5; } .amenity .ic{ font-size:19px; line-height:1; flex:none; filter:grayscale(.15); } /* ====================== ギャラリー ====================== */ .gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; } .gallery figure{ margin:0; } .gallery button.shot{ display:block; width:100%; padding:0; border:0; cursor:zoom-in; background:var(--surface-2); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; position:relative; } .gallery button.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .gallery button.shot:hover img{ transform:scale(1.06); } .gallery figcaption{ font-size:12.5px; color:var(--ink-3); margin-top:7px; text-align:center; } /* 館内動画 */ .videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:34px; } .videos figure{ margin:0; } /* 現在ある動画はスマホ縦向き（544×960）のため、縦長の枠で表示します */ .videos video{ width:100%; max-width:320px; margin-inline:auto; display:block; border-radius:var(--r); background:var(--ink); aspect-ratio:9/16; object-fit:contain; } .videos figcaption{ font-size:12.5px; color:var(--ink-3); margin-top:7px; text-align:center; } .lightbox{ position:fixed; inset:0; z-index:500; background:rgba(10,14,16,.94); display:none; place-items:center; padding:56px 20px; } .lightbox.open{ display:grid; } .lightbox img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r-s); } .lightbox .cap{ color:#fff; text-align:center; margin-top:14px; font-size:14px; opacity:.85; } .lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{ position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; } .lightbox .lb-close{ top:18px; right:18px; } .lightbox .lb-prev{ left:18px; top:50%; transform:translateY(-50%); } .lightbox .lb-next{ right:18px; top:50%; transform:translateY(-50%); } .lightbox button:hover{ background:rgba(255,255,255,.24); } /* ====================== アクセス ====================== */ .access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; } @media (max-width:860px){ .access-grid{ grid-template-columns:1fr; gap:30px; } } .routes{ display:grid; gap:22px; } .route{ background:var(--surface); border-radius:var(--r); padding:22px 24px; box-shadow:var(--sh-s); } .route h4{ font-family:var(--f-display); font-size:16px; margin:0 0 12px; display:flex; align-items:center; gap:9px; } .route h4 .ic{ font-size:17px; } .route ol{ margin:0; padding-left:20px; display:grid; gap:7px; } .route li{ font-size:14.5px; color:var(--ink-2); line-height:1.75; } .route li b{ color:var(--ink); } .map-embed{ border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-s); aspect-ratio:4/3; background:var(--surface-2); } .map-embed iframe{ width:100%; height:100%; border:0; display:block; } .addr{ background:var(--surface); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 var(--r-s) var(--r-s) 0; margin-bottom:20px; font-size:14.5px; color:var(--ink-2); } .addr b{ color:var(--ink); display:block; font-size:15.5px; margin-bottom:4px; } /* ====================== 予約ブロック ====================== */ .booking{ background:var(--surface); border-radius:var(--r-l); padding:36px; box-shadow:var(--sh); display:grid; gap:24px; } .booking h3{ font-family:var(--f-display); font-size:22px; margin:0; text-align:center; } .booking .note{ font-size:14px; color:var(--ink-2); text-align:center; margin:0; } .booking-btns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; } .ota-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding-top:22px; border-top:1px solid var(--line); } /* ====================== 許可番号バッジ ====================== */ .license{ display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); background:var(--surface-2); padding:8px 14px; border-radius:999px; line-height:1.6; } .license .ic{ font-size:13px; } /* ====================== FAQ ====================== */ .faq{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .faq details{ background:var(--surface); } .faq summary{ cursor:pointer; padding:20px 24px; font-weight:700; font-size:15.5px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; font-size:20px; color:var(--brand); flex:none; } .faq details[open] summary::after{ content:"−"; } .faq .a{ padding:0 24px 22px; font-size:14.5px; color:var(--ink-2); } /* ====================== フッター ====================== */ .footer{ background:var(--ink); color:rgba(255,255,255,.72); padding:64px 0 100px; font-size:14px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px; } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } } .footer h4{ font-family:var(--f-display); font-size:15px; color:#fff; margin:0 0 14px; letter-spacing:.06em; } .footer a{ color:rgba(255,255,255,.72); } .footer a:hover{ color:#fff; } .footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; } .footer .fine{ border-top:1px solid rgba(255,255,255,.14); padding-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.5); } .footer .licenses{ display:grid; gap:5px; font-size:12px; } /* ====================== スマホ固定CTA ====================== */ .mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(26,29,27,.10); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:none; gap:10px; } .mobile-cta .btn{ flex:1; font-size:14px; padding:13px 10px; } @media (max-width:860px){ .mobile-cta{ display:flex; } .fh-root{ padding-bottom:74px; } .footer{ padding-bottom:40px; } } /* ====================== 汎用 ====================== */ .stack-lg{ display:grid; gap:44px; } .stack{ display:grid; gap:22px; } .center{ text-align:center; } .divider{ height:1px; background:var(--line); border:0; margin:0; } .prose p{ font-size:16px; color:var(--ink-2); line-height:2; } /* ========================================================================== WordPress に貼り付けたときだけ効く調整（ローカル版では該当する要素がないので、何も起きません） ========================================================================== */ /* テーマは .entry-content の直下要素を「幅80%・左右10%」に縮め、 alignfull にも margin:auto を当ててきます。ここは !important で上書きします。 --fh-vw は site.js が「スクロールバーを除いた画面幅」を入れます。（100vw だとスクロールバーぶん横に数px はみ出すため） */ .entry-content > .fh-root.alignfull{ width:var(--fh-vw, 100vw) !important; max-width:var(--fh-vw, 100vw) !important; margin-left:calc(50% - var(--fh-vw, 100vw) / 2) !important; margin-right:calc(50% - var(--fh-vw, 100vw) / 2) !important; margin-top:0 !important; margin-bottom:0 !important; padding:0 !important; float:none !important; } /* テーマが本文の上下に付ける余白を、FunHomeのページでは詰める */ .page-id-42 .entry-content, .page-id-583 .entry-content, .page-id-1805 .entry-content, .page-id-1612 .entry-content, .page-id-1117 .entry-content, .page-id-2053 .entry-content{ padding-top:0 !important; margin-top:0 !important; } .page-id-42 .site-main > .hentry, .page-id-583 .site-main > .hentry, .page-id-1805 .site-main > .hentry, .page-id-1612 .site-main > .hentry, .page-id-1117 .site-main > .hentry, .page-id-2053 .site-main > .hentry{ margin-top:0 !important; padding-top:0 !important; } /* テーマは本文を margin-top:-150px でヘッダー画像に食い込ませています。その画像を消したページでは、食い込ませる必要がないので戻します。 */ .page-id-42 #content.wrapper, .page-id-583 #content.wrapper, .page-id-1805 #content.wrapper, .page-id-1612 #content.wrapper, .page-id-1117 #content.wrapper, .page-id-2053 #content.wrapper{ margin-top:0 !important; padding-top:0 !important; } /* テーマの大きなヘッダー画像（ぼやけた帯）を、FunHomeのページだけ消す。ページIDは README の一覧を参照。増えたら追記してください。 */ .page-id-42 .custom-header, .page-id-583 .custom-header, .page-id-1805 .custom-header, .page-id-1612 .custom-header, .page-id-1117 .custom-header, .page-id-2053 .custom-header{ display:none; } /* テーマのヘッダー（ロゴ＋メニュー）は高さ98px。その下にヒーローが来るようにする */ .entry-content > .fh-root .hero{ padding-top:104px; } /* テーマ側の .gallery（[gallery]ショートコード用）に負けないようにする */ .entry-content > .fh-root .gallery{ margin-bottom:0; } /* WordPress版の言語切替（ヒーローの中に置くため、常に白文字） */ .fh-langs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } .fh-langs button{ font:inherit; font-size:13px; cursor:pointer; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); padding:6px 14px; border-radius:999px; transition:background .2s; } .fh-langs button:hover{ background:rgba(255,255,255,.28); } .fh-langs button[aria-selected="true"]{ background:#fff; color:var(--brand); border-color:#fff; font-weight:700; } /* ====================== クチコミ ====================== */ .scores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:36px; } .score-card{ background:var(--surface); border-radius:var(--r); padding:20px 22px; box-shadow:var(--sh-s); display:flex; align-items:center; gap:16px; border-left:3px solid var(--dot,var(--brand)); } .score-num{ font-family:var(--f-display); font-size:30px; font-weight:700; line-height:1; color:var(--brand); font-variant-numeric:tabular-nums; flex:none; } .score-meta{ display:grid; gap:3px; min-width:0; } .score-meta b{ font-size:15px; font-weight:700; } .score-meta span{ font-size:12.5px; color:var(--ink-3); line-height:1.6; } /* 詳細ページ用の大きなスコア */ .review-head{ display:flex; align-items:center; gap:20px; margin-bottom:26px; } .score-big{ font-family:var(--f-display); font-size:44px; font-weight:700; line-height:1; background:var(--brand); color:#fff; padding:14px 18px; border-radius:var(--r); font-variant-numeric:tabular-nums; flex:none; } .score-label{ font-family:var(--f-display); font-size:20px; font-weight:700; margin:0 0 4px; } .score-sub{ font-size:13.5px; color:var(--ink-3); margin:0; } .score-bars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 28px; margin-bottom:34px; } .bar{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; font-size:13.5px; } .bar > span{ color:var(--ink-2); white-space:nowrap; } .bar > i{ height:6px; border-radius:99px; background:var(--surface-2); display:block; position:relative; } .bar > i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--v,0%); background:var(--brand); border-radius:99px; } .bar > b{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:13.5px; } .quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .quote{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:0; display:flex; flex-direction:column; gap:14px; } /* テーマ(palmeria)は blockquote に padding:10rem・白背景・影・ 62px角の大きな引用符アイコン(::before)を付けます。全部打ち消します。 .fh-root を付けているのは、テーマより優先させるためです。 */ .fh-root .quote blockquote{ margin:0; padding:0; border:0; position:static; background:none; box-shadow:none; font-family:inherit; font-size:15px; line-height:1.95; color:var(--ink); flex:1; } .fh-root .quote blockquote::before, .fh-root .quote blockquote::after{ content:none; display:none; } .quote figcaption{ font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:8px; } .quote figcaption::before{ content:""; width:22px; height:1px; background:var(--line); flex:none; } .review-more{ text-align:center; margin-top:28px; } /* -------------------------------------------------------------- テーマは「タイトル欄」(.entry-header) を、中身が空でも出力します。高さ0なのに margin-bottom:60px を持つため、ヒーローの上に 60pxの白い帯ができてしまいます。見出しはヒーローの中に入れているので、この欄ごと消します。 -------------------------------------------------------------- */ .page-id-42 .entry-header, .page-id-583 .entry-header, .page-id-1805 .entry-header, .page-id-1612 .entry-header, .page-id-1117 .entry-header, .page-id-2053 .entry-header{ display:none !important; } /* テーマのヘッダー（ロゴとメニュー）は白文字です。ヒーロー写真の上端が明るいと読めなくなるので、うっすら暗いグラデーションを敷きます。ローカル版の .header::before と同じ考え方です。 */ .page-id-42 .site-header::before, .page-id-583 .site-header::before, .page-id-1805 .site-header::before, .page-id-1612 .site-header::before, .page-id-1117 .site-header::before, .page-id-2053 .site-header::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); } /* ====================== 空室カレンダー ====================== */ /* 施設の色。空室カレンダーのもともとの配色を引き継いでいます */ .fh-root .room1{ background:var(--c-castle); } .fh-root .room2{ background:var(--c-castle2); } .fh-root .room3{ background:var(--c-kurokawa); } .cal-legend{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:14px; } .fh-root .cal-legend a{ text-decoration:none; } .cal-chip{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:140px; padding:13px 20px; border-radius:999px; color:#fff; box-shadow:var(--sh); transition:transform .2s ease, box-shadow .2s ease; } .cal-legend a:hover .cal-chip{ transform:translateY(-3px); box-shadow:var(--sh-l); } .cal-chip b{ font-size:15px; font-weight:700; line-height:1.4; } .cal-chip span{ font-size:11.5px; opacity:.92; letter-spacing:.04em; } .cal-meta{ text-align:center; font-size:12.5px; color:var(--ink-3); margin:0 0 40px; line-height:1.9; } .cal-meta b{ color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums; } .month-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px; margin-bottom:26px; box-shadow:var(--sh-s); } .month-title{ font-family:var(--f-display); font-size:20px; font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:18px; font-variant-numeric:tabular-nums; } .title-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; } .title-dot + .title-dot{ margin-left:-4px; } .month-scroll{ overflow-x:auto; } table.calendar{ width:100%; border-collapse:separate; border-spacing:5px; table-layout:fixed; margin:0; } .fh-root .calendar th{ font-size:11px; letter-spacing:.1em; color:var(--ink-3); font-weight:500; padding:2px 0 6px; text-align:center; border:0; background:none; } .fh-root .calendar td{ vertical-align:top; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); padding:6px 5px; height:78px; } .fh-root .calendar td.empty{ border:0; background:none; } .fh-root .calendar td.no-availability{ background:var(--surface-2); border-color:transparent; } .fh-root .calendar td.today{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); } .day{ font-size:12.5px; color:var(--ink-2); margin-bottom:5px; font-variant-numeric:tabular-nums; line-height:1.4; } .calendar td.no-availability .day{ color:var(--ink-3); } .calendar td.today .day{ color:var(--brand); font-weight:700; } .fh-root .room-link{ display:block; text-decoration:none; } .available-box{ color:#fff; font-size:10.5px; font-weight:700; text-align:center; border-radius:4px; padding:2px 0; margin-bottom:3px; line-height:1.7; white-space:nowrap; overflow:hidden; } .blank-space{ height:21px; margin-bottom:3px; } .calendar-status{ text-align:center; color:var(--ink-2); padding:70px 20px; font-size:15px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); } .calendar-error{ color:#B8412A; } @media (max-width:700px){ .month-box{ padding:20px 16px; border-radius:var(--r); } table.calendar{ min-width:560px; border-spacing:4px; } .cal-chip{ min-width:112px; padding:11px 16px; } .cal-chip b{ font-size:14px; } } /* ====================== お問い合わせフォーム ====================== */ /* 自前のフォームです。送信だけ WordPress の Contact Form 7 に渡すので、メールの届き先や本文の設定は今までどおり管理画面で変えられます。 */ .fh-form{ display:grid; gap:26px; } .ff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; } .ff-full{ grid-column:1 / -1; } @media (max-width:640px){ .ff-grid{ grid-template-columns:1fr; gap:18px; } } .ff-field{ display:grid; gap:8px; } .ff-field label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.02em; } .ff-req,.ff-opt{ font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:3px 7px; border-radius:4px; line-height:1; } .ff-req{ background:#F6E4DF; color:#B8412A; } .ff-opt{ background:var(--surface-2); color:var(--ink-3); } .fh-form input, .fh-form select, .fh-form textarea{ width:100%; font-family:var(--f-body); font-size:15px; line-height:1.7; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; box-sizing:border-box; transition:border-color .18s, box-shadow .18s; } .fh-form textarea{ min-height:130px; resize:vertical; } .fh-form select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:42px; } .fh-form input:focus, .fh-form select:focus, .fh-form textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-l); } .fh-form .ff-invalid input, .fh-form .ff-invalid select, .fh-form .ff-invalid textarea{ border-color:#B8412A; background:#FDF6F4; } .ff-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; } .ff-note{ margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.8; flex:1; min-width:200px; } .fh-form button[type="submit"]{ min-width:170px; } .fh-form button[disabled]{ opacity:.6; cursor:default; transform:none; } .ff-result{ margin:0; padding:14px 18px; border-radius:var(--r-s); font-size:14.5px; line-height:1.8; display:none; } .ff-result.show{ display:block; } .ff-result.ok{ background:var(--moss-soft,#E8F0EB); color:#2F5D45; border:1px solid #BFD9C9; } .ff-result.ng{ background:#FAEBE7; color:#8E3121; border:1px solid #E8C6BC; }