html {
  scroll-behavior: smooth;
}



/* ensure hero bounds and clipping */
#hero {
  position: relative;      /* 必須：絶対配置子を hero 内に収める */
  overflow: hidden;        /* はみ出しを隠す */
  aspect-ratio: 16/10;     /* あればOK */
  max-height: 100svh;
  width: 100%;
}

/* slide-film: 単純で安定する指定に */
.slide-film {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* 小画面で急に大きくならないように親幅を超えない設定に */
  width: 92%;           /* 基本は親幅の 92%（余白を残す） */
  max-width: 100%;      /* 親 #hero の幅を超えない */
  height: auto;
  max-height: 72vh;     /* 高さも制限（必要に応じて調整） */

  object-fit: contain;
  object-position: center center;

  z-index: 20;
  display: block;
}

/* iPhone SE など小画面向けの微調整 */
@media (max-width: 420px) {
  .slide-film {
    width: 88%;         /* さらに縮める */
    max-height: 68vh;
  }
}
@media (max-width: 380px) {
  .slide-film {
    width: 84%;         /* iPhone SE（375px）に合わせた安全値 */
    max-height: 64vh;
  }
}
@media (max-width: 340px) {
  .slide-film {
    width: 78%;
    max-height: 60vh;
  }
}


/* フェードコンテナ（重ねる親） */
.fade-container {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.slide-image {
  width: 88%;      /* 親要素に対して80%の幅 */
  height: auto;    /* 縦横比を維持 */
  display: block;  /* 中央寄せしたい場合 */
  margin: 0 auto;  /* 中央寄せ */
  object-fit: cover;
}
/* 各スライド（重ねて切り替える）*/
.fade-slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  will-change: opacity;
  pointer-events: none;
}

/* JS が付ける表示クラス */
.fade-slide.is-show {
  opacity: 1;
  pointer-events: auto;
}

/* 内部の基準要素：必ず高さを持たせる */
.slide-inner {
  position: relative;
}



/* キャプション全体 */
.slide-inner .caption {
  position: absolute;
  top: 6%;      /* 親コンテナの高さに対して */
  left: 10%;    /* 親コンテナの幅に対して */
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* ラベル */
.caption .caption-label {
  font-size: clamp(0.5rem, 1.2vw, 1.2rem);
}

.caption .caption-title {
  font-size: clamp(0.8rem, 1.6vw, 2.0rem);
  
}

.caption .caption-btn {
  font-size: clamp(0.65rem, 1vw, 1rem);
  padding: 0.2rem 0.8rem; 
}

/* もっと見るボタン */
.caption .caption-btn {
  font-size: clamp(0.55rem, 1vw, 1rem);
  padding: 0.2rem 0.8rem; /* ボタンの大きさも確保 */
  border-radius: 9999px;
  border: 1px solid white;
  background-color: transparent;
  color: white;
  transition: all 0.3s ease;
}

.caption .caption-btn:hover {
  background-color: white;
  color: black;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .caption .caption-label { font-size: 1rem; }
  .caption .caption-title { font-size: 2rem; }
  .caption .caption-btn { font-size: 1rem; }
}


  .caption .caption-btn {
    font-size: 0.7rem; /* ボタンも微調整 */
    padding: 0.2rem 0.8rem;
  }


/* 超小型（iPhone SE等 380px以下） */
@media (max-width: 420px) {
  .caption .caption-label { font-size: 0.5rem; }
  .caption .caption-title { font-size: 0.6rem; }
 
  .caption .caption-btn {
    font-size: 0.5rem;
    padding: 0.3rem 0.6rem;
}
}
@media (max-width: 350px) {
  .caption .caption-label { font-size: 0.45rem; }
  .caption .caption-title { font-size: 0.5rem; }
  .caption .caption-btn {
    font-size: 0.45rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (min-width: 1024px) {
  #news {
    margin-top: 12rem; /* 好みで調整 */
  }
}
/* ヘッダーナビ：デフォルト */
.header-nav {
  font-size: 1.125rem; /* Tailwind text-lg 相当 */
}



@media (min-width: 740px) and (max-width: 820px) and (orientation: landscape) {
  .header-nav {
    font-size: 0.95rem;
  }

  .header-nav a {
    padding-inline: 0.25rem;
  }
}
/* ヘッダー全体（site-headerに直接クラスがつく想定） */
#site-header.header-small .header-container {
  height: 3.5rem !important; /* 約 h-14 */
}

@media (min-width: 780px) {
  #site-header.header-small .header-container {
    height: 4.5rem !important;
  }
}


/* 画面幅 850px 以下で小さくする */
@media (max-width: 850px) {
  #site-logo {
    height: 40px; /* 好きな小ささに調整 */
  }
}
/* ロゴ縮小 */
#site-logo.logo-small {
  height: 2rem !important;
}

@media (min-width: 780px) {
  #site-logo.logo-small {
    height: 3rem !important;
  }
}

/* 滑らかに変化させるための設定 */
#site-header, #site-logo, .header-container {
  transition: all 0.3s ease-in-out;
}
.page-enter {
  opacity: 0;
  transform: translateY(16px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 2s ease,
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bg-gradient {
  background: linear-gradient(135deg, #ffe8ed, #fff0f5, #ffe8ed);
  background-size: 200% 200%;
  animation: gradientMove 5s ease-in-out infinite;
}


@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.texture-paper {
  width: 100%;
  height: 100vh;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 170, 190, 0.85), rgba(255, 185, 210, 0) 70%),
    radial-gradient(circle at 70% 40%, rgba(240, 160, 230, 0.7), rgba(200, 210, 255, 0) 60%),
    radial-gradient(circle at 50% 80%, rgba(255, 200, 150, 0.75), rgba(210, 220, 255, 0) 80%),
    linear-gradient(
      180deg,
      rgba(255, 170, 190, 0.9),
      rgba(255, 150, 180, 0.85),
      rgba(255, 130, 170, 0.8),
      rgba(230, 140, 220, 0.8),
      rgba(200, 180, 255, 0.75),
      rgba(210, 200, 255, 0.7),
      rgba(255, 167, 150, 0.8)
    );
  background-blend-mode: overlay;
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: floatGradient 60s ease-in-out infinite;
}

@keyframes floatGradient {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  25% {
    background-position: 10% 5%, 5% 10%, 8% 3%, 0% 0%;
  }
  50% {
    background-position: 20% 10%, 10% 20%, 15% 5%, 0% 0%;
  }
  75% {
    background-position: 10% 5%, 5% 10%, 8% 3%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.fade-container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease;
}

.fade-container.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



.animate-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
}







.en {
    font-family: "Cantata One", serif;
  }


  .klee-one-regular {
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  
  .jp {
    font-family: "Klee One", sans-serif;
  }
  
body {
  font-family:
 "Klee One",
    "Cantata One",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
    overflow-x: hidden;
}
.line {
    position: absolute;

    top: 50%;
    width: 35px;
    height: 2.5px;
    background: black;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.2s ease;
    border-radius: 9999px;

  }
  #menu-btn:not(.menu-open):hover .line {
    opacity: 0.4;
  }
  @media (min-width: 780px) {
    .line {
      width: 10px;
      height: 3px;
    }
}

/* バッテン */

  .line1 {
    transform: translate(-50%, calc(-50% - 10px));
  }
  
  .line2 {
    transform: translate(-50%, -50%);
  }
  
  .line3 {
    transform: translate(-50%, calc(-50% + 10px));
  }
  

  .menu-open .line1 {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .menu-open .line2 {
    opacity: 0;
  }
  
  .menu-open .line3 {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 1.6s ease-out,
      transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .fade-in.is-loaded {
    opacity: 1;
    transform: translateY(0);
  }
  
 
  .fade-delay-300 { transition-delay: 0.3s; }
  .fade-delay-600 { transition-delay: 0.6s; }
  .fade-delay-900 { transition-delay: 0.9s; }
  

/* メニュー */
#menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

#menu.open {
  opacity: 1;
  pointer-events: auto;
}


#menu ul li {
  transform: translateX(24px);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(.22,.9,.18,1),
    opacity 320ms ease;
  will-change: transform, opacity;
}

#menu.open ul li {
  transform: translateX(0);
  opacity: 1;
}


#menu.open ul li:nth-child(1) { transition-delay: 0.08s; }
#menu.open ul li:nth-child(2) { transition-delay: 0.16s; }
#menu.open ul li:nth-child(3) { transition-delay: 0.24s; }
#menu.open ul li:nth-child(4) { transition-delay: 0.32s; }
#menu.open ul li:nth-child(5) { transition-delay: 0.40s; }
#menu.open ul li:nth-child(6) { transition-delay: 0.48s; }
#menu.open ul li:nth-child(7) { transition-delay: 0.56s; }


#menu ul a {
  display: inline-block;
  transform: scale(1);
  transition: transform 200ms ease, opacity 180ms ease;
  opacity: 0.95;
}

#menu ul a:hover,
#menu ul a:active {
  transform: scale(1.12);
  opacity: 0.6;
}


@media (prefers-reduced-motion: reduce) {
  #menu,
  #menu ul li {
    transition: none;
    transform: none;
    opacity: 1;
  }
}