/* =====================================================
   RESPONSIVE BASE（responsive-base.css 準拠）
   ===================================================== */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: var(--bg);
  color: var(--cream);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bg: #c9bcaf;
  --bg-deep: #b9aa9b;
  --cream: #faf6f1;
  --ink: #362c24;
  --line: rgba(250, 246, 241, 0.4);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
}

/* SR専用（視覚上は隠すがSEO/読み上げ用に残す） */
.hero-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   ローディング画面
   ===================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  text-align: center;
  padding: 0 clamp(16px, 4vw, 40px);
}
.loader-logo {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.5em;
  color: var(--cream);
  margin-bottom: clamp(22px, 3.4vw, 32px);
  opacity: 0;
  animation: loaderFade 1s ease .1s forwards;
}
.loader-horizon {
  width: min(220px, 44vw);
  height: 1px;
  background: rgba(250, 246, 241, 0.22);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.loader-horizon-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--cream);
  transition: width 1.4s cubic-bezier(.4,.0,.2,1);
}
.loader-word {
  margin-top: clamp(16px, 2.6vw, 22px);
  font-family: "Shippori Mincho", serif;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.32em;
  color: rgba(250, 246, 241, 0.75);
  opacity: 0;
  animation: loaderFade 1s ease .5s forwards;
}
@keyframes loaderFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   ヘッダー
   ===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: clamp(20px, 3vw, 30px) 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--cream);
}
.main-nav ul {
  display: flex;
  gap: clamp(22px, 2.8vw, 40px);
}
.main-nav a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(250, 246, 241, 0.88);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--cream);
  transition: width .3s ease;
}
.main-nav a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(250, 246, 241, 0.4);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--cream);
}

/* =====================================================
   ヒーロー
   ===================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}
.hero-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(250, 246, 241, 0.16);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  animation: horizonGrow 1.8s cubic-bezier(.4,0,.2,1) 1.6s forwards;
}
@keyframes horizonGrow {
  to { transform: translateY(-50%) scaleX(1); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.7;
  color: var(--cream);
  letter-spacing: 0.06em;
}
.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 1.4s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: 1.9s; }
.hero-title .line:nth-child(2) { animation-delay: 2.35s; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.hero-tagline {
  position: absolute;
  left: clamp(16px, 4vw, 64px);
  bottom: clamp(28px, 4.2vw, 46px);
  z-index: 2;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.04em;
  color: rgba(250, 246, 241, 0.8);
  opacity: 0;
  animation: fadeUp 1.2s ease 2.7s forwards;
}

.hero-scroll {
  position: absolute;
  right: clamp(16px, 4vw, 64px);
  bottom: clamp(28px, 4.2vw, 46px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(250, 246, 241, 0.6);
  opacity: 0;
  animation: fadeUp 1.2s ease 2.9s forwards;
}
.hero-scroll-line {
  width: 1px;
  height: 34px;
  background: rgba(250, 246, 241, 0.3);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -34px;
  width: 1px; height: 34px;
  background: var(--cream);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -34px; }
  100% { top: 34px; }
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media screen and (max-width: 1023px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100svh;
    width: min(78vw, 320px);
    background: var(--bg-deep);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .35s ease;
    display: flex;
    align-items: center;
    z-index: 600;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(22px, 4vw, 30px);
    padding: 0 clamp(24px, 6vw, 40px);
    width: 100%;
  }
  .main-nav a { font-size: 15px; }
  .nav-toggle { display: flex; position: relative; z-index: 601; }
}

@media screen and (max-width: 767px) {
  .hero-scroll span { display: none; }
  .hero-title { line-height: 1.75; }
}

@media screen and (max-width: 480px) {
  .hero-tagline { bottom: 90px; left: 16px; }
  .hero-scroll { bottom: 90px; right: 16px; }
}