body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #ffffff
}
header {
  color: #ffffff;
  background-color: #0356fc;
}
header .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  padding: 7px 0;
}
header .logo{
  font-size: 24px;
  font-weight: 500;
}
header nav ul{
  display: flex;
}
header nav ul li{
  margin-left: 50px;
  transition: .2s;
}
header nav ul li:hover{
  color:  #00ced1;
  transition: .2s;
}

/* --- 共通・PC用の設定（基本は表示） --- */
#menu-btn-check {
    display: none; /* チェックボックスは常に隠す */
}

.menu-btn {
    display: none; /* PCではハンバーガーボタンを隠す */
}

/* 既存の横並び設定（例） */
nav ul {
    display: flex;
    list-style: none;
}

/* --- スマホ用の設定 (画面幅 768px 以下) --- */
@media screen and (max-width: 768px) {
    /* ハンバーガーボタンを表示 */
    .menu-btn {
        display: flex;
        height: 50px;
        width: 50px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 100;
    }

    /* 三本線の描画 */
    .menu-btn span,
    .menu-btn span::before,
    .menu-btn span::after {
        content: '';
        display: block;
        height: 2px;
        width: 25px;
        background-color: #333; /* 線の色 */
        position: absolute;
        transition: all 0.5s;
    }
    .menu-btn span::before { bottom: 8px; }
    .menu-btn span::after { top: 8px; }

    /* メニューを画面外に隠す */
    nav {
        position: fixed;
        top: 0;
        left: 100%; /* 右側に隠す */
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        transition: all 0.5s;
        z-index: 90;
    }

    nav ul {
        flex-direction: column; /* 縦並び */
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* --- 開いた時の動き --- */

    /* メニューをスライドイン */
    #menu-btn-check:checked ~ nav {
        left: 0;
    }

    /* 三本線を「×」に変える */
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: transparent;
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
}

.main_visual .container {
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  height: 750px;
  position: relative;
}
.main_visual .title{
  position: absolute;
  bottom: 400px; 
  font-weight: 500; 
}
.section1{
  padding: 80px 0;
}
.section1 .container {
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
}
.section1 .row{
  display: flex;
  justify-content: space-between;
}
.section1 .col{
  width: 48%;
}
.section1 .sub_title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.section1 h2{
  font-size: 48px;
  font-weight: 500;
  line-height:1.6;
}
.section1 .text {
  font-size: 18px;
  line-height: 1.8;
  padding-top: 50px;
  padding-bottom: 50px;
}
.section1  .btn {
  font-size: 18px;
  border: solid 1px  #000000;
  border-radius: 100px;
  display: inline-block;
  width: 270px;
  line-height: 60px;
  text-align: center ;
  transition: .2s;
}
.section1 .btn:hover  {
  color:  #00ced1;
  border: solid 1px #00ced1;
  transition: .2s;
}
@media screen and (max-width: 768px) {
  
  /* 1. ヘッダーを縦並びにする（ロゴとメニュー） */
  header .row {
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
  }

  header nav ul li {
    margin-left: 20px; /* メニューの左右余白を狭く */
    margin-right: 20px;
    font-size: 14px;
  }

  /* 2. メインビジュアルの高さと文字サイズ調整 */
  .main_visual .container {
    height: 500px; /* 高さを少し低く */
  }

  .main_visual .title {
    bottom: 100px; /* 文字の位置を調整 */
  }

  .main_visual .title div {
    font-size: 32px !important; /* 「最高の乗車体験」をスマホサイズに */
    line-height: 1.2;
  }

  /* 3. 各セクションの横並びを解除して縦並びにする */
  .section1 .row {
    flex-direction: column;
  }

  /* .section .col だと HTMLのクラス名と少しズレがある可能性があるので修正 */
  .section1 .col {
    width: 100% !important;
    margin-bottom: 30px;
  }

  .section1 h2 {
    font-size: 28px; /* 見出しを小さく */
    line-height: 1.4;
  }

  .section1 .text {
    padding-top: 20px;
    padding-bottom: 30px;
    font-size: 16px;
  }

  /* 4. 画像がはみ出さないための魔法の呪文 */
  img {
    max-width: 100%;
    height: auto;
  }
}
/* リンク集を二列にする設定 */
.link_list {
  display: flex;
  flex-wrap: wrap;       /* 入り切らない分を折り返す */
  justify-content: space-between; /* 左右に広げて配置 */
  gap: 20px;            /* アイテム間の隙間 */
}

.link_item {
  width: 48%;           /* 二列にするため約半分（余白分を引く） */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

.link_item:hover {
  border-color: #0356fc; /* ホバー時に神池ブルーにする */
  background-color: #f9f9f9;
}

.link_item .arrow img {
  width: 50px;          /* アイコンのサイズ調整 */
  height: auto;
}

/* スマホでは一列にする */
@media (max-width: 768px) {
  .link_item {
    width: 100%;
  }
}
/* =====================================================
   掲示板ページ用CSS（style.css の末尾に追記してください）
   ===================================================== */

/* アクティブなナビリンク */

/* ===== ページ全体レイアウト ===== */
.bbs-main {
  padding: 80px 0 100px;
  min-height: calc(100vh - 200px);
}

.bbs-main .container {
  width: 90%;
  margin: 0 auto;
  max-width: 820px;
}

/* ===== ページタイトル ===== */
.bbs-heading {
  margin-bottom: 56px;
}
.bbs-heading .sub_title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #0356fc;
  margin-bottom: 12px;
}
.bbs-heading h1 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}
.bbs-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

/* ===== 投稿フォームセクション ===== */
.bbs-form-section {
  background: #f7f9ff;
  border: 1px solid #d9e4ff;
  border-top: 4px solid #0356fc;
  border-radius: 4px;
  padding: 36px 40px;
  margin-bottom: 56px;
}
.bbs-form-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0356fc;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.bbs-field {
  margin-bottom: 20px;
}
.bbs-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
  letter-spacing: 0.05em;
}
.required {
  font-size: 11px;
  background: #0356fc;
  color: #fff;
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0;
}
.bbs-field input,
.bbs-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.bbs-field input:focus,
.bbs-field textarea:focus {
  outline: none;
  border-color: #0356fc;
  box-shadow: 0 0 0 3px rgba(3, 86, 252, 0.12);
}
.bbs-field textarea {
  resize: vertical;
  line-height: 1.7;
}

.bbs-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* 投稿ボタン（サイト共通 .btn を継承 + 色追加） */
.bbs-submit-btn {
  background: #0356fc;
  color: #fff;
  border: solid 1px #0356fc;
  width: auto;
  min-width: 180px;
  line-height: 54px;
  padding: 0 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bbs-submit-btn:hover:not(:disabled) {
  background: transparent;
  color: #0356fc;
  border-color: #0356fc;
}
.bbs-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ステータスメッセージ */
.status-msg {
  font-size: 14px;
  font-weight: 700;
}
.status-info    { color: #555; }
.status-success { color: #1a9e4e; }
.status-warn    { color: #c87200; }
.status-error   { color: #d9534f; }

/* ===== 投稿一覧セクション ===== */


.bbs-posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
}
.post-count {
  font-size: 13px;
  color: #888;
  font-weight: 500;
}
.bbs-reload-btn {
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #0356fc;
  background: none;
  border: 1px solid #0356fc;
  border-radius: 100px;
  padding: 5px 16px;
  cursor: pointer;
  transition: .2s;
}
.bbs-reload-btn:hover {
  background: #0356fc;
  color: #fff;
}

/* ===== 投稿カード ===== */
.post {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 16px;
  animation: postFadeIn .4s ease both;
  transition: box-shadow .2s;
}
.post:hover {
  box-shadow: 0 4px 16px rgba(3, 86, 252, 0.08);
}

@keyframes postFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0356fc;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post-name {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}
.post-date {
  font-size: 12px;
  color: #aaa;
}
.post-message {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding-left: 50px;
}

/* ===== ローディング ===== */
.bbs-loading {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 60px 0;
}
.bbs-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0356fc;
  animation: dotBounce .9s infinite ease-in-out;
}
.bbs-loading-dot:nth-child(2) { animation-delay: .15s; background: #0356fc; opacity: .7; }
.bbs-loading-dot:nth-child(3) { animation-delay: .30s; background: #00ced1; }

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%       { transform: translateY(-8px); opacity: 1; }
}

/* ===== 空・エラー表示 ===== */
.bbs-empty,
.bbs-error {
  text-align: center;
  padding: 60px 0;
  font-size: 15px;
  color: #888;
}
.bbs-error { color: #d9534f; }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .bbs-form-section {
    padding: 24px 20px;
  }
  .bbs-heading h1 {
    font-size: 30px;
  }
  .post-message {
    padding-left: 0;
    margin-top: 10px;
  }
  .bbs-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .bbs-submit-btn {
    width: 100%;
    text-align: center;
    line-height: 52px;
  }
}
@media screen and (max-width: 768px) {
  nav ul li a {
    color: #333;
    font-size: 20px;
    padding: 20px 0;
    display: block;
  }

  nav ul li {
    margin-left: 0;
  }
}