/* page-contact.php 用スタイル */

/* =========================
   Contact Form 7 (aim style)
========================= */
.wpcf7 {
  margin-top: 8px;
}

.cf7-grid {
  display: grid;
  gap: 12px;
}

.cf7-field {
  margin: 0;
  display: grid;
  gap: 8px;
}

.cf7-field--full {
  grid-column: 1 / -1;
}

.cf7-field label {
  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(18, 18, 18, .60);
  font-weight: 720;
}

.cf7-req {
  color: rgba(18, 18, 18, .45);
  font-weight: 700;
}

.wpcf7-form-control {
  width: 100%;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  padding: 12px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .04);
}

.wpcf7 textarea.wpcf7-form-control {
  min-height: 160px;
  resize: vertical;
}

.wpcf7-form-control:focus {
  border-color: rgba(18, 18, 18, .28);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

.cf7-actions {
  margin-top: 6px;
  display: grid;
}

.wpcf7-submit {
  border: 1px solid rgba(18, 18, 18, .18);
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 760;
  letter-spacing: .06em;
  background: rgba(18, 18, 18, .92);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

.wpcf7-submit:hover {
  transform: translateY(-1px);
  opacity: .92;
}

.wpcf7-submit:active {
  transform: translateY(0);
  opacity: .88;
}

/* messages */
.wpcf7-response-output {
  margin: 12px 0 0 !important;
  border-radius: 14px;
  padding: 12px 12px !important;
  font-size: 13.5px;
  line-height: 1.7;
  border: 1px solid rgba(18, 18, 18, .12) !important;
  background: rgba(255, 255, 255, .75);
}

.wpcf7-not-valid-tip {
  font-size: 12.5px;
  margin-top: 6px;
  color: rgba(18, 18, 18, .55);
}

/* 右カラムの高さ固定を解除（既存の420px想定を潰す） */
.card-inner {
  min-height: auto;
}

/* =========================
   Scroll hint (PC only)
========================= */
@media (min-width: 921px) {
  .col+.col {
    justify-content: flex-start;
  }

  .col+.col .block {
    position: relative;
    max-height: calc(100svh - 140px);
    overflow: auto;
    padding: 16px 16px 18px;
    scroll-behavior: smooth;
  }

  .wpcf7-form .cf7-actions {
    position: static;
    padding-top: 10px;
    background: transparent;
    backdrop-filter: none;
  }

  .col+.col .block::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 56px;
    margin-top: -56px;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, .85) 55%,
        rgba(255, 255, 255, .92));
  }

  .col+.col .block::before {
    content: "↓ scroll";
    position: sticky;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(18, 18, 18, .44);
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(18, 18, 18, .08);
    border-radius: 999px;
    padding: 7px 12px;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;
    z-index: 4;
    opacity: 1;
    transition: opacity .18s ease;
  }

  .col+.col .block.is-scrolled::before {
    opacity: 0;
  }

  .col+.col .block.is-scrolled::after {
    opacity: 0;
    transition: opacity .18s ease;
  }
}