/* デフォルト */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: 0.775rem;
  font-family: メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* box-sizing: border-box; は既に * で設定されているのでOK */
  overflow-x: hidden;
  /* 予期せぬ横スクロールを防ぐ（推奨）*/
}

#form-section-wrapper {
  /* padding: 5px 15px; */
  /* これはコメントアウトされているので影響なし */
  max-width: 720px;
  /* 幅を指定 */

  /* ↓↓↓ 中央揃えのために以下を追加 ↓↓↓ */
  margin-left: auto;
  /* 左の余白を自動計算 */
  margin-right: auto;
  /* 右の余白を自動計算 */
  /* ↑↑↑ 中央揃えのために追加 ↑↑↑ */
}

/* 例: スマホ用のメディアクエリ内も修正する場合 */
@media screen and (max-width: 768px) {
  /* section { ... } */
  /* ← もし section 全体に適用していたら変更 */

  #form-section-wrapper {
    width: 100%;
    /* または auto など、スマホ用の幅指定 */
    margin: 0;
    /* スマホでは中央揃えを解除する場合 */
    /* 他に必要なスマホ用スタイルがあれば記述 */
    padding: 0 20px;
  }

  /* 他の section (例えばメインビジュアルの section など) に
     スマホ用のスタイルが必要であれば、別途指定します */
  /* 例:
  .main_visual section {
     width: 100%;
     padding: 0;
  }
  */
}

a {
  text-decoration: none;
  color: #fff;
}

.mb50 {
  width: 720px;
  margin-bottom: 50px;
}

/* スマートフォン向けのスタイル (画面幅767px以下の場合) */
@media screen and (max-width: 767px) {
  .mb50 {
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
    /* または width: auto; としても同様の結果になることが多い */
    margin-bottom: 30px;
    /* 下マージンを少し詰める (お好みで調整) */

    /* --- もし左右に余白が必要な場合（親要素にpaddingがない場合など） --- */
    /* padding-left: 15px; */
    /* 例: 左右に15pxのパディング */
    /* padding-right: 15px; */
    /* box-sizing: border-box; */
    /* paddingを含めてwidth:100%にする場合 */
  }
}

.mt20 {
  margin-top: 20px;
}

.mr10 {
  margin-left: 30px;

}

/* フォント */
.nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .nowrap {
    font-size: 0.8rem;
    font-weight: bold;
  }
}

@media screen and (max-width: 768px) {
  .container p {
    font-size: 1.25rem;
    text-align: center;
  }
}

@media screen and (max-width: 1024px) {
  .container p {
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 1025px) {
  .container p {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  section {
    padding: 0;
  }
}

.pc_only,
.sp_only {
  display: none;
}

@media screen and (max-width: 1024px) {
  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }
}

@media screen and (min-width: 1025px) {
  .pc_only {
    display: block;
  }

  .sp_only {
    display: none;
  }
}

/*トップ*/
header {
  position: sticky;
  /* ここに注目! */
  top: 0;
  height: 100px;
  color: white;
  background-color: rgba(255, 255, 255, 0.5);
  padding-inline: 15px;
  align-content: center;
  z-index: 1;
}

h2 {
  font-size: 2.25rem;
  color: #f9f9f9;
  margin-top: 50vh;
}

/*メインビジュアル*/
/* PC時はそのまま */

.main_visual {
  margin: 0 auto;
  padding-top: 50px;
  text-align: center;
  background: #f7f7f7 url(images/mainvisual.png) center top/cover no-repeat;
}

.main_visual main {
  text-align: left;
  margin-top: 20vh;
  display: flex;
  justify-content: center;
  gap: 2%;
}

.main_visual img {
  width: 15%;
  margin: 1%;
}

/* タブレット用 */

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

  /* 横並びにする画像自体のスタイル調整 */
  /* より詳細なセレクタで既存のスタイルを上書き */
  .main_visual_img img.sp_only {
    /* 既存の .main_visual img から継承されるスタイル */
    width: 25%;
    /* 画像1つあたりの幅 (3つで計90%) */
    max-width: none;
    /* 念のためmax-widthをリセット (親の幅で制限) */
    height: auto;
    /* ★ 縦横比を維持 */
    /* 既存のmarginを上書きして調整 */
    margin: 0;
    /* 上下左右のマージンを0にリセット */
    /* または margin: 0 1%; など左右に少しマージン */
    display: block;
    /* display: block はそのままでも良いが、Flexアイテムになる */
  }

  .main_visual_img {
    margin-top: 50px;
    display: flex;
    /* ★ 子要素(img)を横並びにする */
    justify-content: space-around;
    /* ★ 画像間のスペースを均等に配置
                                      (space-between: 両端に寄せ間に均等スペース)
                                      (center: 中央寄せ) なども可 */
    align-items: center;
    /* ★ 画像を垂直方向に中央揃え (任意) */
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
    padding: 10px 0;
    /* 上下に少し余白を追加 (任意) */
  }
}

/* スマホ用 */

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

  /* h2を囲むdiv（main_visual内の最初のdiv要素）のスタイル */
  .main_visual>div:first-of-type {
    width: 100%;
    height: 450px;
    /* ← h2を表示させたい領域の高さ */
    position: relative;
    /* ← h2の絶対配置の基準にする */
    /* 背景画像 */
    background-size: contain;
    /* 画像全体が見えるように */
    background-position: center top;
    /* 背景画像の位置 */
    background-repeat: no-repeat;
    /* 背景画像の繰り返しなし */
    overflow: hidden;
    /* はみ出し防止 */
    margin: 0 auto;
    /* div自体の中央揃え */
  }
}

@media screen and (max-width: 768px) {
  .main_visual h2 {
    /* 既存のスタイル */
    font-size: 1.5rem;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: serif;

    /* ↓↓↓ 中央配置のためのスタイル ↓↓↓ */
    position: absolute;
    /* 絶対配置 */
    top: 70%;
    /* 親要素(div)の上から50% */
    left: 50%;
    /* 親要素(div)の左から50% */
    transform: translate(-50%, -50%);
    /* 要素自身の中心を合わせる */
    width: 90%;
    /* はみ出さないように幅を制限 */
    margin: 0;
    /* margin をリセット */
  }
}

@media screen and (max-width: 768px) {
  .main_visual {
    padding: 0;
    margin-left: -5px;
    margin-right: -5px;
  }

  .main_visual main {
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin-top: 0;
    width: 100%;
    height: auto;
  }


  .main_visual_img {
    margin-top: 50px;
    display: flex;
    /* ★ 子要素(img)を横並びにする */
    justify-content: space-around;
    /* ★ 画像間のスペースを均等に配置
                                      (space-between: 両端に寄せ間に均等スペース)
                                      (center: 中央寄せ) なども可 */
    align-items: center;
    /* ★ 画像を垂直方向に中央揃え (任意) */
    width: 100%;
    /* 親要素の幅いっぱいに広げる */
    padding: 10px 0;
    /* 上下に少し余白を追加 (任意) */
  }

  /* 横並びにする画像自体のスタイル調整 */
  /* より詳細なセレクタで既存のスタイルを上書き */
  .main_visual_img img.sp_only {
    /* 既存の .main_visual img から継承されるスタイル */
    width: 30%;
    /* 画像1つあたりの幅 (3つで計90%) */
    max-width: none;
    /* 念のためmax-widthをリセット (親の幅で制限) */
    height: auto;
    /* ★ 縦横比を維持 */

    /* 既存のmarginを上書きして調整 */
    margin: 0;
    /* 上下左右のマージンを0にリセット */
    /* または margin: 0 1%; など左右に少しマージン */
    display: block;
    /* display: block はそのままでも良いが、Flexアイテムになる */
  }

  .main_visual h2 {
    margin-top: 0px;
  }
}

/* 中央寄せしたいコンテンツブロック */
.main {
  width: 100%;
  padding: 0 20px;
  /*
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  */
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/*** ヘッダー ***/
/*--- 追加部分① ---*/
@media screen and (max-width: 1024px) and (min-width:769px) {
  header {
    position: static;
  }
}

/*--- ①終了 ---*/

@media screen and (max-width: 768px) {
  header {
    position: static;
    height: 80px;
    background-color: rgba(255, 255, 255, 1);
  }
}


h1 {
  padding-top: 10px;
}

.fb1 {
  display: flex;
  justify-content: space-between;
  color: #222;
}

/* PC表示用のスタイル (1025px以上) */
@media screen and (min-width: 1025px) {
  #page_top {
    display: flex;
    /* 子要素を横並びにする */
    align-items: center;
    /* 子要素を垂直方向中央に揃える (任意) */
    justify-content: space-between;
    /* 子要素間のスペースを調整 (任意) */

  }
}

/*--- 追加部分② ---*/
/*** タブレット版 Topヘッダー***/
@media screen and (max-width: 1024px) and (min-width:769px) {
  .fb1 {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
  }

  #page_top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }


  /* ロゴアイコンのコンテナ */
  .book-icon {
    height: auto;
    /* 高さは中の画像に合わせる (100%が意図通りでなければauto推奨) */
    display: inline-block;
    /* または block。レイアウトに合わせて調整 */
    /* blockだと幅一杯に広がろうとする可能性あり */
    /* inline-blockだと中身に合わせた幅になりやすい */
    /* vertical-align: middle; */
    /* 他の要素と並べる場合に垂直位置を調整 */
    /* 必要であればアイコン周りの余白などを指定 */
    /* margin-right: 10px; */
  }

  /* デフォルトのスタイル（PC向け） */
  .book-icon img {
    height: 3.50rem;
    /* PCでのアイコンの高さ */
    width: auto;
    /* 幅は高さに合わせて自動調整 */
    display: block;
    /* 画像の下の隙間対策 */
  }

  h1 {
    color: black;
    text-align: center;
    white-space: normal;
    padding-top: 0;
    /* ----- ↓↓↓ ここから変更・追加 ↓↓↓ ----- */

    white-space: nowrap;
    /* ★ テキストを折り返さない */
    overflow: hidden;
    /* ★ はみ出した部分を隠す */
    text-overflow: ellipsis;
    /* ★ はみ出した部分を「...」で表示 (任意) */

    /* ★ フォントサイズを画面幅に応じて可変にする (clamp を使用) */
    /* clamp(最小フォントサイズ, 推奨フォントサイズ(vw単位), 最大フォントサイズ) */
    /* 値は実際の表示を見ながら調整してください */
    font-size: clamp(1.8rem, 3vw, 3rem);

  }
}

/*--- ②　終了 ---*/

/*--- スマホ版　Topヘッダー ---*/
@media screen and (max-width: 768px) {
  .fb1 {
    display: block;
    /* margin: auto; */
    width: 100%;
    height: 100%;
  }

  #page_top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }


  /* ロゴアイコンのコンテナ */
  .book-icon {
    /* max-width: 20%; */
    /* ← この行を削除またはコメントアウト */
    height: auto;
    /* 高さは中の画像に合わせる (100%が意図通りでなければauto推奨) */
    display: inline-block;
    /* または block。レイアウトに合わせて調整 */
    /* blockだと幅一杯に広がろうとする可能性あり */
    /* inline-blockだと中身に合わせた幅になりやすい */
    /* vertical-align: middle; */
    /* 他の要素と並べる場合に垂直位置を調整 */
    /* 必要であればアイコン周りの余白などを指定 */
    /* margin-right: 10px; */
  }

  /* ↓↓↓ 画像自体のサイズ指定 (これは変更なし) ↓↓↓ */

  /* デフォルトのスタイル（PC向け） */
  .book-icon img {
    height: 1.00rem;
    /* PCでのアイコンの高さ */
    width: auto;
    /* 幅は高さに合わせて自動調整 */
    display: block;
    /* 画像の下の隙間対策 */
  }

  /* @media screen and (max-width: 1024px) and (min-width:769px) {
    .book-icon {
      width: 30%;
    }
  } */


  /* スマートフォン向けのスタイル (画面幅767px以下の場合) */
  @media screen and (max-width: 767px) {
    .book-icon img {
      height: 2.05rem;
      /* スマホでのアイコンの高さ */
    }
  }

  h1 {
    color: black;
    text-align: center;
    white-space: normal;
    padding-top: 0;
    /* ----- ↓↓↓ ここから変更・追加 ↓↓↓ ----- */

    white-space: nowrap;
    /* ★ テキストを折り返さない */
    overflow: hidden;
    /* ★ はみ出した部分を隠す */
    text-overflow: ellipsis;
    /* ★ はみ出した部分を「...」で表示 (任意) */

    /* ★ フォントサイズを画面幅に応じて可変にする (clamp を使用) */
    /* clamp(最小フォントサイズ, 推奨フォントサイズ(vw単位), 最大フォントサイズ) */
    /* 値は実際の表示を見ながら調整してください */
    font-size: clamp(0.9rem, 2.8vw, 1rem);

  }
}


.contact_ {
  background-image: url(images/contact_.png);
  width: 254px;
  height: 38px;
  text-align: center;
  font-size: 20px;
  text-indent: 30px;
  line-height: 200%;
}



.fb2 {
  display: flex;
  justify-content: space-around;
  padding-left: 10px;
  padding-right: 10px;
}

.fb2 img {
  margin-right: 10px;
}

@media screen and (max-width: 1024px) {
  .fb2 {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    display: none;
  }
}

.fb3 {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 30px;
}

header p{
  font-size:0.95rem;
  text-align: center;
  margin-bottom: 5px;
}

/* =============================================
   新しい独立したお問い合わせボタン (.contact-button)
   ============================================= */
.contact-button {
  /* --- 装飾スタイル (.btn から必要なものをコピー・適用) --- */
  background: linear-gradient(135deg, #89cff0, #c9e9fd);
  /* 背景グラデーション */
  border: none;
  /* 枠線なし */
  border-radius: 30px;
  /* 角丸 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  /* 影 */
  color: #005f8b;
  /* 文字色 */
  font-weight: 600;
  /* 文字の太さ */
  text-decoration: none;
  /* テキストの下線なし */
  cursor: pointer;
  /* マウスカーソルを指マークに */
  transition:
    /* ホバー効果のためのトランジション */
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
  text-align: center;
  /* (Flexboxを使うため影響は小さいが念のため) */

  /* --- サイズとレイアウト --- */
  width: 254px;
  /* 指定の幅 */
  height: 38px;
  /* 指定の高さ */
  padding: 0;
  /* 固定サイズのためパディングは不要 */
  display: inline-flex;
  /* Flexboxコンテナ (インライン) */
  align-items: center;
  /* 中身を垂直中央揃え */
  justify-content: center;
  /* 中身を水平中央揃え */
  box-sizing: border-box;
  /* width/height計算方法 */

  /* --- フォントサイズとマージン (適宜調整) --- */
  font-size: 1.2rem;
  /* ボタンサイズに合わせたフォントサイズ (例) */
  margin: 5px auto;
  /* 他の要素とのマージン (例) */
}

/* --- ホバー時のスタイル --- */
.contact-button:hover {
  background: linear-gradient(135deg, #6fb5dd, #aaccdd);
  /* 背景色変更 */
  color: #ffffff;
  /* 文字色変更 */
  transform: translateY(-3px) scale(1.02);
  /* 少し上に移動して拡大 */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  /* 影を少し濃く */
}

/* =============================================
     ボタン内のアイコン (.contact-button-icon) のスタイル
     ============================================= */
.contact-button-icon {
  height: 18px;
  /* アイコンの高さ (適宜調整) */
  width: auto;
  /* 幅は自動 */
  margin-right: 8px;
  /* アイコンと文字の間隔 */
}

/* =============================================
     ボタン内のテキスト (.contact-button-text) のスタイル (必要な場合)
     ============================================= */
/* line-height: 1; */
/* 必要に応じて行の高さを調整 */


@media screen and (max-width: 1024px) and (min-width: 769px) {
  .fb3 {
    justify-content: space-between;
    margin: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .fb3 {
    justify-content: flex-start;
  }
}

.tel_ {
  font-size: 30px;
}

/*** メイン画面 ***/

@media screen and (max-width: 1024px) and (min-width: 769px) {
  .main_visual {
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    background: #f7f7f7 url(images/mainvisual1080.png) center top/cover no-repeat;
  }

  .main_visual img {
    width: 200px;
  }

  .main_visual main {
    padding-left: 1vh;
  }
}

.container {
  margin-top: 50px;
  margin-bottom: 50px;
}

/*** サービスについて ***/

h3 {
  position: relative;
  margin-bottom: 0.2rem;
  padding: 0.5rem 0rem;
  color: #353535;
  text-align: center;
  border-bottom: 3px dotted #a0d5f7;
  margin: auto;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 50px;
}

/* .list {
  margin-top: 40px;
  margin-bottom: 40px;
} */
.btn {
  display: inline-block;
  margin: 30px auto;
  padding: 15px 30px;
  background: linear-gradient(135deg, #89cff0, #c9e9fd);
  border: none;

  border-radius: 30px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  color: #005f8b;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.btn:hover {
  background: linear-gradient(135deg, #6fb5dd, #aaccdd);
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

footer {
  background-color: #ddd;
  margin-top: 50px;
  padding: 20px;
  font-size: 0.95rem;
}

.copyright p {
  text-align: center;
}

/* こんなことにおすすめ */

.recommend-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 体験会ってどんなことするの？ */
/* デフォルト（PC用） */
.exp_flow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.3s ease;
  /* アニメーション（任意） */
}

/* スマホ用：矢印を右に90度回転 */
@media screen and (max-width: 768px) {
  .exp_flow p {
    transform: rotate(90deg);
  }
}

.experience_area {
  margin-top: 80px;
  margin-bottom: 60px;
}

.exp_base {
  max-width: 1024px;
  margin: 0 auto;
  background-color: #f7f7f7;
  background-size: 800px 850px;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 30px;
}

/* ベーススタイル（PC） */
.exp_flex {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 24px;
  /* カラム間に余白追加（任意） */
}

.exp_group {
  flex: 1 1 20%;
  /* 約3カラム */
  box-sizing: border-box;
  padding: 0 10px;
}

.exp_group img {
  height: 150px;
  /* 統一したい高さに調整 */
  object-fit: contain;
  /* 縦横比を保って全体を表示 */
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* モバイル用（画面幅768px以下） */
@media screen and (max-width: 768px) {

  .exp_base {
    margin-left: 15px;
    margin-right: 15px;
  }

  .exp_flex {
    flex-direction: column;
    padding: 20px;
  }

  .exp_group {
    flex: 1 1 100%;
    /* 1カラム */
    padding: 10px 0;
  }

  .exp_thin,
  .exp_bold,
  .exp_color {
    font-size: 1.25rem;
    /* モバイルでは少し読みやすく */
    text-align: left;
  }

  .exp_thin {
    width: 100%;
    text-align: left;
  }

  .exp_base {
    border-radius: 20px;
  }
}

.exp_color {
  font-size: 1.05rem;
  /* 色付き見出しなので少し大きく */
  font-weight: 600;
  color: #0077cc;
  /* 見やすい青系カラー */
  margin-bottom: 0.3em;
}

.exp_bold {
  font-size: 1.15rem;
  /* 太字見出しとしてしっかり目立つサイズに */
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

.exp_thin {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  /* 行間を広めにとって読みやすく */
  color: #333;
}

/* モバイルでは左揃え */
.exp_thin p {
  text-align: left;
}

@media screen and (max-width: 768px) {
  .exp_thin p {
    text-align: left !important;
  }
}

.exp_group img {
  display: block;
  margin: 1rem auto;
  /* 上下に1remの余白、中央寄せ */
}


/* モバイル対応 */
@media screen and (max-width: 768px) {
  .exp_color {
    font-size: 1rem;
  }

  .exp_bold {
    font-size: 1.2rem;
  }

  .exp_thin {
    font-size: 1rem;
    line-height: 1.8;
    text-align: left;
  }
}

/* 誰でも気軽にご参加できます */
/* 共通：チェック画像サイズ調整 */
.advice_img2 {
  width: 40px;
  /* 画像の横幅 */
  height: 40px;
  /* 縦幅も揃える */
  margin-right: 10px;
  /* テキストとの間に余白 */
  flex-shrink: 0;
}

/* 共通の調整 */
.addfree_group {
  max-width: 720px;
  /* 他セクションに揃える */
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.advice_flow {
  display: flex;
  align-items: flex-start;
  /* 左上揃えで安定 */
  gap: 10px;
  /* 画像とテキストの余白 */
  margin-bottom: 20px;
}

/* スマートフォン表示のスタイル (画面幅767px以下の場合) */
@media screen and (max-width: 767px) {
  .advice_img1 {
    display: none;
    /* このクラスを持つ要素を非表示にする */
  }
}

.advice_flow p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6;
  flex: 1;
  text-align: left;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .addfree_group {
    max-width: 100%;
    padding: 0 20px;
  }

  .advice_img2 {
    width: 40px;
    height: 40px;
    margin-top: 4px;
  }

  .advice_flow p {
    font-size: 1.2rem;
  }
}

.advice_flow p {
  margin: 0;
  font-size: 1.2rem;
  /* 他セクションに合わせて統一 */
  line-height: 1.6;
  flex: 1;
  text-align: left;
}

/* スマホ時の微調整（任意） */
@media screen and (max-width: 768px) {
  .advice_flow p {
    text-align: left !important;
    font-size: 1.2rem;
  }
}

/* ～体験者様の声～ */
/* PC・共通 */
figure {
  text-align: center;
}

figcaption {
  color: black;
  font: 1.125rem arial;
}

.voice_flex {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
}

.voice_group {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.voice_group img {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.voice_cloud {
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 25px 20px;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
  text-align: left;
  /* 左揃え */
}

/* 通常時の文字サイズ */
.voice_cloud p {
  font-size: 1.25rem;
  /* ベース 16px 相当 */
  line-height: 1.6;
  /* 読みやすさのため行間も調整 */
  margin: 0 0 0.75em;
  /* 文と文の間に余白 */
  line-height: 1.6;
  /* 行間はお好みで */
}

.voice_cloud::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 20px;
  border: 10px solid transparent;
  border-right-color: #f2f2f2;
}

/* スマホ */
@media screen and (max-width: 768px) {

  .voice_flex {
    padding-left: 0;
    padding-right: 0;
  }

  .voice_group {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .voice_group img {
    width: 100px;
  }

  .voice_cloud {
    margin-top: 10px;
    width: 90%;
    text-align: left;
    padding-top: 25px;
  }

  .voice_cloud p {
    font-size: 1.25rem;
    /* ベースの90% */
    text-align: left !important;
  }

  .voice_cloud::before {
    left: 50%;
    top: -10px;
    transform: translateX(-50%) rotate(90deg);
    /* 中央に配置して上向き三角に */
    border: 10px solid transparent;
    border-bottom-color: #f2f2f2;
    border-right-color: transparent;
  }
}

/* イラスト＋キャプションを縦並びに */
.voice_avatar {
  display: flex;
  flex-direction: column;
  /* ← 縦方向に積む */
  align-items: center;
  gap: 8px;
  /* 画像と文字の余白 */
  flex-shrink: 0;
  width: 120px;
  /* img と揃える */
  box-sizing: border-box;
}

/* キャプション（年齢・性別） */
.voice_caption {
  font-size: 0.875rem;
  /* お好みで調整 */
  font-weight: bold;
  /* ← ここで太字 */
  color: #333;
  /* 必要なら色も変えてOK */
  line-height: 1.4;
  text-align: center;
  /* 真ん中寄せ */
  margin: 0;
  /* pタグなら余白リセット */
}

/* 画像の下に余白をしっかり取りたい場合 */
.voice_avatar img {
  margin-bottom: 4px;
}


/* スマホは従来通りOK なのでそのまま */
@media screen and (max-width:768px) {
  .voice_avatar {
    width: 100px;
  }

  .voice_caption {
    font-size: 1.2rem;
  }
}

/*** ご参加の流れ ***/
.addmenber_area {
  margin-top: 60px;
  margin-bottom: 60px;
}

.addmen_flex {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.addmen_group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.addmen_group img {
  width: 7%;
}

.addmen_text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: 8px;
}

.addmen_msg {
  font-size: 0.7rem;
  line-height: 2;

  margin: 10px 0 20px 50px;
}

.addmen_p {
  border-bottom: 1px solid #777777;
}

.addmen_msg p {
  text-align: left;
}

/*** お問い合わせフォーム ***/

/** Qa **/
.Qa-Box {
  width: 720px;
  margin: 0 auto;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  /*
  align-items: baseline;
  */
  align-items: center;
  margin: 30px 0;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
  text-align: left;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
  text-align: left;
}

.Qa-Box .Qa dd::before {
  content: "A";
  font-size:1.2rem;
  background: #da679d;
  color: #fff;
  width: 40px;
  height: 35px;
}

/*** ■■■網掛け追加 ***/
.Qa dt {
  background-color: #f7f7f7;
  padding: 20px;
}

.Qa dd {
  padding: 10px 20px;
}

/*** 網掛け追加 ***/

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  font-size:1.2rem;
  justify-content: center;
  align-items: center;
  background: #65b4e6;
  color: #fff;
  width: 40px;
  height: 35px;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #da679d;
  color: #fff;
  width: 40px;
  height: 35px;
}

/* ===============================================
   スマートフォン向け最適化 (画面幅767px以下)  ←★ここから★
   =============================================== */
@media screen and (max-width: 767px) {
  .Qa-Box {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
  }

  /* ... (先ほど提示したスマホ向けスタイルの残り) ... */

  .Qa-Box .Qa dt p,
  .Qa-Box .Qa dd p {
    padding-left: 10px;
    text-align: left !important;
  }
}

/* ===============================================
     スマートフォン向け最適化ここまで  ←★ここまでを追記★
     =============================================== */

/* お問い合わせフォーム */
/* 無料体験会 お申し込みフォーム幅指定 */
.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

@media screen and (max-width: 768px) {
  .Form {
    margin-top: 40px;
  }
}

.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}

.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}

.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}

.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}

@media screen and (max-width: 768px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}

.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #da679d;
  color: #fff;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}

.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
    max-width: 750px;
  }
}

.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
    max-width: 750px;
  }
}

.primary-btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #005f8b;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.Form .primary-btn:hover {
  background: #018fd1;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .Form button {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}

/*** 確認画面 ***/
.modal-warp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  overflow: scroll;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  flex-direction: column;
  display: none;
}

.modal-wrap.show {
  display: grid;
  grid-template-columns: 1em 1fr auto 1fr 1em;
  grid-template-rows: 1em 1fr auto 1fr 1em;
}

.modal-body {
  grid-column: 2 / 5;
  grid-row: 3;
  justify-self: center;
  width: 100%;
  max-width: 720px;
  height: 100%;
  /* max-height:600px; */
  background-color: #fff;
  padding: 2em 1em 4em;
}

.modal-ttl {
  font-size: 3em;
  text-align: center;
  padding: 0;
}


.modal-desc {
  text-align: center;
  font-size: 0.875em;
  margin-top: 2em;
}

.modal-body .Form-item{
  margin:20px 0;
}

#email-confirm {
  word-break: break-all;
}

#learning-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

#content-confirm {
  white-space: pre-wrap;
}

.modal-body .btn-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
  margin: 2em;
}

.modal-body .btn-wrap button {
  flex: 1 0;
  word-break: keep-all;
}

.form-ttl {
  padding-left: 10px;
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
  width: fit-content;
  margin-bottom: 0.5em;
  color:gray;
}

#company-confirm {
  padding-left: 20px;
  font-size: 1.2rem;
}

#name-confirm {
  padding-left: 20px;
  font-size: 1.2rem;
}

#tel-confirm {
  padding-left: 20px;
  font-size: 1.2rem;
}

#mail-confirm {
  padding-left: 20px;
  font-size: 1.2rem;
}

#comment-confirm {
  padding-left: 20px;
  font-size: 1.2rem;
}

button {
  padding: 1em 2em;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: .5em;
  transition:
    color .3s ease,
    background-color .3s ease,
    outline-color .3s ease;
}

.send {
  background-color: #005f8b;
  box-shadow: 1px 1px 3px #446;
  color: white;
}

.send:focus,
.send:hover {
  color: #005f8b;
  background-color: white;
  outline: 2px solid #005f8b;
}

.secondary-btn {
  background-color: #ccd;
  box-shadow: 1px 1px 3px #ccd;
  color: #333;
}

.secondary-btn:focus,
.secondary-btn:hover {
  color: #005f8b;
  background-color: white;
  outline: 2px solid #005f8b;
}




/* こんな方におすすめ */
.advice_area {
  margin-top: 80px;
  margin-bottom: 30px;
}

.advice_flex {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

.advice_text {
  line-height: 1.6;
}

.advice_flow {
  display: flex;
  align-items: center;
}

.advice_img1 {
  width: 12%;
  max-width: 120px;
  padding-right: 20px;
}

/* こんな方におすすめ ここまで */

/***ステップバーデザイン4***/
.step-wrap4 {
  counter-reset: count;
  margin: 2em auto;
  position: relative;
  max-width: 720px;
  padding-left: 25px;
  padding-right: 25px;
}

.step-content4 {
  padding: 0.3em 0 1em 2em;
  margin: 0;
  position: relative;
}

.step-content4::before {
  content: "";
  display: block;
  width: 55px;
  height: 55px;
  background: #65b4e6;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -1px;
}

.step-content4::after {
  content: "";
  display: block;
  height: calc(100% - 55px);
  border-left: solid 2px #ddd;
  position: absolute;
  top: 55px;
  left: 25px;
}

.step-label4 {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  top: 6px;
  left: 9px;
}

.step-label4::after {
  counter-increment: count;
  content: counter(count);
  position: absolute;
  font-size: 30px;
  top: 8px;
  left: 7px;
}

.step-title4 {
  font-weight: bold;
  font-size: 120%;
  margin-left: 1.5em;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .step-title4 p {
    text-align: left;
  }
}

.step-body4 {
  margin-top: 1em;
  padding: 0 0 1em;
  border-bottom: dotted 2px #ddd;
  text-align: left;
  margin-left: 50px;
}

@media screen and (max-width: 768px) {
  .step-body4 p {
    text-align: left;
  }
}

.step-wrap4> :last-of-type::after {
  display: none;
}

/***ステップバーデザイン4ここまで***/


/*** モバイル版 フッターナビ ***/
.mobile_navi {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120px;
  padding-inline: 15px;
  align-content: center;
  z-index: 1;
  display: none;
}

.navi_b {
  display: flex;
  justify-content: space-around;
  padding-left: 10px;
  padding-right: 10px;
}

.navi_b img {
  margin-top: 20px;
}

.navi1 {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}

.navi2 {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  margin-bottom: 5px;
}

.contact_m {
  background-image: url(images/contact_.png);
  width: 254px;
  height: 38px;
  text-align: center;
  font-size: 20px;
  text-indent: 30px;
  line-height: 200%;
}

/*--- 追加③ ---*/
@media screen and (max-width:1024px) and (min-width:769px) {
  .mobile_navi {
    display: flex;
    position: fixed;
    bottom: 0px;
    margin: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
    color: white;
    padding: 0;
  }

  .navi_b {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #23b7f4;
  }

  .navi_b img {
    margin-top: 0;
    /* height: 20px;
    width: 20px; */
  }

  .navi_b a {
    font-size: 10px;
  }

  .navi1 {
    margin: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
  }

  .navi1 div.tel_wrapper {
    /* height: 20px;
    width: 20px; */
    margin-bottom: 10px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navi1 img {
    /* width: 20px;
    height: 20px; */
    margin: auto;
  }

  .navi1 p,
  .navi1 a {
    margin: 0;
    padding: 0;
    color: white;
  }

  .navi2 {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    background-color: #434343;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .tel_wrapper {
    /* height: 40px;
    width: 40px; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tel_wrapper img {

    width: 20px;
    height: 100%;
    margin: auto;
    top: 5px;
    position: relative;
  }

  .contact_m {
    height: 60px;
    background: unset;
    font-size: 12px;
    line-height: 60px;
    width: auto;
    text-indent: unset;
  }

  .navi3 {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    padding: 0 5px;
    text-align: center;
    background-color: #949494;
  }

  .navi3 img {
    width: auto;
    height: auto;
    margin: auto;
  }

  footer {
    margin-bottom: 60px;
  }
}

/*--- ③　終了 ---*/

@media screen and (max-width:768px) {
  .mobile_navi {
    display: flex;
    position: fixed;
    bottom: 0px;
    margin: 0;
    width: 100%;
    height: 40px;
    z-index: 1;
    color: white;
    padding: 0;
  }

  .navi_b {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #23b7f4;
  }

  .navi_b img {
    margin-top: 0;
    /* height: 20px;
    width: 20px; */
  }

  .navi_b a {
    font-size: 10px;
  }

  .navi1 {
    margin: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-color: #23b7f4;
  }

  .navi1 div.tel_wrapper {
    /* height: 20px;
    width: 20px; */
    margin-bottom: 10px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navi1 img {
    /* width: 20px;
    height: 20px; */
    margin: auto;
  }

  .navi1 p,
  .navi1 a {
    margin: 0;
    padding: 0;
    color: white;
  }

  .navi2 {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    background-color: #434343;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .tel_wrapper {
    /* height: 40px;
    width: 40px; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tel_wrapper img {
    width: 20px;
    margin: auto;
    top: 5px;
    position: relative;
    margin-right: 5px;
  }

  .contact_m {
    height: 40px;
    background: unset;
    font-size: 12px;
    line-height: 40px;
    width: auto;
    text-indent: unset;
  }

  .navi3 {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    padding: 0 5px;
    text-align: center;
    background-color: #949494;
  }

  .navi3 img {
    width: auto;
    height: auto;
    margin: auto;
  }

  footer {
    margin-bottom: 40px;
  }
}

  footer p a {
    text-decoration: none;
    color: black;
  } 

@media screen and (max-width: 768px) {
  .footer_text {
    text-align: left;
  }
}

@media screen and (max-width: 1024px) {
  .footer_text {
    text-align: left;
  }
}

@media screen and (min-width: 1025px) {
  .footer_text {
    text-align: right;
  }
}


/*--- 送信完了メッセージ ---*/
#resultMessage_true,
#resultMessage_false {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}