/* =========================
   基本設定
   ========================= */

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #111;
  background: #fff;
}

/* =========================
   共通ヘッダー（修正版）
   ========================= */

.site-header {
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.header-inner {
  max-width: 1200px;
  margin: auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ロゴ */
.logo {
  height: 64px;
}

.logo-link {
  display: inline-block;
}

/* メインナビ */
.main-nav {
  margin-left: auto;
  font-size: 0.95em;
}

.main-nav a {
  text-decoration: none;
  color: #111;
}

.divider {
  margin: 0 8px;
  color: #aaa;
}

/* ヘッダー操作部 */
.header-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}


/* =========================
   スライダー
   ========================= */

.slider {
  position: relative;
  height: 55vh;
  overflow: hidden;
}

.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.slider img.active {
  opacity: 1;
}

/* =========================
   メインコンテンツ
   ========================= */

.content {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.info h2,
.sns h2 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.news {
  list-style: none;
  padding: 0;
}

.news li {
  margin-bottom: 10px;
}

.news span {
  color: #555;
  margin-right: 10px;
}

/* =========================
   フッター
   ========================= */

footer {
  border-top: 1px solid #ddd;
  background: #fafafa;
}

.footer-inner {
  max-width: 1200px;
  margin: auto;
  padding: 30px 20px;
  font-size: 0.9em;
  line-height: 1.6;
}

footer a {
  color: #111;
}

.copyright {
  margin-top: 20px;
  font-size: 0.85em;
}

/* =========================
   下層ページ共通
   ========================= */

/* 1段組 */
.single-column {
  grid-template-columns: 1fr !important;
}

/* セクション装飾 */
.single-column section {
  margin-bottom: 60px;
  padding: 30px;
  background: #fafafa;
  border-left: 5px solid #111;
}

.single-column h2 {
  margin-top: 0;
  font-size: 1.6em;
}

.single-column h3 {
  margin-top: 30px;
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

/* =========================
   展示解説書
   ========================= */

.guide-books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.guide-books img {
  width: 100%;
  border: 1px solid #ccc;
  transition: transform 0.2s, box-shadow 0.2s;
}

.guide-books img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* =========================
   スタッフ紹介
   ========================= */

.staff-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.staff-card {
  display: flex;
  gap: 20px;
  align-items: center;
}

.staff-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.staff-text h3 {
  margin: 0 0 6px;
  font-size: 1.1em;
}

.staff-meta {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 8px;
}

.staff-text p {
  line-height: 1.8;
}

/* ===== ご利用案内 ===== */

.guide-list {
  list-style: disc;
  padding-left: 20px;
  line-height: 1.8;
}

.table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.price-table th,
.price-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.price-table th span {
  font-weight: normal;
  font-size: 0.85em;
}

.note {
  font-size: 0.9em;
  color: #555;
}

.map-wrapper {
  width: 100%;
  height: 350px;
  margin: 20px 0;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.access-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.access-images img {
  width: 100%;
  border-radius: 6px;
}

.placeholder {
  color: #777;
  font-style: italic;
}


/* ========================= 体験メニュー 情報ボックス ========================= */ 

.info-box { 
  background: #f4f9fb; /* やさしい水色（海イメージ） */ 
  border-left: 6px solid #2b7da0; 
  padding: 12px 16px; 
  margin: 16px 0 24px; 
  font-size: 0.95rem; 
  line-height: 1.7; 
} 

.info-box strong { 
  color: #2b7da0; 
}

/* =========================
   画像表示の統一
   ========================= */

.image-box {
  width: 100%;
  max-width: 360px;
  height: 240px;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}

.image-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* =========================
   スマホ対応
   ========================= */

@media (max-width: 768px) {

  body {
    font-size: 16px;
    line-height: 1.7;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    height: 56px;
  }

  .main-nav {
    width: 100%;
    margin-top: 10px;
  }

  .main-nav a {
    display: inline-block;
    margin: 6px 12px 6px 0;
  }

  .slider {
    height: 40vh;
  }

  .content {
    grid-template-columns: 1fr;
    padding: 30px 15px;
  }

  .single-column section {
    padding: 20px 16px;
    margin-bottom: 40px;
    background: #fff;
    border-left: none;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  }

  .single-column h2 {
    font-size: 1.4em;
    border-bottom: 2px solid #111;
    padding-bottom: 6px;
  }

  .single-column h3 {
    font-size: 1.1em;
    border-left: 4px solid #111;
    padding-left: 10px;
  }

  .staff-card img {
    width: 90px;
    height: 90px;
  }

  .image-box {
    max-width: 100%;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .guide-books {
    grid-template-columns: 1fr;
  }
}

.last-updated {
  font-size: 0.85em;
  color: #555;
  margin-top: 10px;
}

/* =========================
   トップ：下部2カラム構成
   ========================= */

.bottom-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* ← ★ここを変更 */
  gap: 40px;
}

/* Facebook */
.facebook-box iframe {
  border-radius: 8px;
}

/* 各リンク集 */
.links-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =========================
   各リンク集：共通バナー
   ========================= */

.link-banner {
  width: 100%;
  height: 120px;
  background: #f4f6f8;
  border-radius: 8px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}

.link-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.link-banner img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* =========================
   SNS：バナー化（統一）
   ========================= */


/* SNSを横並び */
.sns-row {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 6px;
}

/* aタグの装飾完全除去 */
.sns-row a {
  display: block;
  text-decoration: none;
  line-height: 0;
}

/* SNSロゴのサイズ安定 */
.sns-row img {
  height: 48px;          /* スマホでも安全 */
  width: auto;
  max-width: 100%;
}

/* スマホ微調整 */
@media (max-width: 768px) {
  .sns-row {
    gap: 10px;
  }

  .sns-row a {
    display: block;
    text-decoration: none;
    line-height: 0;
  }

  .sns-row img {
    height: 44px;
  }
}


/* =========================
   スマホ：1段にする
   ========================= */
@media (max-width: 768px) {
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* トップページ見出しの下線統一 */
.info h2,
.facebook-box h2,
.links-box h2 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

/* =========================
   スマホでも見出し下線を表示
   ========================= */
@media (max-width: 768px) {
  .facebook-box h2,
  .links-box h2 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    margin-bottom: 16px;
  }
}