/* ==========================================================================
   Compass Circle page (Figma node 99:347 "COMPASSS CIRCLE")
   ========================================================================== */

/* Figma: ink幅 147.5 / 大文字高 10.0 */
.page-label {
  font-size: 14px;
  letter-spacing: 1.7px;
}

/* 先方指示(docs/リンク修正指示0919.pdf p.3「ロゴ全体右に移動」)。
   図の移動先の左端が、下の区切り線(.circle-section の border-top)の左端と
   一致していたため、ロゴを本文と同じ980pxカラムに載せて左端を揃える。
   .container のガター(62px)だけ内側にあった従来より約230px右へ寄る。 */
.circle-hero {
  max-width: 980px;
  margin-inline: auto;
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

.circle-hero__logo {
  max-width: 597px;
  margin-bottom: 16px;
}

.circle-hero__logo img {
  width: 100%;
  height: auto;
}

.circle-sections {
  /* Figma: content column 856px (+ container gutter 62px x2) */
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 6vw, 72px);
  --circle-indent: 60px;
}

.circle-section {
  border-top: 1px solid var(--color-border);
  padding-block: clamp(32px, 5vw, 56px);
}

.circle-section__heading {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 0;
}

/* 2つ目以降の見出しブロック(区切り線なしのサブブロック) */
.circle-section__body + .circle-section__heading {
  margin-top: 88px;
}

.circle-section__heading img {
  width: 40px;
  height: auto;
  margin-top: 8px;
  flex-shrink: 0;
}

.circle-section__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 45px);
  line-height: 1.3;
  letter-spacing: -0.05em;
  margin-top: 0;
}

/* 本文・フォームは見出しテキストに揃える(肉球アイコンは左にぶら下がる) */
.circle-section__body,
.circle-join__form,
.circle-join__label,
.circle-join__note {
  margin-left: var(--circle-indent, 0px);
}

.circle-section__body p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 30px;
}

.circle-section__body p:last-child {
  margin-bottom: 0;
}

.circle-join {
  padding-top: clamp(32px, 5vw, 56px);
}

.circle-join__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  margin-top: 48px;
  margin-bottom: 12px;
}

.circle-join__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-bottom: 24px;
}

.circle-join__form input,
.circle-join__form button {
  border: 1px solid var(--color-border);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.25;
  background: transparent;
  box-sizing: border-box;
  height: 54px;
}

.circle-join__form button {
  margin-left: -1px;
  padding-inline: 36px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.circle-join__form [type="submit"]:enabled {
  cursor: pointer;
}

.circle-join__form [type="submit"]:enabled:hover {
  opacity: 0.6;
}

.circle-join__form [type="submit"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.circle-join__note {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .circle-sections {
    --circle-indent: 0px;
  }
  .circle-join__form {
    grid-template-columns: 1fr;
  }
  .circle-join__form button {
    margin-left: 0;
    margin-top: -1px;
  }
  .circle-section__body + .circle-section__heading {
    margin-top: 48px;
  }
}