/* ===============================
   基本設定（背景・文字・全体レイアウト）
================================= */
html, body {
  margin: 0; /* ブラウザのデフォルトの余白を削除（外枠） */
  padding: 0; /* ブラウザのデフォルトの内側余白を削除 */
  height: 100%; /* ページの高さを常に画面いっぱいにする */
  background-color: #000; /* 背景を黒に設定 */
  font-family: "Yu Mincho", "serif"; /* 游明朝体を優先的に使用（なければserif） */
  color: #fff; /* 文字色を白に設定（背景が黒なので） */
}

/* ===============================
   背景スライドショー全体のコンテナ
================================= */
.slideshow-container {
  position: fixed; /* スクロールしても画面の背面に固定される */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅を100%（画面全体） */
  height: 100%; /* 高さも100%（画面全体） */
  overflow: hidden; /* 中にある要素がはみ出しても見えないようにする */
  z-index: 0; /* 一番背面に配置（他の要素より後ろ） */
}

/* ===============================
   各スライドの基本設定
================================= */
.slide {
  position: absolute; /* slideshow-containerを基準に重ねて配置 */
  width: 100%; /* 全幅で広げる */
  height: 100%; /* 全高で広げる */
  background-size: cover; /* 背景画像を枠いっぱいに表示（縦横比保持） */
  background-position: center; /* 背景画像を中央寄せにする */
  opacity: 0; /* 初期状態では透明（表示されない） */
  animation: fade 25s infinite; /* 25秒のfadeアニメーションを無限に繰り返す */
}

/* ===============================
   各スライドに個別画像と遅延を設定
================================= */
.slide:nth-child(1) { background-image: url('../images/top001.jpg'); animation-delay: 0s; }   /* 1枚目：0秒から表示 */
.slide:nth-child(2) { background-image: url('../images/top002.jpg'); animation-delay: 5s; }   /* 2枚目：5秒後から表示 */
.slide:nth-child(3) { background-image: url('../images/top003.JPG'); animation-delay: 10s; }  /* 3枚目：10秒後 */
.slide:nth-child(4) { background-image: url('../images/top004.jpg'); animation-delay: 15s; }  /* 4枚目：15秒後 */
.slide:nth-child(5) { background-image: url('../images/top005.jpg'); animation-delay: 20s; }  /* 5枚目：20秒後 */

/* ===============================
   フェードアニメーションの定義
================================= */
@keyframes fade {
  0%   { opacity: 0; }  /* 最初は透明 */
  5%   { opacity: 1; }  /* 5%地点で完全に表示 */
  20%  { opacity: 1; }  /* 20%までは表示を維持 */
  25%  { opacity: 0; }  /* 25%地点で透明に戻す */
  100% { opacity: 0; }  /* 残りの時間は非表示のまま */
}

/* ===============================
   コンテンツ類を前面に表示
================================= */
header, nav, .content, .info, footer {
  position: relative; /* 通常の配置だが z-index を指定できるようにする */
  z-index: 10; /* スライドショーよりも前に表示 */
}

/* ===============================
   ヘッダーのレイアウト（PC用）
================================= */
header {
  position: fixed; /* 画面上に固定 */
  top: 1rem; /* 上から1remの位置に */
  left: 2rem; /* 左から2remの位置に */
  font-size: 1.2rem; /* フォントサイズをやや大きく */
  font-weight: bold; /* 太字 */
  background: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  padding: 0.5rem 1rem; /* 上下0.5rem、左右1remの余白 */
  border-radius: 0.5rem; /* 少し丸みを持たせる */
 /* z-index: 100;*/ /* 前面表示 */

}

/* ===============================
   ナビゲーションメニュー（PC用）
================================= */
nav {
  position: fixed; /* 画面に固定 */
  top: 1rem; /* 上から1rem */
  right: 2rem; /* 右から2rem */
  display: flex; /* 横並びにする */
  gap: 1rem; /* 項目間のスペースを1remに */
  background: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  padding: 0.5rem 1rem; /* 内側の余白 */
  border-radius: 0.5rem; /* 少し角を丸くする */
  z-index: 105;
}

nav a {
  color: #fff; /* リンク文字は白 */
  text-decoration: none; /* 下線なし */
}

/* ハンバーガーメニュー（PCでは非表示） */
.menu-toggle,
#menu {
  display: none; /* スマホ用なのでPCでは非表示 */
}
/* ===============================
   キャッチコピー全体の中央表示設定
================================= */
.content {
  text-align: center;           /* 中の文字を中央揃え */
  padding: 8rem 1rem 1rem;      /* 上：8rem、左右：1rem、下：1rem の内側余白 */
  margin: 0 auto;               /* 要素自体を左右中央に配置 */
  max-width: 600px;             /* 幅の最大値を800pxに制限 */
  display: flex;                /* Flexboxで子要素を制御 */
  flex-direction: column;       /* 縦方向に並べる */
  align-items: center;          /* 横方向を中央揃えに */
}

/* ===============================
   サブキャッチ（上） - 豊臣秀吉ゆかりの神社
================================= */
.sub-catch {
  background: rgba(0, 0, 0, 0.5);   /* 半透明黒で読みやすく */
  display: inline-block;           /* テキストサイズに合わせた横幅 */
  padding: 0.6rem 1.2rem;          /* 上下0.6rem、左右1.2rem の余白 */
  border-radius: 0.5rem;           /* 丸みで柔らかい印象 */
  font-size: 1.2rem;               /* やや小さめの文字 */
  font-weight: 500;                /* 標準より少し太めのフォント */
  color: #ffd700;                  /* ゴールドで歴史・格式を表現 */
  margin: 0 0 0.8rem 0;            /* 下だけに余白0.8remを設定（行間を広く） */
  line-height: 1.4;                /* 行内の行間もやや広く */
}

/* ===============================
   メインキャッチ（下） - 出世の願い、ここに宿る
================================= */
.main-catch {
  background: rgba(0, 0, 0, 0.5);   /* 背景に半透明黒 */
  display: inline-block;           /* テキストサイズにフィット */
  padding: 0.8rem 1.8rem;          /* やや広めの内側余白（上下0.8rem） */
  border-radius: 0.5rem;           /* 角を少し丸めて印象を優しく */
  font-size: 2rem;                 /* 大きな太文字で力強く表現 */
  font-weight: bold;              /* 強調の太字 */
  color: #fff;                     /* 白文字で視認性を確保 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* 影をつけて立体感と読みやすさ */
  margin: 0;                       /* 上下余白はナシ（sub-catchで調整済み） */
  line-height: 1.4;                /* 行内の行間も少し広めに */
}


/* ===============================
   お知らせ・アクセス・マップなど
================================= */
.info {
  margin-top: 15vh; /* 上から画面の高さの15%分だけ下に余白を取る（ビューポートの15%） */
  padding: 2rem 1rem; /* 内側の余白：上下に2rem、左右に1rem。テキストが端にくっつかないように */
  background: rgba(0, 0, 0, 0.8); /* 背景色：不透明度80%の黒。背後がうっすら透ける */
  z-index: 110; /* 他の要素より前面に表示（通常の要素のz-indexより高めに設定） */
}

.info-content {
  max-width: 800px; /* 最大幅を800pxに制限 */
  margin: auto; /* 中央寄せ */
  line-height: 1.8; /* 行間を広めに */
}
/* サブキャッチコピーのスタイル（例：「豊臣秀吉ゆかりの神社」） */
.info-catch {
  text-align: center; /* 中央揃え */
  background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  font-size: 1.9rem; /* 少し小さめのサイズ（約19px）でメインとの階層差を出す */
  color: #ffd700; /* ゴールド色。格式の高さ・歴史的イメージを演出 */
  font-weight: 500; /* やや太めの標準フォント（boldより控えめ） */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 少し控えめな影で読みやすさをサポート */
}

.info-content h3 {
  font-size: 1.4rem; /* 中見出しのサイズ */
  font-weight: bold; /* 太字にする */
  margin-top: 2rem; /* 上の余白 */
}
.info-indent {
  margin-left: 0.5em; /* 左に0.5emの余白 */
}
.info-indent1 {
  font-size: 1.4rem; /* 中見出しのサイズ */
  font-weight: bold; /* 太字にする */
}
.info-indent2 {
  margin-left: 3em; 
 }
.info-indent3 { 
  margin-left: 4.5em; 
}
/* 外側の中央寄せ用ラッパー 下部navリンク*/
.info-indent4 {
  text-align: center; /* 中央揃え */
  margin-top: 2rem;   /* 上部余白 */
}

/* ボタンリンクスタイル */
.navback a {
  background: #333;          /* 背景色（暗いグレー） */
  color: #fff;               /* 白文字 */
  padding: 0.5rem 1rem;      /* 内側余白 */
  text-decoration: none;     /* 下線なし */
  border-radius: 0.5rem;     /* 角丸 */
  display: inline-block;     /* aタグをブロック扱い（間隔調整しやすい） */
  margin: 0.3rem;            /* ボタン間の余白 */
}


/* サブ見出しの基本スタイル */
h3 {
  margin-top: 2rem; /* 上の余白 */
  border-bottom: 1px solid #555; /* 下線をグレーで引く */
  padding-bottom: 0.5rem; /* 下に余白 */
}

/* === 戻るボタンの外枠エリア === */
.back {
  margin-top: 2rem; /* 上に2remの余白 */
  text-align: center; /* テキスト中央揃え */
}
/* === 戻るボタンリンクのスタイル === */
.back a {
  background: #333; /* 背景色を暗めのグレーに */
  color: #fff; /* 文字色を白に */
  padding: 0.5rem 1rem; /* 内側余白 上下0.5rem 左右1rem */
  text-decoration: none; /* 下線なし */
  border-radius: 0.5rem; /* 角丸 */
}

/* ===============================
   フッター（著作権表示など）
================================= */
footer {
  text-align: center; /* テキストを中央に */
  padding: 2rem; /* 内側余白 */
  color: #ccc; /* 明るいグレー */
  background: rgba(0, 0, 0, 0.7); /* 半透明の背景 */
  font-size: 0.7rem; /* 少し小さめの文字 */
}
/* ===============================
   ▼ スマホ画面用レスポンシブ対応 ▼
================================= */
@media screen and (max-width: 768px) {

  /* ハンバーガーアイコン表示 */
  .menu-toggle {
    display: flex; /* 表示して縦並び */
    flex-direction: column; /* 縦方向に並べる */
    gap: 6px; /* 線同士の間隔 */
    position: fixed; /* 常に画面の右上に固定 */
    top: 1rem;
    right: 1rem;
    z-index: 101; /* 最前面に表示 */
    width: 30px;
    height: 25px;
    cursor: pointer; /* カーソルを指にする */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* 影をつける */
    z-index: 9999; /* 前面表示 */
}

  .menu-toggle span {
    display: block; /* 棒1本ずつブロック表示 */
    height: 3px; /* 棒の高さ */
    background: #fff; /* 白い棒 */
    border-radius: 2px; /* 丸みを帯びた棒 */
  }

  #menu {
    display: none; /* チェックボックス自体は非表示 */
  }

  /* スマホ用ナビ表示（デフォルト非表示） */
  nav {
    display: none; /* 初期非表示 */
    flex-direction: column; /* 縦方向に並べる */
    position: fixed; /* 画面に固定 */
    top: 60px; /* 上から60px */
    right: 1rem; /* 右から1rem */
    background-color: #fff; /* 白背景 */
    color: #000; /* 黒文字 */
    padding: 1rem; /* 内側余白 */
    width: px; /* ※不完全な値（修正要） */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 影を付ける */
    z-index: 150; /* 前面表示 */
}

  nav a {
    padding: 0.5rem 0; /* 上下に余白を追加 */
    color: #000; /* 黒文字（白背景に合う） */
    font-size: 1rem;
  }
 /* チェックが入っていたらnavを表示 */
  #menu:checked ~ nav {
    display: flex; /* メニュー表示に切り替え */
  }
 /* ヘッダーのフォントサイズを調整 */

  header {
    left: 0rem; /* 左に寄せる */
    font-size: 1rem; /* フォントサイズ小さめに */
    z-index: 9000; /* 前面表示 */
  }
.content {
  max-width: 800px;        /* 横幅を制限する（必要に応じて） */
}

  /* キャッチフレーズのサイズ縮小 */
.main-catch {
  font-size: 1.5rem; /* 少し小さめのサイズ（約19px）でメインとの階層差を出す */
}
/* サブキャッチコピーのスタイル（例：「豊臣秀吉ゆかりの神社」） */
.sub-catch {
  font-size: 1rem;          /* 少し小さめのサイズ（約16px）でメインとの階層差を出す */
  font-weight: bold;        /* 文字を太くする（太字） */
}


 /* iframe（Googleマップ等）を画面にフィットさせる */
   iframe {
    width: 100%; /* 画面いっぱいに広げる */
    height: auto; /* 高さは自動調整 */

  }
.info {
  margin-top: 5vh; /* 上から画面の5%分下げて配置 */

  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.8); /* より濃い半透明黒背景 */
    z-index: 110; /* 前面表示 */
}
  .info-indent4 {
    display: none;
  }
  /* 電話番号リンクの色を親要素の色にし、下線を消す */
  a[href^="tel:"] {
    color: inherit;           /* 親要素の文字色を継承 */
    text-decoration: none;    /* 下線を消す */
  }

  /* ホバー時のスタイル */
  a[href^="tel:"]:hover {
    opacity: 0.7;               /* ホバー時に少し透明にする */
    cursor: pointer;           /* カーソルを「指の形（クリックできる）」に変更 */
    text-shadow: 0 0 5px white; /* 白色の光のような影を文字に付ける */
  }  

}