:root {
  --base: #F4F6F7;
  --bluegray: #A6ADB1;
  --steel: #7A838A;
  --ink: #343B41;
  --deep: #4A545C;
  --white: #FFFFFF;
  --accent: #C63534;
  --serif: "Noto Serif JP", serif;
  --sans: "Noto Sans JP", sans-serif;
  --inter: "Inter", sans-serif;
  --display: "Cormorant Garamond", serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --site-header-height: 68px;
}

* { box-sizing: border-box; }

html {
  background: var(--base);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-header-height) + 18px);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  line-break: strict;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
summary { color: inherit; font: inherit; }

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd { margin: 0; }

h1,
h2,
h3 { font-weight: 500; }

ul,
ol { margin: 0; padding: 0; }

.site-shell { width: min(100% - 40px, 1200px); margin-inline: auto; }

.site-skip-link {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 50%;
  padding: .6rem 1rem;
  background: var(--deep);
  color: var(--white);
  font-size: .8rem;
  transform: translate(-50%, -115%);
}

.site-skip-link:focus { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  min-height: var(--site-header-height);
  border-bottom: 1px solid color-mix(in srgb, var(--steel) 52%, transparent);
  background: rgba(244, 246, 247, .96);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  position: relative;
  display: flex;
  min-height: var(--site-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__brand { display: inline-flex; flex: 0 0 auto; align-items: center; }

.site-header__brand img { width: min(144px, 42vw); height: auto; }

.site-header__menu { position: relative; margin-left: auto; }

.site-header__toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--inter);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.site-header__toggle::-webkit-details-marker { display: none; }

.site-header__toggle::marker { content: ""; }

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .25s var(--ease);
}

.site-header__toggle-icon { position: relative; }

.site-header__toggle-icon::before { position: absolute; top: -6px; }

.site-header__toggle-icon::after { position: absolute; top: 6px; }

.site-header__menu[open] .site-header__toggle-icon { background: transparent; }

.site-header__menu[open] .site-header__toggle-icon::before { top: 0; transform: rotate(45deg); }

.site-header__menu[open] .site-header__toggle-icon::after { top: 0; transform: rotate(-45deg); }

.site-header__nav {
  position: absolute;
  z-index: 2;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  width: min(260px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--steel);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(74, 84, 92, .12);
}

.site-header__menu:not([open]) > .site-header__nav { display: none; }

.site-header__menu[open] > .site-header__nav { display: grid; }

.site-header__nav a {
  min-height: 47px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--steel);
  color: var(--ink);
  font-family: var(--inter);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.5;
}

.site-header__nav a:last-child { border-bottom: 0; }

.site-header__nav a:hover { background: var(--base); }

.site-section { padding-block: 88px; }

.site-section--light { background: var(--white); }

.site-section--base {
  border-block: 4px double color-mix(in srgb, var(--steel) 58%, transparent);
  background: var(--base);
}

.site-section__heading { max-width: 760px; }

.site-eyebrow {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--inter);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
}

.site-heading {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5.8vw, 2.85rem);
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.45;
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}

.site-heading--inverse { color: var(--white); }

.site-copy {
  margin-top: 21px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 2;
}

.site-copy--muted { color: var(--deep); }

.site-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .62rem 1.25rem;
  border: 1px solid var(--deep);
  background: var(--deep);
  color: var(--white);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.site-button:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }

.site-button--outline { border-color: var(--white); background: transparent; color: var(--white); }

.site-button--outline:hover { background: var(--white); color: var(--ink); }

.site-button--deep { background: var(--deep); border-color: var(--deep); color: var(--white); }

.site-button--deep:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.site-button--outline-deep { background: transparent; border-color: var(--deep); color: var(--deep); }

.site-button--outline-deep:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }

.site-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--steel);
  padding-bottom: 4px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
}

.site-inline-link::after { color: var(--deep); content: "→"; }

.site-inline-link:hover { color: var(--deep); }

.home-hero,
.recruit-hero {
  position: relative;
  display: grid;
  min-height: min(690px, calc(100svh - var(--site-header-height)));
  overflow: hidden;
  background: var(--bluegray);
  color: var(--white);
  isolation: isolate;
}

.home-hero::before,
.home-hero::after,
.recruit-hero::before,
.recruit-hero::after {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .9);
  content: "";
  pointer-events: none;
}

.home-hero::before,
.recruit-hero::before { inset: clamp(14px, 2.5vw, 34px); }

.home-hero::after,
.recruit-hero::after { inset: calc(clamp(14px, 2.5vw, 34px) + 4px); }

.home-hero__image,
.recruit-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__image { object-position: 56% center; }

.recruit-hero__image { object-position: 55% center; }

.home-hero__veil,
.recruit-hero__veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(74, 84, 92, .68) 0%, rgba(74, 84, 92, .34) 46%, rgba(166, 173, 177, .08) 100%);
}

/* 本体ヒーローは仕上がりの髪が主役＝右側の被せをさらに軽く */
.home-hero__veil {
  background: linear-gradient(95deg, rgba(74, 84, 92, .66) 0%, rgba(74, 84, 92, .40) 32%, rgba(74, 84, 92, .16) 58%, rgba(166, 173, 177, .04) 100%);
}

@media (max-width: 679px) {
  .home-hero__veil {
    background: linear-gradient(178deg, rgba(74, 84, 92, .30) 0%, rgba(74, 84, 92, .42) 45%, rgba(74, 84, 92, .62) 100%);
  }
}

.home-hero .site-eyebrow,
.recruit-hero .site-eyebrow,
.recruit-banner .site-eyebrow,
.philosophy .site-eyebrow { color: var(--white); }

.home-hero__content,
.recruit-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(92px, 15vw, 170px);
}

.home-hero__copy { max-width: 780px; }

.home-hero__title {
  max-width: 690px;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(2.55rem, 7.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.32;
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}

.home-hero__title span { display: inline-block; }

.home-hero__mobile-break,
.recruit-hero__mobile-break { display: block; }

.home-hero__lead,
.recruit-hero__lead {
  max-width: 550px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 2;
}

.home-hero .site-button {
  border-color: var(--deep);
  background: var(--deep);
  color: var(--white);
}

.home-hero .site-button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.recruit-hero .site-button {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.recruit-hero .site-button:hover { background: var(--base); color: var(--ink); }

.home-hero .site-button--outline,
.recruit-hero .site-button--outline { border-color: var(--white); background: transparent; color: var(--white); }

.home-hero .site-button--outline:hover,
.recruit-hero .site-button--outline:hover { background: var(--white); color: var(--ink); }

.home-hero__actions,
.recruit-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 31px;
}

.home-concept {
  position: relative;
  overflow: hidden;
  background: var(--base);
  text-align: center;
}

.home-concept::before,
.home-concept::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: color-mix(in srgb, var(--steel) 58%, transparent);
  content: "";
}

.home-concept::before { top: 0; }

.home-concept::after { top: 4px; }

.home-concept__inner { max-width: 960px; }

.home-concept__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: .045em;
  line-height: 1.5;
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}

.home-concept__title span { display: inline-block; }

.home-concept__copy {
  max-width: 650px;
  margin: 28px auto 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 2;
}

.home-concept__facts {
  margin-top: clamp(54px, 8vw, 92px);
  text-align: left;
}

.site-section.home-catalog { padding-block: clamp(62px, 8vw, 92px); background: var(--base); }

.home-proof {
  border-block: 4px double color-mix(in srgb, var(--steel) 64%, transparent);
  background: var(--white);
}

.home-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.home-proof__item { min-width: 0; padding: 26px 13px 25px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }

.home-proof__item:nth-child(2n) { border-right: 0; }

.home-proof__item:nth-last-child(-n + 2) { border-bottom: 0; }

.home-proof__label { color: var(--ink); font-family: var(--inter); font-size: .7rem; font-weight: 600; letter-spacing: .11em; line-height: 1.5; }

.home-proof__number { margin-top: 6px; color: var(--ink); font-family: var(--inter); font-size: clamp(1.55rem, 6vw, 2.55rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; white-space: nowrap; }

.home-proof__number--accent { color: var(--accent); }

.home-proof__number--review {
  display: flex;
  flex-wrap: wrap;
  gap: .12em .34em;
  font-size: clamp(1.3rem, 5.2vw, 2.1rem);
  white-space: normal;
}

.home-proof__note { margin-top: 17px; color: var(--ink); font-size: .8rem; line-height: 1.75; }

.value-grid { display: grid; gap: 0; margin-top: 43px; border-top: 4px double var(--steel); }

.value-card { padding: 24px 0 27px; border-bottom: 1px solid color-mix(in srgb, var(--steel) 48%, transparent); }

.value-card__number { color: var(--ink); font-family: var(--inter); font-size: .72rem; font-weight: 600; letter-spacing: .14em; }

.value-card h3 { margin-top: 7px; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; letter-spacing: .04em; line-height: 1.55; }

.value-card p { margin-top: 12px; color: var(--ink); font-size: 1rem; line-height: 2; }

.value-card small { display: block; margin-top: 10px; color: var(--ink); font-family: var(--inter); font-size: .8rem; letter-spacing: .035em; line-height: 1.6; }

.value-card .value-card__data { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); font-weight: 600; }

.home-concept__source { margin-top: 18px; color: var(--ink); font-size: .72rem; letter-spacing: .02em; line-height: 1.7; text-align: right; }

.salon-grid { display: grid; gap: 36px 16px; margin-top: 40px; }

.salon-card { min-width: 0; border-top: 4px double var(--steel); padding-top: 11px; }

.salon-card__media,
.recruit-salon-card__media { position: relative; display: block; overflow: hidden; background: var(--bluegray); }

.salon-card__media { aspect-ratio: 3 / 2; }

.recruit-salon-card__media { aspect-ratio: 4 / 5; }

.salon-card__media::after,
.recruit-salon-card__media::after {
  position: absolute;
  inset: 0;
  background: rgba(74, 84, 92, .10);
  content: "";
  pointer-events: none;
}

.salon-card__media img,
.recruit-salon-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform .45s var(--ease); }

.recruit-salon-card__media--heartful { margin-bottom: calc(10.715% + 12px); aspect-ratio: 7 / 8; }

.recruit-salon-card__media--heartful img { object-position: 50% center; }

.salon-card:hover .salon-card__media img { transform: scale(1.025); }

.recruit-salon-card:hover .recruit-salon-card__media--heartful img { transform: none; }

.salon-card h3 { margin-top: 14px; color: var(--ink); font-family: var(--serif); font-size: 1.12rem; letter-spacing: .045em; line-height: 1.55; }

.salon-card__phone { margin-top: 4px; color: var(--ink); font-family: var(--inter); font-size: .8rem; font-weight: 500; letter-spacing: .025em; line-height: 1.6; }

.salon-card__access { min-height: 3.8em; margin-top: 8px; color: var(--ink); font-size: 1rem; line-height: 1.8; }

.salon-card__links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 13px; }

.salon-card__links .site-inline-link { margin-top: 0; }

.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 28px; }

.style-grid figure { position: relative; margin: 0; overflow: hidden; background: var(--bluegray); aspect-ratio: 4 / 5; }

.style-grid figure::before,
.style-grid figure::after {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .92);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease), inset .28s var(--ease);
}

.style-grid figure::before { inset: 10px; }

.style-grid figure::after { inset: 14px; }

.style-grid figure:hover::before,
.style-grid figure:hover::after { opacity: 1; }

.style-grid figure:nth-child(3n) { aspect-ratio: 4 / 5; }

.style-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }

.style-grid figure:hover img { transform: scale(1.035); }

.news-filter {
  display: flex;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  margin-top: 31px;
  overflow-x: auto;
  padding: 4px 4px 11px;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--bluegray) transparent;
  scrollbar-width: thin;
}

.news-filter__button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--steel);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.news-filter__button:hover { background: var(--base); border-color: var(--ink); }

.news-filter__button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }

.news-list { margin-top: 18px; border-top: 4px double var(--steel); }

.news-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px 12px;
  min-width: 0;
  padding: 18px 0 19px;
  border-bottom: 1px solid color-mix(in srgb, var(--steel) 52%, transparent);
}

.news-item[hidden],
.news-empty[hidden] { display: none; }

.news-item__date {
  color: var(--ink);
  font-family: var(--inter);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
  line-height: 1.8;
  white-space: nowrap;
}

.news-item__store {
  justify-self: start;
  min-width: 0;
  padding: .18rem .68rem;
  overflow: hidden;
  border: 1px solid var(--steel);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item__content { grid-column: 1 / -1; min-width: 0; }

.news-item__title { color: var(--ink); font-family: var(--serif); font-size: 1rem; letter-spacing: .025em; line-height: 1.7; }

.news-item__title a { text-decoration-color: transparent; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }

.news-item__title a:hover { color: var(--deep); text-decoration-color: var(--steel); }

.news-item__author { margin-top: 5px; color: var(--deep); font-size: .72rem; letter-spacing: .025em; line-height: 1.65; }

.news-item__excerpt {
  margin-top: 4px;
  overflow: hidden;
  color: var(--deep);
  font-size: .8rem;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item__excerpt:empty { display: none; }

.news-empty { padding: 28px 0; border-bottom: 1px solid color-mix(in srgb, var(--steel) 52%, transparent); color: var(--deep); font-size: .88rem; text-align: center; }

.news-note { margin-top: 21px; color: var(--deep); font-size: .78rem; letter-spacing: .015em; line-height: 1.8; }

.recruit-banner { position: relative; overflow: hidden; background: var(--deep); color: var(--base); }

.recruit-banner__inner { display: grid; gap: 24px; padding-block: 62px; }

.recruit-banner .site-eyebrow { color: var(--white); }

.recruit-banner__title { position: relative; max-width: 690px; padding-bottom: 18px; color: var(--white); font-family: var(--serif); font-size: clamp(1.75rem, 5.8vw, 3rem); font-weight: 500; letter-spacing: .04em; line-height: 1.5; }

.recruit-banner__phrase { display: inline-block; }

.recruit-banner__title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 4px;
  background: var(--accent);
  content: "";
}

.reserve-intro { margin-top: 14px; color: var(--deep); font-size: .9rem; line-height: 1.8; }

.reserve-grid { display: grid; gap: 16px 26px; margin-top: 31px; }

.reserve-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--steel) 48%, transparent); }

.reserve-card h3 { color: var(--ink); font-family: var(--serif); font-size: 1rem; letter-spacing: .035em; line-height: 1.5; }

.reserve-card a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 1px solid var(--steel); color: var(--deep); font-family: var(--inter); font-size: .8rem; font-weight: 500; letter-spacing: .025em; line-height: 1.5; white-space: nowrap; }

.reserve-card a:hover { border-bottom-color: var(--deep); color: var(--ink); }

.reserve-note { margin-top: 24px; color: var(--ink); font-size: .8rem; }

.site-footer { padding-block: 56px 28px; border-top: 4px double rgba(255, 255, 255, .52); background: var(--deep); color: rgba(255, 255, 255, .88); }

.site-footer__inner { display: grid; gap: 42px; }

.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 28px; }

.site-footer__brand,
.site-footer__column { min-width: 0; }

.site-footer__logo { width: min(150px, 100%); height: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }

.site-footer__company { color: var(--white); font-family: var(--serif); font-size: 1rem; letter-spacing: .055em; line-height: 1.65; }

.site-footer__address { display: grid; gap: 2px; margin-top: 9px; color: rgba(255, 255, 255, .72); font-family: var(--sans); font-size: .78rem; font-style: normal; letter-spacing: .025em; line-height: 1.75; }

.site-footer__address a { width: fit-content; margin-top: 3px; color: var(--white); }

.site-footer__heading { margin-bottom: 15px; color: rgba(255, 255, 255, .7); font-family: var(--inter); font-size: .7rem; font-weight: 600; letter-spacing: .14em; line-height: 1.5; }

.site-footer__list { display: grid; gap: 8px; list-style: none; }

.site-footer__list a,
.site-footer__privacy { overflow-wrap: anywhere; color: var(--white); font-size: .8rem; letter-spacing: .025em; line-height: 1.7; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s var(--ease); }

.site-footer__address a:hover,
.site-footer__list a:hover,
.site-footer__privacy:hover { color: var(--white); text-decoration: underline; text-decoration-color: currentColor; }

.site-footer__bottom { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }

.site-footer__copyright { color: rgba(255, 255, 255, .7); font-family: var(--inter); font-size: .72rem; letter-spacing: .045em; line-height: 1.8; }

.mobile-cta { display: none; }

.mobile-cta a { display: grid; min-width: 0; min-height: 58px; padding: 8px 12px; place-items: center; font-size: .78rem; font-weight: 600; letter-spacing: .06em; line-height: 1.45; text-align: center; }

.mobile-cta a:first-child { background: var(--deep); color: var(--white); }

.mobile-cta a:last-child { border-top: 1px solid var(--steel); background: var(--base); color: var(--ink); }

@media (min-width: 480px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 769px) {
  .site-footer { padding-top: 64px; }

  .site-footer__grid { grid-template-columns: minmax(220px, 1.35fr) minmax(190px, 1.2fr) minmax(0, .82fr) minmax(0, .95fr); gap: clamp(28px, 3.4vw, 56px); }
}

.recruit-hero { min-height: min(680px, calc(100svh - var(--site-header-height))); }

.recruit-hero__content { justify-content: flex-end; padding-block: clamp(120px, 20vw, 220px) clamp(74px, 10vw, 118px); }

.recruit-hero__title { max-width: 820px; color: var(--white); font-family: var(--serif); font-size: clamp(2.15rem, 6.8vw, 4.8rem); font-weight: 500; letter-spacing: .02em; line-height: 1.36; text-wrap: balance; font-feature-settings: "palt" 1; }

.recruit-hero__phrase { display: inline-block; }

.recruit-hero__number { letter-spacing: .02em; }

.recruit-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 41px; border-top: 4px double var(--steel); border-left: 1px solid var(--steel); }

.recruit-stat { min-width: 0; padding: 20px 14px 18px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }

.recruit-stat__label { color: var(--ink); font-family: var(--inter); font-size: .7rem; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }

.recruit-stat__value { margin-top: 8px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.1rem, 4.1vw, 1.5rem); font-weight: 500; letter-spacing: .02em; line-height: 1.45; }

.recruit-stat__value--inter { font-family: var(--inter); font-size: clamp(1.2rem, 4.5vw, 1.65rem); letter-spacing: -.035em; }

.recruit-stat:first-child .recruit-stat__value { color: var(--accent); }

.career-grid { display: grid; gap: 16px; margin-top: 39px; }

.career-card { min-width: 0; padding: 23px 19px 22px; border-top: 4px double var(--steel); background: var(--base); }

.career-card h3 { color: var(--ink); font-family: var(--serif); font-size: 1.16rem; letter-spacing: .04em; line-height: 1.55; }

.career-card p { margin-top: 10px; color: var(--ink); font-size: 1rem; line-height: 1.9; }

.career-card p + p { margin-top: 6px; color: var(--ink); }

.curriculum-intro { max-width: 760px; margin-top: 24px; color: var(--ink); font-size: 1rem; line-height: 2; }

.curriculum-list { position: relative; display: grid; gap: 0; margin-top: 42px; list-style: none; counter-reset: academy; }

.curriculum-list::before { position: absolute; top: 10px; bottom: 10px; left: 29px; width: 5px; border-inline: 1px solid var(--steel); content: ""; }

.curriculum-item { position: relative; min-width: 0; padding: 0 0 36px 82px; counter-increment: academy; }

.curriculum-item:last-child { padding-bottom: 0; }

.curriculum-item::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  width: 64px;
  min-height: 54px;
  place-items: center;
  border: 4px double var(--white);
  background: var(--deep);
  color: var(--white);
  content: counter(academy, decimal-leading-zero);
  font-family: var(--inter);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.curriculum-item__period { color: var(--ink); font-family: var(--inter); font-size: .7rem; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }

.curriculum-item h3 { margin-top: 2px; color: var(--ink); font-family: var(--serif); font-size: 1.08rem; letter-spacing: .04em; line-height: 1.55; }

.curriculum-item p { margin-top: 7px; color: var(--ink); font-size: 1rem; line-height: 1.9; }

.interview-grid { display: grid; gap: 18px; margin-top: 40px; }

.interview-card { min-width: 0; border-top: 4px double var(--steel); background: var(--base); }

.interview-card__heading { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--steel); }

.interview-card__monogram { display: grid; width: 74px; height: 92px; place-items: center; border: 4px double var(--white); background: var(--bluegray); color: var(--white); font-family: var(--display); font-size: 2.65rem; font-style: italic; line-height: 1; text-transform: uppercase; }

.interview-card h3 { color: var(--ink); font-family: var(--serif); font-size: 1.17rem; letter-spacing: .05em; line-height: 1.45; }

.interview-card__role { margin-top: 3px; color: var(--ink); font-family: var(--inter); font-size: .8rem; letter-spacing: .015em; line-height: 1.7; }

.interview-card__body { padding: 19px 16px 21px; }

.interview-card__more { margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--steel); }

.interview-card__more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--ink); font-family: var(--inter); font-size: .8rem; font-weight: 600; letter-spacing: .06em; line-height: 1.6; list-style: none; }

.interview-card__more summary::-webkit-details-marker { display: none; }

.interview-card__more summary::marker { content: ""; }

.interview-card__more summary::after { color: var(--ink); content: "+"; }

.interview-card__more[open] summary::after { content: "−"; }

.interview-card__more > .interview-card__qa { margin-top: 13px; }

.interview-card__qa dt { color: var(--ink); font-family: var(--inter); font-size: .8rem; font-weight: 600; letter-spacing: .06em; line-height: 1.7; }

.interview-card__qa dd { margin-top: 5px; color: var(--ink); font-size: 1rem; line-height: 1.95; }

.faq-grid { margin-top: 39px; border-top: 4px double var(--steel); }

.site-faq { border-bottom: 1px solid rgba(74, 84, 92, .22); }

.site-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 1px; cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: 1rem; letter-spacing: .025em; line-height: 1.75; list-style: none; }

.site-faq summary::-webkit-details-marker { display: none; }

.site-faq summary::after { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; margin-top: 4px; border: 1px solid var(--steel); color: var(--ink); font-family: var(--inter); font-size: .9rem; line-height: 1; content: "+"; }

.site-faq[open] summary::after { content: "−"; }

.site-faq p { padding: 0 1px 21px; color: var(--ink); font-size: 1rem; line-height: 2; }

.recruit-salon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; margin-top: 40px; }

.recruit-salon-card { min-width: 0; border-top: 4px double var(--steel); padding-top: 10px; }

.recruit-salon-card:hover img { transform: scale(1.025); }

.recruit-salon-card h3 { margin-top: 12px; color: var(--ink); font-family: var(--serif); font-size: 1rem; letter-spacing: .02em; line-height: 1.65; }

.recruit-salon-card .site-inline-link { margin-top: 9px; font-size: .8rem; }

.requirements-grid { display: grid; gap: 18px; margin-top: 39px; }

.requirements-card { min-width: 0; border-top: 4px double var(--steel); background: var(--base); }

.requirements-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 16px 15px; cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; letter-spacing: .04em; line-height: 1.5; list-style: none; }

.requirements-card > summary::-webkit-details-marker { display: none; }

.requirements-card > summary::marker { content: ""; }

.requirements-card > summary::after { color: var(--ink); font-family: var(--inter); font-size: .9rem; font-weight: 600; content: "+"; }

.requirements-card[open] > summary::after { content: "−"; }

.requirements-card__subhead { padding: 13px 16px; border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); background: var(--bluegray); color: var(--ink); font-family: var(--inter); font-size: .8rem; font-weight: 600; letter-spacing: .06em; line-height: 1.65; }

.requirements-list { padding: 0 16px; }

.requirements-list > div { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--steel); }

.requirements-list > div:last-child { border-bottom: 0; }

.requirements-list dt { color: var(--ink); font-family: var(--inter); font-size: .8rem; font-weight: 600; letter-spacing: .07em; line-height: 1.5; }

.requirements-list dd { color: var(--ink); font-size: 1rem; line-height: 1.85; }

.philosophy { border-block: 4px double rgba(255, 255, 255, .56); background: var(--deep); color: var(--white); }

.philosophy .site-eyebrow { color: var(--white); }

.philosophy__statement { max-width: 820px; margin-top: 26px; color: var(--white); font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.8rem); letter-spacing: .035em; line-height: 1.8; }

.philosophy__copy { max-width: 820px; margin-top: 26px; color: rgba(255, 255, 255, .86); font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.26rem); letter-spacing: .025em; line-height: 2; }

.philosophy__signature { margin-top: 25px; color: var(--white); font-family: var(--inter); font-size: .8rem; font-weight: 500; letter-spacing: .08em; line-height: 1.8; }

.philosophy .site-heading span,
.philosophy__statement span { display: inline-block; }

.entry-grid { display: grid; gap: 10px; margin-top: 35px; }

.entry-grid .site-button { width: 100%; }

@media (min-width: 680px) {
  :root { --site-header-height: 72px; }

  .site-shell { width: min(100% - 72px, 1200px); }

  .site-section { padding-block: 108px; }

  .home-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .home-proof__item,
  .home-proof__item:nth-child(2n),
  .home-proof__item:nth-last-child(-n + 2) { padding: 29px 19px 26px; border-right: 1px solid var(--steel); border-bottom: 0; }

  .home-proof__item:last-child { border-right: 0; }

  .home-proof__number--review { flex-direction: column; gap: .08em; }

  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .value-card { min-height: 100%; padding: 0 24px 0 0; border-bottom: 0; border-right: 1px solid rgba(74, 84, 92, .22); }

  .value-card + .value-card { padding-left: 24px; }

  .value-card:last-child { border-right: 0; padding-right: 0; }

  .salon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; }

  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  .style-grid figure { aspect-ratio: 4 / 5; }

  .news-item { grid-template-columns: 108px minmax(170px, 210px) minmax(0, 1fr); gap: 24px; align-items: start; padding-block: 20px; }

  .news-item__date { padding-top: 2px; }

  .news-item__store { max-width: 100%; }

  .news-item__content { grid-column: auto; }

  .recruit-banner__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-block: 75px; }

  .reserve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px; }

  .recruit-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .interview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .interview-card__more summary { display: none; }

  .interview-card__more:not([open]) > .interview-card__qa { display: block; }

  .requirements-list > div { grid-template-columns: 94px minmax(0, 1fr); gap: 11px; }

  .entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

@media (min-width: 780px) {
  .site-header__menu { position: static; }

  .site-header__toggle { display: none; }

  .site-header__menu:not([open]) > .site-header__nav,
  .site-header__menu[open] > .site-header__nav {
    position: static;
    display: flex;
    width: auto;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header__nav a { min-height: 0; padding: 7px 0 6px; border-bottom: 1px solid transparent; color: var(--ink); font-size: .7rem; }

  .site-header__nav a + a { margin-left: clamp(15px, 2vw, 29px); }

  .site-header__nav a:hover { border-bottom-color: var(--steel); background: transparent; color: var(--deep); }

  .requirements-grid { grid-template-columns: minmax(0, 1fr); }

}

@media (min-width: 960px) {
  .site-shell { width: min(100% - 96px, 1200px); }

  .site-section { padding-block: 128px; }

  .home-hero__image { object-position: 58% center; }

  .home-proof__number--review { flex-direction: row; gap: .12em .34em; }

  .salon-grid { gap: 55px 24px; }

  .recruit-salon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 39px 19px; }

  .recruit-hero__content { padding-block: clamp(135px, 18vw, 205px) clamp(90px, 8vw, 120px); }
}

@media (max-width: 679px) {
  .site-page--mobile-cta .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  .mobile-cta { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--base); box-shadow: 0 -6px 18px rgba(74, 84, 92, .16); }

  .salon-grid { grid-template-columns: minmax(0, 1fr); gap: 27px; }

  .salon-card {
    display: grid;
    grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
    grid-template-rows: auto repeat(2, minmax(44px, auto));
    column-gap: 16px;
    align-items: start;
  }

  .salon-card__media { grid-column: 1; grid-row: 1 / 4; align-self: start; min-height: 0; aspect-ratio: 3 / 2; }

  .salon-card h3 { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1rem; }

  .salon-card__phone { grid-column: 2; grid-row: 2; margin-top: 0; }

  .salon-card__phone a { display: inline-flex; min-height: 44px; align-items: center; }

  .salon-card__links { grid-column: 2; grid-row: 3; align-self: start; gap: 0 12px; min-height: 44px; margin-top: 0; }

  .salon-card__links .site-inline-link { min-height: 44px; align-items: center; padding-bottom: 0; font-size: .74rem; }

  .home-concept__title span { display: inline; }

  .salon-card__access { display: none; }

  .news-item__author,
  .news-item__excerpt { display: none; }

  .home-hero__title { font-size: clamp(2.05rem, 9vw, 2.55rem); }

  .recruit-hero__title { font-size: clamp(1.85rem, 8.5vw, 2.15rem); }
}

@media (min-width: 680px) {
  .home-hero__mobile-break,
  .recruit-hero__mobile-break { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ---------- 記事ページ（サロンニュース詳細） ---------- */
.article { padding: 56px 0 72px; }
.article__inner { max-width: 760px; }
.article__breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--steel); font-size: .78rem; letter-spacing: .04em; }
.article__breadcrumb a { border-bottom: 1px solid transparent; }
.article__breadcrumb a:hover { border-bottom-color: var(--steel); }
.article__head { margin-top: 26px; padding-bottom: 26px; border-bottom: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.article__meta { display: flex; align-items: center; gap: 14px; }
.article__date { color: var(--steel); font-family: var(--inter); font-size: .84rem; letter-spacing: .06em; }
.article__title { margin-top: 16px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.5rem, 3.1vw, 2.05rem); font-weight: 600; letter-spacing: .03em; line-height: 1.55; }
.article__lead { margin-top: 18px; color: var(--ink); font-size: 1rem; line-height: 2; }
.article__body { margin-top: 40px; }
.article__body h2 { margin-top: 44px; padding-left: 14px; border-left: 2px solid var(--bluegray); color: var(--ink); font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: .03em; line-height: 1.7; }
.article__body h2:first-child { margin-top: 0; }
.article__body p { margin-top: 16px; font-size: .98rem; line-height: 2.05; }
.article__choices { margin-top: 22px; display: grid; gap: 1px; border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); background: color-mix(in srgb, var(--steel) 42%, transparent); }
.article__choices > div { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 18px 20px; background: var(--white); }
.article__choices dt { color: var(--ink); font-family: var(--inter); font-size: .92rem; font-weight: 600; letter-spacing: .1em; }
.article__choices dd { font-size: .95rem; line-height: 1.9; }
.article__faq { margin-top: 24px; }
.article__credit { margin-top: 40px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); color: var(--steel); font-size: .88rem; letter-spacing: .04em; }
.article__cta { margin-top: 48px; padding: 30px 32px; background: var(--white); border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.article__cta > p { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em; }
.article__cta .site-button { margin-top: 16px; margin-right: 10px; }
.article__cta .site-inline-link { margin-top: 16px; }
.article__back { margin-top: 34px; }

@media (max-width: 679px) {
  .article { padding: 36px 0 56px; }
  .article__body h2 { margin-top: 34px; font-size: 1.08rem; }
  .article__choices > div { grid-template-columns: 1fr; gap: 6px; }
  .article__cta { padding: 24px 20px; }
  .article__cta .site-button { display: block; margin-right: 0; text-align: center; }
}

/* ---------- 下層ページ共通ヒーロー ---------- */
.page-hero { padding: 62px 0 42px; background: var(--bluegray); color: var(--white); }
.page-hero .site-eyebrow { color: var(--white); }
.page-hero__title { margin-top: 12px; font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; letter-spacing: .06em; }
.page-hero__lead { margin-top: 14px; font-size: .96rem; letter-spacing: .03em; }

/* ---------- About Us ---------- */
.about-narrow { max-width: 800px; }
.about-statement { margin-top: 22px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.75rem); font-weight: 600; letter-spacing: .07em; line-height: 1.85; }
.about-text { margin-top: 18px; font-size: .97rem; line-height: 2.05; }
.about-subhead { margin-top: 44px; padding-left: 14px; border-left: 2px solid var(--bluegray); color: var(--ink); font-family: var(--serif); font-size: 1.14rem; font-weight: 600; letter-spacing: .04em; }
.about-note { margin-top: 32px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); color: var(--steel); font-size: .9rem; line-height: 1.95; }

.history-list { margin-top: 30px; display: grid; gap: 1px; background: color-mix(in srgb, var(--steel) 42%, transparent); border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.history-item { display: grid; grid-template-columns: 118px 1fr; gap: 22px; padding: 26px 24px; background: var(--white); }
.history-item__year { color: var(--bluegray); font-family: var(--inter); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; }
.history-item h3 { color: var(--ink); font-family: var(--serif); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
.history-item p { margin-top: 10px; font-size: .94rem; line-height: 2; }

.profile-table { margin-top: 28px; display: grid; gap: 1px; background: color-mix(in srgb, var(--steel) 42%, transparent); border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.profile-table > div { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 17px 22px; background: var(--white); }
.profile-table dt { color: var(--steel); font-size: .88rem; letter-spacing: .05em; }
.profile-table dd { color: var(--ink); font-size: .95rem; line-height: 1.85; }

.profile-table__note { margin-top: 12px; color: var(--steel); font-size: .8rem; line-height: 1.8; }

.about-salon-list { margin-top: 26px; list-style: none; padding: 0; border-top: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.about-salon-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 17px 2px; border-bottom: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.about-salon-list a { color: var(--ink); font-family: var(--serif); font-size: 1.02rem; letter-spacing: .04em; border-bottom: 1px solid transparent; }
.about-salon-list a:hover { border-bottom-color: var(--bluegray); }
.about-salon-list span { color: var(--steel); font-size: .84rem; }
.about-cta { margin-top: 34px; }

@media (max-width: 679px) {
  .page-hero { padding: 42px 0 32px; }
  .history-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 18px; }
  .profile-table > div { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .about-cta .site-button { display: block; text-align: center; }
}

/* 記事内の注釈・箇条書き */
.article__ref { font-size: .62em; vertical-align: super; color: var(--steel); margin-left: 2px; }
.article__list { margin-top: 16px; padding-left: 1.15em; }
.article__list li { margin-top: 8px; font-size: .97rem; line-height: 2; }
.article__notes { margin-top: 34px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--steel) 42%, transparent); }
.article__notes p { margin-top: 6px; color: var(--steel); font-size: .82rem; line-height: 1.85; }
.article__notes p:first-child { margin-top: 0; }

/* ---------- 店舗ページ共通 ---------- */
.salon-page-hero { padding: 0; }
.salon-page-hero__grid { display: grid; gap: 0; }
.salon-page-hero__content { min-width: 0; padding-block: 42px 30px; }
.salon-page-hero__media { overflow: hidden; margin-bottom: 32px; background: var(--steel); aspect-ratio: 3 / 2; }
.salon-page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.salon-page-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.salon-page-hero__text { display: inline-flex; min-height: 48px; align-items: center; padding-inline: .35rem; border-bottom: 1px solid rgba(255, 255, 255, .72); color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
.salon-page-narrow { max-width: 880px; }

.salon-proof__heading { padding-top: 52px; }
.salon-proof__grid { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.salon-proof__grid .home-proof__item,
.salon-proof__grid .home-proof__item:nth-child(2n),
.salon-proof__grid .home-proof__item:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--steel); }
.salon-proof__grid .home-proof__item:last-child { border-bottom: 0; }
.salon-proof__note { margin-top: 0; padding: 18px 13px 24px; border-top: 1px solid var(--steel); }

.salon-reservation__actions { display: grid; gap: 10px; }
.salon-reservation__actions .site-button { width: 100%; }
.salon-reservation__primary { border-color: var(--white); background: var(--white); color: var(--ink); }
.salon-reservation__primary:hover { border-color: var(--base); background: var(--base); color: var(--ink); }
.salon-reservation__text { display: inline-flex; min-height: 44px; align-items: center; justify-self: start; border-bottom: 1px solid rgba(255, 255, 255, .72); color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .06em; line-height: 1.5; }

@media (min-width: 680px) {
  .salon-page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 48%); gap: clamp(34px, 5vw, 72px); align-items: center; }
  .salon-page-hero__content { padding-block: 58px; }
  .salon-page-hero__media { margin-bottom: 0; }
  .salon-proof__heading { padding-top: 68px; }
  .salon-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
  .salon-proof__grid .home-proof__item,
  .salon-proof__grid .home-proof__item:nth-child(2n),
  .salon-proof__grid .home-proof__item:nth-last-child(-n + 2) { border-right: 1px solid var(--steel); border-bottom: 0; }
  .salon-proof__grid .home-proof__item:last-child { border-right: 0; }
  .salon-proof__note { padding-inline: 19px; }
}

/* 採用ページ 理念ブロックの追加要素 */
.philosophy__label { margin-top: 34px; color: color-mix(in srgb, var(--white) 72%, transparent); font-family: var(--inter); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.philosophy__label:first-of-type { margin-top: 26px; }
.philosophy__statement--sm { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.95; }
.philosophy__signature--dark { color: var(--ink); }
.page-hero__sub { margin-top: 10px; font-size: .86rem; letter-spacing: .02em; color: color-mix(in srgb, var(--white) 82%, transparent); }
.page-hero__sub a { border-bottom: 1px solid currentColor; }
.message .about-text:first-of-type { margin-top: 24px; }
.message .philosophy__signature { margin-top: 30px; text-align: right; }

@media (max-width: 679px) {
  .philosophy__label { margin-top: 26px; }
}

/* ---------- 店舗一覧グループ・店舗フッター（v7追加） ---------- */
.site-section__note {
  margin-top: 14px;
  color: var(--steel);
  font-size: .86rem;
  line-height: 1.8;
}

.salon-group { margin-top: 52px; }

.salon-group + .salon-group { margin-top: 72px; }

.salon-group__title {
  color: var(--steel);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.7;
}

.salon-group .salon-grid { margin-top: 22px; }

.site-footer__list--salon { display: grid; grid-template-columns: minmax(0, 1fr); }

@media (max-width: 679px) {
  .salon-group { margin-top: 42px; }

  .salon-group + .salon-group { margin-top: 56px; }

}

.salon-feature { display: grid; gap: 20px; margin-top: 22px; border-top: 4px double var(--steel); padding-top: 11px; }

.salon-feature__media { margin-top: 0; }

.salon-feature__name { color: var(--ink); font-family: var(--serif); font-size: 1.12rem; letter-spacing: .045em; line-height: 1.55; }

.salon-feature__lead { margin-top: 10px; color: var(--ink); font-size: 1rem; line-height: 1.85; }

.salon-feature .salon-card__phone { margin-top: 12px; }

@media (min-width: 680px) {
  .salon-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }

  .salon-feature__body { padding-top: 3px; }
}

@media (min-width: 1024px) {
  .salon-feature { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; }
}

/*===============================================================================
  v8 SHELL — ヘッダーバー / ドロワー2枚 / パララックス帯 / フッター店舗グリッド
  型の参考＝newton.salon（構造とモーションの型のみ・配色/書体/コピー/画像は当社）
===============================================================================*/

:root {
  --shell: #2C333A;
  --shell-line: rgba(255, 255, 255, .22);

  /* 区分色（2026-08-24）＝「自分はどれか」を色で判別させるためだけの色。
     使ってよいのは①カード上辺の3pxバー ②英字ラベル ③背景8%ティント の3箇所のみ。
     文字色・装飾・見出しへの流用は禁止。グラデーションは使わない。 */
  --cat-student:   #3D8B6A;
  --cat-stylist:   #3E6C9E;
  --cat-assistant: #C2882B;
  --cat-parttime:  #7D6BA0;
  --cat-others:    #7A838A;

  --line-green: #06C755;   /* LINEブランド規定色。ボタン面のみ・装飾流用禁止 */
  --shell-h: 72px;          /* ヘッダーの帯（2026-08-23＝窮屈という指摘で 62→72） */
  --shell-h-min: 64px;      /* スクロール後（56→64） */
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 0;
  height: var(--shell-h);
  border-bottom: 0;
  background: color-mix(in srgb, var(--shell) 94%, transparent);
  backdrop-filter: blur(14px);
  transition: height .3s var(--ease), background .3s var(--ease);
}

body.is-scrolled .site-header { height: var(--shell-h-min); box-shadow: 0 1px 0 var(--shell-line); }

.site-header__inner {
  display: grid;
  min-height: 0;            /* 🔴 旧レイアウトの min-height:68px を打ち消す（帯からはみ出す原因） */
  height: 100%;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  padding-inline: 16px;
  max-width: none;
}

.site-header__brand { justify-self: start; display: block; }

.site-header__brand img {
  display: block;
  width: 130px;
  height: auto;
  filter: brightness(0) invert(1);
}

.shell-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  font-family: var(--inter);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
}

.shell-btn--menu { justify-self: center; }

.shell-btn--reserve {
  justify-self: end;
  border: 1px solid var(--shell-line);
  padding-inline: 20px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.shell-btn--reserve:hover { border-color: var(--white); background: var(--white); color: var(--ink); }

.shell-bars,
.shell-bars::before,
.shell-bars::after {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  content: "";
}

.shell-bars { position: relative; }

.shell-bars::before { position: absolute; top: -5px; }

.shell-bars::after { position: absolute; top: 5px; }

/* 旧ヘッダー要素は使わない */
.site-header__menu, .site-header__toggle, .site-header__nav { display: none !important; }

body { padding-top: var(--shell-h); }

html { scroll-padding-top: 78px; }

/* ---------- ドロワー ---------- */
.drawer {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  overflow-y: auto;
  padding: 76px 20px 48px;
  background: var(--shell);
  opacity: 0;
  visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s var(--ease);
  overscroll-behavior: contain;
}

.drawer[data-open="true"] { opacity: 1; visibility: visible; }

body.drawer-open { overflow: hidden; }

.drawer__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}

.drawer__close::before,
.drawer__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
  content: "";
}

.drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }

.drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer__title {
  color: var(--white);
  font-family: var(--inter);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-align: center;
}

.drawer__lead {
  margin-top: 12px;
  color: color-mix(in srgb, var(--white) 68%, transparent);
  font-size: .84rem;
  letter-spacing: .04em;
  text-align: center;
}

/* MENU */
.drawer--menu { align-content: center; justify-items: center; }

.drawer__nav { display: grid; gap: 26px; text-align: center; }

.drawer__nav a {
  color: var(--white);
  font-family: var(--inter);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .38em;
  line-height: 1;
  text-decoration: none;
  text-indent: .38em;
  transition: opacity .25s var(--ease);
}

.drawer__nav a:hover { opacity: .55; }

.drawer__foot {
  margin-top: 44px;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font-size: .74rem;
  letter-spacing: .08em;
  text-align: center;
}

/* RESERVE */
.drawer--reserve { align-content: start; }

.reserve-grid {
  display: grid;
  width: min(1080px, 100%);
  margin: 34px auto 0;
  gap: 26px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reserve-cell { border-top: 1px solid var(--shell-line); padding-top: 12px; }

.reserve-cell__name {
  color: var(--white);
  font-family: var(--serif);
  font-size: .94rem;
  letter-spacing: .04em;
  line-height: 1.5;
}

.reserve-cell__area {
  margin-top: 4px;
  color: color-mix(in srgb, var(--white) 58%, transparent);
  font-size: .72rem;
  letter-spacing: .06em;
}

.reserve-cell__tel { margin-top: 2px; }

.reserve-cell__tel a {
  color: color-mix(in srgb, var(--white) 78%, transparent);
  font-family: var(--inter);
  font-size: .76rem;
  letter-spacing: .04em;
  text-decoration: none;
}

.reserve-cell__btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 11px;
  border: 1px solid var(--shell-line);
  color: var(--white);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.reserve-cell__btn:hover { border-color: var(--white); background: var(--white); color: var(--ink); }

.reserve-group {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: color-mix(in srgb, var(--white) 50%, transparent);
  font-family: var(--inter);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
}

.reserve-group:first-child { margin-top: 0; }

@media (min-width: 720px) {
  .reserve-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
}

@media (min-width: 1024px) {
  :root { --shell-h: 88px; --shell-h-min: 72px; }
  body { padding-top: var(--shell-h); }
  html { scroll-padding-top: calc(var(--shell-h) + 18px); }
  .site-header__inner { padding-inline: 32px; }
  .site-header__brand img { width: 156px; }
  .shell-btn { min-height: 40px; }
  .reserve-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drawer__nav a { font-size: 1.6rem; gap: 34px; }
  .drawer { padding: 96px 40px 60px; }
}

/* ---------- パララックス帯 ---------- */
.parallax-band {
  position: relative;
  display: grid;
  min-height: min(74vh, 620px);
  align-content: center;
  clip-path: inset(0);
  padding-block: clamp(110px, 17vw, 186px);
  color: var(--white);
  isolation: isolate;
}

.parallax-band__media { position: fixed; z-index: -2; inset: 0; }

.parallax-band__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(1.08); }

.parallax-band__veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(44, 51, 58, .84) 0%, rgba(44, 51, 58, .70) 34%, rgba(44, 51, 58, .34) 68%, rgba(44, 51, 58, .16) 100%),
    linear-gradient(180deg, rgba(44, 51, 58, .06), rgba(44, 51, 58, .18));
}

.parallax-band__content { position: relative; z-index: 1; }

.parallax-band .site-eyebrow { color: color-mix(in srgb, var(--white) 74%, transparent); }

.parallax-band__title {
  margin-top: 14px;
  text-shadow: 0 2px 18px rgba(24, 28, 32, .40);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.55;
}

.parallax-band__lead {
  max-width: 34em;
  text-shadow: 0 1px 14px rgba(24, 28, 32, .45);
  margin-top: 18px;
  color: color-mix(in srgb, var(--white) 84%, transparent);
  font-size: 1rem;
  line-height: 1.95;
}

.parallax-band__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 26px; }

/* ---------- 駅バッジ ---------- */
.salon-card__media { position: relative; }

.salon-card__station {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  color: var(--white);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
}

/* ---------- フッター店舗グリッド ---------- */
.site-footer { background: var(--shell); }

.footer-salons { border-bottom: 1px solid var(--shell-line); padding-bottom: 38px; }

.footer-salons__title {
  color: var(--white);
  font-family: var(--inter);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-align: center;
}

.footer-salons__grid {
  display: grid;
  margin-top: 26px;
  gap: 24px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) { .footer-salons__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; } }

@media (min-width: 1024px) { .footer-salons__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- モーション（依存ゼロ） ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }

.js .reveal.is-in, .reveal.is-in { opacity: 1; transform: none; }

.js .reveal--stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

.js .reveal--stagger.is-in > *, .reveal--stagger.is-in > * { opacity: 1; transform: none; }

.img-wipe { position: relative; }

.img-wipe::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--shell);
  content: "";
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 1s var(--ease);
}

.img-wipe.is-in::after { transform: scaleX(0); }

.rule-draw { position: relative; }

.rule-draw::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transition: width 1s var(--ease);
}

.rule-draw.is-in::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }

  .img-wipe::after { display: none; }

  .rule-draw::after { width: 100%; transition: none; }

  .drawer { transition: none; }

  html { scroll-behavior: auto; }
}

.site-inline-link--light { border-bottom-color: color-mix(in srgb, var(--white) 60%, transparent); color: var(--white); }

.site-inline-link--light::after { background: none; color: var(--white); }

.site-inline-link--light:hover { border-bottom-color: var(--white); color: var(--white); }

/* 追従CTAにボタン（ドロワー起動）を許可する */
.mobile-cta > button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  background: var(--deep);
  color: var(--white);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.45;
  place-items: center;
  text-align: center;
}

.mobile-cta > button + a { border-top: 1px solid var(--steel); background: var(--base); color: var(--ink); }

/* ---------- お客様の声 ---------- */
.voice-grid { display: grid; gap: 18px; margin-top: 34px; }

.voice-card {
  min-width: 0;
  margin: 0;
  border-top: 4px double var(--steel);
  padding-top: 15px;
  background: var(--white);
  padding-inline: 18px;
  padding-bottom: 18px;
}

.voice-card blockquote {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .96rem;
  letter-spacing: .015em;
  line-height: 1.95;
}

.voice-card blockquote::before { content: "「"; }

.voice-card blockquote::after { content: "」"; }

.voice-card figcaption {
  margin-top: 12px;
  color: var(--steel);
  font-family: var(--inter);
  font-size: .74rem;
  letter-spacing: .06em;
}

.voices__link { margin-top: 26px; }

@media (min-width: 720px) { .voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

/* 実績を4指標にしたため、2列→4列で割り切れるように */
.salon-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 900px) { .salon-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 成長ロードマップ（採用） ---------- */
.roadmap { display: grid; margin: 34px 0 0; padding: 0; gap: 0; list-style: none; counter-reset: rm; }

.roadmap__step {
  position: relative;
  min-width: 0;
  padding: 22px 0 22px 34px;
  border-top: 1px solid color-mix(in srgb, var(--steel) 46%, transparent);
  counter-increment: rm;
}

.roadmap__step:last-child { border-bottom: 1px solid color-mix(in srgb, var(--steel) 46%, transparent); }

.roadmap__step::before {
  position: absolute;
  top: 26px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--steel);
  border-radius: 50%;
  color: var(--steel);
  content: counter(rm);
  font-family: var(--inter);
  font-size: .66rem;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}

.roadmap__step::after {
  position: absolute;
  top: 48px;
  bottom: -1px;
  left: 10px;
  width: 1px;
  background: color-mix(in srgb, var(--steel) 40%, transparent);
  content: "";
}

.roadmap__step:last-child::after { display: none; }

.roadmap__period {
  color: var(--steel);
  font-family: var(--inter);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.roadmap__title {
  margin-top: 6px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.5;
}

.roadmap__body { margin-top: 8px; color: var(--ink); font-size: .94rem; line-height: 1.9; }

.roadmap__step--goal::before { border-color: var(--accent); background: var(--accent); color: var(--white); }

.roadmap__step--goal .roadmap__title { color: var(--deep); }

@media (min-width: 900px) {
  .roadmap__step { padding-left: 44px; display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 28px; align-items: baseline; }
  .roadmap__period { padding-top: 4px; }
  .roadmap__title { margin-top: 0; grid-column: 2; }
  .roadmap__body { grid-column: 2; }
  .roadmap__step::before { top: 22px; }
  .roadmap__step::after { top: 44px; }
}

.curriculum-detail { margin-top: 30px; border-top: 1px solid color-mix(in srgb, var(--steel) 46%, transparent); }

.curriculum-detail > summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  color: var(--deep);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  list-style: none;
}

.curriculum-detail > summary::-webkit-details-marker { display: none; }

.curriculum-detail > summary::after { color: var(--steel); content: "＋"; font-family: var(--inter); }

.curriculum-detail[open] > summary::after { content: "−"; }

.curriculum-detail__body { padding-bottom: 22px; }

.curriculum-table { display: grid; margin: 0; gap: 0; }

.curriculum-table > div { display: grid; gap: 4px; padding: 15px 0; border-top: 1px solid color-mix(in srgb, var(--steel) 30%, transparent); }

.curriculum-table dt { color: var(--ink); font-size: .82rem; font-weight: 600; letter-spacing: .04em; line-height: 1.7; }

.curriculum-table dt span { color: var(--steel); font-weight: 500; }

.curriculum-table dd { margin: 0; color: var(--ink); font-size: .86rem; line-height: 1.85; }

@media (min-width: 720px) {
  .curriculum-table > div { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}

/* ---------- トップ：私たちのこと ---------- */
.home-about__inner { display: grid; gap: 34px; }

.home-about__title {
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.55;
}

.home-about__text { max-width: 40em; margin-top: 18px; color: var(--ink); font-size: 1rem; line-height: 1.95; }

.home-about__cols { display: grid; gap: 26px; }

.home-about__col { border-top: 1px solid color-mix(in srgb, var(--steel) 50%, transparent); padding-top: 16px; }

.home-about__col h3 {
  color: var(--deep);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.6;
}

.home-about__col p { margin-top: 9px; color: var(--ink); font-size: .94rem; line-height: 1.95; }

.home-about__links { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }

@media (min-width: 900px) {
  .home-about__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .home-about__inner { gap: 44px; }
}

.salon-proof__note { margin-top: 10px; color: var(--steel); font-size: .78rem; letter-spacing: .03em; line-height: 1.7; }

/* 語源コピー（トップ／私たちについて） */
.home-about__origin {
  margin-top: 16px;
  color: var(--steel);
  font-size: .86rem;
  letter-spacing: .06em;
  line-height: 1.8;
}

.home-about__origin span { color: var(--deep); font-family: var(--display); font-size: 1.16rem; font-style: italic; letter-spacing: .02em; }

.about-origin {
  margin: 40px 0 0;
  border-top: 4px double var(--steel);
  border-bottom: 4px double var(--steel);
  padding: 30px 0;
  text-align: center;
}

.about-origin__word { color: var(--deep); font-family: var(--display); font-size: clamp(2rem, 6vw, 3.1rem); font-style: italic; letter-spacing: .03em; line-height: 1.2; }

.about-origin__mean { margin-top: 10px; color: var(--ink); font-family: var(--serif); font-size: 1.02rem; letter-spacing: .05em; }

.about-origin__text { max-width: 34em; margin: 16px auto 0; color: var(--ink); font-size: .94rem; line-height: 1.95; }

/* ---------- クレド（美容室版・濃色セクション内） ---------- */
.credo-list { display: grid; margin: 26px 0 0; padding: 0; gap: 0; list-style: none; counter-reset: cd; }

.credo-item {
  position: relative;
  padding: 20px 0 20px 40px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  counter-increment: cd;
}

.credo-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }

.credo-item::before {
  position: absolute;
  top: 24px;
  left: 0;
  color: rgba(255, 255, 255, .55);
  content: "0" counter(cd);
  font-family: var(--inter);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.credo-item h3 {
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.6;
}

.credo-item p { margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: .92rem; line-height: 1.9; }

@media (min-width: 900px) {
  .credo-item { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 30px; align-items: baseline; }
  .credo-item p { margin-top: 0; }
}

.curriculum-lead {
  margin-top: 30px;
  color: var(--deep);
  font-family: var(--serif);
  font-size: clamp(1.14rem, 3.4vw, 1.44rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.7;
}

.curriculum-lead + .curriculum-intro { margin-top: 12px; }

/* ---------- 店舗ページ：強み（口コミ由来・画像つき） ---------- */
.store-strength { padding-block: clamp(52px, 8vw, 84px); }

.store-strength:nth-of-type(even) { background: var(--white); }

.store-strength__grid { display: grid; gap: 30px; }

.store-strength__label {
  color: var(--steel);
  font-family: var(--inter);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
}

.store-strength__title {
  margin-top: 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.36rem, 4.2vw, 2rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.55;
}

.store-strength__lead { margin-top: 16px; color: var(--ink); font-size: 1rem; line-height: 1.95; }

.store-strength__quotes { display: grid; gap: 14px; margin-top: 24px; }

.store-strength__quotes .voice-card { border-top-width: 1px; border-top-style: solid; border-top-color: var(--steel); }

.store-strength__media { display: grid; gap: 12px; align-content: start; }

.store-strength__media img { display: block; width: 100%; height: auto; filter: saturate(.94); }

.store-strength__note {
  color: var(--steel);
  font-family: var(--inter);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.8;
}

@media (min-width: 900px) {
  .store-strength__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 54px; align-items: start; }
  .store-strength--reverse .store-strength__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .store-strength--reverse .store-strength__body { order: 2; }
  .store-strength__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- 店舗ページ：メニュー ---------- */
.store-menu { display: grid; margin-top: 30px; gap: 0; }

.store-menu > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--steel) 34%, transparent);
}

.store-menu > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--steel) 34%, transparent); }

.store-menu dt { color: var(--ink); font-size: .96rem; line-height: 1.7; }

.store-menu dt span { display: block; color: var(--steel); font-size: .78rem; }

.store-menu dd { margin: 0; color: var(--ink); font-family: var(--inter); font-size: 1.02rem; font-weight: 500; letter-spacing: .02em; }

/* ---------- 採用：募集要項の補足・未確定欄 ---------- */
.req-note { display: inline-block; color: var(--steel); font-size: .82rem; line-height: 1.75; }

.req-tbd {
  display: inline-block;
  min-width: 96px;
  border-bottom: 1px solid color-mix(in srgb, var(--steel) 60%, transparent);
  color: transparent;
}

.career-card__note { margin-top: 8px; color: var(--steel); font-size: .84rem; line-height: 1.8; }

.requirements-list dd strong { font-weight: 600; }

/* 募集要項＝内容が長いのでアコーディオンは全幅1カラム、中の項目だけ2カラムにする */
@media (min-width: 900px) {
  .requirements-list { padding: 0 26px 6px; }
  .requirements-list > div { grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 15px 0; }
  .requirements-card > summary { padding: 22px 26px 19px; }
}

/* ---------- 採用：できることが、増えていく ---------- */
.grow-grid { display: grid; gap: 26px; margin-top: 38px; }

.grow-card { min-width: 0; }

.grow-card__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--steel) 30%, transparent);
  background: color-mix(in srgb, var(--steel) 9%, transparent);
}

.grow-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); }

.grow-card__tbd {
  padding: 0 18px;
  color: var(--steel);
  font-family: var(--inter);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.9;
  text-align: center;
}

.grow-card__tbd::before { display: block; margin-bottom: 6px; font-size: 1.1rem; content: "◦"; }

.grow-card__title {
  margin-top: 16px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.grow-card__sub { margin-top: 5px; color: var(--steel); font-size: .8rem; letter-spacing: .04em; }

.grow-card__body { margin-top: 11px; color: var(--ink); font-size: .95rem; line-height: 1.9; }

.grow-note {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--steel) 30%, transparent);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.95;
}

@media (min-width: 700px) { .grow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; } }
@media (min-width: 1000px) { .grow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; } }

/* 3カラムで最終行が1枚だけになったときは中央に置く */
@media (min-width: 1000px) {
  .grow-grid > .grow-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ---------- 店舗ページ：スタイリスト ---------- */
.stylist-grid { display: grid; margin-top: 34px; gap: 26px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stylist-card { min-width: 0; }

.stylist-card__media {
  display: grid;
  overflow: hidden;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--steel) 12%, transparent);
}

.stylist-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.stylist-card__name { margin-top: 13px; color: var(--ink); font-family: var(--serif); font-size: 1.02rem; font-weight: 600; letter-spacing: .05em; }

.stylist-card__yomi { margin-top: 3px; color: var(--steel); font-family: var(--inter); font-size: .68rem; letter-spacing: .1em; }

.stylist-card__role { margin-top: 8px; color: var(--deep); font-size: .8rem; line-height: 1.65; }

.stylist-card__good { margin-top: 7px; color: var(--ink); font-size: .84rem; line-height: 1.8; }

@media (min-width: 700px)  { .stylist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; } }
@media (min-width: 1000px) { .stylist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; } }

/* ==========================================================================
   採用ページ v9 — 求職者が最初に知りたい順（2026-08-24 人事レビュー全面採用）
   ========================================================================== */

/* ---------- 区分ナビ「あてはまるものを選んでください」 ---------- */
.who-grid { display: grid; margin-top: 36px; gap: 14px; }

.who-card {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 24px 22px;
  border: 1px solid color-mix(in srgb, var(--steel) 40%, transparent);
  background: var(--white);
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.who-card:hover { border-color: var(--ink); background: var(--base); transform: translateY(-2px); }

.who-card__en { color: var(--steel); font-family: var(--inter); font-size: .66rem; font-weight: 600; letter-spacing: .2em; }

.who-card__ja { color: var(--ink); font-family: var(--serif); font-size: 1.08rem; font-weight: 600; letter-spacing: .04em; }

.who-card__note { color: var(--steel); font-size: .8rem; line-height: 1.7; }

.who-card--sub { background: transparent; }

@media (min-width: 640px)  { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) {
  .who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .who-card--sub { grid-column: 1 / -1; }
}

/* ---------- サロン見学CTA（上・中の2箇所） ---------- */
.visit-cta {
  background: var(--shell);
  color: var(--white);
}

.visit-cta .site-eyebrow { color: rgba(255, 255, 255, .62); }

.visit-cta .site-heading { color: var(--white); }

.visit-cta .site-button {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.visit-cta .site-button--outline {
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
  color: var(--white);
}

.visit-cta .site-button--outline:hover { border-color: var(--white); background: rgba(255, 255, 255, .1); }

.visit-cta__inner { display: grid; gap: 26px; align-items: center; }

.visit-cta__note { margin-top: 14px; color: rgba(255, 255, 255, .82); font-size: .92rem; line-height: 1.9; }

.visit-cta__actions { display: grid; gap: 12px; align-content: start; }

@media (min-width: 900px) {
  .visit-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .visit-cta__actions { grid-auto-flow: column; gap: 14px; }
}

/* ---------- もっと知りたい方へ（畳んでも中身の存在が見える） ---------- */
.more-list { display: grid; margin-top: 36px; gap: 0; }

.more-block { border-top: 1px solid color-mix(in srgb, var(--steel) 36%, transparent); }

.more-block:last-child { border-bottom: 1px solid color-mix(in srgb, var(--steel) 36%, transparent); }

.more-block > summary {
  display: grid;
  gap: 6px;
  padding: 24px 44px 24px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.more-block > summary::-webkit-details-marker { display: none; }
.more-block > summary::marker { content: ""; }

.more-block > summary::after {
  position: absolute;
  top: 27px;
  right: 6px;
  color: var(--steel);
  font-family: var(--inter);
  font-size: 1.1rem;
  font-weight: 500;
  content: "+";
  transition: transform .25s var(--ease);
}

.more-block[open] > summary::after { content: "−"; }

.more-block__title { color: var(--ink); font-family: var(--serif); font-size: 1.14rem; font-weight: 600; letter-spacing: .05em; }

.more-block__lead { color: var(--steel); font-size: .88rem; line-height: 1.85; }

.more-block__body { padding-bottom: 34px; }

/* 畳まれた中の元セクションは、器の余白を持たない */
.more-block__body > .site-section,
.more-block__body .site-section__heading { padding: 0; }

.more-block__body > * + * { margin-top: 22px; }

/* ---------- 募集要項カード（区分見出しに英字ラベル） ---------- */
.requirements-card__en {
  display: block;
  margin-bottom: 5px;
  color: var(--steel);
  font-family: var(--inter);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.requirements-card__subhead {
  margin-top: 26px;
  padding: 0 26px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.requirements-card__subhead:first-child { margin-top: 4px; }

/* ---------- ヒーロー内の要点3つ（第一画面で給与が見える） ---------- */
.recruit-hero__facts {
  display: grid;
  margin-top: 22px;
  gap: 7px;
  list-style: none;
}

.recruit-hero__facts li {
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  letter-spacing: .03em;
  line-height: 1.6;
}

.recruit-hero__facts strong { color: var(--white); font-weight: 600; }

@media (min-width: 700px) {
  .recruit-hero__facts { grid-auto-flow: column; justify-content: start; gap: 0 26px; }
  .recruit-hero__facts li + li { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .32); }
}

/* ---------- デビューまでの3段階（数字の直後・要約だけ） ---------- */
.debut-steps { display: grid; margin-top: 32px; gap: 0; list-style: none; counter-reset: step; }

.debut-steps li {
  display: grid;
  gap: 5px;
  padding: 20px 0 20px 46px;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--steel) 34%, transparent);
  counter-increment: step;
}

.debut-steps li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--steel) 34%, transparent); }

.debut-steps li::before {
  position: absolute;
  top: 21px;
  left: 0;
  color: var(--steel);
  font-family: var(--inter);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  content: "0" counter(step);
}

.debut-steps__when { color: var(--steel); font-family: var(--inter); font-size: .72rem; font-weight: 600; letter-spacing: .12em; }

.debut-steps__what { color: var(--ink); font-size: .96rem; line-height: 1.8; }

.debut-steps__note { margin-top: 18px; color: var(--steel); font-size: .82rem; line-height: 1.85; }

@media (min-width: 900px) {
  .debut-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .debut-steps li { padding: 22px 0 0; border-top-width: 2px; border-bottom: 0 !important; }
  .debut-steps li::before { top: -2px; }
  .debut-steps li { padding-top: 26px; }
}

/* ---------- 募集要項カード末尾の見学導線 ---------- */
.requirements-card__cta {
  margin-top: 30px;
  padding: 24px 26px 8px;
  border-top: 1px solid color-mix(in srgb, var(--steel) 34%, transparent);
}

.requirements-card__cta p { color: var(--ink); font-size: .9rem; line-height: 1.8; }

.requirements-card__cta-actions { display: grid; gap: 10px; margin-top: 16px; }

@media (min-width: 640px) {
  .requirements-card__cta-actions { grid-auto-flow: column; justify-content: start; gap: 12px; }
}

/* ==========================================================================
   採用ページ 配色（2026-08-24 クロスレビュー：ちえ＋Codex）
   方針＝地は無彩色のまま。色は「区分の判別」と「行動」の2つの意味にだけ使う。
   有彩色は1画面あたり8%以内・グラデーション禁止・全面ベタ塗り禁止。
   ========================================================================== */

/* ---------- 区分カード：上辺バー＋英字ラベル＋8%ティントの3点だけ ---------- */
.who-card { position: relative; border-top-width: 3px; border-top-color: var(--steel); }

.who-card::before { content: none; }

.who-card--student   { border-top-color: var(--cat-student);   background: color-mix(in srgb, var(--cat-student) 8%, var(--white)); }
.who-card--stylist   { border-top-color: var(--cat-stylist);   background: color-mix(in srgb, var(--cat-stylist) 8%, var(--white)); }
.who-card--assistant { border-top-color: var(--cat-assistant); background: color-mix(in srgb, var(--cat-assistant) 8%, var(--white)); }
.who-card--parttime  { border-top-color: var(--cat-parttime);  background: color-mix(in srgb, var(--cat-parttime) 8%, var(--white)); }
.who-card--others    { border-top-color: var(--cat-others);    background: color-mix(in srgb, var(--cat-others) 7%, var(--white)); }

.who-card--student   .who-card__en { color: var(--cat-student); }
.who-card--stylist   .who-card__en { color: var(--cat-stylist); }
.who-card--assistant .who-card__en { color: var(--cat-assistant); }
.who-card--parttime  .who-card__en { color: var(--cat-parttime); }
.who-card--others    .who-card__en { color: var(--cat-others); }

.who-card--student:hover   { border-color: var(--cat-student); }
.who-card--stylist:hover   { border-color: var(--cat-stylist); }
.who-card--assistant:hover { border-color: var(--cat-assistant); }
.who-card--parttime:hover  { border-color: var(--cat-parttime); }

.who-card:hover { transform: translateY(-2px); }

/* ---------- 募集要項カード：選んだ色の場所に着地する ---------- */
#req-shinsotsu { border-top: 3px solid var(--cat-student); }
#req-stylist   { border-top: 3px solid var(--cat-stylist); }
#req-assistant { border-top: 3px solid var(--cat-assistant); }
#req-parttime  { border-top: 3px solid var(--cat-parttime); }
#req-others    { border-top: 3px solid var(--cat-others); }

#req-shinsotsu .requirements-card__en { color: var(--cat-student); }
#req-stylist   .requirements-card__en { color: var(--cat-stylist); }
#req-assistant .requirements-card__en { color: var(--cat-assistant); }
#req-parttime  .requirements-card__en { color: var(--cat-parttime); }
#req-others    .requirements-card__en { color: var(--cat-others); }

/* ---------- 行動色＝赤は「押す場所」だけ。装飾・見出しには使わない ---------- */
.site-button--act {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--white);
}

.site-button--act:hover {
  border-color: color-mix(in srgb, var(--accent) 82%, #000);
  background: color-mix(in srgb, var(--accent) 82%, #000);
  color: var(--white);
}

/* 濃色帯の中でも赤を主ボタンにする（帯は無彩色のまま維持） */
.visit-cta .site-button--act { border-color: var(--accent); background: var(--accent); color: var(--white); }

/* ---------- LINE導線＝ブランド緑。ボタン面のみ ---------- */
.site-button--line {
  border: 1px solid var(--line-green);
  background: var(--line-green);
  color: var(--white);
}

.site-button--line:hover {
  border-color: color-mix(in srgb, var(--line-green) 84%, #000);
  background: color-mix(in srgb, var(--line-green) 84%, #000);
  color: var(--white);
}

.visit-cta .site-button--line { border-color: var(--line-green); background: var(--line-green); color: var(--white); }

/* ---------- LINE QR（PCのみ表示。SPは読めないのでボタンに出し分け） ---------- */
.line-qr { display: none; }

.line-qr__img { display: block; width: 132px; height: 132px; background: var(--white); }

.line-qr__note { margin-top: 9px; color: var(--steel); font-size: .72rem; line-height: 1.7; }

@media (min-width: 900px) {
  .line-qr { display: grid; justify-items: center; padding: 16px; background: var(--white); }
  .line-qr + .site-button--line { display: none; }
}

/* 見学CTA：ボタンとQRを同じ行に並べたときの高さ・並びを整える */
@media (min-width: 900px) {
  .visit-cta__actions { align-items: start; grid-auto-flow: column; }
  .visit-cta__actions > .site-button { align-self: start; min-height: 48px; white-space: nowrap; }
  .line-qr { padding: 12px 12px 10px; }
  .line-qr__img { width: 108px; height: 108px; }
  .line-qr__note { color: var(--deep); font-size: .66rem; }
}

/* 募集要項の開閉ボタンを、どの幅でもはっきり見せる（2026-08-24 社長指摘＝ボタンが無くて開けない） */
.requirements-card > summary {
  padding-right: 58px;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}

.requirements-card > summary::after {
  display: grid !important;
  position: absolute;
  top: 50%;
  right: 18px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  align-content: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--steel) 56%, transparent);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  content: "＋";
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.requirements-card[open] > summary::after { content: "−"; }

.requirements-card > summary:hover::after { border-color: var(--ink); background: var(--white); }

/* 見出しの右に「詳しい条件を見る」を添えて、開けることを言葉でも示す */
.requirements-card > summary .requirements-card__open {
  display: block;
  margin-top: 6px;
  color: var(--steel);
  font-family: var(--inter);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.requirements-card[open] > summary .requirements-card__open::after { content: " CLOSE"; }

/* アイラッシュのヒーロー内の要点（写真の上ではなく明るい面に置くので文字色を反転させない） */
.eyelash-facts li { color: var(--ink); }
.eyelash-facts strong { color: var(--ink); }

@media (min-width: 700px) {
  .eyelash-facts li + li { border-left-color: color-mix(in srgb, var(--steel) 46%, transparent); }
}

/* ── 募集職種ナビ（長さんFB 2026-08-25）───────────────────────────
   「給与・休日・福利厚生」より先に、自分がどれに当てはまるかを選ばせる。
   ヒーロー直後(top)と募集要項の中(inline)の2か所に同じものを出す。 */
.site-section--tight { padding-block: clamp(28px, 4vw, 44px); }

.jobnav__lead {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--deep);
}
.jobnav--inline { margin-bottom: 28px; }

.jobnav__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.jobnav__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(52, 59, 65, .16);
  border-radius: 4px;
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease);
}
/* 3pxの上罫で「押せる帯」だと分かるようにする（グラデーションは使わない） */
.jobnav__item { border-top: 3px solid var(--accent); }

.jobnav__item:hover,
.jobnav__item:focus-visible {
  border-color: rgba(52, 59, 65, .34);
  box-shadow: 0 6px 18px rgba(52, 59, 65, .1);
  transform: translateY(-2px);
}

.jobnav__en {
  font-family: var(--inter);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent);
}
.jobnav__ja {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  /* 「働きた／い方」のような文節途中での改行を避ける */
  word-break: auto-phrase;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .jobnav__items { grid-template-columns: repeat(2, 1fr); }
  .jobnav__item { padding: 12px 13px; }
  .jobnav__ja { font-size: 13px; }
}

/* ── 採用の問い合わせフォーム（Contact Form 7）2026-08-25 ──────────
   設問を「見出し＋回答」の塊として読ませる。必須/任意はラベル横に小さく置く。 */
.form-lead {
  margin: 0 0 28px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.9;
  color: var(--deep);
}

.form-q {
  display: block;
  margin: 26px 0 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.form-q:first-of-type { margin-top: 0; }

.form-req,
.form-any {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.form-req { background: var(--accent); color: var(--white); }
.form-any { background: rgba(52, 59, 65, .08); color: var(--deep); }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(52, 59, 65, .22);
  border-radius: 3px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 15px;   /* 16px未満だとiOSで拡大されるため下げすぎない */
  color: var(--ink);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus { border-color: var(--ink); outline: 2px solid rgba(52,59,65,.18); outline-offset: 1px; }
.wpcf7 ::placeholder { color: rgba(52, 59, 65, .38); }

/* ラジオ・チェックボックスは1行1件で押しやすくする */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox { display: grid; gap: 6px; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 12px;
  border: 1px solid rgba(52, 59, 65, .16);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.wpcf7 .wpcf7-list-item label:hover { border-color: rgba(52, 59, 65, .38); background: rgba(52, 59, 65, .03); }
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] { accent-color: var(--accent); flex: none; }

/* 同意欄は送信ボタンと一体で見せる */
.wpcf7 .wpcf7-acceptance { display: block; margin: 30px 0 18px; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label {
  border: 0;
  padding: 0;
  font-size: 13px;
  color: var(--deep);
}
.wpcf7 .wpcf7-acceptance a { color: var(--ink); }

.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .2s var(--ease);
}
.wpcf7 input[type="submit"]:hover { opacity: .88; }

@media (min-width: 700px) {
  .wpcf7 .wpcf7-radio,
  .wpcf7 .wpcf7-checkbox { grid-template-columns: repeat(2, 1fr); }
  .wpcf7 .wpcf7-acceptance .wpcf7-list-item label { grid-column: 1 / -1; }
  .wpcf7 input[type="submit"] { width: auto; min-width: 260px; }
}

/* ── 固定ページ本文（お問い合わせ・プライバシーポリシー等）2026-08-25 ────
   .article はニュース記事用の定義で、固定ページには余白すら当たっていなかった。
   サイト共通の語り口（セリフ見出し＋左罫、ゆったりした行間）に揃える。 */
.page-body,
.post-single__body { max-width: 760px; }

.page-body > *:first-child,
.post-single__body > *:first-child { margin-top: 0; }

.page-body h2,
.post-single__body h2 {
  margin: 56px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.2vw, 1.28rem);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.7;
}

.page-body p,
.post-single__body p {
  margin-top: 16px;
  font-size: .98rem;
  line-height: 2.05;
  color: var(--ink);
}
.page-body h2 + p,
.post-single__body h2 + p { margin-top: 18px; }

.page-body ul,
.page-body ol,
.post-single__body ul,
.post-single__body ol { margin-top: 16px; padding-left: 1.4em; }
.page-body li,
.post-single__body li { margin-top: 8px; font-size: .96rem; line-height: 1.95; }

.page-body a,
.post-single__body a { color: var(--ink); border-bottom: 1px solid rgba(52, 59, 65, .3); }
.page-body a:hover { border-bottom-color: var(--ink); }
.page-body .site-button { border-bottom: 0; }

/* 問い合わせフォーム本体は見出しから少し離す */
.page-body .wpcf7 { margin-top: 28px; }

/* ── LINE相談カード ─────────────────────────────────
   PCではQRを、スマホではボタンを出す（SPではQRを撮れないため）。 */
.line-card {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(52, 59, 65, .16);
  border-top: 3px solid #06C755;
  border-radius: 4px;
  background: var(--white);
}
.line-card__text { margin: 0; font-size: .95rem; line-height: 1.95; color: var(--ink); }
.line-card__text strong { font-weight: 600; }
.line-card .line-qr { padding: 0; }
.line-card .site-button--line { justify-self: start; border-bottom: 0; }

/* スマホ＝ボタン（QRは自分では撮れない）／PC＝QR。カード内は隣接しないので個別に指定する。 */
.line-card .line-qr { display: none; }
.line-card .site-button--line { display: inline-flex; }
.line-card__note { margin: 0; text-align: center; }

@media (min-width: 700px) {
  .line-card { grid-template-columns: 1fr auto; align-items: center; gap: 26px; }
  .line-card .line-qr { display: grid; justify-items: center; }
  /* 🔴 WordPressがリンクを<p>で包むため、ボタンだけ消すと空の段落が
     グリッドの行として残る。包んでいる段落ごと消す。 */
  .line-card > p:has(.site-button--line) { display: none; }
  .line-card .site-button--line { display: none; }
}

/* CF7の自動整形を止めたので、入力欄の位置は自前で決める（2026-08-25） */
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox { margin-top: 2px; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; color: var(--accent); }
.wpcf7 .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(52, 59, 65, .22);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.8;
}

/* ── 店舗ページ：口コミの評価（2026-08-26 並び順の復元にあわせて追加）───── */
.review-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid rgba(52, 59, 65, .14);
  background: rgba(52, 59, 65, .14);
}
.review-score {
  display: grid;
  gap: 6px;
  padding: 20px 16px;
  background: var(--white);
  text-align: center;
}
.review-score__label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--deep);
}
.review-score__value {
  margin: 0;
  font-family: var(--inter);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.review-score:first-child .review-score__value { color: var(--accent); }
.voices__link { margin-top: 18px; }

/* ── スタイリスト個別ページ（2026-08-26 社長レビュー反映）──────────────
   ①「在籍店舗」が大きな見出しだけで中身が薄かった → ヒーロー内に要点を出す
   ② 顔が切れていた → 横長枠に縦長ポートレートを cover で入れていたため。
      人物用の縦横比にし、切る場合も頭側を残す。 */
.staff-single__photo {
  aspect-ratio: 3 / 4;          /* 人物は縦。横長枠に押し込むと頭が切れる */
  max-height: 520px;
  margin-inline: auto;
}
.staff-single__photo img {
  object-position: center 22%;  /* やむを得ず切るときは顔側を残す */
}

.staff-single__salon {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 2px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
}
.staff-single__salon > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: baseline;
}
.staff-single__salon dt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
}
.staff-single__salon dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.75;
  color: var(--white);
}
.staff-single__salon dd a { color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .5); }

@media (max-width: 620px) {
  .staff-single__salon > div { grid-template-columns: 66px 1fr; gap: 10px; }
  .staff-single__photo { max-height: 420px; }
}

/* スタイリストのひとこと。見出しも枠も無いまま広い余白に置かれていたので、
   引用として見せて前後の余白を締める（2026-08-26）。 */
.staff-single__body {
  max-width: 620px;
  margin-inline: auto;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  line-height: 1.95;
  color: var(--ink);
}
.staff-single__body p { margin: 0; }
.staff-single__body p + p { margin-top: 14px; }

/* ── サロンブログの記事本文（2026-08-26）──────────────────────
   ホットペッパーの記事を材料に、書き手の文体で書き直した記事。
   読み物として読ませるので、行間を広くとって見出しで区切る。 */
.article-lead {
  margin: 0 0 34px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 2;
  color: var(--ink);
}

.page-body .article-qa,
.article-qa {
  display: grid;
  gap: 1px;
  margin: 22px 0 0;
  border: 1px solid rgba(52, 59, 65, .14);
  background: rgba(52, 59, 65, .14);
}
.article-qa dt {
  padding: 16px 20px 8px;
  background: var(--white);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.article-qa dt::before {
  content: "Q.";
  margin-right: 8px;
  font-family: var(--inter);
  color: var(--accent);
}
.article-qa dd {
  margin: 0;
  padding: 0 20px 18px;
  background: var(--white);
  font-size: .94rem;
  line-height: 1.95;
  color: var(--deep);
}

.article-note {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(52, 59, 65, .14);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--deep);
}

.article-source {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--deep);
}
.article-source a { color: var(--deep); }

/* 記事冒頭の写真（ホットペッパー掲載画像を出典つきで使う） */
.article-hero {
  margin: 0 0 30px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(52, 59, 65, .06);
}
.article-hero img { display: block; width: 100%; height: auto; }

/* ── ボタンのテキスト型（電話など、主役ではないが押せるもの）2026-08-26 ──
   ボタン2つと並ぶ場所で下線だけのテキストリンクを使うと、高さも余白も揃わず崩れて見える。
   枠線は出さないが、寸法はボタンと同じにする。 */
.site-button--text {
  border-color: transparent;
  background: transparent;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .5);
}
.site-button--text:hover {
  background: transparent;
  color: var(--white);
  text-decoration-color: var(--white);
}

/* 予約セクション。🔴 .recruit-banner__inner は採用バナー用の2カラム配置なので
   使い回さない（見出しが右端へ飛ぶ）。余白はここで自前に持つ。 */
.salon-reservation > .site-shell { padding-block: 62px; }

/* 予約セクション：ボタンを横並びにし、下端の余白を確保する */
.salon-reservation .salon-reservation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.salon-reservation .salon-reservation__actions .site-button { width: auto; }
.salon-reservation .site-button--act { border-color: var(--white); background: var(--white); color: var(--ink); }
.salon-reservation .site-button--act:hover { background: var(--base); border-color: var(--base); color: var(--ink); }

@media (max-width: 560px) {
  .salon-reservation .salon-reservation__actions { display: grid; }
  .salon-reservation .salon-reservation__actions .site-button { width: 100%; }
}

/* ── 創業者の注記（2026-08-26）──────────────────────────────
   歴史として置く。大きく扱うと今の会社の話が霞むので、沿革の締めに添える程度に留める。 */
.history-note {
  max-width: 620px;
  margin: 36px 0 0;
  padding: 22px 24px;
  border-left: 2px solid rgba(52, 59, 65, .22);
  background: var(--white);
}
.history-note__label {
  margin: 0 0 10px;
  font-family: var(--inter);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--deep);
}
.history-note p + p { margin-top: 12px; }
.history-note p:not(.history-note__label) {
  margin: 0;
  font-size: .92rem;
  line-height: 1.95;
  color: var(--ink);
}

/* ── ヒーローの二重線と中身の余白（2026-08-26 社長指摘：スマホで窮屈）────────
   枠は画面端から clamp(14px,2.5vw,34px)、中身は .site-shell（端から20px）にいたため、
   スマホでは枠と文字の間が6pxしかなく、文字が枠にぶつかって見えていた。
   枠の位置を基準に、その内側へ十分な余白を確保する。 */
.home-hero,
.recruit-hero {
  --hero-frame: clamp(14px, 2.5vw, 34px);   /* 枠の位置（::before と揃える） */
  --hero-inset: clamp(22px, 5vw, 40px);     /* 枠の内側にとる余白 */
}
.home-hero::before,
.recruit-hero::before { inset: var(--hero-frame); }
.home-hero::after,
.recruit-hero::after { inset: calc(var(--hero-frame) + 4px); }

.home-hero__content > .site-shell,
.recruit-hero__content > .site-shell,
.home-hero__content.site-shell,
.recruit-hero__content.site-shell {
  width: min(100% - (var(--hero-frame) + var(--hero-inset)) * 2, 1200px);
}

@media (max-width: 560px) {
  /* 縦も詰まって見えるので、枠の内側に上下の呼吸を入れる */
  .home-hero__content { padding-block: clamp(74px, 16vw, 104px); }
  .recruit-hero__content { padding-block: clamp(104px, 24vw, 150px) clamp(64px, 12vw, 92px); }
}