/*
 * PC/スマホ両方で使用するCSS
 */
@font-face {
  font-family: "LINE Seed JP_OTF-Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
}

@font-face {
  font-family: "LINE Seed JP_OTF-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LINESeedJP_OTF_Rg.woff2") format("woff2");
}

:root {
  --chika: #ff8c45;
  --riko: #dd6b7b;
  --kanan: #00b2bd;
  --dia: #ce5a4a;
  --you: #3e93c8;
  --yoshiko: #8593a1;
  --hanamaru: #d9c721;
  --mari: #a956c9;
  --ruby: #e96590;
  --black: #000000;
  --cabaret: #db4d6d;
  --chicago: #595a59;
  --eerie-black: #1e1e1e;
  --moonstone: #33a6b8;
  --white: #ffffff;
  --font-family-line_seed_jp_otf-bold: "LINE Seed JP_OTF-Bold", Helvetica;
  --font-family-line_seed_jp_otf-extrabold: "LINE Seed JP_OTF-ExtraBold", Helvetica;
  --font-family-line_seed_jp_otf-regular: "LINE Seed JP_OTF-Regular", Helvetica;
}

.color-chika {
  color: var(--chika);
}

.color-riko {
  color: var(--riko);
}

.color-kanan {
  color: var(--kanan);
}

.color-dia {
  color: var(--dia);
}

.color-you {
  color: var(--you);
}

.color-yoshiko {
  color: var(--yoshiko);
}

.color-hanamaru {
  color: var(--hanamaru);
}

.color-mari {
  color: var(--mari);
}

.color-ruby {
  color: var(--ruby);
}

body {
  margin: 0;
  /* ページ全体を選択不可に */
  -webkit-user-select: none;
  /* Safari向け */
  -moz-user-select: none;
  /* Firefox向け */
  -ms-user-select: none;
  /* IE/Edge向け */
  user-select: none;
  overflow-x: hidden;
  background: #ffffff";

}

.background-washi {
  background-image: url('/img/background-washi-pattern.png');
  background-repeat: repeat;
}

.page-link a {
  /* 表示済みの紫を黒にする */
  color: black !important;
  text-decoration: none;
}

/* 各ページ下部のページリンク */
.page-link:hover {
  /* ホバー時の下線 */
  text-decoration: underline;
}

/* 公式HPページリンク */
.page-link-2 a {
  color: #33a6b8;
}

.page-link-2 {
  text-decoration: underline;
  color: #33a6b8;
}

.page-link-3 {
  text-decoration: none;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.fade-in.active {
  opacity: 1;
}

/* コンテンツを包むコンテナ */
.content-wrapper {
  min-height: 100vh;
}

/* PC表示 */
@media (min-width: 768px) {
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none !important;
  }

  .pc-only-text {
    display: inline;
  }

  .sp-only-text {
    display: none !important;
  }
}

/* SP表示 */
@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block;
  }

  .pc-only-text {
    display: none !important;
  }

  .sp-only-text {
    display: inline;
  }
}

/* ↓スクロールでふわっと表示するアニメーション用 */

.scroll-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(20px);
}

/* ↑スクロールでふわっと表示するアニメーション用 */

/* ↓ページ遷移アニメーション用 */
/* アニメーションの定義 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* メインコンテンツに適用するクラス */
.page-fade-in {
  animation: fadeInUp 0.8s ease-out;
  /* アニメーション中にちらつきを防ぐ */
  backface-visibility: hidden;
  /* パフォーマンス改善 */
  will-change: opacity, transform;
}

/* ↑ページ遷移アニメーション用 */

/* ↓ハンバーガーメニュー用 */

/* ハンバーガーメニューボタン */
.hamburger {
  position: fixed;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  position: absolute;
  left: 0;
  background-color: #333;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* 両端を丸く！ */
  border-radius: 3px;
}

/* ×印に変化 */
.hamburger.active span {
  /* モーダル表示時は白に！ */
  background-color: white;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* モーダルメニュー */
.hamburger-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  /* 初期状態は透明 */
  opacity: 0;
  /* 初期状態は非表示 */
  visibility: hidden;
  /* ふわっとさせる */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger-modal.active {
  opacity: 1;
  visibility: visible;
}

.menu {
  text-align: center;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.2s ease;
}

.hamburger-modal.active .menu {
  transform: scale(1);
  opacity: 1;
  /* モーダルの後に表示 */
  transition-delay: 0.1s;
}

.menu a {
  display: block;
  text-decoration: none;
  transition: all 0.2s;
  color: var(--white);
  font-family: var(--font-family-line_seed_jp_otf-regular);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アクティブ時のメニューアイテム */
.hamburger-modal.active .menu a {
  opacity: 1;
  transform: translateY(0);
}

/* 各メニュー項目の遅延時間 */
.hamburger-modal.active .menu a:nth-child(1) {
  transition-delay: 0.1s;
}

.hamburger-modal.active .menu a:nth-child(2) {
  transition-delay: 0.2s;
}

.hamburger-modal.active .menu a:nth-child(3) {
  transition-delay: 0.3s;
}

.hamburger-modal.active .menu a:nth-child(4) {
  transition-delay: 0.4s;
}

/* ホバー時のアニメーション調整 */
.menu a:hover {
  transform: scale(1.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ↑ハンバーガーメニュー用 */