/* === 全体の基本スタイル設定（背景・文字色・フォント） === */
body {
  margin: 0; /* ページ全体の余白を0にリセット */
  padding: 0; /* ページ全体の内側余白を0にリセット */
  background-color: #000; /* 背景色を黒に設定 */
  color: #fff; /* 文字色を白に設定 */
  font-family: "Yu Mincho", serif; /* フォントを「游明朝体」かセリフ体に設定 */
}
/* ===============================  
   背景スライドショー全体のコンテナ  
================================= */
.slideshow-container {
  position: fixed; /* 画面に固定しスクロールしても動かない */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅を画面いっぱいに */
  height: 100%; /* 高さも画面いっぱいに */
  overflow: hidden; /* コンテナからはみ出る部分を隠す */
  z-index: 0; /* 重なり順序を0にして背面に配置 */
}
/* ===============================  
   各スライドの基本設定  
================================= */
.slide {
  position: absolute; /* 親要素に対して絶対配置 */
  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'); /* 1枚目の背景画像 */
  animation-delay: 0s; /* アニメーション開始は即時 */
}
.slide:nth-child(2) { 
  background-image: url('../images/top002.jpg'); /* 2枚目の背景画像 */
  animation-delay: 5s; /* 5秒遅れて開始 */
}
.slide:nth-child(3) { 
  background-image: url('../images/top003.JPG'); /* 3枚目の背景画像 */
  animation-delay: 10s; /* 10秒遅れて開始 */
}
.slide:nth-child(4) { 
  background-image: url('../images/top004.jpg'); /* 4枚目の背景画像 */
  animation-delay: 15s; /* 15秒遅れて開始 */
}
.slide:nth-child(5) { 
  background-image: url('../images/top005.jpg'); /* 5枚目の背景画像 */
  animation-delay: 20s; /* 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: 10; /* 背景より前面に配置 */
}
/* PC向けスタイル */
.header-area {
  display: flex; /* フレックスボックスにして配置 */
  justify-content: space-between; /* 左右に均等配置 */
  align-items: flex-start; /* 上端揃え */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黒背景 */
  padding: 0.5rem 1rem; /* 上下0.5rem 左右1remの内側余白 */
  border-radius: 0.5rem; /* 角を丸く0.5rem */
  flex-wrap: wrap; /* 子要素を折り返し可能に */
  margin: 1rem auto; /* 上下1remの外側余白 左右中央寄せ */
  max-width: 980px; /* 最大横幅980px */
}

/* === ヘッダー表示（PC向け） === */
header {
  position: fixed; /* 固定配置 */
  top: 1rem; /* 上から1rem */
 /* left: 1rem;*/ /* 左の余白はコメントアウト中 */
  font-size: 1rem; /* フォントサイズ1rem */
  font-weight: bold; /* 太字 */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黒背景 */
  padding: 0.5rem 1rem; /* 内側余白 上下0.5rem 左右1rem */
  border-radius: 0.5rem; /* 角丸0.5rem */
 /* z-index: 100;*/ /* 重なり順序の設定はコメントアウト */
}
/* === ヘッダー内の住所・電話などの情報表示 === */
.contact-info {
  font-size: 0.9rem; /* フォントサイズ0.9rem */
  margin-top: 0.2rem; /* 上余白0.2rem */
}
/* === 白文字リンクの通常時のスタイル === */
.white-link {
  color: white; /* 文字色を白 */
  text-decoration: underline; /* 下線あり */
  text-decoration-color: white; /* 下線色を白に */
  transition: 0.3s; /* 変化に0.3秒の遷移効果 */
}
/* === 白文字リンクのホバー時のスタイル === */
.white-link:hover {
  opacity: 0.7; /* 透明度を70%に */
  cursor: pointer; /* カーソルを指マークに */
  text-shadow: 0 0 5px white; /* 白色の光の影を追加 */
}
/* === ナビゲーションメニューのスタイル（PC用） === */
nav {
  position: fixed; /* 固定配置 */
  top: 1rem; /* 上から1rem */
  right: 4rem; /* 右から5rem */
  display: flex; /* フレックスボックス */
  flex-wrap: wrap; /* 折り返し可能 */
  gap: 0.5rem; /* 要素間の間隔0.5rem */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黒背景 */
  padding: 0.5rem 1rem; /* 内側余白 */
  border-radius: 0.5rem; /* 角丸 */
  /*z-index: 100;*/ /* 重なり順序はコメントアウト */
}

nav a {
  color: #fff; /* 文字色を白 */
  text-decoration: none; /* 下線なし */
}

/* ハンバーガーアイコンとチェックボックスはデフォルト非表示（PC） */
.menu-toggle,
#menu {
  display: none; /* 非表示 */
}
/* === メインコンテンツエリアのスタイル === */
main {
  max-width: 980px; /* 最大横幅980px */
  margin: 12rem auto 4rem; /* 上12rem 下4rem 左右中央寄せ */
  padding: 1rem; /* 内側余白1rem */
  line-height: 1.8; /* 行の高さ1.8倍 */
}
/* === h1見出し（左に金色線） === */
h1 {
  border-left: 6px solid #c59e47; /* 左側に6px幅の金色線 */
  padding-left: 1rem; /* 左内側余白1rem */
}
/* === h2見出し（下線） === */
h2 {
  margin-top: 2rem; /* 上外側余白2rem */
  border-bottom: 1px solid #555; /* 下線1px、濃いグレー */
  padding-bottom: 0.5rem; /* 下内側余白0.5rem */
}
/* ===============================  
   お知らせ・案内・地図など  
================================= */
.info {
  background: rgba(0, 0, 0, 0.8); /* より濃い半透明黒背景 */
  padding: 2rem 1rem; /* 内側余白 上下2rem、左右1rem */
}
.info-content {
  max-width: 800px; /* 最大横幅800px */
  margin: auto; /* 左右中央寄せ */
  line-height: 1.8; /* 行間1.8倍 */
}

.info-content h3 {
  font-size: 1.4rem; /* 見出しのフォントサイズ */
  font-weight: bold; /* 太字 */
  margin-top: 2rem; /* 上外側余白2rem */
  border-bottom: 1px solid #555; /* 下に1pxの線 */
}
.info-indent1 {
  font-size: 1.4rem; /* 中見出しサイズ */
  font-weight: bold; /* 太字 */
}
.info-indent {
  margin-left: 0.5em; /* 左に0.5emの余白 */
}
.info-indent2 {
  margin-left: 3em; /* 左に3emの余白 */
}
.info-indent3 {
  margin-left: 4.5em; /* 左に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;            /* ボタン間の余白 */
}

/* === 写真ギャラリーのレイアウト（横並び・中央寄せ） === */
.photos {
  display: flex; /* 横並びに配置 */
  flex-wrap: wrap; /* 折り返し可能 */
  gap: 1rem; /* 子要素間の間隔1rem */
  margin-top: 1.5rem; /* 上に1.5remの余白 */
  justify-content: center; /* 中央寄せ */
}
/* === 写真画像のサイズと装飾 === */
.photos img {
  width: 200px; /* 幅を200pxに固定 */
  border-radius: 0.5rem; /* 角を丸く0.5rem */
  border: 2px solid #666; /* 2pxのグレーの枠線 */
}

/* === 戻るボタンの外枠エリア === */
.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; /* 角丸 */
}

/* === 送信ボタンのスタイル === */
input[type="submit"] {
  background-color: #cc0000; /* 赤色背景 */
  color: white; /* 文字色白 */
  padding: 0.8rem 2rem; /* 内側余白 上下0.8rem 左右2rem */
  font-size: 1.1rem; /* 文字サイズ1.1rem */
  border: none; /* 枠線なし */
  border-radius: 0.4rem; /* 角丸 */
  cursor: pointer; /* ポインターカーソル */
  transition: background-color 0.3s ease; /* 背景色の変化に0.3秒かけてスムーズに */
}

/* === 送信ボタンのホバー時スタイル === */
input[type="submit"]:hover {
  background-color: #990000; /* ホバー時は濃い赤に変更 */
}
    .form-buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .form-buttons form {
      margin: 0;
    }
    input[type="submit"] {
      padding: 0.5rem 1.5rem;
      font-size: 1rem;
    }

/* === リセットボタンのスタイル === */
input[type="reset"] {
  background-color: #cc0000; /* 赤色背景 */
  color: white; /* 文字色白 */
  padding: 0.8rem 2rem; /* 内側余白 上下0.8rem 左右2rem */
  font-size: 1.1rem; /* 文字サイズ1.1rem */
  border: none; /* 枠線なし */
  border-radius: 0.4rem; /* 角丸 */
  cursor: pointer; /* ポインターカーソル */
  transition: background-color 0.3s ease; /* 背景色の変化に0.3秒かけてスムーズに */
}

/* === リセットボタンのホバー時スタイル === */
input[type="reset"]:hover {
  background-color: #990000; /* ホバー時は濃い赤に変更 */
}
/* === リセットボタンのスタイル === */
input[type="button"] {
  background-color: #cc0000; /* 赤色背景 */
  color: white; /* 文字色白 */
  padding: 0.8rem 2rem; /* 内側余白 上下0.8rem 左右2rem */
  font-size: 1.1rem; /* 文字サイズ1.1rem */
  border: none; /* 枠線なし */
  border-radius: 0.4rem; /* 角丸 */
  cursor: pointer; /* ポインターカーソル */
  transition: background-color 0.3s ease; /* 背景色の変化に0.3秒かけてスムーズに */
}

/* === リセットボタンのホバー時スタイル === */
input[type="button"]:hover {
  background-color: #990000; /* ホバー時は濃い赤に変更 */
}

/* === 問い合わせ画面の設定 === */
#contents {
  width: 700px; /* 幅700px */
  margin: 0 auto; /* 左右中央寄せ */
  color: white; /* 文字色白 */
  font-size: 90%; /* フォントサイズ90%に縮小 */
}
/* ===== お問い合わせフォーム全体のスタイル ===== */
.contact-form {
  width: 500px; /* フォームの横幅を500pxに設定（PC用にちょうどよい幅） */
  max-width: 100%; /* スマホ時に親要素よりはみ出さないようにする */
  margin: 3rem auto; /* 上下に3remの余白、左右は中央に配置（autoで左右中央寄せ） */
  padding: 2rem 2.5rem; /* 内側の余白：上下2rem、左右2.5remでバランスを整える */
  background-color: #f8f8f8; /* 背景色をやや明るいグレーに設定 */
  border: 1px solid #ccc; /* 枠線を薄いグレーで設定 */
  border-radius: 16px; /* 角を丸くする（半径16px）ことで柔らかい印象に */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 下方向にやや大きめの影を追加し立体感を出す */
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; /* フォントは和文ゴシック系を優先 */
}

/* ===== フォームのタイトルのスタイル ===== */
.form-title {
  /*text-align: center;*/ /* 文字を中央揃え */
  font-size: 1.8rem; /* タイトルの文字サイズを1.8倍に（見出しに適した大きさ） */
  margin-bottom: 2rem; /* 下に2remの余白（フォーム本体と区別） */
  color: #333; /* 文字色はやや濃いグレーで読みやすく */
  border-bottom: 2px solid #ccc; /* 下に線を入れてセクションを区切る */
  padding-bottom: 0.5rem; /* 下線との間に少し余白を空ける */
}

/* ===== 各フォーム項目のブロック全体のスタイル ===== */
.form-group {
  margin-bottom: 1.5rem; /* 各項目間に1.5remの余白を追加して間隔を広げる */
}

/* ===== 各項目のラベル（お名前、メールなど）のスタイル ===== */
.form-group label {
  display: block; /* ブロック要素にして下の入力欄と縦並びに */
  margin-bottom: 0.6rem; /* ラベルと入力欄の間に余白 */
  font-weight: bold; /* 太字で見やすく */
  color: #444; /* ラベルの文字色はやや濃いグレー */
  font-size: 1rem; /* 通常の文字サイズ */
}

/* ===== 「※必須」などに使う赤いアスタリスクのスタイル ===== */
.required {
  color: #e60000; /* 鮮やかな赤色で必須項目であることを目立たせる */
  font-size: 0.9rem; /* 少し小さめにして補足的な表示に */
  margin-left: 0.3rem; /* ラベルのすぐ右に余白を入れる */
}
/* select ボックス全体の文字色を placeholder に近い薄いグレーに設定 */
select {
  color: #999; /* ← placeholder の色と合わせる。例: #999（薄いグレー） */
}

/* 選択されたあとに文字色を濃くしたい場合はこうします */
select:valid {
  color: #333; /* 通常の文字色（濃いグレーなど） */
}

/* ===== 入力欄全般のスタイル（text, email, select, textarea） ===== */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%; /* 横幅をフォームの幅いっぱいに広げる */
  padding: 0.8rem; /* 内側の余白を0.8remでタップしやすく見やすい */
  border: 1px solid #aaa; /* 入力欄の枠線をやや濃いグレーで見やすく */
  border-radius: 8px; /* 角を少し丸めて柔らかい印象に */
  font-size: 1rem; /* 通常の文字サイズ */
  box-sizing: border-box; /* パディングやボーダーを含めて幅計算（レイアウトが崩れにくい） */
  background-color: #fff; /* 入力欄は白背景で清潔感と視認性を確保 */
  color: #333; /* 入力文字の色をやや濃いグレーで読みやすく */
}

/* ===== テキストエリア（問い合わせ内容）のみ調整 ===== */
textarea {
  resize: vertical; /* ユーザーが高さだけを変更可能に（横幅は固定） */
}

/* ===== ボタンを並べる領域のスタイル ===== */
.form-buttons {
  display: flex;          /* 横並びにする */
  justify-content: center;/* 中央寄せに配置 */
  gap: 1rem;              /* ボタン同士の隙間 */
  flex-wrap: nowrap;      /* 折り返しを防ぐ（横に収まる限り） */
}

.form-buttons input {
  min-width: 120px;       /* ボタンの最小幅を設定 */
  font-size: 1rem;        /* 適切な文字サイズ */
  padding: 0.6rem 1.5rem; /* タップしやすい大きさ */
  flex: 0 0 auto;         /* ボタンの幅を固定する（伸縮させない） */
}

/* ===== 送信ボタン・リセットボタンの共通スタイル ===== */
.form-buttons input[type="submit"],
.form-buttons input[type="reset"] {
  background-color: #cc0000; /* ボタンの背景色を神社らしい深い赤に */
  color: white; /* ボタンの文字色は白にしてコントラストを確保 */
  padding: 0.8rem 2.5rem; /* ボタン内の余白を広めにとって押しやすくする */
  font-size: 1.1rem; /* ボタンの文字サイズを少し大きめに設定 */
  border: none; /* ボタンの枠線を消してシンプルな見た目に */
  border-radius: 8px; /* ボタンの角を丸くして親しみやすいデザインに */
  cursor: pointer; /* ホバー時にポインター（手の形）に変える */
  transition: background-color 0.3s ease; /* ホバー時の色変化にアニメーション効果をつける */
}

/* ===== ボタンにマウスを載せたときの変化（ホバー効果） ===== */
.form-buttons input[type="submit"]:hover,
.form-buttons input[type="reset"]:hover {
  background-color: #990000; /* 少し暗めの赤に変化してアクションを感じさせる */
}
/* ===== 確認画面の表示用スタイル（出力された値） ===== */
.confirm-value {
  padding: 0.8rem;  /* 内側の余白を上下左右に0.8rem確保 内容を詰まりすぎず読みやすくする */
  background-color: #fff;    /* 背景色を白に設定。フォーム全体が淡い背景の場合に見やすくなる */
  border: 1px solid #ccc;    /* 薄いグレーの実線で囲み、内容のブロックを視覚的に区切る */
  border-radius: 8px;        /* 角を8pxだけ丸めて、柔らかく上品な印象にする */
  font-size: 1rem;         /* フォントサイズを標準サイズに設定（親要素のサイズを基準にする） */
  color: #333;             /* 文字色を濃いグレーに設定。黒より少し柔らかく見える */
  white-space: pre-wrap; /* 入力された改行や空白をそのまま表示しつつ、長い行は自動で折り返す */
  line-height: 1.6;       /* 行間を1.6倍に設定し、読みやすさを向上させる */
}


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

  /* ハンバーガーアイコンを表示 */
  .menu-toggle {
    display: flex; /* フレックス表示 */
    flex-direction: column; /* 縦方向に積む */
    gap: 6px; /* 棒の間隔6px */
    position: fixed; /* 画面に固定 */
    top: 1rem; /* 上から1rem */
    right: 1rem; /* 右から1rem */
    z-index: 101; /* ナビより前面 */
    width: 30px; /* 幅30px */
    height: 25px; /* 高さ25px */
    cursor: pointer; /* 指マークカーソル */
    /* 背景色と装飾 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黒背景 */
    padding: 8px; /* 内側余白8px */
    border-radius: 6px; /* 角丸6px */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* 軽い影 */
  }

  /* ハンバーガーの各棒部分 */
  .menu-toggle span {
    display: block; /* ブロック要素化 */
    height: 3px; /* 高さ3px */
    background: #fff; /* 白色 */
    border-radius: 2px; /* 角丸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; /* 内側余白1rem */
    width: 120px; /* 幅120px */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 軽い影 */
    z-index: 100; /* 重なり順序100 */
  }

  /* スマホ用ナビゲーション内のリンク */
  nav a {
    padding: 0.5rem 0; /* 上下に0.5remの余白 */
    color: #000; /* 黒文字 */
    font-size: 1rem; /* 文字サイズ1rem */
  }

  /* チェックボックスがチェックされていたらメニュー表示 */
  #menu:checked ~ nav {
    display: flex; /* 表示をflexに切替 */
  }
main {
  margin: 8rem auto 4rem; /* 上8rem 下4rem 左右中央寄せ */
}

  /* === ヘッダー表示（スマホ向け） === */
  header {
    position: fixed; /* 固定配置 */
    top: 1rem; /* 上から1rem */
   /* left: 1rem;*/ /* 左の余白はコメントアウト */
    font-size: 0.7rem; /* フォントサイズ小さめ */
    font-weight: bold; /* 太字 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黒背景 */
    padding: 0.5rem 1rem; /* 内側余白 */
    border-radius: 0.5rem; /* 角丸 */
  /*  z-index: 100;*/ /* z-indexはコメントアウト */
  }
  /* === ヘッダー内の住所・電話などの情報表示 === */
  .contact-info {
    font-size: 0.7rem; /* フォントサイズ小さめ */
    margin-top: 0.2rem; /* 上余白 */
  }
  /* === 白文字リンクの通常時のスタイル === */
  .white-link {
    color: white; /* 白文字 */
    text-decoration: underline; /* 下線あり */
    text-decoration-color: white; /* 下線白 */
    transition: 0.3s; /* 変化をスムーズに */
  }
  /* === 白文字リンクのホバー時のスタイル === */
  .white-link:hover {
    opacity: 0.7; /* 半透明に */
    cursor: pointer; /* 指マークカーソル */
    text-shadow: 0 0 5px white; /* 光の影 */
  }
.info-indent2 {
  margin-left: 0.5em; /* 左に0.5emの余白 */
}

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

  }

/* === 問い合わせ画面 === */
#contents {
    width: 100%; /* スマホでは画面幅の90%に拡張して余白を残しつつも広めに表示 */
    font-size: 95%; /* フォントサイズをやや戻して読みやすく */
    padding: 1rem 0; /* 上下に少し余白を追加 */
  }

.contact-form {
  width: 90%;           /* 画面幅の90%にすることで、左右に少し空白を確保 */
  padding: 0.5rem;       /* 内側の余白（ボックス内の余白） */
 /* margin: 1rem auto;*/     /* 外側の余白（上下に1rem、左右は中央揃えにする） */
}
  .form-title {
    font-size: 1.5rem; /* タイトルサイズを少しだけ小さくする */
    margin-bottom: 1.5rem;
  }

  input[type="text"],
  input[type="email"],
  select {
    font-size: 1rem; /* 表示部分の文字サイズ */
    padding: 0.7rem;
  }
  textarea {
    font-size: 1rem;
    padding: 0.7rem;
    height: 150px; /* ここで高さを直接指定（例：300px） */
  }

  .form-buttons {
    flex-direction: column; /* 本当に画面が狭い場合は縦に並べる */
    align-items: center;
  }

  .form-buttons input {
    width: 80%; /* 幅を画面に合わせて広げる */
    text-align: center;
  }

  .confirm-value {
    font-size: 0.95rem; /* フォント少し小さめ */
    padding: 0.7rem;
    line-height: 1.5;
  }

}