@charset "UTF-8";

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー全体用 */
/* 全体のスタイル */
html {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロールバーを防ぐため */
}
        .obn {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .slider {
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            border: 2px solid #333;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }
        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 100%;
        }
.slide2 {
    width: 100%;
    height: auto;
    display: none;
    opacity: 1.0; /* 通常時は少し透明 */
    transition: opacity 0.3s ease; /* 透明度がスムーズに変わるように */
}
.slide2.active {
    display: block;
}
.slide2:hover {
    opacity: 0.8; /* ホバー時は完全に不透明 */
}
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 2rem;
            padding: 10px;
            cursor: pointer;
            z-index: 1;
        }
        .prev {
            left: 0;
        }
        .next {
            right: 0;
        }
        .prev:hover, .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
.parentx {
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
}
.box-design14 {
  margin: 20px auto 20px 20px;
  padding: 20px;
  border: 4px solid #434343;
  width: 75%;
}
.box-design14-ttl {
  position: relative;
  left: -40px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0;
  width: 100%;
  font-weight: bold;
    font-family: "Yu Gothic", sans-serif;
    font-size: 2.4rem;
}
.btn3,
a.btn3,
button.btn3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn3-svg {
  font-weight: 700;
  line-height: 54px;
  width: 204px;
  height: 54px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
}
a.btn3-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
a.btn3-svg svg rect {
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 200px, 16px;
  stroke-dashoffset: 70px;
}
a.btn3-svg:hover svg rect {
  stroke-dashoffset: 284px;
}
a.btn3-svg span {
  color: #000;
}
.container8 {
text-align: center !important;
}
.under {
  background: linear-gradient(transparent 70%, #ffd13a 70%);
  font-weight: bold; /* 太字にする */
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .blue-section {
            background-color: #0073e6;
            color: white;
            text-align: center;
            padding: 5px 0; /* 縦幅を縮めました */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
        }
        .blue-section h3 {
            font-size: 32px;
            margin-top: 16px;
            margin-bottom: -10px;
        }
        .blue-section p {
            font-size: 16px;
        }
        .gray-section {
            background-color: #f7f7f7;
            color: black;
            text-align: center;
            padding: 30px 0;
        }
        .gray-section h4 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .gray-section p {
            font-size: 18px;
            margin-bottom: -8px;
        }
.styled-top-text {
  font-family: 'Yu Mincho', serif;
  font-size: clamp(20px, 4vw, 35px); /* 画面幅に応じた動的フォントサイズ */
  color: rgb(235, 0, 0);
  text-align: left;
  line-height: 1.5; /* 行間を調整して読みやすくする */
  word-wrap: break-word; /* 必要に応じて単語を折り返す */
}
.img-circle {
  border-radius: 50%;
}
img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.back-white{
  background:white;
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;

}
.custom-text {
    position: absolute;
    top: 45%; /* 縦方向の位置を調整 */
    left: 30%; /* 横方向の位置を中央に設定 */
    transform: translate(-50%, -50%); /* 完全に中央に配置 */
    font-family: "Yu Gothic", sans-serif;
    font-size: 3vw; /* ビューポート幅に基づいたフォントサイズ */
    line-height: 1.2; /* 行間を相対的に設定 */
    color: rgb(255, 255, 255);
}
.custom2-text {
    position: absolute;
    top: 55%; /* 縦方向の位置を調整 */
    left: 32.8%; /* 横方向の位置を中央に設定 */
    transform: translate(-50%, -50%); /* 完全に中央に配置 */
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.6vw; /* ビューポート幅に基づいたフォントサイズ */
    line-height: 1.4; /* 行間を相対的に設定 */
    color: rgb(255, 255, 255);
    white-space: nowrap;
}
.styled-top-text {
  font-family: 'Yu Mincho', serif;
  font-size: clamp(20px, 4vw, 35px);
  color: rgb(235, 0, 0);
  text-align: left;
  line-height: 1.5;
  word-wrap: break-word;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー全体用 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー体験会の様子スライド用開始 */
.section-achievements {
  margin: 0;
  padding: 56px 0;
  background-color: #121212;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: Avenir, "Noto Sans JP";
  font-size: 16px;
  letter-spacing: 0.8px;
  box-sizing: border-box;
  position: relative;
}

.inner-flow {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.inner-flow.no-padding {
  padding: 0;
}

.carousel__container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-track {
  display: flex;
  animation: scrollInfinitely 70s linear infinite;
  width: max-content;
  transform-origin: left top;
  transform: scale(var(--carousel-scale, 1));
}

.carousel__item {
  flex: 0 0 auto;
  width: 2150px; /* 画像サイズを保つ */
  padding-top: 16px;
  box-sizing: border-box;
  margin-right: 15px; /* 初期値 */
}

.carousel__item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 無限スクロールのアニメーション */
@keyframes scrollInfinitely {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 画面幅に応じて画像間の余白を縮める */
@media (max-width: 1200px) {
  .carousel__item {
    margin-right: 8px;
  }
}
@media (max-width: 800px) {
  .carousel__item {
    margin-right: 8px;
  }
}
@media (max-width: 500px) {
  .carousel__item {
    margin-right: 8px;
  }
}

.heading-13 {
  position: relative;
  color: #fff;
  text-align: center;
  font-size: clamp(30px, 4vw, 42px);
  white-space: nowrap;
  -webkit-box-reflect: below -25px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .5));
}
.heading-13ver2 {
  position: relative;
  color: #ff2d59;
  text-align: center;
  font-size: clamp(27px, 4vw, 42px);
  white-space: nowrap;
  -webkit-box-reflect: below -25px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .5));
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー体験会の様子スライド用開始 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーブルーハッカー育成コースの概要 */

/* コンテナ中央揃え */
.responsive-image {
  text-align: center;
  margin: 0 auto;
  padding: 0 32px; /* スマホ時の左右スペース */
}

/* 共通画像スタイル */
.image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* デスクトップ用画像の最大幅を1048pxに制限 */
.image-desktop {
  max-width: 1048px;
}

/* モバイル画像はデフォルトで非表示 */
.image-mobile {
  display: none;
}

/* 769px以下で切り替え */
@media (max-width: 769px) {
  .image-desktop {
    display: none;
  }

  .image-mobile {
    display: block;
  }
}

/* solid007 */
.button_solid007 {
    text-align: center;
}
.button_solid007 p {
    margin-bottom: 5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid007 p:before, .button_solid007 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #fff;
    content: "";
}
.button_solid007 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid007 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid007 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #03c064;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
}
.button_solid007 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

.button-wrapper-s {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 64px; /* ボタン同士の間隔 */
  margin-top: 20px; /* 上下の余白（任意） */
}
/* モバイル対応：769px以下では縦並びに */
@media (max-width: 769px) {
  .button-wrapper-s {
    flex-direction: column;
    align-items: center; /* ボタンを中央に揃える */
  gap: 24px; /* ボタン同士の間隔 */
  }
}

/* solid100 */
.button_solid100 {
    text-align: center;
}
.button_solid100 p {
    margin-bottom: 5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid100 p:before, .button_solid100 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #fff;
    content: "";
}
.button_solid100 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid100 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid100 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #ff2d59;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
}
.button_solid100 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}


</style>

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーブルーハッカー育成コースの概要 */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーハッキングの手法を一部紹介 */

.black-section {
  background-color: #000;
}
.white-text {
  color: #fff !important;
}
  .containerx {
    display: flex;
    width: 100%; /* 親要素いっぱいの横幅 */
    height: auto; /* 必要に応じて高さを調整 */
    flex-direction: row; /* 通常時は横並び */
  }
  .containery {
    display: flex;
    width: 100%; /* 親要素いっぱいの横幅 */
    height: auto; /* 必要に応じて高さを調整 */
    flex-direction: row; /* 通常時は横並び */
  }

  .image-section {
    flex: 4.5; /* 横幅の4の部分（45%） */
  }

  .image-section img {
    width: 100%; /* 画像が親要素いっぱいに広がるように */
    height: auto; /* 高さを自動調整 */
  }

  .text-section {
    flex: 5.5; /* 横幅の6の部分（55%） */
    padding: 20px; /* 余白を入れて調整 */
    box-sizing: border-box; /* パディングを含めてサイズを計算 */
  }

  /* 768px以下の画面幅で縦並びにする */
  @media (max-width: 768px) {
    .containerx {
      flex-direction: column; /* 縦並びに変更 */
    }
    .containery {
      flex-direction: column; /* 縦並びに変更 */
    flex-direction: column-reverse; /* 画像を上、テキストを下に並べる */
    }

    .image-section, .text-section {
      flex: 1; /* 縦並びでは幅を均等に */
    }

    .text-section {
      padding: 10px; /* モバイルでは余白を少し減らす */
    }
  .image-section img {
    width: 65%; /* 画像が親要素いっぱいに広がるように */
    height: auto; /* 高さを自動調整 */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  }
.font-size-hack {
  font-size: clamp(8px, 2vw, 16px);
}
@media screen and (max-width: 769px) {
.font-size-hack {
  font-size: 16px;
}
}



/* solid007-2 */
.button_solid007-2 {
    text-align: center;
  font-size: 18px;
}
.button_solid007-2 p {
    margin-bottom: 5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid007-2 p:before, .button_solid007-2 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #fff;
    content: "";
}
.button_solid007-2 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid007-2 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid007-2 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #03c064;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
}
.button_solid007-2 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーハッキングの手法を一部紹介 */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーホワイトハッカーを目指すなら */
/* ラッパー要素のスタイル */
.choosecourse__wrapper {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 0px 0px 24px; /* 上部と左右にパディングなし、下部に24px */
  border: 0px; /* 境界線なし */
  outline: 0px; /* アウトラインなし */
  font-size: 16px; /* フォントサイズ16px */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: rgb(246, 246, 246); /* 背景色 */
  display: flex; /* Flexboxを使用 */
  justify-content: center; /* 水平方向中央揃え */
  gap: 16px; /* Flexアイテム間のギャップ */
  color: rgb(18, 18, 18); /* 文字色 */
  font-family: Avenir, Roboto, "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", Meryo, メイリオ, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; /* フォントファミリー */
  letter-spacing: 0.4px; /* 文字間隔 */
}

/* リストのスタイル */
.choosecourse__list {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 0px; /* パディングなし */
  border: 5px solid rgb(246, 246, 246); /* 薄いグレーの枠線 */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: rgb(254, 250, 250); /* 背景色 */
  position: relative; /* 相対位置 */
  width: 492px; /* 固定幅 */
  filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 10px); /* ドロップシャドウ */
  border-radius: 20px; /* 角丸 */
  overflow: hidden; /* 子要素のはみ出しを隠す */
  transition: 0.3s; /* トランジションでスムーズに変化 */
}

/* リンクボタンのスタイル */
.choosecourse__link {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  text-decoration-line: none; /* 下線なし */
  margin: 0px; /* マージンなし */
  padding: 0px; /* パディングなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  cursor: pointer; /* マウスカーソルをポインタに変更 */
  transition: color 0.4s; /* 色のトランジション */
  display: block; /* ブロック表示 */
  position: absolute; /* 絶対位置 */
  width: 482px; /* 幅 */
  height: 901.641px; /* 高さ */
  z-index: 1; /* 他の要素より前に表示 */
}

/* リンク内のコンテンツ部分 */
.choosecourse__link--content {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 0px; /* パディングなし */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  height: 901.641px; /* 高さ */
  display: flex; /* Flexbox使用 */
  flex-direction: column; /* 縦並び */
}

/* 赤ヘッダー部分のスタイル rgb(169, 48, 50)*/
.choosecourse__head {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 24px 14.4531px; /* 上下に24px、左右に14.4531px */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  font-size: 28px; /* フォントサイズ28px */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: #dc143c; /* 背景色 */
  text-align: center; /* 中央揃え */
  color: rgb(255, 255, 255); /* 文字色 */
  font-weight: 800; /* 太字 */
  position: relative; /* 相対位置 */
}
/* 青ヘッダー部分のスタイル rgb(17, 55, 107)*/
.choosecourse__head2 {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 24px 14.4531px; /* 上下に24px、左右に14.4531px */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  font-size: 28px; /* フォントサイズ28px */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: #008278; /* 背景色 */
  text-align: center; /* 中央揃え */
  color: rgb(255, 255, 255); /* 文字色 */
  font-weight: 800; /* 太字 */
  position: relative; /* 相対位置 */
}

/* コンテンツ部分のスタイル */
.choosecourse__content {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 40px 16px; /* 上下に40px、左右に16px */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  position: relative; /* 相対位置 */
  display: flex; /* Flexbox使用 */
  flex-direction: column; /* 縦並び */
  height: 811.641px; /* 高さ */
}

/* 最初の画像のスタイル */
.choosecourse__image {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  display: flex; /* Flexboxを使用 */
  justify-content: center; /* 水平方向中央揃え */
  margin-top: 10px; /* マージンなし */
  padding: 0px; /* パディングなし */
  border: 10px 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
}

/* ロゴ画像のスタイル */
.choosecourse__logo {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: -14px auto 0px; /* 上に-14px、左右中央揃え */
  padding: 0px; /* パディングなし */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  max-width: 340px; /* 最大幅340px */
}

/* チェックリストのスタイル */
.choosecourse__checklist {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 0px; /* パディングなし */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  display: flex; /* Flexbox使用 */
  flex-direction: column; /* 縦並び */
  gap: -48px; /* ???のギャップ */
  font-size: 20px; /* フォントサイズ28px */
}

/* チェックリストのリスト項目のスタイル */
.choosecourse__checklist li {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin:15px 0px 0px; /* リスト間の空白 */
  padding: 0px; /* パディングなし */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: baseline; /* 行の高さを基準に揃える */
  background: transparent; /* 背景なし */
  display: flex; /* Flexbox使用 */
  gap: 8px; /* チェックとテキストのギャップ */
}

/* チェックリスト内の画像のスタイル */
.choosecourse__checklist img {
  box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
  margin: 0px; /* マージンなし */
  padding: 0px; /* パディングなし */
  border: 0px; /* 枠線なし */
  outline: 0px; /* アウトラインなし */
  vertical-align: middle; /* 垂直方向中央揃え */
  background: transparent; /* 背景なし */
height: 75%;
margin-top:6px
}

img.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* レスポンシブデザイン: スマホ向けスタイル */
@media (max-width: 768px) {
  .choosecourse__wrapper {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* 中央揃え */

  }

  .choosecourse__list {
    margin: 0; /* マージンなし */
    width: 85%; /* 幅% */
  }

  .choosecourse__head {
    font-size: 24px; /* フォントサイズを小さく */
  }

  .choosecourse__checklist {
    flex-direction: column; /* 縦並び */
    gap: 16px; /* アイテム間のギャップ */
    font-size: 18px; /* フォントサイズを小さく */
  }

  .choosecourse__image {
    width: 100%; /* 幅100% */
    display: block; /* ブロック表示 */
    margin: 0 auto; /* 左右中央揃え */
  }
.choosecourse__link--content {
  height: 920px; /* 高さ */
}
}


  .b_gray {
  background: #f6f6f6;
}

/* solid008 */
.button_solid008 {
    text-align: center;
}

.button_solid008 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 16px 45px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #029494;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    font-size: 18px; /* フォントサイズ */
}
.button_solid008 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

/* solid009 */
.button_solid009 {
    text-align: center;
}

.button_solid009 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 16px 45px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #d13664;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    font-size: 18px; /* フォントサイズ */
}
.button_solid009 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーホワイトハッカーを目指すなら */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーセキュ塾バナー */

.banner {
  position: relative;
  width: 100%; /* 横幅を100%に設定 */
  height: 400px; /* 高さはお好みで調整 */
  background-image: url('bannar-2.webp'); /* 画像のパスを指定 */
  background-size: cover; /* 画像をバナーのサイズに合わせて拡大縮小 */
  background-position: center; /* 画像の位置を中央に設定 */
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  color: white; /* 文字色を白に設定 */
}

/* 文字とボタンのスタイル */
.banner-content {
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 影をつけて浮き出し効果 */
}

.banner-content h2 {
  font-size: 3rem; /* タイトルのフォントサイズ */
  margin: 0 0 20px; /* マージンの調整 */
}

.btn-gradient-radius {
  font-size: 2rem; /* ボタンのフォントサイズ */
  font-weight: bold;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
}

.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

.text-bannar {
  font-size: 1.8rem;
  color: #ffffff;
  text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .banner {
    height: 450px; /* 小さい画面での高さ調整 */
  }

  .banner-content h2 {
    font-size: 3rem; /* 小さい画面でのタイトルのフォントサイズ */
  }

  .banner-content button {
    font-size: 2rem; /* 小さい画面でのボタンのフォントサイズ */
    padding: 8px 16px; /* 小さい画面でのボタンの内側の余白 */
  }

  .text-bannar {
    font-size: 1.75rem;
    color: #ffffff;
    text-align: center;
  }

  .btn-gradient-radius {
    font-size: 1.5rem; /* 小さい画面でのボタンのフォントサイズ */
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーセキュ塾バナー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーよくある質問 */
.our-faq-wrapper {
  float: left;
  width: 100%;
  padding: 89px 0 60px;
  background: #121212;
}

.our-faq-wrapper {
  padding: 90px 0 60px;
  background: #121212;
}
.accordion .card {
  border: none;
  margin-bottom: 30px;
}
.our-faq-wrapper .btn-link {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  background: #2c3e50;
  color: #fff;
  border-radius: 0;
  padding: 10px 15px 12px;
  font-size: 18px; /* 質問の文字を大きく */
  overflow: hidden;
  border: none;
  font-weight: 600;
  cursor: pointer;
}
.our-faq-wrapper .btn-link:hover,
.our-faq-wrapper .btn-link:focus {
  text-decoration: none;
}
.our-faq-wrapper .btn-link:after {
  position: absolute;
  content: '\f068';
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-family: fontawesome;
}
.our-faq-wrapper .btn-link.collapsed:after {
  content: '\f067';
}
.our-faq-wrapper .btn-link:before {
  position: absolute;
  content: '';
  background: #ff2d59;
  transform: skew(-35deg);
  height: 100%;
  width: 50%;
  left: 90%;
  top: 0;
}
.card-header {
  padding: 0;
  background: transparent;
  border-bottom: none;
}
.card-body {
  position: relative;
  display: none;
  font-size: 16px; /* 回答の文字を少し大きく */
  color: #fff;
  padding: 10px 15px 0px;
}
.card-body.show {
  display: block;
}


/* デフォルトでは非表示（PCサイズ） */
.sp-br {
  display: none;
}
/* 画面幅が768px以下なら表示（スマホ） */
@media (max-width: 768px) {
  .sp-br {
    display: inline;
  }
}

/* デフォルト（スマホなど768px未満）では非表示 */
.pc-br {
  display: none;
}

/* 768px以上の画面幅（PCサイズ）では改行表示 */
@media (min-width: 768px) {
  .pc-br {
    display: inline;
  }
}

/* デフォルトでは非表示（PCサイズ） */
.sps-br {
  display: none;
}
/* 画面幅が500px以下なら表示（スマホ） */
@media (max-width: 500px) {
  .sps-br {
    display: inline;
  }
}

/* デフォルト（スマホなど768px未満）では非表示 */
.pcp-br {
  display: none;
}

/* 500px以上の画面幅（PCサイズ）では改行表示 */
@media (min-width: 500px) {
  .pcp-br {
    display: inline;
  }
}
/* 500px以下の画面幅（PCサイズ）では非表示 */
@media (max-width: 500px) {
  .pcp500-br {
  display: none;
  }
}

/* デフォルトでは表示（PCサイズ） */
.pcp400-br {
    display: inline;
}
/* 画面幅が500px以下なら表示（スマホ） */
@media (max-width: 400px) {
  .pcp400-br {
  display: none;
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーよくある質問 */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー横いっぱい申込＆カウンセリングバナー表示 */
/* 親セクション（バナー全体）のスタイル */
.banner-botann-all {
  background-repeat: no-repeat; /* 背景画像の繰り返しをしない */
  background-position: center center; /* 背景画像の位置を中央に */
  background-size: cover; /* 背景画像を要素のサイズに合わせてカバー */
  background-color: rgb(0, 130, 121); /* 背景色を指定（緑っぽい色） */
  background-image: url("https://www.heatwavenet.co.jp/hacking_experience_course/img/bg-footer.webp"); /* 背景画像を設定 */
  height: 500px; /* 画像の高さを統一し、大きめに設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* 見出しのスタイル */
.banner-botann-l {
  color: white; /* テキスト色を白に */
  font-size: 2.4em; /* フォントサイズを大きく */
  line-height: 1.2; /* 行間を狭める */
  margin-bottom: 20px; /* 見出しの下の余白 */
}

/* カラム内ボタン上のテキスト */
.banner-botann-s {
  color: white; /* テキスト色を白に */
  font-size: 1.4em; /* フォントサイズを大きく */
}

/* 2カラムのレイアウト */
.banner-2content {
  display: flex;
  justify-content: center;
  gap: 100px; /* カラム間の余白 */
}

/* カラム内のスタイル */
.banner-item {
  text-align: center;
  color: white;
  max-width: 300px; /* カラムの最大幅 */
}

/* 資料請求ボタンのスタイル */
.banner-button-s {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
  margin: 10px 0px; /* 上下10pxのマージン */
  margin: 0px; /* 外側のマージンを0に */
  padding: 14px 20px 14px; /* 上下14px、左右20px、下18pxのパディング */
  border-radius: 50px; /* 丸いボタンにするために角を丸く */
  width: 340px; /* 幅を340pxに */
  display: inline-block; /* インラインブロックとして表示 */
  font-weight: bold; /* 太字 */
  font-size: 28px; /* フォントサイズを28pxに */
  text-decoration-line: none; /* 下線なし */
  transition: 0.2s; /* ホバー時の遷移効果 */
  -webkit-tap-highlight-color: transparent; /* モバイルタップ時のハイライトを無効に */

  background-color: rgb(239, 40, 40); /* 赤い背景色 */
  border: 2px solid rgb(255, 255, 255); /* 白い枠線 */
  color: rgb(255, 255, 255); /* 文字色を白に */
margin: 10px 0px; /* 上下10pxのマージン */
  cursor: pointer; /* デフォルトのカーソル */
  transition: opacity 0.3s ease; /* スムーズな変化 */
}

.banner-button-s:hover {
  opacity: 0.7; /* 透明度を下げる */
  background-color: rgb(255, 255, 255); /* 赤い背景色 */
  border: 2px solid rgb(239, 40, 40); /* 白い枠線 */
  color: rgb(239, 40, 40); /* 文字色を赤に */
}
/* お問い合わせボタンのスタイル */
.banner-button-o {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
  background-color: rgb(255, 255, 255); /* 白い背景色 */
  border: 2px solid rgb(0, 82, 76); /* 緑色の枠線 */
  color: rgb(0, 82, 76); /* 緑色の文字 */
  margin: 10px 0px; /* 上下10pxのマージン */
  margin: 0px; /* 外側のマージンを0に */
  padding: 14px 20px 14px; /* 上下14px、左右20px、下18pxのパディング */
  border-radius: 50px; /* 丸いボタンにするために角を丸く */
  width: 340px; /* 幅を340pxに */
  display: inline-block; /* インラインブロックとして表示 */
  font-weight: bold; /* 太字 */
  font-size: 28px; /* フォントサイズを28pxに */
  text-decoration-line: none; /* 下線なし */
  transition: 0.2s; /* ホバー時の遷移効果 */
  -webkit-tap-highlight-color: transparent; /* モバイルタップ時のハイライトを無効に */
  cursor: pointer; /* デフォルトのカーソル */
  transition: opacity 0.3s ease; /* スムーズな変化 */
margin: 10px 0px; /* 上下10pxのマージン */
}

.banner-button-o:hover {
  opacity: 0.7; /* 透明度を下げる */
}


@media (max-width: 1200px) {
.banner-button-o {
  font-size: 20px; /* フォントサイズを18pxに */
}
.banner-button-s {
  font-size: 20px; /* フォントサイズを18pxに */
}
.banner-botann-l {
  font-size: 2.0em; /* フォントサイズを大きく */
}
  .banner-2content {
    display: flex;
    flex-direction: column; /* 1200px以下で縦並び */
    align-items: center; /* 各ボタンを中央に配置 */
    justify-content: center; /* 全体を中央揃え */
    gap: 30px; /* ボタン間の間隔 */
  }

  .banner-item {
    height: 60%; /* 親要素内での高さを確保 */
    width: 100%; /* 親要素内での幅を確保 */
    display: flex;
    justify-content: center; /* 各ボタンを中央寄せ */
  }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー横いっぱい申込＆カウンセリングバナー表示 */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター */
.l-footer {
    background-color: rgb(40, 40, 40);
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font-size: 16px;
}

.l-footer_copyright {
    font-size: 12px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター */