/**
 * File Name: contact-form.css
 * 2026-07-08 | B2B Full-Width Textarea & Centered Agree Layout
 */

/* ==============================================================================
 * CONTACT SECTION (お問い合わせフォーム セクション)
 * ============================================================================== */
.p-contact-section {
  width: 100%;
  padding: 60px 20px;
  background-color: var(--upper-color-1, #1d3d5e);
  color: #333333;
  font-family: "Helvetica Neue", Arial, "BIZ UDPGothic", "Meiryo", sans-serif;
  box-sizing: border-box;
}

.p-contact-section *,
.p-contact-section *::before,
.p-contact-section *::after {
  box-sizing: border-box;
}

.p-contact-section__container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 45px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 25, 41, 0.25);
}

.p-contact-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.p-contact-section__main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--upper-color-1, #1d3d5e);
  margin: 0 0 6px 0;
  letter-spacing: 0.08em;
}

.p-contact-section__sub-title {
  font-size: 0.85rem;
  color: var(--upper-color-3, #7b9098);
  font-weight: 500;
  margin: 0;
}

.p-contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.p-contact-form__label-col {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.p-contact-form__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--upper-color-2, #2b4365);
  line-height: 1.4;
}

/* 必須バッジ */
.p-contact-form__badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.p-contact-form__badge--required {
  background-color: #e53e3e;
  color: #ffffff;
}

.p-contact-form__input-col {
  width: 100%;
}

.p-contact-form__input {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid var(--upper-color-4, #a7bcc7);
  border-radius: 6px;
  padding: 0 16px;
  font-size: 1rem;
  color: #333333;
  outline: none;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.p-contact-form__input:focus,
.p-contact-form__textarea:focus {
  border-color: var(--upper-color-2, #2b4365);
  box-shadow: 0 0 0 3px rgba(184, 208, 237, 0.5);
}

.p-contact-form__input:hover,
.p-contact-form__textarea:hover {
  border-color: var(--upper-color-3, #7b9098);
}

.p-contact-form__zip-group,
.p-contact-form__tel-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.p-contact-form__input--zip1,
.p-contact-form__input--tel {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.p-contact-form__input--zip2 {
  width: 100%;
  flex: 1.3;
  min-width: 0;
}

.p-contact-form__hyphen {
  font-size: 1rem;
  font-weight: normal;
  color: var(--upper-color-3, #7b9098);
  user-select: none;
  flex-shrink: 0;
}

.p-contact-form__textarea {
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid var(--upper-color-4, #a7bcc7);
  border-radius: 6px;
  padding: 16px;
  font-size: 1rem;
  color: #333333;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.p-contact-section ::placeholder {
  color: var(--upper-color-4, #a7bcc7);
  opacity: 0.8;
}

/* ==============================================================================
 * CHECKBOX & AGREE STYLES (チェックボックス・同意エリア)
 * ============================================================================== */
.p-contact-form__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 5px 0;
}

.p-contact-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.p-contact-form__checkbox-input {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 16px !important;
  height: 16px !important;
  margin: 3px 0 0 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
}

.p-contact-form__checkbox-text {
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.5;
}

/* 同意エリア独自スタイル：中央配置用 */
.p-contact-form__agree-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.p-contact-form__agree-box {
  width: 100%;
  max-width: 600px; /* 広すぎず狭すぎない絶妙なボリューム感に固定 */
  background-color: #f7fafc;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid var(--upper-color-4, #a7bcc7);
}

.p-contact-form__checkbox-label--agree {
  display: flex;
  align-items: flex-start;
}

.p-contact-form__policy-link {
  color: #1d3d5e;
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.2s ease;
}

.p-contact-form__policy-link:hover {
  color: #2b4365;
}

.u-pc-only {
  display: none;
}

/* ==============================================================================
 * MEDIA QUERIES
 * ============================================================================== */

/* スマホ横向き */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .p-contact-section {
    padding: 30px 20px;
  }
  .p-contact-section__container {
    padding: 30px 20px;
  }
  .p-contact-section__header {
    margin-bottom: 25px;
  }
  .p-contact-form {
    gap: 20px;
  }
  .p-contact-form__textarea {
    height: 120px;
  }
}

/* タブレット・標準PCサイズ */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .p-contact-section {
    padding: 100px 40px;
  }
  .p-contact-section__container {
    padding: 65px 60px;
  }
  .p-contact-section__header {
    margin-bottom: 55px;
  }
  .p-contact-section__main-title {
    font-size: 2.2rem;
  }

  /* 通常行はきれいに左右分割（32% : 68%） */
  .p-contact-form__row {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .p-contact-form__row--checkbox {
    align-items: flex-start !important;
  }

  /* お問い合わせ内容（フル幅指定）はPCでも上下2段を維持 */
  .p-contact-form__row--fullwidth {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  .p-contact-form__row--fullwidth .p-contact-form__label-col {
    width: 100%;
    flex: 0 0 100%;
    justify-content: flex-start;
    gap: 12px;
  }
  .p-contact-form__row--fullwidth .p-contact-form__input-col {
    width: 100%;
    flex: 0 0 100%;
  }

  .p-contact-form__label-col {
    width: 32%;
    flex: 0 0 32%;
    padding-right: 25px;
    justify-content: space-between;
    align-items: center;
  }
  .p-contact-form__input-col {
    width: 68%;
    flex: 0 0 68%;
  }

  .p-contact-form__input--zip1 {
    width: 120px;
    flex: 0 0 120px;
  }
  .p-contact-form__input--zip2 {
    width: 160px;
    flex: 0 0 160px;
  }
  .p-contact-form__input--tel {
    width: 110px;
    flex: 0 0 110px;
  }
  .p-contact-form__zip-group,
  .p-contact-form__tel-group {
    gap: 12px;
  }

  .u-pc-only {
    display: inline-block;
  }
}

/* 大型デスクトップサイズ */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  .p-contact-section {
    padding: 120px 40px;
  }
}