@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 固定ページタイトル隠す */
.c-pageTitle {
  display: none;
}
/* reCAPTCHAバーを隠す */
.grecaptcha-badge { visibility: hidden; }

/* トップページこだわりカラムのスマホ表示 */
@media screen and (max-width: 768px) {
  .sp-reverse .wp-block-column:first-child {
    order: 2;
  }
  .sp-reverse .wp-block-column:last-child {
    order: 1;
  }
}

/* トップページメニュー上の画像 */
/* .header-top-image {
	text-align: center;
	padding: 10px 20px;
	background-color: #fff;
}
.header-top-image img {
	max-width: 100%;
	height: auto;
} */

/* 求人ページ */
.tenka-job {
  max-width: 1200px;
  margin: 2em auto;
  padding: 1.5em;
  background-color: #fff0f0;
  border: 2px solid #c40000;
  border-radius: 10px;
  font-family: "Helvetica Neue", sans-serif;
  color: #300000;
}
.job-title {
  font-size: 1.8em;
  background-color: #c40000;
  color: #fff;
  padding: 0.5em 1em;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 1.5em;
  font-weight: bold;
}
.tenka-job dl {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #c40000;
}
.tenka-job dt, .tenka-job dd {
  padding: 1em 0.5em;
  border-bottom: 1px solid #c40000;
}
.tenka-job dt {
  width: 30%;
  font-weight: bold;
  background-color: #ffecec;
}
.tenka-job dd {
  width: 70%;
}
@media screen and (max-width: 600px) {
  .tenka-job dt, .tenka-job dd {
    width: 100%;
  }
	.job-title {
  font-size: 1.5em;
	}
}


/*お問い合わせフォームCSS  */
.privacy-policy {
	font-size:14px;
    height: 250px;
    padding: 2em;
    border: 2px solid #111;
    overflow-y: scroll;
 margin-bottom:50px;
	border: 2px solid #333;
    border-radius: 5px;
    background: #fff0f0;
}
.privacy-policy__box{
	margin-bottom:10px;
}
/* チェックボックス */
.wpcf7-acceptance input {
  display: none;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
}

.wpcf7-acceptance .wpcf7-list-item-label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label:before {
  background: #4CAF50;
  border-color: #4CAF50;
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label:after {
  content: '\2714';
  position: absolute;
  left: 5px;
  top: 1px;
  color: #fff;
  font-size: 14px;
}
.contact-acceptance{
	text-align:center;
	margin-bottom:30px;
}
/* フォーム全体のスタイリング */
.custom-form {
    max-width: 600px; /* フォーム全体の最大幅を指定し、中央寄せでバランスを整える */
    margin: 0 auto; /* 中央に配置 */
    font-family: 'Arial', sans-serif; /* フォーム全体のフォントを指定 */
    color: #333; /* テキストの色を濃いグレーに設定 */
}

.custom-form label {
    display: inline-block; /* ラベルを独立したブロック要素として扱う */
    margin-bottom: 8px; /* ラベル下に余白を追加して間隔を調整 */
    font-weight: bold; /* ラベルの文字を強調 */
    font-size: 14px; /* ラベルの文字サイズを調整 */
}

/* 必須ラベルのスタイリング */
.custom-form .required {
    display: inline-block; /* 必須ラベルをインラインで表示 */
    margin-left: 5px; /* ラベルと必須マークの間隔を調整 */
    padding: 2px 6px; /* 内側の余白を設定して視認性を向上 */
    font-size: 12px; /* 必須ラベルの文字サイズを指定 */
    color: #fff; /* テキスト色を白に設定 */
    background-color: #0080D9; /* 必須ラベルの背景色をメインカラーに設定 */
    border-radius: 3px; /* ラベルを角丸にして柔らかい印象に */
    font-weight: bold; /* ラベルの文字を太字に */
}

/* 入力フィールド */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea {
    width: 100%; /* フィールド幅をフォームに合わせて最大化 */
    padding: 10px; /* 内側の余白を設定して入力しやすくする */
    margin-bottom: 30px; /* 各フィールドの下に余白を設定して間隔を広げる */
    border: 2px solid #66B8ED; /* メインカラーを枠線に適用 */
    border-radius: 5px; /* 入力フィールドを角丸に */
    background: #EAF7FE; /* フィールド背景を薄いグレーに設定 */
    font-size: 14px; /* フィールド内テキストのサイズを指定 */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* フォーカス時のスムーズな変化を設定 */
}

.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus {
    border-color: #EAF7FE; /* フォーカス時の枠線色を強調 */
    outline: none; /* ブラウザデフォルトのフォーカス枠を削除 */
    background: #EAF7FE; /* フォーカス時の背景色をメインカラーの薄いバリエーションに変更 */
}

/* 送信ボタンの調整 */
.custom-form input[type="submit"] {
    display: block; /* ブロック要素として中央揃えしやすく設定 */
    width: 80%; /* ボタン幅を適度に制限 */
    margin: 0 auto; /* ボタンを中央寄せ */
    padding: 12px 20px; /* ボタン内側の余白を調整 */
    border: none; /* 枠線を削除してシンプルなデザインに */
    border-radius: 25px; /* ボタンを丸みのある形状に設定 */
    background: #0080D9; /* ボタン背景にメインカラーを適用 */
    color: #fff; /* ボタン文字を白に設定 */
    font-size: 16px; /* ボタン文字のサイズを指定 */
    cursor: pointer; /* ボタンにホバーポインタを表示 */
    transition: background-color 0.3s ease; /* ホバー時の背景色変更をスムーズに */
}

.custom-form input[type="submit"]:hover {
    background: #66B8ED; /* ボタンホバー時にメインカラーの濃いバリエーションを表示 */
}

/* 送信完了メッセージのカスタマイズ */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #EAF7FE;  /* 薄い黄色 (背景) */
    color: #333;               /* 文字色 (暗めの色) */
    border: 2px solid #0080D9; /* メインカラーのボーダー */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}

/* メッセージの間に余白を追加 */
.wpcf7 form.sent .wpcf7-response-output p {
    font-size: 16px;
    line-height: 1.5;
}

/* メッセージが表示された時にアニメーション */
.wpcf7 form.sent .wpcf7-response-output {
    animation: fadeIn 1s forwards;
}