:root {
  --blue: #0754b7;
  --navy: #17233c;
  --pale-blue: #edf7fb;
  --orange: #ff6900;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--navy);
  background: #f3f5f7;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

.lp {
  width: min(100%, 1000px);
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 28px rgb(20 45 80 / 8%);
}

.section-link,
.lp picture,
.lp img { display: block; }

.section-link { text-decoration: none; }

.image-with-buttons {
  position: relative;
}

.image-button {
  position: absolute;
  z-index: 2;
  display: block;
  transition: filter .2s ease, transform .2s ease;
}

.image-button:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.image-button--schedule {
  top: 38.73%;
  left: 65.9%;
  width: 32.9%;
}

.image-button--date {
  top: 73.97%;
  width: 20.2%;
}

.image-button--date-1 { left: 12.3%; }
.image-button--date-2 { left: 39.8%; }
.image-button--date-3 { left: 67.7%; }

.image-button--closing {
  top: 38.73%;
  left: 50.8%;
  width: 30.4%;
}

.lp img {
  width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq {
  padding: 62px 46px 72px;
  background: #fff;
}

.faq__inner { max-width: 704px; margin-inline: auto; }
.faq h2 { margin: 0 0 28px; color: #242c3e; font-size: 32px; letter-spacing: .04em; text-align: center; }
.faq__list { display: grid; gap: 18px; }

.faq__item {
  overflow: hidden;
  background: #fff;
  border: 2px solid #e3e3e3;
  border-radius: 8px;
}

.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 12px 58px 12px 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > span:first-child,
.faq__answer > span {
  flex: 0 0 auto;
  color: #0754b7;
  font-family: Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.faq__question { color: #242c3e; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 4px solid #aaa;
  border-bottom: 4px solid #aaa;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.faq__item[open] summary::after { transform: translateY(-25%) rotate(225deg); }

.faq__answer {
  display: flex;
  gap: 18px;
  padding: 4px 58px 40px 16px;
}

.faq__answer > span { color: #ff6689; }
.faq__answer p {
  margin: 0;
  color: #98704f;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 767px) {
  body { background: #fff; }
  .lp { box-shadow: none; }
  .faq { padding: 42px 20px 56px; }
  .faq h2 { margin-bottom: 24px; font-size: 27px; }
  .faq__list { gap: 12px; }
  .faq__item summary { min-height: 62px; padding: 12px 46px 12px 14px; gap: 12px; font-size: 15px; }
  .faq__item summary > span:first-child,
  .faq__answer > span { font-size: 34px; }
  .faq__item summary::after { right: 18px; width: 8px; height: 8px; border-width: 0 3px 3px 0; }
  .faq__answer { gap: 12px; padding: 2px 18px 24px 14px; }
  .faq__answer p { font-size: 14px; line-height: 1.55; }
  .faq__question-break { display: none; }
  .image-button--schedule {
    top: 60.92%;
    left: 2.49%;
    width: 95.02%;
  }

  .image-button--date {
    left: 16.04%;
    width: 66.67%;
  }

  .image-button--date-1 { top: 45.51%; }
  .image-button--date-2 { top: 67.31%; }
  .image-button--date-3 { top: 88.98%; }

  .image-button--closing {
    top: 56.27%;
    left: 4.48%;
    width: 90.8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .image-button { transition: none; }
}