@charset "UTF-8";
.main_v_inr {
  background-image: url('../images/works/bg_main_01.jpg'); /* 背景画像のパスを指定 */
  background-size: cover; /* 画面いっぱいに表示 */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像の繰り返しをなくす */
  width: 100%;
  height: 500px; /* 例: メインビジュアルの高さ */
  display: flex; /* キャッチコピーを重ねるためのFlexbox */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}

.main_v_inr .img_copy {
  /* キャッチコピーのスタイル調整 */
  position: relative;
  z-index: 1; /* 背景画像より手前に表示する */
}

.main_v {
  /*height: -webkit-calc(90vh - 80px);
  height: calc(90vh - 80px);*/
  width: 100%;
  /*padding-left: 18%;*/
  margin-top: 80px;
  position: relative;
}

@media screen and (max-width: 1024px) {
  .main_v {
    border: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
    margin-top: 68px;
  }
}

.main_v .vegas-slide {
  border-radius: 0 0 0 50px;
}

@media screen and (max-width: 1024px) {
  .main_v .vegas-slide {
    border-radius: 0;
  }
}

.main_v .vegas-wrapper {
  border-radius: 0 0 0 50px;
}

@media screen and (max-width: 1024px) {
  .main_v .vegas-wrapper {
    border-radius: 0;
  }
}

.main_v .main_v_inr {
  height: -webkit-calc(50vh - 80px);
  height: calc(50vh - 80px);
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .main_v .main_v_inr {
    height: -webkit-calc(40vh - 68px);
    height: calc(40vh - 68px);
  }
}

.main_v .img_copy {
  display: flex;
  position: absolute;
  bottom: 0%;
  left: 0%;
  text-align: center; /* 中央に配置したい場合 */
  font-size: 5.0rem; /* ABOUT USの文字サイズ */
  font-weight: bold; /* ABOUT USを太字に */
  background: linear-gradient(45deg, #f9da79, #bbbd54);
  align-items: center; /* これが上下の揃えを実現します */
  padding-left: 5%;
  padding-right: 5%;
  height: 70px;
  padding-bottom: 5px;
}

.img_copy span {
  font-size: 2.5rem; /* ABOUT USの半分の文字サイズ */
  font-weight: bold; /* 太字を解除 */
  margin-left: 19px;
}

@media screen and (max-width: 1024px) {
  .main_v .img_copy {
    font-size: 3.0rem;
    min-width: auto;
    max-width: 100%;
    bottom: -15%;
    left: 0px;
  }
  .img_copy span {
  font-size: 1.8rem; /* ABOUT USの半分の文字サイズ */
  font-weight: bold; /* 太字を解除 */
  margin-left: 19px;
}
}

.main_v .img_copy img {
  width: 43%;
  min-width: 700px;
}

@media screen and (max-width: 1024px) {
  .main_v .img_copy img {
    width: 90%;
    min-width: auto;
    max-width: 100%;
  }
}

.main_v .img_copy p {
  font-size: 2.3rem;
  font-weight: bold;
  color: #214778;
  margin: 50px 0 0 30px;
  text-shadow: 1px 1px 1px #ffffff;
}

@media screen and (max-width: 1024px) {
  .main_v .img_copy p {
    font-size: 1.6rem;
    margin: 30px 0 0 5px;
  }
}

@media screen and (min-width: 768px) {
  .main_v .movie_link {
    position: absolute;
    bottom: -70px;
    right: 40px;
    width: 510px;
  }
}

@media screen and (max-width: 1024px) {
  .main_v .movie_link {
    margin: 0 auto 45px;
    padding: 0;
  }
}

.main_v .movie_link a {
  display: -webkit-flex;
  display: flex;
  background: #ffffff;
}

@media screen and (max-width: 1024px) {
  .main_v .movie_link a {
    margin-left: 0;
    background: #F9FBFC;
  }
}

.main_v .movie_link a:hover {
  opacity: 0.6;
}

.main_v .movie_link .thum {
  width: 300px;
}

@media screen and (max-width: 1024px) {
  .main_v .movie_link .thum {
    width: 50%;
    margin-right: 0;
  }
}

.main_v .movie_link .txt {
  width: -webkit-calc(100% - 250px);
  width: calc(100% - 250px);
  position: relative;
}

@media screen and (max-width: 1024px) {
  .main_v .movie_link .txt {
    width: 50%;
    border-top: none;
  }
}

.main_v .movie_link .txt h3 {
  text-align: center;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

.main_v .movie_link .txt h3 span {
  margin-top: 10px;
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
  color: #005AC6;
  display: block;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
  .main_v .movie_link .txt h3 {
    font-size: 1.3rem;
    padding: 0;
  }
  .main_v .movie_link .txt h3 span {
    font-size: 1rem;
    line-height: 1.4;
  }
}

/* タイトルを中央に配置 */
.title_about_h2 {
  font-size: 3.0rem;
  font-weight: bold;
  margin: 50px auto; /* 左右のマージンを中央揃えにするためのショートハンド */
  width: fit-content;
  
  /* 背景画像の設定 */
  background-image: url('../images/about/under_line.svg');
  background-repeat: no-repeat;
  
  /* 必要に応じて他の背景プロパティも設定 */
  background-position: center 40px; /* 画像を要素の中央に配置 */
  background-size: 300px; /* 画像を要素内に収める */
  height: 100px;
}

.about_text_start {
  width: 980px; /* 固定幅 */
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  text-align: center;
  font-size: 2.0rem;
  /* ↓ ここから追加 ↓ */
  position: relative;
  top: -50px; /* 上方向に50pxずらす例 */
  /* ↑ ここまで追加 ↑ */
}
/* 横並びのレイアウト（PC用） */
.about_list {
  display: flex;
  justify-content: space-between; /* 要素間に均等なスペースを配置 */
  list-style: none; /* リストの点を非表示にする */
  padding: 0;
  margin: 0;
}

.about_list li {
  flex: 1; /* 各要素の幅を均等にする */
  padding: 0 15px; /* 要素の左右に余白を設定 */
}

/* レスポンシブ対応（スマホ用） */
@media (max-width: 1024px) {
  .title_about_h2 {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 50px auto; /* 左右のマージンを中央揃えにするためのショートハンド */
  width: fit-content;
  
  /* 背景画像の設定 */
  background-image: url('../images/about/under_line.svg');
  background-repeat: no-repeat;
  
  /* 必要に応じて他の背景プロパティも設定 */
  background-position: center 40px; /* 画像を要素の中央に配置 */
  background-size: 150px; /* 画像を要素内に収める */
  height: 100px;
}
  .about_list {
    flex-direction: column; /* 要素を縦並びにする */
    justify-content: center; /* 縦並びの要素を中央に配置 */
    align-items: center; /* 縦並びの要素を水平方向の中央に揃える */
  }
  
  .about_list li {
    width: 100%; /* 幅をいっぱいに広げる */
    margin-bottom: 20px; /* 要素の間に余白を追加 */
      padding: 0 15px; /* 要素の左右に余白を設定 */
  }
.about_text_start {
  width: 980px; /* 固定幅 */
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  text-align: center;
  font-size: 1.8rem;
  /* ↓ ここから追加 ↓ */
  position: relative;
  top: -50px; /* 上方向に50pxずらす例 */
  /* ↑ ここまで追加 ↑ */
}
}

/* 文字に被せて背景に丸い色付きの円 */
.title_about_h3 {
  margin-bottom: 30px;
  margin-left: 40px;
}

@media screen and (max-width: 1024px) {
  .section .section_title2 {
    margin-bottom: 30px;
  }
}

.title_about_h3 h3 {
  color: #222222;
  font-size: 2.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.38;
  margin-top: 9px;
}

@media screen and (max-width: 1024px) {
.title_about_h3 h3 {
    font-size: 2.2rem;
  }
}

.title_about_h3 h3 {
  position: relative; /* 子要素のabsoluteの基準とする */
  display: inline-block; /* text-align: center; などで中央寄せにする場合 */
  z-index: 1; /* 文字を円より手前に表示する */
}

.title_about_h3 h3:before {
  content: "";
  background: #f9da79; /* 円の色 */
  width: 75px; /* 円の幅 */
  height: 75px; /* 円の高さ (幅と同じにして正円に) */
  border-radius: 50%; /* 円形にする */
  
  position: absolute; /* 文字の背面に配置するため */
  top: 50%; /* 垂直方向の中央 */
  left: -5px; /* ここをマイナスの値に設定 */
  transform: translate(-50%, -50%); /* 自身のサイズを考慮して完全に中央に */
  z-index: -1; /* 文字より背面に表示 */
  
  /* 元のdisplayやvertical-alignは不要になることが多い */
  /* margin: 0; */
}

.about_box {
    padding: 30px 15px; /* 要素の左右に余白を設定 */
}

/*table用*/
.table-wrapper {
  width: 980px; /* 固定幅 */
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
}

/* 任意：テーブル自体のスタイル */
table {
  width: 100%; /* コンテナに合わせて幅100%に */
  border-collapse: collapse; /* セルの境界線を重ねる */
  margin-bottom: 30px;
}

td {
  padding: 8px;
  border: 2px solid #ddd;
  padding-left: 20px;
}

.td_green {
  background-color: #9fbc9e;
  font-weight: bold;
}

.about_box2 {
  background: #fcf4e5;
  width: 980px;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 60px;
  border-radius: 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
.about_box2 {
  background: #fcf4e5;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 30px;
}
}

.about_text2 {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 30px;
}

.title_about_h4 {
  font-weight: bold;
}
/*about list用*/
.about_box2_list {
  list-style: none;
  padding-left: 0;
}

.about_box2_list li {
  /* Flexboxは不要になります */
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.about_box2_list li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: #333;
  font-size: 1rem;
  top: 0.5em; /* もしくは 0.25rem など、お好みの値に調整 */
}

.title-with-line {
  display: flex;
  align-items: center;
}
.title_about_h5 {
  display: inline-block;
  position: relative;
  color: #ea5514;
  font-weight: bold;
  width: 100%;
}

.title_about_h5::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 75%;
    top: 50%;
    height: 2px;
    background-color: #ea5514;
    margin-left: 15px;
}


/*入会方法エリア用*/
.section_nyukai{
  background-color: #dce6dc;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 60px;
}

/* PC向けレイアウト */
.about_nyukai {
  display: flex; /* Flexboxコンテナとして設定 */
  flex-direction: row; /* 子要素を横並びにする（デフォルト） */
  align-items: flex-start; /* 子要素を垂直方向の上端に揃える */
  gap: 2rem; /* 子要素間の隙間を設定 */
}

.img_nyukai {
  order: 2; /* PCでは画像を2番目に配置（右側） */
  width: 50%;
}

.txt {
  order: 1; /* PCではテキストを1番目に配置（左側） */
  width: 50%;
}

/* スマホ向けレイアウト（メディアクエリ） */
@media (max-width: 1024px) {
  .about_nyukai {
    flex-direction: column; /* 子要素を縦並びにする */
  }

  .img_nyukai,
  .txt {
    order: unset; /* 並び順をリセット */
    width: 100%; /* 幅を100%にする */
  }
  .title_about_h5::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 35%;
    top: 50%;
    height: 2px;
    background-color: #ea5514;
    margin-left: 15px;
}
.section_nyukai{
  background-color: #dce6dc;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 30px;
}
}

/* その他の基本的なスタイル */
.img_nyukai img {
  max-width: 100%;
  height: auto;
  display: block; /* 画像下の余白をなくす */
  border-top-left-radius: 60px;
}
.nyukai_title {
  background-color: #5d3e2c;
  border-radius: 50px;
  color: #ffffff;
  display: inline-block; /* ← この行を追加 */
  padding: 0.2em 1.5em; /* ← 適度な余白を追加 */
}
.nyukai_box {
  border-bottom: dashed 1px #222222; /* 実線2px */
  margin-bottom: 35px;
}

.mu_35 {
  margin-bottom: 35px;
}

/*information用*/
.info_btn_wrap {
  display: flex; /* Flexboxコンテナに設定 */
  justify-content: center; /* 子要素を水平方向の中央に揃える */
  gap: 20px; /* ボタン間の隙間を20pxに設定 */
  margin-bottom: 30px;
}


/* スマホ用レイアウト（2つずつ2段） */
@media screen and (max-width: 1024px) {
  .info_btn_wrap {
  display: flex; /* Flexboxコンテナに設定 */
  justify-content: center; /* 子要素を水平方向の中央に揃える */
  gap: 10px; /* ボタン間の隙間を20pxに設定 */
  margin-bottom: 5px;
}
  .info_btn_wrap {
    flex-wrap: wrap; /* 画面幅が狭い場合は折り返す */
    justify-content: flex-start; /* 左寄せにする */
  }

  .btn_more4 {
    width: calc(50% - 10px); /* 2つ並べるために幅を50%に設定（gapの分を引く） */
  }
}

.section_info {
  background-color: #dce6dc;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 60px;
}
@media screen and (max-width: 1024px) {
  .section_info {
  background-color: #dce6dc;
  max-width: 100%; /* 親要素をはみ出さないように */
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
  padding: 10px;
}
.info_box {
  background-color: #ffffff;
  border: 3px solid #cccccc;
  border-radius: 30px;
  padding: 10px;
}
}
.container_information {
  max-width: 1160px;
  margin-left: auto; /* 左マージンを自動調整 */
  margin-right: auto; /* 右マージンを自動調整 */
}

.info_box {
  background-color: #ffffff;
  border: 3px solid #cccccc;
  border-radius: 30px;
  padding: 30px;
}

/*items 01*/

.items_01 {
  background-color: #e8e4df;
  padding-top: 60px;
  padding-bottom: 60px;
}
.items_02 {
  background-color: #ffffff;
  padding-top: 60px;
  padding-bottom: 60px;
}
.container_items {
  max-width: 1160px;
  margin: 0 auto;
}
.items_title_h3 {
  display: inline-block;
    position: relative;
    min-width: 480px;
    margin: 5px auto;
    background-color: #f9da79;
    color: #000;
    font-weight: bold;
    border-radius: 50px;
    font-size: 2.0rem;
    padding: 5px 5px 5px 25px;
}

/* ---- PC用レイアウト（横並び） ---- */
.items_wrap {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 20px;
}

.text_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.items_wrap img {
  max-width: 25%;
  height: auto;
}

/* ---- SP用レイアウト（縦並び） ---- */
@media screen and (max-width: 1024px) {
  .items_01 {
  background-color: #e8e4df;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 25px;
  padding-right: 25px;
}
.items_02 {
  background-color: #ffffff;
  padding-top: 60px;
  padding-bottom: 60px;
    padding-left: 25px;
  padding-right: 25px;
}
.items_title_h3 {
  display: inline-block;
    position: relative;
    min-width: 100%;
    margin: 5px auto;
    background-color: #f9da79;
    color: #000;
    font-weight: bold;
    border-radius: 50px;
    font-size: 2.0rem;
    padding: 5px 5px 5px 25px;
}
  .items_wrap {
    flex-direction: column; /* imgとtext_boxを縦並びにする */
    gap: 10px;
  }

  .text_box {
    /* text_box自体のレイアウトはそのまま縦並びを維持 */
    gap: 5px; /* 必要に応じて調整 */
  }

  .items_wrap img {
    max-width: 100%; /* 画像を画面幅いっぱいに表示 */
  }
}

/*item list用*/
.items_box_list {
  list-style: none;
  padding-left: 0;
}

.items_box_list li {
  /* Flexboxは不要になります */
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.items_box_list li::before {
  content: '■';
  position: absolute;
  left: 0;
  color: #333;
  font-size: 1rem;
  top: 0.5em; /* もしくは 0.25rem など、お好みの値に調整 */
}