/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #333;  /* フォールバック用 */
  background-image: url("images/skhp-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
}


img {
  max-width: 100%;
  height: auto;
}

/* ---------------- ヘッダー全体 ---------------- */
header {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 15px 30px;
  background: #000;
　 width: 100%;         
}
.right-area {
  display: flex;
  align-items: center;
}
.menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  margin-left: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
}
.social-links {
  display: flex;
  align-items: center;
  margin-left: 20px; /* メニューとの間隔 */
}
.social-links a {
  font-size: 1.6rem;
  margin-left: 15px;
  transition: transform 0.2s;
}
.social-links a:hover {
  transform: scale(1.2);
}

.social-links a:nth-child(1) { color: #ff0000; }  /* YouTube 赤 */
.social-links a:nth-child(2) { color: #1da1f2; }  /* X 青 */
.social-links a:nth-child(3) { color: #e4405f; }  /* Instagram ピンク */
.social-links a:nth-child(4) { color: #69C9D0; }  /* TikTok 黒 */
/* 左側（バナー＋赤アイコン） */
header .branding {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ←必ず左寄せ */
}

/* バナー */
header .logo img {
  height: 90px;
  margin-right: 20px;
}

/* 赤アイコン（スマホ時用） */
header .icon img {
  height: 90px;
  margin-left: 8px;
  margin-bottom: 0;
}

/* ナビゲーションとSNSを右に寄せるためのラッパー */
header .right-area {
  display: flex;
  align-items: center;
  margin-left: auto; /* ロゴの右側に押しやる */
}
/* ナビゲーション */
header nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav li {
  margin-left: 20px;
}

header nav li.bus img {
  height: 60px;
  display: block;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.social-links {
  display: flex;
  align-items: center;
  margin-left: 20px; /* navとの間隔 */
}
/* ---------------- ヒーローセクション ---------------- */
.hero {
  position: relative;
  text-align: center;
  color: #fff;
  width: 100%;
  overflow: hidden;
　min-height: auto;       /* ← 高さ固定をやめる */
  display: flex;
  flex-direction: column; /* 縦並び */
  justify-content: flex-start; /* ← 上から順番に並べる */
  align-items: center;
  padding-top: 0px;
  margin-top: 0;       /* ヘッダーとの余白 */
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
}

.main-image-container {
  position: relative; /* 子要素の基準 */
  display: inline-block;
}

.hero-text {
  position: absolute;
  top: 55%;
  left: 75%;      /* 白い円の位置に合わせて微調整 */
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  z-index: 20;     /* 画像の上に出すため */
}

.hero-text h1 {
  font-size: 2.0rem;
  margin-bottom: 12px;
}

.hero-text p {
  font-size: 1.2rem;
  margin: 0;
}

/* ---------------- フッター ---------------- */
footer {
  background-color: #000;
  color: #fff;
  padding: 30px 40px;
  text-align: center;
}

footer nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 10px;
}

footer nav ul li {
  margin: 0 10px;
}

footer nav ul li a {
  color: #fff;
  text-decoration: none;
}

footer nav ul li a:hover {
  color: #f39c12;
}

/* ---------------- レスポンシブ対応 ---------------- */

/* PC用設定 */
@media (min-width: 769px) {
  /* アイコンは非表示 */
  header .icon,
  header .icon img {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ロゴを左から50px寄せる */
  header .logo {
    margin-left: 50px !important;
  }

  /* バスは表示 */
  header nav li.bus {
    display: inline-block !important;
  }
}

/* スマホ用設定 */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    padding: 4px 10px;
  }

  header nav ul {
    flex-direction: column;
    margin-top: 10px;
  }

  header nav ul li {
    margin: 10px 0;
  }

  /* ロゴ縮小 */
  header .logo img {
    height: 42px;
  }

  /* バス非表示 */
  header nav li.bus {
    display: none !important;
  }

  /* アイコン表示 */
  header .icon,
  header .icon img {
    display: block !important;
    visibility: visible !important;
    height: 42px;
    margin-bottom: 0;
  }

  .hero-text h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .hero-text p {
    font-size: 1rem;
    margin: 0;
  }
}
/* Lightbox（初期は非表示） */
#lightbox-modal {
  display: none;
  position: fixed;      /* ← 画面全体に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
  z-index: 5000;        /* サイド画像やヘッダーより前に出す */
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 表示状態 */
#lightbox-modal.show {
  display: flex;
}

/* 表示画像 */
#lightbox-img.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  object-fit: contain;
}

/* 閉じるボタン */
#lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  z-index: 5100;
}
/* Heroセクションを基準に配置できるよう relative */
.main-image-container {
 display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0px;
  padding-top: 0;
}

/* サイド画像（縦並び） */
.side-images-vertical {
  position: absolute;        /* heroの中で配置 */
  top: 50%;                  /* 縦の中央に寄せる */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;                /* hero画像の上に出す */
}

/* 左右の配置 */
.side-images-left {
  left: 10px;   /* hero左端から10px */
}

.side-images-right {
  right: 10px;  /* hero右端から10px */
}

/* サイド画像の見た目 */
.side-images-vertical .side-image {
  width: 80px;
  height: auto;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}

.side-images-vertical .side-image:hover {
  transform: scale(1.05);
}

/* スマホでは非表示にして崩れ防止 */
@media (max-width: 768px) {
  .side-images-vertical {
    display: none;
  }
}
/* サイド画像を大きく */
.side-images-vertical .side-image {
  width: 150px;   /* ← 今100pxくらい → 150pxに拡大 */
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}

.side-images-vertical .side-image:hover {
  transform: scale(1.08);
}
/* ---------------- ヒーローセクション ---------------- */
.hero {
  position: relative;
  text-align: center;
  color: #fff;
  width: 100%;
  min-height: 100vh;    /* 画面全体の高さを確保 */
  display: flex;
  flex-direction: column;   /* 子要素を縦並びに */
  justify-content: center;  /* 縦方向中央揃え */
  align-items: center;      /* 横方向中央揃え */
  overflow: hidden;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  color: #ccc;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  z-index: 1000; /* 他の要素より上に表示 */
}
.main-image-container {
  display: flex;
  justify-content: center;   /* 横方向中央 */
  align-items: center;       /* 縦方向中央 */
  min-height: 70vh;          /* 画面の70%高さ分確保 */
  padding-top: 50px;         /* 必要なら微調整 */
  box-sizing: border-box;
  margin-top: 20px;
}

/* ===== PCデフォルト ===== */
.hero-image {
max-width: 80%;   /* ← ここで大きさ調整 */
  margin: 0 auto;
  display: block;}

.side-images-wrapper {
  display: contents; /* PCでは無効化 */
}
.side-images-vertical {
  position: absolute;        /* ← fixed ではなく absolute */
  top: 50%;                  /* hero の高さの中央 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}


.side-images-left { left: 10px; }
.side-images-right { right: 10px; }

.side-image {
  width: 120px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.side-image:hover {
  transform: scale(1.08);
}

/* ===== スマホ表示 (768px以下) ===== */
@media (max-width: 768px) {
  /* hero の中に重ねないようにする */
  .side-images-vertical {
    position: static !important;   /* ← absolute を解除 */
    flex-direction: row;           /* 横並び */
    justify-content: center;
    gap: 10px;
    margin: 15px auto;
    z-index: auto;                 /* 重なりも解除 */
  }

  /* サムネサイズを少し小さめに */
  .side-images-vertical .side-image {
    width: 90px;
    height: auto;
  }

  /* hero 画像を上に、その下にサイド画像を置く */
  .main-image-container {
    flex-direction: column;
    margin-top: 0;
  }

  .hero-image {
    max-width: 90%;
    margin: 0 auto 15px;
  }
}
@media (max-width: 768px) {
  .hero-text {
    position: static;        /* ← absolute解除 */
    transform: none;         /* 中央寄せ解除 */
    background: rgba(0,0,0,0.85);
    margin: 10px auto;
    width: 90%;              /* 横幅をスマホに合わせる */
    border-radius: 8px;
    text-align: center;
    order: -1;               /* ← flexの先頭（メイン画像の前）に移動 */
    margin-top: 0;
}
header {
    margin-bottom: 0;   /* ヘッダー下の余白を消す */
    padding-bottom: 0;  /* 念のため */
  }

}