@charset "utf-8"; /* ============================================================================= * 居酒屋 蒼庵 — 宴会ページ テンプレート * ----------------------------------------------------------------------------- * 色は src/content.js の theme で決まります（ の :root に出力されます）。 * このファイルは色を直接持ちません（var() のフォールバック値のみ）。 * ===========================================================================*/ /* --- 1. リセット ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; } a { color: inherit; } /* --- 2. 変数 -------------------------------------------------------------- */ :root { --font-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", serif; --wrap: 1080px; --pad: 16px; --radius: 3px; --radius-lg: 5px; --shadow: 0 1px 2px rgba(43, 38, 34, .05), 0 6px 18px rgba(43, 38, 34, .05); } @media (min-width: 600px) { :root { --pad: 24px; } } /* --- 3. ベース ------------------------------------------------------------ */ body { font-family: var(--font-sans); color: var(--c-ink, #2B2622); background: var(--c-bg, #FBF8F3); font-size: 15px; line-height: 1.85; font-feature-settings: "palt" 1; /* モバイル固定CTA の高さぶんを確保 */ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 900px) { body { font-size: 16px; padding-bottom: 0; } } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } :focus-visible { outline: 3px solid var(--c-accent, #A8471F); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--c-primary, #26555C); color: #fff; padding: 10px 16px; border-radius: var(--radius); text-decoration: none; transition: top .15s; } .skip-link:focus { top: 8px; } /* --- 4. デモ告知バー ------------------------------------------------------ */ .demo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px var(--pad); background: var(--c-notice-bg, #FCF0DA); color: var(--c-notice-ink, #6B4A16); border-bottom: 1px solid var(--c-notice-line, #E8CE9C); font-size: 12px; line-height: 1.5; } .demo-bar__tag { flex: none; background: var(--c-notice-ink, #6B4A16); color: var(--c-notice-bg, #FCF0DA); font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 3px 7px; border-radius: 2px; } @media (min-width: 600px) { .demo-bar { justify-content: center; font-size: 13px; } } /* --- 5. ヘッダー ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--c-bg, #FBF8F3); /* color-mix 非対応ブラウザ向けフォールバック */ background: color-mix(in srgb, var(--c-bg, #FBF8F3) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line, #E2D9CB); } .site-header__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 56px; padding-block: 6px; } /* 店名は折り返さない（折り返すとヘッダーが2段になり、モバイルで縦幅を奪うため）*/ .brand { flex: 0 0 auto; text-decoration: none; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; min-height: 44px; /* タップ領域 */ } .brand__name { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--c-ink-strong, #1C1815); letter-spacing: .04em; white-space: nowrap; } .brand__sub { font-size: 10.5px; color: var(--c-muted, #5E564C); letter-spacing: .06em; white-space: nowrap; } .brand__demo { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .12em; background: var(--c-notice-ink, #6B4A16); color: var(--c-notice-bg, #FCF0DA); padding: 3px 7px; border-radius: 2px; } .site-nav { position: relative; margin-left: auto; min-width: 0; } /* 横スクロールできることを示す右端のフェード */ .site-nav::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22px; pointer-events: none; background: linear-gradient(to right, rgba(251, 248, 243, 0), var(--c-bg, #FBF8F3)); } .site-nav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .site-nav__list::-webkit-scrollbar { display: none; } .site-nav__list a { display: flex; align-items: center; white-space: nowrap; padding: 8px 6px; min-height: 44px; font-size: 13px; text-decoration: none; color: var(--c-muted, #5E564C); border-radius: var(--radius); } /* 狭い画面では「ご予約」をナビから外す。 予約導線は常時表示の下部固定CTA（.mcta）が担当するため重複を避ける。 display:none なのでタブ順・読み上げからも外れる。 */ @media (max-width: 759px) { .site-nav__sm-hide { display: none; } } .site-nav__list a:hover { color: var(--c-primary, #26555C); background: var(--c-surface-alt, #F3EDE3); } @media (min-width: 600px) { .site-header__inner { min-height: 64px; } .brand__name { font-size: 19px; } .brand__sub { font-size: 11.5px; } } @media (min-width: 760px) { .site-nav::after { display: none; } .site-nav__list a { font-size: 14px; padding: 8px 12px; } } /* --- 6. 汎用パーツ -------------------------------------------------------- */ .section { padding-block: 48px; } .section--tint { background: var(--c-surface-alt, #F3EDE3); } [id] { scroll-margin-top: 72px; } .section__head { margin-bottom: 28px; } .section__title { font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.45; letter-spacing: .05em; color: var(--c-ink-strong, #1C1815); position: relative; padding-bottom: 12px; } .section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--c-primary, #26555C); } .section__title--light { color: #fff; } .section__title--light::after { background: rgba(255,255,255,.6); } .section__lead { margin-top: 12px; color: var(--c-muted, #5E564C); font-size: 14px; } @media (min-width: 900px) { .section { padding-block: 76px; } .section__head { margin-bottom: 36px; } .section__title { font-size: 28px; } .section__lead { font-size: 15px; } } .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; padding: 10px 22px; border: 1px solid transparent; border-radius: var(--radius); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .btn__sub { font-size: 11px; font-weight: 400; opacity: .85; letter-spacing: .02em; } .btn--accent { background: var(--c-accent, #A8471F); color: #fff; } .btn--accent:hover { background: var(--c-accent-dark, #8A3915); } .btn--ghost { background: transparent; color: var(--c-primary, #26555C); border-color: var(--c-primary, #26555C); } .btn--ghost:hover { background: var(--c-primary, #26555C); color: #fff; } .btn--light { background: #fff; color: var(--c-primary-dark, #1B4046); } .btn--light:hover { background: var(--c-surface-alt, #F3EDE3); } .btn--lg { min-height: 58px; font-size: 16px; padding-inline: 30px; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .btn-row .btn { flex: 1 1 auto; min-width: 150px; } .btn-row--center { justify-content: center; } @media (min-width: 600px) { .btn-row .btn { flex: 0 1 auto; } } .panel { background: var(--c-surface, #fff); border: 1px solid var(--c-line, #E2D9CB); border-radius: var(--radius-lg); padding: 20px; } .panel__title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; letter-spacing: .04em; color: var(--c-ink-strong, #1C1815); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--c-line, #E2D9CB); } .panel__note { margin-top: 12px; font-size: 12.5px; color: var(--c-muted, #5E564C); line-height: 1.7; } .panel__note--top { margin-top: 0; margin-bottom: 8px; } .grid2 { display: grid; gap: 14px; } @media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 18px; } } .notes { margin-top: 20px; font-size: 12.5px; color: var(--c-muted, #5E564C); line-height: 1.8; } .notes li { padding-left: 1.1em; text-indent: -1.1em; } .notes li::before { content: "※ "; } .notes--single { padding-left: 1.1em; text-indent: -1.1em; } .notes--single::before { content: "※ "; } .dl { display: grid; } .dl__row { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--c-line, #E2D9CB); font-size: 14px; } .dl__row:last-child { border-bottom: 0; } .dl dt { color: var(--c-muted, #5E564C); font-size: 13px; } .dl dd { font-weight: 500; } .steps { counter-reset: s; display: grid; gap: 10px; } .steps li { counter-increment: s; position: relative; padding-left: 30px; font-size: 14px; line-height: 1.7; } .steps li::before { content: counter(s); position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--c-primary, #26555C); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ticks { display: grid; gap: 9px; } .ticks li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.7; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent, #A8471F); } .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chips__item { font-size: 12.5px; padding: 5px 12px; background: var(--c-surface-alt, #F3EDE3); border: 1px solid var(--c-line, #E2D9CB); border-radius: 999px; color: var(--c-ink, #2B2622); } .section--tint .chips__item { background: var(--c-bg, #FBF8F3); } /* --- 7. 写真 / 写真差し替え枠 --------------------------------------------- */ .photo { width: 100%; border-radius: var(--radius); object-fit: cover; background: var(--c-surface-alt, #F3EDE3); } .photo--slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--c-line, #E2D9CB); color: var(--c-muted, #5E564C); background: repeating-linear-gradient(135deg, rgba(43,38,34,.022) 0 7px, rgba(43,38,34,0) 7px 14px), linear-gradient(165deg, #F6F0E5 0%, #EADFCC 100%); } .photo__icon { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .42; } .photo__label { font-size: 11px; letter-spacing: .1em; opacity: .8; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; } /* --- 8. ヒーロー ---------------------------------------------------------- */ .hero { padding-block: 32px 40px; } .hero__inner { display: grid; gap: 26px; } .hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--c-accent, #A8471F); padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; margin-bottom: 16px; } .hero__title { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1.42; letter-spacing: .03em; color: var(--c-ink-strong, #1C1815); } .hero__lead { margin-top: 16px; font-size: 14.5px; color: var(--c-muted, #5E564C); } .facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border: 1px solid var(--c-line, #E2D9CB); border-radius: var(--radius-lg); background: var(--c-surface, #fff); overflow: hidden; } .facts__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 13px 6px; text-align: center; border-right: 1px solid var(--c-line, #E2D9CB); } .facts__item:last-child { border-right: 0; } .facts__label { font-size: 10.5px; color: var(--c-muted, #5E564C); letter-spacing: .04em; } .facts__value { font-family: var(--font-serif); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-primary, #26555C); } @media (min-width: 900px) { .hero { padding-block: 56px 68px; } .hero__inner { grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .hero__title { font-size: 40px; } .hero__lead { font-size: 16px; } .facts__value { font-size: 17px; } .facts__label { font-size: 11.5px; } .hero__figure { order: 2; } } /* --- 9. カード共通 -------------------------------------------------------- */ .cards { display: grid; gap: 16px; } .card { background: var(--c-surface, #fff); border: 1px solid var(--c-line, #E2D9CB); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } /* --- 10. コース ----------------------------------------------------------- */ .course__media { position: relative; } .course__media .photo { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; } .course__badge { position: absolute; top: 10px; left: 10px; background: var(--c-accent, #A8471F); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 11px; border-radius: 2px; } .course__body { padding: 18px 18px 20px; } .course__name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--c-ink-strong, #1C1815); } .course__reading { font-size: 12px; font-weight: 400; color: var(--c-muted, #5E564C); letter-spacing: 0; } .course__summary { margin-top: 4px; font-size: 13px; color: var(--c-muted, #5E564C); } .course__price { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line, #E2D9CB); color: var(--c-primary, #26555C); } .course__yen { font-size: 17px; font-weight: 600; } .course__num { font-family: var(--font-serif); font-size: 32px; font-weight: 600; line-height: 1.1; } .course__note { font-size: 11.5px; color: var(--c-muted, #5E564C); margin-left: 4px; } .specs { margin-top: 12px; display: grid; gap: 7px; } .specs__item { display: grid; grid-template-columns: 5.2em 1fr; gap: 8px; font-size: 13.5px; align-items: baseline; } .specs__k { font-size: 11px; color: var(--c-muted, #5E564C); text-align: center; background: var(--c-surface-alt, #F3EDE3); border-radius: 2px; padding: 2px 0; } .specs__v { font-weight: 500; } .course__menu { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--c-line, #E2D9CB); font-size: 12.5px; line-height: 1.75; color: var(--c-muted, #5E564C); } .panel--drink { margin-top: 22px; } @media (min-width: 560px) and (max-width: 959px) { .course { display: grid; grid-template-columns: 40% 1fr; align-items: stretch; } .course__media { height: 100%; } .course__media .photo { height: 100%; aspect-ratio: auto !important; min-height: 100%; } } @media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } } /* --- 11. 人数別 ----------------------------------------------------------- */ .cap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cap__item { background: var(--c-surface, #fff); border: 1px solid var(--c-line, #E2D9CB); border-top: 3px solid var(--c-primary, #26555C); border-radius: var(--radius-lg); padding: 16px 14px; text-align: center; } .cap__count { font-family: var(--font-serif); font-size: 27px; font-weight: 600; line-height: 1.2; color: var(--c-primary, #26555C); letter-spacing: .01em; } .cap__unit { font-size: 12px; margin-left: 2px; } .cap__seat { margin-top: 6px; font-size: 14px; font-weight: 600; } .cap__note { margin-top: 3px; font-size: 11.5px; color: var(--c-muted, #5E564C); line-height: 1.6; } @media (min-width: 720px) { .cap { grid-template-columns: repeat(4, 1fr); gap: 16px; } .cap__count { font-size: 30px; } } /* --- 12. お席 ------------------------------------------------------------- */ .cards--3 { gap: 14px; } .space .photo { border-radius: 0; border: 0; border-bottom: 1px solid var(--c-line, #E2D9CB); } .space__body { padding: 15px 16px 18px; } .space__name { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: var(--c-ink-strong, #1C1815); } .space__detail { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--c-primary, #26555C); background: var(--c-surface-alt, #F3EDE3); padding: 2px 9px; border-radius: 999px; } .section--tint .space__detail { background: var(--c-bg, #FBF8F3); } .space__note { margin-top: 7px; font-size: 13px; color: var(--c-muted, #5E564C); line-height: 1.75; } @media (min-width: 640px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .cards--3 { gap: 20px; } } /* --- 13. CTA セクション ---------------------------------------------------- */ .cta-section { background: var(--c-primary, #26555C); color: #fff; } .cta-section__inner { text-align: center; } .cta-section .section__title { display: inline-block; padding-bottom: 14px; } .cta-section .section__title::after { left: 50%; transform: translateX(-50%); } .cta-section__lead { margin-top: 14px; font-size: 14.5px; color: rgba(255,255,255,.9); } .cta-section__demo { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.82); } .cta-section :focus-visible { outline-color: #fff; } /* --- 14. アクセス --------------------------------------------------------- */ .access__warn { display: inline-block; font-size: 12px; font-weight: 600; background: var(--c-notice-bg, #FCF0DA); color: var(--c-notice-ink, #6B4A16); border: 1px solid var(--c-notice-line, #E8CE9C); padding: 5px 12px; border-radius: var(--radius); margin-bottom: 14px; } .access__addr { font-family: var(--font-serif); font-size: 17px; line-height: 1.7; letter-spacing: .03em; } .access__station { margin-top: 8px; font-size: 13.5px; color: var(--c-muted, #5E564C); } .access__tel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-line, #E2D9CB); font-size: 15px; font-weight: 600; } .access__tel-note { display: block; font-size: 11.5px; font-weight: 400; color: var(--c-muted, #5E564C); } /* --- 15. フッター --------------------------------------------------------- */ .site-footer { background: var(--c-ink-strong, #1C1815); color: rgba(255,255,255,.78); padding-block: 30px 34px; font-size: 12.5px; line-height: 1.9; } .site-footer__name { font-family: var(--font-serif); font-size: 17px; color: #fff; letter-spacing: .06em; margin-bottom: 8px; } .site-footer__latin { font-size: 10.5px; letter-spacing: .2em; margin-left: 10px; opacity: .6; } .site-footer__copy { margin-top: 14px; font-size: 11px; opacity: .6; } .site-footer :focus-visible { outline-color: #fff; } /* --- 16. モバイル固定CTA -------------------------------------------------- */ .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--c-bg, #FBF8F3); /* color-mix 非対応ブラウザ向けフォールバック */ background: color-mix(in srgb, var(--c-bg, #FBF8F3) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--c-line, #E2D9CB); } .mcta__btn { flex: 1 1 0; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: pointer; } .mcta__btn--phone { background: var(--c-surface, #fff); color: var(--c-primary-dark, #1B4046); border-color: var(--c-primary, #26555C); } .mcta__btn--web { background: var(--c-accent, #A8471F); color: #fff; } @media (min-width: 900px) { .mcta { display: none; } } /* --- 17. デモお知らせダイアログ ------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(28,24,21,.62); } .modal__box { position: relative; margin: auto; width: min(100% - 28px, 460px); max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--c-surface, #fff); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: 0 18px 50px rgba(28,24,21,.28); } .modal__title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--c-ink-strong, #1C1815); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-line, #E2D9CB); } .modal__text { font-size: 13.5px; line-height: 1.85; color: var(--c-ink, #2B2622); } .modal__text + .modal__text { margin-top: 11px; } .modal__close { width: 100%; margin-top: 20px; } body.is-modal-open { overflow: hidden; } /* --- 18. モーション配慮 --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --- 19. 印刷 ------------------------------------------------------------- */ @media print { .site-header, .mcta, .modal, .skip-link { display: none !important; } body { padding-bottom: 0; background: #fff; } .card, .panel { box-shadow: none; } }