@charset "UTF-8";
.p-faq {
  --faq-inner: calc(1040 * var(--to-rem));
  --faq-accent: #2f3e5c;
  overflow-x: clip;
  background: var(--color-white);
  color: #1f1f1f;
  font-family: "Noto Sans JP", sans-serif;
}

.p-faq__inner {
  width: 100%;
  max-width: var(--faq-inner);
  margin-inline: auto;
}

.p-faq__intro {
  padding-block-start: calc(64 * var(--to-rem));
  text-align: center;
}

.p-faq__intro-text {
  color: #555;
  font-size: calc(16 * var(--to-rem));
  line-height: 2.1;
}

.p-faq__tabs {
  display: flex;
  gap: calc(12 * var(--to-rem));
  justify-content: center;
  margin-block-start: calc(44 * var(--to-rem));
}

.p-faq__tab {
  padding: calc(13 * var(--to-rem)) calc(26 * var(--to-rem));
  border: 1px solid #dcd8d4;
  background: var(--color-white);
  color: #555;
  font-family: inherit;
  font-size: calc(14 * var(--to-rem));
  line-height: 1.5;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--duration), border-color var(--duration), background-color var(--duration);
}

.p-faq__tab.is-active {
  border-color: var(--faq-accent);
  background: var(--faq-accent);
  color: var(--color-white);
}

.p-faq__tab:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: calc(3 * var(--to-rem));
}

.p-faq__content {
  padding-block: calc(52 * var(--to-rem)) calc(120 * var(--to-rem));
}

.p-faq__panel[hidden] {
  display: none;
}

.p-faq__list {
  border-block-start: 1px solid #e2e2e2;
}

.p-faq__item {
  border-block-end: 1px solid #e6e6e6;
}

.p-faq__question {
  display: flex;
  gap: calc(20 * var(--to-rem));
  align-items: flex-start;
  width: 100%;
  padding: calc(28 * var(--to-rem)) calc(4 * var(--to-rem));
  list-style: none;
  cursor: pointer;
}

.p-faq__question::-webkit-details-marker {
  display: none;
}

.p-faq__question-mark,
.p-faq__answer-mark {
  flex: none;
  color: var(--faq-accent);
  font-family: Jost, sans-serif;
  font-size: calc(18 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.p-faq__question-text {
  flex: 1;
  color: #1f1f1f;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.6;
  text-align: start;
  transition: color var(--duration);
}

.p-faq__toggle-icon {
  position: relative;
  flex: none;
  width: calc(22 * var(--to-rem));
  height: calc(22 * var(--to-rem));
  margin-block-start: calc(2 * var(--to-rem));
}

.p-faq__toggle-icon::before,
.p-faq__toggle-icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(14 * var(--to-rem));
  height: 1px;
  background: #9a9a9a;
  transform: translate(-50%, -50%);
  transition: background-color var(--duration), transform var(--duration);
}

.p-faq__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.p-faq__item[open] .p-faq__toggle-icon::before {
  background: var(--faq-accent);
}

.p-faq__item[open] .p-faq__toggle-icon::after {
  background: var(--faq-accent);
  transform: translate(-50%, -50%) rotate(0deg);
}

.p-faq__answer-panel {
  overflow: hidden;
}

.p-faq__answer {
  display: flex;
  gap: calc(20 * var(--to-rem));
  padding: 0 calc(4 * var(--to-rem)) calc(30 * var(--to-rem));
}

.p-faq__answer-mark {
  color: #b0803a;
}

.p-faq__answer-text {
  flex: 1;
  color: #666;
  font-size: calc(15 * var(--to-rem));
  line-height: 2;
}

.p-faq__contact {
  padding-block: calc(100 * var(--to-rem));
  background: var(--faq-accent);
  text-align: center;
}

.p-faq__contact-label {
  color: #aeb8ca;
  font-family: Jost, sans-serif;
  font-size: calc(13 * var(--to-rem));
  line-height: 1.5;
  letter-spacing: 0.28em;
}

.p-faq__contact-title {
  margin-block-start: calc(16 * var(--to-rem));
  color: var(--color-white);
  font-size: calc(26 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.p-faq__contact-text {
  margin-block-start: calc(20 * var(--to-rem));
  color: #dfe3ea;
  font-size: calc(14 * var(--to-rem));
  line-height: 2;
}

.p-faq__contact-mail::before {
  content: "　";
}

.p-faq__contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--to-rem));
  justify-content: center;
  margin-block-start: calc(32 * var(--to-rem));
}

.p-faq__contact-link {
  display: inline-flex;
  gap: calc(10 * var(--to-rem));
  align-items: center;
  padding: calc(15 * var(--to-rem)) calc(32 * var(--to-rem));
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-white);
  font-size: calc(14 * var(--to-rem));
  line-height: 1.5;
  letter-spacing: 0.06em;
  transition: color var(--duration), border-color var(--duration), background-color var(--duration);
}

.p-faq__contact-link svg {
  stroke: var(--color-white);
}

@media (any-hover: hover) {
  .p-faq__tab:not(.is-active):hover {
    border-color: var(--faq-accent);
    color: var(--faq-accent);
  }
  .p-faq__item:hover .p-faq__question-text {
    color: var(--faq-accent);
  }
  .p-faq__contact-link:hover {
    border-color: var(--faq-accent);
    background: var(--faq-accent);
    color: var(--color-white);
  }
}
@media screen and (max-width: 767px) {
  .p-faq__inner {
    padding-inline: calc(22 * var(--to-rem));
  }
  .p-faq__intro {
    padding-block-start: calc(56 * var(--to-rem));
  }
  .p-faq__tabs {
    flex-wrap: wrap;
  }
  .p-faq__tab {
    flex: 1 1 calc(140 * var(--to-rem));
    padding-inline: calc(18 * var(--to-rem));
  }
  .p-faq__content {
    padding-block-end: calc(76 * var(--to-rem));
  }
  .p-faq__question {
    gap: calc(14 * var(--to-rem));
  }
  .p-faq__question-text {
    font-size: calc(15 * var(--to-rem));
  }
  .p-faq__answer {
    gap: calc(14 * var(--to-rem));
  }
  .p-faq__contact {
    padding-block: calc(76 * var(--to-rem));
  }
  .p-faq__contact-title {
    font-size: calc(24 * var(--to-rem));
  }
  .p-faq__contact-mail {
    display: block;
  }
  .p-faq__contact-mail::before {
    content: none;
  }
  .p-faq__contact-mail-label {
    display: block;
  }
}