@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #f9f2e8;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", sans-serif;
  letter-spacing: 0.2rem;
}

li {
  list-style: none;
}

.container {
  padding: 0 80px;
  color: #28282a;
}

.container h2,
.instagram h2 {
  position: relative;
  padding-bottom: 10px;
  width: 50%;
  margin-top: 10px;
  margin-bottom: 100px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 40px;
  overflow: hidden;
  /* 擬似要素がはみ出さないようにする */
}

/* .concept 内の h2 のスタイル */
.concept h2 {
  position: relative;
  padding-bottom: 10px;
  width: 50%;
  margin-top: 10px;
  margin-bottom: 100px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 40px;
  overflow: hidden;
  /* 擬似要素がはみ出さないようにする */
}

/* .heading1 に適用されるボーダー */
.heading1::before {
  content: "";
  /* 擬似要素に内容を入れる */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  /* 最初は幅0（非表示） */
  height: 1px;
  /* ボーダーの太さ */
  background-color: #28282a;
  /* 黒 */
  transition: width 0.5s ease;
  /* 幅のアニメーション */
}

.heading2::before {
  content: "";
  /* 擬似要素に内容を入れる */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  /* 最初は幅0（非表示） */
  height: 1px;
  /* ボーダーの太さ */
  background-color: #f9f2e8;
  /* ピンク色 */
  transition: width 0.5s ease;
  /* 幅のアニメーション */
}

/* スクロールしてh2が画面に入ったときに適用されるクラス */
h2.showBorder::before {
  width: 100%;
  /* 幅を100%に広げる（アニメーションで広がる） */
}

p {
  font-size: 16px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  /* 左右の要素を分ける */
  align-items: center;
  /* 垂直方向に中央揃え */
  background-color: rgba(255, 255, 255, 0.3);
  /* 半透明の白 */
  backdrop-filter: blur(5px);
  /* 背景をぼかす */
  padding: 0px 20px;
  z-index: 10;
}

.headerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.material-icons-outlined {
  color: #28282a;
  font-size: 42px;
}

.headerLogo {
  width: 50%;
  text-align: center;
}

.headerLogo a {
  color: #28282a;
  font-size: 50px;
  font-family: "Libre Bodoni", serif;
}

.headerRight a:not(:first-child) {
  margin-left: 16px;
  /* 最初のアイコンを除いて、アイコン間に余白 */
}

.headerLeft,
.headerRight {
  width: 20%;
}

.headerRight {
  text-align: right;
}

a {
  text-decoration: none;
}

.slider-container {
  width: 100%;
  /* overflow: hidden; */
  /* 画像がスライドしていく範囲外を隠す */
  position: relative;
}

.firstView {
  /* display: flex; */
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.firstView .slide {
  position: relative;
  /* 画像内でボタンを絶対配置できるようにする */
}

.slide {
  position: relative;
  width: 100%;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.slick-prev,
.slick-next {
  display: none;
}

.firstView img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.itemList {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  /* アイテムがはみ出すと次の行に折り返す */
  justify-content: center;
  align-items: center;
  /* 垂直方向に中央揃え（必要に応じて） */
  margin: 0 auto;
  /* コンテナを中央に配置 */
}

.itemList li {
  padding: 10px;
  /* アイテム内に余白を追加 */
  text-align: center;
  /* テキストを中央揃え */
  width: 25%;
}

.itemList li a {
  display: block;
  /* <a>タグをブロック要素にして、クリック範囲を広げる */
  text-decoration: none;
  /* リンクの下線を削除 */
  color: inherit;
  /* リンク色を親の色に合わせる */
}

.itemText {
  font-size: 30px;
  font-weight: bold;
}

.itemList p {
  padding: 10px 0;
}

.itemPrice {
  font-size: 18px;
}

.cartBtn {
  background-color: #28282a;
  color: #f9f2e8;
  border: none;
  padding: 10px 75px;
  margin-top: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* ホバー時の背景色変更 */
}

.cartBtn:hover {
  background-color: #000;
  /* ホバー時の色 */
}

.itemList img {
  max-width: 100%;
  /* 画像をアイテムの幅に合わせて縮小 */
}

.concept {
  margin-top: 320px;
  padding-top: 40px;
  padding-bottom: 10px;
  background-color: #7f3a2b;
  position: relative;
  height: 1500px;
}

.concept h2 {
  color: #f9f2e8;
}

.concept .img1 {
  position: absolute;
  width: 74%;
  top: 10%;
  left: 300px;
  z-index: 2;
}

.concept .img2 {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 40%;
  z-index: 3;
}

.conceptText {
  position: absolute;
  right: 100px;
  bottom: 80px;
  width: 600px;
  overflow-wrap: break-word;
  color: #f9f2e8;
}

.conceptText h3 {
  padding-bottom: 42px;
  font-size: 24px;
}

.conceptText p {
  letter-spacing: 0.2rem;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.4rem;
  padding: 8px;
}

.membership {
  position: relative;
  /* 絶対配置のために親要素を相対的に設定 */
  margin-top: 20px;
  height: 800px;
  background-image: url(./img/MEMBER-SHIP.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.membershipTittle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #f9f2e8;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  text-shadow: 2px 3px 4px rgba(40, 40, 42, 0.4);
}

.membershipText {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  color: #28282a;
  font-size: 18px;
  text-align: center;
  line-height: 1.6;
}

.membershipText p {
  font-size: 18px;
}

.membershipBtn {
  position: absolute;
  bottom: 20px;
  /* 親要素の下から20pxの位置 */
  right: 0px;
  /* 親要素の右から40pxの位置 */
  background-color: #28282a;
  /* ボタンの背景色 */
  color: #f9f2e8;
  /* ボタンの文字色 */
  padding: 15px 60px;
  /* ボタンのパディング */
  font-size: 14px;
  /* フォントサイズ */
  border: none;
  /* 枠線を消す */
  cursor: pointer;
  /* カーソルをポインターに変更 */
  text-align: center;
  /* テキストを中央に配置 */
  margin-right: 70px;
}

/* ここからinstagram */
.instagram {
  margin-top: 160px;
  margin-bottom: 150px;
}

.instagram h2 {
  margin: 0 80px 80px;
}

/* Instagram ギャラリーの全体スタイル */
.instagramLoop {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* 横スクロールを隠す */
}

/* ulのスタイル（アニメーションの適用） */
.instagramLoop ul {
  display: flex;
  /* リストアイテムを横並びに */
  padding: 0;
  margin: 0;
  animation: scrollRightToLeft 50s linear infinite;
  /* アニメーションを適用 */
}

/* 個々の画像アイテムのスタイル */
.instagramItem {
  position: relative;
  flex: 0 0 auto;
}

/* 画像のスタイル */
.instagramItem img {
  display: block;
  transition: transform 0.3s ease;
  /* ホバー時にアニメーション */
  cursor: pointer;
}

/* 画像にホバー効果を追加 */
.instagramItem:hover img {
  transform: scale(1.1);
  /* 画像が少し拡大する */
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(0%);
    /* 初期状態は右外に配置 */
  }

  100% {
    transform: translateX(-100%);
    /* 最終状態は左外に配置 */
  }
}

/* ここからフッター */
footer {
  padding-bottom: 200px;
}

.footerLogo {
  color: #28282a;
  font-size: 50px;
  font-family: "Libre Bodoni", serif;
  text-align: center;
  padding-bottom: 10px;
}

.footerTel {
  text-align: center;
}

.footerTel a {
  color: #28282a;
}

.footerItem {
  display: flex;
  justify-content: center;
}

.footerItem li {
  padding: 20px;
}

/* フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* .fade クラスは最初に透明状態で表示 */
.fade {
  opacity: 0;
  /* 最初は透明 */
  visibility: hidden;
  /* 非表示にしておく */
  transition: opacity 1s ease-in-out;
  /* フェードインアニメーション */
}

/* active クラスが追加されるときにフェードイン */
.fade.active {
  visibility: visible;
  opacity: 1;
  /* アクティブ時に透明度が1になり、フェードイン */
  animation: fadeIn 1s ease-out forwards;
  /* フェードインアニメーション */
}

/* ここからfirstview */
@keyframes fadeUp {
  0% {
    transform: translateY(20px);
    /* 初めは下に配置 */
    opacity: 0;
    /* 初期状態は透明 */
  }

  100% {
    transform: translateY(0);
    /* 最終的に元の位置に戻る */
    opacity: 1;
    /* 最終的に完全に表示される */
  }
}

/* fade-upクラスを使ってアニメーションを適用 */
.fade-up {
  opacity: 0;
  /* 初めは透明 */
  transform: translateY(20px);
  /* 下から開始 */
  animation: fadeUp 1s ease-out forwards;
  /* アニメーションを適用 */
  animation-delay: 0.5s;
  /* 0.5秒遅れてアニメーション開始 */
}

/* アニメーションが終わった後に保持する状態 */
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}