@charset "utf-8";

/*---------------------
以下フォームCSS
---------------------*/

input,textarea{font-size: 16px;}
.formrun{width: 800px;margin: 3rem auto;}
.cmn-page-h2-ttl-wrap {padding: 4rem 0;}
.form-mv{width: 800px; margin: 0 auto;}
.form-mv img{width: 100%;}
.recruit-form-link{display: flex;justify-content: right;}
.recruit-form-link a{text-decoration: underline;color:#63abbd;}

@media screen and (max-width: 768px) {
.form-mv{width: 100%;}

}

/*--基本設定---*/
.form-item{margin-top: 1rem;display: flex;}
.form-group-label{display: flex;}
.form-wraps{display: block;max-width: 900px;margin: 0  auto; font-size: 18px;}
.form-label-wrapper{ display: flex;align-items: center;width: 30%; letter-spacing: -0.03em; flex-shrink: 0;}    
.form-input-wrapper{ width: 70%; }
.fieldset{display: flex; flex-shrink: 0;align-items: center;flex-wrap: wrap;}
.form-group-label{width: 100%;}
.deta-label{font-weight: 600; color: #333;}

/*--必須・任意---*/
.required{ display: inline; color: #FFF;
background: #27a5a4; margin-left: 10px; font-size: 11px;
padding: 4px 8px 5px; line-height: 1; border-radius: 3px;}
.optional{display: inline; color: #FFF;background: #b9b9b9;font-size: 11px; margin-left: 10px;
line-height: 1; border-radius: 3px; padding: 4px 8px 5px; line-height: 1; border-radius: 3px;}

/*--エラー---*/
.form-error{ font-size: 12px; color: #d9534f; font-weight: 500; margin-top: 0.5em;}

/*--input type="text" 設定---*/
input{box-sizing: border-box;}
input[type="text"]{display: block;width: 100%; padding: 0.5rem 0.75rem;line-height: 1.5;
background-image: none;background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 0.25rem;}

input[type="text"]{transition: all 0.3s;}
input[type="text"]:hover{border-color: #27a5a4;}
input[type="text"]:focus { border-color: #27a5a4; outline: none;}

/*--select  設定---*/
select {appearance: none;-moz-appearance: none;-webkit-appearance: none; border: none;
border-radius: 0.25rem;padding: 0.5rem 0.75rem;line-height: 1.5;
position: relative;border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; width: 500px;}
option[selected][disabled] {display: none;}
select:hover{border-color: #27a5a4;}
select:focus {border-color: #27a5a4;outline: none;}

/*--select custom---*/
.option-arrow{position: relative; display: inline-block;}
.option-arrow::after{content: '';
width: 8px; height: 8px; margin-top: -5px;
border-top: solid 2px #27a5a4;border-right: solid 2px #27a5a4;  
transform: rotate(135deg); position: absolute; top: 50%;right: 20px;}

/*--複数選択---*/
.form-option{padding: 0.5rem 1rem 0.5rem 0.75rem;margin-bottom: 0.3rem;
border-radius: 0.25rem; display: inline-block;border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer;line-height: 1.5; margin-right: 0.3rem;transition: all 0.3s;display: inline-flex;
align-items: center; flex-shrink: 0;}
.form-option:hover{ background-color: #e7ffff;border-color: #27a5a4;}

/*--checkbox カスタマイズ---*/
/* input自体は非表示（ただしフォーカス・操作は残す） */
.form-option input[type="checkbox"] { position: absolute;opacity: 0; pointer-events: none;}
/* カスタムチェックボックスの枠 */
.custom-checkbox {width: 1em; height: 1em;  border: 2px solid #666;
border-radius: 4px;display: inline-block; position: relative; box-sizing: border-box;
transition:0.2s ease; margin-right: 0.5em;}
/* チェック時のスタイル*/
.form-option input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";position: absolute;left: 3px;top: 0px;
  width: 5px;height: 8px;border: solid #FFF;border-width: 0 2px 2px 0;transform: rotate(45deg);}
/* チェック時の背景色変更 */
.form-option input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #27a5a4;border-color: #27a5a4;}

/*--自由入力エリア---*/
.form-textarea textarea{padding: 0.5rem 1rem 0.5rem 0.75rem;border-radius: 0.25rem;
width: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.15);height: 6em;}
.form-textarea textarea:focus{border-color: #27a5a4;outline: none;}

/*--住所---*/
.postal-code-jp{width: 40%!important;}
.street-address{margin-top: 0.5em;}

/*--プライバシーポリシー---*/
/* ラベルの基本構造 */
.custom-checkbox-label {
  display: flex;align-items: center;cursor: pointer;user-select: none;line-height: 1.5;position: relative;}
/* input本体を消す */
.custom-checkbox-label input[type="checkbox"] {position: absolute; opacity: 0;  pointer-events: none;}
/* 見た目のチェックボックス */
.custom-checkbox {width: 1em;height: 1em;border: 2px solid #666;border-radius: 4px;
display: inline-block; position: relative; box-sizing: border-box;
transition: 0.2s ease; margin-right: 0.5em;}
/* チェックマーク（✓） */
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
content: "";position: absolute;top: 0; left: 3px;  width: 4px;height: 8px;
border: solid #FFFFFF;border-width: 0 2px 2px 0;transform: rotate(45deg);}
/* チェック時の背景変化 */
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
background-color: #27a5a4; border-color: #27a5a4;}
.custom-checkbox-label{margin-top: 10px;padding: 0.5rem 1rem 0.5rem 0.75rem;
border-radius: 0.25rem;border: 1px solid rgba(0, 0, 0, 0.15);}
.custom-checkbox-label:hover{background-color: #e7ffff;border-color: #27a5a4;}
.privacy-policy-item a{text-decoration: underline;}

/* scrollテキスト */
.privacy-policy-item-ttl{width: 100%;display: flex;margin: 1rem 0 0.5em;}
.privacy-policy-scrolltext{width: 100%; height: 7em;padding: 1em;box-sizing: border-box; font-size: 90%;
border: 1px solid rgba(0, 0, 0, 0.15);overflow-y: scroll; background-color: #f7f7f7;}
.privacy-policy-scrolltext h3{text-align: center;margin-bottom: 1em;}
.privacy-policy-scrolltext p{margin-bottom: 1em;}

/*--送信ボタン---*/
.submit-btn{ background-color: transparent; border: none;cursor: pointer; outline: none; appearance: none;
background-image: linear-gradient(90deg, rgba(251, 176, 59, 1) 10%, rgba(255, 147, 30, 1) 90%);
padding: 20px; border-radius: 50px;width: 70%; margin: 25px auto 0;
text-align: center;display: block; color: #FFF; font-weight: bold;outline: none;
font-size: 20px; letter-spacing: 0.08em; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);transition: .3s all;position: relative; top: 0;}

.submit-btn:hover{top: 4px;box-shadow: 0 0px 0px rgba(0, 0, 0, .1);}

@media screen and (max-width: 768px) {
select {width: 120%;padding: 0.9rem 0.75rem;}
.formrun{width: 100%;margin: 3rem auto;}
.option-arrow::after{right: -12%;}
input[type="text"] {padding: 0.9rem 0.75rem;}
.form-option {padding:0.9rem 1rem 0.9rem 1rem;}
.custom-checkbox-label {padding:0.9rem 1rem 0.9rem 1rem;}
.form-item ,.form-group-label{flex-direction: column;} 
.form-label-wrapper{width: 100%; margin-bottom: 0.5rem;}
.form-input-wrapper{width: 100%; margin-bottom: 0.7rem;}
.fieldset {flex-flow: wrap;}
.form-option {margin: 0.5rem 0.5rem 0 0;letter-spacing: -0.01em;}
.privacy-policy-item{letter-spacing: -0.02em;}
.form-textarea textarea{height: 10em;}

}