/* ===================================================
フォーム関連
 =================================================== */

/* フォーム汎用 */
.form input[type="text"], .form input[type="email"], .form input[type="date"], textarea { background-color:#eee; border:2px solid var(--bk); color:var(--bk); font-weight:400; padding:5px; max-width:100%; width:100%; }
.form input[type="date"] { appearance:none; -webkit-appearance:none; height:46px; }
.form input[type="text"]:focus, .form input[type="email"]:focus, .form input[type="date"]:focus, textarea:focus { background-color:var(--wh); }
.form select { background-color:#eee; border:2px solid var(--bk); box-sizing:border-box; color:var(--bk); font-size:16px; padding:8px; line-height:200%; width:100%; }
.form select:focus { background-color:var(--wh); }

/* ラジオボタン */
.form input[type="radio"] { display:none; }
p.form-input.radio { display:flex; gap:40px; }
p.form-input.radio.radio-list { align-items:flex-start; flex-direction:column; gap:16px; }
.radio label { cursor:pointer; font-size:16px; padding-left:26px; position:relative; z-index:1; }
.radio label::before { background-color:var(--wh); border:1px solid var(--bk); border-radius:50%; content:''; left:0; top:50%; position:absolute; transform:translateY(-50%); height:24px; width:24px; }
.form-input.radio input[type="radio"]:checked + label::after { background-color:var(--bl); border-radius:50%; content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); height:12px; width:12px; }
p.form-input.radio span.radio-item { gap:8px; }

/* 送信ボタン */
p.submit-button { align-items:center; justify-content:center; }
input.hover-button { background-size:cover; background-position:center; background-repeat:no-repeat; background-image:url(../img/form/button-submit.svg); border:none; cursor:pointer; display:inline-block; text-indent:-9999px; overflow:hidden; height:50px; width:160px; }
input.hover-button:active, input.hover-button:hover { background-image:url(../img/form/button-submit-ov.svg); }
input.hover-button.contact-button { background-image:url(../img/form/contact-button-submit.svg); height:50px; width:128px; }
input.hover-button.contact-button:active, input.contact-button.hover-button:hover { background-image:url(../img/form/contact-button-submit-ov.svg); }
input.hover-button.back-button { aspect-ratio:184/58; background-size:contain; background-image:url(../img/form/button-back.svg); height:58px; width:184px; }
input.hover-button.back-button:active, input.back-button.hover-button:hover { background-image:url(../img/form/button-back-ov.svg); }
input.hover-button.send-button { aspect-ratio:184/58; background-size:contain; background-image:url(../img/form/button-send.svg); height:58px; width:184px; }
input.hover-button.send-button:active, input.send-button.hover-button:hover { background-image:url(../img/form/button-send-ov.svg); }

/* ファーストビュー */
div.title-image.contact-title { background-image:url(../img/form/first-viwe-contact.jpg); }

/* ファーストビュー：リクルート用フォームのみ */
div.recruit-form.page-title { background-image:linear-gradient(84deg, #46EB75 5.55%, #2BB24D 88.29%); }
div.title-image.recruit-title { background-image:url(../img/form/first-viwe-recruit.jpg); }
div.title-image.recruit-title::before { background-image:linear-gradient(293.75deg, rgba(63, 221, 108, 0.280236) 26.78%, rgba(70, 235, 117, 0.25) 65.57%); }

/* リード文 */
p.read-text { padding:0 20px; margin-bottom:80px; }
p.read-text a { border-bottom:1px solid var(--bk); display:inline; }

/* コンテンツベース */
section.form { margin-bottom:138px; }

/* フォーム全体ベース */
ul.form-list, ul.form-list li { flex-direction:column; }
ul.form-list { gap:24px; padding:0 20px; margin-bottom:24px; }
ul.form-list li { gap:8px; }
ul.form-list li p { align-items:center; color:var(--bl); font-weight:700; gap:8px; }
.msg { color:#f00; }

/* 必須 */
ul.form-list li p span.must { align-items:center; background-color:var(--gr); border-radius:20px; color:var(--wh); font-size:12px; font-weight:400; justify-content:center; padding:5px 12px 6px 12px; line-height:100%; }
ul.form-list.contact li p span.must { background-color:var(--hover-bl); }

/* セレクト */
.select-wrap { display:inline-block; position:relative; max-width:276px; }
/* select本体 */
.select-wrap select { appearance:none; cursor:pointer; text-align:left; margin-left:0; width:100%; -webkit-appearance:none; -moz-appearance:none; }
/* ▼ 矢印（下向き） */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translateY(-50%) rotate(45deg); /* 下向き */
  pointer-events: none;
  transition: transform .25s ease;
}
/* ▼ 展開時（フォーカス中）のみ上向き */
.select-wrap:focus-within::after {
  transform: translateY(-50%) rotate(-135deg); /* 上向き */
}

@container(min-width:960px) {

/* ラジオボタン */
p.form-input.radio.radio-list { flex-direction:row; flex-wrap:wrap; gap:80px; }

/* 送信ボタン */
input.hover-button { background-image:url(../img/form/pc-button-submit.svg); height:68px; width:184px; }
input.hover-button:active, input.hover-button:hover { background-image:url(../img/form/pc-button-submit-ov.svg); }
input.hover-button.back-button { aspect-ratio:184/58; background-size:contain; background-image:url(../img/form/button-back.svg); height:58px; width:184px; }
input.hover-button.back-button:active, input.back-button.hover-button:hover { background-image:url(../img/form/button-back-ov.svg); }
input.hover-button.send-button { aspect-ratio:184/58; background-size:contain; background-image:url(../img/form/button-send.svg); height:58px; width:184px; }
input.hover-button.send-button:active, input.send-button.hover-button:hover { background-image:url(../img/form/button-send-ov.svg); }

/* ファーストビュー：リクルート用フォームのみ */
div.title-image.recruit-title::before { background-image:linear-gradient(109deg, rgba(81, 210, 102, 0.50) 7.51%, rgba(63, 221, 108, 0.28) 37.49%, rgba(255, 255, 255, 0.10) 58.05%); }

/* リード文 */
p.read-text { font-size:20px; font-weight:600; padding:0; line-height:170%; margin:auto; margin-bottom:80px; max-width:740px; }

/* コンテンツベース */
section.form { margin:auto; margin-bottom:184px; max-width:1170px; }

/* フォーム全体ベース */
ul.form-list { margin-bottom:80px; }
ul.form-list li { flex-direction:row; align-items:flex-start; }
p.form-item { width:336px; }
p.from-input { width:calc( 100% - 336px ); }

}