/* ==========================================================
   共通設定
========================================================== */

body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

/* ロゴ */
.site-logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

/* ==========================================================
   HEADER
========================================================== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

/* ナビ + SNS 全体ラッパー */
.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* メニュー */
.header-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-menu li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: 0.2s;
}

.header-menu li a:hover {
  opacity: 0.7;
}

/* SNS */
.header-sns {
  display: flex;
  gap: 12px;
  margin-left: 25px;
}

.header-sns a {
  font-size: 20px;
  color: #673ab7;
  text-decoration: none;
}
.header-sns a:hover {
  opacity: 0.7;
}

/* ==========================================================
   FRONT PAGE（トップ）
========================================================== */

.front-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.simple-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 30px;
}

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

/* ==========================================================
   カード一覧（共通）
========================================================== */

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.card {
  width: calc(33.333% - 17px);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transition: .3s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.card-title {
  padding: 12px 15px 5px;
  font-size: 18px;
  font-weight: bold;
}
.card-date {
  padding: 0 15px 12px;
  font-size: 14px;
  color: #666;
}

/* ▼ NEWS（赤） */
.news-section h2 { border-left: 6px solid #d33; padding-left: 10px; }
.news-section .card { background: #ffecec; border-color: #f4b9b9; }

/* ▼ 駅（青） */
.station-section h2 { border-left: 6px solid #2c6ad3; padding-left: 10px; }
.station-section .card { background: #e3f2fd; border-color: #bbd1ff; }

/* ▼ バス（緑） */
.bus-section h2 { border-left: 6px solid #2c9c4b; padding-left: 10px; }
.bus-section .card { background: #f1f8e9; border-color: #b5e3c4; }

/* ==========================================================
   中央寄せメインレイアウト
========================================================== */

.page-main,
.station-single,
.busstop-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-main h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* ==========================================================
   Single News（赤）
========================================================== */

.single-news h1.news-title {
  font-size: 32px;
  margin-bottom: 10px;
}

.single-news .news-date {
  color: #777;
  margin-bottom: 25px;
}

.single-news .news-content {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* 戻るボタン（赤） */
.back-link a {
  display: inline-block;
  padding: 10px 16px;
  background: #fde2e2;
  color: #c33;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}
.back-link a:hover { opacity: .8; }

/* ==========================================================
   Single Station（青）
========================================================== */

/* ============================================
   駅個別ページ（single-station）最適化
============================================ */
.station-single {
  max-width: 750px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* タイトル */
.station-single .station-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #222;
  line-height: 1.4;
}

/* 写真 */
.station-single .station-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.back-link-station a {
  display: inline-block;
  padding: 10px 20px;
  background: #e7f0ff;         /* 薄い青 */
  color: #0d47a1;              /* 濃い青 */
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #9bbcf7;
  transition: 0.2s;
}

.back-link-station a:hover {
  background: #0d47a1;
  color: #fff;
}

/* 訪問地＆訪問日 */
.station-single .station-info {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

/* メモ */
.station-single .memo-head {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}

.station-single .memo-text {
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 15px;
}

/* 地図 */
.station-single .map {
  margin: 30px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.station-single iframe {
  width: 100%;
  border: none;
}

/* 戻る（青） */
.back-link-station a {
  display: inline-block;
  padding: 10px 16px;
  background: #e7f0ff;
  color: #0d47a1;
  border-radius: 6px;
  text-decoration: none;
}
.back-link-station a:hover { opacity: .8; }

/* ==========================================================
   Single Busstop（緑）
========================================================== */

/* ============================
   バス停シングルページ
   ============================ */
/* ============================
   バス停シングルページ（stationと同じ）
   ============================ */
.bus-single {
  max-width: 750px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* タイトル */
.bus-single .bus-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #222;
  line-height: 1.4;
}

/* 写真（複数あっても同じデザイン） */
.bus-single .bus-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* 住所 / 路線 / 訪問日など */
.bus-single .bus-info {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

/* メモ（説明） */
.bus-single .memo-head {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.bus-single .memo-text {
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 15px;
}

/* 地図（写真と同じ幅） */
.bus-single .map {
  margin: 30px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.bus-single iframe {
  width: 100%;
  border: none;
}

/* 戻る（緑） */
.back-link-bus a {
  display: inline-block;
  padding: 10px 20px;
  background: #e7f7e7;        /* 薄いグリーン */
  color: #1b5e20;             /* 濃いグリーン */
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #9dd8a0;
  transition: 0.2s;
}
.back-link-bus a:hover {
  background: #1b5e20;
  color: #fff;
}

/* ==== ガラス風ヘッダー（透明＋白ぼかし） ==== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;

  background: rgba(255, 255, 255, 0.6); /* 半透明の白 */
  backdrop-filter: blur(10px);          /* ぼかし */
  -webkit-backdrop-filter: blur(10px);  /* Safari対応 */
  
  border-bottom: 1px solid rgba(255,255,255,0.3);
}