/* ==========================================================
   ÉVOLÉA 共通スタイル（index + top）
   ========================================================== */
:root { color-scheme: dark; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------
   アニメーション共通
------------------------------ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(3vh); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-item {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 2.4s ease, transform 2.4s ease;
}
.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   INDEX（スプラッシュ）
============================== */
.splash-viewport {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(-6vh);
  padding: env(safe-area-inset-top)
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
}

.splash-logo-wrap {
  opacity: 0;
  animation: fadeInUp 1.4s ease-out forwards;
  will-change: opacity, transform;
}

.splash-logo {
  display: block;
  width: clamp(240px, 60vw, 1080px);
  height: auto;
  margin: 0 auto 1.2rem;
  filter: none !important;
}

.tagline{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.25;
  color: rgba(255,255,255,.85);
  display: block;
  margin: -0.4rem auto 0;
  text-align: center;
  white-space: nowrap;         /* PCで折り返し防止（不要なら外してOK） */
  font-size: clamp(22px, 3vw, 48px);

  opacity: 0;                  /* 初期は隠す */
  animation-name: fadeIn;      /* ← 分解して明示 */
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.6s;       /* ロゴ後もう少し待つ */
  animation-fill-mode: forwards;
}

/* スマホ（折り返し防止・やや小さめ） */
@media (max-width: 480px){
  .tagline{
    font-size: clamp(12px, 3.8vw, 17px);
    width: 88vw;
    line-height: 1.3;
  }
}

/* ==============================
   TOP（コンセプトページ）
============================== */
.main {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 7vh 8vw 12vh;
  overflow-x: hidden;
}

/* ヒーロー画像：上端フル幅＋フェードイン */
.hero { width: 100%; margin: 0; padding: 0; overflow: hidden; }
.hero-img {
  width: 100%; height: auto; display: block;
  border-radius: 0; margin: 0; padding: 0;
  opacity: 0; transform: scale(1.02);
  transition: opacity 1.8s ease-out, transform 2.8s ease-out;
}
.hero-img.show { opacity: 1; transform: scale(1); }

.concept p {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 2.2; 
  margin: 0 0 2.6rem;
  color: rgba(255,255,255,0.92);
  max-width: 800px;
}


.signature {
  margin-top: 2.6rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: .03em;
  color: rgba(255,255,255,.9);
}
.signature .jp {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 1.1rem;
  margin-top: .4rem;
  opacity: .8;
}
/* ===== シグネチャーロゴ ===== */
.signature-logo {
  width: clamp(120px, 20vw, 200px);
  height: auto;
  margin-bottom: 0.6rem;
  display: inline-block;
  filter: none !important;
}

/* リンクボタン */
.links {
  margin-top: 3.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.btn {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 1rem 3rem;
  border-radius: 50px;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: opacity .3s ease;
}
.btn.insta { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.btn.insta:hover { opacity: .9; }
/* --- BASE（購入）ボタン --- */
.btn.base {
  background: linear-gradient(135deg, #c8a97e 0%, #b6936d 100%);
  color: #fff;
  border: none;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 1rem 3rem;
  border-radius: 50px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(200,169,126,0.25); /* やや光沢 */
  transition: all 0.3s ease;
}

.btn.base:hover {
  background: linear-gradient(135deg, #d8b88f 0%, #c2a077 100%);
  box-shadow: 0 0 16px rgba(216,184,143,0.4);
}


/* フッター */
footer {
  margin-top: 5rem;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em;
}