@charset "UTF-8";

/* ==============================================================
   Reset & Base
============================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  /* 固定CTAの高さ分、SPでのみ下部の余白を確保 */
  padding-bottom: 60px;
  overflow-x: hidden;
  /* Text Selection Protection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* ==============================================================
   Global Padding (SP 10px px, Section PY)
============================================================== */
.section-padding {
  padding-top: 70px;
  padding-bottom: 70px;
}

/* SPのみ左右パディングを10pxに強制統一するユーティリティ */
@media (max-width: 767px) {
  [class*="px-[10px]"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ==============================================================
   Stylish Image Frame
============================================================== */
/* 全セクション共通で魅力的なスタイルを設定 */
.styled-img {
  border-radius: 12px !important;
  /* なめらかな角丸 */
  box-shadow: 0 8px 30px rgba(138, 90, 74, 0.08) !important;
  /* 軽微で上品なシャドウ */
  border: 1px solid rgba(214, 197, 179, 0.3) !important;
  /* さりげない枠線 */
  overflow: hidden;
}

/* FVの上下隙間防止 */
.vertical-align-bottom {
  vertical-align: bottom;
}

/* ==============================================================
   Stylish Typography (Headings)
============================================================== */
.stylish-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #8A5A4A;
  /* primary */
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.stylish-title .sub {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #A38C84;
  margin-top: 0.5rem;
  font-weight: 300;
}

@media (max-width: 767px) {
  .stylish-title {
    font-size: 2rem;
  }
}

/* ==============================================================
   Header & Hamburger
============================================================== */
.hamburger-line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #8A5A4A;
  /* primary */
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
  left: 0;
}

/* メニュー展開時のスクロール固定 & ハンバーガーアイコンを非表示にして閉じるボタンとの重なりを防ぐ */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
}

body.no-scroll #hamburger {
  display: none !important;
}

/* ==============================================================
   FV
============================================================== */
/* スクロールインジケーターのアニメーション */
.scroll-line {
  animation: scrollDown 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes scrollDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(200%);
  }
}

.fv-swiper {
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .fv-title {
    font-size: 61px !important;
    line-height: 1.3 !important;
  }
}

/* ==============================================================
   Infinite Marquee (Gallery)
============================================================== */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

.marquee-content {
  display: flex;
  width: max-content;
  /* 2倍の長さを持つ前提で50%移動させる */
  animation: marquee 35s linear infinite;
  /* ホバーで止めない要件。JSクリックイベント等が阻害されないよう pointer-events: auto は下層で定義済 */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ギャラリー画像のホバー時エフェクト */
.gallery-img {
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.cursor-zoom-in:hover .gallery-img {
  transform: scale(1.03);
  opacity: 0.9;
}

/* ==============================================================
   Entrance Animations & Reveal Utilities
============================================================== */
/* Base reveal class - elements start hidden and slightly shifted */
[class^="reveal-"] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1), transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal-up {
  transform: translateY(40px);
}

.reveal-down {
  transform: translateY(-40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-zoom {
  transform: scale(0.95);
}

/* Trigger state - when the IntersectionObserver adds the class */
.is-revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Stagger Delays - apply these to elements in a group */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

.delay-500 {
  transition-delay: 500ms;
}

.delay-600 {
  transition-delay: 600ms;
}

.delay-700 {
  transition-delay: 700ms;
}

.delay-800 {
  transition-delay: 800ms;
}

/* Existing fade-in compatibility (deprecated but kept for now) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header Scrolled State */
.header-scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 20px rgba(138, 90, 74, 0.1) !important;
}

.fv-title,
.fv-subtitle {
  /* Intense Neon Shadow Effect */
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px #ffffff,
    0 0 20px #ffffff,
    0 0 40px rgba(255, 255, 255, 0.8),
    0 0 80px rgba(255, 255, 255, 0.6);
}

/* List Hover Background Slide Effect */
.hover-bg-slide-right {
  background: linear-gradient(to right, #ffffff 50%, #FAF4F0 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.4s ease-out;
}

.hover-bg-slide-right:hover {
  background-position: left bottom;
}

/* Collage Item Effects */
.collage-item img {
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.collage-item img.active {
  opacity: 1 !important;
}

.collage-item:hover img.active {
  transform: scale(1.08);
}

/* Ensure FV section has enough height on all screens */
#fv {
  padding-top: 5svh;
  padding-bottom: 5svh;
}

/* FV Title Size Override (lg breakpoint) */
@media (min-width: 1024px) {
  #fv .lg\:text-6xl {
    font-size: 50px;
    line-height: 1;
  }
}

/* FV Card Padding Override (md breakpoint) */
@media (min-width: 768px) {
  #fv .md\:p-10 {
    padding: 40px 10px;
  }
}

@media (max-width: 1023px) {
  #fv {
    min-height: auto !important;
    height: auto !important;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* SP: FV テキストカードが切れないよう調整 */
@media (max-width: 767px) {
  #fv [style*="min-height"] {
    min-height: 0 !important;
    height: auto !important;
  }

  /* FV 内コンテナの縦並びをきれいに */
  #fv .container>div {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }
}

/* User Custom Override */
@media (min-width: 768px) {
  .md\:gap-16 {
    gap: 20px !important;
  }
}

/* Gallery Title White Override (for dark diagonal bg) */
#gallery .stylish-title {
  color: #ffffff;
}

#gallery .stylish-title .sub {
  color: rgba(255, 255, 255, 0.75);
}

/* ==============================================================
   SP Only Padding Overrides
============================================================== */
@media (max-width: 767px) {
  .px-6 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .p-8 {
    padding: 40px 10px !important;
  }

  .p-6 {
    padding: 40px 10px !important;
  }

  button#scrollToTop {
    margin-bottom: 60px;
  }
}