/* contact.css — contact/index.html */
.headline {
  background-color: var(--color_white);
  padding: 3rem 0 6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headline_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.headline_title_ja {
  font-size: var(--fs-28-36);
  color: var(--color_blue);
}

.headline_title_en {
  font-size: var(--fs-18-20);
  color: var(--color_sky);
}

/* ----------------------------------------------
  お知らせ（高校生・大学生）
---------------------------------------------- */
.contact {
  padding: 0 0 6rem;
  position: relative;
  background-color: var(--color_blue-pale);
}

.contact.section_curving::before {
  background-color: var(--color_blue-pale);
}

.contact_inner {
  width: 100%;
  max-width: calc(1024px + 4rem);
  margin: 0 auto;
  padding: var(--pad-inner-pc);
}

@media (max-width: 768px) {
  .contact_inner {
    padding: var(--pad-inner-sp);
  }
}

.contact_intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact_notice {
  padding: 1.5rem 2rem;
  background: var(--color_white);
  border: 2px solid var(--color_blue);
  border-radius: 8px;
}

.contact_notice_title {
  margin: 0 0 0.75rem;
  font-size: var(--fs-18-22);
  font-weight: var(--font_bold);
}

.contact_notice_text {
  margin: 0;
  font-size: var(--fs-16-18);
  line-height: 1.8;
}

/* ----------------------------------------------
  フォーム共通
---------------------------------------------- */
.form {
  padding: 6rem 0 12rem;
}

@media (max-width: 768px) {
  .form {
    padding: 4rem 0 12rem;
  }
}

.form_inner {
  width: 100%;
  max-width: calc(1024px + 4rem);
  margin: 0 auto;
  padding: var(--pad-inner-pc);
}

@media (max-width: 768px) {
  .form_inner {
    padding: var(--pad-inner-sp);
  }
}

.form_intro {
  margin-bottom: 3rem;
}

.form_intro_title {
  margin: 0 0 1rem;
  font-size: var(--fs-16-18);
  line-height: 1.8;
}

.form_intro_list {
  margin: 0 0 1.5rem;
  list-style: disc;
  font-size: var(--fs-16-18);
  background: #F1F1F1;
  line-height: 1.8;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
}

.form_intro_list li {
  margin: 0;
}

.form_intro_text {
  margin: 0;
  font-size: var(--fs-16-18);
  line-height: 1.9;
}

.form_content {
  margin: 0;
}

.form_content_section + .form_content_section {
  margin-top: 3.5rem;
}

.form_content_heading {
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  font-size: var(--fs-20-28);
  font-weight: var(--font_bold);
  color: #333;
  line-height: 1.4;
  border-bottom: 10px solid var(--color_blue);
}

.form_content_section > .form_content_note {
  margin: 0 0 0.5rem;
  font-size: var(--fs-14-18);
  line-height: 1.8;
  color: #333;
}

.form_content_section > .form_content_note .form_content_item_badge {
  margin: 0 0.25em;
  vertical-align: middle;
}

/* ----------------------------------------------
  フォーム行（ラベル＋入力 横並び）
---------------------------------------------- */
.form_content_item {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid #b9e6fa;
}

.form_content_item--options,
.form_content_item--address,
.form_content_item:has(textarea) {
  align-items: flex-start;
}

.form_content_item--options .form_content_item_label,
.form_content_item--address .form_content_item_label,
.form_content_item:has(textarea) .form_content_item_label {
  padding-top: 0.75rem;
}

.form_content_item_field--stack {
  align-items: start;
  row-gap: 0.75rem;
}

.form_content_item_label {
  flex: 0 0 220px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-16-18);
  font-weight: var(--font_bold);
  color: #333;
  line-height: 1.6;
}

.form_content_item_field {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.form_content_item_badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.55em;
  font-size: 0.75rem;
  font-weight: var(--font_bold);
  line-height: 1.5;
  vertical-align: middle;
  border-radius: 4px;
}

.form_content_item_badge--required {
  color: var(--color_white);
  background: var(--color_red);
}

.form_content_item_badge--optional {
  color: var(--color_white);
  background: var(--color_navy);
}

.form_content_item_label .form_content_item_note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #666;
}

/* ----------------------------------------------
  入力欄
---------------------------------------------- */
.form_content_item_input,
.form_content_item_textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--fs-16-18);
  color: #333;
  background: var(--color_white);
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  line-height: 1.5;
}

/* 4分割グリッド内の横幅 */
.form_content_item_field > .form_content_item_input,
.form_content_item_field > .form_content_item_textarea,
.form_content_item_field > select.form_content_item_input {
  grid-column: 1 / -1;
}

.form_content_item_field > select.form_content_item_input--span2 {
  grid-column: span 2;
}

.form_content_item_field > select.form_content_item_input {
  appearance: none;
  cursor: pointer;
  background-color: var(--color_white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.form_content_item_field > .form_content_item_input--span3 {
  grid-column: span 3;
}

.form_content_item_field > .form_content_item_input--span2 {
  grid-column: span 2;
}

.form_content_item_field > .form_content_item_input--span1 {
  grid-column: span 1;
}

.form_content_item_search_btn {
  grid-column: span 2;
  padding: 1rem;
  font-size: 1rem;
  font-weight: var(--font_medium);
  color: var(--color_white);
  background: #555555;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form_content_item_search_btn:hover {
  background: #444444;
}

.form_content_item_cell {
  grid-column: span 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.form_content_item_cell--span2 {
  grid-column: span 2;
}

.form_content_item_cell .form_content_item_input {
  flex: 1;
  min-width: 0;
}

.form_content_item_input::placeholder,
.form_content_item_textarea::placeholder {
  color: #aaa;
}

.form_content_item_input:focus,
.form_content_item_textarea:focus {
  outline: none;
  border-color: var(--color_sky);
  box-shadow: 0 0 0 2px rgba(0, 160, 233, 0.15);
}

.form_content_item_textarea {
  min-height: 8rem;
  resize: vertical;
}

.form_content_item_unit {
  font-size: var(--fs-16-18);
  color: #333;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ----------------------------------------------
  ラジオボタン（ボックス型・2列グリッド）
---------------------------------------------- */
.form_content_item_field > .form_content_item_options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.form_content_item_options > li {
  margin: 0;
  min-width: 0;
}

.form_content_item_option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: var(--fs-16-18);
  font-weight: 400;
  color: #333;
  background: var(--color_white);
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.form_content_item_option:hover {
  border-color: #999;
}

.form_content_item_option:has(input:checked) {
  border-color: var(--color_blue);
  background: var(--color_blue-pale);
}

.form_content_item_option input[type="radio"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color_blue);
}

.form_content_item_option_text {
  line-height: 1.4;
}

/* ----------------------------------------------

個人情報の取扱いについて

---------------------------------------------- */
.form_privacy_lead {
  margin: 3rem 0 0 0;
  font-size: var(--fs-16-18);
  line-height: 1.8;
  color: #333;
}

.form_privacy_body {
  max-height: 30rem;
  margin: 3rem 0 0 0;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  font-size: var(--fs-15-17);
  line-height: 1.9;
  color: #333;
  background: var(--color_white);
  border: 1px solid #c8c8c8;
  border-radius: 6px;
}

.form_privacy_body h3 {
  margin: 1.5rem 0 0;
  font-size: var(--fs-16-18);
  font-weight: var(--font_bold);
  color: #333;
}

.form_privacy_body p {
  margin: 0.5rem 0 0;
}

.form_privacy_body p:first-of-type {
  margin-top: 0;
}

.form_privacy_body ul {
  margin: 0;
  padding-left: 1.5rem;
}

.form_privacy_consent {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 1.5rem 0 0 0;
  padding: 1.25rem 1.5rem;
  font-size: var(--fs-16-18);
  font-weight: var(--font_bold);
  color: #333;
  background: var(--color_blue-pale);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  user-select: none;
}

.form_privacy_consent:hover {
  border-color: #b9e6fa;
}

.form_privacy_consent:has(.form_privacy_consent_input:checked) {
  border-color: var(--color_blue);
  background: var(--color_sky-pale);
}

.form_privacy_consent_input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color_blue);
  cursor: pointer;
}

.form_privacy_consent_text {
  line-height: 1.5;
  pointer-events: none;
}

.form_privacy_note {
  font-size: var(--fs-16-18);
  line-height: 1.8;
  margin-top: 6rem;
}

@media (max-width: 768px) {
  .form_privacy_note {
    margin-top: 3rem;
  }
}

/* ----------------------------------------------
  送信ボタン
---------------------------------------------- */
.form_content_submit {
  margin-top: 6rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .form_content_submit {
    margin-top: 3rem;
  }
}

.form_content_submit_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  padding: 1.5rem 3.5rem;
  font-family: inherit;
  font-size: var(--fs-20-24);
  font-weight: var(--font_bold);
  line-height: 1.2;
  color: var(--color_blue);
  background: var(--color_white);
  border: 3px solid var(--color_blue);
  border-radius: 6px;
  box-shadow: 0 4px 0 #b0b0b0;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.form_content_submit_btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #999;
}

.form_content_submit_btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b0b0b0;
}

.form_content_submit_btn:disabled {
  color: #999999;
  background: #e8e8e8;
  border-color: #cccccc;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.form_content_submit_btn:disabled .form_content_submit_btn_arrow {
  background: #999999;
}

.form_content_submit_btn_text {
  text-align: center;
}

.form_content_submit_btn_arrow {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color_blue);
  transform: translateY(-50%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----------------------------------------------
  レスポンシブ
---------------------------------------------- */
@media (max-width: 768px) {
  .form_content_item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .form_content_item_label {
    flex: none;
    width: 100%;
  }

  .form_content_item_field {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  /* 3列すべて（全幅） */
  .form_content_item_field > .form_content_item_input:not([class*="--span"]),
  .form_content_item_field > .form_content_item_textarea,
  .form_content_item_field > select.form_content_item_input:not([class*="--span"]),
  .form_content_item_field > .form_content_item_input--span3,
  .form_content_item_field > .form_content_item_options {
    grid-column: 1 / -1;
  }

  /* 2列分 */
  .form_content_item_field > .form_content_item_input--span2,
  .form_content_item_field > select.form_content_item_input--span2 {
    grid-column: span 2;
  }

  /* 1列分 */
  .form_content_item_field > .form_content_item_input--span1,
  .form_content_item_cell {
    grid-column: span 1;
  }

  .form_content_item_search_btn {
    grid-column: span 1;
  }

  .form_content_item_field > .form_content_item_unit {
    grid-column: span 2;
    align-self: center;
  }

  .form_content_item_textarea,
  .form_content_item_field > .form_content_item_textarea {
    width: 100%;
    max-width: 100%;
  }

  .form_content_item_options {
    grid-template-columns: 1fr;
  }
}