.link-none{
	text-decoration: none;
}

.mail-form-bg{
  border: 1px solid #ccc;
  padding: 60px 60px 60px 60px;
  border-radius: 15px;
}
.mail-title01{
  font-size: 2.4rem;
  color: #31967f;
  font-weight: 600;
  padding-bottom: 30px;
}
.mail-title02{
  font-size: 2.4rem;
  color: #31967f;
  font-weight: 600;
  padding-top: 60px;
  padding-bottom: 0px;
}
.tel-text02{
  font-size: 1.6rem;
  padding-bottom: 10px;
}
.notice-box{
  max-width: 780px;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
  padding-top: 50px;
}
.notice-title{
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
}
.notice-subtitle{
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid #31967f;
  margin-bottom: 20px;
  padding-top: 20px;
}
@media (max-width: 780px) {
  .mail-form-bg{
    border: none;
    padding: 0px 0px 30px 0px;
    border-radius: 15px;
  }
  .mail-title01,.mail-title02{
    font-size: 2rem;
    padding-bottom: 0px;
  }
  .mail-title02{
    padding-top: 0px;
  }
  .notice-title{
    font-size: 1.8rem;
  }
}


:root {
  /* 入力フィールドのボーダーラディウス */
  --wpforms-field-border-radius: 3px;

  /* 入力フィールドのボーダースタイル */
  --wpforms-field-border-style: solid;

  /* 入力フィールドのボーダーサイズ */
  --wpforms-field-border-size: 1px;

  /* 入力フィールドの背景色 */
  --wpforms-field-background-color: #ffffff;

  /* 入力フィールドのボーダーカラー */
  --wpforms-field-border-color: rgba(0, 0, 0, 0.25);

  /* 入力フィールドの予備ボーダーカラー */
  --wpforms-field-border-color-spare: rgba(0, 0, 0, 0.25);

  /* 入力フィールドのテキストカラー */
  --wpforms-field-text-color: rgba(0, 0, 0, 0.7);

  /* ドロップダウンメニューの背景色 */
  --wpforms-field-menu-color: #ffffff;

  /* ラベルのテキストカラー */
  --wpforms-label-color: rgba(0, 0, 0, 0.85);

  /* サブラベルのテキストカラー */
  --wpforms-label-sublabel-color: rgba(0, 0, 0, 0.55);

  /* エラーメッセージのテキストカラー */
  --wpforms-label-error-color: #d63637;

  /* ボタンのボーダーラディウス */
  --wpforms-button-border-radius: 3px;

  /* ボタンのボーダースタイル */
  --wpforms-button-border-style: none;

  /* ボタンのボーダーサイズ */
  --wpforms-button-border-size: 1px;

  /* ボタンの背景色 */
  --wpforms-button-background-color: #31967f !important;

  /* ボタンのボーダーカラー */
  --wpforms-button-border-color: #31967f !important;

  /* ボタンのテキストカラー */
  --wpforms-button-text-color: #ffffff;

  /* ページ分割の色 */
  --wpforms-page-break-color: #066aab;

  /* バックグラウンドイメージ（使用されていない場合はnone） */
  --wpforms-background-image: none;

  /* バックグラウンドの位置 */
  --wpforms-background-position: center center;

  /* バックグラウンドの繰り返し設定 */
  --wpforms-background-repeat: no-repeat;

  /* バックグラウンドのサイズ設定 */
  --wpforms-background-size: cover;

  /* バックグラウンドの幅 */
  --wpforms-background-width: 100px;

  /* バックグラウンドの高さ */
  --wpforms-background-height: 100px;

  /* バックグラウンドカラー */
  --wpforms-background-color: rgba(0, 0, 0, 0);

  /* バックグラウンドURL */
  --wpforms-background-url: none;

  /* コンテナのパディング */
  --wpforms-container-padding: 0px;

  /* コンテナのボーダースタイル */
  --wpforms-container-border-style: none;

  /* コンテナのボーダー幅 */
  --wpforms-container-border-width: 1px;

  /* コンテナのボーダーカラー */
  --wpforms-container-border-color: #000000;

  /* コンテナのボーダーラディウス */
  --wpforms-container-border-radius: 3px;

  /* 入力フィールドの高さ */
  --wpforms-field-size-input-height: 36px !important;

  /* 入力フィールド間のスペーシング */
  --wpforms-field-size-input-spacing: 15px;

  /* 入力フィールドのフォントサイズ */
  --wpforms-field-size-font-size: 14px !important;

  /* 入力フィールドの行間 */
  --wpforms-field-size-line-height: 16px !important;

  /* 入力フィールドの水平方向のパディング */
  --wpforms-field-size-padding-h: 14px !important;

  /* チェックボックスのサイズ */
  --wpforms-field-size-checkbox-size: 16px;

  /* サブラベルの間隔 */
  --wpforms-field-size-sublabel-spacing: 5px;

  /* アイコンサイズ */
  --wpforms-field-size-icon-size: 1;

  /* ラベルのフォントサイズ */
  --wpforms-label-size-font-size: 14px !important;

  /* ラベルの行間 */
  --wpforms-label-size-line-height: 0px !important;

  /* サブラベルのフォントサイズ */
  --wpforms-label-size-sublabel-font-size: 13px !important;

  /* サブラベルの行間 */
  --wpforms-label-size-sublabel-line-height: 17px;

  /* ボタンのフォントサイズ */
  --wpforms-button-size-font-size: 16px !important;

  /* ボタンの高さ */
  --wpforms-button-size-height: 41px;

  /* ボタンの水平方向のパディング */
  --wpforms-button-size-padding-h: 15px;

  /* ボタン上部のマージン */
  --wpforms-button-size-margin-top: 30px !important;

  /* コンテナのシャドウ（使用されていない場合はnone） */
  --wpforms-container-shadow-size-box-shadow: none;
}

/* 入力フィールドのフォーカス時のボーダーカラーを変更 */
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
    border-color: #31967f !important; /* 緑色に変更 */
    background-color: #ebfffa;
    outline: none; /* ブラウザデフォルトのアウトラインを削除（必要に応じて） */
}
.wpforms-recaptcha-container {
  display: flex;
  justify-content: center !important; /* 中央揃え */
  align-items: center !important; /* 垂直方向も中央揃えにする場合 */
}
.wpforms-submit-container {
  display: flex;
  justify-content: center !important; /* 水平方向に中央揃え */
  align-items: center !important; /* 垂直方向も中央揃えにする場合 */
}
.wpforms-submit {
  font-weight: bold !important; /* テキストを太字に */
}





.page-id-23 .c-container-s.u-space-xl {
  display: none;
}
.free-title{
  color: #31967f;
  font-weight: 600;
  font-size: 3.2rem;
  margin-top: -10px;
}
.free-title-mini{
  background: #31967f;
  color: #fff;
  text-align: center;
  font-weight: 600;
  border-radius: 30px;
  padding: 5px 15px;
}
.cost-title{
  background: #31967f;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 10px 10px;
}
.cost-text{
  text-align: left;
  padding: 10px 30px 30px 30px;
}
.fees {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;

}

.fee-box {
  border: 1px solid #31967f;
  color: white;
  flex-basis: calc(50% - 10px);
  padding: 0px;
  text-align: center;
}

.fee-box h2 {
  color: white;
}

@media (max-width: 780px) {
  .fees {
      flex-direction: column;
  }
  .fee-box {
    margin-top: 15px;
  }
}


.cost-title{
  background: #31967f;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 10px 10px;
}
.cost-text{
  text-align: left;
  padding: 10px 30px 30px 30px;
}
.fees2 {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;

}

.fee-box2 {
  border: 1px solid #31967f;
  color: white;
  flex-basis: calc(50% - 20px);
  padding: 0px;
  text-align: center;
  margin: 10px;
}

.fee-box2 h2 {
  color: white;
}

@media (max-width: 780px) {
  .fees2 {
      flex-direction: column;
  }
  .fee-box2 {
    margin:15px 0px 0px 0px;
  }
}


.info{
  max-width: 100%;
  font-size: 1.5rem;
  line-height: 1.8;

}
table.company-info {
  width: 100%;
  border-collapse: collapse;
}

.company-info th, .company-info td {
  padding: 30px 0px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.company-info th {
  border-bottom: 1px solid #31967f; /* 緑色の下線を追加 */
  width: 25%;
}

table.recruit-info {
  width: 100%;
  border-collapse: collapse;
}

.recruit-info th, .recruit-info td {
  padding: 30px 0px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.recruit-info th {
  border-bottom: 1px solid #31967f; /* 緑色の下線を追加 */
  width: 25%;
}

@media screen and (max-width:780px) {
  .info{
    max-width: 100%;
    font-size: 1.4rem;
    line-height: 1.8;
  
  } 
  table.recruit-info {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
  }
}



.job-section {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.job h2, .job h3, .job h4 {
  color: #333;
}

.job ul {
  list-style: none;
  padding: 0;
}

.job li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px; /* テキストを「・」の右にオフセット */
}

.job li::before {
  content: '・'; /* 「・」をここに設定 */
  position: absolute;
  left: 0; /* リスト項目の先頭に「・」を配置 */
}

@media screen and (max-width: 600px) {
  .job li {
      padding-left: 15px;
      font-size: 14px;
  }
}
.syokusyu{
  font-weight: 600;
}


/* 全体のフォームコンテナ */
.form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 5px;
}

/* 行の設定 */
.form-row, .form-row2, .form-row3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.form-row {
  border-bottom: 1px solid #b8aeae;
}

.form-row2 {
  padding: 0px 0px;
  margin-top: 10px;
}

.form-row3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #b8aeae;
}

/* 左のセル（項目）のスタイル */
.label-cell {
  padding: 10px;
  width: 25%;
  text-align: left;
  position: relative;
}

/* 必須マーク */
.label-cell .required {
  color: #fff;
  background-color: #d63637;
  font-size: 12px;
  font-weight: 600;
  padding: 2px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

/* 右のセル（入力欄）のスタイル */
.input-cell {
  background-color: #ffffff;
  padding: 10px;
  width: 75%;
}

/* 名前入力欄を1行にまとめる（姓と名を横並びに） */
.name-flex {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  width: 75%;
}

.name-part {
  display: flex;
  flex-direction: column;
  width: auto;
}

/* 名前入力フィールドのスタイル */
.name-input {
  width: 120px;
  padding: 10px;
  background-color: #fffbe0; /* デフォルト背景色 */
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

/* フォーカスおよび入力後の背景色 */
.name-input:focus,
.name-input:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

/* 入力欄の一般スタイル */
.large-input {
  width: 100%;
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  margin-top: 0px;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.large-input:focus,
.large-input:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

.large-input2 {
  width: 100%;
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  margin-top: 15px;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.large-input3 {
  width: 100%;
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.large-input2:focus,
.large-input2:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

.medium-input {
  width: 70%;
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.medium-input:focus,
.medium-input:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

.small-input {
  width: 50px; /* 幅を50pxに設定 */
  padding: 5px;
  background-color: #fffbe0; /* デフォルト背景色 */
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  text-align: right;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
}

.small-input:focus,
.small-input:valid {
  background-color: #ffffff; /* 選択後背景色 */
}

.small2-input {
  width: 40%;
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.small2-input:focus,
.small2-input:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

/* セレクトボックスのスタイル全般 */
.form-container .input-cell select.small-input {
  width: 50px !important; /* 幅を50pxに設定 */
  padding: 5px !important;
  background-color: #fffbe0 !important; /* デフォルト背景色 */
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  font-size: 1.5rem !important;
  text-align: right !important;
  transition: background-color 0.3s ease !important;
  box-sizing: border-box !important;
}

/* 選択後（focusおよびvalid状態）の背景色を白に変更 */
.form-container .input-cell select.small-input:focus,
.form-container .input-cell select.small-input:valid {
  background-color: #ffffff !important; /* 選択後背景色 */
}

/* メールアドレス入力欄（2列にするための設定） */
.email-flex {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.email-part {
  flex: 1;
}

/* メール入力フィールドのスタイル */
.email-input {
  width: 100%; /* 入力欄を全幅に */
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.email-input:focus,
.email-input:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

.email-input2 {
  width: 100%; /* 入力欄を全幅に */
  padding: 10px;
  background-color: #fffbe0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1.5rem;
  box-sizing: border-box;
  margin-top: 15px;
  transition: background-color 0.3s ease; /* 背景色変更のスムーズな遷移 */
}

.email-input2:focus,
.email-input2:not(:placeholder-shown) {
  background-color: #ffffff; /* 入力後背景色 */
}

/* ラベルと入力欄を横並びに */
.date-flex {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.date-part {
  display: flex;
  flex-direction: column;
  width: auto;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .form-row,
  .form-row2,
  .form-row3 {
    display: block;
  }
  
  .label-cell {
    text-align: left;
    width: 100%;
  }
  
  .large-input,
  .large-input2 {
    margin-top: 10px;
  }
  
  .input-cell {
    width: 100%;
  }

  .name-flex {
    flex-direction: row; /* 名前の部分は横並びに */
    justify-content: space-between; /* 左右に並べる */
  }

  .name-part {
    width: 48%; /* 姓と名を50%未満にして1行に収める */
  }

  .name-input {
    width: 100%;
    margin-bottom: 0; /* 姓と名の間に余白をつけない */
  }

  /* メールアドレス部分は縦並び */
  .email-flex {
    flex-direction: column; /* 2行にする */
  }

  .email-part {
    width: 100%; /* 横幅いっぱいに */
  }

  .email-input {
    width: 100%; /* 各メール入力欄を全幅に */
    margin-bottom: 10px; /* 上下に余白を追加 */
  }
  
  .email-input2 {
    width: 100%; /* 各メール入力欄を全幅に */
    margin-top: 0px; /* 上下に余白を追加 */
  }
  
  .small2-input {
    width: 40%;
  }
  
  /* 希望日時の選択肢を左詰めに */
  .date-flex {
    flex-direction: row;
    justify-content: flex-start; /* 左詰め */
    gap: 5px; /* 選択肢間の余白を小さくする */
    flex-wrap: nowrap; /* 改行させない */
  }

  .small-input {
    width: auto; /* 各選択肢の幅を自動に調整 */
    padding: 5px;
  }

  .name-input {
    width: 100px;
  }
  
  /* 送信ボタンの中央配置 */
  .submit-button-container {
    text-align: center !important; /* ボタンを中央に揃える */
    margin-top: 50px; /* ボタンの上に余白を追加 */
  }

  .submit-button2 {
    display: inline-block; /* inline-blockにして親要素のtext-align: center;と連携 */
    margin: 0 auto; /* 自動マージンで中央揃え */
  }
}

/* 送信ボタンを中央に配置するためのコンテナ */
.submit-button-container {
  position: relative; /* スピナーの絶対位置指定の基準にする */
  text-align: center !important; /* ボタンを中央に揃える */
  margin-top: 50px; /* ボタンの上に余白を追加 */
}

/* 送信ボタンのスタイル */
.submit-button2 {
  padding: 10px 20px;
  background-color: #31967f;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.6rem;
  cursor: pointer;
  font-weight: bold;
  display: inline-block; /* inline-blockにして親要素のtext-align: center;と連携 */
  transition: background-color 0.3s ease;
  position: relative; /* スピナーとの重なりを防ぐ */
  z-index: 1; /* スピナーより前面に表示 */
}

/* 送信ボタンのホバー効果 */
.submit-button2:hover {
  background-color: #287c68;
}

/* スピナーのスタイル調整 */
.wpcf7-spinner {
  position: absolute;
  right: -30px; /* ボタンの右側に配置 */
  top: 50%;
  transform: translateY(-50%);
  display: none; /* 初期状態では非表示 */
}

/* スピナーを表示する際のスタイル */
.wpcf7-spinner.wpcf7-spinner-active {
  display: inline-block;
}

.sindan-title {
  padding: 0.8em; /* 文字周りの余白 */
  color: #494949; /* 文字色 */
  background: #edf7f6; /* 背景色 */
  border-left: solid 5px #31967f; /* 左線（実線 太さ 色） */
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.8;
}

.tsuiki {
  font-size: 1.4rem;
  padding-top: 30px;
  line-height: 1.5;
}

.yellow-maker {
  background-color: #ff9;
}

/* プレースホルダーの色を変更 */
::placeholder {
  color: #999; /* プレースホルダーの文字色を変更 */
}

:-ms-input-placeholder { /* Internet Explorer 10-11対応 */
  color: #999;
}

::-ms-input-placeholder { /* Microsoft Edge対応 */
  color: #999;
}

/* 追加: フォーム全体で必要なスタイルがあればここに追加 */
/* 例えば、readonlyフィールドのスタイル */
input[readonly],
textarea[readonly] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.wpcf7-not-valid-tip {
  display: none;
  color: #d63637 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  margin-top: 5px !important;
}

.wpcf7-not-valid-tip.error-message[style*="display: block"] {
  display: block !important;
}

/* フォーム全体のエラーメッセージのスタイル */
.wpcf7-validation-errors {
  color: #d63637; /* 文字色を赤に変更 */
  font-size: 1.4rem; /* フォントサイズをさらに大きく */
  background-color: #ffe6e6; /* 背景色を薄い赤に */
  padding: 10px; /* 内側の余白を追加 */
  border: 1px solid #d63637; /* 枠線を赤に */
  border-radius: 5px; /* 角を丸く */
  margin-bottom: 20px; /* フォームの上部との間隔を調整 */
}






/* ポップアップオーバーレイ全体のスタイル */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
  display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center;     /* 垂直方向に中央揃え */
  z-index: 9999; /* 他の要素の上に表示 */
}

/* ポップアップコンテンツ部分のスタイル */
.popup-content {
  background-color: white;
  padding: 40px 40px 20px 40px;
  border-radius: 10px;
  max-width: 400px; /* 最大幅を設定 */
  width: 80%; /* 画面幅に応じて自動的に調整 */
  text-align: center;
  position: relative;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 影をつける */
}

/* ×ボタンのスタイル */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 24px; /* サイズを大きく */
  font-weight: bold;
}

/* メッセージタイトル */
#popup-title {
  font-size: 1.8rem; /* タイトルのサイズ */
  margin-bottom: 10px;
}

/* メッセージテキスト部分 */
#popup-text {
  font-size: 1.4rem; /* テキストのサイズを調整 */
  line-height: 1.5; /* 行間を調整 */
  margin: 20px 0;
  color: #333; /* テキストの色を変更 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .popup-content {
      max-width: 90%; /* モバイルではポップアップの幅を広げる */
      padding: 35px 35px 15px 35px;
  }
  
  .popup-close {
      font-size: 20px; /* モバイルでは×ボタンのサイズを少し小さくする */
      top: 5px;
      right: 10px;
  }

  #popup-title {
      font-size: 1.6rem; /* モバイルではタイトルサイズを少し小さくする */
  }

  #popup-text {
      font-size: 1.3rem; /* モバイルではテキストサイズを少し小さくする */
      line-height: 1.3; /* 行間を調整 */
  }
}