/* ================================================================ SALON THEME — v1.0.0 テーマプリセット CSS変数 & サロン用コンポーネント 使い方: のように data-theme 属性を切り替えるだけで全体の配色が変わる ================================================================ */ /* ================================================================ THEME 1: Dark × Gold (default) ================================================================ */ [data-theme="dark-gold"], :root { --bg:#0e0e12; --bg2:#141419; --sf:#1a1a22; --sf2:#22222e; --bd:#2a2a38; --tx:#e8e6e1; --tx2:#b0aea6; --dim:#6e6c68; --primary:#c8a96e; --primary2:#a88c50; --primary-glow:rgba(200,169,110,.12); --accent:#e8c87a; --cta-bg:linear-gradient(135deg,#c8a96e,#a88c50); --cta-text:#0e0e12; --badge-area-bg:rgba(91,156,246,.1); --badge-area-text:#5b9cf6; --badge-area2-bg:rgba(240,71,112,.1); --badge-area2-text:#f04770; --hero-grad:linear-gradient(135deg,#0e0e12,#1a1520 50%,#0e0e12); --hero-glow:rgba(200,169,110,.06); --line-bg:#06C755; --full-color:#e94560; --cat-info:#e94560; --cat-event:#f0a030; --cat-staff:#4a90d9; --overlay-bg:rgba(14,14,18,.6); --header-bg:rgba(14,14,18,.95); /* font families */ --font-display:'Cormorant Garamond',Georgia,serif; --font-heading:'Outfit','Noto Sans JP',sans-serif; --font-body:'Noto Sans JP',sans-serif; } /* ================================================================ THEME 2: Pink × Luxury ================================================================ */ [data-theme="pink-luxury"] { --bg:#1a0a14; --bg2:#1e0e18; --sf:#261420; --sf2:#2e1a28; --bd:#3e2836; --tx:#f0e6ea; --tx2:#c8b0bc; --dim:#8a6878; --primary:#e8789c; --primary2:#d45a80; --primary-glow:rgba(232,120,156,.12); --accent:#f5a0be; --cta-bg:linear-gradient(135deg,#e8789c,#d45a80); --cta-text:#fff; --badge-area-bg:rgba(232,120,156,.12); --badge-area-text:#f5a0be; --badge-area2-bg:rgba(180,140,220,.12); --badge-area2-text:#c8a0e8; --hero-grad:linear-gradient(135deg,#1a0a14,#2a1028 50%,#1a0a14); --hero-glow:rgba(232,120,156,.08); --line-bg:#06C755; --full-color:#e94560; --cat-info:#e8789c; --cat-event:#f0a030; --cat-staff:#9b7ec8; --overlay-bg:rgba(26,10,20,.6); --header-bg:rgba(26,10,20,.95); } /* ================================================================ THEME 3: Gold × White ================================================================ */ [data-theme="gold-white"] { --bg:#faf8f5; --bg2:#f2efe8; --sf:#fff; --sf2:#f7f4ee; --bd:#e0d8cc; --tx:#2c2820; --tx2:#5a5448; --dim:#9c9488; --primary:#b8952e; --primary2:#9a7a20; --primary-glow:rgba(184,149,46,.08); --accent:#c8a53e; --cta-bg:linear-gradient(135deg,#b8952e,#9a7a20); --cta-text:#fff; --badge-area-bg:rgba(184,149,46,.1); --badge-area-text:#9a7a20; --badge-area2-bg:rgba(180,80,80,.08); --badge-area2-text:#b85050; --hero-grad:linear-gradient(135deg,#f5f0e8,#e8e0d0 50%,#f5f0e8); --hero-glow:rgba(184,149,46,.06); --line-bg:#06C755; --full-color:#d44; --cat-info:#d44; --cat-event:#e09020; --cat-staff:#4a8ab8; --overlay-bg:rgba(200,200,200,.5); --header-bg:rgba(255,255,255,.95); } /* ================================================================ THEME 4: Pink × Orange Gradient ================================================================ */ [data-theme="pink-orange"] { --bg:#18080e; --bg2:#1e0c14; --sf:#28121c; --sf2:#301828; --bd:#442238; --tx:#f5e8ee; --tx2:#d0b0c0; --dim:#906878; --primary:#f06848; --primary2:#e84878; --primary-glow:rgba(240,104,72,.12); --accent:#ff8868; --cta-bg:linear-gradient(135deg,#f06848,#e84878); --cta-text:#fff; --badge-area-bg:rgba(240,104,72,.12); --badge-area-text:#ff8868; --badge-area2-bg:rgba(232,72,120,.12); --badge-area2-text:#f06898; --hero-grad:linear-gradient(135deg,#18080e,#281018 50%,#18080e); --hero-glow:rgba(240,104,72,.08); --line-bg:#06C755; --full-color:#e8e040; --cat-info:#f06848; --cat-event:#e84878; --cat-staff:#6898d0; --overlay-bg:rgba(24,8,14,.6); --header-bg:rgba(24,8,14,.95); } /* ================================================================ THEME 5: Mono Black & White ================================================================ */ [data-theme="mono-bw"] { --bg:#fafafa; --bg2:#f0f0f0; --sf:#fff; --sf2:#f5f5f5; --bd:#e0e0e0; --tx:#1a1a1a; --tx2:#555; --dim:#999; --primary:#1a1a1a; --primary2:#333; --primary-glow:rgba(0,0,0,.04); --accent:#333; --cta-bg:linear-gradient(135deg,#1a1a1a,#333); --cta-text:#fff; --badge-area-bg:rgba(0,0,0,.06); --badge-area-text:#555; --badge-area2-bg:rgba(0,0,0,.06); --badge-area2-text:#555; --hero-grad:linear-gradient(135deg,#f8f8f8,#eaeaea 50%,#f8f8f8); --hero-glow:rgba(0,0,0,.02); --line-bg:#06C755; --full-color:#cc3333; --cat-info:#cc3333; --cat-event:#e09020; --cat-staff:#4488aa; --overlay-bg:rgba(200,200,200,.5); --header-bg:rgba(255,255,255,.95); } /* ================================================================ THEME 6: Dark × White ================================================================ */ [data-theme="dark-white"] { --bg:#111114; --bg2:#161618; --sf:#1c1c20; --sf2:#222228; --bd:#333340; --tx:#f0f0f0; --tx2:#b0b0b8; --dim:#68687a; --primary:#e8e8ec; --primary2:#c8c8d0; --primary-glow:rgba(232,232,236,.06); --accent:#f0f0f5; --cta-bg:linear-gradient(135deg,#e8e8ec,#c8c8d0); --cta-text:#111; --badge-area-bg:rgba(255,255,255,.08); --badge-area-text:#d0d0d8; --badge-area2-bg:rgba(255,255,255,.08); --badge-area2-text:#d0d0d8; --hero-grad:linear-gradient(135deg,#111114,#1a1a20 50%,#111114); --hero-glow:rgba(255,255,255,.03); --line-bg:#06C755; --full-color:#e94560; --cat-info:#e94560; --cat-event:#f0a030; --cat-staff:#5090c0; --overlay-bg:rgba(17,17,20,.6); --header-bg:rgba(17,17,20,.95); } /* ================================================================ THEME 7: Green × Blue Gradient ================================================================ */ [data-theme="green-blue"] { --bg:#0a1218; --bg2:#0e1620; --sf:#142028; --sf2:#1a2830; --bd:#243848; --tx:#e0f0f0; --tx2:#98c8c8; --dim:#588088; --primary:#38c8a8; --primary2:#2890b8; --primary-glow:rgba(56,200,168,.1); --accent:#50e0c0; --cta-bg:linear-gradient(135deg,#38c8a8,#2890b8); --cta-text:#fff; --badge-area-bg:rgba(56,200,168,.12); --badge-area-text:#50e0c0; --badge-area2-bg:rgba(40,144,184,.12); --badge-area2-text:#58b8e8; --hero-grad:linear-gradient(135deg,#0a1218,#0e1828 50%,#0a1218); --hero-glow:rgba(56,200,168,.06); --line-bg:#06C755; --full-color:#e94560; --cat-info:#e94560; --cat-event:#f0a030; --cat-staff:#38c8a8; --overlay-bg:rgba(10,18,24,.6); --header-bg:rgba(10,18,24,.95); } /* ================================================================ SALON SITE — COMPONENT STYLES 全コンポーネントは CSS変数を参照するため、 data-theme を切り替えるだけで自動的にカラーが変わる ================================================================ */ /* --- Hero --- */ .salon-hero { min-height: 92vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--hero-grad); transition: background .4s; } .salon-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, var(--hero-glow), transparent 60%); } .salon-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(transparent, var(--bg)); } .salon-hero-inner { text-align: center; position: relative; z-index: 1; } .salon-hero-en { font-family: var(--font-display); font-size: clamp(40px, 8vw, 72px); font-weight: 300; letter-spacing: 12px; color: var(--accent); line-height: 1.1; } .salon-hero-logo { max-width: 280px; max-height: 120px; width: auto; height: auto; margin-bottom: 20px; object-fit: contain; } @media (min-width: 769px) { .salon-hero-logo { max-width: 360px; max-height: 160px; } } .salon-hero-sub { font-size: 13px; letter-spacing: 6px; color: var(--tx2); margin-top: 16px; font-weight: 300; } .salon-hero-desc { max-width: 440px; margin: 28px auto 0; font-size: 13px; color: var(--dim); line-height: 2; } .salon-hero-cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* --- Buttons --- */ .salon-btn-primary { background: var(--cta-bg); color: var(--cta-text); padding: 14px 36px; border-radius: 4px; font-size: 13px; font-weight: 500; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: opacity .2s; } .salon-btn-primary:hover { opacity: .85; } .salon-btn-ghost { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 14px 36px; border-radius: 4px; font-size: 13px; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: .2s; } .salon-btn-ghost:hover { background: var(--primary-glow); } .salon-btn-tel { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 8px 18px; border-radius: 4px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 1px; } .salon-btn-line { background: var(--line-bg); border: none; color: #fff; padding: 8px 18px; border-radius: 4px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } /* --- Section --- */ .salon-section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; } .salon-section-bg { background: var(--bg2); transition: background .4s; } .salon-section-label { font-family: var(--font-display); font-size: 36px; font-weight: 300; color: var(--accent); letter-spacing: 4px; text-align: center; } /* h2リセット — OMAKASEのh2装飾を打ち消し、サロンスタイルを適用 */ h2.salon-section-sublabel, h2.salon-page-header-ja { font-size: 12px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--dim) !important; letter-spacing: 3px !important; text-align: center !important; margin: 4px 0 0 !important; padding: 0 !important; background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; position: static !important; z-index: auto !important; width: auto !important; max-width: none !important; box-shadow: none !important; } h2.salon-section-sublabel::before, h2.salon-section-sublabel::after, h2.salon-page-header-ja::before, h2.salon-page-header-ja::after { content: none !important; display: none !important; } .salon-section-sublabel { font-size: 12px; color: var(--dim); letter-spacing: 3px; text-align: center; margin-top: 4px; font-weight: 400; } .salon-section-divider { width: 40px; height: 1px; background: var(--primary); margin: 20px auto 40px; } /* --- Page Header --- */ .salon-page-header { padding: 48px 40px 40px; text-align: center; background: linear-gradient(180deg, var(--bg2), var(--bg)); border-bottom: 1px solid var(--bd); transition: background .4s; } .salon-page-header-en { font-family: var(--font-display); font-size: 42px; font-weight: 300; color: var(--accent); letter-spacing: 6px; } .salon-page-header-ja { font-size: 12px; color: var(--dim); letter-spacing: 3px; margin-top: 4px; font-weight: 400; } /* --- Area Tabs --- */ .salon-area-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; } .salon-area-btn { padding: 7px 22px; border: 1px solid var(--bd); border-radius: 24px; font-size: 12px; color: var(--dim); cursor: pointer; background: transparent; font-family: var(--font-body); transition: all .2s; } .salon-area-btn.active { background: var(--primary); color: var(--cta-text); border-color: var(--primary); font-weight: 500; } /* --- Therapist Cards --- */ .salon-therapist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .salon-therapist-card { display: block; background: var(--sf); border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); transition: border-color .3s, transform .3s; } .salon-therapist-card:hover { border-color: var(--primary); transform: translateY(-3px); } .salon-card-photo { aspect-ratio: 3/4; background: var(--sf2); position: relative; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 28px; overflow: hidden; } .salon-card-photo img { width: 100%; height: 100%; object-fit: cover; } .salon-badge-working { position: absolute; top: 8px; left: 8px; background: var(--primary); color: var(--cta-text); font-size: 10px; font-weight: 600; padding: 2px 10px; border-radius: 3px; letter-spacing: 1px; } .salon-badge-full { position: absolute; top: 8px; left: 8px; background: var(--full-color); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 10px; border-radius: 3px; } .salon-badge-off { position: absolute; inset: 0; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--dim); } .salon-card-info { padding: 12px 14px; } .salon-card-name { font-size: 14px; font-weight: 500; } .salon-card-spec { font-size: 11px; color: var(--dim); margin-top: 2px; } .salon-card-time { font-size: 11px; color: var(--primary); margin-top: 4px; } .salon-card-time.off { color: var(--dim); } .salon-area-badge { font-size: 10px; background: var(--badge-area-bg); color: var(--badge-area-text); padding: 1px 8px; border-radius: 3px; display: inline-block; margin-top: 4px; } .salon-area-badge.area2 { background: var(--badge-area2-bg); color: var(--badge-area2-text); } /* --- Schedule Tabs (day tabs) --- */ .salon-schedule-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .salon-schedule-tab { padding: 8px 16px; border-radius: 6px; font-size: 12px; background: var(--sf); border: 1px solid var(--bd); color: var(--dim); text-align: center; cursor: pointer; min-width: 80px; transition: all .2s; } .salon-schedule-tab.active { background: var(--primary); color: var(--cta-text); border-color: var(--primary); font-weight: 600; } .salon-schedule-tab .today-mark { font-size: 9px; color: var(--primary); display: block; } .salon-schedule-tab.active .today-mark { color: var(--cta-text); } /* --- News --- */ .salon-news-list { max-width: 700px; margin: 0 auto; } .salon-news-item { padding: 16px 0; border-bottom: 1px solid var(--bd); display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .salon-news-date { font-size: 12px; color: var(--dim); white-space: nowrap; min-width: 80px; } .salon-news-cat { font-size: 10px; padding: 2px 10px; border-radius: 3px; color: #fff; font-weight: 600; white-space: nowrap; } .salon-news-cat.info { background: var(--cat-info); } .salon-news-cat.event { background: var(--cat-event); } .salon-news-cat.staff { background: var(--cat-staff); } .salon-news-title { font-size: 13px; color: var(--tx2); flex: 1; } .salon-news-toggle { color: var(--dim); font-size: 10px; margin-left: auto; } .salon-news-body { padding: 12px 0 12px 92px; font-size: 12px; color: var(--dim); line-height: 1.9; border-bottom: 1px solid var(--bd); display: none; } .salon-news-body.open { display: block; } /* --- Access --- */ .salon-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .salon-access-map { aspect-ratio: 4/3; background: var(--sf2); border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bd); color: var(--dim); font-size: 14px; overflow: hidden; } .salon-access-map iframe { width: 100%; height: 100%; border: 0; } .salon-access-table { width: 100%; font-size: 13px; border-collapse: collapse; } .salon-access-table tr { border-bottom: 1px solid var(--bd); } .salon-access-table th { padding: 12px 16px 12px 0; font-weight: 500; color: var(--primary); font-size: 12px; white-space: nowrap; width: 100px; vertical-align: top; letter-spacing: 1px; } .salon-access-table td { padding: 12px 0; color: var(--tx2); } /* --- CTA --- */ .salon-cta { background: var(--sf); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); text-align: center; padding: 60px 40px; transition: background .4s; } .salon-cta h3 { font-family: var(--font-display); font-size: 28px; color: var(--accent); font-weight: 300; letter-spacing: 4px; margin-bottom: 8px; } .salon-cta p { color: var(--dim); font-size: 13px; margin-bottom: 28px; } .salon-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .salon-cta-tel { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 16px 40px; border-radius: 4px; font-size: 20px; font-weight: 500; letter-spacing: 3px; display: flex; align-items: center; gap: 10px; } .salon-cta-tel small { font-size: 11px; font-weight: 400; display: block; } .salon-cta-line { background: var(--line-bg); color: #fff; padding: 16px 40px; border-radius: 4px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .salon-cta-web { background: var(--cta-bg); color: var(--cta-text); padding: 16px 40px; border-radius: 4px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; letter-spacing: 1px; } /* --- Price --- */ .salon-price-table { max-width: 640px; margin: 0 auto; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; } .salon-price-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--bd); } .salon-price-row:last-child { border-bottom: none; } .salon-price-row:nth-child(odd) { background: var(--sf); } .salon-price-row:nth-child(even) { background: var(--sf2); } .salon-price-course { font-size: 14px; font-weight: 500; } .salon-price-course small { font-size: 11px; color: var(--dim); display: block; margin-top: 2px; } .salon-price-amount { font-family: var(--font-display); font-size: 22px; color: var(--primary); letter-spacing: 2px; } .salon-price-amount small { font-size: 12px; color: var(--dim); font-family: var(--font-body); } /* --- Steps --- */ .salon-steps { max-width: 640px; margin: 0 auto; } .salon-step { display: flex; gap: 20px; margin-bottom: 32px; } .salon-step-num { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: 20px; color: var(--primary); } .salon-step-content h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .salon-step-content p { font-size: 13px; color: var(--tx2); line-height: 1.8; } /* --- Recruit --- */ .salon-recruit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 700px; margin: 0 auto; } .salon-recruit-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; padding: 24px; } .salon-recruit-card h4 { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 8px; } .salon-recruit-card p { font-size: 12px; color: var(--tx2); line-height: 1.8; } /* --- Form --- */ .salon-form { max-width: 560px; margin: 0 auto; } .salon-form-group { margin-bottom: 20px; } .salon-form-group label { font-size: 12px; font-weight: 500; color: var(--tx2); display: block; margin-bottom: 6px; letter-spacing: 1px; } .salon-form-group .req { color: var(--full-color); font-size: 10px; margin-left: 4px; } .salon-form-input { width: 100%; padding: 12px 16px; background: var(--sf); border: 1px solid var(--bd); border-radius: 6px; color: var(--tx); font-size: 13px; font-family: var(--font-body); transition: border-color .2s; } .salon-form-input:focus { border-color: var(--primary); outline: none; } .salon-form-textarea { min-height: 120px; resize: vertical; } .salon-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* --- Detail Page --- */ .salon-detail-layout { display: grid; grid-template-columns: 360px 1fr; gap: 40px; } .salon-detail-photo { aspect-ratio: 3/4; background: var(--sf2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 48px; border: 1px solid var(--bd); overflow: hidden; } .salon-detail-photo img { width: 100%; height: 100%; object-fit: cover; } .salon-detail-thumbs { display: flex; gap: 8px; margin-top: 12px; } .salon-detail-thumb { width: 56px; height: 56px; border-radius: 6px; background: var(--sf2); border: 2px solid transparent; overflow: hidden; cursor: pointer; } .salon-detail-thumb.active { border-color: var(--primary); } .salon-detail-thumb img { width: 100%; height: 100%; object-fit: cover; } .salon-detail-name { font-size: 24px; font-weight: 700; margin-bottom: 16px; } .salon-detail-table { width: 100%; font-size: 13px; border-collapse: collapse; } .salon-detail-table tr { border-bottom: 1px solid var(--bd); } .salon-detail-table th { padding: 10px 16px 10px 0; font-weight: 500; color: var(--primary); width: 100px; font-size: 12px; letter-spacing: 1px; } .salon-detail-table td { padding: 10px 0; color: var(--tx2); } .salon-detail-profile { margin-top: 20px; padding: 16px; background: var(--sf); border-radius: 6px; border: 1px solid var(--bd); font-size: 13px; color: var(--tx2); line-height: 2; } .salon-detail-comment { margin-top: 16px; padding: 16px; background: var(--primary-glow); border-radius: 6px; border: 1px solid rgba(200,169,110,.2); } .salon-detail-comment h4 { font-size: 13px; color: var(--primary); margin-bottom: 6px; } .salon-detail-comment p { font-size: 13px; color: var(--tx2); line-height: 1.9; } /* --- Mini Schedule (detail page) --- */ .salon-mini-schedule { display: flex; gap: 6px; margin-top: 20px; } .salon-mini-day { flex: 1; text-align: center; padding: 10px 4px; border-radius: 6px; background: var(--sf); border: 1px solid var(--bd); font-size: 11px; } .salon-mini-day .date { color: var(--dim); font-size: 10px; } .salon-mini-day .time { color: var(--tx2); margin-top: 4px; font-size: 10px; } .salon-mini-day .area { color: var(--primary); font-size: 9px; margin-top: 2px; } .salon-mini-day.today { border-color: var(--primary); background: var(--primary-glow); } .salon-mini-day.off { opacity: .4; } /* --- SP Footer Bar --- */ .salon-sp-footer-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: none; /* SP only */ background: var(--bg); border-top: 1px solid var(--bd); } .salon-sp-footer-bar a { flex: 1; text-align: center; padding: 10px 4px; font-size: 10px; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 3px; border-right: 1px solid var(--bd); } .salon-sp-footer-bar a:last-child { border-right: none; } .salon-sp-footer-bar a i { font-size: 16px; } .salon-sp-footer-bar a.tel { color: var(--primary); } .salon-sp-footer-bar a.line { color: #06C755; } .salon-sp-footer-bar a.web { color: var(--accent); } /* --- Concept Text --- */ .salon-concept-text { max-width: 600px; margin: 0 auto; text-align: center; font-size: 14px; color: var(--tx2); line-height: 2.2; font-weight: 300; } /* --- Note Box --- */ .salon-note-box { max-width: 640px; margin: 40px auto 0; padding: 20px 24px; background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; } .salon-note-box h4 { font-size: 13px; color: var(--primary); margin-bottom: 8px; } .salon-note-box p { font-size: 12px; color: var(--dim); line-height: 1.9; } /* ================================================================ OMAKASE LAYOUT OVERRIDES — サロンページ全幅化 OMAKASEのコンテナが持つ左右余白・max-width を無効化 ================================================================ */ /* サロン専用ラッパー — コンテナ外に出すため全幅 */ .salon-front-wrap, .salon-page-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; background: var(--bg); } .salon-front #body_wrap, .salon-page #body_wrap { background: var(--bg); } .salon-front .l-mainContent, .salon-front .l-mainContent__inner, .salon-front .l-content, .salon-front .l-article, .salon-page .l-mainContent, .salon-page .l-mainContent__inner, .salon-page .l-content, .salon-page .l-article { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } /* サイドバー非表示 */ .salon-front .l-sidebar, .salon-page .l-sidebar { display: none !important; } /* フッター背景もテーマに合わせる */ .salon-front #footer, .salon-page #footer { background: var(--bg2); color: var(--dim); border-top: 1px solid var(--bd); } /* OMAKASEのボディ背景色もテーマに合わせる */ .salon-front, .salon-page { background: var(--bg) !important; } /* ヘッダー背景をテーマに合わせる */ .salon-front .l-header, .salon-front #fix_header, .salon-front .l-fixHeader, .salon-page .l-header, .salon-page #fix_header, .salon-page .l-fixHeader { background: var(--header-bg) !important; border-bottom: 1px solid var(--bd); } /* ヘッダー内テキスト色 */ .salon-front .l-header *, .salon-front .l-fixHeader *, .salon-page .l-header *, .salon-page .l-fixHeader * { color: var(--tx2); } .salon-front .l-header .c-headLogo *, .salon-front .l-fixHeader .l-fixHeader__logo *, .salon-page .l-header .c-headLogo *, .salon-page .l-fixHeader .l-fixHeader__logo * { color: var(--accent); } /* OMAKASEの投稿リスト・ウィジェット非表示（フロントページ） */ .salon-front .p-homeContent, .salon-front .w-frontTop, .salon-front .w-frontBottom { display: none !important; } /* パンくず・ページタイトル（OMAKASE標準）を非表示 */ .salon-front .p-breadcrumb, .salon-page .p-breadcrumb, .salon-front .l-topTitleArea, .salon-page .l-topTitleArea, .salon-page .c-pageHead, .salon-page .parts--page_head { display: none !important; } /* ================================================================ SALON STANDALONE HEADER / FOOTER / DRAWER OMAKASEの header/footer を使わない独立スタイル ================================================================ */ .salon-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid var(--bd); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .salon-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; } .salon-header-logo { text-decoration: none; } .salon-header-logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 300; letter-spacing: 3px; color: var(--accent); } .salon-header-logo-img { height: 36px; width: auto; } .salon-header-nav { display: none; } @media (min-width: 769px) { .salon-header-nav { display: block; } .salon-header-hamburger { display: none; } } .salon-header-menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .salon-header-menu li a { color: var(--tx2); text-decoration: none; font-size: 12px; letter-spacing: 1px; padding: 8px 12px; border-radius: 4px; transition: background .2s, color .2s; } .salon-header-menu li a:hover, .salon-header-menu li.current-menu-item a { color: var(--accent); background: rgba(255,255,255,.05); } /* ハンバーガーボタン */ .salon-header-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .salon-header-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--tx2); transition: transform .3s, opacity .3s; } .salon-menu-open .salon-header-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .salon-menu-open .salon-header-hamburger span:nth-child(2) { opacity: 0; } .salon-menu-open .salon-header-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ドロワーメニュー */ .salon-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 98; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .salon-menu-open .salon-drawer-overlay { opacity: 1; visibility: visible; } .salon-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--bg2); z-index: 99; padding: 80px 24px 40px; transform: translateX(100%); transition: transform .3s; overflow-y: auto; } .salon-menu-open .salon-drawer { transform: translateX(0); } .salon-drawer-menu { list-style: none; margin: 0; padding: 0; } .salon-drawer-menu li a { display: block; color: var(--tx); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--bd); font-size: 14px; letter-spacing: 1px; } .salon-drawer-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .salon-drawer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--primary); border-radius: 4px; color: var(--primary); text-decoration: none; font-size: 13px; } .salon-drawer-btn.-line { background: #06c755; color: #fff; border-color: #06c755; } /* メインコンテンツ */ .salon-main { min-height: 60vh; } /* フッター */ .salon-footer { background: var(--bg2); border-top: 1px solid var(--bd); text-align: center; padding: 60px 20px 40px; } .salon-footer-logo { font-family: var(--font-display); font-size: 20px; color: var(--accent); letter-spacing: 4px; margin-bottom: 16px; } .salon-footer-address { font-size: 12px; color: var(--dim); line-height: 1.8; margin-bottom: 8px; } .salon-footer-phone a { color: var(--tx2); text-decoration: none; font-size: 14px; letter-spacing: 2px; } .salon-footer-copy { font-size: 10px; color: var(--dim); margin-top: 24px; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 768px) { .salon-section { padding: 60px 20px; } .salon-therapist-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .salon-detail-layout { grid-template-columns: 1fr; } .salon-access-grid { grid-template-columns: 1fr; } .salon-mini-schedule { flex-wrap: wrap; } .salon-recruit-grid { grid-template-columns: 1fr; } .salon-form-row { grid-template-columns: 1fr; } .salon-cta-tel { font-size: 16px; padding: 14px 28px; } .salon-sp-footer-bar { display: flex; } body { padding-bottom: 52px; } /* SP footer bar height */ }