/* トークン（配色は coolors.co「Neutral Elegance」「Soft Sand」をもとにした白とグレージュ） */
:root {
  --bg: #fbfaf8;
  --surface: #f3f0eb;
  --surface-2: #fdfcfb;
  --ink: #4d453f;
  --ink-sub: #766d66;
  --line: #d9d2c9;
  --accent: #a3978b;
  --dark: #463f3a;
  --on-dark: #fbfaf8;
  --ph: #ddd5cb;
  --ph-2: #d3cabf;
  --ph-3: #e6dfd6;
  --ph-ink: #6a615a;
  --en-min: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --jp-min: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --go: "Noto Sans JP", "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  --en-go: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --pow0: 15px; --pow1: 18px; --pow2: 22px; --pow6: 45px; --pow7: 54px;
}
@media (max-width: 1000px) { :root { --pow0: 14px; --pow1: 17px; --pow2: 20px; --pow6: 42px; --pow7: 50px; } }
@media (max-width: 680px) { :root { --pow0: 13px; --pow1: 15px; --pow2: 17px; --pow6: 30px; --pow7: 35px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (max-width: 1000px) { html { font-size: 13px; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--jp-min); font-size: var(--pow0); line-height: 2; letter-spacing: .06em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, dt, figure { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 90%; max-width: 1280px; margin: 0 auto; }
.section { position: relative; padding: 8rem 0; }
@media (max-width: 1000px) { .section { padding: 6rem 0; } }
@media (max-width: 680px) { .section { padding: 4rem 0; } }

/* 見出し・本文 */
.title { font-family: var(--en-min); font-size: var(--pow7); letter-spacing: .02em; line-height: 1.5; margin-bottom: .5em; }
@media (max-width: 1000px) { .title { font-size: var(--pow6); } }
@media (max-width: 680px) { .title { font-size: calc(var(--pow6) + 2px); letter-spacing: .01em; } }
.title::after { content: ""; display: block; width: 2.4rem; height: 1px; margin-top: .35em; background: var(--accent); }
.salon__head .title::after, .reserve__head .title::after, .reserve .title::after { margin-left: auto; margin-right: auto; }
.text { font-size: var(--pow0); letter-spacing: .02em; line-height: 2.2; text-align: justify; text-wrap: pretty; }

/* 頭文字だけ斜体にして、色を一段うすくする */
.ini { font-style: italic; font-weight: 400; color: var(--accent); padding-right: .04em; }

/* 2列の組（PC は左右、SP は縦積み） */
.fl { display: flex; align-items: center; }
.fl > * { width: 50%; }
.fl--rev { flex-direction: row-reverse; }
.fl--top { align-items: flex-start; }
.fl__body { padding: 0 5%; }
.fl__media > * { width: 80%; margin: 0 auto; }
@media (max-width: 680px) {
  .fl, .fl--rev { display: block; }
  .fl > * { width: 100%; }
  .fl__body { padding: 0 7.5%; }
}

/* 仮画像 */
.ph { position: relative; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-3), var(--ph) 55%, var(--ph-2)); display: flex; align-items: center; justify-content: center; }
.ph--b { background: linear-gradient(200deg, var(--ph-3), var(--ph-2)); }
.ph--c { background: linear-gradient(45deg, var(--ph), var(--ph-3)); }
.ph--map { background: repeating-linear-gradient(0deg, transparent 0 39px, var(--surface-2) 39px 40px), repeating-linear-gradient(90deg, transparent 0 59px, var(--surface-2) 59px 60px), var(--ph-3); }
.ph > span { font-family: var(--go); font-size: 11px; letter-spacing: .08em; line-height: 1.6; color: var(--ph-ink); border: 1px solid currentColor; border-radius: 2em; padding: .2em 1em; background: rgb(255 255 255 / .35); text-align: center; white-space: nowrap; }
@media (max-width: 680px) { .ph > span { font-size: 10px; padding: .1em .8em; letter-spacing: .04em; } }
.pimg { position: relative; overflow: hidden; background: var(--ph); }
img { display: block; max-width: 100%; }
img.pimg__in, .photo__list img { width: 100%; height: 100%; object-fit: cover; }
.pimg__in { position: absolute; inset: 0; transform: scale(1.2); will-change: transform; }

/* スクロールで出る */
.sa { opacity: 0; transform: translateY(3rem); transition: opacity 1s var(--ease), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.sa.is-in { opacity: 1; transform: none; }
.sa-list > li { opacity: 0; transform: translateY(3rem); transition: opacity 1s var(--ease), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.sa-list.is-in > li { opacity: 1; transform: none; }
.sa-list > li:nth-child(2) { transition-delay: 120ms; }
.sa-list > li:nth-child(3) { transition-delay: 240ms; }
.sa-list > li:nth-child(4) { transition-delay: 360ms; }

/* 開幕 */
.intro { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.intro__logo { margin: 0; opacity: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); font-size: 2.2rem; }
body.is-ready .intro__logo { opacity: 1; }
body.is-load .intro { opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(.445, .05, .55, .95), visibility 1s; }
.is-capture .intro { display: none; }
.is-capture .sa, .is-capture .sa-list > li { opacity: 1; transform: none; transition: none; }

/* ロゴ（文字） */
.logo { font-family: var(--en-min); font-weight: 400; line-height: 1; letter-spacing: .14em; color: var(--ink); white-space: nowrap; }
.logo b { font-weight: 500; letter-spacing: .2em; margin-left: .35em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sa, .sa-list > li { opacity: 1; transform: none; transition: none; }
  .photo__list { animation: none !important; }
}
.nowrap { white-space: nowrap; }