@charset "UTF-8";

.swiper {
  width: 100%;
}

.swiper img.pc {
  width: 100%;
}

.swiper img.sp {
  width: 100%;
}

/* PC用 */
.img-responsive.pc {
  display: block;
}

.img-responsive.sp {
  display: none;
}

.sub-title {
  font-size: 33px;
  line-height: 40px;
  margin: 10px 0 30px 0;
}

@media screen and (max-width: 767px) {

  /* スマホ用 */
  .img-responsive.pc {
    display: none;
  }

  .img-responsive.sp {
    display: block;
  }

  .sub-title {
    font-size: 22px;
    line-height: 30px;
  }
}

.green-button {
  background-color: #287776;
  /* ボタンの背景色 */
  color: white;
  /* テキスト色 */
  padding: 8px 20px;
  /* 上下のパディング10px、左右のパディング15px */
  text-align: center;
  /* テキストを中央揃え */
  text-decoration: none;
  /* テキストの装飾を無効化 */
  display: inline-block;
  /* インラインブロック要素として表示 */
  font-size: 16px;
  /* フォントサイズ */
  border-radius: 25px;
  /* 角の丸み */
  cursor: pointer;
  /* カーソルをポインターに設定 */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  /* 背景色、テキスト色、ボーダー色の変化を滑らかに */
  border: 3px solid transparent;
  /* 初期状態では透明なボーダー */
}

.green-button:hover {
  background-color: transparent;
  /* ホバー時の背景色を透明に */
  color: #287776;
  /* ホバー時のテキスト色を元の背景色に */
  border-color: #287776;
  /* ホバー時のボーダー色を元の背景色に */
}

.green-button-ao {
  background-color: #287776;
  /* ボタンの背景色 */
  color: white;
  /* テキスト色 */
  padding: 20px 20px;
  /* 上下のパディング10px、左右のパディング15px */
  text-align: center;
  /* テキストを中央揃え */
  text-decoration: none;
  /* テキストの装飾を無効化 */
  display: inline-block;
  /* インラインブロック要素として表示 */
  font-size: 20px;
  /* フォントサイズ */
  border-radius: 25px;
  /* 角の丸み */
  cursor: pointer;
  /* カーソルをポインターに設定 */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  /* 背景色、テキスト色、ボーダー色の変化を滑らかに */
  border: 3px solid transparent;
  /* 初期状態では透明なボーダー */
}

.green-button-ao:hover {
  background-color: transparent;
  /* ホバー時の背景色を透明に */
  color: #287776;
  /* ホバー時のテキスト色を元の背景色に */
  border-color: #287776;
  /* ホバー時のボーダー色を元の背景色に */
}

.white-button {
  background-color: white;
  /* ボタンの背景色 */
  color: #287776;
  /* テキスト色 */
  padding: 8px 20px;
  /* 上下のパディング10px、左右のパディング15px */
  text-align: center;
  /* テキストを中央揃え */
  text-decoration: none;
  /* テキストの装飾を無効化 */
  display: inline-block;
  /* インラインブロック要素として表示 */
  font-size: 16px;
  /* フォントサイズ */
  border-radius: 25px;
  /* 角の丸み */
  cursor: pointer;
  /* カーソルをポインターに設定 */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  /* 背景色、テキスト色、ボーダー色の変化を滑らかに */
  border: 3px solid #287776;
  /* 初期状態では透明なボーダー */
}

.white-button:hover {
  background-color: #287776;
  /* ホバー時の背景色を透明に */
  color: #fff;
  /* ホバー時のテキスト色を元の背景色に */
  border-color: #287776;
  /* ホバー時のボーダー色を元の背景色に */
}

a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

a .experience_box{
  text-decoration: none;
  color: #060606;
}

.main-contents-box {
  font-size: 20px;
  padding: 24px;
  border-radius: 15px;
  margin-bottom: 15px;
}

.sub-contents-box {
  font-size: 20px;
  padding: 24px;
  border-radius: 15px;

  flex-flow: column;
}

.bottom-contents-box {
  width: 100%;
  font-size: 20px;
  padding: 24px;
  border-radius: 15px;
  display: inline-flex;
}

.bottom-title {
  margin-left: 20px;
}

.contents-box-img>img {
  max-width: 100%;
  margin-right: 20px;
  margin-bottom: 20px;

}

.news_event .img-responsive.pc {
  max-width: 100%;
  display: block;
}

.news_event .img-responsive.sp {
  max-width: 70%;
  display: none;
  margin: 0 auto;
}

.experience .profile {
  padding: 20px;
  display: block;
}

.experience .profile .logo {
  margin: 20px auto auto 0;
}

.experience_box {
  border: #ccc solid 1px;
  box-shadow: 4px 4px #ccc;
  border-radius: 12px;
  padding: 0 16px 16px;
  margin-top: 20px;
  width: 100%;
  height: 360px;
  margin: 0 auto;
}


@media screen and (max-width: 767px) {

  /* スマホ用 */
  .main-contents-box {}

  .sub-contents-box {}

  .bottom-contents-box {}

  .bottom-contents-box .contents-box-img {
    text-align: center;
    margin-right: 0px;
  }

  .bottom-title {
    margin-left: 0px;
  }

  .news_event .img-responsive.pc {
    display: none;
  }

  .news_event .img-responsive.sp {
    display: block;
  }

  .experience .profile {
    display: inline-flex;
  }

  .experience .profile .logo {
    margin: auto 0 auto auto;
  }

  .experience_box {
    height: auto;
  }
}