/* ============================================================
   utility.css — お問い合わせ／プライバシー／商標／サイトマップ／404
   ============================================================ */

.utility-page::before,
.not-found-page::before {
  display: none;
}

html {
  scroll-behavior: auto;
}

.utility-hero {
  min-height: 500px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--blue);
}

.utility-hero img,
.utility-hero-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.utility-hero img {
  object-fit: cover;
  object-position: center;
}

.utility-hero-overlay {
  width: min(52vw, 720px);
  right: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 92%, transparent) 0%, color-mix(in srgb, var(--blue) 86%, transparent) 58%, color-mix(in srgb, var(--blue) 46%, transparent) 82%, transparent 100%);
}

.utility-hero-inner,
.utility-inner {
  width: var(--page);
  margin: 0 auto;
}

.utility-hero-inner {
  position: relative;
  z-index: 2;
}

.utility-hero-inner > p {
  max-width: 450px;
  margin: 0 0 26px 52px;
  color: color-mix(in srgb, var(--white) 82%, transparent);
  font-size: var(--fs-body-f);
  font-weight: 700;
}

.utility-hero-title,
.utility-heading {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 36px;
  align-items: stretch;
}

.utility-hero-title .heading-ornament,
.utility-heading .heading-ornament {
  width: 16px;
  height: 100%;
  min-height: 82px;
  background: var(--blue);
}

.utility-hero-title .heading-ornament {
  min-height: 96px;
}

.utility-hero-title .heading-ornament::before,
.utility-heading .heading-ornament::before {
  width: 38px;
  height: 12px;
  left: 0;
  top: 0;
  background: var(--yellow);
}

.utility-hero-title .heading-ornament::after,
.utility-heading .heading-ornament::after {
  display: none;
}

.utility-hero h1 {
  max-width: 520px;
  margin: 0;
  color: var(--white);
  font-size: var(--fs-display-c);
  line-height: 1.12;
  letter-spacing: -0.06em;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--ink) 38%, transparent);
}

.utility-section {
  padding: 120px 0 126px;
}

.utility-white {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--blue) 2.5%, transparent) 0, color-mix(in srgb, var(--blue) 2.5%, transparent) 1px, transparent 1px, transparent 14px),
    var(--white);
}

.utility-beige {
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 24%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 2.2%, transparent) 0, color-mix(in srgb, var(--ink) 2.2%, transparent) 1px, transparent 1px, transparent 16px),
    var(--beige-light);
}

.utility-heading {
  margin-bottom: 58px;
}

.utility-heading h2 {
  margin: 0;
  font-size: var(--fs-h2-g);
  line-height: 1.45;
  letter-spacing: -0.04em;
}

.utility-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.contact-option {
  min-height: 360px;
  padding: 42px 30px;
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  border-radius: var(--radius-card);
  border-top: 10px solid var(--yellow);
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.contact-option h3 {
  margin: 0 0 24px;
  font-size: var(--fs-h3-f);
  line-height: 1.5;
}

.contact-option p {
  margin: 0;
  color: var(--muted);
}

.contact-option a {
  margin-top: auto;
  color: var(--blue);
  font-weight: 700;
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 78px;
  align-items: start;
}

.contact-form-intro h2 {
  margin: 0 0 24px;
  font-size: var(--fs-h2-g);
  line-height: 1.45;
}

.contact-form-intro p {
  margin: 0;
  color: var(--muted);
}

.contact-form {
  padding: 54px 58px 60px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  background: var(--white);
}

.contact-form fieldset,
.form-field {
  margin: 0 0 34px;
  padding: 0;
  display: block;
  border: 0;
}

.contact-form legend,
.form-field > span {
  margin-bottom: 12px;
  display: block;
  font-weight: 700;
}

.contact-form em {
  margin-left: 8px;
  color: var(--blue);
  font-size: var(--fs-ui-c);
  font-style: normal;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.radio-grid label {
  min-height: 62px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--blue-pale);
  cursor: pointer;
}

.radio-grid input {
  flex: none;
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  font: inherit;
}

.form-field textarea {
  min-height: 210px;
  resize: vertical;
}

.privacy-check {
  margin: 4px 0 30px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.privacy-check a {
  color: var(--blue);
  text-decoration: underline;
}

.form-submit {
  width: 100%;
  min-height: 74px;
  color: var(--white);
  background: var(--blue);
}

.form-field-hidden {
  position: absolute;
  left: -9999px;
}

.policy-lead {
  max-width: 900px;
  margin: 0 0 70px;
  font-size: var(--fs-body-c);
  line-height: 2.1;
}

.policy-toc {
  margin: 0 0 72px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 40px;
  border-top: 8px solid var(--yellow);
  background: var(--blue-pale);
}

.policy-toc a {
  color: var(--blue);
  font-weight: 700;
}

.policy-article {
  margin: 0 0 28px;
  padding: 62px 64px;
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr;
  column-gap: 44px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  background: var(--white);
}

.policy-article:nth-of-type(even) {
  background: var(--beige-light);
}

.policy-article h2,
.policy-article p,
.policy-article ul {
  margin-right: 0;
  margin-left: 0;
}

.policy-article h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0 0 28px;
  position: relative;
  border-left: 10px solid var(--blue);
  font-size: var(--fs-h4-b);
  line-height: 1.55;
}

.policy-article h2::before {
  width: 34px;
  height: 9px;
  position: absolute;
  top: 0;
  left: -10px;
  content: "";
  background: var(--yellow);
}

.policy-article > p,
.policy-article > ul,
.policy-article > .policy-contact {
  grid-column: 2;
}

.policy-article > p:first-of-type,
.policy-article > ul:first-of-type {
  margin-top: 0;
}

.policy-article p,
.policy-article li {
  line-height: 2;
}

.policy-contact {
  padding: 34px 40px;
  background: var(--blue-pale);
}

.sitemap-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sitemap-group {
  padding: 44px 46px 50px;
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  background: var(--white);
}

.sitemap-group h2 {
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 4px solid var(--yellow);
  font-size: var(--fs-h3-g);
}

.sitemap-group > a,
.sitemap-group li a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.sitemap-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-group code {
  color: var(--blue);
  font-family: inherit;
  font-size: var(--fs-ui-c);
  font-weight: 700;
}

.not-found-main {
  /* iOS Safari は URLバーの伸縮で 100vh が実ビューポートより大きくなる。
     dvh 対応環境では dvh を使い、未対応環境は従来の vh にフォールバックする。 */
  min-height: calc(100vh - 82px);
  min-height: calc(100dvh - 82px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--blue);
}

.not-found-main img,
.not-found-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.not-found-main img {
  object-fit: cover;
}

.not-found-overlay {
  width: min(48vw, 660px);
  right: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 96%, transparent) 0%, color-mix(in srgb, var(--blue) 88%, transparent) 68%, color-mix(in srgb, var(--blue) 40%, transparent) 86%, color-mix(in srgb, var(--blue) 0%, transparent) 100%);
}

.not-found-inner {
  width: var(--page);
  margin: 0 auto;
  padding: 100px 0;
  position: relative;
  z-index: 1;
  color: var(--white);
}

.not-found-inner strong {
  display: block;
  color: var(--yellow);
  font-size: var(--fs-display);
  line-height: 0.9;
}

.not-found-inner h1 {
  margin: 36px 0 18px;
  font-size: var(--fs-h1-f);
  line-height: 1.45;
}

.not-found-inner p {
  margin: 0;
  color: color-mix(in srgb, var(--white) 80%, transparent);
}

.not-found-actions {
  margin-top: 38px;
  display: flex;
  gap: 14px;
}

.not-found-actions .button:first-child {
  color: var(--ink);
  background: var(--yellow);
}

.not-found-actions .button:last-child {
  color: var(--white);
  border-color: var(--white);
  background: color-mix(in srgb, var(--blue-deep) 88%, transparent);
}

.thanks-main {
  min-height: 720px;
  padding: 100px 0;
  display: flex;
  align-items: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--blue) 2.5%, transparent) 0, color-mix(in srgb, var(--blue) 2.5%, transparent) 1px, transparent 1px, transparent 14px),
    var(--white);
}

.thanks-inner {
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px;
  text-align: center;
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  background: var(--white);
}

.thanks-inner h1 {
  margin: 0 0 24px;
  font-size: var(--fs-h2-d);
}

.thanks-inner p {
  margin: 0 0 34px;
  color: var(--muted);
}

.thanks-inner .button {
  color: var(--white);
  background: var(--blue);
}

@media (max-width: 1024px) {
  .contact-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .utility-hero {
    align-items: flex-end;
    padding-bottom: 34px;
  }

  .contact-form-layout,
.sitemap-groups {
    grid-template-columns: 1fr;
  }

  .contact-form-layout {
    gap: 42px;
  }
}

@media (max-width: 768px) {
  .utility-hero {
    min-height: 360px;
  }

  .utility-hero-overlay {
    width: 100%;
    height: 100%;
    top: auto;
    bottom: 0;
    background: linear-gradient(0deg, color-mix(in srgb, var(--blue) 94%, transparent) 0%, color-mix(in srgb, var(--blue) 92%, transparent) 52%, color-mix(in srgb, var(--blue) 86%, transparent) 64%, color-mix(in srgb, var(--blue) 30%, transparent) 77%, transparent 89%);
  }

  .utility-hero-inner > p {
      color: var(--white);
    margin-left: 0;
    font-size: var(--fs-sp-ui-c);
  }

  .utility-hero h1 {
    font-size: var(--fs-sp-h2-f);
  }

  .utility-section {
    padding: 86px 0 92px;
  }

  .utility-heading {
    margin-bottom: 38px;
    gap: 14px;
  }

  .utility-heading h2,
.contact-form-intro h2 {
    font-size: var(--fs-sp-h3-e);
  }

  .contact-options,
.form-row,
.radio-grid,
.policy-toc {
    grid-template-columns: 1fr;
  }

  .contact-option {
    min-height: 300px;
  }

  .contact-form {
    padding: 38px 24px 44px;
  }

  .policy-toc {
    padding: 28px 24px;
  }

  .policy-article {
    padding: 42px 26px;
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .policy-article h2 {
    margin-bottom: 0;
    font-size: var(--fs-sp-h4-b);
  }

  .policy-article > p,
.policy-article > ul,
.policy-article > .policy-contact {
    grid-column: 1;
  }

  .sitemap-group {
    padding: 34px 26px 40px;
  }

  .sitemap-group > a,
.sitemap-group li a {
    flex-direction: column;
    gap: 2px;
  }

  .not-found-main {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
  }

  .not-found-overlay {
    width: 100%;
    background: linear-gradient(0deg, color-mix(in srgb, var(--blue) 95%, transparent) 0%, color-mix(in srgb, var(--blue) 92%, transparent) 58%, color-mix(in srgb, var(--blue) 78%, transparent) 80%, color-mix(in srgb, var(--blue) 24%, transparent) 94%, color-mix(in srgb, var(--blue) 0%, transparent) 100%);
  }

  .not-found-inner p {
    color: var(--white);
  }

  .not-found-actions {
    flex-direction: column;
  }

  .thanks-inner {
    padding: 52px 26px;
  }

  .thanks-inner h1 {
    font-size: var(--fs-sp-h3-d);
  }
}