/*==============================================
WordPressで必須
Theme Name: Cafe 1117
Theme URI: https://shiho0718.site
Author: 志帆
Description: 渋谷の落ち着いたカフェ「Cafe1117」
Version: 1.0
==============================================*/


/*==============================================
共通
==============================================*/

html {
  overflow-x: hidden; /*横スクロールを無効*/
  scroll-behavior: smooth; /*ページ内リンクをクリックしたときスムーズにスクロール*/
}

body {
  background: #ffffff; /*全体の背景*/
  margin: 0; /*デフォルトの余白をリセット*/
  padding: 0; /*デフォルトの余白をリセット*/
  overflow-x: hidden; /*念のため横スクロールを再度無効化*/
}

section {
  margin: 4rem 0; /*各セクションの上下に余白、左右はレイアウト側で調整 */
  background: #ffffff; /*各セクションの背景*/
}


/*==============================================
ローディング
==============================================*/

/* ローディング画面：画面全体に表示し、フェードアウトで非表示にする */
#loadingScreen {
  position: fixed; /* 画面に固定表示（スクロールしても動かない） */
  inset: 0; /* 上下左右すべて0で全画面を覆う */
  background: #ffffff; /* 背景色は白 */
  display: flex; /* 中央寄せのためFlexboxを使用 */
  justify-content: center; /* 横方向に中央寄せ */
  align-items: center; /* 縦方向に中央寄せ */
  z-index: 9999; /* 最前面に表示 */
  opacity: 1; /* 表示状態（フェードアウトの起点） */
  visibility: visible; /* 非表示アニメーション用に併用 */
  pointer-events: auto; /* 他の要素の操作をブロック */
  transition: opacity 2s ease, visibility 0s linear 2s; /* 2秒でフェードアウト → その後非表示 */
}

/* .loadedクラスが付くとローディング画面をフェードアウト＆非表示にする */
#loadingScreen.loaded {
  opacity: 0;           /* 透明にしてフェードアウト */
  pointer-events: none; /* クリックなどの操作を無効化 */
  visibility: hidden;   /* 完全に非表示にして画面から取り除く */
}

/*ロゴを包むローディング画面の中央のボックス*/
#loadingBox {
  width: 150px;  /* ボックスの横幅（ロゴの表示サイズを制御）*/
  height: 150px; /* ボックスの高さ（ロゴの表示サイズを制御）*/
}

/*ローディング画面のロゴ画像そのものにアニメーションをかける*/
#loadingLogo {
  width: 100%;              /* 親要素（#loadingBox）の幅に合わせる */
  height: 100%;             /* 親要素の高さに合わせる */
  transform: scale(0.6);    /* 初期状態は60%に縮小 */
  opacity: 0;               /* 初期状態は透明（見えない） */
  filter: grayscale(100%);  /* 初期状態は白黒（グレースケール） */
  animation: logoReveal 1.5s ease-out forwards; /* アニメーションを1.5秒で実行 */
}

/*ロゴが登場するときのアニメーションの動き*/
@keyframes logoReveal {
  0% {
    transform: scale(0.6);       /* 小さく縮んだ状態（60%） */
    opacity: 0;                  /* 完全に透明 */
    filter: grayscale(100%);     /* 白黒（グレースケール） */
  }

  100% {
    transform: scale(1.2);       /* 少し大きく拡大（120%） */
    opacity: 1;                  /* 完全に表示 */
    filter: grayscale(0%);       /* フルカラーに戻す */
  }
}

/* ローディング中はトップページの主要要素を非表示＆下にずらす */
body.home:not(.loaded) header,
body.home:not(.loaded) main,
body.home:not(.loaded) footer,
body.home:not(.loaded) .logo-container,
body.home:not(.loaded) .logo-message {
  opacity: 0; /* 完全に透明にして非表示 */
  transform: translateY(10px); /* 少し下にずらして後でふわっと上がる演出に */
  transition: opacity 0.8s ease, transform 0.8s ease; /* 表示時のアニメーション設定 */
  pointer-events: none; /* 操作を無効化（クリックなどを防ぐ） */
}

/* ローディング完了後に表示*/
body.home.loaded header,
body.home.loaded main,
body.home.loaded footer,
body.home.loaded .logo-container,
body.home.loaded .logo-message{
  opacity: 1; /* 完全に表示*/
  transform: translateY(0); /* 元の位置に戻す（ふわっと上がる） */
  pointer-events: auto; /* 操作を有効化（クリックなど可能に） */
  transition: opacity 0.8s ease 2.2s, transform 0.8s ease 2.2s; /* 2.2秒後に0.8秒かけてフェードイン */ /* 同じく2.2秒後にふわっと上がる */
}

/* ローディング中は非表示（サイドボタン） */
body.home:not(.loaded) #side-btn {
  opacity: 0; /* 完全に透明にして非表示 */
  pointer-events: none; /* クリックなどの操作を無効化 */
  transition: opacity 0.6s ease, transform 0.6s ease; /*アニメーション（0.6秒）*/
}

/* ローディング完了後に表示（サイドボタン）*/
body.home.loaded #side-btn {
  opacity: 1; /* 完全に表示*/
  pointer-events: auto; /* クリックやホバーなどの操作を有効化 */
  transition: opacity 0.6s ease 2.2s, transform 0.6s ease 2.2s; /*アニメーション（2.2秒）*/
}


/*==============================================
メインビジュアル
==============================================*/

/*背景動画とメインビジュアル*/
.video-bg,
.main-visual {
  position: relative; /* 子要素の絶対配置の基準にする */
  width: 100%; /* 横幅いっぱいに広げる */
  height: 100vh; /* 高さをブラウザの表示領域いっぱいにする（1画面分） */
  overflow: hidden; /* はみ出した部分を隠す（動画や画像の切り取りに使う） */
}

/*メインビジュアル（共通）*/
.main-visual {
  background: #ffffff; /*背景色*/
}

/*背景動画や背景画像が次のセクションの白背景と自然に繋がるような演出*/
.main-visual::after {
  content: ""; /* 疑似要素を生成（装飾用） */
  position: absolute; /* 親要素（.main-visual）を基準に絶対配置 */
  bottom: 0; /* 下端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅いっぱいに広げる */
  height: 50px; /* 高さ50px*/
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #ffffff 100%); /* 上は透明→下は白へのグラデーション */
  z-index: 2; /* 他の要素より前面に表示*/
  pointer-events: none; /* この疑似要素はクリックなどの操作を無効化 */
}

/*背景動画（実際）*/
#mainVideo {
  position: absolute; /* 親要素（.main-visualなど）を基準に絶対配置 */
  top: 0; /* 左上にピタッと配置 */
  left: 0; /* 左上にピタッと配置 */
  width: 100%; /* 横幅いっぱいに広げる */
  height: 100%; /* 高さも親要素に合わせて全体表示 */
  object-fit: cover; /* アスペクト比を保ちつつ、はみ出してもOKで全体をカバー */
  object-position: bottom; /* 動画の表示位置を下寄せにする（下を優先して表示） */
  z-index: 1; /* 背景として他の要素より後ろに配置（::afterよりも下） */
}

/*メインビジュアル（個別）*/
#mainVisual {
  position: relative; /* 子要素の絶対配置の基準にする */
}

/*ロゴ画像とメッセージ*/
.logo-container {
  position: absolute;         /* 親要素（たとえば #mainVisual）を基準に絶対配置 */
  top: 35%;                   /* 上から35%の位置に配置 */
  left: 0;
  right: 0;                   /* 左右を0にして、横幅いっぱいに広げる */
  transform: translateY(-50%);/* 上方向に50%ずらして、縦位置を中央寄せに調整 */
  z-index: 10;                /* 他の要素より前面に表示（ロゴ画像を目立たせる） */
  display: flex;              /* 中の要素をフレックスボックスで並べる */
  flex-direction: column;     /* 縦に並べる（ロゴ画像＋メッセージ） */
  align-items: flex-start;    /* 左寄せに配置 */
  gap: 1.2rem;                /* 要素間のすき間を1.2remに設定 */
  margin-left: 80px;          /* 左に80pxの余白（画面端から少し内側に） */
  padding: 0;                 /* パディングなし */
}

/*ロゴ画像*/
.logo-container img {
  width: 500px;         /* 画像の横幅を500ピクセルに固定 */
  height: auto;         /* 高さは画像の比率を保ったまま自動調整 */
  display: block;       /* インライン要素の画像をブロック要素にして、余計な余白をなくす */
  margin-left: 0;       /* 左側の余白をゼロに設定（左寄せ） */
}

/*メッセージ*/
.logo-message {
  font-size: 1.4rem;
  line-height: 1.2;
  color: white;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  max-width: 1000px; /* 最大幅を1000pxに制限（それ以上は広がらない） */
  white-space: nowrap; /*1行で表示したい場合は以下の3点セット(PC用）*/
  overflow: hidden; 
  text-overflow: ellipsis; 
  margin-left: 0; /* 左側の余白をゼロに設定（左寄せ） */
}


/*==============================================
ナビゲーション
==============================================*/

/*ナビ全体の位置やアニメーションを制御する外枠 */
.nav-container {
  position: absolute; /* 親要素（たとえば #mainVisual）を基準に絶対配置 */
  top: 2rem; /* 親要素の上端から2rem（約32px）下に配置 */
  right: 5%; /* 親要素の右端から5%内側に配置（右寄せ） */
  z-index: 10; /* 他の要素より前面に表示（重なり順を調整） */
  display: flex; /* 子要素をフレックスボックスで並べる */
  flex-direction: column; /* 子要素を縦に並べる（上から下） */
  align-items: flex-end; /* 子要素を縦に並べる（上から下） */
  gap: 1.25rem; /* 子要素の間に1.25remの間隔を空ける */
  opacity: 0; /* 初期状態では透明（非表示） */
  transform: translateY(10px); /* 少し下にずらしておいて、あとでふわっと上がる演出に使う */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 表示時に透明度と位置をなめらかに変化させる（0.8秒かけて） */
  pointer-events: none; /* 非表示中はクリックやホバーを無効にする（操作できないように） */
}

/*ローディング画面が終わって、bodyにloadedクラスが追加された瞬間に、ナビゲーションがふわっと表示*/
body.loaded .nav-container {
  opacity: 1; /* 完全に表示*/
  transform: translateY(0); /* 元の位置に戻す（ふわっと上がる） */
  pointer-events: auto; /* クリックやホバーなどの操作を有効にする */
}

/*ナビの中にあるリンクの並び方を整える部分*/
.main-nav ul {
  list-style: none; /* デフォルトの「・」や番号などのリストマーカーを消す */
  display: flex; /* フレックスボックスで子要素（li）を並べる */
  flex-direction: column; /* 子要素を縦に並べる（上から下） */
  align-items: flex-start; /* 子要素を左寄せに揃える */
  gap: 0.75rem; /* 各リスト項目の間に0.75rem（約12px）の余白をつける */
  margin: 0;  /* デフォルトの外側の余白をリセット */
  padding: 0;  /* デフォルトの内側の余白もリセット */
}

/*各ナビの装飾*/
.main-nav a {
  color: #f5f5f5; /* リンクの文字色を明るいグレー（ほぼ白）に設定 */
  text-decoration: none; /* 下線を消してスッキリ見せる */
  font-weight: bold; /* 文字を太くして目立たせる */
  font-size: 1.25rem; /* フォントサイズを1.25rem（約20px）に設定 */
  line-height: 1.5; /* 行間を文字サイズの1.5倍にして読みやすくする */
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* 黒っぽい影を文字の下に落として、背景と区別しやすくする */
  transition: color 0.3s ease; /* ホバー時などに色が変わるとき、0.3秒かけてなめらかに変化させる */
}

/*各ナビにマウスカーソルを当てたとき*/
.main-nav a:hover {
  color: #a9a8a8;
}


/*==============================================
アバウトセクション
==============================================*/

/* アバウトセクション全体（画像+テキスト+画像） */
.about-container {
  display: flex; /* 子要素（画像+テキスト+画像）を横並びにする（フレックスボックス） */
  justify-content: center; /* 子要素（画像+テキスト+画像）を中央寄せに配置（左右のバランスを取る） */
  align-items: flex-start; /* 子要素（画像+テキスト+画像）の上端を揃える（縦方向の揃え方） */
  gap: 50px; /* 子要素（画像+テキスト+画像）の間に50pxのスペースを空ける*/
  padding: 0 30px; /* 左右に30pxの内側余白で、画面端との距離を確保 */
}

/* アバウトセクションの見出し*/
.about-text h2 {
  color: #666;
  font-family: "Playwrite NO", cursive;
  font-weight: normal;
  font-size: 3rem; 
  margin-bottom: 40px; /*見出しと本文との余白*/
  text-align: center; /*中央揃え*/
}

/* アバウトセクションの本文*/
.about-text p {
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center; /*中央揃え*/
}

/* アバウトセクションの画像全体*/
.about-images {
  display: flex; /* 子要素（画像）をフレックスボックスで並べる */
  flex-direction: column; /* 子要素を縦に並べる（上から下へ） */
  gap: 60px; /* 各画像の間に60pxのスペースを空ける */
  position: relative; /* 子要素の絶対配置の基準にするための設定（あとで画像をずらすため） */
  max-width: 200px; /* 最大幅を200pxに制限（画像の列が広がりすぎないように） */
}

/* アバウトセクションの各画像*/
.about-images img {
  display: block; /*インライン要素（img）の余白をなくして、画像をブロック要素として扱う（下に隙間ができないように）*/
  width: 90%; /*親要素の幅（.about-images）に対して90%のサイズで表示*/
  margin: 0 auto; /*左右の余白を自動で均等にして、画像を中央に配置*/
  height: auto; /*幅に合わせて高さを自動調整（縦横比を保つ）*/
  object-fit: cover; /*枠いっぱいに画像を表示し、はみ出す部分は切り取る（見た目を整える）*/

  /* マスク（画像の上下左右をグラデーションでぼかす） */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%),
                      linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-composite: intersect;
  mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%),
               linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-composite: intersect;

  /* マスクの位置・サイズ設定（各画像の中央に配置して全体を覆う）*/
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;

  /* 初期状態（非表示）→ 後でふわっと表示されるようにする */
  opacity: 0; /* 最初は透明*/
  transition: opacity 1s ease; /* 表示されるときに1秒かけてなめらかにフェードイン */
}

/* 左列ランダム配置 */
.about-images.left img:nth-child(1) {
  transform: translateX(-30px) translateY(10px) scale(1.2);
}
.about-images.left img:nth-child(2) {
  transform: translateX(50px) translateY(0px) scale(1.1);
}
.about-images.left img:nth-child(3) {
  transform: translateX(-100px) translateY(0px) scale(1.2);
}

/* 右列ランダム配置 */
.about-images.right img:nth-child(1) {
  transform: translateX(35px) translateY(0px) scale(1.1);
}
.about-images.right img:nth-child(2) {
  transform: translateX(-40px) translateY(-25px) scale(1.2);
}
.about-images.right img:nth-child(3) {
  transform: translateX(100px) translateY(-25px) scale(1.1);
}

/* 表示状態 JavaScriptに.fade-inクラスがつくとふんわり表示*/
.about-images img.fade-in {
  opacity: 1;
}


/*==============================================
メニューセクション
==============================================*/

/*メニューセクション全体*/
.menu-section {
  display: flex; /* 子要素（.menu-block）を横並びにする */
  margin: 0; /* 外側の余白なし */
  padding: 0; /* 内側の余白なし */
}

/*各メニュー*/
.menu-block {
  position: relative;  /* 中の要素を絶対配置できるようにするための基準(親要素)*/
  flex: 1;  /* 親の幅を等分に分ける（複数あれば均等に並ぶ） */
  aspect-ratio: 3 / 4;  /* 幅:高さ = 3:4 の比率を保つ（縦長のカード） */
  background-size: cover; /* 背景画像を枠いっぱいに表示（切り取りOK） */
  background-position: center; /* 背景画像の中心を表示 */
  margin: 0;
  padding: 0;
  overflow: hidden;  /* 中の要素がはみ出さないようにする */
  cursor: pointer; /* ホバー時にポインター（クリックできそうな見た目）にする */
}

/*各メニューの装飾*/
.menu-block::after {
  content: ""; /* 疑似要素を生成*/
  position: absolute; /* 親要素（.menu-block）に対して絶対配置 */
  inset: 0; /* 上下左右すべて0で親要素にぴったり重ねる */
  background-color: rgba(255, 255, 255, 0); /* 初期状態は透明な白*/
  transition: background-color 0.3s ease; /* 背景色がなめらかに変化する */
  z-index: 1; /* 背景画像より上、テキストより下に表示（テキストにz-index:2を指定）*/
}

/*各メニューの装飾にマウスカーソルを当てたとき*/
.menu-block:hover::after {
  background-color: rgba(255, 255, 255, 0.2); /*うっすら白く光るエフェクトを表示 */
}

/*メニューの中のテキスト全体*/
.menu-text {
  display: flex; /* 子要素（.menu-label、.menu-subtext）をフレックスで並べる */
  flex-direction: column; /* 縦方向に並べる（上から下へ） */
  align-items: center; /* 横方向の中央揃え */
  transform: translateY(70px); /* 下に70pxずらす*/
  z-index: 2; /*.menu-block::afterより前面に表示 */
}

/*メニューの中のタイトル*/
.menu-label {
  font-family: "Playwrite NO", cursive;
  font-size: 3rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  margin-bottom: 0.5rem; /*サブタイトルとの間の余白*/
}

/*メニューの中のサブタイトル*/
.menu-subtext {
  position: relative; /*::afterの親要素*/
  font-size: 1.3rem; 
  color: #fff; 
  text-decoration: none; /*デフォルトの下線を消す*/
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /*文字にうっすら影をつけて読みやすく*/
  pointer-events: auto; /*ホバーやクリックを有効にする（念のため）*/
  white-space: nowrap; /*テキストの折り返しを防ぐ（1行に収める）*/
  display: inline-block; /*幅や高さを調整しやすくする*/
  z-index: 2; /*.menu-block::afterより前面に表示*/
}

/*サブタイトルに下線*/
.menu-subtext::after {
  content: ""; /*疑似要素を生成*/
  position: absolute; /* 親要素（.menu-subtext）に対して絶対配置 */
  left: 0; /* ←サブタイトルの左端にピタッとくっつける */
  bottom: -4px; /* テキストの下に少し余白を空けて配置 */
  width: 100%; /* テキストの幅に合わせて下線を引く */
  height: 2px; /* 下線の太さ */
  background: #fff; /* 白い下線 */
  transform-origin: center; /* アニメーションの起点を中央に（拡縮演出用） */
}

/*文字全体を包むWrapper*/
.wave-wrapper {
  display: inline-block; //*幅や高さを調整しやすくなる*/
}

/*1文字ずつにアニメーションをかけるためのクラス*/
.wave-char {
  display: inline-block; /*1文字ごとに上下に動かせるように*/
  animation: none; /*hoverするまで動かない*/
}

/*.menu-blockにマウスを乗せたとき、中の.wave-charにアニメーションを適用*/
.menu-block:hover .wave-char {
  animation: wave-char 1s ease-in-out infinite; /*1sかけて波のように繰り返し上下に動く*/
}

/*上下にふわっと動く“波のようなアニメーション*/
  @keyframes wave-char {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/*.menu-blockの中にあるリンク要素*/
.menu-link {
  flex: 1; /* 親要素（たとえば .menu-block）内で、残りのスペースを均等に広がって埋める */
  display: block; /* 全体をクリック可能にする */
  text-decoration: none; /* 下線を消す（デフォルト） */
  cursor: pointer; /* 手のカーソルにする */
}


/*==============================================
ニュースセクション
==============================================*/

/*ニュースセクション全体*/
.news-section {
  padding: 2rem 1rem; /* 上下に広めの余白、左右に少し余白 */
  background-color: #ffffff;
}

/*ニュースの見出し(h2)*/
.section-title {
  color: #666;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  margin-bottom: 1.5rem; /*ニュース一覧（.news-list）との間に余白をつける */
  font-family: "Playwrite NO", cursive;
}

/*ニュース一覧全体（h2見出し除く）*/
.news-list {
  max-width: 960px; /* 最大幅を制限（中央寄せ） */
  margin: 0 auto; /* 左右中央に配置 */
  border-top: 1px solid #666; /* 上に区切り線 */
}

/*各ニュースの記事*/
.news-item {
  padding: 1rem 0; /* 上下に余白をつける */
  border-bottom: 1px solid #666; /* 下に区切り線 */
}

/*各ニュースの投稿日*/
.news-date {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.3rem; /*各ニュースのタイトル（.news-title）との間に余白をつける */
}

/*各ニュースのタイトル*/
.news-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #666;
  margin-bottom: 0.3rem; /*各ニュースの本文（.news-text）との間に余白をつける */
}

/*各ニュースの本文*/
.news-text {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0.6rem; /*各下線との間に余白をつける*/
}


/*==============================================
スクロールギャラリー
==============================================*/

/*スクロールギャラリー全体*/
.scroll-gallery {
  position: relative; /* 子要素（スライド）を絶対配置するための基準にする */
  width: 100%; /* 横幅を画面いっぱいに */
  height: 100vh; /* 高さをビューポートの高さに合わせる（全画面） */
  overflow: hidden; /* スライドがはみ出しても表示しない */
  /* 上下にフェードアウトするマスクをかける（中央が黒＝表示、上下が透明＝非表示） */
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

/* 各スライドのスタイル */
.gallery-slide {
  position: absolute; /* 親要素（.scroll-gallery）を基準に重ねて配置 */
  inset: 0; /* top, right, bottom, left をすべて 0 にして全体を覆う */
  background-size: cover; /* 背景画像を要素にフィットさせる */
  background-position: center; /* 背景画像を中央に配置 */
  opacity: 0; /* 初期状態では非表示 */
  transition: opacity 1s ease; /* opacity の変化を1秒かけて滑らかに */
  z-index: 0; /* 他より下に表示 */
}

/*JavaScriptにactiveクラスがつくと適用されるスタイル */
.gallery-slide.active {
  opacity: 1; /* 表示する */
  z-index: 1; /* 他のスライドより前面に表示 */
}

/*スライドのテキストデザイン */
.gallery-slide .slide-text {
  position: absolute; /*親要素（.scroll-gallery）を基準に重ねて配置*/
  bottom: 60px; /* 下から60pxの位置に配置 */
  left: 40px; /* 左から40pxの位置に配置 */
  color: #ffffff;         
  font-size: 1.1rem;
  font-weight: 300;       
  line-height: 1.6;      
  letter-spacing: 0.5px; /* 文字間隔を少し広げてスタイリッシュに */
  text-shadow: 0 4px 10px rgba(0,0,0,0.8); /* 黒い影を文字の下に落として、背景と重なっても読みやすくする */
  z-index: 2; /* スライド本体より前面に表示（画像より上） */
  pointer-events: none; /* テキストは見えるけどクリックやhoverの対象にならない */
}


/*==============================================
アクセスセクション
==============================================*/

/* アクセスセクション全体 */
.access-section {
  padding: 60px 20px; /* 上下に60px、左右に20pxの余白 */
  background-color: #fff;       
  color: #666;                 
}

/* アクセスセクションの見出し */
.access-section h2.bar {
  color: #666;
  font-family: "Playwrite NO", cursive;
  font-weight: normal;
  font-size: 3rem;
  margin-bottom: 40px; /* 見出しの下に余白 */
  text-align: center;
}

/* アクセス情報と地図の2カラムレイアウト */
.flex-container {
  display: flex; /* 子要素(アクセス情報と地図)を横並びにする*/
  flex-wrap: wrap; /* はみ出すときは折り返す */           
  justify-content: center; /* 中央揃えに配置 */
  gap: 0; /* 子要素(アクセス情報と地図)の間のすき間はゼロ */                      
  width: 100%; /* 横幅を親要素いっぱいに広げる */
  max-width: 1200px; /* 最大幅を1200pxに制限（大画面での見た目を整える） */
  margin: 0 auto; /* 左右中央寄せ */
  padding: 0; /* 左右に余白をつけて、端にくっつかないようにする */
  box-sizing: border-box; /* paddingやborderを含めてwidthを計算 */
}

/* アクセス情報と地図の共通スタイル */
.access-info,
.access-map {
  flex: 0 0 auto; /* 幅は固定。余白があっても広がらず、狭くなっても縮まない（widthに従う） */             
  width: 50%; /* 親要素（.flex-container）の幅の50%を使って2カラムにする */                   
  max-width: 600px; /* 最大でも600pxまでに制限（大画面で広がりすぎないように） */
  padding: 16px; /* 内側に16pxの余白をつけて、内容が端にくっつかないようにする */
  margin: 0; /* 外側の余白はなし（gapで調整する前提） */
  background-color: #fff;
  border-radius: 0px; /* 角を丸めず、シャープな印象にする */
  box-sizing: border-box; /* paddingやborderを含めてwidthを計算。レイアウトが崩れにくくなる */
}

/* アクセス情報のみ */
.access-info {
  font-size: 1.25rem;
}

/* アクセス情報のリンク自体*/
.access-info .add {
  text-decoration: none; /* 下線を消して、リンクっぽさを抑える（見た目をスッキリ） */
  color: inherit; /* 親要素の文字色（#666など）をそのまま使う */
  display: block; /* ブロック要素にして、リンク全体をクリックできるようにする */
  margin-bottom: 1rem; /* 下に余白をつけて、次の要素と間隔をあける */
}

/* アクセス情報のリンク内のテキスト（住所） */
.access-info .add div {
  line-height: 1.6; /* 行間を1.6倍*/
}

/* アクセス情報の本文（電話番号などのテキスト） */
.access-info p {
  margin: 0.5rem 0; /* 上下に0.5rem（約8px）の余白をつけて段落同士の間隔を整える */
}

/* アクセス情報の本文のリンク（電話番号など） */
.access-info p a {
  text-decoration: none; /* 下線を消して、リンクっぽさを抑える（見た目をスッキリ） */
  color: inherit; /* 親要素の文字色（#666など）をそのまま使う */
}

/* 地図全体のみ */
.access-map {
  flex-basis: 480px; /* 幅の基準サイズを480pxに設定*/
  display: flex; /* 中の画像を中央に配置するためにFlexboxを使用 */
  align-items: center; /* 垂直方向に中央揃え */
  justify-content: center; /* 水平方向に中央揃え */
  height: auto; /* 高さは中身に合わせて自動調整 */
  padding: 32px; /* 内側に32pxの余白をつけて、画像が端にくっつかないようにする */
}

/* 地図中の画像のみ */
.access-map img {
  width: 100%; /* 親要素（.access-map）の幅にぴったり合わせる */
  max-width: 100%; /* 幅が親を超えないように制限（念のため） */
  height: auto; /* 高さは画像の比率を保ったまま自動調整 */
  object-fit: contain; /* 画像全体を表示しつつ、縦横比を維持（切り取らずに収める） */
  display: block; /* インライン要素の余白をなくすためにブロック要素にする */
  border-radius: 4px; /* 画像の角を少し丸くして、やわらかい印象に(背景も白だから意味ないかも) */
}

/* ロゴと店名の共通 */
.logo-title {
  display: flex; /* ロゴと店名を横並びにする（Flexbox） */
  align-items: center; /* 垂直方向に中央揃え（ロゴとテキストの高さを揃える） */
  gap: 12px; /* ロゴと店名の間に12pxのすき間を空ける */
  margin-bottom: 1.2rem; /* 下に余白をつけて、次の要素と間隔をあける */
}

/*ロゴのみ*/
.logo-title .logo-icon {
  width: 100px; /* ロゴ画像の横幅を100pxに固定 */
  height: auto; /* 高さは画像の比率を保って自動調整 */
  display: block; /* インライン画像の余白をなくすためにブロック要素にする */
}

/*店名のみ*/
.logo-title h3 {
  font-size: 2.2rem;
  font-weight: normal;
  letter-spacing: 0.02em; /* 文字間を少しだけ広げて、読みやすく＆スタイリッシュに */
  margin: 0; /* デフォルトの余白をリセットして、整った配置にする */
  color: #666;
}

/* アニメーション用の初期状態（非表示＆下にずらす）Javascript関連 */
.iv {
  opacity: 0; /* 最初は透明にして見えない状態にする */
  transform: translateY(20px); /* 下に20pxずらして、あとでふわっと上がってくるようにする */
  transition: opacity 2s ease-out, transform 2s ease-out; /* 透明度と位置を2秒かけてなめらかに変化させる */ 
}

/* アニメーション開始時の状態（表示＆元の位置）Javascript関連 */
.iv.animate {
  opacity: 1; /* 完全に表示する */
  transform: translateY(0); /* 元の位置に戻す（上にスライド） */
}

/* Google Map ボタンのリスト全体（ul） */
.btn-list {
  list-style: none;     /* リストマーカー（・）を非表示にする */
  padding: 0;           /* デフォルトの内側余白をリセット */
  margin: 40px 0;       /* 上下に40pxの余白をつけて、周囲と間隔をあける */
  text-align: left;     /* ボタンを左寄せに配置（必要に応じて center に変更可） */
}

/* Google Map ボタン（aタグ） */
.btn-list .btn {
  display: inline-block;        /* インライン要素として表示しつつ、幅や高さを指定可能にする */
  padding: 10px 20px;           /* 上下10px、左右20pxの内側余白でボタンのサイズ感を調整 */
  background-color: #fff;     /* 背景は白でシンプルに */
  color: #666;                /* 文字色はグレーで落ち着いた印象に */
  border: 2px solid #666;     /* 枠線もグレーで統一感を出す */
  border-radius: 6px;           /* 角を少し丸めて、やわらかい印象に */
  font-weight: 700;             /* 文字を太くしてボタンらしさを強調 */
  font-size: 1rem;              /* フォントサイズは標準（約16px） */
  text-decoration: none;        /* 下線を消して、ボタンらしい見た目に */
  transition:                   /* hover時の変化をなめらかにする */
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影をつけて立体感を出す */
}

/* Google Map ボタンにカーソルを当てたときのスタイル */
.btn-list .btn:hover {
  background-color: #666;       /* 背景をグレーに変更してホバー感を出す */
  color: #fff;                  /* 文字色を白にしてコントラストを強調 */
  border-color: #666;           /* 枠線の色はそのままグレー */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 影を強調して浮き上がるような効果を出す */
  transform: translateY(-2px);  /* 少し上に浮かせてクリック感を演出 */
}


/*==============================================
フッターセクション
==============================================*/

/*フッター全体*/
footer {
  color: #fff;
  padding: 40px 20px 20px; /* 上40px、左右20px、下20pxの内側余白 */
  font-size: 0.9rem;
  background-image: url('../img/footer-bg.webp'); /* 背景画像を設定（動画の代替用） */
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
  background-size: cover; /* 背景画像を要素全体にフィットさせる */
  background-position: center; /* 背景画像の位置を中央に設定 */
  position: relative; /* 子要素の絶対配置の基準にする */
  overflow: hidden; /* はみ出した要素（例：動画）を非表示にする */
}

/* 背景動画のみ */
.footer-bg {
  position: absolute; /* フッター内で絶対配置（footerの子要素） */
  top: 0;
  left: 0;
  width: 100%; /* 横幅いっぱいに広げる */
  height: 100%; /* 高さも親要素に合わせて広げる */
  object-fit: cover; /* 要素の縦横比を保ちつつ、全体をカバーするように表示 */
  z-index: 0; /* 背面に配置（テキストなどより下） */
  pointer-events: none; /* 動画があってもリンクやボタンの操作を邪魔しない */

/* 下に行くほど濃くなるマスクをかけて、背景が自然にフェードインするように見せる */
mask-image: linear-gradient(to bottom,
  rgba(0, 0, 0, 0) 0%, /* 完全に透明（上端） */
  rgba(0, 0, 0, 0.1) 5%, /* 少しずつ暗く(テキストが読みやすくなる) */
  rgba(0, 0, 0, 0.3) 10%,
  rgba(0, 0, 0, 0.6) 15%,
  rgba(0, 0, 0, 0.85) 20%,
  rgba(0, 0, 0, 1) 25%, /* 完全に不透明（ここから下） */
  rgba(0, 0, 0, 1) 100%);
/* Safari用のベンダープレフィックス */
-webkit-mask-image: linear-gradient(to bottom,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.1) 5%,
  rgba(0, 0, 0, 0.3) 10%,
  rgba(0, 0, 0, 0.6) 15%,
  rgba(0, 0, 0, 0.85) 20%,
  rgba(0, 0, 0, 1) 25%,
  rgba(0, 0, 0, 1) 100%);
}

/*背景動画や画像の上に、テキストやリンクなどをちゃんと表示させるための工夫*/
footer > *:not(.footer-bg) {
  position: relative; /* 背景より前面に出すために相対配置 */
  z-index: 1; /* .footer-bg（z-index: 0）より上に表示する */
}

/*フッター内のdivやul要素に適用*/
footer > div,
footer > ul {
  max-width: 1200px; /* 最大幅を1200pxに制限*/
  margin: 0 auto; /* 左右中央寄せ */
  padding: 0 10px; /* 左右に10pxの余白（スマホなどで端にくっつかないように） */
}

/* SNSアイコン全体 */
.footsns {
  list-style: none;        /* リストの先頭マーカー（●や数字）を消す */
  padding: 0;              /* 内側の余白をリセット */
  margin-bottom: 10px;     /* 下に10pxの余白をつける（次の要素との間隔） */
  display: flex;           /* 横並びにするためにフレックスボックスを使用 */
  justify-content: center; /* 子要素（SNSアイコン）を中央に配置 */
  gap: 30px;               /* 各アイコンの間に30pxのすき間を作る */
}

/* 各々のSNSアイコン */
.footsns a {
  color: #fff; /* リンク文字の色を白に設定 */
  text-decoration: none; /* 下線を消してスッキリした見た目に */
  transition: transform 0.3s ease, color 0.3s ease; /* hover時の変化をなめらかに */
  display: inline-block; /* transformを効かせるためにインラインブロック化 */
}

/* 各々のSNSアイコンにカーソルを当てたとき */
.footsns a:hover {
  color: #a9a8a8;                     
  transform: translateY(-4px); /* ← 上にふわっと */
}

/* 各々のSNSアイコン (FontAwesome) */
.footsns i {
  font-size: 1.3rem;
}

/* コピーライト全体 */
.copyright {
  text-align: center; /*中央揃え*/
}

/* 丸くて白背景のロゴボタン */
.copyright a {
  display: inline-flex; /* インライン要素として並びつつ、flexで中身を整列 */
  align-items: center;  /* 中の要素を縦方向に中央揃え */
  justify-content: center; /* 中の要素を横方向に中央揃え */
  width: 80px; 
  height: 80px; /* 幅と高さを同じにして、正方形にする */
  background-color: #fff; /* 背景色を白に設定（目立たせる） */
  border-radius: 50%; /* 完全な円形にする */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ふんわりした影で立体感を出す */
  margin-bottom: 10px; /* 下に余白をつけて他の要素と間隔をとる */
  text-decoration: none; /* リンクの下線を消す */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時の動きをなめらかに */
}

/* 丸くて白背景のロゴボタンにカーソルを当てたとき */
.copyright a:hover {
  transform: translateY(-4px); /* 上に4pxだけ浮かび上がるように移動 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 影を強調して立体感アップ */
}

/*ロゴボタン*/
.copyright img {
  width: 80%;       /* 親要素（aタグ）の幅の80%に縮小して表示 */
  height: auto;     /* 縦横比を保ったまま高さを自動調整 */
  display: block;   /* 画像の下にできる余白（隙間）をなくすためにブロック要素化 */
}

/*コピーライトのテキスト*/
.copyright small {
  display: block; /* ブロック要素として表示（改行されて縦に並ぶ） */
  color: var(--color-white);
}


/*==============================================
サイドボタン
==============================================*/

/*サイドボタン全体*/
#side-btn {
  position: fixed; /* 画面に固定表示（スクロールしても動かない） */
  right: 4px; /* 画面右端から4pxの位置に配置 */
  top: 60%; /* 画面の高さの60%の位置に配置 */
  transform: translateY(-50%); /* 自身の高さの半分だけ上にずらして中央寄せ */
  display: flex; /* 中のリンクを縦に並べるためにフレックスボックスを使用 */
  flex-direction: column; /* 子要素を縦方向に並べる */
  border: 1px solid #666; /* 薄いグレーの枠線 */
  background: #fff; /* 背景は白 */
  z-index: 999999; /* 他の要素よりも最前面に表示 */
  opacity: 0; /* 初期状態では非表示（透明） */
  pointer-events: none; /* 初期状態ではクリックなどの操作を無効化 */
  transition: opacity 0.6s ease; /* 表示切り替えをなめらかに */
}

/*<body> にloadedクラスが付いたらサイドボタンが表示されて操作可能になる（JavaScript関連)*/
body.loaded #side-btn {
  opacity: 1; /* ページ読み込み完了後に表示 */
  pointer-events: auto; /* クリックなどの操作を有効化 */
}

/*サイドボタンの各リンク*/
#side-btn a {
  display: flex; /* 中のテキストを中央揃えにするためにフレックス */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 165px; /* 縦長のボタンにする */
  background: #fff; /* 背景は白 */
  border: 1px solid #666; /* 枠線あり */
  text-decoration: none; /* 下線を消す */
  transition: background 0.3s, color 0.3s; /* hover時の変化をなめらかに */
}

/*サイドボタン内のテキスト部分*/
#side-btn a span {
  display: inline-block; /* transformを効かせるためにインラインブロックに */
  transform: rotate(-90deg); /* テキストを左に90度回転（縦書き風に） */
  font-size: 0.85rem; /* 少し小さめの文字サイズに */
  color: #666; /* グレーの文字色 */
  letter-spacing: 0.08em; /* 文字間を少し広げて読みやすく */
}

/*サイドボタンにカーソルを当てたとき*/
#side-btn a:hover {
  background: #666;
}

/*サイドボタンにカーソルを当てたときのテキスト*/
#side-btn a:hover span {
  color: #fff;
}

/*2つのボタンがひとつの縦長ボックスに見えるようなデザイン*/
#side-btn a:nth-child(1) {
  border-bottom: none;         /* 下の枠線を消す */
  border-right: 1px solid #666; /* 右側にグレーの線を追加 */
}

/* サイドボタンの初期状態 PC用を表示*/
.pc-nav, #side-btn {
  display: block;
}

/* サイドボタンの初期状態 スマホ用を非表示*/
.sp-nav {
  display: none;
}

/*==============================================
スマホ用：画面の幅が768px以下
==============================================*/

@media (max-width: 768px) {


/*==============================================
スマホ用の共通
==============================================*/

  body {
    font-size: 1rem;
    line-height: 1.7;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 3rem;
  }

  p, li {
    font-size: 1rem;
  }

  .btn {
    font-size: 1rem;
    padding: 12px 20px; /* 上下に12px、左右に20pxの内側余白*/
  }

  /* セクションごとの余白（main-visualは除外） */
  .about-container,
  .access-section,
  .news-section,
  .scroll-gallery {
    padding: 3rem 1rem !important; /* 上下に3rem、左右に1remの内側余白をつける */
    margin: 0 !important; /* 外側の余白をゼロにリセット */
  }

  /* スマホ画面ではPC用のナビゲーションメニューを非表示 */
  .pc-nav, #side-btn {
    display: none !important;
  }

  /*スマホ画面ではスマホ用のナビゲーションメニューを表示*/
  .sp-nav {
    display: block !important;
  }


/*==============================================
スマホ用のハンバーガーメニュー
==============================================*/

/* ハンバーガーボタン全体 */
  #hamburger {
  position: absolute;
  top: 1.2rem;             /* 画面上から1.2remの位置に配置 */
  left: 1.2rem;            /* 画面左から1.2remの位置に配置 */
  z-index: 200000; /* hamburger本体より前に出す */
  width: 30px;             /* ボタンの横幅 */
  height: 24px;            /* ボタンの高さ（3本線が収まるサイズ） */
  display: flex;           /* 中の線（span）を縦に並べるためにフレックスボックス */
  flex-direction: column; /* 子要素（span）を縦方向に並べる */
  justify-content: space-between; /* 上下に均等に配置（3本線の間隔） */
  background: none;        /* 背景なし（透明） */
  border: none;            /* 枠線なし */
  cursor: pointer;         /* カーソルをポインターに（クリックできる感） */
}

/*ハンバーガーの3本線*/
  #hamburger span {
  display: block;          /* ブロック要素にして幅・高さを指定可能に */
  height: 3px;             /* 線の太さ（高さ） */
  width: 100%;
  background: #fff;        /* 線の色（白） */
  border-radius: 2px;      /* 両端を少し丸くして柔らかい印象に */
  transition: all 0.4s ease; /* アニメーションをなめらかに */
  position: relative; /* ← これが必須！ */
  z-index: 200000; /* hamburger本体より前に出す */
}

/*ハンバーガーが開いたときのアニメーション（X型に変形）*/
  #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.active span {
  position: relative;   /* 念のため */
  z-index: 200000;
}


/*==============================================
スマホ用のナビゲーションメニュー
==============================================*/

  /* スマホ用ナビゲーションメニュー全体（メニューの外枠） */
  .sp-menu {
  position: fixed !important; /* 画面に固定表示（スクロールしても動かない） */
  top: 0;
  left: 0;
  width: 100%; /* 横幅いっぱいに広げる */
  background: rgba(255, 255, 255, 0.5); /* 半透明の白背景（下の要素が少し透ける） */
  transform: translateY(-100%); /* 初期状態では画面の上に隠す（非表示） */
  transition: transform 0.4s ease; /* スライドダウンをなめらかに */
  z-index: 99999 !important;
  padding: 45px 20px 10px; /* 上に余白（ハンバーガーと被らないように）＋左右と下にも余白 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 下に影をつけて立体感を出す */
}

  /* スマホ用メニューを開いたときのスタイル（JavaScriptで.openクラスが付与される） */
  .sp-menu.open {
    transform: translateY(0); /*JavaScriptで.openクラスを付けるとメニューがふわっと下に降りてくる*/
  }

  /* スマホ用メニュー内のリスト全体のスタイル */
  .sp-menu ul {
  list-style: none; /* デフォルトの「・」を消す */
  padding: 0;
  margin: 0;
  display: flex; /* フレックスボックスで並べる */
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 中央揃え */
  gap: 1rem; /* 各リンクの間に1remの余白 */
}

  /*スマホ用メニューの各リンクスタイル*/
  .sp-menu a {
  text-decoration: none; /* 下線を消す */
  color: #fff; /* 白文字で見やすく */
  font-weight: normal; /* 標準の太さ */
  transition: color 0.3s ease; /* hover時の色変化をなめらかに */
}

  /*スマホ用メニューの各リンクにカーソルを当てたとき*/
  .sp-menu a:hover {
  color: #888; /* hover時にグレーに変化（視覚的な反応） */
}

  /*スマホ用：ロゴとメッセージの共通*/
  .logo-container {
  top: 60%; /* 画面の高さの60%の位置に配置（やや下めに） */
  align-items: center; /* 中の要素（ロゴとメッセージ）を中央揃えに */
  margin-left: 0; /* 左の余白をなくして中央寄せに対応 */
  padding: 0 1rem; /* 左右に1remの内側余白を追加（画面端にくっつかないように） */
  gap: 1rem; /* ロゴとメッセージの間に1remの余白 */
}

  /*スマホ用：ロゴのみ*/
  .logo-container img {
  width: 80vw; /* 画面幅の80%に縮小（レスポンシブ対応） */
  max-width: 280px; /* 最大でも280pxまでに制限（小さい端末でも安心） */
}

  /*スマホ用：メッセージのみ*/
  .logo-message {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 90vw; /* 画面幅の90%までに制限（左右に余白を確保） */
    white-space: normal; /* テキストを折り返し可能に（PCではnowrapだった） */
    overflow: visible; /* はみ出しを許可（切り捨てない） */
    text-overflow: unset; /* テキストの切り捨てを無効化（…を表示しない） */
    text-align: center; /* 中央揃えでバランスよく表示 */
  }
  

/*==============================================
スマホ用のアバウトセクション
==============================================*/

  /*スマホ用Aboutセクション全体*/
  .about-container {
  position: relative; /* 背景画像を絶対配置するための基準に*/
  padding: 4rem 1rem; /* 上下にゆったり余白、左右に1rem */
  overflow: hidden; /* はみ出た画像を隠す */
  min-height: 900px; /* 背景画像3枚分の高さを確保して、縦に並べられるように */
}

  /*スマホ用Aboutセクションのテキスト全体*/
  .about-text {
    position: relative; /* 背景画像より前に出すために必要 */
    z-index: 2; /* 背景画像より上に表示 */
    max-width: 90vw; /* 横幅を画面の90%に制限 */
    margin: 0 auto; /* 中央寄せ */
    text-align: center; /* テキストを中央揃えに */
  }

  /*スマホ用Aboutセクションのテキストのみ*/
  .about-text p {
    color: #666;
    text-align: center; /* 念のため再指定 */
  }

  /*スマホ用Aboutセクションの左右の画像グループの共通スタイル*/
  .about-images.left,
  .about-images.right {
  position: absolute; /* テキストの背後に配置するため */
  top: 0;
  bottom: 0;
  display: flex; /* 縦に画像を並べる */
  flex-direction: column;
  justify-content: space-around; /* 上中下にバランスよく配置 */
  z-index: 1; /* テキストより下に表示 */
  pointer-events: none; /* 背景画像なのでクリックなどを無効に */
}

  /*スマホ用Aboutセクションの左の画像グループ*/
  .about-images.left {
  left: 0; /* 左端に配置 */
  padding-left: 0.5rem; /* 少し内側に寄せる */
  align-items: flex-end; /* 画像を右寄せに並べる */
}

  /*スマホ用Aboutセクションの右の画像グループ*/
  .about-images.right {
  right: 0; /* 右端に配置 */
  padding-right: 0.5rem; /* 少し内側に寄せる */
  align-items: flex-start; /* 画像を左寄せに並べる */
}

  /*スマホ用Aboutセクションの左の3枚の画像（個別の位置・サイズ・変形）*/
  .about-images.left img:nth-child(1) {
    width: 26vw;
    transform: translateX(-10px) translateY(0px) scale(0.95);
  }

  .about-images.left img:nth-child(2) {
    width: 24vw;
    transform: translateX(5px) translateY(10px) scale(1.05);
  }

  .about-images.left img:nth-child(3) {
    width: 28vw;
    transform: translateX(-5px) translateY(20px) scale(1);
  }

  /*スマホ用Aboutセクションの右の3枚の画像（個別の位置・サイズ・変形）*/
  .about-images.right img:nth-child(1) {
    width: 25vw;
    transform: translateX(10px) translateY(-10px) scale(1);
  }

  .about-images.right img:nth-child(2) {
    width: 23vw;
    transform: translateX(-5px) translateY(5px) scale(0.9);
  }

  .about-images.right img:nth-child(3) {
    width: 27vw;
    transform: translateX(8px) translateY(15px) scale(1.1);
  }

  /*スマホ用Aboutセクションの画像のみ*/
  .about-images img {
  height: auto; /* アスペクト比を保ったまま高さ自動調整 */
  opacity: 0.3 !important; /* 透過して背景っぽく見せる（強制） */
  object-fit: cover; /* はみ出さずに画像をフィットさせる */
  margin: 0.5rem 0; /* 上下に少し余白 */
  transition: transform 0.6s ease; /* ホバーやアニメーション用に滑らかに変化 */
}

/*左側の背景画像（3枚）上中下にランダム配置し、少しズラして奥行き感を演出*/

/* 左上の画像：やや左に寄せて小さめに表示 */
.about-images img.left-1 {
  top: 10%;       /* 上から10%の位置に配置（上寄り） */
  left: 2%;       /* 左から2%の位置に配置（やや内側） */
  transform: translateX(-10px) scale(0.95); /* 少し左にズラして縮小（奥にある印象） */
}

/* 左中央の画像：やや右に寄せて少し拡大 */
.about-images img.left-2 {
  top: 40%;       /* 上から40%の位置に配置（中央付近） */
  left: 5%;       /* 左から5%の位置に配置（やや内側） */
  transform: translateX(-5px) scale(1.05); /* 少し右にズラして拡大（手前にある印象） */
}

/* 左下の画像：左端に寄せて等倍表示 */
.about-images img.left-3 {
  top: 70%;       /* 上から70%の位置に配置（下寄り） */
  left: 0%;       /* 左端にぴったり配置 */
  transform: translateX(-15px) scale(1); /* 大きさはそのまま、やや左にズラす */
}

/*右側の背景画像（3枚）上中下にランダム配置し、左右のバランスと立体感を演出*/

/* 右上の画像：やや右にズラして等倍表示 */
.about-images img.right-1 {
  top: 15%;       /* 上から15%の位置に配置（上寄り） */
  right: 2%;      /* 右から2%の位置に配置（やや内側） */
  transform: translateX(10px) scale(1); /* 少し右にズラして自然な配置に */
}

/* 右中央の画像：やや左にズラして縮小 */
.about-images img.right-2 {
  top: 45%;       /* 上から45%の位置に配置（中央付近） */
  right: 4%;      /* 右から4%の位置に配置（やや内側） */
  transform: translateX(5px) scale(0.9); /* 少し左にズラして縮小（奥にある印象） */
}

/* 右下の画像：右端に寄せて拡大表示 */
.about-images img.right-3 {
  top: 75%;       /* 上から75%の位置に配置（下寄り） */
  right: 0%;      /* 右端にぴったり配置 */
  transform: translateX(15px) scale(1.1); /* 右にズラして拡大（手前にある印象） */
}


/*==============================================
スマホ用のメニューセクション
==============================================*/

/* スマホ用のメニューセクション全体 */
  .menu-section {
    flex-direction: column; /* PCでは横並びだったメニューを、縦に並べる */
  }

/* スマホ用のメニューリンク */
  .menu-link {
    width: 100%; /* 横幅いっぱいに広げてタップしやすく */
    margin: 0.5rem 0; /* 上下に0.5remの余白を追加（メニュー同士の間隔） */ 
  }

/* スマホ用のメニューテキスト */
  .menu-text {
    transform: translateY(40px); /* PCでは70pxだったのを少し浅くして、中央寄せに近づける */
  }


/*==============================================
スマホ用のギャラリーセクション
==============================================*/

/*スマホ用ギャラリー全体 */
  .scroll-gallery {
    height: 75vh; /* 画面の高さの75%に設定（全画面より少しコンパクト） */
    overflow: hidden; /* スライドがはみ出しても非表示にする */
  }

/*スマホ用ギャラリーの各スライド*/
  .gallery-slide {
    position: absolute; /* 親要素内で重ねて配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* 背景画像を要素にフィットさせる（切り取りOK） */
    background-position: center; /* 背景画像の中心を表示 */
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0.6s ease-in-out; /* 表示切り替えをなめらかに */
    z-index: 0; /* 他のスライドより背面に配置 */
  }

/*スマホ用ギャラリーの表示中のスライド（JacaScriptでactiveクラスが付いたとき）*/
  .gallery-slide.active {
    opacity: 1; /* 表示する */
    z-index: 1; /* 他のスライドより前面に表示 */
  }

/*スマホ用ギャラリーのテキスト*/
  .scroll-gallery .gallery-slide .slide-text {
    position: absolute; /* スライド内で自由に配置 */
    bottom: 10px; /* 下から10pxの位置に配置 */
    left: 10px; /* 左から10pxの位置に配置 */
    color: white;
    z-index: 2; /* スライド画像より前面に表示 */
  }


/*==============================================
スマホ用のアクセスセクション
==============================================*/

/*スマホ用のアクセス情報全体*/
  .access-info {
    font-size: 1rem;
  }

/* スマホ用のアクセス情報内の段落（p）の文字サイズと行間を調整 */
.access-info p {
  font-size: 1rem;
  line-height: 1.7; /* 読みやすさを意識して行間を広めに */
}

/* スマホ用のアクセス情報内の住所部分（.add > div）の文字サイズと余白調整 */
.access-info .add div {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.75rem; /* 下に余白をつけて次の要素と区切る */
}

/* スマホ用のアクセス情報と地図の2カラムを縦並びに変更　*/
.flex-container {
  flex-direction: column; /* 横並び → 縦並びに変更 */
  align-items: stretch;   /* 子要素を親の幅に合わせて広げる */
  padding: 0;
  margin: 0;
}

/* スマホ用のアクセス情報と地図の幅を100%にして、1カラム表示に対応 */
.access-info,
.access-map {
  width: 100%;        /* 横幅いっぱいに広げる */
  max-width: none;    /* PC用の最大幅制限を解除 */
  padding: 16px;      /* 内側に余白を確保 */
}

/* スマホ用のGoogle Mapのボタン */
.btn-list .btn {
  padding: 10px 16px; /* 上下10px、左右16pxの余白でタップしやすく */
}
}


/*==============================================
PC用のRESERVATIONとCONTACTの中身のスタイル
==============================================*/

/*メインコンテンツ*/
.page-content {
  max-width: 600px; /* 最大幅を600pxに制限して読みやすく */
  margin: 4rem auto; /* 上下に4remの余白、左右は中央寄せ */
  padding: 2rem; /* 内側に余白をつけて内容を見やすく */
  font-size: 1.2rem; /* 基本の文字サイズを少し大きめに */
  line-height: 1.8; /* 行間を広めにして読みやすく */
  background-color: #ffffff; /* 背景は白で清潔感を出す */
  border-radius: 8px; /* 角を丸くして柔らかい印象に */
  box-shadow: 0 0 10px rgba(0,0,0,0.05); /* ほんのり影をつけて浮かせる */
}

/*フォーム全体のレイアウト設定*/
.page-content form {
  display: flex; /* フレックスボックスで配置 */
  flex-direction: column; /* 要素を縦に並べる */
  gap: 1rem; /* 各要素の間に1remの間隔を空ける */
}

/*入力欄・テキストエリア・ボタンの共通スタイル*/
.page-content input,
.page-content textarea,
.page-content button {
  font-size: 1rem; /* フォントサイズを統一 */
  padding: 0.75rem; /* 内側に余白をつけて操作しやすく */
  border: 1px solid #ccc; /* 薄いグレーの枠線でシンプルに */
  border-radius: 4px; /* 少し角を丸くして親しみやすく */
}

/*ボタンのスタイル*/
.page-content button {
  background-color: #949494; /* グレーの背景色で落ち着いた印象に */
  color: #fff; /* 文字色は白でコントラストを確保 */
  cursor: pointer; /* hover時にポインターを表示 */
  transition: background-color 0.3s; /* 背景色の変化をなめらかに */
}

/* ▼ ボタンにカーソルをあてたときのスタイル */
.page-content button:hover {
  background-color: #5b5b5b; /*hover時の色*/
}


/*==============================================
スマホ用のRESERVATIONとCONTACTの中身のスタイル
==============================================*/

@media (max-width: 768px) {

/*メインコンテンツ*/
  .page-content {
    padding: 1.5rem 1rem; /* 上下1.5rem、左右1remの余白に変更 */
    font-size: 1rem; /* 文字サイズを少し小さく調整 */
    margin: 2rem 1rem; /* 上下2rem、左右1remの余白に変更 */
  }

/*入力欄・テキストエリア・ボタンの共通スタイル*/
  .page-content input,
  .page-content textarea,
  .page-content button {
    font-size: 1rem; /* フォントサイズはそのまま */
    padding: 0.65rem; /* 上下左右の余白を0.65remに */
    width: 100%; /* 幅いっぱいに広げて使いやすく */
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
  }
}