/* =========================================
   1. 基本設定・リセット
========================================= */
* {
  box-sizing: border-box; /* paddingやborder（内側の余白や枠線）を含めて要素の幅を計算させる（レイアウト崩れを防ぐため） */
  margin: 0; /* ブラウザが元々持っている外側の余白を消す */
  padding: 0; /* ブラウザが元々持っている内側の余白を消す */
}

html {
  scroll-behavior: smooth; /* メニューなどをクリックした際、ページ内を滑らかにスクロール移動させる */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 全体のフォント（書体）を読みやすい標準のものに設定 */
  line-height: 1.6; /* 文章の行間を少し広くして読みやすくする */
  background: #f5f5f5; /* ページ全体の背景色を薄いグレーにする */
  color: #333; /* 基本の文字色を真っ黒ではなく、少し柔らかい濃いグレーにする */
  padding-top: 70px; /* 上部にナビゲーション（top-nav）を固定表示させるため、その高さ分だけ全体のコンテンツを下げる */
}

/* =========================================
   2. ローディング画面 (くるくる)
========================================= */
#loading {
  position: fixed; /* 画面全体を覆うように、スクロールしても動かないように固定 */
  inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 を一気に指定（全画面に広げる） */
  background: #111; /* 背景色を暗いグレーにする */
  display: flex; /* 中に入っている要素（文字や画像）を配置しやすくするための設定 */
  justify-content: center; /* 左右のど真ん中に配置 */
  align-items: center; /* 上下のど真ん中に配置 */
  z-index: 9999; /* 他のどの要素よりも一番手前（一番上）に表示させる */
  transition: opacity 0.8s ease; /* 透明になる時に、0.8秒かけてフワッと消えるアニメーションをつける */
}

.loading-wrapper {
  display: flex; /* くるくるアイコンと文字を横並びにするための設定 */
  align-items: center; /* アイコンと文字の上下のズレをなくし、中央で揃える */
  gap: 20px; /* アイコンと文字の間に20pxの隙間をあける */
  transition: opacity 0.8s ease; /* フワッと消えるアニメーション */
}

.loading-icon {
  width: 40px; /* アイコンの横幅 */
  height: 40px; /* アイコンの縦幅 */
  animation: spin 1.5s linear infinite; /* 下で作った「spin」という回転アニメーションを、1.5秒かけて一定の速度（linear）で永遠（infinite）に繰り返す */
}

.loading-text {
  color: white; /* 文字色を白に */
  font-size: 2rem; /* 文字の大きさを2倍にする */
  font-weight: bold; /* 文字を太字にする */
  letter-spacing: 2px; /* 文字と文字の間の隙間を少し広げてスタイリッシュにする */
}

/* くるくる回すアニメーションの動きを定義 */
@keyframes spin {
  to { transform: rotate(360deg); } /* 最終的に360度（1周）回転した状態にする */
}

/* JSからこのクラスが付与されると透明になる（フェードアウト用） */
.fade-out {
  opacity: 0; /* 透明度を0（完全に見えない状態）にする */
}

/* =========================================
   3. ナビゲーション (メニューバー)
========================================= */
.top-nav {
  position: fixed; /* 画面を下にスクロールしても、常に上部に張り付いて追従させる */
  top: 0; /* 画面の一番上に配置する */
  width: 100%; /* 横幅を画面いっぱいに広げる */
  background: #000; /* 背景色を黒にする */
  z-index: 1000; /* メインコンテンツや画像よりも上に（手前に）表示させる */
  height: 70px; /* メニューバーの高さを70pxに固定する */
}

.nav-inner {
  display: flex; /* ロゴとメニューを横並びに配置するための設定 */
  align-items: center; /* 縦方向のど真ん中に要素を揃える */
  width: 100%; /* 画面幅いっぱいに広げる */
  padding: 0 20px; /* 上下は0、左右の画面端から20pxだけ内側に隙間をあけて、端にピタッとくっつかないようにする */
  height: 100%; /* 親要素（.top-nav）の高さ70pxをそのまま引き継ぐ */
  margin: 0 auto; /* 左右の余白を均等にして中央寄せにする */
}

/* ★メニューを完全な中央に配置するための魔法（右側の見えないつっかえ棒） */
.nav-inner::after {
  content: ""; /* 空っぽの要素を作る */
  flex: 1; /* 余ったスペースの「1」の割合を占めるようにする */
}

/* ★ロゴ側の箱にも「1」の割合を持たせる */
.nav-logo {
  flex: 1; /* 左（ロゴ）が「1」、右（空っぽ）が「1」で挟み込むため、真ん中のメニューが完璧に中央に来る */
}

.nav-logo a {
  display: flex; /* ロゴ画像と（もしあれば）テキストを横並びにする */
  align-items: center; /* 上下中央揃え */
  text-decoration: none; /* リンクの下線を消す */
  color: white; /* 文字色を白に */
}

/* ロゴにマウスを乗せた時の動き */
.nav-logo a:hover {
  opacity: 0.7; /* 少しだけ画像を透かして（薄くして）クリックできることを伝える */
}

.nav-logo img {
  height: 40px; /* ロゴの本来の高さを40pxにする（バーに収まるサイズ） */
  transform: scale(1.5); /* 実際の領域は広げず、「見た目だけ」を1.5倍に拡大して大きく見せる */
  transform-origin: left center; /* 拡大する際の「基準点」を左・中央にする（右に広がってメニューを押し出さないようにするため） */
  transition: 0.3s; /* 拡大や透過のアニメーションを0.3秒かけて滑らかに行う */
}

.logo-text {
  font-size: 24px; /* ロゴのテキストのサイズ */
  letter-spacing: 1px; /* 文字間隔をあける */
  transform: translateY(-2px); /* 文字の位置を少しだけ上に（-2px）微調整して画像とバランスをとる */
}

.top-nav ul {
  display: flex;
  list-style: none; /* 箇条書きの黒丸を消す */
  
  /* ↓ここから追加・変更↓ */
  overflow-x: auto; /* スマホではみ出た分を横スクロールできるようにする */
  white-space: nowrap; /* メニューの文字を改行させない */
  -webkit-overflow-scrolling: touch; /* iOSで滑らかにスクロールさせる */
}

/* スクロールバー自体は非表示にしてスッキリさせる */
.top-nav ul::-webkit-scrollbar {
  display: none;
}

/* 画面が広いPC(768px以上)の時だけ、今まで通り中央寄せにする */
@media (min-width: 768px) {
  .top-nav ul {
    justify-content: center;
  }
}

.top-nav ul a {
  display: block;
  padding: 1rem 0.8rem; /* スマホ向けに左右の余白を少しだけ狭くする(1rem -> 0.8rem) */
  color: white;
  text-decoration: none;
  font-size: 14px; /* スマホ向けに少し文字を小さく */
}

/* メニュー項目（NEWS等）にマウスを乗せた時の設定 */
.top-nav ul a:hover {
  background: #666; /* 背景色をグレーに変更して、選んでいることを分かりやすくする */
}

/* =========================================
   4. ハンバーガーメニュー（スマホ用）の設定
========================================= */
/* ハンバーガーボタンの基本デザイン（PC画面では隠しておく） */
.hamburger {
  display: none; /* 普段は非表示 */
  flex-direction: column;
  gap: 5px; /* 三本線の隙間 */
  cursor: pointer;
  z-index: 2000; /* メニューが開いた時も一番上に表示されるようにする */
}

/* 三本線の1本1本のデザイン */
.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  transition: all 0.3s; /* ボタンが「×」に変化する時のアニメーション */
}

/* ＝ スマホ画面（幅767px以下）の時の特別ルール ＝ */
@media (max-width: 767px) {
  
  /* ① ハンバーガーボタンを表示する */
  .hamburger {
    display: flex;
  }

  /* ② 先ほど作った「つっかえ棒」をスマホでは解除する（ボタンを右端に寄せるため） */
  .nav-inner::after {
    display: none;
  }

  /* ③ メニュー一覧を画面の「右外」に隠して縦並びにする */
  .top-nav ul {
    position: fixed; /* 画面に固定 */
    top: 70px; /* メニューバーの下から開始 */
    right: -100%; /* ★画面の右外（見えない場所）に追い出しておく */
    width: 100%; /* 画面幅いっぱい */
    height: calc(100vh - 70px); /* 画面の高さ分 */
    background: #000; /* 背景は黒 */
    flex-direction: column; /* 横並びから「縦並び」に変更 */
    justify-content: flex-start; /* 上から順に詰める */
    padding-top: 20px;
    transition: right 0.3s ease; /* スライドして出てくるアニメーション */
  }

  /* ④ メニューの文字を中央寄せにする */
  .top-nav ul a {
    text-align: center;
    border-bottom: 1px solid #333; /* 項目と項目の間に薄い線を引く */
  }

  /* ⑤ JSで「active」クラスが付いたら、右外から画面内にスライドインさせる */
  .top-nav ul.active {
    right: 0;
  }

  /* ⑥ メニューが開いている時、三本線を「×（バツ）」マークに変形させる魔法 */
  .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線は透明にして消す */
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}


/* =========================================
   5. メインコンテンツと各セクション
========================================= */
main {
  max-width: 1200px; /* サイト全体のコンテンツが広がりすぎないよう、最大幅を1200pxに制限する */
  margin: auto; /* 左右の余白を自動計算して、画面の中央に配置する */
  padding: 1rem; /* コンテンツの周りに少し余白を持たせる */
  background: white; /* メイン部分の背景色を白にする */
  word-break: break-word; /* 長いURLや英単語が来ても、枠からはみ出さずに改行させる */
	overflow-wrap: break-word; /* 同上（レイアウト崩れ防止） */
	/*font-family: "けいふぉんと";*/
}

section {
  margin-bottom: 60px; /* 各セクション（NEWSやPROFILEなど）の間に60pxの余白をあける */
  scroll-margin-top: 80px; /* メニューのリンクから飛んできた時、上部の固定ナビにタイトルが隠れないように80px下で止める */
}

section h2 {
  font-size: 28px; /* 大見出し（H2）の文字サイズ */
  margin-bottom: 15px; /* 下に15pxの余白をあける */
  padding-bottom: 5px; /* 内側の下に5pxの余白 */
  font-weight: bold; /* 太字にする */
  letter-spacing: 2px; /* 文字間隔を広げて見出しらしくする */
}


/* =========================================
   6. タイトル部分
========================================= */
#title {
	font-family: "けいふぉんと";
	text-align:center;
}

 .shikinosato {
	font-size:2.0rem;
}

#title h1 {
	font-size:4.0rem;
}

 .araragi {
	font-size:2.0rem;
}

#title img{
  width: 500px;
	max-width: 100%;
	margin:20px 0;
}

/* =========================================
   7. 本文
========================================= */
#detail h2{
	font-size:2.0rem;
	/*text-align:center;*/
	margin:50px 30px 0;
	font-family:"けいふぉんと";
}

#detail h3{
	font-size:1.6rem;
	margin-bottom:-20px;
	font-family:"けいふぉんと";
}

#detail p{
	font-size:1.2rem;
}

.location{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

.location-map img{
	width:500px;
	height:auto;
	transform: scale(1.05); 
	cursor: pointer; 
}

@media (max-width: 768px){
  .location{
    flex-direction: column;
  }

	.location-map img{
		width:100%;
		max-width:400px;
  }
}

.img-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.img-modal.active{
  display:flex;
}

#img-modal-content{
  max-width:95%;
  max-height:95%;
}

.img-close-btn{
  position:absolute;
  top:20px;
  right:30px;
  color:white;
  font-size:3rem;
  cursor:pointer;
  user-select:none;
}

.img-close-btn:hover{
  opacity:0.7;
}

#fee{
  width:80%;
  display:block;
  margin:20px auto;
}

.SNS-icon{
	width:3%;
	margin:5px;
}

.biraura img{
	width: 700px;
	display:block;
	max-width: 100%;
	margin:20px auto;
}




/* =========================================
   9. フッター（ページの一番下）
========================================= */
footer {
  text-align: center; /* 文字を中央寄せ */
  padding: 1rem; /* 上下の余白 */
  background: #000; /* 背景を黒に */
  color: white; /* 文字を白に */
  margin-top: 2rem; /* すぐ上のコンテンツとの間に余白をあける */
}

/* =========================
   スマホ用
========================= */
@media (max-width: 768px){

  /* タイトル */
  .shikinosato{
    font-size:1.2rem;
  }

  #title h1{
    font-size:1.7rem;
    line-height:1.2;
  }
	

  .araragi{
    font-size:1.2rem;
  }

  /* 本文 */
  #detail p{
    font-size:1rem;
    line-height:1.8;
  }

  #detail h2{
    font-size:1.5rem;
    margin:40px 0 10px;
  }

  #detail h3{
    font-size:1.2rem;
    margin-bottom:0;
  }

  /* SNSアイコン */
  .SNS-icon{
    width:40px;
  }

  /* モーダルの×ボタン */
  .img-close-btn{
    top:10px;
    right:20px;
    font-size:2.5rem;
  }

  /* 入場料画像 */
  #fee{
    width:100%;
  }

}
/* =========================
   スマホ用改行
========================= */
.sp-br{
  display:none;
}

@media (max-width:768px){
  .sp-br{
    display:block;
  }
}