/* ============== Base ============== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.page {
  margin: 0;
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.6;
}
img { max-width: 100%; vertical-align: middle; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ============== Header ============== */
.header { padding: 20px 0; border-bottom: 1px solid #f2f2f2; }
.header__logo { height: 36px; }

/* ============== Main Headings ============== */
.main { padding: 32px 0 80px; }
.lead { color: #E61E26; font-weight: 700; margin: 0 0 6px; font-size: 14px; }
.title { font-size: 32px; line-height: 1.3; margin: 0 0 10px; }
.link { color: #0B6EF3; text-decoration: none; }
.link--accent { color: #E61E26; }
.link:hover { text-decoration: underline; }

/* ============== LP Layout ============== */
.lp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}
.lp__summary {}
.lp__form {}

/* ============== Summary Block ============== */
.summary {}
.summary__image { display: block; width: 320px; max-width: 100%; border: 1px solid #e1e3e8; border-radius: 6px; }
.summary__text { font-size: 14px; margin: 12px 0 0; }
.summary__subtitle { color: #E61E26; font-size: 16px; margin: 18px 0 8px; }
.summary__list { margin: 0; padding-left: 18px; }
.summary__item { margin: 6px 0; }

/* ============== Form Block ============== */
.c-form {
  background: #F8F8FA;
  border: 1px solid #ECECF1;
  border-radius: 10px;
  padding: 28px;
}
.c-form__body { display: grid; gap: 14px; }

.c-form__field { display: grid; gap: 6px; }
.c-form__label { font-size: 14px; color: #222; font-weight: 500; }

.c-form__required {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: #fff;
  background: #0F7A89;
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: middle;
}

.c-form__input,
.c-form__select {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #CFCFD8;
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  font-size: 15px;
  outline: none;
}
.c-form__input:focus,
.c-form__select:focus { border-color: #0F7A89; box-shadow: 0 0 0 3px rgba(15,122,137,.12); }

.c-form__checkbox {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.c-form__checkbox-input { width: 18px; height: 18px; }
.c-form__checkbox-label { margin-right: 4px; }

.c-form__note { font-size: 12px; color: #555; margin: 4px 0 0; }

.c-form__button {
  display: inline-block;
  width: 100%;
  border: none;
  background: #E61E26;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 9999px;
  cursor: pointer;
  transition: filter .15s ease;
  margin-top: 6px;
}
.c-form__button:hover { filter: brightness(0.95); }

.c-form__policy { font-size: 12px; color: #555; }
.c-form__policy .link { color: #0B6EF3; }

/* ============== Footer ============== */
.footer { border-top: 1px solid #f2f2f2; padding: 32px 0; text-align: center; color: #666; font-size: 12px; }

/* ============== Responsive ============== */
@media (max-width: 768px) {
  .title { font-size: 26px; }
  .lp { grid-template-columns: 1fr; gap: 20px; }
  .c-form { order: -1; padding: 18px; background: #F5F7FA; }
  .c-form__input, .c-form__select { font-size: 16px; padding: 12px; } /* iOS zoom prevention */
  .summary__image { width: 100%; max-width: 380px; margin: 0 auto 12px; }
  .summary__subtitle { margin-top: 8px; }
}
@media (max-width: 380px) {
  .title { font-size: 22px; }
  .container { padding: 0 16px; }
  .c-form__button { font-size: 15px; padding: 13px 14px; }
}