/* ホストポータル — 2つのサービスで色を分ける（オーナー指定 2026-09-09） ┌ 口コミ・ポータル（お客さま向け）… 参照：ホスホス host2.jp ＝白 × ピンク × 濃茶 └ 求人（ホストになりたい人向け）… 参照：夜キャリ／STAQING ＝白 × 紺 × 金＝画面の色でどちらのサービスにいるかが分かる。切替はの1か所。 ★出所（実測）ピンク側：2026-09-09 に https://host2.jp/css/{template,pc,clm/style-pc,cta/style-pc}.css を取得し 16進色を数えた（726件・104種）。#ffffff 132 / #cccccc 76 / #f37497 54 / #333333 46 / #2d2427 44 / #f8f8f8 25 / #666666 14 / #ffcc55 8 → 上位をそのまま採用。 ※淡いピンク（--brand-l / --brand-b）は元CSSに無いため #f37497 を白で薄めた派生値。紺側　：2026-09-09 に夜キャリ／STAQING の営業資料3枚の画素を集計（彩度0.35超のみ）。 3枚すべてで #1e5a82 が最頻（44.2% / 22.3% / 17.9%）・アクセント #d2960a。 ★借りたのは配色と骨格だけ。ロゴ・写真・文言は使っていない。 ★絵文字はUIに使わない（app/icons.php の自作SVGに統一）＝Appleの絵文字フォントはApple製品上でしか使えず、ストア提出物に写し込めないため */ :root{ /* 既定＝口コミ・ポータル（ホスホス実測のピンク） */ --brand:#f37497; --brand-d:#2d2427; --brand-l:#fdeef3; --brand-b:#f0c4d3; --accent:#ffcc55; --accent-l:#fff7e4; --accent-b:#efd9a6; --accent-ink:#8a6a10; --ink:#333333; --ink-2:#5a5054; --sub:#666666; --bg:#ffffff; --gray:#f8f8f8; --line:#cccccc; --ok:#1f7a4d; --ng:#c0392b; color-scheme:light; } /* 求人側＝夜キャリ／STAQING実測の紺。色の指定はここだけで切り替わる */ body[data-theme="jobs"]{ --brand:#1e5a82; --brand-d:#1e3246; --brand-l:#e8f0f6; --brand-b:#c5d9e8; --accent:#d2960a; --accent-l:#fdf4e0; --accent-b:#ecd9a8; --accent-ink:#8a6a10; --ink:#1a2430; --ink-2:#4a5867; --sub:#8894a2; --bg:#ffffff; --gray:#f4f6f8; --line:#dfe5eb; } *{box-sizing:border-box} html{overflow-x:hidden;-webkit-text-size-adjust:100%} body{margin:0;max-width:100vw;overflow-x:hidden;background:var(--gray);color:var(--ink); font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.65;padding-bottom:62px} a{color:inherit;text-decoration:none} main{max-width:960px;margin:0 auto;padding:12px 14px 24px} .ic{vertical-align:-3px;flex:none} .ic.empty{opacity:.28} .devbar{background:var(--brand-d);color:rgba(255,255,255,.72);font-size:11px;text-align:center;padding:5px 8px} /* ★サンプル（ダミー）を表示している間だけ赤くする。見落とさないための帯なので薄くしない */ .devbar.warn{background:var(--ng);color:#fff;font-weight:700} /* 店舗・運営としてログイン中の帯（お客様向けの画面に降りても管理画面へ戻れる） */ .staffbar{background:var(--ink);color:#fff;font-size:12px;display:flex;gap:10px;align-items:center; justify-content:center;flex-wrap:wrap;padding:6px 10px} .staffbar a{color:#fff;text-decoration:underline;font-weight:700} .devbar a{color:#fff;text-decoration:underline} /* ヘッダー＝濃紺のベタ帯（参照の骨格） */ .hd{display:flex;gap:10px;align-items:center;padding:11px 14px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:20} .hd .logo{font-weight:800;letter-spacing:.03em;font-size:16px;color:#fff} .hd .logo small{display:block;font-size:10px;color:rgba(255,255,255,.8);font-weight:400;letter-spacing:.04em} .hd .acct{margin-left:auto;font-size:12px;text-align:right;color:#fff} .hd .acct .pt{color:var(--accent-l);font-weight:800} /* 下部タブ */ .tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);z-index:30} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;font-size:10px;color:var(--sub)} .tabbar a.on{color:var(--brand)} .tabbar a.cta{color:#fff;background:var(--brand);margin:6px;border-radius:8px;font-weight:700} .tabbar .dot{position:absolute;transform:translate(12px,-6px);background:var(--accent);color:#fff;font-size:9px;border-radius:99px;padding:0 5px} /* 見出し */ h1{font-size:19px;margin:14px 0 6px;letter-spacing:.01em} .sec{display:flex;align-items:center;gap:8px;margin:20px 0 8px} .sec h2{font-size:14px;margin:0;font-weight:700;color:var(--ink-2);letter-spacing:.04em} .sec .more{margin-left:auto;font-size:12px;color:var(--brand);font-weight:700} .lead{color:var(--ink-2);font-size:13px;margin:0 0 12px} .small{font-size:12px;color:var(--sub);line-height:1.6} /* カード（参照＝白・角丸・薄枠・影は最小） */ .card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0} .closeup{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px; padding:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0} .closeup .lbl{font-size:11px;letter-spacing:.12em;color:var(--brand);font-weight:700} .closeup .nm{font-size:20px;font-weight:800;margin:2px 0;display:inline-block} .closeup .cp{font-size:13px;color:var(--ink-2)} .closeup .ph{width:76px;height:96px;border-radius:8px;background:var(--brand-l);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--brand)} /* 数値カウンタ（参照＝ラベル小・値大） */ .counter{display:flex;gap:8px;margin:12px 0} .counter>div{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center} .counter b{display:block;font-size:19px;color:var(--brand);line-height:1.3;font-variant-numeric:tabular-nums} .counter span{font-size:11px;color:var(--sub)} /* メニュー（線画アイコン＋短いラベル） */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0} .grid a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 4px;text-align:center; font-size:11px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px} .grid a .ic{color:var(--brand)} .grid a:active{background:var(--brand-l)} /* 行（一覧）— 情報を3段までに抑える */ .row{display:flex;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap} .row:last-child{border-bottom:0} .row .no{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--gray);color:var(--ink-2); font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} .row:nth-child(1) .no{background:var(--brand);color:#fff} .row:nth-child(2) .no,.row:nth-child(3) .no{background:var(--brand-l);color:var(--brand)} .row>div:not(.no):not(.sc){flex:1 1 55%;min-width:0} .row .nm{font-weight:700;overflow-wrap:anywhere} .row .meta{font-size:11.5px;color:var(--sub);overflow-wrap:anywhere} .row .sc{margin-left:auto;text-align:right;flex:0 1 auto;min-width:0} .sc b{color:var(--brand);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums} /* 横スクロール */ .hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x mandatory} .hscroll .t{flex:0 0 130px;scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .hscroll .t .ph{height:80px;background:var(--brand-l);display:flex;align-items:center;justify-content:center;color:var(--brand)} .hscroll .t .b{padding:7px 8px} .hscroll .t .area{font-size:11px;color:var(--sub)} .hscroll .t .nm{font-size:13px;font-weight:700;line-height:1.35} .hscroll .t .pr{font-size:11px;color:var(--brand);font-weight:700} /* 日付リスト */ .topics .it{display:flex;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line);align-items:flex-start} .topics .d{flex:0 0 48px;font-size:11px;color:var(--sub);padding-top:2px;font-variant-numeric:tabular-nums} .topics .k{flex:0 0 auto;font-size:10px;background:var(--brand-l);color:var(--brand);border-radius:3px;padding:1px 6px;font-weight:700} .topics .t{font-size:13px;font-weight:600} .topics .a{font-size:11px;color:var(--sub)} /* バッジ（★1カードに2つまでに絞る運用） */ .badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;padding:1px 7px;border-radius:4px; border:1px solid var(--line);margin-left:4px;color:var(--ink-2);background:var(--gray);vertical-align:1px} .badge.rank{border-color:var(--accent-b);color:var(--accent-ink);background:var(--accent-l)} .badge.v{border-color:#b7dcc7;color:var(--ok);background:#eefaf3} .badge.new{border-color:var(--line);color:var(--sub)} .badge.pt{border-color:var(--accent-b);color:var(--accent-ink);background:var(--accent-l);font-weight:700} .badge.today{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-l);font-weight:700} /* PR（広告）＝掲載店の枠と行。★背景を「少しだけ」変える＋必ずPRの文字を併記する（ステルスマーケティング規制：広告だと分からない表示は不当表示になる） */ .card.pr{background:var(--accent-l);border-color:var(--accent-b)} .row.pr{background:var(--accent-l);border-radius:8px;padding-left:8px;padding-right:8px} .row.pr .no{background:var(--accent);color:#fff} .badge.pr{border-color:var(--accent);color:var(--accent-ink);background:#fff;font-weight:700;letter-spacing:.06em} .hscroll .t.pr{border-color:var(--accent-b);background:var(--accent-l)} /* お店からの返信（口コミの下に足す。口コミ本文は書き換えられない） */ .rv .reply{margin:8px 0 0 12px;padding:8px 10px;background:var(--gray);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;font-size:13px} .rv .reply .h{font-size:11px;color:var(--sub);margin-bottom:3px;display:flex;align-items:center;gap:4px} /* ボタン（参照＝主は紺ベタ・副は白地に枠） */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff; font-weight:700;padding:11px 16px;border-radius:8px;border:0;cursor:pointer;font-size:14px} .btn:active{background:var(--brand-d)} .btn.sub{background:#fff;color:var(--brand);border:1px solid var(--brand)} .btn.wide{display:flex;width:100%} .btn.today{background:var(--accent);color:var(--accent-ink)} .btn.today:active{filter:brightness(.92)} .btn.today.sm{font-size:13px;padding:9px 14px;width:auto;display:inline-flex;min-height:36px;align-items:center;justify-content:center} input,select,textarea{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font-size:15px;width:100%} label{display:block;font-size:12px;color:var(--ink-2);margin:9px 0 2px;font-weight:600} .tabs{display:flex;gap:7px;margin:10px 0;flex-wrap:wrap} .tabs a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink-2)} .tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700} table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed} td,th{border-bottom:1px solid var(--line);padding:8px 4px;text-align:left;vertical-align:top;overflow-wrap:anywhere} th{color:var(--ink-2);font-weight:600;width:38%} .flash{max-width:960px;margin:10px auto;padding:10px 14px;background:var(--brand-l);border:1px solid var(--brand-b); border-radius:8px;font-size:13px;color:var(--brand-d)} .warn{background:var(--accent-l);border:1px solid var(--accent-b);border-radius:8px;padding:11px;font-size:13px} .okbox{background:#eefaf3;border:1px solid #b7dcc7;border-radius:8px;padding:11px;font-size:13px} .todaybox{background:var(--accent-l);border:1px solid var(--accent);border-radius:10px;padding:13px;margin:12px 0} .todaybox .tl{font-weight:800;color:var(--accent-ink);margin-bottom:4px;display:flex;align-items:center;gap:6px} .bonusline{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--accent-ink);background:var(--accent-l); border:1px solid var(--accent-b);border-radius:4px;padding:2px 7px;margin-top:4px} .bonusbox{background:var(--accent-l);border:1px solid var(--accent);border-radius:10px;padding:12px;margin:12px 0} .bonusbox .bl{font-weight:800;color:var(--accent-ink);margin-bottom:6px;display:flex;align-items:center;gap:6px} .bonusbox b{color:var(--accent-ink);font-size:16px} .rv{border-bottom:1px solid var(--line);padding:11px 0} .rv .h{font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:5px;flex-wrap:wrap} .rv.removed{opacity:.55} .stars{display:inline-flex;gap:1px;color:var(--accent);vertical-align:-2px} .empty{color:var(--sub);font-size:13px;padding:16px;text-align:center;background:var(--gray);border-radius:8px} footer{max-width:960px;margin:22px auto 0;padding:16px 14px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)} .qrbox{text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px} .qrimg svg{width:min(230px,70vw);height:auto} .urlbox{font-size:11px;color:var(--sub);word-break:break-all;background:var(--gray);border-radius:6px;padding:6px;margin:8px 0 0} .bigpt{font-size:32px;font-weight:800;color:var(--brand);line-height:1.2;font-variant-numeric:tabular-nums} .unset{color:var(--sub);background:var(--gray);border-radius:4px;padding:0 6px;font-size:12px} .tpl{margin:6px 0} /* ★スマホで指で押す的は36px以上（実測で32pxだった・tools/mobile_check.mjs が見張る） */ .chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:#fff;border:1px solid var(--line);min-height:36px; border-radius:99px;padding:5px 11px;margin:3px 4px 0 0;cursor:pointer;color:var(--ink-2)} .chip:active{background:var(--brand-l);border-color:var(--brand)} .chip.radio input{width:auto;margin-right:3px;vertical-align:-1px} .custsig b{display:block;color:var(--brand);font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums} .custsig .lb{display:block;font-size:11px;color:var(--sub)} .custsig .lb2{display:block;font-size:11px;color:var(--ok);font-weight:700} /* 応募のやり取り */ .chat{display:flex;flex-direction:column;gap:8px;margin:12px 0} .bub{max-width:78%;padding:9px 12px;border-radius:12px;font-size:14px} .bub .t{font-size:10px;color:var(--sub);margin-top:3px} .bub.you{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px} .bub.me{align-self:flex-end;background:var(--brand-l);border:1px solid var(--brand-b);border-bottom-right-radius:3px} .bub.me .t{text-align:right} /* 選考のステップ（参照の骨格：横並びのドット＋線） */ .steps{display:flex;align-items:center;gap:0;margin:10px 0} .steps .s{flex:1;text-align:center;position:relative;font-size:10px;color:var(--sub)} .steps .s::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--line);margin:0 auto 4px} .steps .s::after{content:"";position:absolute;top:4px;left:50%;width:100%;height:2px;background:var(--line);z-index:-1} .steps .s:last-child::after{display:none} .steps .s.on{color:var(--brand);font-weight:700} .steps .s.on::before{background:var(--brand)} @media(max-width:540px){ .row .sc{white-space:normal;font-size:13px;text-align:left;flex:1 1 100%;margin-left:32px} .row .sc .meta{margin-left:2px} h1{font-size:18px} } @media(min-width:720px){ .grid{grid-template-columns:repeat(8,1fr)} body{padding-bottom:0} .tabbar{position:static;border-top:0;border-bottom:1px solid var(--line)} } /* ===== 請求書・領収書（そのまま印刷して使える） ===== */ .doc{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 20px;max-width:720px;margin:0 auto} .doc h1{font-size:22px;letter-spacing:.2em;text-align:center;margin:0 0 4px} .doc .to{font-size:16px;border-bottom:1px solid var(--ink);padding-bottom:4px;margin:14px 0 10px} .doc .amount{font-size:15px;margin:10px 0 14px} .doc .amount b{font-size:26px;letter-spacing:.02em} table.inv{width:100%;border-collapse:collapse;margin:12px 0} table.inv th,table.inv td{border:1px solid var(--line);padding:7px 9px;font-size:13px;text-align:left} table.inv th{background:var(--gray);font-weight:700} table.inv .num{text-align:right;font-variant-numeric:tabular-nums} table.inv tr.sum th{text-align:right} table.inv tr.total td,table.inv tr.total th{font-weight:800;font-size:15px} .doc .issuer{margin-top:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:1.8} @media print{ .devbar,.staffbar,.hd,.tabbar,footer,.noprint{display:none!important} body{background:#fff;padding-bottom:0} main{padding:0;max-width:none} .doc{border:none;border-radius:0;max-width:none;padding:0} }