/* ============================================================ JENNIE軽井沢 共有スタイル（トップ／下層ページ共通） フォントは各HTMLの でGoogle Fontsを読み込む前提。 ============================================================ */ :root { --blue: #2e6da4; --blue-deep: #16354f; --green: #5f7f4b; --green-deep: #33462c; --brick: #b8684a; --cream: #f7f8f4; --paper: #ffffff; --ink: #1d2522; --muted: #6e7770; --line: #dce2da; --shadow: 0 22px 54px rgba(22, 53, 79, 0.12); --header-h: 76px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; } /* 見出しの行末に1〜2文字だけ落ちる「ぶら下がり」を防ぐ（非対応ブラウザでは無視される） */ h1, h2, h3 { text-wrap: balance; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } /* 言語切替: data-lang に応じて表示を出し分け */ [data-lang="ja"] .lang-en, [data-lang="en"] .lang-ja { display: none; } main[id], section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 14px); } /* スクロール表示アニメ（JS有効時のみ） */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } } /* ============ ヘッダー ============ */ .site-header { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); padding: 0 clamp(18px, 3vw, 44px); color: var(--paper); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .site-header::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(180deg, rgba(12, 25, 20, 0.55), rgba(12, 25, 20, 0)); opacity: 1; transition: opacity 0.3s ease; } .site-header.is-scrolled, .site-header.is-solid { color: var(--blue-deep); background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 24px rgba(22, 53, 79, 0.08); backdrop-filter: blur(8px); } .site-header.is-scrolled::before, .site-header.is-solid::before { opacity: 0; } .brand { display: flex; align-items: center; gap: 10px; font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; } .brand-service { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 9px 5px; border: 1px solid currentColor; font-size: 18px; font-weight: 600; letter-spacing: 0.01em; } .brand-main { font-size: 38px; font-weight: 700; letter-spacing: 0.015em; line-height: 0.9; } .brand-sub { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; } .brand small { font-family: "Josefin Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; opacity: 0.82; } .primary-nav { display: flex; gap: clamp(14px, 1.6vw, 26px); align-items: center; margin-left: auto; font-size: 13px; font-weight: 500; white-space: nowrap; } .primary-nav a { position: relative; padding: 6px 0; opacity: 0.92; transition: opacity 0.2s ease; } .primary-nav a::after { position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; content: ""; background: currentColor; transition: width 0.25s ease; } .primary-nav a:hover { opacity: 1; } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { width: 100%; } .header-actions { display: flex; gap: 10px; align-items: center; } .header-social { display: none; } .header-social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: inherit; opacity: 0.85; transition: opacity 0.2s ease; text-decoration: none; } .header-social-link:hover { opacity: 1; } @media (max-width: 480px) { .header-social-link { width: 26px; height: 26px; } .header-social-link svg { width: 18px; height: 18px; } } .lang-switch { display: inline-flex; overflow: hidden; height: 34px; border: 1px solid currentColor; border-radius: 4px; font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; } .lang-switch button { min-width: 36px; padding: 0 8px; color: inherit; font: inherit; background: transparent; border: 0; cursor: pointer; } .lang-switch button[aria-pressed="true"] { color: var(--paper); background: var(--blue); } .site-header.is-scrolled .lang-switch button[aria-pressed="true"], .site-header.is-solid .lang-switch button[aria-pressed="true"] { color: var(--paper); background: var(--blue-deep); } .reserve-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; color: var(--paper); background: var(--blue); border-radius: 4px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(46, 109, 164, 0.32); transition: transform 0.2s ease, background 0.2s ease; } .reserve-cta:hover { background: var(--blue-deep); transform: translateY(-1px); } .header-reserve { display: flex; align-items: center; gap: 7px; } .hr-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .hr-btn.hr-stay { background: var(--blue); color: var(--paper); box-shadow: 0 8px 20px rgba(46, 109, 164, 0.32); } .hr-btn.hr-stay:hover { background: var(--blue-deep); transform: translateY(-1px); } .hr-btn:not(.hr-stay) { background: var(--blue-deep); color: var(--paper); } .hr-btn:not(.hr-stay):hover { background: var(--blue); transform: translateY(-1px); } .mobile-book-bar { display: none; } @media (max-width: 1279px) { .header-reserve { display: none; } } @media (min-width: 1280px) { .mobile-book-bar { display: none !important; } } @media (max-width: 1279px) { .mobile-book-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12); } .mb-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; } .mb-btn.mb-stay { background: var(--blue); color: var(--paper); } .mb-btn:not(.mb-stay) { background: transparent; color: var(--blue-deep); border: 1px solid var(--blue); } body { padding-bottom: 74px; } } .menu-toggle { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 14px; color: inherit; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; background: transparent; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; } .menu-toggle svg { width: 16px; height: 16px; } /* ============ ボタン ============ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 30px; border-radius: 4px; font-size: 15px; font-weight: 700; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .button.primary { color: var(--paper); background: var(--blue); box-shadow: 0 12px 28px rgba(46, 109, 164, 0.36); } .button.primary:hover { background: var(--blue-deep); transform: translateY(-2px); } .button.ghost { color: var(--paper); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(2px); } .button.ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); } .button.outline { color: var(--blue-deep); background: transparent; border: 1px solid var(--line); } .button.outline:hover { background: var(--paper); transform: translateY(-2px); } /* ============ 下層ページ用ヒーロー ============ */ .page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 46vw, 520px); padding: calc(var(--header-h) + 40px) clamp(18px, 5vw, 90px) clamp(40px, 5vw, 64px); overflow: hidden; color: var(--paper); } .page-hero::before { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(180deg, rgba(10, 22, 18, 0.4) 0%, rgba(10, 22, 18, 0.2) 40%, rgba(10, 22, 18, 0.78) 100%), var(--page-hero-image, linear-gradient(120deg, #2c3a2c, #16354f)) center / cover no-repeat; } .page-hero-inner { position: relative; z-index: 1; width: min(900px, 100%); } .page-hero .eyebrow { margin: 0 0 14px; font-family: "Cormorant Garamond", serif; font-size: 17px; font-weight: 600; letter-spacing: 0.05em; } .page-hero h1 { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(32px, 4.6vw, 60px); font-weight: 600; line-height: 1.2; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28); } .page-hero p { max-width: 560px; margin: 18px 0 0; font-size: 15px; line-height: 2; } /* パンくず */ .crumbs { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: 0.08em; opacity: 0.86; } .crumbs a:hover { text-decoration: underline; } /* ============ セクション共通 ============ */ .section { padding: clamp(56px, 8vw, 104px) clamp(18px, 5vw, 90px); } .section.alt { background: var(--paper); } .section.dark { color: var(--paper); background: var(--green-deep); } .wrap { width: min(1120px, 100%); margin: 0 auto; } .section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; } .section-head.left { margin-left: 0; text-align: left; } .section-head .eyebrow { margin: 0 0 12px; font-family: "Cormorant Garamond", serif; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--green); } .section.dark .section-head .eyebrow { color: #d7e3c8; } .section-head h2 { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(26px, 3.4vw, 44px); font-weight: 600; line-height: 1.3; color: var(--blue-deep); text-wrap: balance; } .nowrap { white-space: nowrap; } .section.dark .section-head h2 { color: var(--paper); } .section-head p { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.95; } .section.dark .section-head p { color: rgba(255, 255, 255, 0.82); } /* ============ カード / グリッド ============ */ .grid { display: grid; gap: 22px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: transform 0.3s ease; } .card:hover { transform: translateY(-6px); } .card figure { position: relative; height: 220px; margin: 0; overflow: hidden; } .card figure img { transition: transform 0.6s ease; } .card:hover figure img { transform: scale(1.06); } .card .tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--paper); background: rgba(22, 53, 79, 0.78); border-radius: 40px; backdrop-filter: blur(2px); } .card-body { padding: 22px 22px 26px; } .card-body h3 { margin: 0; font-family: "Shippori Mincho", serif; font-size: 20px; font-weight: 600; color: var(--blue-deep); } .card-body p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.85; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chips span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--green-deep); background: #eaf0e4; border-radius: 4px; } .chips span svg { flex: none; width: 13px; height: 13px; color: var(--green); } /* ============ 統計 / 数値訴求 ============ */ .stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .stat { flex: 1 1 0; min-width: 130px; padding: 22px 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; } .stat b { display: block; font-family: "Cormorant Garamond", serif; font-size: 34px; font-weight: 600; line-height: 1; color: #fff; } .stat span { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); } /* ============ 情報リスト / 表 ============ */ .info-card { padding: clamp(22px, 3vw, 30px); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; } .info-card h3 { margin: 0 0 6px; font-family: "Shippori Mincho", serif; font-size: 20px; font-weight: 600; color: var(--blue-deep); } .info-card .label { margin: 0 0 8px; font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); } .deflist { display: grid; gap: 0; margin: 0; } .deflist div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 13px 0; font-size: 14px; line-height: 1.8; border-top: 1px solid var(--line); } .deflist div:first-child { border-top: 0; } .deflist dt { margin: 0; font-weight: 700; color: var(--blue-deep); } .deflist dd { margin: 0; color: var(--ink); } .pricelist { display: grid; gap: 0; margin: 0; } .pricelist div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 13px 0; border-top: 1px dotted #c4cdc4; } .pricelist div:first-child { border-top: 0; } .pricelist .name { font-size: 14.5px; } .pricelist .price { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; color: var(--blue-deep); white-space: nowrap; } .bullets { margin: 0; padding-left: 1.2em; color: var(--ink); font-size: 14px; line-height: 1.95; } .bullets li::marker { color: var(--brick); } .link-list { display: grid; gap: 10px; margin-top: 18px; } .link-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; color: var(--blue-deep); background: #f4f7f3; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 700; } .link-list a::after { content: "→"; font-family: "Josefin Sans", sans-serif; } /* ============ 銀行振込・割引予約ページ ============ */ .page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .discount-points .info-card { min-height: 100%; } .discount-points .info-card p:not(.label) { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.85; } .flow-steps { counter-reset: flow; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .flow-step { position: relative; min-height: 210px; padding: 62px 22px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; } .flow-step::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); position: absolute; top: 18px; left: 22px; font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 600; line-height: 1; color: var(--brick); } .flow-step h3 { margin: 0; font-family: "Shippori Mincho", serif; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--blue-deep); } .flow-step p { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.85; } .room-grid { grid-template-columns: repeat(3, 1fr); } .room-card { display: flex; flex-direction: column; } .room-card figure { height: 210px; } .room-card .card-body { display: flex; flex: 1; flex-direction: column; } .room-card .button { width: 100%; min-height: 48px; margin-top: auto; padding: 0 16px; font-size: 13.5px; } .compact-bullets { margin: 12px 0 18px; font-size: 13px; line-height: 1.75; } .rule-detail { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; } .rule-detail + .rule-detail { margin-top: 14px; } .rule-detail summary { position: relative; display: block; padding: 20px 56px 20px 22px; font-family: "Shippori Mincho", serif; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--blue-deep); cursor: pointer; } .rule-detail summary::-webkit-details-marker { display: none; } .rule-detail summary::after { content: "+"; position: absolute; top: 50%; right: 22px; display: grid; place-items: center; width: 30px; height: 30px; color: var(--paper); font-family: "Josefin Sans", sans-serif; background: var(--blue-deep); border-radius: 50%; transform: translateY(-50%); } .rule-detail[open] summary::after { content: "−"; } .rule-detail .deflist, .rule-detail .rule-copy { margin: 0 22px 22px; } .rule-detail .deflist div:first-child { border-top: 1px solid var(--line); } .rule-copy { color: var(--ink); font-size: 14px; line-height: 1.95; } .video-frame { position: relative; overflow: hidden; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #0b1412; border-radius: 8px; box-shadow: var(--shadow); } .video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .post-list { display: grid; gap: 0; margin: 0; } .post-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); } .post-row:first-child { border-top: 0; } .post-row time { color: var(--muted); font-family: "Josefin Sans", sans-serif; font-size: 13px; font-weight: 600; } .post-row a { color: var(--blue-deep); font-size: 15px; font-weight: 700; line-height: 1.7; } .post-row .post-tag { padding: 5px 10px; color: var(--paper); background: var(--green); border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; } /* 注意書き / コールアウト */ .callout { display: flex; gap: 14px; padding: 18px 20px; background: #eef3ed; border-left: 3px solid var(--green); border-radius: 8px; color: var(--ink); font-size: 13.5px; line-height: 1.85; } .callout.warn { background: #fbf0ea; border-left-color: var(--brick); } /* ============ 予約バンド（下層ページ下部CTA） ============ */ .reserve-band { display: grid; gap: 18px; place-items: center; padding: clamp(48px, 7vw, 88px) clamp(18px, 5vw, 90px); text-align: center; color: var(--paper); background: var(--blue-deep); } .reserve-band h2 { margin: 0; font-family: "Shippori Mincho", serif; font-size: clamp(24px, 3vw, 38px); font-weight: 600; } .reserve-band p { max-width: 540px; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.9; } .reserve-band .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .reserve-band .btn-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; font-size: 14px; font-weight: 700; border-radius: 6px; } .reserve-band .btn-row a.is-main { color: var(--paper); background: var(--brick); } .reserve-band .btn-row a.is-main:hover { background: #a9573d; } .reserve-band .btn-row a.is-sub { color: var(--paper); background: transparent; border: 1px solid rgba(255, 255, 255, 0.34); } .reserve-band .btn-row a.is-sub:hover { color: var(--blue-deep); background: var(--paper); } /* ============ ドロワー（スマホMENU） ============ */ .drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; } .drawer.is-open { visibility: visible; opacity: 1; } .drawer-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 18, 0.5); } .drawer-panel { position: absolute; inset: 0 0 0 auto; width: min(380px, 86vw); padding: 26px 26px 36px; overflow-y: auto; background: var(--cream); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .drawer.is-open .drawer-panel { transform: translateX(0); } .drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .drawer-top .brand { flex-direction: column; align-items: flex-start; gap: 3px; color: var(--blue-deep); } .drawer-top .brand-service { display: none; } .drawer-top .brand-main { font-size: 30px; } .drawer-top .brand-sub { font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .drawer-close { width: 42px; height: 42px; font-size: 22px; color: var(--blue-deep); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; } .drawer-group + .drawer-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); } .drawer-group h4 { margin: 0 0 12px; font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--green); } .drawer-group a { display: block; padding: 11px 0; font-family: "Shippori Mincho", serif; font-size: 18px; color: var(--ink); } .drawer-reserve { display: grid; gap: 10px; margin-top: 26px; } .drawer-reserve a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 15px; font-weight: 700; border-radius: 6px; } .drawer-reserve a.is-main { color: var(--paper); background: var(--blue); } .drawer-reserve a.is-sub { color: var(--blue-deep); background: var(--paper); border: 1px solid var(--line); } .drawer-lang { display: inline-flex; overflow: hidden; margin-top: 24px; border: 1px solid var(--line); border-radius: 4px; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; } .drawer-lang button { min-width: 64px; padding: 8px 0; background: var(--paper); border: 0; cursor: pointer; } .drawer-lang button[aria-pressed="true"] { color: var(--paper); background: var(--blue-deep); } /* ============ フッター ============ */ .footer-section { padding: clamp(54px, 7vw, 86px) clamp(20px, 5vw, 72px) 34px; color: var(--paper); background: var(--blue-deep); font-family: "Noto Sans JP", sans-serif; } .footer-inner { width: min(1120px, 100%); margin: 0 auto; } .footer-main { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1fr) minmax(180px, 0.45fr); gap: clamp(28px, 5vw, 64px); padding-bottom: clamp(34px, 5vw, 54px); } .footer-logo { display: inline-block; color: var(--paper); font-family: "Cormorant Garamond", serif; font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1; letter-spacing: 0.05em; } .footer-company { margin: 20px 0 0; font-size: 15px; font-weight: 700; line-height: 1.8; } .footer-company-sub, .footer-area, .footer-copy { margin: 4px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.8; } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px 24px; align-content: start; } .footer-nav a, .footer-social-links a { color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.6; transition: color 0.2s ease; } .footer-nav a:hover, .footer-social-links a:hover { color: var(--paper); } .footer-social-title { margin: 0; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .footer-social-links { display: grid; gap: 10px; margin-top: 16px; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footer-legal a { color: rgba(255, 255, 255, 0.72); font-size: 12px; transition: color 0.2s ease; } .footer-legal a:hover { color: var(--paper); } /* ============ レスポンシブ ============ */ @media (max-width: 1180px) { .primary-nav { display: none; } .menu-toggle { display: inline-flex; } } @media (max-width: 1080px) { .flow-steps, .room-grid { grid-template-columns: repeat(2, 1fr); } .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { :root { --header-h: 64px; } .site-header { width: 100%; max-width: 100vw; } .brand { flex: 0 1 auto; min-width: 0; } .brand-service { display: none; } .brand-main { font-size: 32px; } .brand-sub { font-size: 18px; } .header-actions { flex: 0 0 auto; margin-left: auto; } .primary-nav { display: none !important; } .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-4 { grid-template-columns: 1fr; } .flow-steps, .room-grid { grid-template-columns: 1fr; } .flow-step { min-height: 0; } .grid.cols-2 { grid-template-columns: 1fr; } .deflist div { grid-template-columns: 120px 1fr; gap: 12px; } .post-row { grid-template-columns: 1fr; gap: 6px; } .post-row .post-tag { width: fit-content; } .footer-main { grid-template-columns: 1fr; } .footer-nav { grid-template-columns: 1fr; } } @media (max-width: 520px) { .site-header { gap: 10px; padding: 0 14px; } .brand { flex-direction: column; align-items: flex-start; gap: 2px; } .brand-main { font-size: 25px; } .brand-sub { font-family: "Josefin Sans", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .header-actions { gap: 6px; } .lang-switch { height: 32px; } .lang-switch button { min-width: 34px; padding: 0 7px; } .menu-toggle { justify-content: center; width: 42px; flex-basis: 42px; padding: 0; font-size: 0; } .page-actions .button { width: 100%; } .rule-detail .deflist div { grid-template-columns: 1fr; gap: 4px; } } /* ===== 割引予約ボタンは全ページ緑で統一 ===== */ [data-book="plans"], a.button[href*="bank-transfer.html"] { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; } [data-book="plans"]:hover, a.button[href*="bank-transfer.html"]:hover { background: #50693d !important; border-color: #50693d !important; color: #fff !important; }