@charset "UTF-8";
/* ==========================================================================
   home.css — トップページ固有
   FV / コンセプト / はじめての方へ / サービス・料金 / メッセージ / 流れ / FAQ / サロン情報 / お問い合わせ
   並び：ベース → 1024px以下 → 768px以下 → 480px以下
   ========================================================================== */

/* ---------- FV ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 0 112px;
}
/* 右上の大きな円（装飾） */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -16vw; right: -14vw; width: min(64vw, 860px); aspect-ratio: 1;
  border-radius: 50%; background: var(--c-accent-pale); opacity: .75;
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: clamp(32px, 6vw, 104px);
  width: min(100% - var(--gutter) * 2, 1240px); margin-inline: auto;
}
.hero__en {
  font-family: var(--font-en); font-style: italic;
  font-size: clamp(1rem, .9rem + .5vw, 1.375rem); letter-spacing: .08em;
  color: var(--c-accent-deep);
}
.hero__title {
  margin-top: 18px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.25rem);
  line-height: 1.34; letter-spacing: .12em;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__line > span { display: inline-block; }
.hero__line:nth-child(2) { padding-left: 1.1em; }
.hero__lead { margin-top: 28px; font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem); color: var(--c-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.hero__visual { position: relative; justify-self: center; width: min(100%, 500px); }
/* 写真の後ろにずらしたアーチの線（装飾） */
.hero__visual::before {
  content: ""; position: absolute; z-index: -1; inset: -20px 20px 20px -20px;
  border: 1px solid var(--c-accent); border-radius: 999px 999px 28px 28px;
}
.hero__photo {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 28px 28px;
  background: var(--c-bg-sub);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__shop {
  position: absolute; top: 14%; right: -48px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif); font-size: .8125rem; letter-spacing: .4em; color: var(--c-muted);
}
.hero__badge {
  position: absolute; left: -60px; bottom: 48px;
  width: clamp(112px, 11vw, 152px); height: auto; aspect-ratio: 1;
  border-radius: 50%; background: var(--c-bg); color: var(--c-text);
  box-shadow: 0 10px 30px rgba(47, 42, 37, .08);
}
.hero__badge text { font-family: var(--font-en); font-size: 15px; letter-spacing: .1em; fill: currentColor; }
.hero__badge circle { fill: var(--c-accent); }
.hero__badge-ring { transform-origin: 100px 100px; animation: spin 26s linear infinite; }

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-en); font-style: italic; font-size: .8125rem; letter-spacing: .14em;
  color: var(--c-muted); text-decoration: none;
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll::after {
  content: ""; width: 1px; height: 72px; background: var(--c-text);
  animation: scroll-line 2.4s var(--ease) infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scroll-line {
  0%     { transform: scaleY(0); transform-origin: top; }
  50%    { transform: scaleY(1); transform-origin: top; }
  50.01% { transform: scaleY(1); transform-origin: bottom; }
  100%   { transform: scaleY(0); transform-origin: bottom; }
}

/* FVの登場アニメーション（home.js が .is-loaded を付与。JS無効時はそのまま表示） */
.js .hero__line > span { transform: translateY(110%); transition: transform 1.3s var(--ease); }
.js .hero__line:nth-child(2) > span { transition-delay: .12s; }
.js .hero__line:nth-child(3) > span { transition-delay: .24s; }
.js .hero__en,
.js .hero__lead,
.js .hero__actions,
.js .hero__shop,
.js .hero__badge,
.js .hero__visual::before {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js .hero__lead { transition-delay: .55s; }
.js .hero__actions { transition-delay: .7s; }
.js .hero__visual::before { transition-delay: .9s; }
.js .hero__shop { transition-delay: 1s; }
.js .hero__badge { transition-delay: 1.1s; }
.js .hero__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease) .1s; }
.js .hero__photo img { transform: scale(1.18); transition: transform 2.6s var(--ease) .1s; }

.js .hero.is-loaded .hero__line > span,
.js .hero.is-loaded .hero__en,
.js .hero.is-loaded .hero__lead,
.js .hero.is-loaded .hero__actions,
.js .hero.is-loaded .hero__shop,
.js .hero.is-loaded .hero__badge,
.js .hero.is-loaded .hero__visual::before { opacity: 1; transform: none; }
.js .hero.is-loaded .hero__photo { clip-path: inset(0); }
.js .hero.is-loaded .hero__photo img { transform: none; }

/* ---------- コンセプト ---------- */
.concept { overflow: hidden; }
.concept__bg { top: clamp(32px, 5vw, 72px); left: -.06em; }
.concept__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: clamp(48px, 9vw, 160px); max-width: 1000px;
}
.concept__head { order: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 28px; }
.concept__title {
  writing-mode: vertical-rl;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 2; letter-spacing: .24em;
}
.concept__body { padding-top: clamp(40px, 7vw, 120px); font-size: 1.0625rem; line-height: 2.3; }
.concept__body p + p { margin-top: 1.6em; }
.concept__sign { font-family: var(--font-serif); text-align: right; color: var(--c-muted); }
.concept__body .concept__sign { margin-top: 2.6em; }

/* ---------- はじめての方へ ---------- */
.point {
  margin-inline: clamp(8px, 1.5vw, 24px);
  border-radius: clamp(32px, 6vw, 88px);
  background: var(--c-bg-sub);
}
.point__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 56px); margin-top: clamp(56px, 7vw, 96px);
}
.point-card:nth-child(3n+2) { margin-top: 80px; }   /* 真ん中を下げてリズムを付ける */
.point-card__img { aspect-ratio: 1; overflow: hidden; border-radius: 999px 999px 20px 20px; }
.point-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.point-card:hover .point-card__img img { transform: scale(1.05); }
.point-card__num {
  position: relative; margin-top: -.55em; padding-left: 16px;
  font-family: var(--font-en); font-style: italic; font-size: clamp(3.5rem, 2.6rem + 2.4vw, 5rem); line-height: 1;
  color: var(--c-accent);
}
.point-card__title {
  margin-top: 14px;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); letter-spacing: .1em;
}
.point-card__text { margin-top: 12px; font-size: .9375rem; color: var(--c-muted); }

/* ---------- サービス・料金 ---------- */
.service { overflow: hidden; }
.service__bg { top: clamp(56px, 7vw, 120px); right: -.06em; }
.service .container { position: relative; z-index: 1; }
.service__list { display: grid; gap: clamp(80px, 10vw, 136px); margin-top: clamp(56px, 7vw, 96px); }
.service-item {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
}
.service-item__img {
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: clamp(96px, 13vw, 200px) var(--radius) var(--radius) var(--radius);
}
.service-item__img img { width: 100%; height: 100%; object-fit: cover; }
.service-item:nth-child(even) .service-item__img {
  order: 2;
  border-radius: var(--radius) clamp(96px, 13vw, 200px) var(--radius) var(--radius);
}
.service-item__en {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-en); font-style: italic; font-size: 1.125rem; letter-spacing: .06em;
  color: var(--c-accent-deep);
}
.service-item__en span { font-size: 3rem; line-height: 1; color: var(--c-accent); }
.service-item__title {
  margin-top: 12px;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); letter-spacing: .12em;
}
.service-item__title + p { margin-top: 20px; color: var(--c-muted); }
.price-list { margin-top: 28px; border-top: 1px solid var(--c-text); }
.price-list__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 2px; border-bottom: 1px solid var(--c-line);
}
.price-list dt { font-size: .9375rem; }
.price-list dd { font-family: var(--font-en); font-size: 1.3125rem; letter-spacing: .06em; white-space: nowrap; }
.service__note { margin-top: clamp(56px, 7vw, 88px); font-size: .8125rem; text-align: center; color: var(--c-muted); }

/* ---------- メッセージ ---------- */
.message { overflow: hidden; padding-block: clamp(72px, 9vw, 128px); background: var(--c-accent-pale); }
.marquee { display: flex; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__group span {
  display: inline-flex; align-items: center; gap: .45em; padding-right: .45em;
  font-family: var(--font-en); font-style: italic; font-size: clamp(4rem, 10vw, 9rem); line-height: 1.15;
  color: transparent; -webkit-text-stroke: 1px var(--c-accent);
}
.marquee__group span::after {
  content: ""; width: .1em; height: .1em; border-radius: 50%; background: var(--c-accent);
}
@keyframes marquee { to { transform: translateX(-50%); } }
.message__inner { margin-top: clamp(40px, 5vw, 64px); }
.message__text {
  text-align: center;
  font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  line-height: 2.1; letter-spacing: .16em;
}

/* ---------- ご利用の流れ ---------- */
.flow__list {
  position: relative; counter-reset: flow;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(56px, 7vw, 88px);
}
/* ステップをつなぐ点線 */
.flow__list::before {
  content: ""; position: absolute; top: 44px; left: 12.5%; right: 12.5%;
  border-top: 1px dashed var(--c-accent);
}
.flow-step { position: relative; counter-increment: flow; text-align: center; }
.flow-step::before {
  content: counter(flow, decimal-leading-zero);
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto;
  border: 1px solid var(--c-accent); border-radius: 50%; background: var(--c-bg);
  font-family: var(--font-en); font-style: italic; font-size: 1.75rem; color: var(--c-accent-deep);
}
.flow-step__title {
  margin-top: 24px;
  font-family: var(--font-serif); font-weight: 500; font-size: 1.1875rem; letter-spacing: .12em;
}
.flow-step p { margin-top: 10px; font-size: .875rem; color: var(--c-muted); }

/* ---------- よくある質問 ---------- */
.faq {
  margin-inline: clamp(8px, 1.5vw, 24px);
  border-radius: clamp(32px, 6vw, 88px);
  background: var(--c-bg-sub);
}
.faq__inner {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  align-items: start; gap: clamp(40px, 6vw, 104px);
}
.faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__list { border-top: 1px solid var(--c-text); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  position: relative; display: flex; align-items: baseline; gap: 18px;
  padding: 26px 60px 26px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 500; letter-spacing: .08em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q"; flex-shrink: 0;
  font-family: var(--font-en); font-style: italic; font-size: 1.625rem; line-height: 1; color: var(--c-accent-deep);
}
/* ＋アイコン（開くと×に回転） */
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 34px; height: 34px; margin-top: -17px;
  border: 1px solid var(--c-line); border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  transition: transform .45s var(--ease), background-color .3s, color .3s;
}
.faq-item[open] summary::after { transform: rotate(135deg); background-color: var(--c-accent-deep); color: #fff; border-color: var(--c-accent-deep); }
.faq-item summary:hover { color: var(--c-accent-deep); }
.faq-item__answer { display: flex; gap: 18px; padding: 0 60px 28px 4px; color: var(--c-muted); }
.faq-item__answer::before {
  content: "A"; flex-shrink: 0;
  font-family: var(--font-en); font-style: italic; font-size: 1.625rem; line-height: 1.2; color: var(--c-sage);
}
/* 開閉のなめらかな動き（対応ブラウザーのみ。非対応ではそのまま開閉） */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .5s var(--ease), content-visibility .5s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

/* ---------- サロン情報 ---------- */
.about__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px);
}
.info-list { border-top: 1px solid var(--c-text); }
.info-list__row {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--c-line);
}
.info-list dt { font-weight: 500; letter-spacing: .1em; }
.info-list dd a { text-decoration: none; }
.about__map { min-height: 380px; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-sub); }
.about__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.35) sepia(.12); }

/* ---------- ご予約・お問い合わせ ---------- */
.contact { padding: 0 clamp(8px, 1.5vw, 24px) clamp(8px, 1.5vw, 24px); }
.contact__box {
  position: relative; overflow: hidden;
  padding: clamp(72px, 9vw, 128px) var(--gutter);
  border-radius: clamp(32px, 6vw, 88px);
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 145, 112, .55), transparent 55%),
    var(--c-accent-deep);
  color: #fff;
}
.contact__bg { right: -.04em; bottom: -.2em; color: rgba(255, 255, 255, .1); }
.contact__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center;
  gap: clamp(40px, 6vw, 96px); max-width: var(--container); margin-inline: auto;
}
.contact .sec-label { color: #fff; }
.contact__head .sec-title + p { margin-top: 20px; }
.contact__actions { display: grid; gap: 14px; }
.contact__tel {
  display: grid; gap: 2px; padding: 22px 28px;
  border-radius: 24px; background: var(--c-surface); color: var(--c-text);
  text-align: center; text-decoration: none;
  transition: transform .45s var(--ease), box-shadow .45s;
}
.contact__tel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.contact__tel-label { font-size: .8125rem; color: var(--c-muted); }
.contact__tel-num {
  font-family: var(--font-en); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1.3; letter-spacing: .06em; color: var(--c-accent-deep);
}
.contact__tel-note { font-size: .75rem; color: var(--c-muted); }
.contact__line {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px;
  border-radius: 999px; background: var(--c-dark); color: #fff;
  font-weight: 500; letter-spacing: .1em; text-decoration: none;
  transition: background-color .3s;
}
.contact__line:hover { background: #000; }
.contact__line svg { width: 24px; height: 24px; color: #06c755; }
.contact .sns-list { justify-content: center; margin-top: 6px; }
.contact .sns-list a { color: #fff; border-color: rgba(255, 255, 255, .5); }
.contact .sns-list a:hover { background: #fff; border-color: #fff; color: var(--c-accent-deep); }

/* ==========================================================================
   1024px以下
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__shop { right: -36px; }
  .hero__badge { left: -32px; }
  .flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .flow__list::before { display: none; }
  .contact__inner { grid-template-columns: 1fr; }
  .contact__head { text-align: center; }
  .contact__actions { width: min(100%, 440px); margin-inline: auto; }
}

/* ==========================================================================
   768px以下
   ========================================================================== */
@media (max-width: 768px) {
  .hero { min-height: auto; padding: calc(var(--header-h) + 16px) 0 104px; }
  .hero::before { top: -30vw; right: -40vw; width: 110vw; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { order: -1; justify-self: end; width: 80%; margin-right: 4px; }
  .hero__visual::before { inset: -12px 12px 12px -12px; }
  .hero__shop { right: auto; left: -46px; top: 10%; }
  .hero__badge { left: -24px; bottom: -28px; width: 96px; }
  .hero__line:nth-child(2) { padding-left: .8em; }
  .hero__lead br { display: none; }
  .hero__scroll { left: auto; right: var(--gutter); }

  .concept__inner { grid-template-columns: 1fr; gap: 32px; }
  .concept__head { order: 0; align-items: flex-start; gap: 14px; }
  .concept__title { writing-mode: horizontal-tb; line-height: 1.7; letter-spacing: .14em; }
  .concept__body { padding-top: 0; font-size: 1rem; line-height: 2.1; }

  .point__list { grid-template-columns: 1fr; gap: 56px; }
  .point-card:nth-child(3n+2) { margin-top: 0; }
  .point-card__img { width: min(100%, 420px); }

  .service-item { grid-template-columns: 1fr; gap: 28px; }
  .service-item:nth-child(even) .service-item__img { order: 0; }

  .flow__list { grid-template-columns: 1fr; row-gap: 28px; }
  .flow__list::before { display: block; top: 40px; bottom: 40px; left: 39px; right: auto; border-top: 0; border-left: 1px dashed var(--c-accent); }
  .flow-step { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; text-align: left; }
  .flow-step::before { grid-row: 1 / span 2; width: 80px; height: 80px; margin: 0; font-size: 1.5rem; }
  .flow-step__title { margin-top: 14px; }

  .faq__inner { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .faq__head .sec-lead br { display: none; }
  .faq-item summary { padding: 22px 52px 22px 2px; font-size: 1rem; }
  .faq-item__answer { padding: 0 8px 24px 2px; font-size: .9375rem; }

  .message__text { font-size: 1.0625rem; letter-spacing: .1em; }

  .about__inner { grid-template-columns: 1fr; }
  .about__map, .about__map iframe { min-height: 300px; }
}

/* ==========================================================================
   480px以下
   ========================================================================== */
@media (max-width: 480px) {
  .hero__visual { width: 84%; }
  .hero__actions { flex-direction: column; }
  .info-list__row { grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; }
  .price-list__row { flex-wrap: wrap; }
  .contact__tel { padding: 20px; }
}