/* 占いピックの土台。style.css・editorial.css・motion.css・photo.css・hours.css の後に読む。
   方針: 白地と 1px の線で見せる。色はブランドの緑 1 色だけ。塗りの面はヒーローの写真だけ。
   色の出どころ: ブランド案の配色表 2026-11-04 のメイン #0E8B6B・テキスト #334155（DESIGN_REFERENCE.md の「ブランド・配色」）。
   !important は使わない。style.css の同じ部品へ html を前に付けて詳細度で勝つ。 */

:root{
  /* 色 */
  --bg:#fff;
  --surface:#fff;
  --surface-2:#f7f9f9;
  --line:#e7ebec;
  --line-strong:#d6dcde;
  --ink:#16252a;
  --ink-2:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --teal:#0e8b6b;
  --teal-ink:#0a6e55;
  --teal-ring:rgba(14,139,107,.18);
  --mint-faint:#f1f8f6;
  /* 余白の段階 */
  --card-pad:20px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  /* 角丸 */
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  /* 影 */
  --shadow-card:0 1px 2px rgba(16,24,40,.04);
  --shadow-hover:0 12px 32px rgba(16,24,40,.10);
  --shadow-panel:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  /* 字の段階 */
  --t-12:12px;--t-13:13px;--t-14:14px;--t-16:16px;--t-18:18px;--t-22:22px;--t-28:28px;--t-36:36px;--t-48:48px;
  --lh-tight:1.3;--lh-snug:1.5;--lh-body:1.8;
  --ls-0:0;--ls-1:.01em;--ls-2:.02em;
  /* 字 */
  --font-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN",serif;
  /* 動き */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:240ms;
  /* 既存の名前を新しい値へ */
  --max:1200px;
  --radius:var(--r-md);
  --shadow:var(--shadow-hover);
  --deep:var(--teal-ink);
  --teal2:var(--teal);
  --mint:var(--mint-faint);
  --blue:var(--surface-2);
  --paper:#fff;
  --cream:#fff;
}

/* ---------- 全体 ---------- */
html body{background:var(--bg);color:var(--ink-2);font-family:var(--font-sans);font-size:var(--t-14);line-height:var(--lh-body);letter-spacing:var(--ls-1)}
html .container{width:min(calc(100% - 48px),var(--max))}
html :is(h1,h2,h3,h4){color:var(--ink)}
/* 見出しは明朝 600、字間は詰めない */
html :is(h1,h2,h3,.page-title,.section-title,.info-title,.detail-hero h1,.f-mini-head h2,.f-hero h1,.hero h1,.brand-main,.f-kicker,.ed-hero h1,.ed-section-head h2,.ed-article-head h1,.ed-related h2,.ed-card h3,.ed-related a strong,.ed-cover-word,.ed-story-spread strong){font-family:var(--font-serif);font-weight:600;letter-spacing:var(--ls-2)}
html .ed-image.ed-cover .ed-cover-word{font-family:var(--font-serif);font-weight:600;letter-spacing:var(--ls-2)}
/* 小さい英字の札も字間を広げない */
html :is(.eyebrow,.ed-kicker,.ed-label,.brand-sub,.hero-floating,.ed-story-spread span,.ed-cover-word){letter-spacing:var(--ls-2);text-transform:none}

/* ---------- ヘッダ ---------- */
html .header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);box-shadow:none}
html .header-in{min-height:72px}
html .brand-main{font-size:var(--t-22);color:var(--ink)}
html .brand-sub{font-size:10px;color:var(--muted)}
html .topnav{gap:var(--s-6)}
html .topnav a{font-size:var(--t-13);font-weight:500;color:var(--ink-2)}
html .topnav a:hover,html .topnav a[aria-current="page"]{color:var(--teal)}
html .favorites-link{font-size:var(--t-13);font-weight:500;color:var(--ink-2)}

/* ---------- ボタン: 主 1 種・副 1 種。角丸は丸い端に統一 ---------- */
html :is(.primary-button,.primary-link,.head-cta,.hero-form button,.filters button,.f-search-row button,.btn-primary){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-5);border:1px solid var(--teal);border-radius:var(--r-pill);
  background:var(--teal);color:#fff;box-shadow:none;
  font-size:var(--t-14);font-weight:500;letter-spacing:var(--ls-1);white-space:nowrap;
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),transform 200ms var(--ease)
}
html :is(.primary-button,.primary-link,.head-cta,.hero-form button,.filters button,.f-search-row button,.btn-primary):hover{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
html body .head-cta{min-height:40px;padding:0 var(--s-4);font-size:var(--t-13)}
/* 詳細の右列のボタン: 主と同じ形 */
html .aside-card a.full{min-height:44px;padding:0 var(--s-5);border:1px solid var(--teal);border-radius:var(--r-pill);background:var(--teal);color:#fff;font-size:var(--t-14);font-weight:500;transition:background-color 200ms var(--ease)}
html .aside-card a.full:hover{background:var(--teal-ink);border-color:var(--teal-ink)}
html :is(.secondary-link,.aside-card a.full.secondary,.btn-secondary){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-5);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:var(--t-14);font-weight:500;box-shadow:none;
  transition:border-color 200ms var(--ease),background-color 200ms var(--ease)
}
html :is(.secondary-link,.aside-card a.full.secondary,.btn-secondary):hover{border-color:var(--ink-2);background:#fff;color:var(--ink)}
html .text-link,html .f-section-more{color:var(--teal);font-size:var(--t-13);font-weight:500}

/* ---------- 入力欄: 1 種。高さ 44・角丸 12 ---------- */
html :is(.hero-form input,.filters input,.filters select,.f-search-row input,.f-search-row select,.input,.select){
  min-height:44px;height:44px;padding:0 var(--s-4);
  border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:#fff;
  color:var(--ink);font-size:var(--t-14);font-weight:400;box-shadow:none;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)
}
html :is(.hero-form input,.filters input,.f-search-row input,.input)::placeholder{color:var(--faint)}
html :is(.hero-form input,.filters input,.filters select,.f-search-row input,.f-search-row select,.input,.select):hover{border-color:var(--faint)}
html :is(.hero-form input,.filters input,.filters select,.f-search-row input,.f-search-row select,.input,.select):focus,
html :is(.hero-form input,.filters input,.filters select,.f-search-row input,.f-search-row select,.input,.select):focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-ring)}
/* セレクト: 既定の矢印を外し、Heroicons の chevron-down を細い線で置く。
   出どころ: https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/outline/chevron-down.svg MIT、取得 2026-11-05 */
html :is(.filters select,.f-search-row select,.select){
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px
}

/* ---------- チップ: 1 種。白地 + 線 + 丸い端 ---------- */
html :is(.pill,.tag,.chips span,.f-quick a,.ed-filters a,.chip){
  display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  color:var(--ink-2);font-size:var(--t-12);font-weight:500;line-height:1;letter-spacing:var(--ls-1);
  transition:border-color 160ms var(--ease),color 160ms var(--ease)
}
html :is(a.pill,a.tag,.f-quick a,.ed-filters a,a.chip):hover{border-color:var(--teal);color:var(--teal);background:#fff}
html .ed-filters a[aria-current=page]{border-color:var(--ink);background:var(--ink);color:#fff}
html body .f-person-tags{display:flex;flex-wrap:wrap;gap:var(--s-1);align-self:start;max-width:100%;min-height:0;padding:0;border:0;background:none}
html .quick-tags strong,html .f-quick b{font-size:var(--t-12);font-weight:500;color:var(--muted)}

/* ---------- カード: 白地 + 1px の線 + 角丸 14。hover は影が広がり 2px 浮く ---------- */
html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.f-topic-card,.topic-card,.area-card,.related-link,.prefecture-link,.ed-card,.card){
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)
}
@media (hover:hover){
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.f-topic-card,.topic-card,.area-card,.related-link,.ed-card,.card):hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:transparent;background:#fff}
  html .prefecture-link:hover{background:#fff;border-color:var(--teal);color:var(--teal)}
}
html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.ed-card) img{transition:transform 400ms var(--ease)}
@media (hover:hover){html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.ed-card):hover img{transform:scale(1.02)}}
html .prefecture-link.active{background:#fff;border-color:var(--teal);color:var(--teal)}
html .f-city-card{border-radius:var(--r-md);box-shadow:var(--shadow-card)}
html .info-card,html .aside-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;padding:var(--s-6)}
html .listing-body{padding:var(--s-4) var(--s-4) var(--s-5);gap:var(--s-2)}
html .listing-title{font-size:var(--t-16);font-weight:700;color:var(--ink);line-height:var(--lh-snug);letter-spacing:var(--ls-1)}
html .listing-meta,html .listing-hours{font-size:var(--t-12);color:var(--muted);font-weight:400}
html .listing-bottom{border-top:1px solid var(--line);color:var(--teal);font-size:var(--t-12);font-weight:500}
html :is(.f-person-body,.f-salon-body){padding:var(--card-pad);gap:var(--s-1)}
html :is(.f-person-body,.f-salon-body) strong{font-size:var(--t-14);font-weight:700;color:var(--ink)}
html :is(.f-person-meta,.f-salon-body>span,.f-shop-meta,.f-shop-info){font-size:var(--t-12);color:var(--muted)}
html .f-salon-body small,html .f-shop-action{font-size:var(--t-12);font-weight:500;color:var(--teal)}
html .f-shop-copy p{font-size:var(--t-13);color:var(--ink-2)}
html .area-card strong{color:var(--ink)}
html .area-card span,html .topic-card small{font-size:var(--t-12);color:var(--muted)}

/* 写真が無いときの置き場は、色の付いた面をやめて薄いグレー 1 色 */
html :is(.listing-image,.f-person-art,.f-salon-art,.f-shop-media,.f-topic-face,.detail-image,.pf-stage,.pf-thumb,.detail-thumb,.related-face,.related-link img,.ed-image,.ed-figure img){background:var(--surface-2)}
html :is(.f-person-art,.f-salon-art,.f-shop-media,.f-topic-face)[class*="f-color-"]{background:var(--surface-2)}
html .ed-image.ed-cover[class*="ed-cover-"]{background:var(--surface-2)}
html :is(.placeholder-initial,.image-placeholder,.related-face){color:var(--line-strong);font-family:var(--font-serif);font-weight:500;text-shadow:none}
html :is(.listing-image .image-placeholder,.f-shop-media .placeholder-initial,.detail-image .placeholder-initial,.f-person-art .placeholder-initial,.f-salon-art .placeholder-initial){color:var(--line-strong)}
html .f-person-symbol,html .f-person-art .f-crescent{color:var(--line-strong);text-shadow:none}
html :is(.listing-kind,.f-person-art small,.f-salon-art small,.f-shop-media span){background:rgba(255,255,255,.92);color:var(--ink-2);border-radius:6px;font-size:var(--t-12);font-weight:500}

/* 悩み・地域の印: 色の付いた丸をやめて、線の輪とブランドの緑 */
html .topic-card .topic-icon[class]{background:#fff;border:1px solid var(--line);color:var(--teal)}
html .f-topic-card[class]{color:var(--ink)}
html .f-region-mark{background:#fff;border:1px solid var(--line);box-shadow:none;color:var(--teal);transition:border-color 160ms var(--ease)}
html .f-region-pill:hover .f-region-mark{background:#fff;border-color:var(--teal);transform:none}
html .pref-shape{fill:var(--mint-faint);stroke:var(--teal)}
html .f-region-pill:hover .pref-shape{fill:#d9efe8}
html .step-no{background:#fff;border:1px solid var(--line);color:var(--teal);font-weight:600}

/* ---------- 節の余白 ---------- */
html .section{padding-block:var(--s-9)}
html .section.alt{background:#fff}
html .section.tight{padding-block:var(--s-8)}
html .section-head{margin-bottom:var(--s-6)}
html .section-title{font-size:var(--t-28);line-height:var(--lh-tight)}
html .section-description{font-size:var(--t-13);color:var(--muted);margin-top:var(--s-2)}
html .card-grid,html .result-grid{gap:var(--s-5)}

/* トップ: 写真のヒーローはそのまま。下の段は 1200 の幅に揃え、段の間を広げる */
html .f-content{max-width:calc(var(--max) + 48px);padding:0 24px var(--s-8)}
/* ヒーローの文字と検索の枠も、下の段と同じ左端に揃える */
html .f-hero-content{max-width:calc(var(--max) + 48px);padding-left:24px;padding-right:24px}
html .f-search{left:max(24px,calc((100% - var(--max)) / 2))}
html .f-featured,html .f-home-bottom{gap:var(--s-7);padding-top:var(--s-8)}
html .f-mini-head{margin-bottom:var(--s-4);gap:var(--s-3)}
html .f-mini-head h2{font-size:var(--t-22);color:var(--ink)}
html .f-home-lower .f-mini-head h2{font-size:var(--t-22)}
html .f-mini-head>small{font-size:var(--t-12);color:var(--muted)}
html .f-mini-icon{color:var(--teal)}
html :is(.f-person-grid,.f-salon-grid,.f-city-grid,.f-topic-grid){gap:var(--s-3)}
html .f-area-shop-grid{gap:var(--s-4)}
html .f-kicker{font-size:var(--t-14);color:var(--ink-2)}
html .f-hero h1{color:var(--ink);text-shadow:none}
html .f-hero-description{font-weight:400;letter-spacing:var(--ls-1);color:var(--ink-2)}
html .f-search{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);padding:0 var(--s-4) var(--s-4)}
html .f-search-tabs{border-bottom:1px solid var(--line);margin-bottom:var(--s-3)}
html .f-search-tabs a{font-size:var(--t-13);font-weight:500;color:var(--muted)}
html .f-search-tabs a.selected{color:var(--ink);border-bottom:2px solid var(--teal);margin-bottom:-1px}
html .f-search-row{gap:var(--s-2)}
html .searchpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel)}
html .searchtabs a{font-weight:500}
html .searchtabs a.current{color:var(--ink);border-bottom:2px solid var(--teal)}

/* 一覧の帯: 薄緑の面をやめて白地と下の線。写真の帯（has-photo）は残す */
html .page-banner{background:#fff;border-bottom:1px solid var(--line);padding-block:var(--s-8) var(--s-7)}
/* 詳細の上のパンくずだけの帯は線も余白も付けない */
html .detail-breadcrumb-banner{background:transparent;border:0;padding:var(--s-5) 0 0}
html .page-title{font-size:clamp(28px,3vw,var(--t-36));line-height:var(--lh-tight);color:var(--ink);margin:var(--s-3) 0 var(--s-4)}
html .page-lead{font-size:var(--t-14);color:var(--muted)}
html .breadcrumb{font-size:var(--t-12);color:var(--muted)}
html .content-main{padding-block:var(--s-7) var(--s-9)}
html .filters{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);gap:var(--s-3);box-shadow:none}
html .result-count{font-size:var(--t-16);font-weight:500;color:var(--ink)}
html .result-count strong{color:var(--ink);font-size:var(--t-28);font-weight:600;font-family:var(--font-serif)}
html .empty-state{border:1px solid var(--line);border-radius:var(--r-md);color:var(--muted)}
html .pagination button{border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink-2);min-width:40px;min-height:40px;font-weight:500}
html .pagination button[aria-current="page"],html .pagination button.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* 詳細: 緑のグラデーションをやめて白地。写真と名前を線で区切らず余白で並べる */
html .detail-layout{gap:var(--s-7);padding-block:var(--s-6) var(--s-9)}
html .detail-hero{background:#fff;border:0;border-radius:0;padding:var(--s-5) 0 var(--s-5);gap:var(--s-7)}
html .detail-image{border-radius:var(--r-md)}
html .pf--hero .pf-stage{border-radius:var(--r-md)}
html .detail-hero h1{font-size:clamp(28px,3vw,var(--t-36));line-height:var(--lh-tight);margin:var(--s-2) 0 var(--s-4)}
html .detail-hero p{font-size:var(--t-14);color:var(--ink-2);line-height:var(--lh-body);margin-bottom:var(--s-4)}
html .chips{gap:var(--s-2)}
html .detail-actions{gap:var(--s-3);margin-top:var(--s-5)}
html .info-card{margin-top:var(--s-5)}
html .info-title{font-size:var(--t-22);margin-bottom:var(--s-5)}
html .info-table{border-bottom:1px solid var(--line);padding-block:var(--s-4);gap:var(--s-4)}
html .info-table dt{font-size:var(--t-13);font-weight:500;color:var(--muted)}
html .info-table dd{font-size:var(--t-14);color:var(--ink)}
html .aside-card h3{font-size:var(--t-16)}
html .aside-quiet{font-size:var(--t-12);color:var(--faint)}
/* 公式情報を確かめた日: 見出し帯の概要の一番下の 1 行。占い師は公式サイトの行の右端、店は概要カードの一番下 */
html .dt-checked{margin-left:auto;color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums}
html .sa-card>.dt-checked{margin:0;padding-top:var(--s-3);border-top:1px solid var(--line)}
html .map-frame{border-radius:var(--r-md);background:var(--surface-2)}
html .shop-related{gap:var(--s-3)}
html .related-link{padding:var(--s-4)}
html .related-link small{font-size:var(--t-12);color:var(--muted)}
html .hours-table>div{border-color:var(--line);border-radius:var(--r-sm)}
html .hours-table dt{color:var(--muted);font-weight:500}
html .detail-thumb{border-radius:var(--r-sm)}
html .detail-thumb.is-current,html .detail-thumb:hover{border-color:var(--teal)}
html .pf-thumb{border-radius:var(--r-sm)}
html .pf-thumb.is-current{border-color:var(--teal)}

/* 地図の枠も白地と線 */
html .map-shell{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
html .f-map-badge{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);color:var(--ink-2);font-weight:500;font-size:var(--t-12)}
html .f-map-badge:hover{background:#fff;border-color:var(--teal);color:var(--teal)}

/* ---------- 表: 1 種。縦の線を引かず、行の下だけ線 ---------- */
html .table{width:100%;border-collapse:collapse;font-size:var(--t-14);font-variant-numeric:tabular-nums}
html .table :is(th,td){padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
html .table thead th{font-size:var(--t-12);font-weight:500;color:var(--muted);border-bottom-color:var(--line-strong)}
html .table tbody th{font-weight:500;color:var(--muted);width:9em}
html .table td{color:var(--ink)}

/* ---------- 足元 ---------- */
html .footer{background:#fff;border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-6)}
html .footer-in{gap:var(--s-7)}
html .footer p,html .footer-in>div:first-child p{font-size:var(--t-13);color:var(--muted);line-height:var(--lh-body)}
html .footer h3{font-size:var(--t-13);font-weight:700;color:var(--ink);font-family:var(--font-sans);letter-spacing:var(--ls-1)}
html .footer-links{gap:var(--s-3)}
html .footer-links a{justify-self:start;font-size:var(--t-13);color:var(--teal);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size 200ms var(--ease),color 200ms var(--ease)}
html .footer-links a:is(:hover,:focus-visible){color:var(--teal-ink);background-size:100% 1px}
html .footer-base{border-top:1px solid var(--line);margin-top:var(--s-7);padding-top:var(--s-5);font-size:var(--t-12);color:var(--faint)}

/* ---------- 記事 ---------- */
html .ed-page{background:#fff;color:var(--ink-2)}
html .ed-hero{background:#fff;border-bottom:1px solid var(--line)}
html .ed-orbit{color:var(--line-strong)}
html .ed-card{border-radius:var(--r-md)}
html .ed-card h3{font-size:var(--t-22);line-height:var(--lh-snug);color:var(--ink)}
html .ed-meta{color:var(--muted);font-weight:500}
html .ed-more{color:var(--teal)}
html .ed-section-head,html .ed-article-head,html .ed-related a,html .ed-endnote{border-color:var(--line)}
html .ed-warning{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-sm)}
html .ed-story-spread{background:var(--surface-2);border-color:var(--line)}
html .ed-draft{background:var(--surface-2);color:var(--muted);border-radius:6px}

/* ---------- その他 ---------- */
html .hours-week tr.is-today th,html .hours-week tr.is-today td{background:var(--mint-faint)}
html :is(a,button,select,input):focus-visible{outline:2px solid var(--teal);outline-offset:2px}
html .photo-credit{background:rgba(255,255,255,.92);color:var(--ink-2);font-weight:500}

/* ---------- スマホ ---------- */
@media (max-width:780px){
  html .container{width:min(calc(100% - 32px),var(--max))}
  html .section{padding-block:56px}
  html .section.tight{padding-block:var(--s-7)}
  html .f-content{padding:0 16px 56px}
  html .f-hero-content{padding-left:16px;padding-right:16px}
  html .f-search{left:auto}
  html .f-featured,html .f-home-bottom{gap:var(--s-6);padding-top:var(--s-7)}
  html .page-banner{padding-block:var(--s-6) var(--s-5)}
  html .content-main{padding-block:var(--s-5) 56px}
  html .detail-hero{gap:var(--s-5);padding:var(--s-3) 0 var(--s-6)}
  html .detail-layout{padding-block:var(--s-3) 56px}
  html .info-card,html .aside-card{padding:var(--s-5)}
  html .footer{padding:var(--s-7) 0 var(--s-5)}
  html .footer-in{gap:var(--s-6)}
}
@media (max-width:520px){
  html .f-hero h1{font-size:30px}
  html .detail-hero{padding:var(--s-2) 0 var(--s-5)}
  html .info-card,html .aside-card{padding:var(--s-4)}
  html .listing-body{padding:var(--s-3)}
  html .listing-title{font-size:var(--t-14)}
}
@media (prefers-reduced-motion:reduce){
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.f-topic-card,.topic-card,.area-card,.related-link,.ed-card,.card),
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.ed-card) img{transition:none}
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.f-topic-card,.topic-card,.area-card,.related-link,.ed-card,.card):hover,
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.ed-card):hover img{transform:none}
}

/* ---------- 占い師の詳細: キャッチ・出演予定・料金（2026-11-05） ---------- */
html .dt-info h1:has(+ .dt-catch){margin-bottom:var(--s-2)}
html .dt-catch{margin:0 0 var(--s-5);font-size:var(--t-16);line-height:var(--lh-snug);color:var(--ink-2);letter-spacing:var(--ls-1)}
html .dt-schedule{list-style:none;margin:0;padding:0;max-width:46em;border-top:1px solid var(--line)}
html .dt-schedule li{padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:var(--t-14);line-height:var(--lh-snug);color:var(--ink);font-variant-numeric:tabular-nums}
html .dt-schedule-shop{margin:var(--s-5) 0 var(--s-2);font-size:var(--t-14);font-weight:700;color:var(--ink)}
html .dt-schedule-shop:first-of-type{margin-top:0}
html .dt-schedule-raw{margin:0 0 var(--s-3);max-width:46em;font-size:var(--t-14);line-height:var(--lh-body);white-space:pre-line}
html .dt-price-raw{max-width:46em;font-size:var(--t-14);line-height:var(--lh-body);white-space:pre-line}
html .dt-topic-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);max-width:46em}
html .dt-topic-tag{padding:var(--s-1) var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font-size:var(--t-13);line-height:var(--lh-snug);color:var(--ink-2)}

/* ---------- 出演の日程・在籍の顔・店の詳細のタブと概要カード（2026-11-05 オーナー「Y 全部やって」） ---------- */
/* 本日出演の札: 名前の横に小さく */
html .name-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);min-width:0}
html .name-row>:is(strong,.listing-title){min-width:0}
html .today-badge{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 var(--s-2);border:1px solid var(--teal-ring);border-radius:var(--r-pill);background:var(--mint-faint);color:var(--teal-ink);font-family:var(--font-sans);font-size:11px;font-weight:500;line-height:1;letter-spacing:var(--ls-1);white-space:nowrap}
html .dt-name-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-5)}
html .dt-name-row h1{margin:var(--s-1) 0}
html .dt-name-row:has(+ .dt-catch){margin-bottom:var(--s-2)}
html .dt-name-row .today-badge{height:24px;padding:0 var(--s-3);font-size:var(--t-12)}
html .face-name{justify-content:center}

/* 1 週間の出演表: 今日から 7 日、今日の列だけ薄い緑 */
html .dt-schedule.week-wrap{max-width:720px;border-top:0;overflow-x:auto}
html .week-table{width:100%;min-width:336px;table-layout:fixed;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-md);font-variant-numeric:tabular-nums}
html .week-table th{padding:var(--s-2) var(--s-1);border:1px solid var(--line);background:var(--surface-2);font-weight:500;text-align:center;line-height:var(--lh-tight)}
html .week-table .wk-dow{display:block;font-size:var(--t-12);color:var(--muted)}
html .week-table .wk-date{display:block;margin-top:2px;font-size:var(--t-16);font-weight:700;color:var(--ink)}
html .week-table td{height:64px;padding:var(--s-2) var(--s-1);border:1px solid var(--line);text-align:center;vertical-align:middle;font-size:var(--t-13);line-height:var(--lh-tight);color:var(--ink)}
html .week-table .is-today{background:var(--mint-faint)}
html .week-table th.is-today .wk-dow,html .week-table th.is-today .wk-date{color:var(--teal-ink)}
html .wk-on{font-size:var(--t-18);color:var(--teal)}
html .wk-off{color:var(--faint)}
html .wk-time{display:flex;flex-direction:column;align-items:center;gap:2px}
html .wk-shop{display:block;margin-top:var(--s-1);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
html .wk-note{margin:var(--s-2) 0 0;font-size:var(--t-12);color:var(--muted)}

/* 店カードの在籍の顔: 6 人まで横一列、右端に人数の札 */
html .staff-row{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);min-width:0}
html .staff-faces{display:flex;flex:1 1 auto;gap:var(--s-1);min-width:0;overflow:hidden}
html .staff-face{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
html .staff-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html .staff-ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-serif);font-size:var(--t-13);color:var(--muted)}
html .staff-count{display:flex;flex:none;gap:var(--s-1);margin-left:auto}
html .staff-count>span{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font-size:11px;font-weight:500;color:var(--ink-2);white-space:nowrap}
html .staff-count>.staff-today{border-color:var(--teal-ring);background:var(--mint-faint);color:var(--teal-ink)}
/* トップの店カードは幅が狭いので、顔を小さく重ねる */
html .f-salon-body .staff-row{margin-top:auto;padding-top:var(--s-1);flex-wrap:wrap;row-gap:var(--s-1)}
html .f-salon-body .staff-faces{gap:0}
html .f-salon-body .staff-face{width:24px;height:24px;border:2px solid var(--surface)}
html .f-salon-body .staff-face+.staff-face{margin-left:-6px}
html .f-salon-body .staff-ini{font-size:11px}
html .f-salon-body .staff-count{margin-left:0}

/* 一覧の絞り込み: 今日出演 */
html .today-toggle{position:relative;display:flex;flex:none;cursor:pointer}
html .today-toggle input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
html .today-toggle span{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:44px;padding:0 var(--s-4);border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:var(--t-13);font-weight:500;white-space:nowrap;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
html .today-toggle:hover span{border-color:var(--faint)}
html .today-toggle input:checked+span{border-color:var(--teal);background:var(--teal);color:#fff}
html .today-toggle:hover input:checked+span{border-color:var(--teal-ink);background:var(--teal-ink)}
html .today-toggle .today-on,html .today-toggle input:checked+span .today-off{display:none}
html .today-toggle input:checked+span .today-on{display:inline-block}
html .today-toggle input:focus-visible+span{box-shadow:0 0 0 3px var(--teal-ring)}

/* 店の詳細: 節のタブ（ヘッダの下に止まる） */
html .shop-tabs{position:sticky;top:var(--header-h,72px);z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
html .shop-tabs-in{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none}
html .shop-tabs-in::-webkit-scrollbar{display:none}
html .shop-tabs a{flex:none;display:inline-flex;align-items:center;height:52px;padding:0 var(--s-4);border-bottom:2px solid transparent;font-size:var(--t-14);font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
html .shop-tabs a:hover{color:var(--teal)}
html .shop-tabs a.is-current{color:var(--teal-ink);border-bottom-color:var(--teal)}
html .dt-section{scroll-margin-top:calc(var(--header-h,72px) + 52px + var(--s-4))}

/* 店の詳細: 本文と右の概要カード */
html .dt-hero-shop .dt-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
html .dt-below-shop{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-7);align-items:start}
html .shop-aside{margin-top:var(--s-8)}
html .sa-card{display:grid;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-panel)}
html .sa-name{margin:0 0 var(--s-1);font-family:var(--font-serif);font-size:var(--t-18);font-weight:600;line-height:var(--lh-snug);color:var(--ink)}
html .sa-row{display:grid;grid-template-columns:16px 3em minmax(0,1fr);gap:var(--s-2);align-items:start;font-size:var(--t-13);line-height:var(--lh-snug)}
html .sa-row .hi{margin-top:2px;color:var(--teal)}
html .sa-label{color:var(--muted)}
html .sa-val{color:var(--ink);overflow-wrap:anywhere}
html .sa-actions{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
html .sa-actions .dt-book{height:48px;border-radius:var(--r-md);font-size:var(--t-16);box-shadow:none}
html .sa-actions .dt-official{height:44px;border-radius:var(--r-md);font-size:var(--t-14)}
html .sa-actions .fav-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:44px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--t-13);font-weight:500}
html .sa-actions .fav-button.is-saved{color:var(--teal-ink);border-color:var(--teal-ring);background:var(--mint-faint)}
@media (max-width:1080px){
  html .dt-below-shop{grid-template-columns:minmax(0,1fr);gap:0}
  html .shop-aside{position:static;order:-1;margin-top:var(--s-5)}
}
@media (max-width:780px){
  html .dt-hero-shop .dt-grid{grid-template-columns:minmax(0,1fr)}
  html .week-table th,html .week-table td{padding:var(--s-1) 2px}
  html .week-table td{height:56px;font-size:11px}
  html .week-table .wk-date{font-size:var(--t-14)}
  html .shop-tabs a{height:46px;padding:0 var(--s-3);font-size:var(--t-13)}
  html .staff-face{width:28px;height:28px}
}

/* 一覧のカードもトップと同じ部品。写真の枠は 4:3（photo.js の縁ぼかしで顔が切れない） */
html .result-grid :is(.f-person-art,.f-salon-art){height:auto;aspect-ratio:4/3}
/* SP の hero のタブ: 3 つが 1 行に収まる字の大きさにし、足りない幅では横に流す */
@media (max-width:520px){
  html .f-search-tabs{overflow-x:auto;scrollbar-width:none}
  html .f-search-tabs::-webkit-scrollbar{display:none}
  html .f-search-tabs a{flex:1 0 auto;gap:var(--s-1);padding:0 var(--s-2);font-size:var(--t-12)}
  html .f-search-tabs a .hi{display:none}
}

/* カードの高さは中身で決める（同じ行は grid で揃う）。札が無い占い師は在籍の店名を 1 行で */
html :is(.f-person-body,.f-salon-body){min-height:0}
html .f-person-shop{display:flex;align-items:flex-start;gap:var(--s-1);min-width:0}
html .f-person-shop .hi{flex:none}
html .f-person-shop-name{min-width:0;overflow-wrap:anywhere}

/* ---------- /area/ の hero: 絶対配置をやめて通常のフロー（見出し → 説明 → 検索、右に地図と地方の札）（オーナー 2026-11-05「バグってね？」） ---------- */
html .f-hero.f-area-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px 112px;align-items:center;column-gap:var(--s-6);height:auto;min-height:0;padding:var(--s-7) max(24px,calc((100% - var(--max)) / 2))}
html .f-area-hero .f-hero-content{grid-column:1;height:auto;max-width:none;margin:0;padding:0}
html .f-area-hero .f-search{position:relative;left:auto;bottom:auto;width:100%;margin-top:var(--s-4)}
html .f-area-hero .f-japan-container{grid-column:2;position:relative;right:auto;top:auto;width:300px;height:300px;margin:0}
html .f-area-hero .f-map-badges{grid-column:3;position:relative;right:auto;top:auto;width:auto;display:grid;gap:var(--s-2)}
/* 検索の段は折り返す（ボタンが枠からはみ出さない） */
html .f-search-row,html .f-area-hero .f-search-row,html .f-hero.f-home-hero .f-search-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
html .f-search-row>:is(select,input,.psel,.today-toggle){flex:1 1 160px;min-width:0}
html .f-search-row>button{flex:0 0 auto}
@media (max-width:1080px){
  html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr) 240px}
  html .f-area-hero .f-japan-container{width:240px;height:240px}
  html .f-area-hero .f-map-badges{display:none}
}
@media (max-width:780px){
  html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr);padding:var(--s-5) 16px;row-gap:var(--s-4)}
  html .f-area-hero .f-japan-container{grid-column:1;grid-row:2;justify-self:center;width:220px;height:220px}
  html .f-search-row>button{flex:1 1 100%}
}
/* /area/ の店カードはトップと同じ 4 列、都道府県のタイルは地方ごとに全部並べる */
html .f-area-salon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
html .f-pref-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding:0}
html .f-pref-region{scroll-margin-top:var(--s-5)}
html .f-pref-region>strong{display:block;margin-bottom:var(--s-2);font-size:var(--t-14);font-weight:700;color:var(--ink)}
@media (max-width:780px){html .f-area-salon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 料金の最低時間 ---------- */
html .price-min{display:block;margin-top:2px;font-size:var(--t-12);font-weight:400;color:var(--muted)}

/* ---------- 読み込み中の骨組み: 本物と同じ部品の上に、surface-2 → surface-3 の薄いきらめき（1.6 秒） ---------- */
:root{--surface-3:#eaeff0}
html main.is-skeleton{pointer-events:none}
html main.is-skeleton :is(h1,h2,h3,p,strong,small,span,a,b,label,li,td,th,dd,dt,button,select,input,.tag){color:transparent!important;text-shadow:none;caret-color:transparent}
html main.is-skeleton :is(input,select)::placeholder{color:transparent}
html main.is-skeleton :is(svg,img,iframe,.pf){visibility:hidden}
html main.is-skeleton :is(h1,h2,h3,strong,.tag,.f-person-meta,.f-salon-body>span,.page-lead,.f-hero-description,.dt-bio,.result-count,.staff-face),
html main.is-skeleton :is(.f-person-art,.f-salon-art,.detail-image,.f-region-mark,.f-japan-container){background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%)!important;background-size:200% 100%!important;border-color:transparent!important;border-radius:var(--r-sm);animation:sk-shine 1.6s linear infinite}
html main.is-skeleton :is(.card,.f-person-card,.f-salon-card){box-shadow:none}
@keyframes sk-shine{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){html main.is-skeleton *{animation:none!important}}

/* ---------- SNS のアイコン: hover は少し薄くするだけ（浮かせない・影も札も無し。オーナー 2026-11-05「浮かせなくていいし ツールチップも余計」）。色はブランド色のまま ---------- */
html .social-links a.sns-btn{transition:transform 250ms var(--ease)}
html .social-links a.sns-btn:is(:hover,:focus-visible){transform:scale(1.04);box-shadow:none}
@media (prefers-reduced-motion:reduce){html .social-links a.sns-btn{transition:none}html .social-links a.sns-btn:is(:hover,:focus-visible){transform:none}}
html .social-links a.sns-btn,html .social-links a.sns-btn:hover{background:#5f7d7a}
html .social-links :is(a.sns-btn-x,a.sns-btn-tiktok),html .social-links :is(a.sns-btn-x,a.sns-btn-tiktok):hover{background:#000}
html .social-links a.sns-btn-instagram,html .social-links a.sns-btn-instagram:hover{background:#ff0069}
html .social-links a.sns-btn-youtube,html .social-links a.sns-btn-youtube:hover{background:#ff0000}
html .social-links a.sns-btn-facebook,html .social-links a.sns-btn-facebook:hover{background:#0866ff}
html .social-links a.sns-btn-line,html .social-links a.sns-btn-line:hover{background:#00c300}
html .social-links a.sns-btn-ameba,html .social-links a.sns-btn-ameba:hover{background:#2d8c3c}

/* 得意な相談: 札だけ。アイコンのある札は左に 16px */

/* カードの本文の余白はトップ・一覧・店カード・在籍の顔で同じ値（--card-pad） */
html .face-card{padding:var(--card-pad)}
html .f-salon-hours{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s-1);min-width:0}
html .f-salon-hours .hi{flex:none}

/* エリア: 地方の段。都道府県のタイルの下に、店が多い地域（市区町村）の札を 1 行で */
html .f-pref-region-title{margin:0 0 var(--s-2);font-size:var(--t-18);font-weight:700;color:var(--ink)}
html .f-area-pref-list .f-region-pills{margin:0 0 var(--s-3)}
html .f-area-cities-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
html .f-area-cities-label{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-12);color:var(--muted);margin-right:var(--s-1)}
html .f-area-city small{font-size:var(--t-12);color:var(--muted)}
html .f-pref-region+.f-pref-region{padding-top:var(--s-8);border-top:1px solid var(--line)}
html .banner-credit a{color:inherit;text-decoration:underline}

/* hero の「現在地を使う」: 人気の占術の行の右端に小さく置く文字のボタン */
html .f-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
html .f-geo{order:9;margin-left:auto;display:inline-flex;align-items:center;gap:var(--s-1);padding:0;border:0;background:none;font:inherit;font-size:var(--t-12);color:var(--teal);cursor:pointer}
@media (hover:hover){html .f-geo:hover{text-decoration:underline}}
html .f-geo.is-busy{opacity:.6;cursor:progress}

/* 見つからないとき: トップへ戻るボタンと一覧への文字のリンクを 1 行に */
html .not-found{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);padding:var(--s-6) 0}

/* ---------- 検索欄の候補（app.js の bindSuggest）: 欄の直下に 1 枚。開くとき 200ms で浮かぶ ---------- */
html .has-suggest:not(.f-search){position:relative}
html .suggest{position:absolute;top:var(--sg-top,100%);left:var(--sg-left,0);width:var(--sg-w,100%);z-index:40;padding:var(--s-1);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-panel);text-align:left}
html .suggest[hidden]{display:none}
html .suggest.is-in{animation:sg-in 200ms var(--ease) both}
@keyframes sg-in{from{opacity:0;transform:translateY(-4px)}}
html .suggest-item{display:flex;align-items:center;gap:var(--s-2);min-height:40px;padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--t-14);line-height:var(--lh-snug)}
html .suggest-item .hi{flex:none;color:var(--faint)}
html .suggest-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
html .suggest-label b{font-weight:700;color:var(--ink)}
html .suggest-item small{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-12);color:var(--muted)}
html .suggest-item.is-active,html .suggest-item:hover{background:var(--mint-faint)}
html .suggest-item.is-active .hi,html .suggest-item:hover .hi{color:var(--teal)}

/* ---------- 一覧: 「全国で見る」は件数の右に文字のリンク ---------- */
html .result-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
html .result-all{font-size:var(--t-13);color:var(--teal)}

/* ---------- ページ送り: 古い並びは 150ms で薄く、新しい並びは 250ms で 6px 浮かぶ（app.js の pageTo） ---------- */
html .result-grid.is-page-out{opacity:0;transition:opacity 150ms var(--ease)}
html .result-grid.is-page-in{animation:page-in 250ms var(--ease) both}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}}

/* ---------- 画面の切り替えの最中はカードのずらしを止める（画面の薄い切り替えと二重にしない。1 動作 1 つ） ---------- */
/* none にすると animationend が来ず class が残り、切り替えの後で動き出すので 0s で即座に終わらせる */
html[data-motion-dir] .motion-stagger,html #app.is-entering .motion-stagger{animation-duration:0s;animation-delay:0s}

@media (prefers-reduced-motion:reduce){html :is(.suggest.is-in,.result-grid.is-page-in){animation:none}html .result-grid.is-page-out{transition:none}}

/* ---------- 在籍占い師の顔カードの名前の行（本日出演の札は名前の横） ---------- */
/* ---------- 占い師詳細のお気に入りと公式は同じ高さ・同じ字（オーナー 2026-11-05「サイズおかしくね？」） ---------- */
html .dt-actions :is(.fav-button,.dt-official){align-self:stretch;justify-content:center;height:48px;border-radius:var(--r-md);font-size:var(--t-14);font-weight:500}
@media (max-width:1080px){html .dt-actions :is(.fav-button,.dt-official){flex:1 1 220px}}
@media (max-width:780px){html .dt-actions :is(.fav-button,.dt-official){flex:none}}

/* ---------- 本日の営業と今: 営業中は teal、終わった後は muted ---------- */
html .hours-now{font-style:normal;font-size:var(--t-12);font-weight:500;color:var(--ink-2);margin-left:var(--s-1)}
html .hours-now.is-open{color:var(--teal)}
html .hours-now.is-closed{color:var(--muted)}

/* ---------- 詳細の中の店カード: 横長（写真 左 43%、.f-area-shop と同じ比）を 2 列、狭い画面は 1 列。顔と在籍の人数は 1 行 ---------- */
html .f-salon-grid.f-salon-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
html .f-salon-rows .f-salon-card>a{display:grid;grid-template-columns:40% minmax(0,1fr);height:100%}
html .f-salon-rows .f-salon-art{height:100%;min-height:140px;aspect-ratio:auto}
html .f-salon-rows .f-salon-body .staff-row{flex-wrap:nowrap}
@media (max-width:780px){html .f-salon-grid.f-salon-rows{grid-template-columns:minmax(0,1fr)}}

/* ---------- 見出し帯の検索の枠（トップと /area/ で同じ）: 欄の行、その下に 切替 + ボタンの行。枠の内側は --s-5、行の間は --s-4 ---------- */
html .f-hero.f-home-hero .f-search,html .f-hero.f-area-hero .f-search{padding:0 var(--s-5) var(--s-5)}
html .f-hero :is(.f-search-tabs){margin-bottom:var(--s-4)}
html .f-search-row,html .f-area-hero .f-search-row,html .f-hero.f-home-hero .f-search-row{display:flex;flex-direction:column;gap:var(--s-4)}
html .f-search-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-2)}
html .f-search-fields>*{min-width:0;width:100%}
html .f-search-go{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--s-3)}
html .f-search-go .today-toggle span{width:auto}
html .f-hero .f-quick{margin-top:var(--s-4)}
/* 説明文を消した後の見出しと検索の枠の間 */
html .f-hero :is(.f-home-hero,.f-area-hero) h1,html .f-hero h1{margin-bottom:var(--s-6)}
@media (max-width:780px){html .f-search-go>*{flex:1 1 auto}}

/* ---------- /area/ の都道府県: 地方の見出し + 合計、県は 名前 件数 を 1 行、丸の塗りは件数で 3 段、店が多い地域は枠なしの文字のリンク ---------- */
html .f-pref-region-title{display:flex;align-items:baseline;gap:var(--s-2)}
html .f-pref-region-n{font-family:var(--font-sans);font-size:var(--t-14);font-weight:700;color:var(--ink);letter-spacing:var(--ls-1)}
html .f-region-name{display:inline-flex;align-items:baseline;gap:var(--s-1);white-space:nowrap}
html .f-region-name :is(strong,small){font-size:var(--t-13);font-weight:500;color:var(--ink)}
html .f-region-name small{font-weight:700}
html .f-region-mark{transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),border-color 160ms var(--ease)}
@media (hover:hover){html .f-region-pill:hover .f-region-mark{transform:translateY(-2px);box-shadow:var(--shadow-hover)}html .f-region-pill:is(.is-tier-3,.is-tier-4):hover .f-region-mark{background:var(--teal-ink)}}
html .f-area-city{display:inline-flex;align-items:baseline;gap:var(--s-1);padding:var(--s-1) 0;margin-right:var(--s-3);font-size:var(--t-13);color:var(--ink);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size 200ms var(--ease),color 200ms var(--ease)}
html .f-area-city strong{font-weight:500}
html .f-area-city:is(:hover,:focus-visible){color:var(--teal);background-size:100% 1px}
@media (prefers-reduced-motion:reduce){html .f-region-pill:hover .f-region-mark{transform:none}}
/* ---------- 在籍占い師が 1〜2 人: 横長（丸い顔 72px 左、右に名前・占術）で本文の幅いっぱい。店カードの .is-few と同じ考え（オーナー 2026-11-05「なんでたてがたなの？」） ---------- */
html .face-grid.is-few{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
html .is-few .face-card{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s-4);row-gap:var(--s-1);align-items:center;align-content:center;text-align:left}
html .is-few .face-photo{grid-row:1/span 2;width:72px;margin:0;border-radius:var(--r-pill)}
html .is-few .face-name{justify-content:flex-start;align-self:end}
html .is-few .face-card small{align-self:start}

/* ---------- 押せるものは全部 hover と focus-visible で変わる（オーナー 2026-11-05「ホバーしてもなにもならないのおかしくね？ボタンなのに」） ---------- */
/* 塗りのボタンは濃い teal、線のボタンは mint-faint、お気に入りは mint-faint + ハートが teal。押すと 0.98 倍 */
html :is(.dt-book,.dt-official,.fav-button){transition:background-color 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease),transform 100ms var(--ease)}
html .dt-book:is(:hover,:focus-visible){background:var(--deep);color:#fff}
html .dt-official:is(:hover,:focus-visible){background:var(--mint-faint);border-color:var(--teal-ink);color:var(--teal-ink)}
html .fav-button:is(:hover,:focus-visible){background:var(--mint-faint);border-color:var(--teal-ring);color:var(--teal)}
html :is(.dt-book,.dt-official,.fav-button):active{transform:scale(.98)}
html :is(.dt-book,.dt-official,.fav-button):focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-ring)}
@media (prefers-reduced-motion:reduce){html :is(.dt-book,.dt-official,.fav-button){transition:none}html :is(.dt-book,.dt-official,.fav-button):active{transform:none}}

/* 概要カードと占い師詳細のボタンは 3 つとも同じ四角の角丸・高さ・字（オーナー 2026-11-05「radius全部同じくしかくまるかどにすべき」）。pill は札だけ */
html :is(.sa-actions,.dt-actions) :is(.dt-book,.dt-official,.fav-button){height:48px;border-radius:var(--r-md);font-size:var(--t-14);font-weight:500;letter-spacing:var(--ls-1);box-shadow:none}
html :is(.sa-actions,.dt-actions) :is(.dt-book,.dt-official,.fav-button):focus-visible{box-shadow:0 0 0 3px var(--teal-ring)}
/* ---------- 店の詳細: 見出し帯を 写真 | 店名・本日・街・SNS | 概要カード の 3 列に。下の本文は全幅。1080 以下はカードを帯の下の段、780 以下は店名の下に積む。帯の中なので sticky にしない ---------- */
html .dt-hero-shop .dt-grid{grid-template-columns:minmax(0,5fr) minmax(0,5fr) 280px}
html .dt-below-shop{display:block}
html .dt-hero-shop .shop-aside{position:static;margin-top:0;order:0}
@media (max-width:1080px){html .dt-hero-shop .dt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}html .dt-hero-shop .shop-aside{grid-column:1/-1}}
@media (max-width:780px){html .dt-hero-shop .dt-grid{grid-template-columns:minmax(0,1fr)}}
/* ---------- 詳細の本文は 1100 以上で 2 列の格子（オーナー 2026-11-05「くうかんっもったいなくね？」）。表の横幅の上限は列に合わせて外す。780 以下は 1 列のまま ---------- */
@media (min-width:1100px){
  html :is(.dt-below-shop .dt-main,.dt-below-teacher){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8);align-items:start}
  html .dt-below-shop .dt-main>:is(#sec-staff,#sec-near,#sec-near-t,#sec-price,.dt-pair),
  /* 57 件目の並び: 出演予定・料金・プロフィール・同じ館・同じエリア・運営の店は全幅、良かった | 主な占術と得意な相談 は横に並べる */
  html .dt-below-teacher>:is(#sec-sched,#sec-price,#sec-bio,#sec-peers,#sec-near-t,#sec-shops){grid-column:1/-1}
  html .dt-below-teacher #sec-shops .f-salon-rows{grid-template-columns:minmax(0,1fr)}
  html .dt-below :is(.dt-schedule,.dt-price-raw,.hours-table){max-width:none}
}
/* ---------- 見出し帯の選ぶ欄（psel）のボタンは欄と同じ 44px（格子の中で 140px に伸びていた） ---------- */
html .f-search-fields{align-items:start}
html .f-search-fields .psel .psel-button.psel-button{height:44px;min-height:44px}

/* ---------- 0 件の画面: 印 + 1 文 ---------- */
html .empty-state{display:grid;justify-items:center;gap:var(--s-3);text-align:center}
html .empty-state p{margin:0}
html .empty-icon{color:var(--muted)}

/* ---------- トップのカード: 1100 以上は占い師 4 列、写真は 3:2（縦長にしない。オーナー 2026-11-05「なんでここもちょっとたてながなの？」）。店の顔の列と札は 1 行 ---------- */
html .f-featured :is(.f-person-art,.f-salon-art){height:auto;aspect-ratio:3/2}
@media (min-width:1100px){html .f-featured .f-person-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:781px) and (max-width:1099px){html .f-featured .f-person-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:780px){html .f-featured :is(.f-person-art,.f-salon-art){aspect-ratio:4/3}}
html .f-salon-body .staff-row{flex-wrap:nowrap}
html .staff-more{flex:none;margin-left:var(--s-1);font-size:11px;color:var(--muted)}
@media (max-width:780px){html .f-salon-grid:not(.f-salon-rows) .f-salon-body .staff-row{flex-wrap:wrap}}
/* ---------- /area/ の帯: 左 見出し + 検索 | 右 地図 + 地方の札。地図は右の列の幅いっぱいで、高さは viewBox（1536.8 × 1750.5）に追従（オーナー 2026-11-05「日本地図小さすぎない？」） ---------- */
html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:560px}
html .f-area-hero .f-hero-content{grid-column:1;grid-row:1/span 2}
html .f-area-hero .f-japan-container{grid-column:2;grid-row:1;width:100%;max-width:560px;height:auto;aspect-ratio:1536.8191/1750.5018;justify-self:center}
html .f-area-hero .f-map-badges{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
@media (max-width:1100px){
  html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr);min-height:0;row-gap:var(--s-5)}
  html .f-area-hero .f-hero-content{grid-row:1}
  html .f-area-hero .f-japan-container{grid-column:1;grid-row:2;width:100%;max-width:560px;height:auto}
  html .f-area-hero .f-map-badges{grid-column:1;grid-row:3;display:flex}
}
@media (max-width:780px){html .f-area-hero .f-japan-container{width:240px;height:auto}}
/* ---------- 札の選択（占術・悩み。複数選べる）: 有効は今日出演と同じ teal の塗り + 白文字 ---------- */
html .filter-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
html .chip-toggle{position:relative;display:inline-flex;cursor:pointer}
html .chip-toggle input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
html .chip-toggle span{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--t-13);font-weight:500;transition:background-color 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease)}
html .chip-toggle:hover span{border-color:var(--teal);color:var(--teal)}
html .chip-toggle input:checked+span{border-color:var(--teal);background:var(--teal);color:#fff}
html .chip-toggle input:focus-visible+span{box-shadow:0 0 0 3px var(--teal-ring)}
@media (prefers-reduced-motion:reduce){html .chip-toggle span{transition:none}}

/* ---------- 一覧の絞り込み: 1 行目 都道府県 → 種別 →（街）→ 今日出演 → 名前の欄（右端）、下に札の段 ---------- */
html .filters{display:grid;gap:var(--s-4)}
html .filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
html .filters-row>:is(select,.psel){flex:0 1 180px;min-width:0}
html .filters-row>input[name=q]{flex:1 1 220px;min-width:0;margin-left:auto}
html .filters-row>.today-toggle span{width:auto}
@media (max-width:780px){html .filters-row>:is(select,.psel,input[name=q],.today-toggle){flex:1 1 100%}}

/* ---------- 見出し帯の検索の枠は 2 段: 選ぶ欄 + 探す、その下に札 ---------- */
html .f-search,html .f-hero.f-home-hero .f-search,html .f-hero.f-area-hero .f-search{padding:var(--s-5)}
html .f-search-row,html .f-area-hero .f-search-row,html .f-hero.f-home-hero .f-search-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
html .f-search-fields{flex:1 1 360px;display:flex;flex-wrap:wrap;gap:var(--s-2)}
html .f-search-fields>:is(select,.psel){flex:1 1 140px;width:auto}
html .f-search-fields>.today-toggle{flex:0 0 auto}
html .f-search-row>button{flex:0 0 auto;padding:0 var(--s-5)}
html .f-search .filter-chips,html .f-hero .f-quick{margin-top:var(--s-4)}
@media (max-width:780px){html .f-search-row>button{flex:1 1 100%}html .f-search-fields>*{flex:1 1 100%}}

/* ---------- フッター: 列は中身のある 3 つ、説明は 1 文、見出しは ink の 14px、下段は左寄せの 1 行（オーナー 2026-11-05「余白とかいちもっときれいにしてよなんかばらんすわるい」） ---------- */
html .footer{padding:var(--s-9) 0 var(--s-8)}
html .footer-in{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:var(--s-9)}
html .footer p{max-width:28em;margin:var(--s-3) 0 0;font-size:var(--t-13);color:var(--muted)}
html .footer h3{margin:0 0 var(--s-3);font-size:var(--t-14);font-weight:700;color:var(--ink)}
html .footer-links{display:grid;gap:var(--s-3)}
html .footer-links a{font-size:var(--t-14)}
html .footer-base{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-2) var(--s-5);margin-top:var(--s-8);color:var(--muted)}
@media (max-width:780px){html .footer-in{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}html .footer{padding:var(--s-8) 0 var(--s-6)}}
/* ---------- 街の写真のタイルは 3:2（高さを固定すると横に潰れて写真が帯になる。オーナー 2026-11-05「つぶされたようなさいずかん」）。4 列で幅いっぱい、780 以下は 2 列 ---------- */
html .f-city-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html :is(.f-city-card,.f-city-grid-eight .f-city-card){height:auto;aspect-ratio:3/2}
html .f-city-card img{object-fit:cover;object-position:center}
@media (max-width:780px){html .f-city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 都道府県の一覧の地域の札: 名前の後ろに件数を薄く、今の地域は塗る（47 件目） */
html .tokyo-districts .pill{display:inline-flex;align-items:center;gap:var(--s-1)}
html .tokyo-districts .pill small{color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums}
/* カードの a が inline のままだと、写真と本文の下に行の箱の余りが 40px ほど足され、店カードが 1.31 の縦長になっていた（36 件目）。a を縦の箱にして本文を下まで伸ばす */
html :is(.f-person-card,.f-salon-card)>a{display:flex;flex-direction:column;height:100%}
html :is(.f-person-card,.f-salon-card)>a>:is(.f-person-body,.f-salon-body){flex:1}
/* トップのヒーロー写真（占い館の室内）は主役の水晶玉が画像の中央にあるので、どの幅でも中央で切り抜く（40 件目） */
html .f-hero.f-home-hero .f-hero-photo{background-position:50% 50%}
/* 店カードの名前の行: 種類の印と店名を同じ行に置き、長い店名は印の右で折り返す（印の下へ回ると 1 行増えて縦長になっていた。36 件目） */
html .f-salon-body .name-row{flex-wrap:nowrap;align-items:flex-start}
html .f-salon-body .name-row .kind-mark{margin-top:calc((var(--t-14) * var(--lh-snug) - 16px) / 2)}
/* /about/ の末尾のお問い合わせ（48 件目） */
html .about-contact{padding-bottom:var(--s-8)}
/* 札の列（39 件目）: 占術・悩みの札、/area/ と一覧の街の札、「ほか +N」を同じ形にそろえる。選んだ札・今の街は塗る */
html .filter-chips .is-rest{display:none}
html .filter-chips.is-open .is-rest{display:inline-flex}
html .filter-chips.is-open .chip-more{display:none}
html :is(.chip-more,.f-quick a,.tokyo-districts .pill){display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-family:var(--font-sans);font-size:var(--t-13);font-weight:500;line-height:1;cursor:pointer;transition:background-color 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease)}
html .chip-more{border-style:dashed;color:var(--teal)}
html :is(.chip-more,.f-quick a,.tokyo-districts .pill):hover{border-color:var(--teal);color:var(--teal);background:var(--surface)}
html :is(.chip-more,.f-quick a,.tokyo-districts .pill):focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-ring)}
html .tokyo-districts .pill[aria-current]{border-color:var(--teal);background:var(--teal);color:#fff}
html .tokyo-districts .pill[aria-current] small{color:#fff}
html .f-search .filter-chips+.filter-chips{margin-top:var(--s-2)}
@media (prefers-reduced-motion:reduce){html :is(.chip-more,.f-quick a,.tokyo-districts .pill){transition:none}}
/* 札の有効は今日出演の切替と同じ: teal の塗り + 白文字 + check 16px。無効は線だけ、hover は mint-faint。押した瞬間に 150ms で変わる（39 件目の補足） */
html .chip-toggle span{gap:var(--s-1);transition:background-color 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease)}
html .chip-toggle span .today-on{display:none;flex:none}
html .chip-toggle input:checked+span .today-on{display:block}
html .chip-toggle:hover span{background:var(--mint-faint);border-color:var(--teal);color:var(--teal-ink)}
html .chip-toggle:hover input:checked+span,html .chip-toggle input:checked+span{border-color:var(--teal);background:var(--teal);color:#fff}
html .chip-toggle span small{color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums}
html .chip-toggle input:checked+span small{color:#fff}
html :is(.chip-more,.f-quick a):hover{background:var(--mint-faint)}
/* 29 件目: 押せる要素は全部 hover で変わる（hover の規則が無かった 8 種を足す。押せない disabled は除く） */
html a.brand{transition:opacity 150ms var(--ease)}
html a.brand:hover{opacity:.75}
html .favorites-link{transition:color 150ms var(--ease)}
html .favorites-link:hover{color:var(--teal)}
html :is(.text-link,.f-section-more,.dt-site){transition:color 150ms var(--ease)}
html :is(.text-link,.f-section-more,.dt-site):hover{color:var(--teal-ink)}
html .banner-credit a:hover{text-decoration-thickness:2px}
html .shop-tabs a.is-current:hover{border-bottom-color:var(--teal-ink)}
html .dt-more{transition:background-color 150ms var(--ease),border-color 150ms var(--ease)}
html .dt-more:hover{border-color:var(--teal);background:var(--mint-faint)}
/* 29 件目: ボタンの角丸は --r-md の 1 つ（札・チップは pill のまま別の部品） */
html:root body :is(.head-cta,.primary-button,.primary-link,.btn-primary,.f-search-row button,.filters button,.hero-form button,.dt-more,.dt-book,.dt-official,.fav-button,.voice-send,.pagination button,.psel-button){border-radius:var(--r-md)}
/* 50 件目: 地図の右下の固定の枠。最初は空で見せず、県に hover / focus したら 県名 件数 を ink の地に白で */
html .f-japan-container{position:relative}
html .f-map-tip{position:absolute;right:0;bottom:0;padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);background:var(--ink);color:#fff;font-size:var(--t-12);font-weight:500;line-height:var(--lh-snug);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity 150ms var(--ease)}
html .f-map-tip.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){html .f-map-tip{transition:none}}
/* 枠に影を付けない（地図の影は svg の側に残る） */
html .f-japan-container{filter:none}
/* 51 件目: 札の行の先頭の押せない印（占術 sparkles・悩み heart・街 map-pin）。札と同じ高さの中央に muted で */
html .chips-mark{display:inline-flex;align-items:center;min-height:32px;margin-right:var(--s-1);color:var(--muted)}
html .chips-mark .hi{flex:none}
html .psel .psel-button.psel-button{border-radius:var(--r-md)}
/* 52 件目: 占い師カードの出演の行。今日は teal の太め、次の出演日は muted */
html .f-person-when{display:flex;align-items:flex-start;gap:var(--s-1);min-width:0;color:var(--muted);font-size:var(--t-13);line-height:var(--lh-snug);overflow-wrap:anywhere}
html .f-person-when .hi{flex:none;margin-top:calc((var(--t-13) * var(--lh-snug) - 16px) / 2)}
html .f-person-when.is-today{color:var(--teal);font-weight:600}
/* 53 件目: 占い師カードの本文。キャッチは 1 行、札は小さく muted、料金は muted。本文は 5 行ぶんの高さを保って段の高さを揃える */
html .f-featured .f-person-body,html .result-grid .f-person-body,html .f-person-grid .f-person-body{min-height:calc(var(--s-9) + var(--s-8))}
html .f-person-lead{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2);font-size:var(--t-13);line-height:var(--lh-snug)}
html .f-person-tags .tag{min-height:22px;padding:0 var(--s-2);color:var(--muted);font-size:var(--t-12)}
html .f-person-price{display:flex;align-items:center;gap:var(--s-1);margin-top:auto}
html .f-person-price .hi{flex:none}
/* 21 件目の補足: 丸の 4 段。1〜19 = mint-faint の地 + teal の線、20〜59 = 薄い teal の地 + teal の線、60〜199 = teal 60% の地 + 白の形、200〜 = teal の地 + 白の形 */
html .f-region-pill.is-tier-1 .f-region-mark{background:var(--mint-faint);border-color:var(--teal-ring)}
html .f-region-pill.is-tier-2 .f-region-mark{background:var(--teal-ring);border-color:var(--teal-ring)}
html .f-region-pill.is-tier-3 .f-region-mark{background:rgba(14,139,107,.6);border-color:transparent}
html .f-region-pill.is-tier-4 .f-region-mark{background:var(--teal);border-color:var(--teal)}
html .f-region-pill:is(.is-tier-1,.is-tier-2) .pref-shape{fill:none;stroke:var(--teal);stroke-width:1.5}
html .f-region-pill:is(.is-tier-3,.is-tier-4) .pref-shape{fill:#fff;stroke:#fff}
/* 55 件目: 料金の表は 時間 | 金額 を 120px + 内容の幅に詰める（金額の列が右へ 300px ほど離れていた） */
html .price-table{min-width:0;width:auto}
html .price-table :is(th,.price-time){width:120px}
html .price-table .price-yen{text-align:left}
/* 56 件目: 概要カードの料金の後ろの注記と「ほか N」は muted。帯の本日の状態の語（〜から・営業中）は時間より下げて muted */
html .sa-note{margin-left:var(--s-2);color:var(--muted);font-size:var(--t-12);font-weight:400}
html .dt-hero .today-hours .hours-now,html .dt-hero .today-hours .hours-now.is-open{color:var(--muted)}
/* 57 件目: 占い師の帯も 写真 | 名前など | 概要カード の 3 列（店と同じ）。出演の行は帯の中で大きめに */
html .dt-hero-teacher .dt-grid{grid-template-columns:minmax(0,5fr) minmax(0,5fr) 280px}
@media (max-width:1080px){html .dt-hero-teacher .dt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}html .dt-hero-teacher .shop-aside{grid-column:1/-1}}
@media (max-width:780px){html .dt-hero-teacher .dt-grid{grid-template-columns:minmax(0,1fr)}}
html .dt-hero-teacher .shop-aside{position:static;margin-top:0}
html .dt-when{margin:0 0 var(--s-3)}
html .dt-when .f-person-when{font-size:var(--t-14)}
html .sa-map{white-space:nowrap}
/* 店の本文: 営業時間 | 地図 を横に並べ、狭い幅では縦に */
html .dt-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
html .dt-pair>.dt-section{margin-top:var(--s-8)}
@media (max-width:900px){html .dt-pair{grid-template-columns:minmax(0,1fr);gap:0}}
html #sec-topics .dt-topic-tags+.dt-topic-tags{margin-top:var(--s-3)}
html .dt-topic-tags .chips-mark{min-height:0}
/* 53 件目の補足: 顔カードの本文。行が無い人も段の高さが揃うよう min-height、悩みは muted の 1 行 */
html .face-card{display:flex;flex-direction:column;gap:var(--s-1)}
html .face-card .face-name{min-height:0}
html .face-card .f-person-when{font-size:var(--t-12)}
html .face-card .face-topics{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--t-12)}
html .face-grid{align-items:stretch}
html .face-card .card-good{font-size:var(--t-12)}
html .is-few .face-card{grid-template-rows:none;grid-auto-rows:auto}
html .is-few .face-photo{grid-row:1/span 4}
html .is-few .face-card>:not(.face-photo){grid-column:2}
/* 52 件目の補足: 本日の行は --t-14・700・--teal。先頭の 8px の丸、出演中は 2s で薄く脈打つ（減速設定では止める）。店の帯の本日の時間も同じ色の段 */
html .f-person-when.is-today{color:var(--teal);font-size:var(--t-14);font-weight:700}
html .face-card .f-person-when.is-today{font-size:var(--t-13)}
html .when-dot{flex:none;width:8px;height:8px;margin:calc((1em * var(--lh-snug) - 8px) / 2) var(--s-1) 0 var(--s-1);border-radius:var(--r-pill);background:var(--teal)}
html .is-live .when-dot{animation:when-pulse 2s var(--ease) infinite}
@keyframes when-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--teal-ring)}50%{opacity:.55;box-shadow:0 0 0 4px var(--teal-ring)}}
html .f-person-when .hours-now{font-weight:500}
html .today-hours strong{color:var(--teal);font-weight:700}
@media (prefers-reduced-motion:reduce){html .is-live .when-dot{animation:none}}
/* 33 件目: 写真の無い詳細の置き絵も写真の枠と同じ 4:3（骨組みと本物で帯の高さを揃える） */
html .dt-media .detail-image{height:auto;aspect-ratio:4/3}
html .sa-shop{display:block}
html .sa-shop+.sa-shop{margin-top:var(--s-1)}
/* 28・53 件目の確定: 顔カードは人数に関係なく横長の 1 つの形。左に丸い顔 72px、右に 名前（+ 良かった N）/ 出演 / 占術と悩み。列は 3 → 2（1099 以下）→ 1（780 以下） */
html .face-grid,html .face-grid.is-few{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:1099px){html .face-grid,html .face-grid.is-few{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:780px){html .face-grid,html .face-grid.is-few{grid-template-columns:minmax(0,1fr)}}
html .face-grid .face-card{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;column-gap:var(--s-4);row-gap:var(--s-1);align-content:center;align-items:center;min-height:calc(72px + var(--card-pad) * 2);text-align:left}
html .face-grid .face-photo{grid-row:1/span 3;width:72px;height:72px;margin:0;border-radius:var(--r-pill);overflow:hidden}
html .face-grid .face-card>:not(.face-photo){grid-column:2;min-width:0}
html .face-grid .face-name{justify-content:flex-start}
html .face-grid .f-person-tags{align-items:center;flex-wrap:nowrap;overflow:hidden}
html .face-grid .f-person-tags .face-topics{flex:1;min-width:0;margin-left:var(--s-1)}
/* 8 人目以降は「すべて見る」まで隠す（横長の形でも同じ）。高さは 3 行ぶんで揃える */
html .face-grid .face-card.is-more{display:none}
html .face-grid.is-open .face-card.is-more{display:grid}
html .face-grid .face-card{min-height:calc(72px + var(--card-pad) * 2 + var(--s-4))}

/* ==== レーン42（2026-11-05）: スマホの一覧・詳細の 1 段目・パンくず・ハンバーガー・トップの段・街のタイル・画面の切り替え ==== */
/* パンくず: 親の階層だけ。区切りは字の間を空けて薄く */
html .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2)}
html .breadcrumb .crumb-sep{color:var(--faint)}
html .breadcrumb a{color:inherit}
html .breadcrumb a:hover{color:var(--teal-ink)}

/* 画面の切り替え: main を 0→1 + 6px 上へ 360ms、出る側は 120ms で消す（オーナー 2026-11-05「ふわっと出るのいいね、これはちょっとつよすぎるけど」。hoshiyomido.com の 2s の半分以下） */
:root{--motion-leave:120ms;--motion-enter:360ms}
@keyframes motion-enter{from{opacity:0;transform:translateY(6px)}}
@keyframes motion-enter-back{from{opacity:0;transform:translateY(-6px)}}
/* 節の見出し: 文字を割らず塊 1 つを 8px 下から 400ms、画面に入った時に 1 回だけ（app.js の revealHeads） */
html .reveal{opacity:0;transform:translateY(8px);transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
html .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html .reveal{opacity:1;transform:none;transition:none}}

/* ハンバーガー: 3 本線 → ×（250ms）。メニューは上からフェード + 8px（開く 250ms・閉じる 150ms）、背景を薄く暗く */
html .menu-icon path{transform-box:view-box;transform-origin:12px 12px;transition:transform 250ms var(--ease),opacity 250ms var(--ease)}
html .menu-toggle[aria-expanded="true"] .mi-1{transform:rotate(45deg) translateY(5.25px)}
html .menu-toggle[aria-expanded="true"] .mi-2{opacity:0}
html .menu-toggle[aria-expanded="true"] .mi-3{transform:rotate(-45deg) translateY(-5.25px)}
html .nav-scrim{display:none}
@media (max-width:780px){
  html .mobile-nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;padding:var(--s-2) 0 var(--s-3);background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(15,23,42,.08);opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:opacity 150ms var(--ease),transform 150ms var(--ease),visibility 0s linear 150ms}
  html .mobile-nav.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity 250ms var(--ease),transform 250ms var(--ease),visibility 0s}
  html .mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 var(--s-4);font-size:var(--t-16);font-weight:500;color:var(--ink)}
  html .nav-scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.24);opacity:0;visibility:hidden;transition:opacity 150ms var(--ease),visibility 0s linear 150ms}
  html .nav-scrim.is-open{opacity:1;visibility:visible;transition:opacity 250ms var(--ease),visibility 0s}
  html .menu-toggle{width:44px;height:44px;align-items:center;justify-content:center;padding:0}
}
@media (prefers-reduced-motion:reduce){html :is(.menu-icon path,.mobile-nav,.mobile-nav.is-open,.nav-scrim,.nav-scrim.is-open){transition:none}}

/* ---- 一覧（780 以下）: 見出し帯 1 行・畳んだ絞り込み・下から出る面 ---- */
@media (max-width:780px){
  html .page-banner{padding-block:var(--s-5) var(--s-4)}
  html .page-banner .breadcrumb,html .page-banner .page-lead{display:none}
  html .page-banner .page-title{margin:0;font-size:var(--t-24,24px);line-height:var(--lh-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html .content-main{padding-top:var(--s-3)}
  html .filters.is-sheet{display:block;padding:0;border:0;background:transparent}
  html .filters.is-sheet .filters-row{display:flex;flex-wrap:nowrap;gap:var(--s-2)}
  html .filters.is-sheet .filters-row>:is(select,.psel){flex:1 1 0;min-width:96px;width:auto}
  html .filters.is-sheet .filters-row>.today-toggle{flex:none}
  html .filters.is-sheet .filters-row>.psel{flex:1 1 0;min-width:0}
  html .filters.is-sheet .sheet-open:hover{background:var(--surface);border-color:var(--teal);color:var(--teal-ink)}
  html .filters.is-sheet .filters-row>.today-toggle span{width:auto;padding:0 var(--s-3)}
  html .filters.is-sheet .sheet-open{flex:none;width:auto;display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--t-13);font-weight:500;white-space:nowrap;cursor:pointer}
  html .sheet-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--teal);color:#fff;font-size:var(--t-12);font-variant-numeric:tabular-nums}
  html .filter-picked{display:flex;gap:var(--s-2);margin-top:var(--s-2);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html .filter-picked::-webkit-scrollbar{display:none}
  html .filters.is-sheet .picked-chip{flex:none;display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;padding:0 var(--s-2) 0 var(--s-3);border:1px solid var(--teal);border-radius:var(--r-pill);background:var(--mint-faint);color:var(--teal-ink);font-family:var(--font-sans);font-size:var(--t-13);font-weight:500;cursor:pointer}
  html .result-meta{margin-top:var(--s-3)}
}
html .sheet{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;transition:visibility 0s linear 200ms}
html .sheet.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
html .sheet-scrim{position:absolute;inset:0;background:rgba(15,23,42,.4);opacity:0;transition:opacity 200ms var(--ease)}
html .sheet.is-open .sheet-scrim{opacity:1}
html .sheet-panel{position:absolute;left:0;right:0;bottom:0;height:80vh;height:80dvh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.16);transform:translateY(100%);transition:transform 200ms var(--ease)}
html .sheet.is-open .sheet-panel{transform:none}
html .sheet-panel.is-dragging{transition:none}
html .sheet-grip{flex:none;display:grid;place-items:center;height:28px;cursor:grab;touch-action:none}
html .sheet-grip i{width:40px;height:4px;border-radius:2px;background:var(--line-strong)}
html .sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s-4) var(--s-4);display:grid;align-content:start;gap:var(--s-4)}
html .sheet-body input[name=q]{width:100%}
html .sheet-foot{flex:none;padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
html .filters.is-sheet .sheet-apply{width:100%;min-height:48px;border:0;border-radius:var(--r-md);background:var(--teal);color:#fff;font-family:var(--font-sans);font-size:var(--t-16);font-weight:500;cursor:pointer;font-variant-numeric:tabular-nums}
html.is-sheet-open,html.is-sheet-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){html :is(.sheet,.sheet-scrim,.sheet-panel){transition:none}}

/* ---- 7 日の帯（占い師の出演・店の営業時間で同じ部品）: 横にスクロール、今日を塗る ---- */
html .wk-strip{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4);-webkit-overflow-scrolling:touch}
html .wk-strip::-webkit-scrollbar{display:none}
html .wk-chip{flex:none;display:grid;gap:2px;min-width:76px;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-variant-numeric:tabular-nums;line-height:var(--lh-tight)}
html .wk-chip .wk-d{font-size:var(--t-12);color:var(--muted)}
html .wk-chip .wk-t{font-size:var(--t-13);font-weight:500;color:var(--faint);white-space:nowrap}
html .wk-chip .wk-t small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
html .wk-chip.is-on .wk-t{color:var(--ink)}
html .wk-chip.is-today{border-color:var(--teal);background:var(--teal)}
html .wk-chip.is-today :is(.wk-d,.wk-t,.wk-t small){color:#fff}

/* ---- 詳細の事実の行: 印 16px + 値（語のラベルなし） ---- */
html .sa-row{grid-template-columns:16px minmax(0,1fr)}
html .sa-row.sa-tags .dt-topic-tags{gap:var(--s-1)}
html .sa-row.sa-tags .dt-topic-tag{padding:2px var(--s-2);font-size:var(--t-12)}
html .sa-sns .social-links{margin:0}

/* ---- 占い師の詳細（広い画面）: 帯 = 写真 | 名前 | ボタン 3 つ + 出演予定の表、本文 7 : 右の固定の列 5 ---- */
@media (min-width:781px){
  html .dt-hero-teacher .dt-grid{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:var(--s-6)}
  html .dt-hero-teacher{padding-bottom:var(--s-6)}
  html .dt-side{display:grid;gap:var(--s-4);align-content:start;min-width:0}
  html .dt-side .sa-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0}
  html .dt-side .sa-actions>*{flex:1 1 0;min-width:max-content;padding:0 var(--s-4)}
  html .dt-hero-week .dt-h3{margin:0 0 var(--s-2);font-size:var(--t-14);font-weight:700;color:var(--ink)}
  html .dt-hero-week .dt-schedule.week-wrap{max-width:none}
  html .dt-hero-week .week-table td{height:52px}
  html body .dt-below.dt-below-teacher{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:start;padding-top:0}
  html .dt-below-teacher>.dt-main>.dt-section:first-child{margin-top:var(--s-8)}
  html .dt-below-teacher>#sec-near-t{grid-column:1/-1}
  html .dt-facts-col{margin-top:var(--s-8)}
  html .dt-below-teacher .dt-main{display:block}
}
@media (min-width:781px) and (max-width:1080px){
  html .dt-hero-teacher .dt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html .dt-hero-teacher .dt-side{grid-column:1/-1}
}
/* 狭い画面: 丸 96px + 名前・本日の出演・所属の館 → 7 日の帯 → ボタン 1 行 */
html .dt-hero.is-narrow{padding:var(--s-3) 0 var(--s-4)}
html .dt-hero.is-narrow .breadcrumb{margin-bottom:var(--s-3)}
html .tm-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);align-items:center}
html .tm-photo{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--mint-faint);color:var(--teal-ink);font-family:var(--font-serif);font-size:36px}
html .tm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html .tm-info{display:grid;gap:var(--s-1);min-width:0}
html .tm-info h1{margin:0;font-family:var(--font-serif);font-size:var(--t-24,24px);font-weight:600;line-height:var(--lh-tight);letter-spacing:0;overflow-wrap:anywhere}
html .tm-info .dt-when{margin:0}
html .tm-info .dt-when .f-person-when{font-size:var(--t-13)}
html .tm-shop{display:flex;align-items:flex-start;gap:var(--s-1);margin:0;font-size:var(--t-13);color:var(--muted)}
html .tm-shop .hi{flex:none;margin-top:2px;color:var(--teal)}
html .tm-shop .sa-shop{display:inline}
html .tm-shop .sa-shop+.sa-shop::before{content:"・";color:var(--muted)}
html .tm-week{margin-top:var(--s-4)}
html .sa-actions.is-row{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
html .sa-actions.is-row>*{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);height:44px;padding:0 var(--s-2);font-size:var(--t-13);white-space:nowrap}
html .sa-actions.is-row .dt-book{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:780px){
  html body .dt-below.dt-below-teacher{display:block;padding-top:var(--s-4)}
  html .dt-below-teacher .dt-main{display:block}
  html .dt-below-teacher .dt-catch{margin:0 0 var(--s-4)}
  html .dt-below-teacher .dt-facts{box-shadow:none}
  html .dt-below-teacher .dt-main>.dt-section:first-of-type{margin-top:var(--s-6)}
  /* 店: 写真 3:2 を 160px 高に、帯の情報を詰める */
  html .dt-hero-shop.is-narrow .dt-grid{gap:var(--s-3)}
  html .dt-hero-shop.is-narrow .dt-media :is(.pf-stage,.detail-image){height:160px;aspect-ratio:auto;border-radius:var(--r-md);box-shadow:none}
  html .dt-hero-shop.is-narrow .dt-media :is(.pf-stage img,.pf-main img){height:100%;object-fit:cover}
  html .dt-hero-shop.is-narrow .dt-info h1{margin:0 0 var(--s-2);font-size:var(--t-24,24px);letter-spacing:0}
  html .dt-hero-shop.is-narrow .today-hours{margin:0 0 var(--s-2)}
  html .dt-hero-shop.is-narrow .dt-place{margin:0 0 var(--s-3)}
  html .dt-hero-shop.is-narrow .shop-aside{margin-top:var(--s-2)}
}

/* ---- トップの帯（781 以上）: 見出し → 検索の枠 | 写真 を同じ高さ。検索は 都道府県 | 今日会える | 探す の 1 行 ---- */
@media (min-width:781px){
  html .f-hero.f-home-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"title title" "search photo";column-gap:var(--s-6);align-items:stretch;width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:var(--s-7) 0 0;min-height:0}
  html .f-hero.f-home-hero .f-hero-content{display:contents}
  html .f-hero.f-home-hero .f-hero-content>*{max-width:none}
  html .f-hero.f-home-hero h1{grid-area:title;align-self:end;margin:0 0 var(--s-5);white-space:normal}
  html .f-hero.f-home-hero .f-search{grid-area:search;width:100%;margin:0;align-self:start}
  html .f-hero.f-home-hero .f-hero-photo{grid-area:photo;position:relative;inset:auto;width:auto;height:auto;min-height:0;margin:0;border-radius:24px}
  html .f-hero.f-home-hero .f-search-row{flex-wrap:nowrap}
  html .f-hero.f-home-hero .f-search-fields{display:flex;flex-direction:row;flex-wrap:nowrap;flex:1 1 auto;gap:var(--s-2);min-width:0}
  html .f-hero.f-home-hero .f-search-fields>*{flex:1 1 0;min-width:0;width:auto}
  html .f-hero.f-home-hero .f-search-fields>.today-toggle{flex:none}
  html .f-hero.f-home-hero .f-search-fields>.today-toggle span{width:auto}
  html .f-hero.f-home-hero .f-search-row>button{flex:none}
  html .f-featured{margin-top:var(--s-8);padding-top:0}
  /* 検索の枠の余白: 内側 縦横 --s-8、見出しと枠の間 --s-8、1 行目と札の列の間 --s-6、札の行の間 --s-3（オーナー 2026-11-05「縦にもう少し余白あるべきじゃね」） */
  html .f-hero.f-home-hero .f-search{padding:var(--s-8)}
  html .f-hero.f-home-hero h1{margin-bottom:var(--s-8)}
  html .f-hero.f-home-hero .f-search .filter-chips{margin-top:var(--s-6);row-gap:var(--s-3)}
  html .f-hero.f-home-hero .f-search .filter-chips+.filter-chips{margin-top:var(--s-3)}
}

/* ---- トップの街: タイルは写真のある街だけ、列数 × 整数。残りと写真の無い街は文字の札 ---- */
html .f-home-bottom .f-city-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:780px){html .f-home-bottom .f-city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
html .f-city-grid .is-cut{display:none}
html .f-city-grid.is-empty{display:none}
html .f-city-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
html .f-city-chip{display:inline-flex;align-items:baseline;gap:var(--s-1);min-height:32px;padding:6px var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--t-13);font-weight:500;line-height:1.4;transition:border-color 150ms var(--ease),color 150ms var(--ease)}
html .f-city-chip small{color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums}
html .f-city-chip:hover{border-color:var(--teal);color:var(--teal-ink)}
html .f-city-chip.is-twin{display:none}
html .f-city-chip.is-twin.is-shown{display:inline-flex}
html .f-city-chips:not(:has(.f-city-chip:not(.is-twin),.is-shown)){display:none}

/* サイトについての 4 ページ（pages.js は inline style を class にした。68 件目） */
html .guide-card{max-width:850px;margin-inline:auto}
html .guide-card .guide-h2{font-size:var(--t-18);margin:var(--s-6) 0 var(--s-3)}
html .guide-card .guide-h2:first-child{margin-top:0}

/* ---- カードの行の位置を文字数に依らず揃える（オーナー 2026-11-05「文字数で位置ズレるよくないね」） ----
   店名は 2 行ぶんの高さに固定（3 行目以降は省略）、印は店名の 1 行目の左。住所・時間は 1 行。顔の行と札の行は下端へ */
html :is(.f-salon-body,.f-person-body) .name-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--s-1)}
/* 印は各行の左の 20px の列に固定し、文字は印の右の列に揃える（札の行と顔の行も同じ列から始める。オーナー 2026-11-05「タグとかアイコンとか」） */
html :is(.f-salon-body,.f-person-body)>*{position:relative;padding-left:24px}
html :is(.f-salon-body,.f-person-body)>*>:is(.hi,.when-dot):first-child{position:absolute;left:0;top:calc((1lh - 16px) / 2);margin:0}
html :is(.f-salon-body,.f-person-body)>*>.when-dot:first-child{left:4px;top:calc((1lh - 8px) / 2)}
html .f-person-body>.f-person-tags,html .f-salon-body>.staff-row{display:flex;flex-wrap:nowrap;overflow:hidden;min-width:0}
html .f-person-body>.f-person-tags>*,html .f-salon-body>.staff-row>*{flex:none}
html .f-person-body>.f-person-when{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .f-person-body>.f-person-when>span{white-space:nowrap}
html .f-person-body>.f-person-lead{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .f-salon-body .name-row strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:var(--lh-snug);min-height:calc(var(--t-14) * var(--lh-snug) * 2)}
html .f-person-body .name-row strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--lh-snug)}
html .f-salon-body>span:not(.name-row){flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html .f-salon-body>span:not(.name-row)>.hi{flex:none}
html .f-person-body>.f-person-tags{margin-top:auto}
html .f-person-body:not(:has(.f-person-tags))>.f-person-price{margin-top:auto}

/* 見出しの店名・人名: 語の途中で折らず（空白の前で折る）、行の長さを揃える。1 字だけ次の行に落ちない（オーナー 2026-11-05 71 件目） */
html :is(.dt-info h1,.tm-info h1,.f-salon-body .name-row strong){word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
html .dt-info h1{font-size:clamp(24px,2.4vw,34px)}
/* 同じ行のカードは同じ高さに伸ばし、下の行（料金・顔）を下端へ */
html :is(.f-person-grid,.result-grid){align-items:stretch}
html .f-person-card{display:flex;flex-direction:column}
html .f-person-card>a{flex:1 1 auto;display:flex;flex-direction:column}
html .f-person-card>a>.f-person-body{flex:1 1 auto}
html body .f-person-body>.f-person-tags{flex-wrap:nowrap}
@media (min-width:781px){html body .f-content .f-featured{margin-top:var(--s-8)}}
html body .f-person-body>.f-person-price{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 骨組みから中身へ: 初回の読み込みだけ main を 240ms で 6px 上へ現す。格子の入れ替えは 出る 100ms → 入る 200ms（66 件目の補足） */
html main.is-arrive{animation:sk-arrive 240ms var(--ease) backwards}
@keyframes sk-arrive{from{opacity:0;transform:translateY(6px)}}
html .result-grid.is-page-out{transition:opacity 100ms var(--ease)}
html .result-grid.is-page-in{animation-duration:200ms}
@media (prefers-reduced-motion:reduce){html main.is-arrive{animation:none}}
/* 一覧の区切りの行（占い師 N 人）は格子の 1 行全部を使う（台帳 02） */
html .result-grid>.result-split{grid-column:1/-1;margin:var(--s-4) 0 0}
/* 0 件のときの隣の県（72 件目） */
html .empty-near{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-4);margin:var(--s-3) 0 0}
html .empty-near small{margin-left:var(--s-1);color:var(--muted);font-size:var(--t-12)}

/* ---- レーン47 ---- */
/* 73 件目: 選んだ札は塗りだけ。印は置かない（札の幅が変わらない） */
html .chip-toggle span .today-on{display:none}
/* 74 件目: /teachers/ ⇄ /shops/ のリンクは見出しの右 */
html .banner-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);min-width:0}
html .banner-row .page-title{min-width:0}
html .banner-swap{flex:none;display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;color:var(--teal-ink);font-size:var(--t-14);font-weight:500}
html .page-banner.has-photo .banner-swap{color:#fff}
html .banner-swap:hover{text-decoration:underline;text-underline-offset:3px}
/* A1・A2: 畳んだ 1 行は 都道府県 | 本日出演 | 絞り込む の 3 列。都道府県は残りの幅を全部使い県名を見せる */
@media (max-width:780px){
  html .filters.is-sheet .filters-row{display:grid;grid-template-columns:minmax(104px,1fr) auto auto;gap:var(--s-2)}
  html .filters.is-sheet .filters-row>*{min-width:0;width:auto}
  html .filters.is-sheet .filters-row>.today-toggle span{padding:0 var(--s-3)}
}
/* A3: 出演の行。詳細と顔のカードは 時間 状態 · 店名 を 1 行に続け、カードは 1 行目 時間 + 状態、2 行目 店名（省略） */
html .when-txt>*{white-space:nowrap}
html .when-shop::before{content:" · "}
html .f-person-body>.f-person-when{white-space:normal}
html .f-person-body>.f-person-when>.when-txt{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"t s" "p p";align-items:baseline;white-space:normal}
html .f-person-body .when-t{grid-area:t}
html .f-person-body .when-txt>.hours-now{grid-area:s;justify-self:start}
html .f-person-body .when-shop{grid-area:p;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink-2)}
html .f-person-body .when-shop::before{content:none}
/* 2 列の狭いカード（≤480）は時間と状態が 1 行に入らない（実測 13px で 112px + 36px > 117px）ので、状態は店名の行の頭へ */
@media (max-width:480px){
  html .result-grid,html .f-person-grid,html .f-featured{--card-pad:var(--s-3)}
  html .f-person-body>.f-person-when.is-today{font-size:var(--t-13)}
  html .f-person-body>.f-person-when>.when-txt{grid-template-areas:"t t" "s p"}
  html .f-person-body .when-txt>.hours-now{margin:0 var(--s-1) 0 0}
}
/* A4: 占い師の詳細の帯の右は ボタン → 7 日の表 で、写真と同じ高さまで伸ばす */
@media (min-width:1081px){
  html .dt-hero-teacher .dt-grid{align-items:stretch}
  html .dt-hero-teacher .dt-side{display:flex;flex-direction:column;gap:var(--s-4)}
  html .dt-hero-teacher .dt-hero-week{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  html .dt-hero-teacher .dt-hero-week .week-wrap{flex:1 1 auto;display:flex}
  html .dt-hero-teacher .dt-hero-week .week-table{height:100%}
  html .dt-hero-teacher .dt-hero-week .week-table td{height:auto}
}
html .wk-none{color:var(--faint)}
/* 33: カードの札の行の残りは +N（札を途中で欠けさせない） */
html .f-person-body>.f-person-tags>.is-cut{display:none}
html .f-person-body>.f-person-tags>.tag-more{color:var(--muted);background:var(--surface);border-color:var(--line)}
html .f-person-body>.f-person-tags>.tag.is-solo{flex:0 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}
/* 58: メニューの先頭は主役の入口 */
html .mobile-nav a.mn-today{color:var(--teal-ink);font-weight:700}
/* 20: お気に入り 0 件の探しに行くボタン */
html .empty-state .primary-button{margin-top:var(--s-4)}
/* 17: ページ送りの今の番号はブランドの緑 */
html .pagination button[aria-current="page"],html .pagination button.active{background:var(--teal);border-color:var(--teal);color:#fff}
/* 10: 街のタイルの件数は 12px、写真の下側を暗くして読ませる */
html .f-city-card .f-city-bottom{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
html .f-city-card .f-city-bottom small{font-size:var(--t-12);font-weight:500;color:#fff}
/* 24: 営業時間の表の下の「定休日」の行も、表と同じ列から値を始める（th 3em + 左右 10px） */
html .hours-note{display:grid;grid-template-columns:calc(3em + 10px) minmax(0,1fr);column-gap:10px;padding:0 0 0 10px}
html .hours-note>span{min-width:0}
/* 13: エリアの検索の欄は 780 以下で縦に 1 列（選ぶ欄の文字が切れない） */
@media (max-width:780px){
  html .f-area-hero .f-search-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  html .f-area-hero .f-search-fields>*{width:100%;min-width:0}
}
/* 28: 地方の札は 390 で折らず横に流す */
@media (max-width:780px){
  html .f-area-hero .f-map-badges{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--s-4) * -1);padding-inline:var(--s-4)}
  html .f-area-hero .f-map-badges::-webkit-scrollbar{display:none}
  html .f-area-hero .f-map-badges>*{flex:none}
}
/* 44px: 押せる範囲を 44px に（見た目と行の高さは変えず、透明な当たりを広げる） */
@media (max-width:780px){
  html :is(.footer-links a,.breadcrumb a,.f-section-more,.text-link,.f-city-chip,.f-area-city,.sns-btn){position:relative}
  html :is(.footer-links a,.breadcrumb a,.f-section-more,.text-link,.f-area-city)::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  html :is(.f-city-chip,.sns-btn)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  html .menu-toggle{min-width:44px;min-height:44px}
}
/* 動きの外れ: カードの hover は浮く + 影だけ（写真の寄りと線の色の変化を外す）。地図の hover は --dur（240ms） */
@media (hover:hover){
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.ed-card,.card):hover img,html :is(.card,.ed-card,.f-city-card):hover img{transform:none}
  html :is(.listing-card,.f-person-card,.f-salon-card,.f-area-shop,.f-topic-card,.topic-card,.area-card,.related-link,.ed-card,.card):hover{border-color:var(--line)}
}
html .f-japan-container svg g[data-pref] path{transition-duration:var(--dur)}
html .pref-shape{transition-duration:var(--dur)}

/* 34: iPad 縦（768〜780）もトップの帯は 見出し → 検索の枠 | 写真 の 2 列（781 以上と同じ並び） */
@media (min-width:768px) and (max-width:780px){
  html .f-hero.f-home-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"title title" "search photo";column-gap:var(--s-6);align-items:stretch;width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:var(--s-7) 0 0;min-height:0}
  html .f-hero.f-home-hero .f-hero-content{display:contents}
  html .f-hero.f-home-hero .f-hero-content>*{max-width:none}
  html .f-hero.f-home-hero h1{grid-area:title;align-self:end;margin:0 0 var(--s-5);white-space:normal}
  html .f-hero.f-home-hero .f-search{grid-area:search;width:100%;margin:0;align-self:start}
  html .f-hero.f-home-hero .f-hero-photo{grid-area:photo;position:relative;inset:auto;width:auto;height:auto;min-height:0;margin:0;border-radius:24px}
  html .f-hero.f-home-hero .f-search-row{flex-wrap:nowrap}
  html .f-hero.f-home-hero .f-search-fields{display:flex;flex-direction:row;flex-wrap:nowrap;flex:1 1 auto;gap:var(--s-2);min-width:0}
  html .f-hero.f-home-hero .f-search-fields>*{flex:1 1 0;min-width:0;width:auto}
  html .f-hero.f-home-hero .f-search-fields>.today-toggle{flex:none}
  html .f-hero.f-home-hero .f-search-fields>.today-toggle span{width:auto}
  html .f-hero.f-home-hero .f-search-row>button{flex:none}
  html .f-hero.f-home-hero .f-hero-photo{display:block}
  html .f-hero.f-home-hero .f-search-fields>select{flex:1 0 120px}
}
/* 24 の補正: 実測で表の値より 20px 右だったので列を詰める */
html .hours-note{grid-template-columns:calc(3em - 10px) minmax(0,1fr)}
/* 79: 顔カードは店の詳細の在籍占い師の部品のまま（オーナー 2026-11-05「カードこっちきれいだからこれにすべきでは」）。占い師の詳細の「同じ館の占い師」も本文の全幅に出して同じ幅にする。札・名前・出演は折らず 1 行、入らない札は +N、行の高さは揃える */
html .face-grid{grid-auto-rows:1fr}
html .face-grid .face-name strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .face-grid .f-person-when{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0}
html .face-grid .f-person-when .when-txt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .face-grid .f-person-tags>.tag{flex:none;white-space:nowrap}
html .face-grid .f-person-tags>.is-cut{display:none}
html .face-grid .f-person-tags>.tag-more{color:var(--muted);background:var(--surface);border-color:var(--line)}
@media (min-width:781px){html .dt-below-teacher>#sec-peers{grid-column:1/-1}}
/* 75: 店の詳細の広い画面 = 写真 | 店名・本日・事実の行 | ボタン 2 つ → 7 日の営業時間 → 確認日。右の列はカードの枠なしで写真と同じ高さ */
@media (min-width:781px){
  html .dt-hero-shop.is-wide .dt-grid{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:var(--s-6);align-items:stretch}
  html .dt-hero-shop.is-wide{padding-bottom:var(--s-6)}
  html .dt-hero-shop.is-wide .dt-info h1{margin:0 0 var(--s-3);font-size:clamp(22px,2vw,30px)}
  html .dt-hero-shop.is-wide .dt-side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
  html .sh-actions{display:flex;flex-wrap:nowrap;gap:var(--s-2);margin:0}
  html .sh-actions>*{flex:1 1 0;min-width:0;padding:0 var(--s-3)}
  html .sh-facts{display:grid;gap:var(--s-2);margin:var(--s-4) 0 0}
  html .sh-facts .sa-row{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:var(--s-2);align-items:start;font-size:var(--t-14)}
  html .sh-facts .sa-note{display:block}
  html .dt-hero-shop.is-wide .dt-hero-week .dt-h3{margin:0 0 var(--s-2);font-size:var(--t-14);font-weight:700;color:var(--ink)}
}
@media (min-width:781px) and (max-width:1080px){
  html .dt-hero-shop.is-wide .dt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html .dt-hero-shop.is-wide .dt-side{grid-column:1/-1}
}
html .dt-official.is-primary{background:var(--teal);border-color:var(--teal);color:#fff}
html .dt-official.is-primary:is(:hover,:focus-visible){background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
/* 76: 概要カードと帯の中のリンクは文字の幅だけ。下線は文字の下だけ */
html :is(.sa-card,.sh-facts,.dt-facts) a{display:inline-flex;align-items:center;gap:var(--s-1);width:auto;max-width:100%;text-decoration:none;border-bottom:0}
/* 127: 下線は motion.css の 1 本だけ（ここで text-decoration を足すと二重になる） */
html .sa-row .sa-val{min-width:0}
html .dt-topic-tags>.is-cut{display:none}
html .dt-topic-tags .tag-more-li button{all:unset;cursor:pointer;color:var(--muted)}
/* 77: Turnstile の箱は送るの行の下へ（見えない間は高さ 0 で、送るは選ぶ欄と同じ行の右端のまま。台帳 12） */
html .voice-row{row-gap:0}
html .voice-row .voice-ts{order:9}
/* 82: 地図の県の札は pointer の横。白地 + 影 + 緑の字。hover の県は濃い緑 */
html .f-map-tip{right:auto;bottom:auto;left:0;top:0;background:var(--surface);color:var(--teal-ink);box-shadow:var(--shadow-panel);border:1px solid var(--line);white-space:nowrap;z-index:2}
html .f-japan-container svg g[data-pref]:is(:hover,:focus) path{fill:var(--teal)}
/* 85: 出演の店名のリンクは文字の幅だけ下線、矢印なし */
html :is(a.when-shop,.when-shop.is-go,a.wk-shop){color:inherit;cursor:pointer}
html :is(a.when-shop,.when-shop.is-go,a.wk-shop):hover{text-decoration:underline;text-underline-offset:3px}
/* 86: 店の 営業中 の脈の点（占い師の 出演中 と同じ .when-dot） */
html .hours-now.is-live{display:inline-flex;align-items:center}
html .hours-now.is-live .when-dot{position:static;margin:0 var(--s-1) 0 0;width:6px;height:6px}
/* 88: 行頭の語（占術 / 得意 / 所属 / SNS / 料金）は幅 3.5em の薄い字、縦は値の 1 行目に揃える */
html .sa-row.is-word{grid-template-columns:3.5em minmax(0,1fr);align-items:baseline}
html .sa-row.is-word.sa-tags{align-items:start}
html .sa-word{color:var(--muted);font-size:var(--t-12);line-height:24px;white-space:nowrap}
html .sa-row.sa-sns .social-links{margin:0}
html .chips-mark.is-word{flex:none;width:3.5em;color:var(--muted);font-size:var(--t-12);font-weight:500;white-space:nowrap}
/* 75: 店の詳細の帯（とタブ）の下の空きは --s-8 まで */
html body .dt-below.dt-below-shop{padding-top:0}
html .dt-below-shop>.dt-main>.dt-section:first-child{margin-top:var(--s-8)}
/* 92: 帯の左に 占術 1 行・得意 1 行・所属・SNS・確認日。写真の高さは文字に合わせて 240〜360px */
@media (min-width:781px){
  html .dt-hero-teacher .tm-facts{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
  html .dt-hero-teacher .dt-info>.dt-checked{display:block;margin-top:var(--s-3)}
  html .dt-hero-teacher .dt-media{display:flex;flex-direction:column}
  html .dt-hero-teacher .dt-media>:is(.pf,.detail-image){flex:1 1 auto;min-height:240px;max-height:360px}
  html .dt-hero-teacher .dt-media .pf-stage{flex:1 1 auto;aspect-ratio:auto;min-height:240px;max-height:360px}
  html .dt-hero-teacher .dt-media .detail-image{aspect-ratio:auto;height:auto}
}
/* 94: /area/ の帯は 左 = 見出し → 検索の枠 → 地方の札 を上揃え、右 = 地図。帯の高さは地図に合わせる（1440 で地図 560px 幅） */
html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr) 560px;grid-template-rows:auto;align-items:start;min-height:0;column-gap:var(--s-7);padding-top:var(--s-6);padding-bottom:var(--s-6)}
html .f-area-hero .f-hero-content{grid-column:1;grid-row:1;align-self:start}
html .f-area-hero .f-japan-container{grid-column:2;grid-row:1;width:100%;max-width:none}
html .f-area-hero .f-hero-content .f-map-badges{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-2);margin-top:var(--s-4)}
@media (max-width:1100px){
  html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--s-6)}
  html .f-area-hero .f-japan-container{grid-column:2;grid-row:1;width:100%;max-width:none}
}
@media (max-width:780px){
  html .f-hero.f-area-hero{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5);padding-top:var(--s-5);padding-bottom:var(--s-5)}
  html .f-area-hero .f-japan-container{grid-column:1;grid-row:2;width:240px}
  html .f-area-hero .f-hero-content .f-map-badges{flex-wrap:nowrap}
}
/* 7: 地図の style 属性を外したので、県の g の外の島（佐渡・隠岐・南西の島など）は既定の黒い塗りになる。県と同じ塗りにする */
html .f-japan-container svg path{fill:#68baab;stroke:none}
/* 98: 占い師の詳細の 2 列は .dt-cols に閉じる（sticky の親を本文と右の列だけにして、下の節に重ならない） */
@media (min-width:781px){
  html body .dt-below.dt-below-teacher{display:block}
  html .dt-below-teacher>.dt-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:start}
  html .dt-below-teacher>.dt-cols>.dt-main>.dt-section:first-child{margin-top:var(--s-8)}
}
/* 97: 帯の右の列のボタンは 予約する（塗り）→ 公式プロフィールを見る（枠線）→ お気に入り（枠線）を幅いっぱい・同じ 48px。外へ出るリンクの ↗ は右端。付いてくる（sticky）物は置かない（89 件目の 2 回目） */
html .sa-actions.is-col{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin:0}
html .sa-actions.is-col>*{position:relative;width:100%;height:48px;margin:0;padding:0 var(--s-6);font-size:var(--t-14);font-weight:700}
html .sa-actions.is-col .fav-button{border-radius:var(--r-md);font-weight:500}
html .sa-actions.is-col a .hi-after{position:absolute;right:var(--s-4);top:50%;margin:-8px 0 0}
html .dt-hero-teacher .dt-info>.dt-when{margin:var(--s-2) 0 0}
/* 91: 一覧とトップの占い師カードの出演は 時間 → 状態 → 店名 の 1 行（店名は残りの幅で省略） */
html .f-person-body>.f-person-when>.when-txt{display:flex;align-items:baseline;gap:var(--s-1);min-width:0;white-space:nowrap}
html .f-person-body .when-txt>.hours-now{margin:0}
html .f-person-body .when-shop{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html .f-person-body .when-shop::before{content:"· ";color:var(--faint)}
/* 104: SNS のボタンの塗りは各社の色。Instagram はグラデーション、TikTok は黒地に水色と赤の影、note は黒 */
html .social-links a.sns-btn-instagram,html .social-links a.sns-btn-instagram:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
html .social-links a.sns-btn-tiktok .sns-icon{filter:drop-shadow(-1px -1px 0 #69c9d0) drop-shadow(1px 1px 0 #ee1d52)}
html .social-links a.sns-btn-note,html .social-links a.sns-btn-note:hover{background:#000}
/* 108: 詳細の本文の末尾の 1 行（誤りの報告） */
html .dt-report{margin:var(--s-6) 0 0;font-size:var(--t-13)}
/* 103: 事実の行は 語か印の列 4em + 値（帯・概要カード・固定カードで同じ）。値の 2 行目は値の列の中で折る。「ほか N」は値の右 */
html :is(.sh-facts,.sa-card,.tm-facts) .sa-row,html :is(.sh-facts,.sa-card,.tm-facts) .sa-row.is-word{display:grid;grid-template-columns:4em minmax(0,1fr);column-gap:0;align-items:baseline}
html :is(.sh-facts,.sa-card,.tm-facts) .sa-row>.hi{align-self:start;margin-top:3px}
html :is(.sh-facts,.sa-card,.tm-facts) .sa-row.sa-tags{align-items:start}
html :is(.sh-facts,.sa-card,.tm-facts) .sa-note{display:inline;margin-left:var(--s-2)}
html :is(.sh-facts,.sa-card,.tm-facts) .sa-row.sa-sns{padding:var(--s-3) 0;align-items:center}
html :is(.sh-facts,.tm-facts) .sa-row{font-size:var(--t-14);line-height:var(--lh-snug)}
/* 102・103: 店の帯（広い画面）= 写真 | 文字の列（帯の半分以上）。文字の列の中で 店名 → 本日 → 事実の行、その下に ボタン 2 つ → 営業時間の 7 日の札、確認日は右下。写真と文字の間は --s-8 */
@media (min-width:781px){
  html .dt-hero-shop.is-wide .dt-grid{grid-template-columns:minmax(0,9fr) minmax(0,16fr);grid-template-areas:"media info" "media side";column-gap:var(--s-8);row-gap:var(--s-5);align-items:start}
  html .dt-hero-shop.is-wide .dt-media{grid-area:media;align-self:stretch;display:flex;flex-direction:column}
  html .dt-hero-shop.is-wide .dt-media>:is(.pf,.detail-image){flex:1 1 auto;min-height:240px;max-height:420px}
  html .dt-hero-shop.is-wide .dt-media .pf-stage{flex:1 1 auto;aspect-ratio:auto;min-height:240px;max-height:420px}
  html .dt-hero-shop.is-wide .dt-media .detail-image{aspect-ratio:auto;height:auto}
  html .dt-hero-shop.is-wide .dt-info{grid-area:info;min-width:0}
  html .dt-hero-shop.is-wide .dt-side{grid-area:side;grid-column:auto;min-width:0}
  html .dt-hero-shop.is-wide .sh-actions>*{height:48px;flex:1 1 0}
}
@media (min-width:781px) and (max-width:1080px){
  html .dt-hero-shop.is-wide .dt-grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--s-6)}
}
/* 89 件目の 2 回目: 付いてくるカードは置かない（.info-aside も流れる）。残す sticky は ヘッダーと店の節のタブだけ（移動の道具でカードではない） */
html .info-aside{position:static}
/* 110: 横長の店カード（写真 36% | 文字）の文字の列は切らない。状態の札は時間の右に入らなければ下の行へ、顔の行は 顔 + N と 本日・在籍 の札を入らなければ 2 行に（オーナー 2026-11-05「みきれてる」） */
html .f-salon-rows .f-salon-card>a{grid-template-columns:36% minmax(0,1fr)}
html .f-salon-body>.staff-row,html .f-salon-rows .f-salon-body .staff-row{flex-wrap:wrap;overflow:visible;row-gap:var(--s-1)}
html .f-salon-body .f-salon-hours{flex-wrap:wrap}
html .f-salon-body .f-salon-hours>*{min-width:0}
/* 90: 開いたメニューの面は画面いっぱい・下の 2 角は --r-lg。項目は 56px の押せる行（hover / 押した時は薄い灰色を --r-md で）、先頭は塗りの「本日出演の占い師」（オーナー 2026-11-05「radiusもっとつけて」「ホバーの灰色もつけてよ」） */
@media (max-width:780px){
  html .mobile-nav{left:0;right:0;width:100%;max-width:none;margin:0;border-radius:0 0 var(--r-lg) var(--r-lg);padding:var(--s-3) 0 var(--s-4)}
  html .mobile-nav a{display:flex;align-items:center;min-height:56px;margin:0 var(--s-4);padding:0 var(--s-4);border:0;border-radius:var(--r-md);transition:background-color var(--dur) var(--ease)}
  html .mobile-nav a:not(.mn-today):is(:hover,:active){background:var(--surface-2)}
  html .mobile-nav a.mn-today{justify-content:center;margin:0 var(--s-4) var(--s-2);min-height:48px;background:var(--teal);color:#fff;font-weight:700}
  html .mobile-nav a.mn-today:is(:hover,:active){background:var(--teal-ink)}
}
@media (prefers-reduced-motion:reduce){html .mobile-nav a{transition:none}}
/* 95: トップの見出しは検索の枠の上 --s-5 = 24px（見出しと枠を 1 つの塊に。前は --s-8 = 64px。オーナー 2026-11-05「文字位置ちょっと上すぎない？」「運命の占い師が見つかる ってもじうえすぎない？」） */
@media (min-width:781px){html .f-hero.f-home-hero h1{margin-bottom:var(--s-5)}}
/* 123: 7 日の表（出演予定と営業時間で同じ部品。78c0a26 の week-table の見た目へ戻す）: 外枠 1px・角 --r-md、見出しの段は --surface-2、今日の列だけ --mint-faint、無い日は —（オーナー 2026-11-05「さっきの出演予定のきれいだったのにもどしてよ」）
   115: 時間は 1 行で折らない。店名は支店名だけ 2 行まで、色は全部同じ灰（所属と違う店も色で分けない） */
html .wkg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);font-variant-numeric:tabular-nums}
html .wkg-col{display:grid;grid-template-rows:auto 1fr;min-width:0}
html .wkg-col+.wkg-col{border-left:1px solid var(--line)}
html .wkg-h{display:flex;flex-direction:column;align-items:center;padding:var(--s-2) var(--s-1);border-bottom:1px solid var(--line);background:var(--surface-2);line-height:var(--lh-tight)}
html .wkg-dow{font-size:var(--t-12);color:var(--muted)}
html .wkg-date{margin-top:2px;font-size:var(--t-16);font-weight:700;color:var(--ink)}
html .wkg-col.is-today,html .wkg-col.is-today .wkg-h{background:var(--mint-faint)}
html .wkg-col.is-today :is(.wkg-dow,.wkg-date){color:var(--teal-ink)}
html .wkg-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);min-height:64px;padding:var(--s-2) 2px;text-align:center;font-size:var(--t-12);line-height:var(--lh-tight);color:var(--ink)}
html .wkg-one{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;max-width:100%}
html .wkg-t{white-space:nowrap;font-weight:500;letter-spacing:-.01em}
html .wkg-t.is-shop-h{font-weight:400;color:var(--muted)}
html .wkg-t.is-on{color:var(--teal)}
html .wkg-shop{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;font-size:11px;font-weight:400;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
html a.wkg-shop{cursor:pointer}
html a.wkg-shop:hover{text-decoration:underline;text-underline-offset:3px}
html .wkg .wk-none,html .wkg .wk-off{color:var(--faint)}
html .dt-hero-week .wkg,html .tm-week .wkg{flex:none}
html .tm-week>.dt-h3{margin:0 0 var(--s-2);font-size:var(--t-14);font-weight:700;color:var(--ink)}
/* 狭い画面: 同じ表を 1 日 1 行（左に 曜日 日付、右に 時間 → 店名）。7 列では時間が 1 行に入らない */
@media (max-width:780px){
  html .wkg{grid-template-columns:minmax(0,1fr)}
  html .wkg-col{grid-template-columns:76px minmax(0,1fr);grid-template-rows:none}
  html .wkg-col+.wkg-col{border-left:0;border-top:1px solid var(--line)}
  html .wkg-h{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-bottom:0;border-right:1px solid var(--line)}
  html .wkg-date{margin:0;font-size:var(--t-14)}
  html .wkg-c{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;column-gap:var(--s-4);row-gap:var(--s-1);min-height:40px;padding:var(--s-2) var(--s-3);text-align:left;font-size:var(--t-13)}
  html .wkg-one{flex-direction:row;align-items:baseline;gap:var(--s-2)}
  html .wkg-shop{-webkit-line-clamp:1;font-size:var(--t-12)}
}
/* 123: 7 日の中に出演が無く先にあるときの「次の出演」1 日 1 行（5 行まで） */
html .wk-next{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-variant-numeric:tabular-nums}
html .wk-next li{display:flex;align-items:baseline;gap:var(--s-3);min-width:0;padding:var(--s-2) var(--s-3);font-size:var(--t-13);line-height:var(--lh-snug)}
html .wk-next li+li{border-top:1px solid var(--line)}
html .wk-next-d{flex:none;min-width:5.5em;font-weight:700;color:var(--ink)}
html .wk-next .wkg-shop{-webkit-line-clamp:1;font-size:var(--t-12)}
/* 124: 確認日は帯の左下に薄い 1 行（右のカードからは外した） */
html .dt-hero :is(.dt-info,.tm-info)>.dt-checked{display:block;margin:var(--s-3) 0 0;font-size:var(--t-12);color:var(--faint)}
/* 126: 店の予約先を借りたときの添え書き */
html .dt-book-via{display:block;font-size:var(--t-12);color:var(--muted);text-align:center}
html .sa-actions.is-col>.dt-book-via{height:auto;margin:calc(var(--s-1) * -1) 0 var(--s-1);padding:0;font-weight:400}
html .dt-hero-teacher.is-narrow .dt-book-via{margin-top:var(--s-1)}
/* 122: 店の帯の左 = 題（2 行まで・長い題は 1 段小さく）→ 本日 → 事実の行 → ボタン → 確認日。右（下）は営業時間の表だけ */
@media (min-width:781px){
  html .dt-hero-shop.is-wide .dt-info h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  html .dt-hero-shop.is-wide .dt-info h1.is-long{font-size:clamp(20px,1.6vw,24px)}
  html .dt-hero-shop.is-wide .dt-info>.sh-actions{margin-top:var(--s-5);max-width:440px}
}
/* 127: 誤りの報告は 旗の印 + 文字。下線は無し、ホバーは色だけ（オーナー 2026-11-05「ホバーデザインおかしいにじゅうう」「あと報告の側マークじゃね？」） */
html .dt-report-a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--muted);font-size:var(--t-13);text-decoration:none;transition:color 150ms var(--ease)}
html .dt-report-a:is(:hover,:focus-visible){color:var(--teal-ink)}
/* 123 の手本（オーナーの絵）に合わせる: 枠の中の時間は普通の太さ、店名は表の下に薄く 1 行。広い画面の占い師の帯では表を写真の高さまで伸ばす */
html .wkg-t{font-weight:400;font-size:var(--t-13);letter-spacing:-.02em}
html .wk-note{margin:var(--s-2) 0 0;font-size:var(--t-12);color:var(--muted)}
html .wk-note>.wkg-shop{display:inline;font-size:inherit}
@media (min-width:1081px){
  html .dt-hero-teacher .dt-hero-week>.wkg{flex:1 1 auto}
}
/* 123: 列の中身は列の幅を超えない（格子の列の既定 auto が中身に合わせて広がり、外枠で切れていた）。時間は – の後でだけ折る */
@media (min-width:781px){html .wkg-col{grid-template-columns:minmax(0,1fr)}}
html .wkg-t{white-space:normal}
html .wkg-t>span{display:inline-block;white-space:nowrap}
/* 129: トップの札の列は「人気の占術」「人気の悩み」+ 6 つ。札は薄い緑の塗り（旧版の形） */
html .filter-chips.is-popular .chips-mark.is-word{width:auto;margin-right:var(--s-2)}
html .filter-chips.is-popular .chip-toggle span{border-color:transparent;background:var(--mint-faint);color:var(--teal-ink)}
html .filter-chips.is-popular .chip-toggle:hover span{border-color:var(--teal);color:var(--teal-ink)}
/* 128: 悩みから探す の節（見出し + 札 12 個） */
html .f-worry{margin-top:var(--s-8)}
html .f-worry-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
html .f-worry-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);border:1px solid transparent;border-radius:var(--r-pill);background:var(--mint-faint);color:var(--teal-ink);font-size:var(--t-14);font-weight:500;transition:border-color 200ms var(--ease)}
html .f-worry-chip:hover{border-color:var(--teal)}
@media (prefers-reduced-motion:reduce){html .f-worry-chip{transition:none}}
/* 130: 地図の下に「Googleマップで開く ↗」の 1 行（旧版の形） */
html .map-open{margin:0;font-size:var(--t-13)}
/* 131: ヘッダーの下の線とスクロール時の影を出さない（境は白の面だけ。オーナー 2026-11-05「ヘッダーの下線消してほしいかも」） */
html .header,html .header.is-scrolled{border-bottom:0;box-shadow:none}
/* 133: 所属が同じ運営の複数店なら 運営名 1 回 + 支店名の札（切らずに折り返す） */
html .sa-org-name{display:block;color:var(--ink)}
html .sa-branches{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-1)}
html .sa-branch{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--teal-ink);font-size:var(--t-12);font-weight:500;white-space:nowrap;transition:border-color 200ms var(--ease)}
html .sa-branch:hover{border-color:var(--teal)}
html .tm-shop:has(.sa-branches)>span{display:block;min-width:0}
@media (prefers-reduced-motion:reduce){html .sa-branch{transition:none}}
/* 122: 店の帯は白いカード 1 枚（写真 | 店名 → 都道府県・市区町村 → 運営の札 → 本日 → ボタンの横 1 列）。SNS は右の小さなカード。旧版の形（オーナー 2026-11-05「これはこれでシンプルやな」） */
html .dt-hero-shop.is-card{background:var(--surface);padding:var(--s-4) 0 var(--s-6)}
html .dt-hero-shop.is-card::before,html .dt-hero-shop.is-card::after{content:none}
html .sh-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (min-width:1081px){html .sh-top.has-sns{grid-template-columns:minmax(0,1fr) 300px}}
html .sh-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:center;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--mint-faint)}
html .sh-card .dt-media :is(.pf,.pf-stage,.detail-image){border-radius:var(--r-md);box-shadow:none}
html .sh-body{min-width:0}
html .sh-body h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.3}
html .sh-body h1.is-long{font-size:clamp(22px,2vw,28px)}
html .sh-place{margin:var(--s-3) 0 0;font-size:var(--t-14);color:var(--muted)}
html .sh-org{margin:var(--s-3) 0 0}
html .sh-org>span{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--surface);color:var(--teal-ink);font-size:var(--t-12);font-weight:500}
html .sh-body>.today-hours{margin:var(--s-4) 0 0}
html .sh-btns{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
html .sh-btns>*{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:48px;margin:0;padding:0 var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:var(--t-14);font-weight:700;white-space:nowrap;transition:border-color 200ms var(--ease),background-color 200ms var(--ease)}
html .sh-btns>*:hover{border-color:var(--teal)}
html .sh-btns>.is-primary{border-color:var(--teal);background:var(--teal);color:#fff}
html .sh-btns>.is-primary:hover{background:var(--teal-ink)}
html .sh-btns .fav-button{width:auto}
html .sh-sns{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
html .sh-sns>.dt-h3{margin:0 0 var(--s-3);font-size:var(--t-14);font-weight:700;color:var(--ink)}
html .sh-sns-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
html .sh-sns-chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-3);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-size:var(--t-13);font-weight:500}
html .sh-sns-chip svg{width:16px;height:16px}
html .sh-sns-chip:hover{background:var(--mint-faint)}
@media (max-width:780px){
  html .sh-card{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-4)}
  html .sh-card .dt-media :is(.pf-stage,.detail-image){height:180px;aspect-ratio:auto}
  html .sh-btns>*{flex:1 1 calc(50% - var(--s-2));padding:0 var(--s-3)}
}
@media (prefers-reduced-motion:reduce){html .sh-btns>*{transition:none}}
/* 122: 基本情報 = 白いカードに 語 | 値 の 2 列。行の間は薄い罫線、語は灰、値は黒、リンクは緑の太字 + ↗。確認日は最後に薄く */
html .info-card{padding:var(--s-2) var(--s-6) var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
html .info-table{width:100%;border-collapse:collapse}
html .info-table th,html .info-table td{padding:var(--s-4) 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:var(--t-14);line-height:var(--lh-snug)}
html .info-table th{width:9em;padding-right:var(--s-4);color:var(--muted);font-weight:500;white-space:nowrap}
html .info-table td{color:var(--ink);overflow-wrap:anywhere}
html .info-table tr:last-child>*{border-bottom:0}
html .info-table td .wkg{max-width:640px}
html .info-link{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--teal);font-weight:700}
html .info-link:hover{color:var(--teal-ink)}
html .info-card>.dt-checked{display:block;margin:var(--s-2) 0 0;padding:0;border:0;color:var(--faint);font-size:var(--t-12)}
@media (max-width:780px){html .info-card{padding:0 var(--s-4) var(--s-4)}html .info-table th{width:6em}html .info-table th,html .info-table td{display:block;width:auto;padding:var(--s-1) 0}html .info-table th{padding-top:var(--s-3);border:0}}
/* 116: 料金の札（「1分 165円」）を横に並べ、税込・税別は札の外に 1 回だけ小さく */
html .price-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
html .price-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--mint-faint);color:var(--ink);font-size:var(--t-13);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
html .price-tax{color:var(--muted);font-size:var(--t-12)}
/* 139: ページ送りの … */
html .pagination-gap{display:inline-flex;align-items:center;justify-content:center;min-width:32px;color:var(--muted)}
html .pagination-progress{display:none}
/* 137: トップの見出し帯 = 横幅いっぱいの絵（hero.webp, 高さ 560px）の上に 見出し 1 行 + 白い検索カード（角 16・影）。390 は絵の下にカードを縦に積む */
html .hx{position:relative;isolation:isolate;min-height:560px;display:flex;align-items:center;padding:var(--s-8) 0}
html .hx-bg{position:absolute;inset:0;z-index:-1;background:var(--mint-faint) url("/assets/hero.webp") center/cover no-repeat}
html .hx-in{width:min(calc(100% - 48px),var(--max));margin:0 auto}
html .hx-title{margin:0 0 var(--s-5);font-size:clamp(28px,3vw,40px);line-height:1.25;color:var(--ink);white-space:nowrap}
html .hx-card{max-width:880px;padding:var(--s-5) var(--s-6) var(--s-6);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(17,59,67,.06),0 12px 32px rgba(17,59,67,.12)}
html .hx-tabs{display:flex;gap:var(--s-5);margin:0 0 var(--s-4);border-bottom:1px solid var(--line)}
html .hx-tab{display:inline-flex;align-items:center;gap:var(--s-2);height:44px;margin:0 0 -1px;padding:0 var(--s-1);border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:var(--t-14);font-weight:700;cursor:pointer;transition:color 200ms var(--ease),border-color 200ms var(--ease)}
html .hx-tab:hover{color:var(--ink)}
html .hx-tab.is-on{border-bottom-color:var(--teal);color:var(--teal-ink)}
html .hx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr) auto;gap:var(--s-2);align-items:center}
html .hx-row>*{min-width:0;width:100%}
html .hx-row :is(select,input){height:48px}
html .hx-go{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:auto;height:48px;padding:0 var(--s-6);border:0;border-radius:var(--r-md);background:var(--teal);color:#fff;font-weight:700;white-space:nowrap;transition:background-color 200ms var(--ease)}
html .hx-go:hover{background:var(--teal-ink)}
html .hx-card .filter-chips{margin-top:var(--s-4)}
html .hx-card .filter-chips+.filter-chips{margin-top:var(--s-2)}
html .hx-card.is-shop :is(select[name=technique],select[name=topic],.filter-chips){display:none}
html .hx-card.is-shop .hx-row{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto}
@media (max-width:1080px){html .hx-row{grid-template-columns:repeat(3,minmax(0,1fr))}html .hx-row>input{grid-column:1/3}html .hx-go{width:100%}}
@media (max-width:780px){
  html .hx{display:block;min-height:0;padding:0}
  html .hx-bg{position:relative;inset:auto;height:180px}
  html .hx-in{width:auto;margin:0;padding:0 var(--s-4)}
  html .hx-title{position:absolute;top:0;left:var(--s-4);right:var(--s-4);height:180px;display:flex;align-items:center;margin:0;font-size:24px;white-space:normal}
  html .hx-card{margin:calc(var(--s-6) * -1) 0 0;padding:var(--s-3) var(--s-4) var(--s-4)}
  html .hx-tabs{gap:var(--s-3);overflow-x:auto}
  html .hx-tab{flex:none;font-size:var(--t-13)}
  html .hx-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html .hx-row>input,html .hx-go{grid-column:1/-1}
  html .hx-go{width:100%}
}
@media (prefers-reduced-motion:reduce){html :is(.hx-tab,.hx-go){transition:none}}
/* 122・124: 確認日は帯（店は白いカード）の右下の隅に薄く 1 行（オーナー 2026-11-05「右下やろ」） */
html .dt-hero>.container>.dt-checked,html .sh-card>.dt-checked{display:block;margin:var(--s-3) 0 0;text-align:right;color:var(--faint);font-size:var(--t-12)}
html .sh-card{position:relative}
html .sh-card>.dt-checked{position:absolute;right:var(--s-5);bottom:var(--s-3);margin:0}
/* 137 の 2: 見出しは深緑の絵の上なので白（濃い字は絵の暗部で読めなかった）。欄は全部同じ 48px の枠、狭い画面のタブは 3 等分で切らない */
html .hx-title{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 24px rgba(0,0,0,.25)}
html .hx-row :is(select,input){box-sizing:border-box;width:100%;height:48px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);font:inherit;font-size:var(--t-14)}
html .hx-row input:focus-visible,html .hx-row select:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
@media (max-width:780px){
  html .hx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible}
  html .hx-tab{justify-content:center;gap:var(--s-1);padding:0;font-size:var(--t-12)}
  html .hx-tab .hi{display:none}
  html .hx-row select[name=topic]{grid-column:1/-1}
}
/* 114: 口コミのニックネームの 1 行（本文の欄と同じ枠） */
html .voice-nick input{box-sizing:border-box;width:100%;height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font:inherit;font-size:var(--t-14);color:var(--ink)}
html .voice-nick{margin-bottom:var(--s-2)}
/* 140: 基本情報の表は table のまま（古い .info-table の grid（136px 1fr）が当たり、tbody が 136px の列に押し込まれて値が 1 文字ずつ折れていた。オーナー 2026-11-05「基本情報 ばぐってる」） */
html table.info-table{display:table;table-layout:auto;padding:0;gap:0;border-bottom:0}
html .dt-below-shop>.dt-main>#sec-info{grid-column:1/-1}
/* 142: 占い師の活動エリアは帯の所属の下に薄い 1 行 */
html .tm-area{display:flex;align-items:center;gap:var(--s-1);margin:var(--s-2) 0 0;color:var(--muted);font-size:var(--t-13)}
html .tm-area .hi{flex:none;color:var(--faint)}
/* 143: トップの帯 (a) 左半分に濃い緑から透明へのグラデーションを敷き、見出しは白 + 薄い影 (b) 絵は右寄せで紋をカードの右に見せ、カードは 760 まで (c) 3 つのタブで同じ段組。占い館のタブは エリア + キーワード + 探す だけ */
html .hx-bg{background-position:70% center}
html .hx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,36,28,.62) 0%,rgba(8,36,28,.38) 40%,rgba(8,36,28,0) 68%)}
html .hx-title{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 24px rgba(0,0,0,.3)}
html .hx-card{max-width:760px}
html .hx-row{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr) auto}
html .hx-card.is-shop .hx-row>:is(.psel:has(select[name=technique]),.psel:has(select[name=topic]),select[name=technique],select[name=topic]){display:none}
html .hx-card.is-shop .hx-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto}
@media (max-width:1080px){
  html .hx-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  html .hx-row>input{grid-column:1/3}
  html .hx-go{grid-column:3;width:auto;justify-self:end;min-width:120px}
  html .hx-card.is-shop .hx-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto}
  html .hx-card.is-shop .hx-row>input{grid-column:auto}
  html .hx-card.is-shop .hx-go{grid-column:auto}
}
@media (max-width:780px){
  html .hx-row,html .hx-card.is-shop .hx-row{grid-template-columns:minmax(0,1fr)}
  html .hx-row>*,html .hx-row>input,html .hx-go,html .hx-card.is-shop .hx-row>*{grid-column:1/-1;justify-self:stretch;width:100%}
  html .hx-bg::after{background:linear-gradient(180deg,rgba(8,36,28,.15),rgba(8,36,28,.5))}
}
/* 143 の 2: 絵は cover だと横に動かせないので 150% に広げて左に寄せ、紋の中心をカードの右（x≈960）へ。選ぶ欄も 48px にそろえ、タブを替えてもカードの上端は動かさない（上揃え） */
@media (min-width:781px){
  html .hx{align-items:flex-start;padding-top:112px}
  html .hx-bg{background-size:150% auto;background-position:0% 42%}
  html .hx-row .psel,html .hx-row .psel-button{height:48px}
}
/* 141: 占い師の帯の 占術 → 得意 → 所属 を同じ形に（オーナー 2026-11-05「占術 / 得意 / 所属 あたりもっときれいにしたいね」）。語の列は 4em、行の間 12px、札はどれも 28px。+N は枠の無い薄い字（札に見せない）、所属は店名の札（白地・緑の縁）。本日の行との間は 20px */
html .dt-hero-teacher .tm-facts{gap:var(--s-3);margin-top:20px}
html .dt-hero-teacher .tm-facts .sa-row{grid-template-columns:4em minmax(0,1fr);align-items:center}
html .dt-hero-teacher .tm-facts .sa-word{line-height:28px}
html .dt-hero-teacher .tm-facts .dt-topic-tag:not(.is-cut){display:inline-flex;align-items:center;min-height:28px;box-sizing:border-box}
html .dt-hero-teacher .tm-facts .tag-more-li{border:0;background:none;padding:0 var(--s-1)}
html .dt-hero-teacher .tm-facts .tag-more-li button{padding:0;border:0;background:none;color:var(--faint);font:inherit;font-size:var(--t-12);cursor:pointer}
html .dt-hero-teacher .tm-facts .tag-more-li button:hover{color:var(--muted)}
html .dt-hero-teacher .tm-facts .sa-val:has(.sa-shop){display:flex;flex-wrap:wrap;gap:var(--s-1)}
html .dt-hero-teacher .tm-facts a.sa-shop{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s-3);border:1px solid var(--teal);border-radius:var(--r-pill);background:#fff;color:var(--teal-ink);font-size:var(--t-12);font-weight:500;white-space:nowrap;background-image:none}
html .dt-hero-teacher .tm-facts a.sa-shop:hover{background:var(--mint-faint);color:var(--teal-ink)}
html .dt-hero-teacher .tm-facts .sa-branch{border-color:var(--teal)}
html .dt-hero-teacher .tm-facts .sa-org-name{line-height:28px}
/* 141 の 2: 所属の札は支店名（運営名は落とす）。それでも入らなければ札の中で … にする */
html .dt-hero-teacher .tm-facts a.sa-shop{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:26px}