/* ===========================
   HAIR on Fleek - Fluid Typography System
   clamp() による画面幅連動デザイン
=========================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ===== Colors ===== */
  --color-bg: #fcf9f3;
  --color-bg-warm: #f3ece0;
  --color-cream: #ebe0c8;
  --color-border: #e5dccb;

  --color-sun: #d49a52;
  --color-terracotta: #c87454;
  --color-terracotta-dark: #a55a3e;
  --color-ocean: #6f9ca8;
  --color-palm: #8a9a7a;

  --color-text: #2a2520;
  --color-text-body: #3d3a35;
  --color-text-light: #6b6258;
  --color-text-lighter: #95897a;

  /* ===== Fonts ===== */
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mincho: 'Shippori Mincho', 'Yu Mincho', serif;

  /* ===== Fluid Typography (clamp ベース) ===== */
  /* 320px〜1200pxの間で滑らかに変化 */
  --fs-xxs: clamp(10px, 1.4vw, 11px);
  --fs-xs: clamp(11px, 1.6vw, 12px);
  --fs-sm: clamp(12px, 2.2vw, 14px);
  --fs-base: clamp(13px, 2.6vw, 15px);
  --fs-md: clamp(14px, 2.8vw, 16px);
  --fs-lg: clamp(15px, 3.2vw, 17px);
  --fs-xl: clamp(16px, 3.6vw, 19px);

  /* 見出し */
  --fs-h1: clamp(26px, 5.8vw, 56px);
  --fs-h2: clamp(22px, 4.5vw, 38px);
  --fs-h3: clamp(18px, 3.6vw, 24px);
  --fs-h4: clamp(14px, 2.8vw, 16px);

  /* ヒーロー専用 */
  --fs-hero: clamp(28px, 6vw, 58px);
  --fs-hero-sub: clamp(13px, 2.6vw, 16px);

  /* ===== Fluid Spacing ===== */
  --section-py: clamp(60px, 9vw, 130px);
  --section-py-sm: clamp(50px, 7vw, 100px);
  --container-px: clamp(18px, 3vw, 24px);
  --gap-base: clamp(16px, 2.5vw, 24px);
  --gap-lg: clamp(24px, 4vw, 48px);
  --gap-xl: clamp(40px, 6vw, 80px);

  /* ===== Other ===== */
  --max-width: 1180px;
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.95;
  letter-spacing: 0.04em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* 日本語の改行を文節区切りで自然に */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}

/* 旧ブラウザフォールバック */
@supports not (word-break: auto-phrase) {
  body { word-break: normal; line-break: strict; }
}

p, li, h1, h2, h3, h4, h5 {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===========================
   COMMON UTILITIES
=========================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.section-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  color: var(--color-terracotta);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
  font-weight: 500;
}

.section-title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.section-header {
  margin-bottom: clamp(40px, 6vw, 64px);
  text-align: center;
}
.section-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-terracotta);
  margin: clamp(20px, 3vw, 32px) auto 0;
}

/* ===========================
   BUTTONS (fluid)
=========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(13px, 2.2vw, 16px) clamp(24px, 4vw, 36px);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  transition: all var(--transition);
  border: 1px solid var(--color-terracotta);
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-jp);
}
.btn-primary {
  background: var(--color-terracotta);
  color: white;
}
.btn-primary:hover {
  background: var(--color-terracotta-dark);
  transform: translateY(-2px);
}
.btn-secondary {
  background: white;
  color: var(--color-terracotta);
  border: 1px solid var(--color-terracotta);
  font-weight: 500;
}
.btn-secondary:hover {
  background: var(--color-terracotta);
  color: white;
  transform: translateY(-2px);
}
.btn-line {
  background: #06C755;
  border-color: #06C755;
  color: white;
}
.btn-line:hover {
  background: #05a847;
  border-color: #05a847;
  transform: translateY(-2px);
}
.btn-shop {
  background: var(--color-text);
  border-color: var(--color-text);
  color: white;
}
.btn-shop:hover {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: translateY(-2px);
}

/* ===========================
   HEADER (fluid)
=========================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: clamp(12px, 2vw, 18px) clamp(18px, 3vw, 32px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(252, 249, 243, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.site-header .logo {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--color-text);
}
.site-header .logo span { color: var(--color-terracotta); }
.site-header nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  font-weight: 500;
}
.site-header nav a {
  transition: color var(--transition);
  position: relative;
  padding: 4px 0;
  color: var(--color-text-body);
}
.site-header nav a:hover { color: var(--color-terracotta); }
.site-header nav a.active { color: var(--color-terracotta); }
.site-header nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--color-terracotta);
}
@media (max-width: 960px) {
  .site-header nav { display: none; }
}

/* ===========================
   PAGE HERO (fluid)
=========================== */
.page-hero {
  padding: clamp(120px, 14vw, 160px) 0 clamp(60px, 9vw, 100px);
  background:
    linear-gradient(135deg, rgba(252,249,243,0.4) 0%, rgba(243,236,224,0.35) 100%),
    url('https://images.unsplash.com/photo-1505944270255-72b8c68c6a70?w=1800&q=85') center/cover no-repeat;
  text-align: center;
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(212,154,82,0.18), transparent 50%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
}
.page-hero .label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  color: var(--color-terracotta);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
  font-weight: 500;
}
.page-hero h1 {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 44px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: 18px;
}
.page-hero p {
  font-size: var(--fs-base);
  color: var(--color-text-body);
  letter-spacing: 0.06em;
  max-width: 600px;
  margin: 0 auto;
  line-height: 2;
}

/* ===========================
   FOOTER (fluid)
=========================== */
footer {
  padding: clamp(50px, 7vw, 80px) 0 32px;
  background: #2a2520;
  color: #c4b8a3;
  text-align: center;
}
footer .logo {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 26px);
  color: white;
  letter-spacing: 0.15em;
  margin-bottom: 18px;
  font-weight: 500;
}
footer .logo span { color: var(--color-sun); }
footer .footer-info {
  font-size: var(--fs-sm);
  line-height: 2;
  color: #c4b8a3;
}
footer .footer-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  margin: clamp(24px, 4vw, 32px) 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  font-weight: 500;
}
footer .footer-nav a {
  color: #c4b8a3;
  transition: color var(--transition);
}
footer .footer-nav a:hover { color: var(--color-sun); }
footer .insta {
  margin-top: 20px;
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  font-weight: 500;
}
footer .insta a { color: var(--color-sun); }
footer small {
  display: block;
  margin-top: clamp(28px, 4vw, 40px);
  font-size: var(--fs-xxs);
  letter-spacing: 0.2em;
  color: #6a6258;
}

/* ===========================
   FLOATING LINE BUTTON (fluid)
=========================== */
.float-line {
  position: fixed;
  bottom: clamp(16px, 3vw, 24px);
  right: clamp(16px, 3vw, 24px);
  z-index: 999;
  background: #06C755;
  color: white;
  padding: clamp(11px, 2vw, 14px) clamp(18px, 3vw, 24px);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.4);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.float-line:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(6, 199, 85, 0.5);
}

/* ===========================
   COMMON SECTIONS
=========================== */
section { padding: var(--section-py) 0; }