/* =========================================================
   KS美容室 共通スタイル
   色を変えたい場合は、最初の「カラー設定」を編集してください。
   ========================================================= */

/* ---------- カラー・サイズ設定 ---------- */
:root {
  --color-green: #738265;
  --color-green-dark: #4f6046;
  --color-green-light: #dfe5da;
  --color-ivory: #f9f6ef;
  --color-beige: #eee7da;
  --color-brown: #392f27;
  --color-text: #403b36;
  --color-muted: #716c65;
  --color-white: #ffffff;
  --color-line: #ded8cd;
  --shadow-soft: 0 16px 42px rgb(57 47 39 / 9%);
  --radius-small: 10px;
  --radius-medium: 18px;
  /* PC表示の本文幅。ヘッダーと全セクションで共通使用します */
  --container: 1100px;
  --header-height: 78px;
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---------- 基本設定 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--color-text);
  background: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--color-brown); font-family: var(--font-serif); font-weight: 500; line-height: 1.45; }
h2 { margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: 0.06em; }
h3 { margin-bottom: 12px; font-size: 1.28rem; }
p { margin-bottom: 1.25em; line-break: strict; text-wrap: pretty; }
.heading-line { display: block; white-space: nowrap; }

:focus-visible { outline: 3px solid #2f6f95; outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 16px;
  color: var(--color-white);
  background: var(--color-brown);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.narrow-container { max-width: 900px; }
.section { padding: 120px 0; }
.section-tint { background: #f0ede4; }
.section-number { margin-bottom: 5px; color: var(--color-green); font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.15em; }
.eyebrow { margin-bottom: 18px; color: var(--color-green-dark); font: 600 0.75rem/1.5 Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; }
.section-heading { max-width: 720px; margin-bottom: 54px; }
.section-heading > p:last-child { max-width: 60ch; margin-inline: auto; color: var(--color-muted); }
.centered { margin-inline: auto; text-align: center; }
.mobile-only { display: none; }

/* ---------- ボタン ---------- */
.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary, .button-line { color: var(--color-white); background: var(--color-green-dark); box-shadow: 0 10px 25px rgb(79 96 70 / 22%); }
.button-primary:hover, .button-line:hover { background: #3e4f37; }
.button-secondary { border-color: var(--color-brown); color: var(--color-brown); background-color: rgb(255 255 255 / 80%); }
.button-secondary:hover { background: var(--color-white); }
.button-group { display: flex; flex-wrap: wrap; gap: 12px; }
.centered-button { margin-top: 38px; text-align: center; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header-height);
  border-bottom: 1px solid rgb(57 47 39 / 9%);
  background: rgb(249 246 239 / 90%);
  backdrop-filter: blur(14px);
}
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brown); font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: 0.12em; text-decoration: none; }
.brand img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.global-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.global-nav a { font-size: 0.84rem; text-decoration: none; }
.global-nav a:not(.nav-cta):hover { color: var(--color-green-dark); }
.nav-cta { padding: 10px 18px; border-radius: 999px; color: var(--color-white); background: var(--color-green-dark); font-weight: 700; }
.menu-toggle { display: none; }

/* ---------- ファーストビュー ---------- */
.hero { position: relative; min-height: min(850px, 100svh); overflow: hidden; padding-top: var(--header-height); background: var(--color-beige); }
.hero-media { position: absolute; inset: var(--header-height) 0 0; }
.hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgb(249 246 239 / 96%) 0%, rgb(249 246 239 / 88%) 31%, rgb(249 246 239 / 22%) 59%, transparent 100%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; z-index: 1; display: flex; min-height: calc(min(850px, 100svh) - var(--header-height)); align-items: center; }
.hero-copy { width: min(570px, 50%); padding: 70px 0; }
.hero h1 { margin-bottom: 26px; font-size: clamp(2.7rem, 4vw, 3.6rem); letter-spacing: 0.055em; }
.hero-lead { max-width: 50ch; margin-bottom: 34px; color: #555047; font-size: 1.05rem; }
.hero-note { margin: 14px 0 0 20px; color: var(--color-muted); font-size: 0.82rem; }
.scroll-guide { position: absolute; right: 28px; bottom: 22px; z-index: 2; color: var(--color-brown); font: 0.7rem Georgia, serif; letter-spacing: 0.15em; text-decoration: none; writing-mode: vertical-rl; }
.scroll-guide::after { display: inline-block; width: 1px; height: 52px; margin-top: 10px; background: currentColor; content: ""; }

/* ---------- サロンについて ---------- */
.split-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(48px, 6vw, 76px); }
.section-copy { max-width: 48ch; }
.about h2 { font-size: clamp(2rem, 3.3vw, 2.5rem); }
.section-copy p:not(.eyebrow, .section-number) { color: var(--color-muted); }
.image-frame { position: relative; margin: 0; }
.image-frame::before { position: absolute; inset: -16px 16px 16px -16px; z-index: -1; background: var(--color-green-light); content: ""; }
.image-frame img { width: 100%; border-radius: 2px; object-fit: cover; box-shadow: var(--shadow-soft); }

/* ---------- 選ばれる理由 ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { position: relative; min-height: 285px; overflow: hidden; padding: 40px 32px; border: 1px solid var(--color-line); background: rgb(255 255 255 / 60%); }
.feature-card::after { position: absolute; right: -38px; bottom: -58px; width: 150px; height: 150px; border: 1px solid var(--color-green-light); border-radius: 50%; content: ""; }
.feature-index { display: block; margin-bottom: 50px; color: var(--color-green); font: italic 1rem Georgia, serif; }
.feature-card p { max-width: 32ch; margin-bottom: 0; color: var(--color-muted); font-size: 0.92rem; }

/* ---------- メニュー ---------- */
.price-list { border-top: 1px solid var(--color-brown); }
.price-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 24px 10px; border-bottom: 1px solid var(--color-line); }
.price-row h3, .price-row p { margin-bottom: 0; }
.price-row div p { color: var(--color-muted); font-size: 0.84rem; }
.price { color: var(--color-brown); font: 500 1.15rem Georgia, serif; letter-spacing: 0.05em; white-space: nowrap; }
.price-note { margin-top: 15px; color: var(--color-muted); font-size: 0.78rem; }

/* ---------- スタイル事例 ---------- */
.style-grid { display: grid; max-width: 1000px; margin-inline: auto; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.style-card { overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-soft); }
/* 施術事例は高さを固定し、一覧で大きくなりすぎないようにします */
.style-card img { width: 100%; height: 240px; object-fit: cover; object-position: center 22%; transition: transform 500ms ease; }
.style-card:hover img { transform: scale(1.025); }
.style-card-body { padding: 24px 25px 26px; }
.card-label { margin-bottom: 8px; color: var(--color-green); font: italic 0.75rem Georgia, serif; letter-spacing: 0.16em; text-transform: uppercase; }
.style-card-body h3, .style-card-body p:last-child { margin-bottom: 0; }
.style-card-body p:last-child { color: var(--color-muted); font-size: 0.86rem; }

/* ---------- お客様の声 ---------- */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 24px; }
.voice-card { position: relative; margin: 0; padding: 38px 32px 32px; border: 1px solid var(--color-line); background: var(--color-white); box-shadow: 0 10px 32px rgb(57 47 39 / 5%); }
.voice-card.featured { transform: translateY(-12px); }
.quote-mark { height: 42px; color: var(--color-green); font: 3.5rem/1 Georgia, serif; }
.voice-card blockquote { max-width: 30ch; margin: 14px 0 20px; font-family: var(--font-serif); line-height: 1.9; }
.voice-card figcaption { color: var(--color-muted); font-size: 0.78rem; text-align: right; }

/* ---------- スタッフ ---------- */
.staff-grid { display: grid; max-width: 900px; margin-inline: auto; grid-template-columns: 1fr; gap: 24px; }
.staff-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 240px; overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-soft); }
.staff-card img { width: 240px; height: 240px; object-fit: cover; object-position: center 18%; }
.staff-card > div { display: flex; flex-direction: column; justify-content: center; padding: 28px 34px; }
.staff-card h3 { margin-bottom: 4px; }
.staff-card p:last-child { margin-bottom: 0; color: var(--color-muted); font-size: 0.88rem; }
.staff-skill { margin-bottom: 14px; color: var(--color-green-dark); font-size: 0.78rem; font-weight: 700; }

/* ---------- 予約の流れ ---------- */
.flow-list { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); list-style: none; }
.flow-list li { position: relative; padding: 18px 26px; text-align: center; }
.flow-list li:not(:last-child)::after { position: absolute; top: 45px; right: -8px; width: 16px; height: 16px; border-top: 1px solid var(--color-green); border-right: 1px solid var(--color-green); content: ""; transform: rotate(45deg); }
.flow-number { display: grid; width: 56px; height: 56px; margin: 0 auto 22px; place-items: center; border: 1px solid var(--color-green); border-radius: 50%; color: var(--color-green-dark); font: italic 1.25rem Georgia, serif; }
.flow-list p { margin-bottom: 0; color: var(--color-muted); font-size: 0.84rem; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item h3 { margin: 0; font-family: var(--font-sans); }
.faq-item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 8px; border: 0; color: var(--color-brown); background: transparent; font-weight: 600; text-align: left; cursor: pointer; }
.faq-item button span:first-child::before { margin-right: 14px; color: var(--color-green); font: italic 1.1rem Georgia, serif; content: "Q."; }
.faq-icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after { position: absolute; top: 8px; left: 1px; width: 16px; height: 1px; background: currentColor; content: ""; transition: transform 180ms ease; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item button[aria-expanded="true"] .faq-icon::after { transform: rotate(0); }
.faq-answer { padding: 0 45px 24px; color: var(--color-muted); }
.faq-answer p { margin-bottom: 0; }

/* ---------- 店舗情報 ---------- */
.access-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); min-height: 420px; border: 1px solid var(--color-line); background: var(--color-white); box-shadow: var(--shadow-soft); }
.map-frame { width: 100%; height: 100%; min-height: 420px; border: 0; }
.shop-info a { color: inherit; text-underline-offset: 3px; }
.shop-info { padding: clamp(32px, 5vw, 60px); }
.shop-info h3 { padding-bottom: 18px; border-bottom: 1px solid var(--color-line); font-size: 1.7rem; }
.shop-info dl { margin: 0; }
.shop-info dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--color-line); font-size: 0.86rem; }
.shop-info dt { color: var(--color-green-dark); font-weight: 700; }
.shop-info dd { margin: 0; color: var(--color-muted); }

/* ---------- 最後の予約案内 ---------- */
.reservation { position: relative; overflow: hidden; padding: 110px 0; color: var(--color-white); background: var(--color-green-dark); }
.reservation::before, .reservation::after { position: absolute; width: 430px; height: 430px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; content: ""; }
.reservation::before { top: -260px; left: -120px; }
.reservation::after { right: -160px; bottom: -310px; }
.reservation-inner { position: relative; z-index: 1; max-width: 760px; text-align: center; }
.reservation-inner > img { width: 94px; height: 94px; margin: 0 auto 22px; border-radius: 50%; }
.reservation .section-number, .reservation .eyebrow { color: #dfe8d8; }
.reservation h2 { color: var(--color-white); }
.reservation .button-line { min-width: min(100%, 340px); margin-top: 14px; color: var(--color-green-dark); background: var(--color-white); box-shadow: 0 10px 28px rgb(20 35 18 / 20%); }
.reservation .button-line:hover { background: var(--color-ivory); }
.reservation-note { margin: 15px 0 0; font-size: 0.78rem; opacity: 0.8; }
.line-status { min-height: 1.8em; margin: 8px 0 0; color: #fff4be; font-size: 0.8rem; }

/* ---------- フッター ---------- */
.site-footer { padding: 34px 0; background: #302a25; color: rgb(255 255 255 / 70%); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.footer-brand { color: var(--color-white); }
.footer-inner nav { display: flex; justify-content: center; gap: 24px; }
.footer-inner nav a { font-size: 0.78rem; text-decoration: none; }
.footer-inner small { font-size: 0.7rem; }
.mobile-fixed-cta { display: none; }

/* =========================================================
   タブレット・スマートフォン
   ========================================================= */
@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .container { width: min(calc(100% - 36px), var(--container)); }
  .section { padding: 88px 0; }

  .menu-toggle { display: grid; width: 44px; height: 44px; padding: 11px 9px; place-content: center; gap: 5px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; width: 25px; height: 1px; background: var(--color-brown); transition: transform 180ms ease, opacity 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .global-nav { position: fixed; inset: var(--header-height) 0 auto; display: grid; max-height: 0; overflow: hidden; padding: 0 24px; background: var(--color-ivory); opacity: 0; visibility: hidden; transition: max-height 250ms ease, opacity 180ms ease, padding 250ms ease; }
  .global-nav.is-open { max-height: calc(100svh - var(--header-height)); padding: 20px 24px 30px; opacity: 1; visibility: visible; }
  .global-nav a { padding: 10px 4px; border-bottom: 1px solid var(--color-line); font-size: 0.95rem; }
  .global-nav .nav-cta { margin-top: 8px; border-bottom: 0; text-align: center; }

  .hero-copy { width: 65%; }
  .split-layout { grid-template-columns: 1fr; }
  .section-copy { max-width: 48ch; }
  .feature-grid, .style-grid, .voice-grid, .staff-grid { gap: 16px; }
  .feature-card { padding: 30px 22px; }
  .access-layout { grid-template-columns: 1fr; }
  .map-frame { min-height: 340px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 680px) {
  /* 本文は16pxを保ち、スマホでも読みやすい大きさにします */
  body { padding-bottom: 70px; font-size: 16px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section { padding: 72px 0; }
  h2 { font-size: 2rem; }
  .section-heading { margin-bottom: 38px; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }

  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 0.92rem; }
  .menu-toggle { width: 48px; height: 48px; }

  .hero { display: flex; min-height: auto; flex-direction: column; padding-top: var(--header-height); }
  /* 画像高を抑え、見出しとメインCTAが最初の画面に入りやすくします */
  .hero-media { position: relative; inset: auto; order: 1; height: clamp(220px, 31svh, 280px); min-height: 0; }
  .hero-media::after { background: linear-gradient(0deg, rgb(249 246 239 / 45%) 0%, transparent 38%); }
  .hero-media img { object-position: 63% center; }
  .hero-inner { order: 2; min-height: auto; }
  .hero-copy { width: 100%; padding: 32px 0 46px; text-align: center; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 16px; font-size: clamp(2.05rem, 9.5vw, 2.7rem); line-height: 1.35; }
  .hero-lead { margin-bottom: 24px; font-size: 1rem; line-height: 1.75; }
  .button-group { flex-direction: column; }
  .button-group .button { width: 100%; min-height: 52px; padding: 12px 20px; }
  .hero-note { margin: 12px 0 0; font-size: 0.8125rem; }
  .scroll-guide { display: none; }

  .split-layout { gap: 34px; }
  .about h2 { font-size: 1.65rem; }
  .image-frame::before { inset: -10px 10px 10px -10px; }
  .feature-grid, .style-grid, .voice-grid, .staff-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .feature-index { margin-bottom: 30px; }
  .style-grid, .staff-grid { gap: 28px; }
  .style-card, .staff-card { max-width: 430px; margin-inline: auto; }
  .staff-card { display: block; width: 100%; min-height: 0; }
  .staff-card img { width: 100%; height: 240px; object-position: center 18%; }
  .staff-card > div { padding: 24px; }
  .voice-card.featured { transform: none; }

  .price-row { padding: 20px 2px; }
  .price-row > * { min-width: 0; }
  .price-row div p { font-size: 0.8125rem; }
  .price { font-size: 1rem; }

  .flow-list { grid-template-columns: 1fr; gap: 0; }
  .flow-list li { display: grid; grid-template-columns: 52px 1fr; padding: 17px 0; text-align: left; }
  .flow-list li:not(:last-child)::after { top: auto; right: auto; bottom: -5px; left: 25px; width: 10px; height: 10px; transform: rotate(135deg); }
  .flow-number { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .flow-list h3 { margin-bottom: 3px; }

  .faq-item button { min-height: 64px; padding: 18px 2px; }
  .faq-answer { padding: 0 2px 22px 32px; }
  .access-layout { min-height: 0; }
  .map-frame { min-height: 280px; }
  .shop-info { padding: 30px 24px; }
  .shop-info dl > div { grid-template-columns: 72px 1fr; }

  .reservation { padding: 80px 0; }
  .reservation h2 { font-size: 1.85rem; }
  .reservation .button-line { width: 100%; min-height: 52px; }
  .footer-inner nav { flex-wrap: wrap; gap: 10px 20px; }
  .footer-inner nav a { display: inline-flex; min-height: 44px; align-items: center; font-size: 0.8125rem; }

  /* 補足文字も13px未満にならないよう調整します */
  .section-number,
  .eyebrow,
  .card-label,
  .price-note,
  .voice-card figcaption,
  .staff-skill,
  .reservation-note,
  .line-status,
  .footer-inner small { font-size: 0.8125rem; }

  .mobile-fixed-cta { position: fixed; inset: auto 0 0; z-index: 1100; display: block; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); background: rgb(249 246 239 / 94%); box-shadow: 0 -8px 22px rgb(57 47 39 / 10%); backdrop-filter: blur(12px); }
  .mobile-fixed-cta a { display: flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 999px; color: var(--color-white); background: var(--color-green-dark); font-weight: 700; text-decoration: none; }
}

/* 高さが低いスマホでは、画像をもう少しコンパクトにします */
@media (max-width: 680px) and (max-height: 740px) {
  .hero-media { height: 210px; }
  .hero-copy { padding-top: 28px; }
}

/* 動きを減らす設定を利用している方への配慮 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== 制作サンプルの帯（Len.Design 2026-09-09 追加） ===== */
:root { --demo-bar: 34px; }
.demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: var(--demo-bar); display: flex; align-items: center; justify-content: center; padding: 0 12px; background: #5d6b4c; color: #fff; font-size: 12.5px; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar a { color: #fff; font-weight: 700; }
.demo-bar-short { display: none; }
.site-header { top: var(--demo-bar); }
.hero { padding-top: calc(var(--header-height) + var(--demo-bar)); }
html { scroll-padding-top: calc(var(--header-height) + var(--demo-bar)); }
@media (max-width: 900px) { .global-nav { top: calc(var(--header-height) + var(--demo-bar)); } .demo-bar { font-size: 11.5px; } .demo-bar-long { display: none; } .demo-bar-short { display: inline; } }