/* # v1.0 - BDSテクニカルスクール メインCSS */

/* セキュリティ対策: インラインスタイルの制限 */
:root {
  --bs-font-sans-serif: "M PLUS 1", serif;
  --bs-body-color: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
}

.ls-0 {
  letter-spacing: 0px;
}

.ls-1 {
  letter-spacing: 0.5px;
}

.ls-2 {
  letter-spacing: 1px;
}

.ls-3 {
  letter-spacing: 1.5px;
}

.ls-4 {
  letter-spacing: 2px;
}

.ls-5 {
  letter-spacing: 3px;
}

.navbar {
  background: #083d61ab !important;
  backdrop-filter: blur(8px);
}

@media (max-width: 992px) {
  /* Bootstrapのmdサイズ以下（タブレット＆スマホ） */
  .navbar-nav {
    margin: 0 auto;
    text-align: center;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    padding: 10px 0;
  }
}

.navbar-nav .nav-link {
  display: inline-block;
  /* 中央揃えを適用するためにインラインブロック化 */
}

.carousel-item {
  height: 100vh;
  /* ビューポート全体の高さ */
  min-height: 400px;
}

.carousel-item img {
  object-fit: cover;
  /* 画像をフィットさせる */
  height: 100vh;
}

.carousel-caption {
  bottom: 40%;
  /* キャプションの位置を中央寄りに */
}

.carousel-caption h1 {
  font-size: 3rem;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 1.5rem;
}

/* カルーセルの画像を全画面に */
.carousel-item {
  height: 100vh;
  min-height: 400px;
}

.carousel-item img {
  object-fit: cover;
  height: 100vh;
}

/* テキストとボタンを中央固定（PC用） */
.fixed-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 999;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(22, 21, 21, 0.8),
    0 0 10px rgba(13, 55, 85, 0.7), 0 0 15px rgba(13, 55, 85, 0.74);
  filter: drop-shadow(0 0 15px rgba(13, 55, 85, 0.788));
  width: 100%;
}

.fixed-caption h1 {
  font-size: 2.5rem;
  /* フォントサイズ */
  font-weight: 700;
  /* 太字（標準的な太さ） */
  color: #ffffff;
  text-shadow: 0 0 10px rgba(68, 61, 90, 0.8),
    0 0 10px rgba(13, 55, 85, 0.795), 0 0 15px rgba(13, 55, 85, 0.747);
  filter: drop-shadow(0 0 20px rgba(13, 55, 85, 0.7));
}

/* ボタン中央固定（PC用） */
.btn_wrap2 {
  width: 350px;
  height: auto;
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 999;
}

/* スマホ用調整 */
@media (max-width: 576px) {
  .fixed-caption {
    top: 70%;
    transform: translateX(-50%);
  }

  .btn_wrap1 {
    width: 310px;
    height: auto;
    position: relative;
    margin: auto;
  }

  .btn_wrap2 {
    top: 86%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
  }

  .fixed-caption h1 {
    font-size: 1.6rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    word-break: break-word;
  }

  .button {
    padding: 20px 15px;
    font-size: 1rem;
  }
}

/* 吹き出しスタイル（トップ） */
.btn_balloon2 {
  width: 280px;
  height: 30px;
  padding-left: 0.1em;
  border-radius: 20px;
  border: solid 2px #117ee4;
  background-color: #fff;
  font-size: 90%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translate(-50%, 0%);
  pointer-events: none;
  /* クリック無効 */
  transition: 0.2s;
  color: #117ee4;
  z-index: 2;
}

/* 吹き出しの矢印部分 */
.btn_balloon2::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
}

.btn_balloon2::before {
  bottom: 1px;
  border-width: 8px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
  z-index: 2;
}

.btn_balloon2::after {
  bottom: 0;
  border-width: 11px 8px 0 8px;
  border-color: #117ee4 transparent transparent transparent;
  z-index: 1;
}

/* ボタン本体のスタイル */
.button {
  width: 100%;
  padding: 25px 30px;
  border-radius: 8px;
  font-size: 120%;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: #117ee4;
  box-shadow: 0 5px 0 #0b4479;
  color: #fff;
  transition: 0.2s;
  position: relative;
  /* 矢印のためにrelative */
}

/* ボタンの矢印 */
.button:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s;
}

/* ホバー時のスタイル変更 */
.button:hover {
  background: #117ee4;
  color: #fff;
  box-shadow: 0 2px 0 #0b4479;
  transform: translateY(3px);
}

/* 見出し */
.heading10 {
  position: relative;
  padding-top: 35px;
  padding-bottom: 5px;
  font-size: 26px;
  font-weight: 700;
  color: rgba(5, 62, 98, 1);
  border-bottom: 1px solid rgba(5, 62, 98, 1);
}

.heading10 span {
  position: relative;
  z-index: 2;
}

.heading10::before {
  content: attr(data-en);
  position: absolute;
  top: 0px;
  left: 0;
  color: #5b9eca4b;
  font-size: 50px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  z-index: 1;
}

/* ニュース関連のスタイル */
.news-title {
  color: #333;
  transition: color 0.3s;
}

.news-title:hover {
  color: #117ee4;
}

/* カード関連のスタイル */
.card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* アコーディオンのスタイル */
.accordion-button:not(.collapsed) {
  background-color: #f8f9fa;
  color: #117ee4;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(17, 126, 228, 0.25);
}