/*
 * 1. CSSリセット (Reset)
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

/*
 * 2. アニメーションキーフレーム (トップレベルに移動)
 */
@keyframes move-around {
  /* 左上 (Top-Left) */
  0% {
    top: 0px;
    left: 0px;
  }
  /* 右上 (Top-Right) */
  25% {
    top: 0px;
    left: calc(100% - 36px);
  }
  /* 右下 (Bottom-Right) */
  50% {
    top: calc(100% - 36px);
    left: calc(100% - 36px);
  }
  /* 左下 (Bottom-Left) */
  75% {
    top: calc(100% -px);
    left: 0px;
  }
  /* 左上に戻る (Top-Left) */
  100% {
    top: 0px;
    left: 0px;
  }
}

/*
 * 3. 基本設定 (Base Styles)
 */
body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;
  /* 複数の背景画像設定 */
  background-image: url("../photos/background/background_all2.png");
  /* SCSSの記述を解釈し、奥から手前に配置を調整（background.pngを一番奥にする） */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed; /* 1つの値で全てに適用 */
  background-size: cover; /* 1つの値で全てに適用 */
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 70px 20px;
}

/*
 * 4. ヘッダーとナビゲーション (Header & Navigation)
 */
header {
  background-color: #003366;
  color: #ffffff;
  padding: 20px 0 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 修正: リンクのネストを解消 */
header a {
  text-decoration: none;
  color: #ffffff;
}

header h1 {
  font-size: 1.8em;
  margin-bottom: 0px;
  text-align: center;
}

header nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* 修正: ul:hover を適用 */
header nav li:hover {
  background-color: #002244;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

header nav ul li {
  padding: 8px 15px;
  border: #ffffff 1px solid;
}

header nav ul li a:hover {
  color: #ffd700;
}

/*
 * 5. メインコンテンツのセクション (Main Sections)
 */
section {
  background-color: #ffffff;
  overflow: hidden;
  padding: 40px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 85%;
  text-align: center;
  margin: 0 auto 25px auto;
  /* アニメーションの基準点として必須 */
  position: relative;
  z-index: 1;
}

section.animate-section::before {
  content: "";
  display: block;

  /* 星のサイズと色 */
  width: 25px;
  height: 25px;
  background-color: #ffd700;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  /* 💡 修正: top/left をCSS変数で指定。初期値はセクションの左上 */
  top: var(--star1-top, 0px);
  left: var(--star1-left, 0px);
  transition: none;

  /* position: absolute の設定が抜けているため追加 */
  position: absolute;
  z-index: 10;
}
section.animate-section::after {
  content: "";
  display: block;

  /* 星のサイズ (25px * 1.5 = 37.5px) */
  width: 37.5px;
  height: 37.5px;
  background-color: #ffd700; /* 異なる色（オレンジ）にして区別しやすくします */

  /* 星の形状は同じ */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  /* 位置設定 (新しいCSS変数を使用) */
  top: var(--star2-top, 0px); /* 💡 新しい変数名を使用 */
  left: var(--star2-left, 0px); /* 💡 新しい変数名を使用 */

  transition: none;
  position: absolute;
  z-index: 10;
}
section h2 {
  color: #003366;
  font-size: 2em;
  border-bottom: 3px solid #f4f4f4;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* 特設サイトへのリンクボタン */
#Rikohakufes,
#Welcomefes {
  width: 60%;
}

/* 修正: ネストを解消 */
#Rikohakufes a,
#Welcomefes a {
  display: block;
  text-align: center;
  padding: 50px 20px;
  background-color: #e6e6fa;
  color: #003366;
  border-radius: 8px;
  transition: background-color 0.3s;
}

#Rikohakufes a h2,
#Welcomefes a h2 {
  border-bottom: none;
  margin: 0;
}

/* 修正: ネストを解消 */
#Rikohakufes:hover,
#Welcomefes:hover {
  background-color: #d8bfd8;
}
/* 修正: ホバーは a タグに適用する方が自然です。 */

#Rikohakufes a:hover,
#Welcomefes a:hover {
  background-color: #d8bfd8;
}

#Rikohakufes img {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
}

/* Introductionセクション */
#Introduction .Intro-Hakujitsu,
#Introduction .Intro-Haku_monky {
  padding: 20px;
  margin-top: 15px;
  border-left: 5px solid #003366;
  background-color: #f9f9f9;
}

/* 修正: リンクのネストを解消 */
#Introduction .Intro-Hakujitsu a,
#Introduction .Intro-Haku_monky a {
  text-decoration: none;
  color: blue;
}

#Introduction .Intro-Hakujitsu h3,
#Introduction .Intro-Haku_monky h3 {
  color: #003366;
  margin-bottom: 10px;
}

#Introduction .Hakujitsu-Logo,
#Introduction .Hakumonkey {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 10px auto;
}
#Pictures {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}
#Pictures .photo-gallery {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
#Pictures img {
  max-width: 300px;
  max-height: 200px;
  border-radius: 8px;
}

/* Accessセクションのiframe */
#Access iframe {
  display: block;
  margin: 20px auto;
  max-width: 100%;
}
/*
 * 8. SNSサイドメニュー (画面固定)
 */
.social-sidebar {
  position: fixed; /* 画面に固定する */
  top: 50%; /* 画面中央（縦方向）を基準にする */
  right: 0; /* 画面右端に配置 */
  transform: translateY(-50%); /* 縦方向の固定位置を正確に中央に調整 */
  z-index: 1000; /* 他のコンテンツの上に表示 */
  background-color: rgba(0, 51, 102, 0.8); /* 濃紺の半透明な背景 */
  padding: 10px 5px;
  border-radius: 5px 0 0 5px; /* 左側に丸みをつける */
}
.social-sidebar a {
  display: block;
  color: #ffffff;
  font-size: 0.5em; /* 💡 サイズを大きくして見やすくする */
  padding: 5px;
  transition: color 0.3s; /* 背景色ではなく文字色のみのトランジションに変更 */
}

.social-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-sidebar li {
  margin: 10px 0;
  text-align: center;
}

.social-sidebar a:hover {
  color: #ffd700; /* ホバーで金色に */
  background-color: rgba(255, 255, 255, 0.1);
}

/* モバイルでの非表示 (画面が狭いときに邪魔にならないように) */
@media (max-width: 768px) {
  .social-sidebar {
    display: none; /* スマホ画面では非表示にする */
  }
}
/*
 * 6. フッター (Footer)
 */
footer {
  text-align: center;
  padding: 20px;
  background-color: #003366;
  color: #ffffff;
  font-size: 0.9em;
  margin-top: 30px;
}

/*
 * 9. 固定ボトムバナー (スライド対応)
 */

/* PC版のスタイル: 画面下部いっぱいの帯状バナー */
.fixed-slide-banner {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  bottom: 0;
  left: 0;
  width: 100%;

  /* スタイル設定 */
  background-color: rgba(228, 239, 237, 0.95); /* 半透明の背景 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;

  /* PC版は水平スライドを実現するため Flex を使用 */
  display: flex;
  overflow-x: scroll; /* 横スクロールを許可 */
  white-space: nowrap; /* バナーが折り返さないようにする */
  padding: 5px 0;

  /* スクロールバー非表示 (任意) */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.fixed-slide-banner::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.banner-container {
  /* PC版では不要 */
  display: contents;
}

.banner-item {
  /* PC版はインライン要素 */
  flex-shrink: 0; /* 縮小しない */
  margin: 0 5px;
  opacity: 1; /* PC版は常時表示 */
  width: 150px; /* バナーの幅を固定 */
}

.banner-item a {
  display: inline-block;
  text-decoration: none;
  color: #003366;
  font-size: 0.9em;
  font-weight: bold;
}
.banner-item img {
  width: 100%;
  height: auto;
  display: block;
}
.mobile-caption {
  display: none; /* PC版ではキャプションを非表示 */
}

/*
 * 10. レスポンシブデザイン (Responsive Design)
 */
@media (max-width: 768px) {
  section {
    width: 100%;
  }
  header h1 {
    font-size: 1.5em;
  }

  header nav ul {
    display: none;
  }

  section h2 {
    font-size: 1em;
  }
  #Rikohakufes a {
    padding: 0;
  }
  #Welcomefes {
    width: 90%;
  }

  section {
    padding: 30px 15px;
  }

  #Access iframe {
    width: 100%;
  }
  .fixed-slide-banner {
    /* PC版の設定を上書きして右下固定に変更 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto;

    width: 140px; /* バナーの幅を固定 */
    height: 70px; /* バナーの高さを固定 */
    background-color: rgba(228, 239, 237, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* スライドのアニメーションを見せるため必須 */

    /* PC版のFlex設定を解除 */
    display: block;
  }

  .banner-container {
    /* スライドさせるための基準 */
    position: relative;
    height: 100%;
  }

  .banner-item {
    /* スマホ版は絶対配置で重ねる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* スライドアニメーションの初期設定 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;

    /* コンテンツの中央配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* PC版の margin/width をリセット */
    margin: 0;
    flex-shrink: 1;
    white-space: normal;
  }

  .banner-item.active {
    opacity: 1; /* active クラスが付いたバナーのみ表示 */
  }
}