/* ======================================== HOSMEDI COMMON v2 共通：header / footer / FAB / fade-in ======================================== */ /* ===== NEW HEADER (hd-common) ===== */ :root { --hdc-bg: #c9a45c; --hdc-neon2: #c9a45c; --hdc-line: #06c755; --hdc-txt-soft: #b9b3c7; --hdc-txt-mute: #7c7690; --hdc-line-soft: rgba(255,255,255,.08); } .hd-common { position: sticky; top: 0; z-index: 60; background: rgba(8,7,13,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hdc-line-soft); } .hd-common__in { max-width: 1160px; margin: 0 auto; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .hdc-logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; } .hdc-logo__en { font-family: 'Oswald', 'Impact', sans-serif; font-style: italic; font-weight: 600; font-size: 22px; letter-spacing: .14em; background: linear-gradient(100deg, #c9a45c 0%, #bfa063 45%, #c9a45c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hdc-logo__jp { font-family: 'Noto Sans JP', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .42em; color: var(--hdc-txt-mute); margin-top: 4px; } .hdc-nav { display: flex; align-items: center; gap: 24px; } .hdc-nav a { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--hdc-txt-soft); text-decoration: none; transition: color .15s; } .hdc-nav a:hover { color: #fff; } /* 2026-09-09 CTAの色は「行き先」で決める。 もともと .hdc-cta は「LINEで相談」専用だったのでLINE緑で固定していたが、 求人ヘッダーを廃止して法務ページ5枚の中身が「初回予約」に変わったため、 緑のまま＝押す前にLINEが開くと読める状態になっていた（実測）。 → 既定はロゼ。LINEへ行くときだけ緑に戻す（下の [href] 指定）。 */ .hdc-cta { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(120deg,#c05c82,#a54468); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 9px 16px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 20px rgba(192,92,130,.28); transition: transform .2s; flex-shrink: 0; } .hdc-cta[href*="lin.ee"], .hdc-cta[href*="line.me"] { background: #06c755; box-shadow: 0 6px 20px rgba(6,199,85,.3); } .hdc-cta:hover { transform: translateY(-1px); } .hdc-cta small { display: block; font-size: 9px; font-weight: 500; opacity: .85; margin-top: 1px; letter-spacing: 0; } .hdc-actions { display: flex; align-items: center; gap: 16px; } .hdc-bizlink { font-family: 'Noto Sans JP', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--hdc-txt-mute); text-decoration: none; white-space: nowrap; transition: color .15s; } .hdc-bizlink:hover { color: var(--hdc-txt-soft); } @media (max-width: 860px) { .hdc-nav a { display: none; } } @media (max-width: 980px) { .hdc-bizlink { display: none; } } @media (max-width: 420px) { .hdc-cta small { display: none; } } /* masthead は全ページで非表示 */ section.masthead { display: none !important; } .site-header-v2 { background: rgba(251, 248, 241, 0.92); border-bottom: 0.5px solid rgba(13, 13, 13, 0.18); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin: 0; padding: 0; } .site-header-v2__inner { max-width: 1160px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .brand-mini { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-style: italic; font-size: 18px; letter-spacing: 0.2em; color: #0d0d0d; text-decoration: none; font-weight: 500; } .nav-mini { display: flex; gap: 22px; } .nav-mini a { font-family: 'Shippori Mincho', serif; font-size: 13px; letter-spacing: 0.08em; color: #0d0d0d; text-decoration: none; transition: color .15s ease; } .nav-mini a:hover { color: #a8261c; } .nav-mini a.is-active { color: #a8261c; } @media (max-width: 540px) { .nav-mini { gap: 14px; } .nav-mini a { font-size: 11.5px; } } .site-footer-v2 { background: #fbf8f1; border-top: 6px double #1a1a1a; padding: 56px 22px 24px; margin: 0; } .footer-grid-v2 { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 0.5px solid rgba(13, 13, 13, 0.18); } @media (min-width: 720px) { .footer-grid-v2 { grid-template-columns: 1.2fr 1fr 1fr; } } .footer-col-v2 h4 { font-family: 'Shippori Mincho', serif; font-size: 12px; letter-spacing: 0.3em; color: #0d0d0d; margin: 0 0 16px; font-weight: 700; } .footer-col-v2 ul { list-style: none; padding: 0; margin: 0; } .footer-col-v2 li { margin-bottom: 10px; } .footer-col-v2 a { font-family: 'Shippori Mincho', serif; font-size: 13px; color: #3a3530; text-decoration: none; transition: color .15s ease; } .footer-col-v2 a:hover { color: #a8261c; } .footer-brand-v2__name { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-style: italic; font-size: 22px; letter-spacing: 0.2em; color: #0d0d0d; margin-bottom: 8px; } .footer-brand-v2__desc { font-family: 'Shippori Mincho', serif; font-size: 12px; line-height: 1.9; color: #6b645c; max-width: 320px; } .footer-fine-v2 { max-width: 1160px; margin: 24px auto 0; text-align: center; font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-style: italic; font-size: 11px; letter-spacing: 2px; color: #6b645c; padding-top: 24px; } .fab-line { position: fixed; bottom: 18px; right: 18px; z-index: 100; display: inline-flex; align-items: center; gap: 10px; background: #06c755; color: #fff; padding: 12px 18px 12px 14px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 30px rgba(6, 199, 85, 0.3); transition: transform .25s ease; } .fab-line:hover { transform: translateY(-2px); } .fab-line__icon { width: 28px; height: 28px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #06c755; font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 13px; } .fab-line__text { font-family: 'Shippori Mincho', serif; font-size: 13px; letter-spacing: 0.08em; font-weight: 600; } @media (max-width: 720px) { .fab-line__text { display: none; } .fab-line { padding: 10px; } } .back-top-v2 { position: fixed; bottom: 18px; left: 18px; z-index: 99; width: 38px; height: 38px; border-radius: 50%; background: rgba(13, 13, 13, 0.7); color: #fbf8f1; display: none; align-items: center; justify-content: center; cursor: pointer; border: none; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; } .back-top-v2.is-visible { display: flex; } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .fade-in.is-visible { opacity: 1; transform: translateY(0); } /* LINE add modal */ .line-modal { border: none; padding: 0; max-width: 520px; width: 92%; background: #fbf8f1; color: #0d0d0d; border-radius: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } .line-modal::backdrop { background: rgba(13, 13, 13, 0.72); backdrop-filter: blur(4px); } .line-modal[open] { animation: lineModalIn 0.25s ease; } @keyframes lineModalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .line-modal__close { position: absolute; top: 12px; right: 14px; border: none; background: transparent; font-family: 'Cormorant Garamond', serif; font-size: 28px; cursor: pointer; color: #6b645c; line-height: 1; padding: 4px 10px; transition: color .15s; } .line-modal__close:hover { color: #a8261c; } .line-modal__inner { padding: 56px 30px 44px; text-align: center; } .line-modal__kicker { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; letter-spacing: 4px; color: #a8261c; margin-bottom: 14px; } .line-modal__kicker::before, .line-modal__kicker::after { content: "—"; margin: 0 10px; } .line-modal__title { font-family: 'Shippori Mincho', serif; font-size: 22px; font-weight: 700; letter-spacing: 0.22em; line-height: 1.55; margin-bottom: 20px; color: #0d0d0d; } .line-modal__title em { font-style: normal; color: #a8261c; } .line-modal__list { font-family: 'Shippori Mincho', serif; font-size: 13.5px; line-height: 2.1; color: #3a3530; max-width: 380px; margin: 0 auto 26px; text-align: left; list-style: none; padding: 0; } .line-modal__list li { padding-left: 22px; position: relative; } .line-modal__list li::before { content: "✓"; position: absolute; left: 0; color: #06c755; font-weight: 700; } .line-modal__body { font-family: 'Shippori Mincho', serif; font-size: 13px; line-height: 1.95; color: #6b645c; margin-bottom: 22px; } .line-modal__btn-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; } .line-modal__id { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 3px; color: #6b645c; } .line-modal__note { margin-top: 22px; font-family: 'Shippori Mincho', serif; font-size: 11.5px; line-height: 1.95; color: #6b645c; max-width: 360px; margin-left: auto; margin-right: auto; padding-top: 18px; border-top: 0.5px solid rgba(13, 13, 13, 0.18); } @media (max-width: 540px) { .line-modal__inner { padding: 48px 20px 36px; } .line-modal__title { font-size: 19px; } } /* hide old fab if exists on a page */ .consult-fab { display: none !important; } /* print: hide site chrome */ @media print { .site-header-v2, .site-footer-v2, .fab-line, .back-top-v2 { display: none !important; } } /* ===== dark theme override (HOST MEDIA / 2026-06) ===== */ .site-header-v2 { background: rgba(6,4,12,.92) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .site-header-v2 * { color: #f4f1f8 !important; } .site-footer-v2 { background: #0a0713 !important; border-top: 1px solid rgba(255,255,255,.1) !important; } .site-footer-v2, .site-footer-v2 * { color: #b9b3c7 !important; } .site-footer-v2 a:hover { color: #c9a45c !important; } .line-modal { background: #0c0816 !important; color: #f6f3fb !important; border: 1px solid rgba(255,255,255,.12) !important; } .line-modal * { color: #f6f3fb !important; } .line-modal__close { color: #b9b3c7 !important; } /* ===== token flip: light theme -> dark (sub-pages without article-v2) ===== */ :root { --paper-warm: #06040c !important; --paper-edge: #0c0816 !important; --ink-news: #f6f3fb !important; --ink-soft: #cdc7d8 !important; --ink-mute: #9a93ad !important; --rule-news: rgba(255,255,255,.22) !important; --rule-thin: rgba(255,255,255,.12) !important; --accent-red: #c9a45c !important; --accent-red-soft: #bfa063 !important; } /* ===== fix inverted dark-bands on sub-pages ===== */ .stats, .stance, .stat-strip, .line-cta--final, .line-section, .ed-note__inner, .ed-note, .shop-hero__media, .shop__media, .empty-banner, .empty-state { background: #0c0816 !important; } .stats, .stats *, .stance, .stance *, .stat-strip, .stat-strip *, .line-cta--final, .line-cta--final *, .line-section, .line-section *, .ed-note__inner, .ed-note__inner * { color: #ece7f4 !important; } /* ===== fix invisible-text panels / white cards / form fields on sub-pages ===== */ .role, .money__diagram, .pull-quote, .ed-note__inner, .ed-note { background: #0c0816 !important; border-color: rgba(255,255,255,.12) !important; } .role, .role *, .money__diagram, .money__diagram *, .pull-quote, .pull-quote *, .ed-note__inner, .ed-note__inner * { color: #ece7f4 !important; } .btn--accent { background: linear-gradient(100deg,#c9a45c,#c9a45c) !important; color: #fff !important; } .q__input, .q__select, .q__textarea, .modal__textarea, .q__field input, .q__field textarea { background: #0c0816 !important; color: #f6f3fb !important; border: 1px solid rgba(255,255,255,.18) !important; } .q__input::placeholder, .q__textarea::placeholder, .modal__textarea::placeholder { color: #7c7690 !important; } /* ===== submit buttons + B2B header (掲載のご案内/問い合わせ) ===== */ /* ヘッダーCTA(.hdc-cta)の色は44行目で行き先ごとに決めている（LINEなら緑・それ以外はロゼ）。ここに入れない */ .form__submit, .empty-banner__btn, button[type="submit"] { background: linear-gradient(100deg,#c9a45c,#c9a45c) !important; color: #fff !important; border: none !important; } .hdc-header { background: rgba(6,4,12,.92) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .hdc-header *, .hdc-logo__en, .hdc-logo__jp, .hdc-logo__name { color: #ece7f4 !important; } /* ===== remaining: badges/titles/pricing/emphasis ===== */ .shop-head__cat, .story-n__cat { background: rgba(201,164,92,.16) !important; border: 1px solid rgba(201,164,92,.32) !important; } .shop-head__cat, .shop-head__cat *, .story-n__cat, .story-n__cat * { color: #ece7f4 !important; } .brand-visual__title, .unit, em { color: #f6f3fb !important; } .offer-cell__value, .offer-cell__value * { color: #d8bd7e !important; } /* ===== final: list/store badges + opening notice ===== */ .shop__cat { background: rgba(201,164,92,.16) !important; border: 1px solid rgba(201,164,92,.3) !important; } .shop__cat, .shop__cat *, .shop__badge, .shop__badge * { color: #ece7f4 !important; } .opening-notice__title, .opening-notice__title * { color: #f6f3fb !important; } /* EDITOR'S PICK badge -> gold pill */ .shop-head__pick { background: linear-gradient(100deg,#e7c66b,#caa64a) !important; border: none !important; } .shop-head__pick, .shop-head__pick * { color: #1a1305 !important; } /* ===== legal pages (特商法 / プライバシーポリシー) ===== */ .legal, .legal__sub, .legal__intro, .legal__intro *, .legal__table, .legal__table td, .legal p, .legal li, .legal b, .legal strong, .legal dd, .legal dt, .note { color: #cdc7d8 !important; } .legal__title, .legal__head .legal__title { color: #f6f3fb !important; } .legal__kicker { color: #c9a45c !important; } .legal__intro { background: #0c0816 !important; border-color: rgba(255,255,255,.1) !important; } .legal__table th { background: rgba(255,255,255,.05) !important; color: #f6f3fb !important; } .legal__table td, .legal__table th { border-color: rgba(255,255,255,.12) !important; } .legal a { color: #d8bd7e !important; } /* legacy .site-header (legal/info pages without article-v2) */ .site-header { background: rgba(6,4,12,.92) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .site-header__inner, .site-header__inner *, .site-header .brand, .site-header .brand * { color: #ece7f4 !important; } .site-footer { background: #0a0713 !important; border-top: 1px solid rgba(255,255,255,.1) !important; } .site-footer, .site-footer * { color: #b9b3c7 !important; } /* ===== safety net: force dark body on any sub-page (catches hardcoded light bg) ===== */ body { background-color: #06040c !important; } /* ===== mobile bottom tab bar (sub-pages, matches index) ===== */ .tabbar{display:none;} @media(max-width:768px){ .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(8,7,13,.94)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.14)!important;padding:7px 4px;padding-bottom:calc(7px + env(safe-area-inset-bottom));} .tabbar a{flex:1;display:flex!important;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#8a8399!important;font-size:10px;font-weight:600;letter-spacing:.02em;padding:4px 2px;} .tabbar a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;} .tabbar a span{color:inherit!important;} .tabbar a:active{color:#c9a45c!important;} .tabbar a.t-line, .tabbar a.t-line span{color:#06c755!important;} body{padding-bottom:66px!important;} .fab-line{display:none!important;} .back-top-v2{bottom:80px!important;} } /* タブ5個対応：折り返し防止・微縮小 */ .tabbar a{font-size:9.5px;letter-spacing:0;padding:4px 1px;} .tabbar a span{white-space:nowrap;} .tabbar a svg{width:21px;height:21px;} /* ヘッダーロゴ折り返し防止（モバイル） */ @media (max-width: 600px){ .hdc-logo__jp{font-size:9px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw;} .hdc-logo__en{font-size:19px;} } /* ============================================================ 2026-07-04 全サイト・トーン統一パッチ ダーク #06040c × ゴールド #c9a45c に全ページ統一 ============================================================ */ /* style.css（旧ライト紙面）の変数をダークへ反転。 プライバシー/特商法などで黒文字が黒背景に沈む問題の根治 */ :root{ --bg:#06040c !important; /* --paper は反転しない：ホスト_系記事の「紙面パネル」(明るい読書エリア)が使う */ --ink:#f6f3fb !important; --ink-sub:#cdc7d8 !important; --ink-mute:#9a93ad !important; --gold:#c9a45c !important; --gold-deep:#bfa063 !important; --gold-hi:#d8bd7e !important; --gold-soft:#8f7a4e !important; --rule:rgba(255,255,255,.14) !important; --rule-strong:rgba(255,255,255,.28) !important; } /* ホスト_系記事の topbar ヘッダー：モバイルで崩れる問題の修正 */ @media (max-width: 860px){ .topbar .topnav{ display:none !important; } .topbar a[href^="掲載"]{ display:none !important; } .topbar__in{ padding:11px 16px !important; gap:10px !important; } .brandlink b{ font-size:19px !important; } .brandlink span{ font-size:8px !important; letter-spacing:.16em !important; white-space:nowrap; } } /* 見出しの過剰 letter-spacing をモバイルで緩和（不格好な折返し対策） */ @media (max-width: 640px){ .masthead__title{ letter-spacing:.06em !important; } } /* 全角スペース入り見出しの折返しを行揃えして孤立文字を防ぐ */ .lead__title, .masthead__title, .offer-hero__title, .sec-head__jp, .sl-title{ text-wrap: balance; } /* 記事CTA見出し: テキストのスペース区切りを廃止し letter-spacing で字間を出す（コピペ・読み上げ対応） */ .line-cta__title{ letter-spacing: .18em; text-wrap: balance; } /* ============================================================ 女性客側の上書き（2026-08-01） common-v2.js が注入するヘッダー/フッター/タブバー/FABは黒×金＝求人側の配色。 店舗ページなど女性客側で使うと、クリーム地のページの上に夜の店の顔が乗ってしまうので、 body.hosmedi-guest が付いているときだけクリーム×ロゼに寄せる。 （付与は common-v2.js の __isGuest 判定） ============================================================ */ body.hosmedi-guest{ background-color:#faf7f3!important; color:#2a222b!important; --bg:#faf7f3!important; --ink:#2a222b!important; --ink-sub:#6d6270!important; --ink-mute:#9b8fa0!important; --gold:#a8842f!important; --gold-deep:#a54468!important; --gold-hi:#c9a45c!important; --gold-soft:#a8842f!important; --rule:#e7ded4!important; --rule-strong:rgba(42,34,43,.20)!important; --paper-warm:#faf7f3!important; --paper-edge:#fffdfa!important; --ink-news:#2a222b!important; --ink-soft:#6d6270!important; --rule-news:#e7ded4!important; --rule-thin:rgba(42,34,43,.10)!important; --accent-red:#a8842f!important; --accent-red-soft:#a54468!important; } body.hosmedi-guest .hd-common{ background:rgba(250,247,243,.92)!important; border-bottom:1px solid #e7ded4!important; } body.hosmedi-guest .hdc-logo__en{ background-image:linear-gradient(100deg,#c05c82 0%,#a54468 45%,#c05c82 100%)!important; -webkit-background-clip:text!important;background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } body.hosmedi-guest .hdc-logo__jp{color:#9b8fa0!important;} body.hosmedi-guest .hdc-nav a{color:#6d6270!important;} body.hosmedi-guest .hdc-nav a:hover{color:#a54468!important;} body.hosmedi-guest .hdc-bizlink{color:#9b8fa0!important;} body.hosmedi-guest .hdc-bizlink:hover{color:#a54468!important;} body.hosmedi-guest .hdc-cta{ background:linear-gradient(120deg,#c05c82,#a54468)!important;color:#fff!important; box-shadow:0 6px 20px rgba(192,92,130,.28)!important; } body.hosmedi-guest .hdc-cta[href*="lin.ee"], body.hosmedi-guest .hdc-cta[href*="line.me"]{ background:#06c755!important; box-shadow:0 6px 20px rgba(6,199,85,.3)!important; } /* LINEへの文字リンクも、予約導線のロゼと混同しないようLINE緑に統一 */ a[href*="lin.ee"], a[href*="line.me"] { color:#06c755!important; } a[href*="lin.ee"]:hover, a[href*="line.me"]:hover { color:#32d975!important; } body.hosmedi-guest .site-footer-v2{ background:#f2ece5!important;color:#2a222b!important; border-top:1px solid #e7ded4!important; } body.hosmedi-guest .site-footer-v2 a{color:#6d6270!important;} body.hosmedi-guest .site-footer-v2 a:hover{color:#a54468!important;} body.hosmedi-guest .footer-brand-v2__name{color:#a54468!important;} body.hosmedi-guest .footer-brand-v2__desc{color:#6d6270!important;} body.hosmedi-guest .footer-col-v2 h4{color:#a8842f!important;} body.hosmedi-guest .footer-fine-v2{color:#9b8fa0!important;border-top-color:#e7ded4!important;} body.hosmedi-guest .tabbar{ background:rgba(255,253,250,.96)!important; border-top:1px solid #e7ded4!important; } body.hosmedi-guest .tabbar a{color:#6d6270!important;} body.hosmedi-guest .tabbar a.t-line{color:#06c755!important;} body.hosmedi-guest .back-top-v2{ background:#fff!important;color:#a54468!important;border:1px solid #e7ded4!important; } /* ===== 店舗ページの暗パネル内の文字色（2026-08-22 修正）===== 店舗データ_*.html 249枚の