:root{ --bg: #f6f2ea; --panel: rgba(255,255,255,.75); --text: #2f2f2f; --muted: #6b6b6b; --line: rgba(0,0,0,.10); --accent: #7a5c3a; --accent2: #caa36a; --radius: 18px; } *{ box-sizing: border-box; } html,body{ height: 100%; } body{ margin: 0; font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','游明朝','Yu Mincho','ＭＳＰ明朝','MS PMincho',serif; color: var(--text); background: var(--bg); } .container{ width: min(980px, calc(100% - 32px)); margin: 0 auto; } /* ===== Header / Base ===== */ .site-header{ padding: 56px 0 22px; } .eyebrow{ margin:0 0 6px; letter-spacing:.14em; color:var(--muted); font-size:12px; } .title{ margin:0; font-size:clamp(28px,3.5vw,40px); letter-spacing:.03em; } .subtitle{ margin:10px 0 0; color:var(--muted); font-size:14px; } .section{ margin:22px 0 38px; } .section-title{ margin:0 0 14px; font-size:18px; letter-spacing:.04em; } .cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:0 10px 28px rgba(0,0,0,.06); backdrop-filter: blur(6px); } .card.accent{ border-color:rgba(202,163,106,.55); box-shadow:0 10px 28px rgba(122,92,58,.08); } .card-top{ display:flex; gap:10px; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.08); } .menu-title{ margin:0; font-size:16px; letter-spacing:.02em; } .menu-time{ margin:0; color:var(--muted); font-size:13px; } .price-row{ display:flex; align-items:baseline; gap:8px; margin-top:12px; } .price{ margin:0; font-weight:800; font-size:clamp(28px,3vw,34px); letter-spacing:.02em; } .tax{ margin:0; color:var(--muted); font-size:12px; } .note{ margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.6; } .small{ margin:0; color:var(--muted); font-size:12px; line-height:1.7; } /* ===== Footer ===== */ .site-footer{ padding:26px 0 40px; border-top:1px solid rgba(0,0,0,.08); } .copyright{ margin:0; color:var(--muted); font-size:12px; } @media (max-width:720px){ .site-header{ padding-top:44px; } .cards{ grid-template-columns:1fr; } } /* ========================= PC Menu ========================= */ .pc-menu{ position:fixed; top:24px; right:40px; z-index:900; } .pc-menu ul{ display:flex; gap:28px; list-style:none; } .pc-menu a{ font-size:14px; letter-spacing:.15em; text-decoration:none; color:#fff; /* 通常は白 */ opacity:.85; transition:opacity .3s; } .pc-menu a:hover{ opacity:1; } .pc-menu a.current{ opacity:1; text-decoration:none; } /* ========================= Hamburger ========================= */ .hamburger{ position:fixed; top:20px; right:20px; width:28px; height:22px; display:none; flex-direction:column; justify-content:space-between; z-index:1001; cursor:pointer; } .hamburger span{ height:2px; background:#4a4a4a; display:block; } /* ========================= SP Menu ========================= */ .sp-menu{ position:fixed; inset:0; background:rgba(90,110,80,.95); /* 通常は抹茶 */ display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:.4s; z-index:1000; } .sp-menu.active{ opacity:1; pointer-events:auto; } .sp-menu ul{ list-style:none; text-align:center; } .sp-menu li{ margin:20px 0; } .sp-menu a{ font-size:20px; letter-spacing:.2em; text-decoration:none; color:#fff; /* 通常は白 */ } .sp-menu a.current{ text-decoration:none; } /* ========================= Responsive ========================= */ @media (max-width:768px){ .pc-menu{ display:none; } .hamburger{ display:flex; } } /* ================================================= price.html 専用（） ================================================= */ /* PC時：メニュー文字を黒に */ .page-price .pc-menu a{ color:#2f2f2f; opacity:.9; } /* フッター（priceだけ少し和モダンにするなら） */ .page-price .site-footer .copyright{ color:#f6f2ea; opacity:.9; } /* price時：SPメニュー背景をフッター色に寄せる */ .page-price .sp-menu{ background:rgba(122,92,58,.92); } /* price時：SPメニュー文字は基本は白 */ .page-price .sp-menu a{ color:#f6f2ea; } /* ================================================= ★要望の核心★ SP × price.html のときだけメニュー文字を黒に ================================================= */ @media (max-width:768px){ .page-price .sp-menu a{ color:#2f2f2f; /* 黒 */ } .page-price .hamburger span{ background:#2f2f2f; /* 三本線も黒 */ } .page-price .sp-menu.active a{ color:#fff !important; } .page-price .hamburger.active span{ background:#fff !important; } } /* 注意事項 */ .subtitle-note{ font-size: 13px; color: #6f4a4a; margin-top: 6px; line-height: 1.6; } @media (max-width: 768px){ .m-title{ font-size:16px; line-height:1.4; } .m-title .sub-line{ display:block; /* ← 強制的に2行目へ */ margin-top:4px; font-size:14px; color:#6f6560; /* 少し薄く */ } } @media (max-width: 768px){ /* タイトル(左) と時間(右) を綺麗に配置 */ .card-top{ display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 10px; } .menu-title{ margin: 0; line-height: 1.35; font-size: 16px; word-break: break-word; /* 変なはみ出し防止 */ } /* +頭皮マッサージは必ず2行目 */ .menu-title .sub-line{ display: block; margin-top: 4px; font-size: 15px; opacity: 0.85; } /* 時間は右上で固定（折り返さない） */ .menu-time{ margin: 0; white-space: nowrap; font-size: 13px; opacity: 0.75; align-self: start; } /* 価格部分も見やすく */ .price-row{ margin-top: 12px; display: flex; align-items: baseline; gap: 10px; } } @media (max-width: 768px){ .menu-time{ line-height: 1.3; } /* （うち〜）を必ず2行目へ */ .menu-time .time-sub{ display: block; /* ← 強制改行 */ margin-top: 2px; font-size: 12px; color: #777; } } @media (max-width: 768px){ /* 上段を2列に */ .card-top{ display: grid; grid-template-columns: 1fr auto; /* 左：タイトル / 右：時間 */ align-items: start; gap: 6px 10px; } /* 時間を右に固定 */ .menu-time{ text-align: right; /* ★右寄せ */ margin: 0; font-size: 14px; color: #555; white-space: nowrap; } /* （うち〜）は2行目 */ .menu-time .time-sub{ display: block; text-align: right; margin-top: 2px; font-size: 12px; color: #888; } }