html {
  scroll-behavior: smooth;
}

body.hp-site {
  --bioquon-accent: #23a5bf;
  margin: 0;
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  background: #fff;
}

.admin-bar header.fixed {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar header.fixed {
    top: 46px;
  }
}

.bioquon-contact-form input,
.bioquon-contact-form textarea,
.bioquon-contact-form select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
}

.bioquon-contact-form input[type="submit"],
.bioquon-contact-form button[type="submit"] {
  cursor: pointer;
  border: 0;
  background: var(--bioquon-accent);
  color: #fff;
  font-weight: 700;
}

.bioquon-contact-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.bioquon-contact-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #7a8390;
  cursor: pointer;
}

.bioquon-contact-form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin-top: 0.125rem;
  padding: 0;
  border-radius: 0.125rem;
  accent-color: var(--bioquon-accent);
}

.bioquon-rich-text strong {
  color: #4a4a4a;
  font-weight: 700;
}

.bioquon-page-main {
  padding-top: 10rem !important;
}

body.admin-bar .bioquon-page-main {
  padding-top: 12rem !important;
}

@media (min-width: 768px) {
  .bioquon-page-main {
    padding-top: 11.5rem !important;
  }
}

.bioquon-page-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #4a4a4a;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.bioquon-page-content p,
.bioquon-page-content li {
  color: #5f6875;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  line-height: 1.9;
}

.bioquon-page-content p + p {
  margin-top: 1rem;
}

.bioquon-page-content ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.bioquon-page-content li + li {
  margin-top: 0.35rem;
}

.bioquon-page-content .bioquon-policy-date {
  margin-top: 2.5rem;
  text-align: right;
}

.bioquon-accent-text {
  color: var(--bioquon-accent) !important;
}

.bioquon-accent-bg {
  background-color: var(--bioquon-accent) !important;
}

.bioquon-accent-hover:hover {
  color: var(--bioquon-accent) !important;
}

.bioquon-accent-border-hover:hover {
  border-color: var(--bioquon-accent) !important;
}

.bioquon-hero {
  aspect-ratio: var(--bioquon-hero-ratio, 1920 / 680);
  height: auto;
  background: #fff;
}

.bioquon-hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

.bioquon-section--compact {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.bioquon-section--wide {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

@media (min-width: 768px) {
  .bioquon-section--compact {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .bioquon-section--wide {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }
}

@media (min-width: 1024px) {
  .bioquon-service-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .bioquon-service-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.bioquon-media-field img {
  display: block;
  width: 120px;
  height: 80px;
  margin: 8px 0;
  object-fit: cover;
  border: 1px solid #ccd0d4;
}

/* Bio QUON contact form adjustments */
#contact .bioquon-contact-form,
#contact .bioquon-contact-form label,
#contact .bioquon-contact-form input,
#contact .bioquon-contact-form textarea,
#contact .bioquon-contact-form select,
#contact .bioquon-contact-form button {
  font-family: "Noto Sans JP", sans-serif;
}

#contact .bioquon-contact-form form.wpcf7-form {
  display: grid;
  gap: 22px;
}

#contact .bioquon-contact-form form.wpcf7-form > p {
  margin: 0;
}

#contact .bioquon-contact-form label {
  display: block;
  color: #4a4a4a;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.7;
}

#contact .bioquon-contact-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 10px;
}

#contact .bioquon-contact-form input:not([type="submit"]):not([type="checkbox"]),
#contact .bioquon-contact-form textarea,
#contact .bioquon-contact-form select {
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #4a4a4a;
  font-size: 0.95rem;
  line-height: 1.7;
}

#contact .bioquon-contact-form textarea {
  min-height: 180px;
}

#contact .bioquon-contact-form input:not([type="submit"]):not([type="checkbox"]):focus,
#contact .bioquon-contact-form textarea:focus,
#contact .bioquon-contact-form select:focus {
  border-color: var(--bioquon-accent);
  box-shadow: 0 0 0 3px rgba(35, 165, 191, 0.15);
  outline: none;
}

#contact .bioquon-contact-form .wpcf7-acceptance label {
  gap: 10px;
  color: #5f6875;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7;
}

#contact .bioquon-contact-form .wpcf7-submit {
  display: block;
  min-height: 48px;
  padding: 14px 32px;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}

#contact .bioquon-contact-form .wpcf7-submit:hover {
  opacity: 0.85;
}

#contact .bioquon-contact-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8rem;
}

#contact .bioquon-contact-form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 14px 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;
}

@media (min-width: 640px) {
  #contact .bioquon-contact-form .wpcf7-submit {
    width: auto;
    min-width: 220px;
    margin: 4px auto 0;
  }
}

/* Bio QUON mobile MV image adjustment */
@media (max-width: 639px) {
  #mv .bioquon-hero {
    aspect-ratio: auto;
    height: clamp(200px, 56vw, 240px);
  }

  #mv .bioquon-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% center;
  }
}