/* =========================================================
   page-form.css
   ---------------------------------------------------------
   フォーム関連ページ（お問い合わせ・採用エントリー）専用スタイル用CSS

   ■ 概要
   WordPressのお問い合わせフォーム・採用フォームおよび
   各送信完了ページに適用されるスタイルを記述するファイル

   ■ 読み込み条件
   functions.php にて以下条件で読み込み
   - if ( is_page(array('contact','contact_thanks','entry','entry_thanks')) )

   ■ 対象ページ
   - お問い合わせページ
   - お問い合わせ完了ページ
   - 採用エントリーページ
   - 採用エントリー完了ページ

   ■ 今後の運用
   - フォームの種類ごとにデザインを分離する場合は、
     ファイルを分割（page-contact.css / page-entry.css）し、
     読み込み条件も個別に設定すること
========================================================= */

:root {
  --color-main: #F79B3F;   /* テーマカラー（オレンジ） */
  --color-black: #002F34;   /* 黒カラー */
  --color-white: #FFFFFF;     /* 白カラー */
  --color-gray: #DDDDDD;     /* グレーカラー */
}

/* ========================================
   Base
======================================== */
.wpcf7 {
  font-size: 16px;
  color: var(--color-black);
  background: var(--color-white);
  border: none !important;
}

@media screen and (max-width: 767px) {
  .wpcf7 {
    font-size: 14px;
  }
	
  .wpcf7 p {
    font-size: 14px;
  }
}

.wpcf7 form {
  margin: 0 !important;
}

.p-entry__body p {
  margin-bottom: 10px;
  color: var(--color-black);
  line-height: 1.8;
}

.p-entry__body a {
  text-decoration: underline;
}

.p-entry__body a:hover {
  text-decoration: none;
}


/* ========================================
   Form Elements
======================================== */
.wpcf7 input,
.wpcf7 textarea {
  border-radius: 4px;
}

.wpcf7 select {
  min-width: 300px;
}

.wpcf7 select,
.wpcf7 .wpcf7-list-item-label {
  font-size: 16px;
  border-radius: 4px;
}


@media screen and (max-width: 767px) {
	.wpcf7 select,
	.wpcf7 .wpcf7-list-item-label {
		font-size: 14px;
	}
}

.wpcf7-list-item {
  margin: 0;
}

.wpcf7-not-valid-tip {
  margin-top: 7px;
}


/* ========================================
   Label
======================================== */
.form__label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  line-height: 1;
}

/* ========================================
   Textarea
======================================== */
.form__textarea {
  min-height: 140px;
}


/* ========================================
   Required
======================================== */
.wpcf7 .required {
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 14px;
  margin-left: 10px;
  padding: 4px 8px;
  vertical-align: middle;
  word-break: keep-all;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.wpcf7 .required {
		font-size: 12px;
	}
}

/* ========================================
   Layout
======================================== */
.wpcf7 .form__item {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-gray);
}

.u-center {
  text-align: center;
}


/* ========================================
   Button
======================================== */
.wpcf7 .wpcf7-submit,
.top_btn {
  border-radius: 10px;
  background: var(--color-black);
  color: var(--color-white);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 60px;
  min-width: 240px;
  height: 60px;
  padding: 0 15px;
  transition: all .3s;
}

.wpcf7 .wpcf7-submit:hover,
.top_btn:hover {
  background: var(--color-black);
  opacity: 0.8;
}

.wpcf7-spinner{
	display: none;
}

/* ========================================
   Select
======================================== */
#select-service {
  color: var(--color-black);
}

/* =========================
  生年月日専用
========================= */
/* 生年月日の行だけflexにする */
.form__item:has([data-name="birth-year"]) p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ラベルは1行目に */
.form__item:has([data-name="birth-year"]) .form__label {
  width: 100%;
  margin-bottom: 6px;
}

/* 入力フィールド */
.form__item:has([data-name="birth-year"]) input[type="number"] {
  width: 90px;
  height: 44px;
  padding: 8px;
  text-align: center;
  border-radius: 6px;
}

/* 年月日テキスト */
.form__item:has([data-name="birth-year"]) {
  font-size: 13px;
}

@media (max-width: 767px) {

  .form__item:has([data-name="birth-year"]) p {
    gap: 6px;
  }

  .form__item:has([data-name="birth-year"]) input[type="number"] {
    width: 70px;
    height: 40px;
    font-size: 14px;
  }

}

/* ========================================
   Complete
======================================== */
.form__complete {
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--color-main);
}

.btn-wrap {
	margin: 40px auto 0;
}

.p-entry__body a.top_btn {
    color: var(--color-white);
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}