@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  --color-pastel-pink: #FFF5F6;
  --color-soft-pink: #FFE3E6;
  --color-accent-pink: #E08E9B;
  --color-dark-brown: #4A3B32;
  --color-light-brown: #8D7B70;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--color-dark-brown);
  background-color: rgb(239 241 255);
  /* テキスト選択禁止・コピペ防止 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 本文フォントサイズ制限 */
p, li, dd, dt, th, td {
  font-size: 16px;
}
@media (min-width: 768px) {
  p, li, dd, dt, th, td {
    font-size: 16px;
  }
}

/* パララックス効果 */
.bg-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* iOSのSafariでも固定背景（パララックス）を有効にするための対策 */
@supports (-webkit-touch-callout: none) {
  .bg-parallax {
    background-attachment: scroll;
    clip-path: inset(0);
  }
  .bg-parallax::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
  }
}

/* スライダー関連の微調整 */
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* モーダル表示のアニメーション */
.modal-enter {
  opacity: 0;
  transform: scale(0.95);
}
.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal-leave {
  opacity: 1;
  transform: scale(1);
}
.modal-leave-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* アール（角丸）とシャドウの適用ルール */
/* 各セクションに使用する画像には角丸やシャドウを使用しないでくださいとの指示のため、画像タグに対しては適用しません */
.card-shadow {
  box-shadow: 0 4px 20px rgba(74, 59, 50, 0.05);
}

.btn-hover {
  transition: all 0.3s ease;
}
.btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(224, 142, 155, 0.3);
}

/* スクロールダウンの矢印などのアニメーション */
@keyframes scrollDown {
  0% { transform: translateY(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.animate-scroll {
  animation: scrollDown 2s infinite;
}

/* ドロップシャドウが画像にかからないようにするためのリセット */
img {
  box-shadow: none !important;
  border-radius: 0px !important;
}

/* Swiper のナビゲーションボタン無効時のスタイル */
.swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: default;
}

/* First View フェードインアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 1.2s ease-out forwards;
}