/* FAQ Section Styles - Extracted from external.css */

/* PC Version - Shows by default */
.section9.pc,
.section10.pc {
  display: flex;
  padding: 80px 120px 80px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 56px;
}

/* Hide PC version on mobile */
@media screen and (max-width: 499px) {
  .section9.pc,
  .section10.pc {
    display: none;
  }
}

/* SP Version - Hidden by default */
.section9.sp,
.section10.sp {
  display: none;
}

/* Show SP version only on mobile */
@media screen and (max-width: 499px) {
  .section9.sp,
  .section10.sp {
    display: flex;
    padding: 64px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
}

/* Tablet adjustments for PC version */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section9.pc,
  .section10.pc {
    width: 100%;
    padding: 40px 20px;
  }
}

/* Main title styles */
.text, .section9 .title, .section10 .title, .section9 .qaGroup .qa .caption,
.section9 .qaGroup .notice .caption,
.section9 .noticeGroup .qa .caption,
.section9 .noticeGroup .notice .caption,
.section10 .qaGroup .qa .caption,
.section10 .qaGroup .notice .caption,
.section10 .noticeGroup .qa .caption,
.section10 .noticeGroup .notice .caption, .section9 .Label,
.section10 .Label {
  color: #28201E;
  font-style: normal;
  font-weight: 900;
  line-height: 154%;
  font-family: "Noto Sans JP";
}

/* Desktop font size for titles */
@media screen and (min-width: 900px) {
  .text, .section9 .title, .section10 .title, .section9 .qaGroup .qa .caption,
  .section9 .qaGroup .notice .caption,
  .section9 .noticeGroup .qa .caption,
  .section9 .noticeGroup .notice .caption,
  .section10 .qaGroup .qa .caption,
  .section10 .qaGroup .notice .caption,
  .section10 .noticeGroup .qa .caption,
  .section10 .noticeGroup .notice .caption, .section9 .Label,
  .section10 .Label {
    font-size: 36px;
  }
}

/* Tablet font size */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .text, .section9 .title, .section10 .title, .section9 .qaGroup .qa .caption,
  .section9 .qaGroup .notice .caption,
  .section9 .noticeGroup .qa .caption,
  .section9 .noticeGroup .notice .caption,
  .section10 .qaGroup .qa .caption,
  .section10 .qaGroup .notice .caption,
  .section10 .noticeGroup .qa .caption,
  .section10 .noticeGroup .notice .caption, .section9 .Label,
  .section10 .Label {
    font-size: 32px;
  }
}

/* Mobile font size */
@media screen and (max-width: 499px) {
  .text, .section9 .title, .section10 .title, .section9 .qaGroup .qa .caption,
  .section9 .qaGroup .notice .caption,
  .section9 .noticeGroup .qa .caption,
  .section9 .noticeGroup .notice .caption,
  .section10 .qaGroup .qa .caption,
  .section10 .qaGroup .notice .caption,
  .section10 .noticeGroup .qa .caption,
  .section10 .noticeGroup .notice .caption, .section9 .Label,
  .section10 .Label {
    font-size: 18px;
  }
}

/* QA Group container */
.section9 .qaGroup,
.section9 .noticeGroup,
.section10 .qaGroup,
.section10 .noticeGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* QA items */
.section9 .qaGroup .qa,
.section9 .qaGroup .notice,
.section9 .noticeGroup .qa,
.section9 .noticeGroup .notice,
.section10 .qaGroup .qa,
.section10 .qaGroup .notice,
.section10 .noticeGroup .qa,
.section10 .noticeGroup .notice {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #28201E1A;
  width: 100%;
}

@media screen and (min-width: 900px) {
  .section9 .qaGroup .qa,
  .section9 .qaGroup .notice,
  .section9 .noticeGroup .qa,
  .section9 .noticeGroup .notice,
  .section10 .qaGroup .qa,
  .section10 .qaGroup .notice,
  .section10 .noticeGroup .qa,
  .section10 .noticeGroup .notice {
    width: 840px;
  }
}

/* Top border for first item */
.section9 .qaGroup .qa.top,
.section9 .qaGroup .notice.top,
.section9 .noticeGroup .qa.top,
.section9 .noticeGroup .notice.top,
.section10 .qaGroup .qa.top,
.section10 .qaGroup .notice.top,
.section10 .noticeGroup .qa.top,
.section10 .noticeGroup .notice.top {
  border-top: 1px solid #28201E1A;
}

/* Notice items */
.section9 .qaGroup .qa.notice,
.section9 .qaGroup .notice.notice,
.section9 .noticeGroup .qa.notice,
.section9 .noticeGroup .notice.notice,
.section10 .qaGroup .qa.notice,
.section10 .qaGroup .notice.notice,
.section10 .noticeGroup .qa.notice,
.section10 .noticeGroup .notice.notice {
  gap: 0;
}

/* Question captions */
.section9 .qaGroup .qa .caption,
.section9 .qaGroup .notice .caption,
.section9 .noticeGroup .qa .caption,
.section9 .noticeGroup .notice .caption,
.section10 .qaGroup .qa .caption,
.section10 .qaGroup .notice .caption,
.section10 .noticeGroup .qa .caption,
.section10 .noticeGroup .notice .caption {
  font-size: 20px;
  padding: 0 20px 0 20px;
  text-decoration: none;
  font-weight: 500;
  line-height: 154%;
}

@media screen and (max-width: 499px) {
  .section9 .qaGroup .qa .caption,
  .section9 .qaGroup .notice .caption,
  .section9 .noticeGroup .qa .caption,
  .section9 .noticeGroup .notice .caption,
  .section10 .qaGroup .qa .caption,
  .section10 .qaGroup .notice .caption,
  .section10 .noticeGroup .qa .caption,
  .section10 .noticeGroup .notice .caption {
    font-size: 14px;
  }
}

/* Link captions */
.section9 .qaGroup .qa .caption.link,
.section9 .qaGroup .notice .caption.link,
.section9 .noticeGroup .qa .caption.link,
.section9 .noticeGroup .notice .caption.link,
.section10 .qaGroup .qa .caption.link,
.section10 .qaGroup .notice .caption.link,
.section10 .noticeGroup .qa .caption.link,
.section10 .noticeGroup .notice .caption.link {
  line-height: 160%;
}

.section9 .qaGroup .qa .caption.link:hover,
.section9 .qaGroup .notice .caption.link:hover,
.section9 .noticeGroup .qa .caption.link:hover,
.section9 .noticeGroup .notice .caption.link:hover,
.section10 .qaGroup .qa .caption.link:hover,
.section10 .qaGroup .notice .caption.link:hover,
.section10 .noticeGroup .qa .caption.link:hover,
.section10 .noticeGroup .notice .caption.link:hover {
  color: #28201E;
  cursor: pointer;
}

/* Answer text */
.section9 .qaGroup .qa .answer,
.section9 .qaGroup .notice .answer,
.section9 .noticeGroup .qa .answer,
.section9 .noticeGroup .notice .answer,
.section10 .qaGroup .qa .answer,
.section10 .qaGroup .notice .answer,
.section10 .noticeGroup .qa .answer,
.section10 .noticeGroup .notice .answer {
  align-self: stretch;
  color: #28201E;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 154%;
  letter-spacing: 0.48px;
  padding: 0 24px 0 24px;
}

/* Date text */
.section9 .qaGroup .qa .date,
.section9 .qaGroup .notice .date,
.section9 .noticeGroup .qa .date,
.section9 .noticeGroup .notice .date,
.section10 .qaGroup .qa .date,
.section10 .qaGroup .notice .date,
.section10 .noticeGroup .qa .date,
.section10 .noticeGroup .notice .date {
  color: #28201E;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.3px;
  padding: 0 20px 0 20px;
}

@media screen and (max-width: 499px) {
  .section9 .qaGroup .qa .date,
  .section9 .qaGroup .notice .date,
  .section9 .noticeGroup .qa .date,
  .section9 .noticeGroup .notice .date,
  .section10 .qaGroup .qa .date,
  .section10 .qaGroup .notice .date,
  .section10 .noticeGroup .qa .date,
  .section10 .noticeGroup .notice .date {
    font-size: 12px;
  }
}

/* Sub text */
.section9 .qaGroup .qa .sub,
.section9 .qaGroup .notice .sub,
.section9 .noticeGroup .qa .sub,
.section9 .noticeGroup .notice .sub,
.section10 .qaGroup .qa .sub,
.section10 .qaGroup .notice .sub,
.section10 .noticeGroup .qa .sub,
.section10 .noticeGroup .notice .sub {
  color: #28201E;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.3px;
  padding: 0 20px 0 20px;
}

/* Mobile Accordion Styles - Only for SP version */
.section9.sp .toggle,
.section10.sp .toggle {
  display: none;
}

.section9.sp .Label,
.section10.sp .Label {
  display: block;
  padding: 12px 60px 12px 20px;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  line-height: 154%;
  /* border-bottom: 1px solid #28201E1A; */
}

.section9.sp .Label.top,
.section10.sp .Label.top {
  border-top: 1px solid #28201E1A;
}

.section9.sp .Label::before,
.section10.sp .Label::before {
  position: absolute;
  top: calc(50% - 3px);
  right: 20px;
  transform: translateY(-25%) rotate(45deg);
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-bottom: 2px solid #28201E;
  border-right: 2px solid #28201E;
  content: "";
  transition: transform 0.3s;
}

.section9.sp .Label,
.section9.sp .content,
.section10.sp .Label,
.section10.sp .content {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.section9.sp .content,
.section10.sp .content {
  height: 0;
  overflow: hidden;
  align-self: stretch;
  color: #28201E;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 154%;
  letter-spacing: 0.48px;
  padding: 0 24px 0 24px;
  border-bottom: 1px solid #28201E1A;
}

.section9.sp .toggle:checked + .Label + .content,
.section10.sp .toggle:checked + .Label + .content {
  height: auto;
  padding: 10px 24px;
  transition: all 0.3s;
}

.section9.sp .toggle:checked + .Label::before,
.section10.sp .toggle:checked + .Label::before {
  transform: rotate(225deg);
}

/* Section 10 specific padding */
.section10.pc {
  padding: 120px 120px 180px 120px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section10.pc {
    width: 100%;
    padding: 40px 20px;
  }
}