@charset "UTF-8";
/* 見出し写真のグラデ（Figma の Rectangle 180 と同じ見え方）: CSS は透明側の色を無視して補間するため中間色を足して再現。common.css の .pageHead::after に移してよい */
.pageHead::after { background: linear-gradient(to top, rgba(0, 59, 119, .82) 8.65%, rgba(14, 70, 126, .748) 20.79%, rgba(28, 80, 132, .676) 32.93%, rgba(43, 90, 139, .605) 45.06%, rgba(57, 101, 146, .533) 57.2%, rgba(99, 132, 166, .4) 67.9%, rgba(142, 164, 186, .267) 78.6%, rgba(184, 195, 206, .133) 89.3%, rgba(226, 226, 226, 0)); }
/* ===== お問い合わせフォーム ===== */
.contact { padding: calc(49 / var(--screen-w) * 100vw) 0 calc(156 / var(--screen-w) * 100vw); }
.contactForm { width: calc(1166 / var(--screen-w) * 100vw); margin: 0 auto; border: 1px solid #aaa; border-radius: calc(15 / var(--screen-w) * 100vw); color: #414141; font-weight: 500; }
.contactForm-head { align-items: center; padding: calc(46 / var(--screen-w) * 100vw) calc(54 / var(--screen-w) * 100vw) calc(46 / var(--screen-w) * 100vw); border-bottom: 1px solid #aaa; }
.contactForm h2 { font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.contactForm-dl { position: relative; align-items: center; min-width: calc(388 / var(--screen-w) * 100vw); white-space: nowrap; padding-right: calc(50 / var(--screen-w) * 100vw); background: var(--btn); border-radius: calc(10 / var(--screen-w) * 100vw); color: #fff; font-size: calc(16 / var(--fs-w) * 100vw); line-height: 1.5; }
.contactForm-dl img { width: calc(121 / var(--screen-w) * 100vw); height: calc(88 / var(--screen-w) * 100vw); margin-right: calc(16 / var(--screen-w) * 100vw); object-fit: cover; border-radius: calc(10 / var(--screen-w) * 100vw) 0 0 calc(10 / var(--screen-w) * 100vw); }
.contactForm-dl::after { content: ""; position: absolute; top: 50%; right: calc(32 / var(--screen-w) * 100vw); width: calc(6 / var(--screen-w) * 100vw); height: calc(11 / var(--screen-w) * 100vw); background: url(../img/common/chev-w.svg) center / contain no-repeat; transform: translateY(-50%); }
.contactForm-body { padding: calc(53 / var(--screen-w) * 100vw) calc(54 / var(--screen-w) * 100vw) calc(71 / var(--screen-w) * 100vw); }
.contactForm-row { grid-template-columns: 1fr calc(753 / var(--screen-w) * 100vw); align-items: start; }
.contactForm-row + .contactForm-row { margin-top: calc(21 / var(--screen-w) * 100vw); }
fieldset.contactForm-row + .contactForm-row { margin-top: calc(44 / var(--screen-w) * 100vw); }
.contactForm-row + fieldset.contactForm-row { margin-top: calc(76 / var(--screen-w) * 100vw); }
.contactForm-row > label, .contactForm legend { float: left; padding-top: calc(23 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); line-height: 1.5; }
.contactForm legend { padding: 0; }
.contactForm-row span { color: red; }
.contactForm input[type="text"], .contactForm input[type="email"], .contactForm input[type="tel"], .contactForm textarea { width: 100%; height: calc(71 / var(--screen-w) * 100vw); padding: 0 calc(20 / var(--screen-w) * 100vw); background: #f0f0f0; border-radius: calc(6 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); }
.contactForm textarea { display: block; height: calc(218 / var(--screen-w) * 100vw); padding-block: calc(16 / var(--screen-w) * 100vw); resize: vertical; }
.contactForm :focus-visible { outline: 2px solid var(--btn); outline-offset: 1px; }
.contactForm-type { grid-template-columns: repeat(2, max-content); gap: calc(15 / var(--screen-w) * 100vw) calc(107 / var(--screen-w) * 100vw); }
.contactForm-src { grid-template-columns: minmax(calc(156 / var(--screen-w) * 100vw), max-content) minmax(calc(156 / var(--screen-w) * 100vw), max-content) minmax(calc(124 / var(--screen-w) * 100vw), max-content) minmax(calc(127 / var(--screen-w) * 100vw), max-content) max-content; gap: calc(10 / var(--screen-w) * 100vw) 0; }
.contactForm-type label, .contactForm-src label, .contactForm-agree label { display: flex; align-items: center; gap: calc(7 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.5; white-space: nowrap; cursor: pointer; }
.contactForm-src label { gap: calc(8 / var(--screen-w) * 100vw); }
.contactForm input[type="radio"], .contactForm input[type="checkbox"] { flex-shrink: 0; display: grid; place-content: center; width: calc(19 / var(--screen-w) * 100vw); height: calc(19 / var(--screen-w) * 100vw); margin: 0; border: 1px solid #aaa; border-radius: 50%; background: #fff; appearance: none; cursor: pointer; }
.contactForm input[type="radio"]:checked::before { content: ""; width: calc(9 / var(--screen-w) * 100vw); height: calc(9 / var(--screen-w) * 100vw); border-radius: 50%; background: var(--btn); }
.contactForm input[type="checkbox"] { width: calc(17 / var(--screen-w) * 100vw); height: calc(17 / var(--screen-w) * 100vw); border-radius: 0; }
.contactForm input[type="checkbox"]:checked { background: var(--btn) url(../img/common/chev.svg) center / calc(6 / var(--screen-w) * 100vw) auto no-repeat; border-color: var(--btn); transform: rotate(90deg); }
.contactForm-agree { margin-top: calc(102 / var(--screen-w) * 100vw); }
.contactForm-agree label { justify-content: center; gap: calc(8 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); }
.contactForm-agree input[type="checkbox"] { width: calc(19 / var(--screen-w) * 100vw); height: calc(19 / var(--screen-w) * 100vw); }
.contactForm-agree a { border-bottom: 1px solid #414141; line-height: 1.3; }
.contactForm-submit { margin-top: calc(32 / var(--screen-w) * 100vw); text-align: center; }

@media (max-width: 1080px) {
  .contactForm-row > label, .contactForm legend { padding-right: calc(16 / var(--screen-w) * 100vw); }
}

/* ===== SP ===== */
@media (max-width: 900px) {
  .contact { padding: calc(32 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(64 / var(--screen-w) * 100vw); }
  .contactForm { width: 100%; border-radius: calc(10 / var(--screen-w) * 100vw); }
  .contactForm-head { display: block; padding: calc(24 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); }
  .contactForm h2 { font-size: calc(19 / var(--fs-w) * 100vw); }
  .contactForm-dl { min-width: 0; white-space: normal; margin-top: calc(16 / var(--screen-w) * 100vw); padding-right: calc(44 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .contactForm-dl img { width: calc(80 / var(--screen-w) * 100vw); height: calc(58 / var(--screen-w) * 100vw); margin-right: calc(14 / var(--screen-w) * 100vw); }
  .contactForm-dl::after { right: calc(20 / var(--screen-w) * 100vw); }
  .contactForm-body { padding: calc(28 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(40 / var(--screen-w) * 100vw); }
  .contactForm-row { display: block; }
  .contactForm-row + .contactForm-row, fieldset.contactForm-row + .contactForm-row { margin-top: calc(20 / var(--screen-w) * 100vw); }
  .contactForm-row + fieldset.contactForm-row { margin-top: calc(28 / var(--screen-w) * 100vw); }
  .contactForm-row > label, .contactForm legend { float: none; display: block; margin-bottom: calc(8 / var(--screen-w) * 100vw); padding: 0; font-size: calc(14 / var(--fs-w) * 100vw); }
  .contactForm input[type="text"], .contactForm input[type="email"], .contactForm input[type="tel"], .contactForm textarea { height: calc(50 / var(--screen-w) * 100vw); padding: 0 calc(14 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); }
  .contactForm textarea { height: calc(180 / var(--screen-w) * 100vw); padding-block: calc(12 / var(--screen-w) * 100vw); }
  .contactForm-type { grid-template-columns: 1fr; gap: calc(12 / var(--screen-w) * 100vw); }
  .contactForm-src { grid-template-columns: repeat(3, 1fr); gap: calc(12 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw); }
  .contactForm-type label, .contactForm-src label { gap: calc(8 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); white-space: normal; }
  .contactForm-agree { margin-top: calc(36 / var(--screen-w) * 100vw); }
  .contactForm-agree label { font-size: calc(14 / var(--fs-w) * 100vw); }
  .contactForm-submit { margin-top: calc(24 / var(--screen-w) * 100vw); }
}