@charset "utf-8";

/* ベース */
html {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-size: 15px;
  color: #707070;
}
body {
  margin: 0;
  padding: 0;
  background: #f4f8f9;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: #333;
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ヘッダー */
.site-header {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
.site-logo img {
  max-height: 50px;
}

.g-nav ul {
  display: flex;
  gap: 1rem;
}
.g-nav a {
  padding: 0.5rem 0.75rem;
  font-weight: bold;
}
.g-nav a:hover {
  color: #007a9e;
}

/* ハンバーガー */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

/* メイン */
main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* intro（旧左カラム） */
.intro-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
.intro-text {
  margin-bottom: 1rem;
}

/* アコーディオン */
.accordion-btn {
  display: inline-block;
  background: #007a9e;
  color: #fff;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}
.accordion-content {
  display: none;
  margin-top: 1rem;
}
.accordion-content img {
  margin-bottom: 0.5rem;
}

/* course */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.course-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.course-card img {
  border-bottom: 1px solid #eee;
}
.course-card h3 {
  font-size: 1.2rem;
  margin: 0.5rem;
}
.course-card p {
  padding: 0 0.5rem;
  flex-grow: 1;
}
.course-card .btn {
  display: inline-block;
  background: #007a9e;
  color: #fff;
  padding: 0.5rem;
  margin: 1rem;
  border-radius: 5px;
}

/* フッター */
footer {
  background: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
  border-top: 1px solid #eee;
}
footer p {
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .g-nav {
    display: none;
  }
  .g-nav.open {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  .g-nav ul {
    flex-direction: column;
    align-items: center;
  }
  .menu-btn {
    display: flex;
  }
}
/* PC用スライダー */
.index-slider.desktop {
  max-width: 1000px; /* トップ幅に合わせて広く */
  margin: 0 auto; /* 上下マージンも詰めてヘッダーに近づける */
}
.index-slider.desktop img {
  width: 100%;
  height: 50vh; /* 少し高さを増して迫力を出す */
  object-fit: cover;
  border-radius: 0 0rem 0rem 0; /* 丸みも少し抑えて自然に */
}

/* モバイル用はデフォルト非表示 */
.slider-accordion.mobile {
  display: none;
}

/* アコーディオンボタン */
.accordion-btn {
  display: inline-block;
  background: #007a9e;
  color: #fff;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}
.accordion-content {
  display: none;
  margin-top: 1rem;
}
.accordion-content img {
  border-radius: 1rem;
  margin-bottom: 0.5rem;
}

/* レスポンシブ切り替え */
@media (max-width: 768px) {
  .index-slider.desktop img {
    height: auto; /* スマホは高さ固定を外す */
    border-radius: 0; /* スマホでは角丸を無くして自然に */
  }
}

.index-slider img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  border-radius: 0 4rem 4rem 0;
}

.slick-dots {
  bottom: 10px;
}
.slick-dots li button:before {
  color: white;
  font-size: 10px;
}
/* トップビジュアル */
.top-visual {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 2rem;
  overflow: hidden;
}

.index-slider img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  display: block;
  border-radius: 0 4rem 4rem 0;
}

/* キャッチコピーとボタンの位置（PC） */
.copy {
  position: absolute;
  top: 20%;
  left: 10%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.copy h1 {
  font-size: 2.5rem;
  line-height: 1.3;
}

.entry {
  position: absolute;
  top: 60%;
  left: 10%;
  background: #007a9e;
  border-radius: 0.5rem;
}
.entry a {
  display: block;
  color: #fff;
  padding: 1rem 1.5rem;
}
.entry h2 {
  font-size: 1.2rem;
  margin: 0;
}

/* モバイルではアコーディオン内に切り替え */
.slider-accordion.mobile {
  display: none;
}

@media (max-width: 768px) {
  .index-slider.desktop {
    display: none;
  }
  .slider-accordion.mobile {
    display: block;
  }

  .copy {
    position: static;
    text-align: center;
    color: #333;
    text-shadow: none;
    margin-top: 1rem;
  }
  .copy h1 {
    font-size: 1.6rem;
  }

  .entry {
    position: static;
    text-align: center;
    margin: 1rem auto 0;
    width: fit-content;
  }
  .entry a {
    padding: 0.75rem 1rem;
  }
}
/* ドロップダウン */
.g-nav .dropdown {
  position: relative;
}
.g-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 1000;
}
.g-nav .dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
}
.g-nav .dropdown:hover .dropdown-menu {
  display: block;
}
/* ==============================
   Footer
   ============================== */
.site-footer {
  background: #fff;
  padding: 2rem 1rem;
  border-top: 1px solid #eee;
  text-align: center;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-logo img {
  height: 60px;
  width: auto;
}

.footer-info {
  text-align: left;
}

.footer-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.footer-address {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.footer-logos img {
  height: 45px;
  width: auto;
}

.copyright {
  font-size: 0.8rem;
  color: #777;
  margin-top: 1rem;
  text-align: center;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    text-align: center;
  }
  .footer-info {
    text-align: center;
  }
}
/* ==============================
   Access Section
   ============================== */
.header-caption {
  background-color: #5bc3c1; /* お好みで調整可 */
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
  margin-top: 3rem;
  border-radius: 1rem;
}

.header-caption h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.header-caption h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

.header-caption h4 {
  font-size: 1rem;
  font-weight: normal;
  margin-top: 1rem;
  line-height: 1.6;
}

/* 訓練校一覧ボックス */
.grid-list {
  position: relative;
  background-color: #fff;
  border: 3px solid #fff;
  border-radius: 1rem;
  margin-top: 2rem;
  padding: 2rem 1rem 1rem;
  display: inline-block;
}

.grid-list-header {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #5bc3c1;
  padding: 0 1.5rem;
}

.grid-list-header h2 {
  font-size: 1.4rem;
  background-color: #5bc3c1;
  color: #fff;
  display: inline-block;
}

/* 訓練校グリッド */
.grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.grid div {
  background-color: #fff;
  border-radius: 0.7rem;
  overflow: hidden;
  width: 180px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.grid div:hover {
  transform: translateY(-5px);
}

.grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.grid h4 {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #333;
}

.grid a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* ==============================
   Features Section（Accessより後に書く！）
   ============================== */
.features-section {
  margin-top: 4rem;
  text-align: center;
}

.features-section .header-caption {
  background-color: #5bc3c1;
  color: #fff;
  padding: 3rem 1rem;
  border-radius: 1rem;
}

.features-section .header-caption h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.features-section .header-caption h3 {
  font-size: 1.3rem;
}

/* 各Featureの白ボックス */
.feature-box {
  background-color: #5bc3c1;
  padding: 2rem 1rem;
  margin-top: 2rem;
  border-radius: 1rem;
}

.feature-content {
  background-color: #fff;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
}

.feature-content.reverse {
  flex-direction: row-reverse;
}

.feature-content img {
  width: 45%;
  border-radius: 1rem;
  object-fit: cover;
  display: block;
}

.feature-text {
  width: 50%;
  text-align: left;
}

.feature-text h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.feature-text .quote {
  font-size: 3rem;
  vertical-align: middle;
}

.feature-text .emphasis {
  font-size: 2rem;
}

.feature-text p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .feature-content,
  .feature-content.reverse {
    flex-direction: column;
    text-align: center;
  }

  .feature-content img,
  .feature-text {
    width: 100%;
  }

  .feature-text {
    text-align: center;
  }

  .feature-text h2 {
    font-size: 1.8rem;
  }
}
.features-section {
  margin-top: 4rem;
}

.features-section .header-caption {
  background-color: #5bc3c1;
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
  border-radius: 1rem;
  margin-bottom: 2rem;
}

.feature-box {
  background-color: #5bc3c1;
  padding: 2rem 1rem;
  border-radius: 1rem;
  margin-top: 2rem;
}

.feature-content {
  background-color: #fff;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
}

.feature-content.reverse {
  flex-direction: row-reverse;
}

.feature-content img {
  width: 45%;
  border-radius: 1rem;
  object-fit: cover;
  display: block;
}

.feature-text {
  width: 50%;
  text-align: left;
}

.feature-text h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.feature-text .quote {
  font-size: 3rem;
  vertical-align: middle;
}

.feature-text .emphasis {
  font-size: 2rem;
}

.feature-text p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .feature-content,
  .feature-content.reverse {
    flex-direction: column;
    text-align: center;
  }

  .feature-content img,
  .feature-text {
    width: 100%;
  }

  .feature-text {
    text-align: center;
  }

  .feature-text h2 {
    font-size: 1.8rem;
  }
}
/* Features（Accessと同じ header-caption の中で横並び） */
.features-wrapper {
  padding-bottom: 3rem;
}

.features-wrapper .feature-box {
  background-color: transparent; /* header-captionが背景なので白ボックスだけ浮かせる */
  margin-top: 2rem;
}

.features-wrapper .feature-content {
  background-color: #fff;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: left; /* これ重要：中央揃えを打ち消す */
}

.features-wrapper .feature-content.reverse {
  flex-direction: row-reverse;
}

.features-wrapper .feature-content img {
  width: 45%;
  border-radius: 1rem;
  object-fit: cover;
  display: block;
}

.features-wrapper .feature-text {
  width: 50%;
}

.features-wrapper .feature-text h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.features-wrapper .feature-text .quote {
  font-size: 3rem;
  vertical-align: middle;
}

.features-wrapper .feature-text .emphasis {
  font-size: 2rem;
}

.features-wrapper .feature-text p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .features-wrapper .feature-content,
  .features-wrapper .feature-content.reverse {
    flex-direction: column;
    text-align: center;
  }

  .features-wrapper .feature-content img,
  .features-wrapper .feature-text {
    width: 100%;
  }

  .features-wrapper .feature-text {
    text-align: center;
  }

  .features-wrapper .feature-text h2 {
    font-size: 1.8rem;
  }
}
.features-wrapper .feature-text .quote {
  font-size: 3rem;
  vertical-align: middle;
  color: #333; /* ← ここを追加 */
}

.features-wrapper .feature-text .emphasis {
  font-size: 2rem;
  color: #333; /* ← ここを追加 */
}
.feature-text h2 {
  color: #333; /* 濃いグレーで背景にしっかり映える */
}

.feature-text .quote {
  color: #00838f; /* 引用符にアクセントをつける例（好みに応じて変更可） */
}

.feature-text .emphasis {
  color: #00695c; /* 強調部分を別の色に */
}
.news-section,
.ameblo-section {
  background-color: #f9f9f9;
  padding: 2rem;
  margin: 2rem 0;
  border-left: 5px solid #a8d5ba;
}
.news-section h2,
.ameblo-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.news-list,
#ameblo-feed {
  list-style: none;
  padding-left: 0;
}
.news-list li,
#ameblo-feed li {
  margin-bottom: 0.5rem;
}
.news-list li a,
#ameblo-feed li a {
  text-decoration: none;
  color: #333;
}
.news-list li a:hover,
#ameblo-feed li a:hover {
  text-decoration: underline;
}
.news-box-scroll {
  max-height: 200px; /* 高さを固定 */
  overflow-y: auto; /* 縦スクロール表示 */
  padding-right: 10px; /* スクロールバーと内容が重ならないように余白 */
  border: 1px solid #ccc;
  background: #fff;
}

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

.news-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.news-list li a {
  color: #333;
  text-decoration: none;
}
.icon {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.top_news {
  width: 100%;
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
}
.top_news .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.top_news .news_list {
  max-height: 200px;
  overflow-y: auto;
}
.top_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top_news li {
  border-bottom: 1px dotted #ccc;
  padding: 5px 0;
}
.top_news li span {
  color: #888;
  font-size: 12px;
  margin-right: 10px;
}
/* スクロール表示用 */
.scroll-box {
  height: 200px; /* 高さ固定（お好みで変更可） */
  overflow-y: auto; /* 縦スクロールを有効にする */
  padding-right: 10px; /* スクロールバーのための余白 */
}
/* News・アメブロ 共通デザイン（左寄せ＋白背景＋枠線） */
.scroll-box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}

/* News 日付カラー調整（白背景に映えるように） */
.scroll-box dt {
  color: #007080; /* お好きな見やすい色に変更可 */
  font-weight: bold;
  margin-top: 10px;
}

/* News 本文（dd）の左寄せ */
.scroll-box dd {
  margin-left: 0;
  margin-bottom: 10px;
}

/* アメブロ記事リストも左寄せ */
.news_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news_list li {
  border-bottom: 1px solid #ccc;
  padding: 6px 0;
  text-align: left;
}
.news_list span {
  display: inline-block;
  min-width: 6em;
  color: #007080;
}
.top_news2,
.news_list2 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.scroll-box.news_list {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  max-width: 1000px; /* ← ここを追加 */
  margin: 0 auto; /* ← 中央寄せ */
}

.scroll-box.news_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll-box.news_list li {
  border-bottom: 1px solid #ddd;
  padding: 6px 0;
  text-align: left;
}

.scroll-box.news_list span {
  display: inline-block;
  min-width: 6em;
  color: #007080;
  font-weight: bold;
}
.feature-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.feature-text {
  flex: 1;
  text-align: left;
}

/* 円グラフコンテナ */
.chart {
  position: relative;
  width: 230px;
  height: 230px;
  flex: 0 0 230px;
  margin-left: -40px; /* ← ここを追加：左に40px動かす（調整値） */
}

/* Chart.js のキャンバス */
.chart canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 円グラフ中央の文字 */
.chart-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #333; /* ← 白で見えなかったため黒寄りに変更 */
  font-size: 1rem;
  line-height: 1.2;
  pointer-events: none; /* ← マウス操作の邪魔をしない */
}

.chart-label .rate {
  font-size: 2.8rem; /* ← 数字を大きめに */
  color: #5bc3c1; /* ← ブランドカラーで強調 */
  font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .chart {
    margin: 1rem auto 0;
    width: 200px;
    height: 200px;
  }
}

/* News・アメブロ セクションの幅を「資格に強い」と揃える */
.header-caption #news-section .scroll-box.news_list {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}
/* スライダー内カードの見た目調整 */
.course-slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央揃え */
  gap: 40px; /* ← コース間の横・縦の隙間を設定 */
  margin-top: 40px;
}
.course-link {
  background: #fff;
  border-radius: 12px;
  overflow: visible; /* ← ここが最重要。hiddenを解除 */
  padding: 10px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-height: 100px; /* ← 高さを柔軟に確保 */
  width: 300px; /* カードの幅（お好みで） */
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

.course-link img {
  width: 100%;
  height: 450px; /* ← ★ここを増やす（例：元が150〜180pxなら2倍近くになる） */
  object-fit: cover; /* 縦横比を保ちながら枠いっぱいに表示 */
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.course-link h2 {
  margin: 10px 0 5px;
  font-size: 1.2rem;
  color: #333;
}
.course-link h3 {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

/* slick矢印の色調整 */
.slick-prev:before,
.slick-next:before {
  color: #fff;
  font-size: 30px;
}
/* ▼ コーススライダーの横はみ出し修正 */
#on-course .course-slider {
  max-width: 1000px; /* 「資格に強い」と同じ幅 */
  margin: 0 auto; /* 中央寄せ */
  box-sizing: border-box;
  overflow: hidden; /* はみ出し防止 */
  text-align: left; /* 中央揃え解除 */
}

#on-course .slick-list {
  overflow: visible !important;
}

#on-course .slick-track {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

#on-course .course-link {
  margin: 0 10px; /* 左右余白を少しに調整 */
  width: calc(100% - 20px);
}
/* ▼ スマホ用の背景画像表示設定 */
@media (max-width: 768px) {
  /* スライダーとアコーディオンを非表示に */
  .top-visual .desktop,
  .top-visual .slider-accordion {
    display: none !important;
  }

  /* 背景画像を1枚固定で表示 */
  .top-visual {
    background: url("./img/index/top03.webp") no-repeat center center;
    background-size: cover;
    height: 60vh; /* 表示範囲（例: 画面の60%）調整可能 */
    position: relative;
  }

  /* キャッチコピーの位置調整 */
  .top-visual .copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    text-align: center;
  }

  .top-visual .copy h1 {
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* ▼ スマホ専用：スライドOFF＋背景1枚固定 */
@media (max-width: 768px) {
  /* スライダーを非表示にする */
  .top-visual .desktop,
  .top-visual .slider-accordion {
    display: none !important;
  }

  /* 背景画像を1枚固定で表示 */
  .top-visual {
    background-image: url("../img/index/index02.webp"); /* ★ここを好きな画像に変更可 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 50vh; /* 背景の縦サイズ（画面の65%）を確保 */
    position: relative;
  }

  /* キャッチコピーの位置と見やすさ調整 */
  .top-visual .copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    padding: 0 1rem;
    width: 100%;
  }

  .top-visual .copy h1 {
    font-size: 1.8rem;
    line-height: 1.4;
  }
}
.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

.inquiry-form button.btn {
  background-color: #2d8b8e;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.inquiry-form button.btn:hover {
  background-color: #1f6e71;
}

@media (max-width: 768px) {
  .inquiry-page .header-caption h2 {
    font-size: 1.6rem;
  }
  .inquiry-page .header-caption p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

.step-wrapper {
  display: flex;
  justify-content: space-between;
  background-color: #e6f7fa; /* 背景（例） */
  padding: 20px;
  border-radius: 10px;
}

.step {
  position: relative;
  text-align: center;
  flex: 1;
}

.step .number {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #47b8c8;
  color: #47b8c8;
  font-weight: bold;
  margin-bottom: 5px;
  z-index: 1;
  position: relative;
}

.step.active .number {
  background-color: #47b8c8;
  color: #fff;
}

.step .label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

/* ← 線を引くのはここ */
.step::before {
  content: "";
  position: absolute;
  top: 18px; /* 丸の中央の高さに合わせる */
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #47b8c8;
  z-index: 0;
}

/* 最初のステップの左線は消す */
.step:first-child::before {
  content: none;
}

.footer-social {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
}

.footer-caption {
  color: #fff;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.footer-icons a {
  display: inline-block;
  margin: 0 5px;
}

.footer-icons img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  transition: transform 0.2s;
}

.footer-icons img:hover {
  transform: scale(1.1);
}
.footer-caption {
  color: #333; /* 黒に近い濃いグレー */
  margin-bottom: 8px;
  font-size: 1rem;
}
.step-wrapper {
  display: flex;
  justify-content: space-between;
  background-color: #e6f7fa;
  padding: 20px;
  border-radius: 10px;
  /* margin-top: 2rem;  ← 削除またはコメントアウト */
}

/* ──────────────────────────────
   お問い合わせページのヘッダー直下余白を index と統一
────────────────────────────── */
.contact-head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.contact {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 確認画面の送信・修正ボタン間の余白を詰める */
.button-area {
  display: flex;
  justify-content: center;
  gap: 1rem; /* ボタン間を狭める。0.5rem でもOK */
  margin-top: 1.5rem;
}

.button-area .btn-primary,
.button-area .btn-secondary,
.button-area button {
  margin: 0; /* 余白をゼロにすることで gap のみ適用 */
}

.button-place {
  display: flex;
  justify-content: center;
  gap: 1rem; /* ← ここで余白調整。0.75rem などお好みで */
  margin-top: 2rem;
}
.button-place .button,
.button-place button {
  margin: 0; /* 余計な上下余白を打ち消す */
}

.flex-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 30px; /* 画像間の余白 */
  justify-items: center; /* 中央寄せ */
  align-items: center;
  margin: 40px auto;
  max-width: 800px; /* 横幅を制限して中央に */
}

.flex-panel img {
  width: 100%;
  max-width: 320px; /* 各画像の最大サイズ */
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.flex-panel img:hover {
  transform: scale(1.05);
}

/* スマホ用 */
@media (max-width: 768px) {
  .flex-panel {
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 20px;
  }
}

.accordion {
  background-color: #f3f8fb;
  color: #004098;
  cursor: pointer;
  padding: 15px 20px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s ease;
}

.accordion:hover,
.accordion.active {
  background-color: #e6f2ff;
}

.panel {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease;
  background-color: #fff;
  border-left: 3px solid #47b8c8;
  border-bottom: 1px solid #eee;
}

.panel p {
  margin: 15px 0;
  color: #333;
  line-height: 1.6;
}

.panel.show {
  padding: 15px 20px;
}

div img {
  display: block;
  margin: 0 auto;
}

/* ===== FAQアコーディオン専用設定（最優先） ===== */
.accordion {
  cursor: pointer;
  width: 100%;
  text-align: left;
  background-color: #f5f5f5;
  border: none;
  outline: none;
  padding: 15px 20px;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.accordion.active {
  background-color: #e0f4ff;
}

.panel {
  overflow: hidden;
  max-height: 0;
  background-color: #fff;
  transition: max-height 0.4s ease;
  padding: 0 20px;
}

/* FAQ 回答部分の左寄せ */
.panel p {
  text-align: left;
  line-height: 1.6;
  margin: 10px 0;
}

.accordion.active + .panel {
  border-left: 3px solid #71d2de;
}

/* QAのボタン（質問）の枠を丸くする */
.accordion {
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  padding: 15px 20px;
  transition: background-color 0.3s ease;
}

/* 押した時に少し色を変える */
.accordion.active {
  background-color: #e6f7ff;
  border-color: #71d2de;
}

/* 回答枠も少し丸く */
.panel {
  border-radius: 0 0 10px 10px;
  border: 1px solid #ddd;
  border-top: none;
  margin-bottom: 15px;
  background-color: #fff;
}

/* よくある質問カテゴリ画像を少し丸く */
.header-caption img[alt*="訓練申込について"],
.header-caption img[alt*="訓練・授業について"],
.header-caption img[alt*="就職について"],
.header-caption img[alt*="託児サービスについて"] {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

/* お問い合わせアイコンのサイズ調整 */
.question img {
  width: 40px; /* ← ここで大きさを調整（例：40px） */
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
}

/* 文字とアイコンの並びを整える */
.question h2 {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
  margin: 0;
}

/* お問い合わせブロックを横並びに */
.question {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 全体を中央寄せ */
  gap: 10px; /* アイコンと文字の間隔 */
  margin: 0 auto;
  text-align: center;
}

/* 吹き出しアイコンを少し小さめに */
.question img {
  width: 40px; /* 大きすぎる場合は 30px に調整も可 */
  height: auto;
  display: block;
}

/* 「お問い合わせ」の文字デザイン */
.question h2 {
  font-size: 1.2rem;
  color: #004098;
  margin: 0;
}

/* 🔹 トップに戻るボタンのスタイル */
.back-to-top {
  position: fixed;
  bottom: 30px; /* 下からの距離 */
  right: 30px; /* 右からの距離 */
  background-color: #004098; /* カレッジカラー */
  color: #fff;
  text-align: center;
  font-size: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  z-index: 999;
}

/* スクロール後に表示 */
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ホバー時 */
.back-to-top:hover {
  background-color: #71d2de;
  color: #004098;
}

/* 🔹 受験までの流れ 全体のボックス */
.schedule {
  border: 3px solid #71d2de; /* 枠線の色 */
  border-radius: 15px; /* 角丸 */
  padding: 30px 0;
  max-width: 700px;
  margin: 60px auto;
  text-align: center;
  position: relative;
  background: #fff;
}

/* 🔹 タイトル（上のタブ風） */
.schedule-header {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #71d2de;
  padding: 8px 30px;
  border-radius: 25px;
}

.schedule-header h2 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}

/* 🔹 中身のアイコンとテキスト */
.schedule-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.schedule-open img.icon {
  width: 50px;
  height: auto;
  margin-bottom: 5px;
}

.schedule-open p {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
}

.schedule-open h3 {
  color: #71d2de;
  font-size: 2rem;
  margin: 0 10px;
}

/* 🔹 スマホ対応 */
@media (max-width: 600px) {
  .schedule {
    width: 90%;
    padding: 25px 10px;
  }
  .schedule-open {
    gap: 15px;
  }
  .schedule-open img.icon {
    width: 40px;
  }
}

/* 🔹 対応受験科目：横並び＆中央寄せ */
.tape-text div {
  display: flex;
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap; /* 画面幅が狭いとき折り返し */
  gap: 20px; /* 項目間の余白 */
  margin-top: 20px;
}

.tape-text h3 {
  background-color: #e6f8fa; /* 薄い水色背景（任意） */
  color: #004098;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 1rem;
  white-space: nowrap; /* 改行しないように */
}

/* 🔹 MOSトップ画像サイズ調整 */
.h-img img {
  width: 60%; /* 横幅をページ幅の80%に縮小 */
  height: auto; /* 縦横比を保つ */
  max-width: 700px; /* 最大でも700pxまで */
  display: block;
  margin: 0 auto 30px; /* 中央寄せ＋下に余白 */
  border-radius: 10px; /* 角を少し丸く（任意） */
}

/* 🔹 タググループ全体 */
.list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 90%;
  margin: 40px auto;
  border-bottom: 3px solid #71d2de;
  flex-wrap: wrap;
}

/* 🔹 タブボタン共通 */
.list button {
  background: #e6f8fa;
  border: 2px solid #71d2de;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: #004098;
  padding: 10px 30px;
  font-size: 1rem;
  cursor: pointer;
  flex: 1 1 33%;
  text-align: center;
  transition: 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* 🔹 アイコン調整 */
.list button img.icon {
  width: 24px;
  height: auto;
}

/* 🔹 アクティブ状態（選択中のタブ） */
.list button.active {
  background: #71d2de;
  color: #fff;
  border-color: #71d2de;
  z-index: 2;
}

/* 🔹 ホバー */
.list button:hover {
  background: #b9edf3;
}

/* 🔹 スマホ対応 */
@media (max-width: 768px) {
  .list {
    flex-direction: column;
    border-bottom: none;
  }
  .list button {
    border-radius: 10px;
    border: 2px solid #71d2de;
    margin-bottom: 10px;
  }
}

/* タブ非表示用 */
.page1-detail,
.page2-detail,
.page3-detail {
  display: none;
}

.page1-detail.active,
.page2-detail.active,
.page3-detail.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sequence {
  display: flex; /* 横並びにする */
  align-items: center; /* 縦位置を中央揃え */
  gap: 15px; /* 1 と 文字の間の余白 */
  margin-bottom: 25px;
}

/* 番号のデザイン */
.sequence .namber {
  background-color: #71d2de;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.middle-header {
  text-align: center; /* 🔹 全体を中央揃え */
  margin: 60px auto;
  width: 90%;
  max-width: 900px;
}

/* 見出し */
.middle-header h3 {
  font-size: 1.8rem;
  color: #004098;
  margin-bottom: 10px;
  font-weight: 700;
}

/* 区切り線 */
.middle-header .partation {
  width: 80px;
  height: 3px;
  background-color: #71d2de;
  margin: 0 auto 25px auto; /* 中央寄せ */
  border-radius: 3px;
}

/* 注意書きのボックス */
.middle-header .notice-box {
  padding: 1rem 1.5rem;
  background: #f5f5f5;
  border-radius: 1rem;
  margin-top: 1rem;
  text-align: left; /* 🔹 中の文字だけ左寄せ */
  line-height: 1.7;
  color: #333;
  font-size: 0.95rem;
}

.link-button {
  display: inline-block;
  background-color: #004098; /* 🔹青地に白文字 */
  color: #fff;
  font-size: 0.9rem;
  padding: 10px 25px;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s;
  border: none;
  cursor: pointer;
}

.link-button:hover {
  background-color: #71d2de; /* 🔹ホバーで明るく */
  color: #fff;
}

/* ID登録ブロック内のボタン */
.page2-detail .button-outside {
  text-align: center;
  margin-top: 30px;
  transform: translateY(40px); /* 見た目上、枠の外に下げる */
}

/* ボタンデザイン */
.id-btn {
  display: inline-block;
  background-color: #004098;
  color: #fff;
  font-size: 1rem;
  padding: 12px 40px;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.id-btn:hover {
  background-color: #71d2de;
  color: #fff;
  transform: translateY(-2px);
}

.exam-box {
  background-color: #71d2de; /* 薄緑色 */
  color: #fff;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  margin: 0 auto 60px;
  width: 90%;
  max-width: 900px;
}
.exam-box h2 {
  color: #fff;
  margin-bottom: 1rem;
}
.exam-box h3 {
  color: #fff;
  font-weight: normal;
  line-height: 1.8;
}
/* MOSバナー部分だけ header-caption の背景を無効化 */
a[href="./mos-faq.php"] .link {
  display: block;
}

a[href="./mos-faq.php"] {
  background: none !important;
}

.header-caption.text-margin {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* MOSトップ専用：header-captionの文字色を変更 */
.header-caption h2,
.header-caption h3 {
  color: #333 !important; /* 濃いグレーで読みやすく */
}

.page3-detail.header-caption {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* 当日のお持物セクションのバランス調整 */
.schedule {
  margin: 40px auto;
  text-align: center;
  width: 90%;
  max-width: 700px;
}

.schedule-header h2 {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  color: #333;
}

/* アイコンと文字のボックス */
.schedule-open {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px; /* 2つの間を広げる */
  transform: translateY(0) !important; /* 上にズレてたのを修正 */
}

/* 各アイコンのブロック */
.schedule-open div {
  text-align: center;
}

/* アイコン画像のサイズを調整 */
.schedule-open img.icon {
  width: 70px; /* ←元が大きければ60～70px程度がバランス良い */
  height: auto;
  margin-bottom: 10px;
}

/* テキスト */
.schedule-open h4 {
  font-size: 1rem;
  color: #333;
  line-height: 1.4;
}

/* 受験までの流れのバランス調整 */
.schedule {
  border: 3px solid #71d2de;
  border-radius: 15px;
  padding: 40px 20px;
  max-width: 900px; /* 枠幅 */
  margin: 60px auto;
  background: #fff;
  position: relative;
}

.schedule-header {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #71d2de;
  padding: 10px 40px;
  border-radius: 25px;
}

.schedule-header h2 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}

.schedule-open {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px; /* 間隔を固定（←はみ出し防止） */
  flex-wrap: nowrap;
  margin-top: 60px;
  margin-bottom: 20px;
  overflow: hidden; /* 枠外のはみ出し防止 */
  max-width: 800px; /* 中央の範囲を制限 */
  margin-left: auto;
  margin-right: auto;
}

.schedule-open div {
  text-align: center;
  flex: 0 1 180px; /* 各要素の幅を固定 */
}

.schedule-open img.icon {
  width: 65px;
  height: auto;
  margin-bottom: 10px;
}

.schedule-open h4 {
  font-size: 1rem;
  color: #333;
  line-height: 1.4;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .schedule-open {
    flex-wrap: wrap;
    gap: 40px;
  }
  .schedule-open img.icon {
    width: 55px;
  }
}

/* 会場アクセスレイアウト */
.access-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

.access-left {
  flex: 1 1 300px;
  min-width: 280px;
}

.access-right {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.access-right iframe {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.access-right .floor img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .access-wrapper {
    flex-direction: column;
  }
  .access-right iframe,
  .access-right .floor img {
    width: 100%;
  }
}

/* --- Q（質問）ボタン部分 --- */
.accordion {
  font-size: 1.3rem; /* ← 通常より少し大きめ（1rem→1.1rem） */
  font-weight: 600; /* 太字で見やすく */
  line-height: 1.6; /* 行間を少し広く */
}

/* --- Qを開いたときの状態 --- */
.accordion.active {
  background-color: #f0f0f0;
}

/* --- A（回答）パネル部分 --- */
.panel p {
  font-size: 1.2rem; /* 回答文を少し大きく */
  line-height: 1.8; /* 読みやすく行間を広く */
  color: #333;
}

.h-title {
  display: flex; /* 横並び */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向も中央に */
  gap: 10px; /* アイコンと文字の間に余白 */
  margin: 20px 0; /* 上下に少し余白（お好みで） */
}

/* アイコンサイズ調整 */
.h-title .icon {
  width: 40px; /* アイコンの大きさ（お好みで） */
  height: auto;
}

/* タイトル文字 */
.h-title h2 {
  font-size: 1.8rem;
  margin: 0; /* デフォルト余白を消す */
  font-weight: bold;
  color: #333; /* お好みの色に変更可 */
}

table.info {
  width: 100%;
  border-collapse: collapse; /* 枠線を重ねてスッキリ */
  margin: 20px 0;
  font-size: 1rem;
}

table.info td {
  border: 1px solid #ccc; /* セルの枠線 */
  padding: 10px 15px; /* 内側の余白 */
  vertical-align: middle; /* 縦方向の中央揃え */
}

/* 1列目（項目名）を少し目立たせる */
table.info td:first-child {
  background-color: #f8f8f8;
  font-weight: bold;
  width: 35%; /* 横幅をやや固定 */
}

/* 2列目（内容）を柔軟に */
table.info td:last-child {
  width: 65%;
}

/* --- 授業の風景：全体 --- */
.gallery {
  display: flex;
  flex-wrap: wrap; /* 折り返して並べる */
  gap: 15px; /* 写真間の余白 */
  justify-content: center; /* 中央寄せ */
  margin: 20px auto;
  max-width: 1000px; /* 写真群の最大幅（お好み） */
}

/* --- 各写真 --- */
.gallery img {
  width: 300px; /* 写真の幅（自動調整OK） */
  height: auto;
  border: none; /* ✅ 枠線を完全になくす */
  box-shadow: none; /* ✅ 影も消す */
  border-radius: 10px; /* 角を少し丸く（任意） */
  object-fit: cover; /* トリミングして整える */
  transition: transform 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.02); /* ほんの少し拡大（任意） */
}

/* モバイル対応 */
@media (max-width: 768px) {
  .gallery img {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .gallery img {
    width: 90%;
  }
}

.course-link-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.course-link.disabled {
  opacity: 0.6;
  pointer-events: none; /* クリック不可 */
  position: relative;
}

.course-link.disabled .overlay-text {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 5px 10px;
  font-size: 0.9rem;
  border-radius: 5px;
}

.course-link.disabled {
  opacity: 1; /* 半透明にしない（ぼやけ防止） */
  position: relative;
  pointer-events: none;
}

.course-link.disabled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.course-link.disabled h2,
.course-link.disabled h3,
.course-link.disabled h4 {
  position: relative;
  color: #fff; /* 文字を白く */
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); /* 影で読みやすく */
  z-index: 2;
}

.hero {
  position: relative;
  width: 100%;
  height: 30vh; /* ← 高さを半分にしたいならここを変える */
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 全体をカバーしながら中央にトリミング */
  object-position: center 60%;
}

.hero h2 {
  position: absolute;
  left: 30px;
  bottom: 30px;
  color: #fff;
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.tape-text {
  display: flex;
  flex-wrap: wrap; /* 長いときは折り返す */
  gap: 1rem; /* 各キーワードの間の余白 */
  justify-content: center; /* 中央揃え（左寄せにしたい場合は flex-start） */
  margin: 2rem 0;
}

.tape-text div {
  background: #f0f0f0; /* 背景を薄く（不要なら削除） */
  border-radius: 1rem;
  padding: 0.8rem 1.5rem;
  transition: 0.3s;
}

.tape-text div:hover {
  background: #dcdcdc;
  transform: translateY(-3px);
}

.tape-text h4 {
  font-size: 1.8rem; /* ← ここで文字の大きさを調整 */
  color: #333;
  margin: 0;
  white-space: nowrap; /* 折り返さない */
}

/* ====== 上書き版 course-link（画像を中央に） ====== */
.course-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f7f7f7 !important; /* ← グレー枠そのまま */
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 2rem 0;
}

.course-link img {
  width: 70% !important;
  height: 600px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: #fff;
  margin: 0 auto !important;
  display: block;
}

/* 画像ホバー */
.course-link img:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

/* 講座タイトル・情報の中央揃え＋大きく */
.course-link h2,
.course-link h3 {
  text-align: center; /* ← 文字を中央に */
  width: 100%;
}

.course-link h2 {
  font-size: 1.6rem; /* ← タイトルを少し大きく */
  color: #333;
  margin: 1rem 0 0.3rem;
}

.course-link h3 {
  font-size: 1.1rem; /* ← 日付などの文字を少し大きく */
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* キーワード（ガイダンス・簿記2級）を中央に */
.course-link .tape-text {
  display: flex;
  justify-content: center; /* ← 中央寄せ */
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.course-link .tape-text h4 {
  font-size: 1.2rem; /* ← 少し大きく */
  padding: 0.5rem 1rem;
  background: #f0f0f0;
  border-radius: 8px;
  margin: 0;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .course-link img {
    width: 90% !important;
    height: auto !important;
  }

  .course-link h2 {
    font-size: 1.3rem;
  }

  .course-link h3 {
    font-size: 1rem;
  }

  .course-link .tape-text h4 {
    font-size: 1rem;
  }
}

/* ===== 完全統一版：course-link の画像高さ＆中央揃え ===== */
.course-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #f7f7f7 !important; /* ← グレー枠そのまま */
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1.5rem 0 !important;
  margin: 1rem auto !important;
  width: 90%;
  max-width: 800px;
}

/* 画像：高さを固定しつつ比率維持して中央揃え */
.course-link img {
  width: auto !important;
  height: 550px !important; /* ← 全画像で縦サイズを統一 */
  max-width: 90% !important;
  object-fit: contain !important; /* ← トリミングせず全体を表示 */
  border-radius: 10px !important;
  background: #fff;
  display: block;
  margin: 0 auto !important;
}

/* ホバー効果 */
.course-link img:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

/* タイトル・日付の位置を中央に */
.course-link h2,
.course-link h3 {
  text-align: center;
  width: 100%;
}

.course-link h2 {
  font-size: 1.6rem;
  color: #333;
  margin: 1rem 0 0.3rem;
}

.course-link h3 {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* ボタン・キーワードの中央寄せ */
.course-link .tape-text {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.course-link .tape-text h4 {
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  background: #f0f0f0;
  border-radius: 8px;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .course-link img {
    height: 350px !important; /* ← モバイルでは少し低く */
    width: auto !important;
    max-width: 90% !important;
  }

  .course-link h2 {
    font-size: 1.3rem;
  }
  .course-link h3 {
    font-size: 1rem;
  }
  .course-link .tape-text h4 {
    font-size: 1rem;
  }
}

/* ===== お問い合わせ完了ページ ===== */

.thanks-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 100px;
}

.thanks-message {
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
}

.thanks-message h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.thanks-message p {
  margin-bottom: 15px;
}

.button-place {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.button-place .button {
  background-color: #47b8c8;
  color: #fff;
  padding: 12px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.button-place .button:hover {
  opacity: 0.8;
}