/* Men's Beauty ヒロシマ — prototype v2
   Design review: GQ JAPAN準拠（純白・サンセリフ一本化・罫と余白・囲みはLit枠のみ）。仕様書 research/06_design_spec.md */

:root {
  --c-bg: #FFFFFF;
  --c-ink: #121212;
  --c-body: #2E302F;
  --c-meta: #757776;
  --c-rule: #C9CCCA;
  --c-rule-soft: #E6E7E6;
  --c-fill: #F2F2F2;
  --c-link: #8E732D;
  --c-focus: #1A5FB4;

  --f-latin: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  --f-ui: "Schibsted Grotesk", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --f-text: var(--f-ja);

  --container: 1312px;
  --pad: 64px;
  --gap: 32px;
  --measure: 640px;
  --rail: 336px;
}
@media (max-width: 1023px) { :root { --pad: 32px; --gap: 24px; } }
@media (max-width: 767px) { :root { --pad: 16px; --gap: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-body);
  font: 400 16px/1.75 var(--f-text); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); word-break: auto-phrase; }

/* ---------- header ---------- */
.gbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-ink); }
.gbar__in { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad);
  height: 56px; display: flex; align-items: center; gap: 40px; }
.logo { font: 900 22px/1 var(--f-ui); letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.gnav { display: flex; gap: 28px; height: 100%; }
.gnav a { display: flex; align-items: center; font: 700 14px/16px var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gnav a:hover, .gnav a[aria-current="page"] { border-bottom-color: var(--c-ink); }
.gbar__about { margin-left: auto; font: 700 13px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none; }
.gbar__about:hover { text-decoration: underline; text-underline-offset: 4px; }
.gbar__menu { display: none; }
.drawer { display: none; border-bottom: 1px solid var(--c-ink); background: #fff; }
.drawer a { display: flex; justify-content: space-between; padding: 14px var(--pad); border-top: 1px solid var(--c-rule-soft);
  font: 700 15px/1 var(--f-ui); text-transform: uppercase; color: var(--c-ink); text-decoration: none; }
.drawer a span { font: 400 13px/1 var(--f-text); color: var(--c-meta); text-transform: none; }
.drawer.is-open { display: block; }
@media (max-width: 767px) {
  .gbar__in { height: 52px; gap: 16px; }
  .logo { font-size: 17px; }
  .gnav, .gbar__about { display: none; }
  .gbar__menu { display: block; margin-left: auto; font: 700 13px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
    background: none; border: 0; padding: 12px 0; color: var(--c-ink); cursor: pointer; }
}

/* ---------- disclosure (ステマ規制対応：ファーストビューに常設) ---------- */
.disclosure { background: #fff; border-bottom: 1px solid var(--c-rule); }
.disclosure p { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 10px var(--pad);
  font: 400 12px/1.6 var(--f-text); color: var(--c-body); text-align: center; }
.disclosure b { font-weight: 700; color: var(--c-ink); }
.disclosure a { color: var(--c-ink); margin-left: .75em; white-space: nowrap; text-underline-offset: 3px; }
@media (max-width: 767px) { .disclosure p { text-align: left; font-size: 11.5px; } }

/* ---------- common ---------- */
.container { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.sec-title { font: 700 22px/30px var(--f-ui); text-transform: uppercase; color: var(--c-ink);
  border-top: 1px solid var(--c-ink); padding-top: 12px; margin: 0 0 24px;
  display: flex; justify-content: space-between; align-items: baseline; }
.rubric { font: 700 14px/16px var(--f-ui); letter-spacing: .03em; color: var(--c-ink); margin: 0 0 10px; }
.rubric a { color: inherit; text-decoration: none; }
.byline { font: 700 13px/18px var(--f-ui); letter-spacing: .03em; color: var(--c-meta); margin: 0; }
time { display: block; font: 400 13px/18px var(--f-ui); color: var(--c-meta); margin-top: 4px; }

/* photo frames */
.ph { position: relative; display: block; aspect-ratio: var(--ratio, 1 / 1); overflow: hidden;
  background: var(--c-fill); color: var(--c-ink); text-decoration: none; }
.ph--dark { background: var(--c-ink); color: #fff; }
.ph__word { position: absolute; left: 16px; bottom: 10px; right: 16px;
  font: 900 clamp(40px, 7vw, 112px)/.85 var(--f-latin); letter-spacing: -0.035em; text-transform: uppercase; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.caption { font: 400 12px/20px var(--f-text); color: var(--c-meta); margin: 8px 0 0; }

/* ---------- home ---------- */
.lead-story { max-width: calc(var(--container) + var(--pad) * 2); margin: 40px auto 88px; padding: 0 var(--pad);
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: end; }
.story__hed { font: 700 16px/24px var(--f-text); margin: 0 0 16px; }
.story__hed a { color: var(--c-ink); text-decoration: none; }
.story:hover .story__hed a, .lead-story:hover .story__hed a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lead-story .story__hed { font-size: 30px; line-height: 44px; letter-spacing: .01em; }
.lead-story__dek { font: 400 15px/26px var(--f-text); color: var(--c-body); margin: 0 0 20px; }
.lead-story .ph img { object-position: 50% 70%; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px var(--gap); margin-bottom: 88px; }
.story__media { display: block; margin-bottom: 16px; }

.home-about { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap); margin-bottom: 40px; }
.home-about p { margin: 0 0 12px; font-size: 15px; line-height: 28px; max-width: 42em; }
.home-about a { color: var(--c-ink); font-weight: 700; text-underline-offset: 4px; }

@media (max-width: 1023px) { .grid { grid-template-columns: repeat(3, 1fr); } .lead-story { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .lead-story .story__hed { font-size: 24px; line-height: 36px; } }
@media (max-width: 767px) {
  .lead-story { grid-template-columns: 1fr; margin-top: 0; padding: 0; gap: 16px; }
  .lead-story__text { padding: 0 var(--pad); }
  .lead-story .story__hed { font-size: 22px; line-height: 34px; }
  .home-about { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- article ---------- */
.a-head { padding-top: 40px; }
.a-head h1 { font: 700 36px/52px var(--f-text); letter-spacing: .01em; max-width: 1088px; margin: 16px 0; }
.a-dek { font: 500 16px/28px var(--f-text); color: var(--c-body); max-width: 880px; margin: 0 0 20px; }
.a-meta .byline span { font-weight: 400; margin-left: 1em; }
.a-checked { font: 400 12px/18px var(--f-text); color: var(--c-meta); margin: 6px 0 0; }
.a-lead { margin-top: 40px; margin-bottom: 56px; }
.a-lead .ph img { object-position: 50% 62%; }

.a-body { display: grid; grid-template-columns: 112px var(--measure) 1fr var(--rail); }
.a-body > .prose { grid-column: 2; min-width: 0; }
.a-body > .rail { grid-column: 4; }
.rail__toc { position: sticky; top: 88px; border-top: 1px solid var(--c-ink); padding-top: 12px; }
.rail__toc p { font: 700 13px/18px var(--f-text); color: var(--c-ink); margin: 0 0 10px; }
.rail__toc ol { list-style: none; margin: 0; padding: 0; }
.rail__toc a { display: block; padding: 6px 0; font: 400 14px/22px var(--f-text); color: var(--c-body); text-decoration: none; }
.rail__toc a:hover, .rail__toc a.is-active { color: var(--c-ink); font-weight: 700; }
.toc-inline { display: none; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); margin: 0 0 32px; }
.toc-inline summary { cursor: pointer; padding: 14px 0; font: 700 14px/1 var(--f-text); color: var(--c-ink); }
.toc-inline ol { margin: 0 0 16px; padding-left: 1.4em; font-size: 14px; line-height: 26px; }
.toc-inline a { color: var(--c-body); text-decoration: none; }

.notice { border-left: 2px solid var(--c-ink); padding: 2px 0 2px 14px; margin: 0 0 36px;
  font: 400 13px/22px var(--f-text); color: var(--c-body); }
.notice b { font-weight: 700; color: var(--c-ink); margin-right: .5em; }
.notice a { color: var(--c-ink); text-underline-offset: 3px; }

.prose { font: 400 16px/28px var(--f-text); letter-spacing: .02em; color: var(--c-body); font-feature-settings: "palt"; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { font: 700 26px/38px var(--f-text); letter-spacing: .01em; margin: 64px 0 16px; scroll-margin-top: 80px; }
.prose h3 { font: 700 19px/30px var(--f-text); margin: 32px 0 8px; }
.prose a { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong, .prose b { font-weight: 700; color: var(--c-ink); }
.prose ol, .prose ul { padding-left: 1.4em; margin: 0 0 1.25em; }
.prose li { margin: 0 0 12px; }
.prose li b { display: block; }
.prose blockquote { margin: 48px 0; padding: 0; font: 700 22px/36px var(--f-text); color: var(--c-ink); letter-spacing: .01em; }
.lede { font-size: 17px; line-height: 30px; color: var(--c-ink); }

.dl-list { margin: 0 0 1.25em; border-top: 1px solid var(--c-rule-soft); }
.dl-list dt { font: 700 16px/26px var(--f-text); color: var(--c-ink); padding-top: 14px; }
.dl-list dd { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--c-rule-soft); font-size: 15px; line-height: 26px; }

/* own salon — the only box on the page */
.own { border: 1px solid var(--c-ink); margin: 32px 0 44px; }
.own__label { margin: 0; padding: 8px 20px; background: var(--c-ink); color: #fff; font: 700 12px/18px var(--f-text); letter-spacing: .04em; }
.own__label span { font-weight: 400; margin-left: 1em; color: #C9CCCA; }
.own__body { padding: 24px 20px 20px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.own__media figure { margin: 0; }
.own__body h3 { font: 700 20px/30px var(--f-text); margin: 0 0 8px; }
.own__body p { font-size: 15px; line-height: 26px; margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: 7em 1fr; margin: 16px 0 20px; font: 400 14px/22px var(--f-text); border-top: 1px solid var(--c-rule-soft); }
.facts dt, .facts dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--c-rule-soft); }
.facts dt { color: var(--c-meta); font-size: 13px; }
.own__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 14px !important; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; background: var(--c-ink); color: #fff !important;
  font: 700 14px/1 var(--f-text); text-decoration: none !important; border-radius: 0; }
.btn:hover { background: #333; }
.textlink { font: 700 14px/1 var(--f-text); color: var(--c-ink) !important; text-underline-offset: 4px; }
.note { font: 400 12px/20px var(--f-text) !important; color: var(--c-meta); margin: 0 !important; }

/* compare table */
.table-note { font: 400 12px/20px var(--f-text); color: var(--c-meta); margin: 0 0 4px; }
.table-scroll { overflow-x: auto; margin: 16px 0 8px; -webkit-overflow-scrolling: touch; }
table.compare { border-collapse: collapse; width: 100%; min-width: 960px; font: 400 14px/22px var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.compare th, .compare td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-rule-soft); }
.compare thead th { font: 700 12px/16px var(--f-text); color: var(--c-meta); letter-spacing: .04em; white-space: nowrap;
  border-bottom: 2px solid var(--c-ink); background: #fff; }
.compare tbody th { font-weight: 700; color: var(--c-ink); position: sticky; left: 0; background: #fff; min-width: 190px; }
.compare td:nth-child(2) { white-space: nowrap; }
.compare td:nth-child(3) { min-width: 9.5em; }
.compare td:nth-child(6) { min-width: 6em; }
.compare td:nth-child(7) { min-width: 11em; }
@media (min-width: 1200px) {
  .prose > .table-scroll { position: relative; z-index: 2; background: #fff; margin-left: -112px;
    width: min(var(--container), calc(100vw - var(--pad) * 2)); }
}
.compare td:nth-child(4), .compare td:nth-child(5) { min-width: 200px; }
.compare tr.is-own th, .compare tr.is-own td { border-bottom: 1px solid var(--c-ink); border-top: 1px solid var(--c-ink); }
.label-own { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--c-ink); color: #fff; font: 700 11px/16px var(--f-text); }
.compare .muted { color: var(--c-rule); }
.scroll-hint { display: none; font: 400 12px/20px var(--f-text); color: var(--c-meta); margin: 0; }

/* salon cards (SHOP INFO) */
.area-group > h3 { font: 700 19px/30px var(--f-text); margin: 48px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--c-ink); }
.area-group > h3 small { font: 400 13px/1 var(--f-text); color: var(--c-meta); margin-left: 12px; }
.card { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--c-rule-soft); }
.card h4 { font: 700 17px/26px var(--f-text); margin: 0 0 4px; }
.card .where { font: 400 13px/20px var(--f-text); color: var(--c-meta); margin: 0 0 6px; }
.card .attrs { font: 400 13px/20px var(--f-text); color: var(--c-body); margin: 0; }
.card dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 12px; margin: 0; font: 400 14px/22px var(--f-text); }
.card dt { color: var(--c-meta); font-size: 13px; }
.card dd { margin: 0; }
.card .links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 700 13px/20px var(--f-text); margin-top: 8px; }
.card .links a { color: var(--c-ink); text-underline-offset: 3px; }
.card .checked { margin-left: auto; font: 400 12px/20px var(--f-text); color: var(--c-meta); }
.flag { color: #9A3B1F; font: 400 12px/20px var(--f-text); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--c-rule); }
.faq details:first-of-type { border-top: 1px solid var(--c-ink); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 32px 18px 0; font: 700 16px/26px var(--f-text); color: var(--c-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 8px; height: 8px;
  border-right: 1.5px solid var(--c-ink); border-bottom: 1.5px solid var(--c-ink); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details p { margin: 0 0 20px; font: 400 15px/26px var(--f-text); }

/* author / meta */
.share { margin: 48px 0 0; font: 700 13px/20px var(--f-ui); color: var(--c-meta); }
.share a { color: var(--c-ink); text-decoration: none; }
.share a:hover { text-decoration: underline; }
.author { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--c-ink); }
.author .rubric { color: var(--c-meta); font-size: 12px; margin-bottom: 4px; }
.author h3 { font: 700 17px/26px var(--f-text); margin: 0 0 4px; }
.author p { font: 400 14px/24px var(--f-text); margin: 0; }
.meta-list { margin: 32px 0 0; padding: 16px 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); font: 400 12px/20px var(--f-text); color: var(--c-meta); }
.meta-list h4 { font: 700 13px/20px var(--f-text); margin: 12px 0 4px; }
.meta-list h4:first-child { margin-top: 0; }
.meta-list ul { margin: 0; padding-left: 1.2em; }
.meta-list a { color: var(--c-ink); }

/* about */
.policy dl { display: grid; grid-template-columns: 10em 1fr; margin: 0 0 1.25em; border-top: 1px solid var(--c-rule-soft); font-size: 15px; }
.policy dt, .policy dd { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--c-rule-soft); }
.policy dt { color: var(--c-meta); font-size: 13px; }

/* ---------- footer (the only large black surface) ---------- */
.site-footer { background: var(--c-ink); color: #fff; padding: 56px 0 72px; margin-top: 96px; }
.site-footer .in { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap); }
.site-footer .logo { color: #fff; font-size: 26px; display: inline-block; margin-bottom: 16px; }
.site-footer p, .site-footer dl { font: 400 13px/22px var(--f-text); color: #B5B7B6; margin: 0 0 12px; }
.site-footer dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 2px 12px; }
.site-footer dd { margin: 0; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { color: #fff; text-decoration: none; font: 700 13px/30px var(--f-ui); }
.site-footer li a:hover { text-decoration: underline; }
.site-footer h4 { color: #B5B7B6; font: 700 12px/18px var(--f-ui); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }

/* prototype-only notice */
.draft-note { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #FFF6F2; color: #9A3B1F;
  border-top: 1px solid #EBC9BC; font: 400 11.5px/1.5 var(--f-text); padding: 6px 16px; text-align: center; }

/* ---------- responsive (article) ---------- */
@media (max-width: 1199px) {
  .a-body { display: block; }
  .a-body > .prose { max-width: var(--measure); margin: 0 auto; }
  .rail { display: none; }
  .toc-inline { display: block; }
}
@media (max-width: 767px) {
  .a-head { padding-top: 24px; }
  .a-head h1 { font-size: 26px; line-height: 38px; }
  .a-lead { padding: 0; margin-top: 28px; margin-bottom: 36px; }
  .a-lead .caption { padding: 0 var(--pad); }
  .disclosure a { margin-left: 0; display: inline-block; }
  .prose h2 { font-size: 22px; line-height: 32px; margin-top: 52px; }
  .own__body { grid-template-columns: 1fr; }
  .own__media { max-width: 280px; }
  table.compare { font-size: 13px; line-height: 20px; }
  .compare tbody th { min-width: 140px; }
  .scroll-hint { display: block; }
  .card { grid-template-columns: 1fr; }
  .card .checked { margin-left: 0; width: 100%; }
  .policy dl { grid-template-columns: 1fr; }
  .policy dt { padding-bottom: 0; border-bottom: 0; }
  .site-footer .in { grid-template-columns: 1fr; }
}

/* ---------- v3: typographic covers / categories / logo ---------- */
.ph { container-type: inline-size; }
.cover-index { position: absolute; inset: 0; padding: 5.5cqw 5cqw 4cqw; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.cover-index__kicker { display: flex; justify-content: space-between; font: 700 max(10px, 1.35cqw)/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.cover-index__words { display: flex; flex-direction: column; font: 900 9.6cqw/.84 var(--f-latin); letter-spacing: -0.045em; text-transform: uppercase; }
.cover-index__words span { color: #3C3D3C; white-space: nowrap; }
.cover-index__words span.is-on { color: #fff; }
.cover-index--sq { padding: 7cqw; }
.cover-index--sq .cover-index__kicker { font-size: max(9px, 2.6cqw); }
.cover-index--sq .cover-index__words { font-size: 13.4cqw; }

.ph--brow { background: #F3F3F1; }
.ph--brow img { object-position: 28% 50%; }
.ph__tag { position: absolute; left: 3cqw; bottom: 2.6cqw; font: 700 max(10px, 1.3cqw)/1 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }

.logo-tile { background: var(--c-ink); display: grid; place-items: center; }
.logo-tile img { width: 64%; height: auto; object-fit: contain; }

.cat-head { text-align: center; padding: 56px var(--pad) 12px; }
.cat-head h1 { font: 900 44px/1 var(--f-ui); letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
.cat-head p { font: 400 13px/20px var(--f-text); color: var(--c-meta); margin: 10px 0 0; }
.cat-rule { border: 0; border-top: 1px solid var(--c-rule); margin: 32px 0 40px; }
.soon { max-width: var(--measure); margin: 0 auto; text-align: center; padding: 24px 0 8px; }
.soon p { font: 400 15px/28px var(--f-text); color: var(--c-body); margin: 0 0 12px; }
.soon a { color: var(--c-ink); font-weight: 700; text-underline-offset: 4px; }
.sections-row { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--c-ink); margin-bottom: 88px; }
.sections-row a { padding: 16px 0 0; font: 900 22px/1 var(--f-ui); letter-spacing: -0.02em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; }
.sections-row a span { display: block; margin-top: 8px; font: 400 12px/18px var(--f-text); color: var(--c-meta); letter-spacing: 0; text-transform: none; }
.sections-row a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--c-ink); margin: 8px 0 12px; }
.stat div { padding: 16px 16px 16px 0; }
.stat div + div { padding-left: 16px; border-left: 1px solid var(--c-rule-soft); }
.stat b { display: block; font: 900 40px/1 var(--f-latin) !important; letter-spacing: -0.03em; color: var(--c-ink); }
.stat span { display: block; margin-top: 8px; font: 400 13px/20px var(--f-text); color: var(--c-body); }
.src { font: 400 12px/20px var(--f-text); color: var(--c-meta); margin: 0 0 1.5em !important; }
@media (max-width: 1023px) { .sections-row { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } }
@media (max-width: 767px) {
  .cat-head h1 { font-size: 34px; }
  .sections-row { grid-template-columns: repeat(2, 1fr); }
  .stat { grid-template-columns: 1fr; }
  .stat div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-rule-soft); }
  .gbar__in { gap: 12px; }
}
.gnav { gap: 24px; }
@media (max-width: 1100px) and (min-width: 768px) { .gnav { gap: 16px; } .gnav a { font-size: 12.5px; } .logo { font-size: 18px; } .gbar__in { gap: 24px; } }

/* ---------- logo: MEN'S BEAUTY ヒロシマ（Logo Study A：Murecho 900） ---------- */
.logo { display: inline-flex; align-items: baseline; }
.logo .jp { display: inline-block; margin-left: .28em; font-family: "Murecho", var(--f-ja); font-weight: 900; font-size: .98em;
  letter-spacing: -0.04em; transform: translateY(.03em); }

/* ---------- PR表記（GQの PROMOTION 表記に倣い、組版に溶け込ませる） ---------- */
.pr-mark { display: inline-block; margin-left: 10px; padding: 2px 5px 1px; border: 1px solid var(--c-ink); font: 700 10px/1 var(--f-latin); letter-spacing: .08em; vertical-align: 2px; }
.a-pr { font: 400 12px/18px var(--f-text); color: var(--c-meta); margin: 8px 0 0; }
.about-article { margin: 56px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-rule); }
.about-article .rubric { font-size: 12px; color: var(--c-meta); margin-bottom: 6px; }
.about-article p:not(.rubric) { font: 400 13px/22px var(--f-text); color: var(--c-body); margin: 0; }
.about-article a { color: var(--c-ink) !important; }
.disclosure p { font-size: 11.5px; padding: 8px var(--pad); color: var(--c-meta); }
.disclosure b { color: var(--c-ink); }
.prose .share { margin-top: 32px; }

/* ---------- Cover D：問いを和文極太で置く表紙（特集） ---------- */
.cover-q { position: absolute; inset: 0; padding: 5cqw; color: #fff; }
.cover-q__kick { display: flex; justify-content: space-between; font: 700 max(10px, 1.35cqw)/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; }
.cover-q__q { position: absolute; left: 5cqw; right: 5cqw; top: 15cqw; margin: 0; font: 900 9.2cqw/1.18 var(--f-ja); letter-spacing: -0.02em; font-feature-settings: "palt"; color: #fff; word-break: keep-all; }
.cover-q__sub { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; font: 700 max(10px, 1.45cqw)/1.3 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; color: #9C9E9D; }
.cover-q--wide .cover-q__q { top: 11cqw; font-size: 7.6cqw; }
.cover-q--sq .cover-q__kick { font-size: max(9px, 2.6cqw); }
.cover-q--sq .cover-q__q { top: 20cqw; left: 7cqw; font-size: 12.6cqw; }
.cover-q--sq { padding: 7cqw; }
.cover-q--sq .cover-q__sub { display: none; }

/* ---------- Banner A：GROOMING.（ブランドの顔。分野への入口を兼ねる） ---------- */
.banner-groom { position: relative; background: var(--c-ink); color: #fff; container-type: inline-size; margin: 0 0 88px; }
.banner-groom__in { padding: 4.5cqw 4.5cqw 3.6cqw; }
.banner-groom__kick { display: flex; justify-content: space-between; font: 700 max(10px, 1.15cqw)/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; }
.banner-groom__word { margin: 4cqw 0 4.4cqw -0.4cqw; font: 900 15.6cqw/.8 var(--f-latin); letter-spacing: -0.055em; text-transform: uppercase; color: #fff; }
.banner-groom__index { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #fff; }
.banner-groom__index a { padding: 1.4cqw 1cqw 0 0; color: #fff; text-decoration: none; font: 700 max(11px, 1.5cqw)/1.2 var(--f-latin); letter-spacing: .06em; text-transform: uppercase; }
.banner-groom__index a span { display: block; margin-top: .6cqw; font: 400 max(10px, 1cqw)/1.4 var(--f-ja); letter-spacing: 0; color: #9C9E9D; text-transform: none; }
.banner-groom__index a:hover { text-decoration: underline; text-underline-offset: 5px; }
.banner-groom--about { margin: 24px 0 0; }
@media (max-width: 767px) {
  .banner-groom { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .banner-groom__word { font-size: 21cqw; }
  .banner-groom__index { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .banner-groom__index a { font-size: 12px; }
  .banner-groom__kick { font-size: 10px; }
}
.cover-q--sq .cover-q__kick span:last-child { display: none; }
.cover-q--sq .cover-q__kick { white-space: nowrap; }

/* 運営表示の帯：ページ最下部（フッター直前）に置く。記事冒頭の PR 表記と併用 */
.disclosure { border-top: 1px solid var(--c-rule); border-bottom: 0; margin-top: 96px; }
.disclosure + .site-footer { margin-top: 0; }

/* ---------- Data：数字の表紙と横棒グラフ（MEN'S BEAUTY ヒロシマ調べ） ---------- */
.cover-num { position: absolute; inset: 0; padding: 5cqw; color: #fff; }
.cover-num__kick { display: flex; justify-content: space-between; font: 700 max(10px, 1.35cqw)/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; }
.cover-num__n { position: absolute; left: 4.2cqw; top: 11cqw; margin: 0; font: 900 30cqw/.8 var(--f-latin); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: #fff; }
.cover-num__n small { font-size: .42em; letter-spacing: -0.02em; margin-left: .04em; }
.cover-num__cap { position: absolute; left: 5cqw; right: 38cqw; bottom: 5cqw; margin: 0; font: 700 max(11px, 2.2cqw)/1.55 var(--f-ja); color: #fff; }
.cover-num--wide .cover-num__n { top: 8cqw; font-size: 24cqw; }
.cover-num--sq { padding: 7cqw; }
.cover-num--sq .cover-num__kick { font-size: max(9px, 2.6cqw); }
.cover-num--sq .cover-num__kick span:last-child { display: none; }
.cover-num--sq .cover-num__n { left: 6cqw; top: 22cqw; font-size: 40cqw; }
.cover-num--sq .cover-num__cap { left: 7cqw; right: 7cqw; bottom: 7cqw; font-size: max(10px, 4.2cqw); }

.figure { margin: 28px 0 32px; }
.figure__title { font: 700 14px/22px var(--f-text); color: var(--c-ink); margin: 0 0 4px; }
.figure__note { font: 400 12px/20px var(--f-text); color: var(--c-meta); margin: 0 0 16px; }
.bars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-ink); }
.bars li { display: grid; grid-template-columns: 9.5em 1fr 3.2em; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-rule-soft); margin: 0 !important; }
.bars__label { font: 400 14px/20px var(--f-text); color: var(--c-body); }
.bars__track { height: 12px; }
.bars__bar { display: block; height: 100%; width: var(--v); min-width: 2px; background: var(--c-rule); border-radius: 0 2px 2px 0; }
.bars li.is-key .bars__bar { background: var(--c-ink); }
.bars li.is-key .bars__label, .bars li.is-key .bars__val { color: var(--c-ink); font-weight: 700; }
.bars__val { font: 400 14px/20px var(--f-latin); font-variant-numeric: tabular-nums; text-align: right; color: var(--c-body); }
.method { margin: 48px 0 0; padding: 16px 0; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-rule); }
.method .rubric { font-size: 12px; color: var(--c-meta); margin-bottom: 8px; }
.method dl { display: grid; grid-template-columns: 7em 1fr; gap: 6px 16px; margin: 0; font: 400 13px/22px var(--f-text); }
.method dt { color: var(--c-meta); }
.method dd { margin: 0; }
@media (max-width: 767px) {
  .bars li { grid-template-columns: 7.5em 1fr 3em; gap: 8px; }
  .bars__label, .bars__val { font-size: 13px; }
  .method dl { grid-template-columns: 1fr; gap: 0; }
  .method dd { margin-bottom: 8px; }
}
.prose .bars { padding-left: 0; margin: 0; }

/* ---------- Intro：トップ冒頭の演出（眉が描かれる → ロゴ → 特集コピー → スクロールで本編） ---------- */
.intro { position: relative; height: calc(100svh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 520px;
  background: var(--c-ink); color: #fff; overflow: hidden; }
.intro__brand, .intro__feature { position: absolute; inset: 0; padding: 0 var(--pad); }
.intro__brand { display: grid; place-items: center; align-content: center; gap: 28px; text-align: center; pointer-events: none;
  animation: intro-out .7s ease 3.3s forwards; }
.intro__brow { width: min(72vw, 760px); max-width: 100%; clip-path: inset(0 100% 0 0); animation: brow-draw 2.2s cubic-bezier(.5, 0, .2, 1) .2s forwards; }
.intro__logo { color: #fff; font-size: clamp(22px, 3.6vw, 44px); opacity: 0; animation: fade-up .9s ease 1.3s forwards; }
.intro__tag { margin: -14px 0 0; font: 400 13px/1.6 var(--f-text); color: #9C9E9D; opacity: 0; animation: fade-up .9s ease 1.6s forwards; }

.intro__feature { display: flex; flex-direction: column; justify-content: center; max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto;
  text-decoration: none; color: #fff; }
.intro__kick { display: flex; justify-content: space-between; font: 700 12px/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; color: #9C9E9D;
  opacity: 0; animation: fade-up .8s ease 3.7s forwards; }
.intro__q { margin: 24px 0 28px; font: 900 clamp(44px, 8.4vw, 132px)/1.12 var(--f-ja); letter-spacing: -0.02em; font-feature-settings: "palt"; }
.intro__q span { display: block; overflow: hidden; }
.intro__q span i { display: block; font-style: normal; transform: translateY(105%); animation: line-up .9s cubic-bezier(.2, .7, .1, 1) forwards; }
.intro__q span:nth-child(1) i { animation-delay: 3.8s; }
.intro__q span:nth-child(2) i { animation-delay: 3.95s; }
.intro__q span:nth-child(3) i { animation-delay: 4.1s; }
.intro__sub { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; opacity: 0; animation: fade-up .8s ease 4.5s forwards; }
.intro__sub b { font: 700 clamp(15px, 1.5vw, 19px)/1.5 var(--f-text); }
.intro__sub span { font: 700 12px/1 var(--f-latin); letter-spacing: .06em; text-transform: uppercase; color: #9C9E9D; }
.intro__feature:hover .intro__sub b { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.intro__scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px;
  font: 700 10px/1 var(--f-latin); letter-spacing: .14em; text-transform: uppercase; color: #9C9E9D; opacity: 0; animation: fade-up .8s ease 4.8s forwards; }
.intro__scroll::after { content: ""; width: 1px; height: 36px; background: linear-gradient(#9C9E9D 50%, transparent 50%); background-size: 1px 72px;
  animation: scroll-line 1.8s linear infinite; }

@keyframes brow-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: translateY(0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; transform: scale(.98); } }
@keyframes scroll-line { from { background-position: 0 -36px; } to { background-position: 0 36px; } }

/* 2回目以降の表示・スキップ・動きを減らす設定：最終状態を即表示 */
.intro.is-done .intro__brand { display: none; }
.intro.is-done .intro__kick, .intro.is-done .intro__sub, .intro.is-done .intro__scroll { animation: none; opacity: 1; }
.intro.is-done .intro__q span i { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .intro__brand { display: none; }
  .intro__kick, .intro__sub, .intro__scroll { animation: none; opacity: 1; }
  .intro__q span i { animation: none; transform: none; }
  .intro__scroll::after { animation: none; }
}
.intro + .container { padding-top: 64px; }
@media (max-width: 767px) {
  .intro { height: calc(100svh - 52px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 480px; }
  .intro__brow { width: 88vw; }
  .intro__q { font-size: 13.2vw; margin: 18px 0 22px; }
  .intro__kick span:last-child { display: none; }
}

/* スマホの記事一覧：1列（左に正方形サムネイル、右に見出し） */
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; gap: 0; }
  .grid .story { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-rule-soft); }
  .grid .story__media { grid-row: 1 / span 4; margin: 0; }
  .grid .story__hed { font-size: 15px; line-height: 22px; margin-bottom: 8px; }
  .grid .story .rubric { margin-bottom: 6px; }
  .intro__kick span:last-child { display: inline-block; }
  .intro__kick > span:last-child { display: none; }
}

/* ---------- Intro v2：6分野のアイコンが順に描かれる（眉と同じ線画の質感） ---------- */
.intro__icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 3vw, 40px); width: min(92vw, 980px); margin: 0; padding: 0; list-style: none; }
.intro__icons li { display: grid; justify-items: center; gap: 12px; }
.intro__icons img { width: 100%; aspect-ratio: 1; object-fit: contain; clip-path: inset(0 100% 0 0); animation: brow-draw 1.2s cubic-bezier(.5, 0, .2, 1) forwards; }
.intro__icons li:first-child img { transform: scale(1.35); }
.intro__icons span { font: 700 max(9px, .8vw)/1 var(--f-latin); letter-spacing: .12em; text-transform: uppercase; color: #9C9E9D; opacity: 0; animation: fade-up .7s ease forwards; }
.intro__icons li:nth-child(1) img { animation-delay: .3s; }   .intro__icons li:nth-child(1) span { animation-delay: .9s; }
.intro__icons li:nth-child(2) img { animation-delay: .75s; }  .intro__icons li:nth-child(2) span { animation-delay: 1.35s; }
.intro__icons li:nth-child(3) img { animation-delay: 1.2s; }  .intro__icons li:nth-child(3) span { animation-delay: 1.8s; }
.intro__icons li:nth-child(4) img { animation-delay: 1.65s; } .intro__icons li:nth-child(4) span { animation-delay: 2.25s; }
.intro__icons li:nth-child(5) img { animation-delay: 2.1s; }  .intro__icons li:nth-child(5) span { animation-delay: 2.7s; }
.intro__icons li:nth-child(6) img { animation-delay: 2.55s; } .intro__icons li:nth-child(6) span { animation-delay: 3.15s; }
.intro__brand { gap: 40px; animation-delay: 5.8s; }
.intro__logo { animation-delay: 3.6s; }
.intro__tag { animation-delay: 3.9s; }
.intro__kick { animation-delay: 6.3s; }
.intro__q span:nth-child(1) i { animation-delay: 6.4s; }
.intro__q span:nth-child(2) i { animation-delay: 6.55s; }
.intro__q span:nth-child(3) i { animation-delay: 6.7s; }
.intro__sub { animation-delay: 7.1s; }
.intro__scroll { animation-delay: 7.4s; }
@media (max-width: 767px) {
  .intro__icons { grid-template-columns: repeat(3, 1fr); row-gap: 22px; width: 78vw; }
  .intro__icons span { font-size: 9px; }
  .intro__brand { gap: 28px; }
}

/* 見出しの副題（「主題──副題」を2行に分けて見せる） */
.hed-sub { display: block; margin-top: .45em; font-size: .6em; line-height: 1.5; font-weight: 700; color: var(--c-body); letter-spacing: .01em; }
.story__hed .hed-sub { font-size: .82em; margin-top: .3em; font-weight: 500; }

/* 特集の問い：2行（清潔感は、／どこで決まるのか。） */
.intro__q { font-size: clamp(40px, 7.6vw, 120px); }
.cover-q__q { font-size: 8.6cqw; top: 17cqw; }
.cover-q--wide .cover-q__q { font-size: 7.2cqw; top: 13cqw; }
.cover-q--sq .cover-q__q { font-size: 9.2cqw; top: 26cqw; left: 7cqw; right: 7cqw; }

/* 6分野アイコン：押すとその分野へ。演出中も、演出後の下部ナビでも押せる */
.intro__brand .intro-cat { pointer-events: auto; display: grid; justify-items: center; gap: 12px; color: inherit; text-decoration: none; }
.intro__brand .intro-cat:hover span { color: #fff; }
.intro__nav { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, 64px); gap: 20px;
  opacity: 0; animation: fade-up .8s ease 7.4s forwards; }
.intro__nav .intro-cat { display: grid; justify-items: center; gap: 6px; color: #9C9E9D; text-decoration: none; }
.intro__nav img { width: 34px; height: 34px; object-fit: contain; opacity: .85; transition: opacity .2s, transform .2s; }
.intro__nav span { font: 700 9px/1 var(--f-latin); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.intro__nav .intro-cat:hover img { opacity: 1; transform: translateY(-2px); }
.intro__nav .intro-cat:hover span { color: #fff; }
.intro__scroll { left: auto; right: var(--pad); transform: none; bottom: 22px; }
.intro.is-done .intro__nav { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .intro__nav { animation: none; opacity: 1; } }
@media (max-width: 767px) {
  .intro__q { font-size: 9.4vw; }
  .intro__nav { grid-template-columns: repeat(6, 1fr); gap: 4px; width: calc(100% - 32px); bottom: 18px; }
  .intro__nav img { width: 28px; height: 28px; }
  .intro__nav span { font-size: 7.5px; letter-spacing: .06em; }
  .intro__scroll { display: none; }
}
@media (max-width: 767px) { .intro__q { font-size: 10vw; } }

/* ---------- 分野ページ：推奨サロン → 比較サロン → 記事 ---------- */
.shop-feature { border: 1px solid var(--c-ink); margin: 8px 0 72px; }
.shop-feature__label { margin: 0; padding: 10px 20px; background: var(--c-ink); color: #fff; font: 700 13px/18px var(--f-text); letter-spacing: .04em; }
.shop-feature__label span { font-weight: 400; margin-left: 1em; color: #C9CCCA; }
.shop-feature__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 28px; }
.shop-feature__meta { font: 700 12px/1 var(--f-text); color: var(--c-meta); letter-spacing: .04em; margin: 4px 0 10px; }
.shop-feature__name { font: 700 28px/1.35 var(--f-text); margin: 0 0 12px; }
.shop-feature__point { font: 400 15px/1.8 var(--f-text); margin: 0; color: var(--c-body); }
.shop-feature .facts { margin-top: 20px; }
.shop-feature .own__cta { margin-top: 4px !important; }
.sec-title__ja { font: 400 13px/1 var(--f-text); color: var(--c-meta); text-transform: none; margin-left: 12px; }
.sec-title { justify-content: flex-start; }
.shop-list { margin-bottom: 88px; }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; }
.shop-card { border-top: 1px solid var(--c-ink); padding: 16px 0 24px; }
.shop-card__meta { font: 700 12px/1 var(--f-text); color: var(--c-meta); margin: 0 0 8px; }
.shop-card__name { font: 700 18px/1.45 var(--f-text); margin: 0 0 8px; }
.shop-card__point { font: 400 13px/1.7 var(--f-text); color: var(--c-body); margin: 0 0 12px; min-height: 3.4em; }
.shop-card dl { display: grid; grid-template-columns: 5em 1fr; gap: 6px 10px; margin: 0 0 14px; font: 400 13px/1.6 var(--f-text); border-top: 1px solid var(--c-rule-soft); padding-top: 12px; }
.shop-card dt { color: var(--c-meta); }
.shop-card dd { margin: 0; }
.shop-card__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 0; font: 700 13px/1.6 var(--f-text); }
.shop-card__links a { color: var(--c-ink); text-underline-offset: 3px; }
.shop-card__links span { font: 400 11.5px/1.6 var(--f-text); color: var(--c-meta); }
.shop-card .muted, .shop-feature .muted { color: var(--c-rule); }
.cat-more { margin: -56px 0 88px; font: 700 14px/1.6 var(--f-text); }
.cat-more a { color: var(--c-ink); text-underline-offset: 4px; }
@media (max-width: 1023px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .shop-feature__body { grid-template-columns: 1fr; padding: 20px 16px; gap: 20px; }
  .shop-feature__name { font-size: 22px; }
  .shop-feature__label span { display: block; margin: 2px 0 0; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-card__point { min-height: 0; }
}

/* ---------- 8分野（Whitening・Gym 追加） ---------- */
.intro__icons { grid-template-columns: repeat(8, 1fr); width: min(94vw, 1180px); gap: clamp(10px, 2.2vw, 32px); }
.intro__icons li:nth-child(7) img { animation-delay: 3.0s; }  .intro__icons li:nth-child(7) span { animation-delay: 3.6s; }
.intro__icons li:nth-child(8) img { animation-delay: 3.45s; } .intro__icons li:nth-child(8) span { animation-delay: 4.05s; }
.intro__logo { animation-delay: 4.2s; }
.intro__tag { animation-delay: 4.5s; }
.intro__brand { animation-delay: 6.4s; }
.intro__kick { animation-delay: 6.9s; }
.intro__q span:nth-child(1) i { animation-delay: 7.0s; }
.intro__q span:nth-child(2) i { animation-delay: 7.15s; }
.intro__sub { animation-delay: 7.6s; }
.intro__scroll, .intro__nav { animation-delay: 7.9s; }
.intro__nav { grid-template-columns: repeat(8, 60px); gap: 16px; }
.banner-groom__index { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1279px) { .gnav { gap: 16px; } .gnav a { font-size: 12.5px; } .gbar__in { gap: 28px; } }
@media (max-width: 1023px) and (min-width: 768px) { .gnav a { font-size: 11px; letter-spacing: .02em; } .gnav { gap: 12px; } .logo { font-size: 16px; } }
@media (max-width: 767px) {
  .intro__icons { grid-template-columns: repeat(4, 1fr); width: 84vw; row-gap: 20px; }
  .intro__nav { grid-template-columns: repeat(4, 1fr); row-gap: 10px; }
  .intro__nav img { width: 24px; height: 24px; }
  .banner-groom__index { grid-template-columns: repeat(4, 1fr); }
}
.intro__scroll { display: none !important; }
/* 下部アイコン列：アニメーションの transform と競合しないよう、左右指定で中央に置く */
.intro__nav { left: var(--pad); right: var(--pad); width: auto; transform: none; justify-content: center; }
@media (max-width: 767px) { .intro__nav { width: auto; justify-content: stretch; } }

/* 脚注・分野への導線（最終稿から生成した記事） */
.prose sup.fn { font: 700 10px/0 var(--f-latin); margin-left: 1px; }
.prose sup.fn a { color: var(--c-meta); text-decoration: none; }
.prose sup.fn a:hover { color: var(--c-ink); }
.footnotes { margin: 0; padding-left: 1.4em; font: 400 12px/1.8 var(--f-text); color: var(--c-meta); overflow-wrap: anywhere; }
.footnotes li { margin: 0 0 6px; }
.footnotes a { color: var(--c-ink); }
.cat-link { margin: 40px 0 0 !important; font: 700 15px/1.6 var(--f-text); }
.cat-link a { color: var(--c-ink) !important; }
.prose blockquote { font-size: 20px; line-height: 34px; }

/* ---------- 記事表紙 v2：線画モチーフ＋短いコピー（記事ごとに専用） ---------- */
.cover-art { position: absolute; inset: 0; color: #fff; }
.cover-art__kick { position: absolute; left: 5cqw; right: 5cqw; top: 5cqw; display: flex; justify-content: space-between;
  font: 700 max(10px, 1.35cqw)/1.2 var(--f-latin); letter-spacing: .08em; text-transform: uppercase; }
.cover-art__en { display: block; margin-bottom: 1.2cqw; font: 700 max(10px, 1.5cqw)/1.2 var(--f-latin); letter-spacing: .1em; text-transform: uppercase; color: #9C9E9D; }
.cover-art__head { margin: 0; font: 900 5.6cqw/1.22 var(--f-ja); letter-spacing: -0.01em; font-feature-settings: "palt"; color: #fff; }
/* solo：右に大きく線画、左下にコピー */
.cover-art--solo .cover-art__img { position: absolute; right: 6%; top: 15%; width: 44%; height: 72%; object-fit: contain; object-position: center; }
.cover-art--solo .cover-art__text { position: absolute; left: 5cqw; bottom: 5cqw; right: 48%; }
/* split：左右に対比 */
.cover-art__halves { position: absolute; left: 5cqw; right: 5cqw; top: 15%; bottom: 24%; display: grid; grid-template-columns: 1fr 1fr; }
.cover-art__half { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 1.6cqw; min-height: 0; }
.cover-art__half + .cover-art__half { border-left: 1px solid #3C3D3C; }
.cover-art__half img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.cover-art__half b { font: 900 5.2cqw/1 var(--f-latin); letter-spacing: -0.03em; text-transform: uppercase; }
.cover-art--split .cover-art__text { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; }
.cover-art--split .cover-art__head { font-size: 2.9cqw; font-weight: 700; letter-spacing: .01em; }
/* 正方形カード */
.cover-art--sq .cover-art__kick { left: 7cqw; right: 7cqw; top: 7cqw; font-size: max(9px, 2.6cqw); }
.cover-art--sq .cover-art__kick span:last-child { display: none; }
.cover-art--sq.cover-art--solo .cover-art__img { right: 10%; top: 17%; width: 80%; height: 42%; }
.cover-art--sq.cover-art--solo .cover-art__text { left: 7cqw; right: 7cqw; bottom: 7cqw; }
.cover-art--sq .cover-art__en { font-size: max(8px, 2.5cqw); margin-bottom: 2cqw; }
.cover-art--sq .cover-art__head { font-size: 9.4cqw; }
.cover-art--sq .cover-art__halves { left: 7cqw; right: 7cqw; top: 19%; bottom: 30%; }
.cover-art--sq .cover-art__half b { font-size: 8.4cqw; }
.cover-art--sq.cover-art--split .cover-art__text { left: 7cqw; right: 7cqw; bottom: 7cqw; }
.cover-art--sq.cover-art--split .cover-art__head { font-size: 5cqw; line-height: 1.4; }

/* ---------- 掲載店舗一覧：冒頭演出のすぐ下に置く、分野への入口（白い帯・タイル） ---------- */
.intro { height: calc(100svh - 56px - 190px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 420px; }
.shopnav { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 28px var(--pad) 56px; }
.shopnav__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 16px; }
.shopnav__head h2 { font: 900 22px/1.3 var(--f-text); letter-spacing: .01em; }
.shopnav__head p { margin: 0; font: 400 13px/1.6 var(--f-text); color: var(--c-meta); }
.shopnav__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--c-ink); border-left: 1px solid var(--c-ink); }
.shopnav__tile { position: relative; display: grid; justify-items: start; align-content: start; gap: 4px; padding: 14px 12px 14px 14px;
  border-right: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); background: #fff; color: var(--c-ink); text-decoration: none; transition: background .15s, color .15s; }
.shopnav__tile img { width: 44px; height: 44px; object-fit: contain; filter: invert(1); margin-bottom: 6px; }
.shopnav__tile b { font: 900 15px/1.1 var(--f-latin); letter-spacing: -0.01em; text-transform: uppercase; }
.shopnav__tile span { font: 400 12px/1.4 var(--f-text); color: var(--c-meta); }
.shopnav__tile i { position: absolute; right: 12px; top: 12px; font: 700 15px/1 var(--f-latin); font-style: normal; }
.shopnav__tile:hover, .shopnav__tile:focus-visible { background: var(--c-ink); color: #fff; }
.shopnav__tile:hover img, .shopnav__tile:focus-visible img { filter: none; }
.shopnav__tile:hover span, .shopnav__tile:focus-visible span { color: #C9CCCA; }
.shopnav + .container { padding-top: 8px; }
@media (max-width: 1023px) { .shopnav__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .intro { height: calc(100svh - 56px - 290px); } }
@media (max-width: 767px) {
  .intro { height: calc(100svh - 52px - 300px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 360px; }
  .shopnav { padding: 20px var(--pad) 40px; }
  .shopnav__head h2 { font-size: 19px; }
  .shopnav__tile { padding: 10px 8px 12px 10px; }
  .shopnav__tile img { width: 32px; height: 32px; margin-bottom: 4px; }
  .shopnav__tile b { font-size: 11.5px; }
  .shopnav__tile span { font-size: 10.5px; }
  .shopnav__tile i { right: 8px; top: 8px; font-size: 12px; }
}
@media (max-width: 767px) { .shopnav__tile b { font-size: 10.5px; letter-spacing: -0.02em; } }

/* 比較サロンの列数は店舗数に合わせる */
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

/* ---------- エリアの推奨サロン（運営店舗の枠より小さく） ---------- */
.shop-feature:has(+ .shop-pick) { margin-bottom: 24px; }
.shop-pick { border: 1px solid var(--c-ink); margin: 0 0 72px; max-width: 760px; }
.shop-pick__label { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--c-ink); font: 700 12px/18px var(--f-text); letter-spacing: .04em; color: var(--c-ink); }
.shop-pick__label span { font-weight: 400; margin-left: 1em; color: var(--c-meta); }
.shop-pick__body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; padding: 20px; }
.shop-pick__media .ph__word { font-size: 44px; left: 12px; bottom: 10px; }
.shop-pick__name { font: 700 20px/1.4 var(--f-text); margin: 0 0 6px; }
.shop-pick__point { font: 400 13px/1.7 var(--f-text); color: var(--c-body); margin: 0 0 12px; }
.shop-pick__facts { display: grid; grid-template-columns: 5em 1fr; gap: 6px 10px; margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--c-rule-soft); font: 400 13px/1.6 var(--f-text); }
.shop-pick__facts dt { color: var(--c-meta); }
.shop-pick__facts dd { margin: 0; }
.shop-pick__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; }
.shop-pick__links span { font: 400 11.5px/1.6 var(--f-text); color: var(--c-meta); margin-left: auto; }
@media (max-width: 767px) {
  .shop-pick__body { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .shop-pick__media .ph__word { font-size: 24px; left: 8px; bottom: 8px; }
  .shop-pick__label span { display: block; margin: 2px 0 0; }
  .shop-pick__name { font-size: 18px; }
}

/* ---------- お問い合わせフォーム ---------- */
.cform { margin-top: 32px; border-top: 1px solid var(--c-ink); padding-top: 8px; }
.cform__f { display: block; margin: 20px 0 0; }
.cform__f > span { display: block; font: 700 13px/20px var(--f-text); color: var(--c-ink); margin-bottom: 6px; }
.cform__f > span b { font-weight: 400; font-size: 11px; color: var(--c-meta); margin-left: 8px; }
.cform input[type="text"], .cform input[type="email"], .cform select, .cform textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--c-ink); border-radius: 0; background: #fff; color: var(--c-ink);
  font: 400 16px/24px var(--f-text); padding: 11px 12px; appearance: none; -webkit-appearance: none; }
.cform select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.cform textarea { resize: vertical; min-height: 160px; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform .note { margin-top: 20px !important; }
.cform button.btn { border: 0; cursor: pointer; font-family: var(--f-text); }
.cform button.btn[disabled] { background: var(--c-rule); cursor: default; }
.cform__msg { font: 700 14px/1.7 var(--f-text); margin: 0 !important; min-height: 1.7em; }
.cform__msg.is-err { color: #9A3B1F; }
/* スマホ：分野名（日本語）を1行に収める（「ホワイトニング」が折り返さないように） */
@media (max-width: 767px) { .shopnav__tile span { font-size: min(10px, 2.6vw); letter-spacing: -0.04em; white-space: nowrap; } }
/* 小さい正方形の表紙（スマホの一覧）：英字の小見出しが絵に重なるので隠し、絵を少し上に寄せる */
@container (max-width: 220px) {
  .cover-art--sq .cover-art__en { display: none; }
  .cover-art--sq.cover-art--solo .cover-art__img { top: 15%; height: 38%; }
}
@container (max-width: 220px) {
  .cover-num--sq .cover-num__kick { display: none; }
  .cover-num--sq .cover-num__n { top: 9cqw; }
  .cover-num--sq .cover-num__cap { font-size: 8.6cqw; line-height: 1.5; }
}