/* ============================================================= weir-common.css — Weir 共通スタイル FOUC制御 / CSS変数デフォルト / Header Type A & B / Footer / Responsive ============================================================= */ /* ===== FOUC Control ===== */ body:not(.weir-ready) { opacity: 0; } body.weir-ready { opacity: 1; transition: opacity .3s ease; } /* ===== CSS Variable Defaults (neutral fallback) ===== */ :root { --brand-primary: #666; --brand-primary-dark: #444; --brand-primary-light: #f5f5f5; --brand-header-bg: #FFFFFF; --brand-header-text: #333333; --brand-font: 'Noto Sans JP', sans-serif; --brand-font-color: #333333; --text2: #666; --text3: #999; --bg: #fff; --bg2: #F8F8F8; --border: #E0E0E0; --shadow: 0 2px 8px rgba(0,0,0,.1); --gold: #C9A227; } /* ===== v2: #weir-header is display:contents so .header + .brand-nav-strip are body-scoped and each can sticky at its own top: value (D-389 P5.1 pattern). */ #weir-header{display:contents} /* ===== Header Type A (Brand Pages) — Tier 1 (charcoal bar) ===== */ .header{background:var(--brand-header-bg);position:sticky;top:0;z-index:1000} .header-main{max-width:1100px;margin:0 auto;display:flex;align-items:center;height:56px;padding:0 20px;gap:0} .header-logo{margin-right:32px;flex-shrink:0} .header-logo a{display:flex;align-items:center} .header-logo-mark{width:44px;height:44px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;margin-right:10px;flex-shrink:0;overflow:hidden} .header-logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%} .header-logo-text{color:var(--brand-header-text);font-size:20px;font-weight:700;font-family:'Noto Serif JP',serif;letter-spacing:.05em;white-space:nowrap} .header-logo-text img{height:32px;object-fit:contain} .lang-select-wrap{margin-left:auto;position:relative;flex-shrink:0} .lang-select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:var(--brand-header-text);font-size:11px;padding:4px 22px 4px 8px;border-radius:3px;cursor:pointer;font-family:var(--brand-font);outline:none} .lang-select:hover{background:rgba(255,255,255,.25)} .lang-select option{background:#333;color:#fff} .lang-select-arrow{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--brand-header-text);font-size:9px} /* v2: drawer / hamburger / mobile-nav 完全廃止 (旧 D-366 設計から D-389 2-tier に移行) */ .header-hamburger{display:none !important} .mobile-nav{display:none !important} /* ===== v2 Tier 2: brand-nav-strip (sticky 二段目、D-389 P5.1 互換) ===== */ .brand-nav-strip{position:sticky;top:56px;z-index:999;background:var(--brand-header-bg);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;font-family:var(--brand-font)} .brand-nav-strip::-webkit-scrollbar{display:none} .brand-nav-strip > a{flex:0 0 auto;font-size:13px;font-weight:500;color:var(--brand-header-text);text-decoration:none;padding:7px 14px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s;line-height:1.4;opacity:.85} .brand-nav-strip > a:hover{background:rgba(255,255,255,.12);opacity:1} .brand-nav-strip > a.active{background:rgba(201,162,39,.22);color:#F1D682;font-weight:700;opacity:1} /* ===== Header Type B (Order Pages) ===== */ .header--order{position:fixed;top:0;left:0;right:0;z-index:200} .header--order .header-main{justify-content:space-between} .header--order .header-back{background:none;border:none;color:var(--brand-header-text);font-size:22px;padding:12px;margin-left:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;line-height:1} .header--order .header-center{position:absolute;left:50%;transform:translateX(-50%)} .header--order .header-actions{display:flex;align-items:center;gap:8px} .header--order .header-cart{position:relative;background:none;border:none;color:var(--brand-header-text);font-size:20px;cursor:pointer;padding:8px} .header--order .header-cart-badge{position:absolute;top:2px;right:2px;background:white;color:var(--brand-header-bg);font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center} /* D-366: Type A header (renderHeaderBrand) signin button — Weir branding D-205/D-209 (white bg + Red Hat Display). Placed BEFORE .header--order rule so equal-specificity later rule wins for Type B. */ .header .header-signin{background:#fff;border:1px solid #fff;color:#000;font-size:11px;padding:6px 12px;border-radius:3px;cursor:pointer;font-family:'Red Hat Display','Noto Sans JP',sans-serif;font-weight:600;white-space:nowrap;margin-right:8px} .header .header-signin:hover{background:#f0f0f0} .header .header-signin.is-avatar{width:32px;height:32px;padding:0;border-radius:50%;background:#000;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;border:1px solid #000;font-family:'Red Hat Display','Noto Sans JP',sans-serif;margin-right:8px} .header .header-signin.is-avatar:hover{opacity:.85} .header--order .header-signin{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:var(--brand-header-text);font-size:11px;padding:6px 12px;border-radius:3px;cursor:pointer;font-family:var(--brand-font);white-space:nowrap} .header--order .header-signin:hover{background:rgba(255,255,255,.3)} /* D-276: signed-in avatar variant (initials) */ .header--order .header-signin.is-avatar{width:32px;height:32px;padding:0;border-radius:50%;background:var(--brand-header-text);color:var(--brand-header-bg);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;border-color:transparent} .header--order .header-signin.is-avatar:hover{opacity:.85;background:var(--brand-header-text)} .weir-order-body{padding-top:56px} /* ===== v2 Sticky Footer (Issue 1 再実装): v1 で `body:has(#weir-footer)` を使ったがブラウザ実装/タイミングで 不安定だったため、JS で `` に `weir-has-footer` class を付与する方式に変更. renderFooter() 実行時に WeirCommon.markBodyHasFooter() が呼ばれる. */ html,body{margin:0;padding:0} body.weir-has-footer{min-height:100vh;display:flex;flex-direction:column} body.weir-has-footer > *{flex-shrink:0} body.weir-has-footer > #weir-footer{margin-top:auto} /* ===== Footer (CC-σ Option D Issue 2: Brand HP + MO 完全統一 SSoT) ===== CC-ο Phase 2 (Heritage hoist) と tsumugi-common.css L366-407 (MO Tsumugi override) を本 block に統合、tsumugi 側は同 commit で削除済。 全 10 page (heritage 7 + MO 3) で同一 footer 描画: - background : var(--brand-footer-bg) — applyBrandCSS が brand.footer_bg から set - text color : var(--brand-footer-text) — applyBrandCSS が brand.footer_text_color から set - divider : 1px solid var(--brand-primary) — column-title 下 (Tsumugi 由来) - layout : flex column gap 28px — brand 部 ↓ cols 部 (Tsumugi 由来の良い layout) Heritage Brand 部 (.footer-seal / .footer-brand-row / .footer-brand-en) は CC-ο Phase 1 構造を維持、seal border は currentColor で brand 配色追従。 D-420 CC-η fallback chain: footer_bg / footer_text_color NULL の brand は --hr-ink-dark / --hr-paper の Heritage sumi default で表示。 Pilot 後 P1 (本 CC scope 外): Heritage / Tsumugi の token 体系 (paper / ink / gold / font) 完全統一 — Brand HP と MO の基本カラー / font 統合。 */ .weir-footer { background: var(--brand-footer-bg, var(--hr-ink-dark, #2A1F1A)); color: var(--brand-footer-text, var(--hr-paper, #FAF7F2)); font: 13px/1.7 'Noto Serif JP', serif; } .weir-footer a { color: inherit; text-decoration: none; } .weir-footer .footer-main { max-width: 1100px; margin: 0 auto; /* 上: フッター上端〜ブランド名の文字 30px→39px、下: 最後のリンクの文字〜下の線 24.4px→31.9px (いずれも +30%・2026-09-21 Taisei 指示) */ padding: 33px 20px 25.5px; display: flex; flex-direction: column; gap: 18px; } .weir-footer .footer-brand { display: flex; flex-direction: column; gap: 10px; } .weir-footer .footer-brand-row { display: flex; align-items: center; gap: 10px; } .weir-footer .footer-seal { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; font: 700 18px/1 'Noto Serif JP', serif; border-radius: 2px; background: transparent; opacity: .85; } .weir-footer .footer-logo-img { height: 36px; width: auto; max-width: 36px; max-height: 36px; object-fit: contain; display: block; } .weir-footer .footer-brand-name { font: 700 18px/1.4 'Noto Serif JP', serif; letter-spacing: .08em; } .weir-footer .footer-brand-en { margin: 0; font: 11px/1 'Noto Sans JP', sans-serif; letter-spacing: .3em; opacity: .6; } .weir-footer .footer-brand-desc { margin: 0; font-size: 12.5px; line-height: 1.7; opacity: .72; } /* 標準フッター (2026-09-21 Taisei 指示): お店について・ご利用案内・SNS の 3 区分。 各区分のリンクは 1 行 3 項目で折り返す (例: メニュー／お店を探す／会員特典 → 改行 → ニュース一覧／お問い合わせ)。 スマホは区分を縦に積み、PC (1024px 以上) は 3 区分を横に並べて、高さを旧版の半分以下にする。 */ .weir-footer .footer-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .weir-footer .footer-sec { min-width: 0; } .weir-footer .footer-nav-title { font: 700 12px/1 'Noto Serif JP', serif; letter-spacing: .06em; border-bottom: 1px solid var(--brand-primary, var(--hr-red, #B8472D)); padding-bottom: 6px; margin-bottom: 6px; } .weir-footer .footer-nav-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } .weir-footer .footer-nav-list a { display: block; padding: 3px 0; font-size: 12px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s, color .2s; } /* マウスを乗せた時は文字色を変えず下線を出す (ブランドのメイン色とフッター背景が近いと文字が消えるため・2026-09-21 Taisei 決裁 A) */ .weir-footer .footer-nav-list a:hover { opacity: 1; text-decoration: underline; } .weir-footer .footer-bottom { border-top: 1px solid rgba(128, 128, 128, .2); padding: 12px 20px max(16px, env(safe-area-inset-bottom, 16px)); } .weir-footer .footer-bottom-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; } .weir-footer .footer-copyright { opacity: .55; letter-spacing: .04em; } .weir-footer .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 16px; } .weir-footer .footer-bottom-links a { opacity: .7; letter-spacing: .04em; transition: opacity .2s; } .weir-footer .footer-bottom-links a:hover { opacity: 1; text-decoration: underline; } .weir-footer .powered { font-size: 10px; letter-spacing: .2em; opacity: .45; white-space: nowrap; } /* renderLogoMark fallback (brand に seal_character も logo_url も無い場合の emoji/img mark) */ .weir-footer .footer-brand-row .header-logo-mark { width: auto; height: auto; min-width: 32px; background: transparent; border-radius: 2px; font: 700 18px/1 'Noto Serif JP', serif; line-height: 1; padding: 0; } .weir-footer .footer-brand-row .header-logo-mark img { width: 36px; height: 36px; border-radius: 2px; object-fit: cover; } /* ===== v2 Right-bottom FAB (Issue 3 再実装、Pilot 5/22): v1 の円形 + hover-only tooltip では mobile UX で label が読めないため、 pill shape + 常時 inline label に変更. Icon + label を 1 ピル内に収納. */ .weir-fab-container{position:fixed;right:16px;bottom:16px;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:500;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;pointer-events:none} .weir-fab{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;min-height:44px;border-radius:999px;background:var(--brand-primary,#2D2D2D);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.22);text-decoration:none;font-family:var(--brand-font);transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease;opacity:.95;line-height:1} .weir-fab:hover,.weir-fab:focus{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:1;outline:none} .weir-fab:focus-visible{outline:2px solid #fff;outline-offset:2px} .weir-fab__icon{font-size:18px;line-height:1;flex-shrink:0} .weir-fab__label{font-size:13px;font-weight:600;white-space:nowrap;line-height:1} @media(prefers-reduced-motion:reduce){ .weir-fab{transition:none} .weir-fab:hover,.weir-fab:focus{transform:none} } @media(max-width:380px){ .weir-fab{padding:10px 14px;gap:6px} .weir-fab__icon{font-size:16px} .weir-fab__label{font-size:12px} } /* CC-σ Option D Issue 2: 旧 .weir-footer .footer-nav-title / .footer-nav-list / .footer-bottom / .footer-bottom-inner / .footer-copyright / .footer-bottom-links / .powered の Phase 2 重複 inline rules を削除。新 SSoT block (本 file L99-216) で 統合済、Option D で brand-primary divider + Tsumugi flex column layout + brand color inheritance を継承。 */ /* ===== Responsive ===== CC-ο Phase 2: .weir-footer は mobile-first 1-col base、@media (min-width:1024px) で 2-col (brand : cols) + cols 内 3-col へ展開。旧 @media 900 / @media 600 の footer-main grid 切替・footer-bottom-inner column 切替は base mobile-first 設計 で不要化、header (lang-select / header-signin) rules のみ残置。 */ @media(max-width:900px){ /* v2: header-nav は完全廃止 (drawer を持たない 2-tier 化)、 hamburger は global で display:none !important なのでここでも非表示維持 */ .lang-select-wrap{margin-left:0} } /* D-366 Phase 2 + Phase 3 (HF-1.5): light header compaction (480-600px range). Phase 3 relaxed selector from :not(.header--order) to .header so Type B (renderHeaderOrder, weir-order*.html) inherits the same signin compaction. */ @media(max-width:600px){ .header .header-signin{padding:5px 10px;margin-right:6px} .lang-select{padding:4px 16px 4px 6px;font-size:10px} } /* 標準フッター PC (1024px 以上): ブランド名の下に区分 (お店について・SNS) を横並び。各区分は 1 行 3 項目。 safe-area-inset-bottom も desktop padding に取り込み iPad / sidecar 想定。 */ @media(min-width:1024px){ .weir-footer .footer-main{padding:33px 56px 25.5px;gap:16px} .weir-footer .footer-seal{width:36px;height:36px;font-size:20px} .weir-footer .footer-brand-name{font-size:20px;letter-spacing:.1em} .weir-footer .footer-cols{grid-template-columns:repeat(3, max-content);gap:0 64px} .weir-footer .footer-nav-list{grid-template-columns:repeat(3, max-content);gap:0 28px} /* 「お店について」は PC だけ 1 行 5 項目 (2026-09-21 Taisei 指示)。スマホは幅が足りず文字が切れるため 1 行 3 項目のまま */ .weir-footer .footer-sec--about .footer-nav-list{grid-template-columns:repeat(5, max-content)} .weir-footer .footer-bottom{padding:12px 56px max(16px,env(safe-area-inset-bottom,16px))} } /* D-366 Phase 2 + Phase 3 (HF-1.5) + HF-1.6: iPhone header overflow fix for both Type A and Type B. Phase 2 (signed-out signin display:none, signed-in avatar visible) was Type A-only via :not(.header--order). Phase 3 relaxed to .header so Type B order pages get the same treatment, eliminating the absolute-centered logo / right-actions overlap on iPhone 393px. Type B safety net: .header-center max-width caps the logo width even if a long brand name slips past the .header-logo-text 120px cap; .header-actions gap tightens to 6px to give the cart icon and avatar more breathing room. Hamburger drawer addition to Type B is deferred to Plan B (post Pilot 5/22, P1). HF-1.6 (2026-05-08): The Type-B order pages each declare `input,select,textarea{font-size:16px!important}` (iOS Safari input zoom-on-focus guard) in their head