/* ==========================================================
   レスポンシブデザイン
========================================================== */

/* ----------------------------------------------------------
   スマホ：～767px
---------------------------------------------------------- */
@media (max-width: 767px) {
  /* ヘッダー */
  .site-header {
    padding: 12px 20px;
  }
  
  .logo-text {
    font-size: 1.2rem;
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
  }
  
  .header-nav {
    display: none;
  }
  
  .header-nav.active {
    display: block;
    flex-direction: column;
  }
  
  .header-menu {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0 0 15px 0;
  }
  
  .hamburger {
    display: block;
    color: #222;
  }
  
  .header-sns {
    display: none;
  }
  
  .mobile-sns {
    display: flex;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
    padding-top: 15px;
  }
  
  /* メインコンテンツ */
  .front-main,
  .page-main,
  .station-single,
  .bus-single,
  .ticket-single,
  .blog-single,
  .about-page,
  .contact-page {
    padding: 15px;
  }
  

/* PC・タブレット */
@media (min-width: 768px) {
  .hero-slider {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }
}

/* スマホ */
@media (max-width: 767px) {
  .hero-slider {
    min-height: 220px;
  }
}

  
  .hero-copy {
    max-width: 95%;
    margin: 15px auto 0;
  }
  
  .hero-title {
    font-size: 1.5rem;
  }
  
  .hero-text {
    font-size: 0.95rem;
  }
  
  /* セクション */
  .front-section {
    margin: 40px 0;
  }
  
  .section-title {
    font-size: 1.4rem;
    padding-left: 8px;
    margin-bottom: 20px;
  }
  
  /* グリッド（1列に） */
  .post-grid,
  .card-container,
  .news-cards,
  .blog-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  /* カード画像サイズ統一 */
  .post-thumb,
  .card-thumb {
    aspect-ratio: 16/9;
  }
  
  .post-thumb img,
  .card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* カード内余白調整 */
  .post-body {
    padding: 12px;
  }
  
  .post-title,
  .card-title {
    font-size: 1rem;
    margin: 8px 12px 6px;
  }
  
  .post-meta,
  .card-date {
    font-size: 0.8rem;
    margin: 0 12px 10px;
  }
  
  /* ページタイトル */
  .page-title,
  .station-title,
  .bus-title,
  .single-title,
  .blog-title {
    font-size: 1.5rem;
    padding-left: 8px;
  }
  
  .news-title {
    font-size: 1.3rem;
  }
  
  /* もっと見るリンク */
  .more-link-wrap {
    text-align: center;
    margin-top: 20px;
  }
  
  .more-link-wrap .more-link {
    display: block;
    /*width: 100%;*/
    padding: 14px 20px;
  }
  
  /* ボタン統一（フルワイド） */
  .back-link a,
  .back-link-bus a,
  .back-link-ticket a,
  .back-link-station a,
  .back-link-blog a,
  .contact-form-wrapper input[type="submit"],
  .notfound-back .back-home,
  .pagination .page-numbers {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 14px 20px;
    text-align: center;
    box-sizing: border-box;
  }
  
  .pagination .page-numbers {
    margin: 5px 0;
  }
  
  /* 自己紹介ページ */
  .about-profile {
    flex-direction: column;
  }
  
  .about-image {
    width: 100%;
    max-width: 250px;
    margin: 0 auto 20px;
  }
  
  .about-section h2 {
    font-size: 1.3rem;
    padding-left: 8px;
  }
  
  /* 写真ギャラリー（2列・サイズ統一） */
  .station-gallery,
  .bus-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .station-gallery .station-photo,
  .bus-photo {
    height: 150px;
  }
  
  /* 個別ページ画像 */
  .single-thumb img,
  .blog-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
  }
  
  /* メモ */
  .memo-head {
    font-size: 1.1rem;
    padding-left: 8px;
  }
  
  /* 地図 */
  .map {
    height: 300px;
  }
  
  /* 前後ナビゲーション */
  .station-navigation,
  .bus-navigation {
    flex-direction: column;
    gap: 10px;
  }
  
  .station-navigation a,
  .bus-navigation a {
    width: 100%;
    text-align: center;
    padding: 12px;
  }
  
  /* フッター */
  .site-footer {
    padding: 30px 15px;
  }
  
  .footer-inner {
    gap: 20px;
  }
  
  .footer-menu {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .footer-concept {
    font-size: 0.9rem;
  }
  
  /* ニュースカード */
  .news-card {
    padding: 12px 15px;
  }
  
  .news-cards {
    gap: 15px;
  }
  
  /* 404ページ */
  .notfound {
    margin: 40px auto;
    padding: 15px;
  }
  
  .notfound-title {
    font-size: 1.5rem;
  }
  
  .notfound-image img {
    max-width: 100%;
  }
  
  /* 戻るリンク */
  .back-link,
  .back-link-station,
  .back-link-bus,
  .back-link-ticket,
  .back-link-blog,
  .news-footer,
  .blog-footer {
    margin-bottom: 30px;
  }
}

/* ----------------------------------------------------------
   タブレット：768px～1023px
---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ヘッダー */
  .header-nav {
    display: flex;
  }
  
  .header-sns {
    display: flex;
  }
  
  .mobile-sns {
    display: none;
  }
  
  .hamburger {
    display: none;
  }
  
  /* グリッド（2列に） */
  .post-grid,
  .card-container,
  .news-cards,
  .blog-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* カード画像サイズ統一 */
  .post-thumb,
  .card-thumb {
    aspect-ratio: 4/3;
  }
  
  /* 写真ギャラリー（2列・サイズ統一） */
  .station-gallery,
  .bus-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .station-gallery .station-photo,
  .bus-photo {
    height: 180px;
  }
  
  /* 地図 */
  .map {
    height: 350px;
  }
  
  /* タイトル */
  .page-title,
  .station-title,
  .bus-title,
  .single-title,
  .blog-title {
    font-size: 1.8rem;
  }
  
  /* ボタン */
  .back-link a,
  .back-link-station a,
  .back-link-bus a,
  .back-link-ticket a,
  .back-link-blog a {
    padding: 12px 24px;
    font-size: 1rem;
  }
}

/* ----------------------------------------------------------
   PC：1024px以上
---------------------------------------------------------- */
@media (min-width: 1024px) {
  /* ヘッダー */
  .header-nav {
    display: flex;
  }
  
  .header-sns {
    display: flex;
  }
  
  .mobile-sns {
    display: none;
  }
  
  .hamburger {
    display: none;
  }
  
  /* 写真ギャラリー（3列・サイズ統一） */
  .station-gallery .station-photo,
  .bus-photo {
    height: 200px;
  }
}

/* ==============================
   スマホ用：ボタンを縦並びに
============================== */
@media (max-width: 767px) {

  /* ボタン親要素が横並びにならないように */
  .back-link,
  .back-link-station,
  .back-link-bus,
  .back-link-ticket,
  .back-link-blog,
  .news-footer,
  .blog-footer,
  .station-navigation,
  .bus-navigation {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ボタン本体 */
  .back-link a,
  .back-link-station a,
  .back-link-bus a,
  .back-link-ticket a,
  .back-link-blog a,
  .station-navigation a,
  .bus-navigation a,
  .news-footer a,
  .blog-footer a,
  .pagination .page-numbers {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
  }
}


/* ==========================================================
   レスポンシブ（全ページ共通）
========================================================== */

/* タブレット */
@media (max-width: 1024px) {
  body,
  .single-news,
  .station-single,
  .bus-single,
  .ticket-single,
  .blog-single,
  .archive-card,
  .news-card,
  .card,
  .post-card {
      font-size: 0.95rem;
  }
  ol li,
  ol li::marker {
      font-size: 0.95rem;
  }
}

/* スマホ */
@media (max-width: 768px) {
  body,
  .single-news,
  .station-single,
  .bus-single,
  .ticket-single,
  .blog-single,
  .archive-card,
  .news-card,
  .card,
  .post-card {
      font-size: 0.9rem;
  }
  ol li,
  ol li::marker {
      font-size: 0.9rem;
  }
}

/* ==============================
   戻るボタン：タブレット対応
============================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .single-nav .back-link {
    width: auto;          /* フルワイド解除 */
    min-width: 220px;     /* 少し広め */
    padding: 14px 32px;

    font-size: 1rem;
    border-radius: 999px; /* PCとスマホの中間 */
  }

}
/* ==============================
   戻るボタン：スマホ統一
============================== */
@media (max-width: 767px) {

  .single-nav {
    padding: 0 16px; /* 画面端にベタ付きを防ぐ */
  }

  .single-nav .back-link {
    width: 100%;
    max-width: none;
    min-width: unset;

    padding: 16px 0;
    font-size: 1rem;
    border-radius: 12px;

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

}