:root {
  --color-research-blue: #009ebe;
}

#paper-marbling,
#surface-tension,
#moving-boat,
#color-separation,
#siphon-mechanism,
#saltwater,
#no-spill-water,
#make-cloud,
#fuel-cell,
#buoyancy,
#cartesian-diver,
#soap-bubbles

 {
  scroll-margin-top: 95px; /* ヘッダー80px + 15px */
}

.research-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 24px 22px;
  background-color: transparent;
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  border-radius: 0 0 16px 16px;
  font-family: "Noto Sans JP", "Noto Sans JP Extra", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.research-popup__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #FFF1DC;
  border-radius: inherit;
  z-index: -1;
}

.research-popup__header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-color: #fff8ed;
  z-index: -2;
}

.research-popup__header-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-blue950);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

@media screen and (max-width: 767px) {
  .research-popup__header-close {
    gap: 4px;
  }
}

.research-popup__header-close-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: #005cab;
  position: relative;
}

.research-popup__header-close-icon::before,
.research-popup__header-close-icon::after {
  content: "";
  width: 10px;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
}

.research-popup__header-close-icon::before {
  transform: rotate(45deg);
}

.research-popup__header-close-icon::after {
  transform: rotate(-45deg);
}

.research-popup__header-close-text {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: inherit;
  white-space: nowrap;
}

.research-popup__header-close-text:hover {
  text-decoration: underline;
  color: var(--color-blue700);
}

.research-popup__header-close-text ruby,
.research-popup__header-ruby-text ruby,
.research-faq__close-link.contents-button__link ruby {
  line-height: 1.2;
}

.research-popup__header-close-text rb,
.research-popup__header-ruby-text rb,
.research-faq__close-link.contents-button__link rb {
  line-height: 1.2;
}

.research-popup__header-close-text rt,
.research-popup__header-ruby-text rt,
.research-faq__close-link.contents-button__link rt {
  line-height: 1;
}

.research-popup__header-close-text rp,
.research-popup__header-ruby-text rp,
.research-faq__close-link.contents-button__link rp {
  display: none;
}

.research-popup__header-ruby {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@media screen and (max-width: 900px) and (min-width: 768px) {
  .research-popup__header {
    gap: 8px;
  }

  .research-popup__header-close {
    gap: 6px;
  }

  .research-popup__header-close-icon {
    width: 22px;
    height: 22px;
  }

  .research-popup__header-close-text {
    font-size: 1rem;
  }

  .research-popup__header-ruby {
    gap: 8px;
  }

  .research-popup__header-ruby-text {
    font-size: 0.875rem;
  }

  .research-popup__header-ruby-toggle {
    width: 52px;
    height: 28px;
  }

  .research-popup__header-ruby-toggle::after {
    width: 20px;
    height: 20px;
    top: 4px;
    left: 4px;
  }

  .research-popup__header-ruby-toggle[aria-pressed="true"]::after {
    transform: translateX(24px);
  }
}

.research-popup__header-ruby-text {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: inherit;
}

.research-popup__header-ruby-toggle {
  width: 64px;
  height: 32px;
  border-radius: 9999px;
  background-color: #d8dde2;
  position: relative;
  transition: background-color 0.2s ease;
}

.research-popup__header-ruby-toggle::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: #fffdf7;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: transform 0.2s ease;
}

.research-popup__header-ruby-toggle[aria-pressed="true"] {
  background-color: #005cab;
}

.research-popup__header-ruby-toggle[aria-pressed="true"]::after {
  transform: translateX(32px);
}

.research-faq {
  min-width: auto;
  width: auto;
  max-width: none;
  padding-right: 0 !important;
  padding-bottom: 64px;
}

.research-faq__bg-wave {
  width: calc(100% + 15px);
  padding: 32px 0 128px;
  margin-right: -15px;
  background-color: #fff8ed;
  position: relative;
  overflow: visible;
}

.research-faq__bg-wave::before,
.research-faq__bg-wave::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #1ebcdb;
  background-image: linear-gradient(90deg, #61d0e6 1px, transparent 1px), linear-gradient(#61d0e6 1px, transparent 1px);
  background-size: 32px 32px;
}

.research-faq__bg-wave::before {
  bottom: 0;
  height: 188px;
}

.research-faq__bg-wave::after {
  bottom: 187px;
  height: 86px;
  background-position: 0 22px;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 825 86" preserveAspectRatio="none"><path d="M0 86H825V28.007C825 28.007 694.275 84.7837 609.353 85.9387C479.859 87.6998 394.329 6.65876 264.835 0.300452C153.483 -5.16651 0 65.7884 0 65.7884V86Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 825 86" preserveAspectRatio="none"><path d="M0 86H825V28.007C825 28.007 694.275 84.7837 609.353 85.9387C479.859 87.6998 394.329 6.65876 264.835 0.300452C153.483 -5.16651 0 65.7884 0 65.7884V86Z" fill="black"/></svg>');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.research-faq__hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 64px;
  position: relative;
  z-index: 1;
}

.research-faq__hero-title-wrap {
  padding: 0;
  position: relative;
}

.research-faq__hero-title-image {
  width: min(100%, 542px);
  margin: 0;
  font-size: 0;
}

.research-faq__hero-title-image img {
  display: block;
  width: 100%;
  height: auto;
}

.research-faq__hero-card {
  margin-top: 24px;
  margin-left: 0;
  margin-right: 0;
  padding: 24px 64px 32px;
  border-radius: 20px;
  background-color: #e9f4ff;
  position: relative;
}

.research-faq__hero-card::before {
  content: "";
  width: 88px;
  height: 48px;
  background: url(/kids/research/img/img_ribbon.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  left: -49px;
}

.research-faq__hero-card::after {
  content: "";
  width: 45px;
  height: 45px;
  border-radius: 12px 0 0 0;
  background: linear-gradient(135deg, var(--color-note-try) 50%, #1ebcdb 50%);
  position: absolute;
  right: -1px;
  bottom: -1px;
}

.research-faq__hero-card-inner {
  position: relative;
}

.research-faq__hero-card-title {
  color: var(--color-blue950);
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
}

.research-faq__hero-card-title-inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 10px 2px;
  position: relative;
  z-index: 1;
}

.research-faq__hero-card-title-inner::after {
  content: "";
  width: calc(100% + 8px);
  height: 12px;
  border-radius: 9999px;
  background-color: var(--color-orange200);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: -1;
}

.research-faq__hero-card-title-text {
  display: inline-block;
}

.research-faq__hero-card-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDQ1LjIzNjcgNDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJGcmFtZSA2MjcxMzgiPgo8cGF0aCBkPSJNMCAyMUMwIDkuNDAyMDIgOS40MDIwMiAwIDIxIDBWMEMzMi41OTggMCA0MiA5LjQwMjAyIDQyIDIxVjIxQzQyIDMyLjU5OCAzMi41OTggNDIgMjEgNDJWNDJDOS40MDIwMiA0MiAwIDMyLjU5OCAwIDIxVjIxWiIgZmlsbD0idmFyKC0tZmlsbC0wLCAjRUI2RTAwKSIvPgo8ZyBpZD0iR3JvdXAgNDg4Ij4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2LjU4NzYgMjIuMzk2QzE2LjI2NCAyMi40MDA3IDE1Ljk0OTggMjIuMzEwOCAxNS42NjYyIDIyLjEyNjNDMTUuMjg2NCAyMS44ODAyIDE1LjAzNzYgMjEuNTIyMiAxNC45NDE3IDIxLjA4MzRDMTQuNzk1IDIwLjQyIDE0Ljg2NTIgMTkuNzAxMiAxNS4xNDE4IDE4Ljk1MzFDMTUuMzk3OSAxOC4yNTI2IDE1Ljg3NTEgMTcuNDI4MyAxNi41NDcxIDE2LjQ5MTNDMTYuOTg0MSAxNS44MzUzIDE3LjI3OTIgMTUuMjgwOSAxNy40MTY5IDE0Ljg1NDVDMTcuNTQ0NSAxNC40NzAxIDE3LjU2NjIgMTQuMTAzIDE3LjQ4NzEgMTMuNzM3NEMxNy4zNjI4IDEzLjE1NzUgMTcuMDYwNCAxMi43NTMxIDE2LjU3NDIgMTIuNDkyOEMxNi4yMzIzIDEyLjMwOTEgMTUuODU0NSAxMi4yMjU0IDE1LjQxOTYgMTIuMjMxNkMxNS4xOTY4IDEyLjIzNDggMTQuOTYzOCAxMi4yNjQ0IDE0LjcyMDQgMTIuMzE1QzE0LjI2MDIgMTIuNDE1OSAxMy44NjQ3IDEyLjU5NDUgMTMuNTU1MSAxMi44NTU3QzEzLjI0MDMgMTMuMTE2OSAxMy4wMDU2IDEzLjQyOTQgMTIuODUxNSAxMy44MDg5QzEyLjY4NjkgMTQuMjA0MyAxMi40MzExIDE0LjUxNzEgMTIuMDg0IDE0Ljc1MjZDMTEuODA1NCAxNC45NDUyIDExLjQ5OSAxNS4wNDM5IDExLjE3NTQgMTUuMDQ4NUMxMS4wNjQxIDE1LjA1MDEgMTAuOTQ3MiAxNS4wNDEzIDEwLjgzMDIgMTUuMDE2OEMxMC4zNTcxIDE0Ljk0NSA5Ljk3MTkzIDE0LjY5OSA5LjczMzQ2IDE0LjMxNDZDOS40OTQ5OSAxMy45MzAzIDkuNDQxMzQgMTMuNDgwNCA5LjU4ODk2IDEzLjAwNjdDOS45Mzc0NiAxMi4wNzQzIDEwLjUxMDQgMTEuMjY0NCAxMS4yOTcgMTAuNTcxOUMxMi4wNzg0IDkuODc5NTcgMTMuMDE2NSA5LjQxMDI5IDE0LjA3NDYgOS4xODU1NkMxNC42MDg5IDkuMDczMTIgMTUuMTI3OSA5LjAwODA1IDE1LjYyMTIgOS4wMDFDMTYuNjU1NSA4Ljk4NjIgMTcuNjA4MSA5LjIxMzYxIDE4LjQ0NjkgOS42Njc5NkMxOS43MTMyIDEwLjM1NzIgMjAuNTE4MyAxMS40NjcxIDIwLjg0NTYgMTIuOTYxQzIwLjk5ODEgMTMuNjcxNCAyMC45NzYyIDE0LjQyNjMgMjAuNzY4OSAxNS4yMDQ3QzIwLjU3MTkgMTUuOTU2OSAyMC4xNzk2IDE2Ljc3OTkgMTkuNjA3MyAxNy42NDIyQzE5LjI3NDQgMTguMTQ0NyAxOC45NjI5IDE4LjY2MjcgMTguNjc3OSAxOS4xODAzQzE4LjQyOTMgMTkuNjM5NyAxOC4yOTcgMjAuMDY2IDE4LjI4NjIgMjAuNDU5MkMxOC4yNzA1IDIwLjg3ODYgMTguMTY0MiAyMS4yNjI2IDE3Ljk2NyAyMS42MDA4QzE3LjczODggMjEuOTk3IDE3LjM3NjEgMjIuMjUzOCAxNi45MjY1IDIyLjM1NDVDMTYuODEwMSAyMi4zNzcxIDE2LjY5ODkgMjIuMzg5MiAxNi41ODc1IDIyLjM5MDhMMTYuNTg3NiAyMi4zOTZaIiBmaWxsPSJ2YXIoLS1maWxsLTAsICNGRkZERjcpIi8+CjxwYXRoIGlkPSJWZWN0b3JfMiIgZD0iTTI1LjI3NTQgMzAuMjc2N0MyNS4wNzkzIDMwLjE1MTYgMjQuOTI2MSAyOS45NzM2IDI0LjgyODcgMjkuNzUwOEMyNC42OTc4IDI5LjQ1MyAyNC42ODk4IDI5LjEzOTcgMjQuODA1NSAyOC44Mzg0QzI0Ljk3OTUgMjguMzgyMSAyNS4zMDU1IDI3Ljk3ODEgMjUuNzY3MSAyNy42MzgyQzI2LjE5NzUgMjcuMzE4NiAyNi44MDk3IDI3LjAxMjEgMjcuNTgzMyAyNi43MTQ5QzI4LjEwNDkgMjYuNDkzNSAyOC41MDEgMjYuMjc3MiAyOC43NTIxIDI2LjA3NTVDMjguOTgwNSAyNS44OTUxIDI5LjEzODUgMjUuNjgzMiAyOS4yMzU1IDI1LjQzMjRDMjkuMzg5OCAyNS4wMzUxIDI5LjM2OCAyNC42NzI4IDI5LjE3ODggMjQuMzI0NUMyOS4wNDYxIDI0LjA3OTEgMjguODUyMyAyMy44Nzk2IDI4LjU4ODYgMjMuNzExNkMyOC40NTM2IDIzLjYyNTUgMjguMzAyIDIzLjU1MTIgMjguMTM1OSAyMy40ODU1QzI3LjgxOTYgMjMuMzY0MyAyNy41MTE2IDIzLjMxNTMgMjcuMjIyNSAyMy4zNDk5QzI2LjkzMDMgMjMuMzgyNCAyNi42NjYgMjMuNDc3NCAyNi40MjM1IDIzLjY0NDRDMjYuMTY4NSAyMy44MTY4IDI1Ljg5MTMgMjMuOTAzNiAyNS41ODk5IDIzLjkwOEMyNS4zNDY1IDIzLjkxMzYgMjUuMTIzNSAyMy44NTE5IDI0LjkyNzQgMjMuNzI2OUMyNC44NTk5IDIzLjY4MzggMjQuNzkzMiAyMy42MzI0IDI0LjczMjYgMjMuNTcxNEMyNC40NzY5IDIzLjM0MTUgMjQuMzQyOCAyMy4wNDE2IDI0LjM1MTQgMjIuNzE2NkMyNC4zNiAyMi4zOTE2IDI0LjUwNTQgMjIuMTAwMyAyNC43ODEyIDIxLjg3NDFDMjUuMzU4NyAyMS40NTE4IDI2LjAyMjcgMjEuMTkxOCAyNi43Njg1IDIxLjA4NjdDMjcuNTExMiAyMC45Nzk1IDI4LjI1OTkgMjEuMDY4MiAyOC45ODQgMjEuMzUxMkMyOS4zNDkzIDIxLjQ5NDcgMjkuNjg2NyAyMS42NjA2IDI5Ljk4NTcgMjEuODUxMkMzMC42MTI2IDIyLjI1MDggMzEuMDk0OCAyMi43NjM2IDMxLjQxOTEgMjMuMzY3OEMzMS45MDczIDI0LjI4MTggMzEuOTUyNCAyNS4yNjYyIDMxLjU1ODkgMjYuMjkyNkMzMS4zNjk5IDI2Ljc3OTUgMzEuMDU4NiAyNy4yMjQxIDMwLjYyNjcgMjcuNjA5N0MzMC4yMTEzIDI3Ljk4MzYgMjkuNjUwNiAyOC4zMjI4IDI4Ljk2NjQgMjguNjE0NkMyOC41NjggMjguNzg0OSAyOC4xNzY0IDI4Ljk3MjkgMjcuODAwOCAyOS4xNzEyQzI3LjQ3MDEgMjkuMzQ4OSAyNy4yMjIyIDI5LjU1MjYgMjcuMDYwNSAyOS43ODQ1QzI2Ljg4NTQgMzAuMDMwMSAyNi42Njk5IDMwLjIxODcgMjYuNDE3OSAzMC4zNDRDMjYuMTI0MyAzMC40OTE4IDI1LjgwNTIgMzAuNTAyNyAyNS40OTU0IDMwLjM4NTZDMjUuNDE2NSAzMC4zNTMyIDI1LjM0NSAzMC4zMTY1IDI1LjI3NzUgMzAuMjczNUwyNS4yNzU0IDMwLjI3NjdaIiBmaWxsPSJ2YXIoLS1maWxsLTAsICNGRkZERjcpIi8+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTE3Ljc4OTUgMjcuODU1M0MxNy4zODk2IDI3Ljg2MDUgMTcuMDA3OSAyNy43NTA2IDE2LjY1NDEgMjcuNTI1MkMxNi4xNzA3IDI3LjIxNjcgMTUuODYzMiAyNi43NzA4IDE1Ljc0MTUgMjYuMjA3NUMxNS42MTk5IDI1LjY0NDIgMTUuNzE1OSAyNS4xMDgxIDE2LjAzIDI0LjYyNDFDMTYuMzM5IDI0LjE0MDEgMTYuNzg0IDIzLjgzNDMgMTcuMzQ1MSAyMy43MTJDMTcuNDkyOCAyMy42OCAxNy42NDA3IDIzLjY2MzEgMTcuNzgzOCAyMy42NjEyQzE4LjE4MzcgMjMuNjU2IDE4LjU2NTUgMjMuNzY1OSAxOC45MTkzIDIzLjk5MTJDMTkuNDAyNiAyNC4yOTk4IDE5LjcxMDIgMjQuNzQ1NyAxOS44MzE4IDI1LjMwOUMxOS45NTM0IDI1Ljg3MjMgMTkuODU3MyAyNi40MDM0IDE5LjU0MzQgMjYuODkyNEMxOS4yMzQzIDI3LjM3NjQgMTguNzg5NCAyNy42ODIyIDE4LjIyODIgMjcuODA0NUMxOC4wODA2IDI3LjgzNjQgMTcuOTMyNyAyNy44NTM0IDE3Ljc4OTUgMjcuODU1M1oiIGZpbGw9InZhcigtLWZpbGwtMCwgI0ZGRkRGNykiLz4KPHBhdGggaWQ9IlZlY3Rvcl80IiBkPSJNMjMuODQwOCAzNC4wMzA3QzIzLjU5ODYgMzMuODc1OSAyMy40MTI4IDMzLjY1OTEgMjMuMjg5MyAzMy4zODRDMjMuMTIwOSAzMy4wMDc4IDIzLjExMjMgMzIuNjE4NiAyMy4yNjE4IDMyLjIzMjNDMjMuNDExMiAzMS44NDYgMjMuNjgwNyAzMS41NjIgMjQuMDYwNCAzMS4zOTUzQzI0LjQzNzEgMzEuMjI2OCAyNC44MjUxIDMxLjIxODkgMjUuMjEwNCAzMS4zNjcxQzI1LjMxMTcgMzEuNDA2MiAyNS40MDcyIDMxLjQ1NDUgMjUuNDkzOSAzMS41MDk5QzI1LjczNjEgMzEuNjY0NyAyNS45MjE5IDMxLjg4MTUgMjYuMDQ1NCAzMi4xNTY1QzI2LjIxMzcgMzIuNTMyNyAyNi4yMjIzIDMyLjkyMTkgMjYuMDcyOSAzMy4zMDgyQzI1LjkyMzUgMzMuNjk0NSAyNS42NTYgMzMuOTc1NSAyNS4yNzQzIDM0LjE0NTJDMjQuODk3NSAzNC4zMTM3IDI0LjUwOTYgMzQuMzIxNiAyNC4xMjQzIDM0LjE3MzVDMjQuMDIzIDM0LjEzNDMgMjMuOTI3NSAzNC4wODYxIDIzLjg0MDggMzQuMDMwN1oiIGZpbGw9InZhcigtLWZpbGwtMCwgI0ZGRkRGNykiLz4KPC9nPgo8cGF0aCBpZD0iUG9seWdvbiA4MCIgZD0iTTQ0LjkyNjkgMzEuMTYwNEM0NS41OTc3IDMxLjgzMTMgNDUuMTA1NCAzMi45NzcyIDQ0LjE1NyAzMi45NTI1TDM2LjgzNCAzMi43NjE0QzM2LjA5MTggMzIuNzQyMSAzNS42MDM2IDMxLjk3OTUgMzUuODk2NyAzMS4yOTczTDM4LjA0IDI2LjMwODJDMzguMzMzMSAyNS42MjYgMzkuMjIyMyAyNS40NTUyIDM5Ljc0NzIgMjUuOTgwMkw0NC45MjY5IDMxLjE2MDRaIiBmaWxsPSJ2YXIoLS1maWxsLTAsICNFQjZFMDApIi8+CjwvZz4KPC9zdmc+Cg==") no-repeat center / contain;
}

.research-faq__hero-card-lead {
  margin-top: 12px;
  color: var(--color-blue950);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  text-align: center;
}

.research-faq__main {
  max-width: 825px;
  margin: -98px auto 0;
  padding: 48px 0 0;
  border-radius: 60px 60px 0 0;
  background-color: #fffdf7;
  position: relative;
  z-index: 1;
}

.research-faq__section {
  padding: 0 22px;
}

.research-faq__section + .research-faq__section {
  margin-top: 32px;
}

.research-faq__section-head {
  padding: 0 10px;
}

.research-faq__section-head .container__title--h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 66px;
  padding: 12px 32px;
  box-sizing: border-box;
  background-color: #faf2e6;
  border-radius: 12px;
  font-size: 0;
  position: relative;
}

.research-faq__section-head .container__title--h3::before {
  content: "";
  width: 8px;
  height: 100%;
  background-color: var(--color-research-blue);
  border-radius: 9999px;
  position: absolute;
  top: 0;
  left: 0;
}

.research-faq__section-head .reading__level-img {
  display: block;
  width: 226px;
  height: 32px;
}

.research-faq__level {
  max-width: 780px;
}

.research-faq__level img {
  display: block;
  width: 100%;
  height: auto;
}

.research-faq__group {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.research-faq__group-title {
  color: var(--color-blue700);
  font-size: 1.625rem;
  font-weight: bold;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.research-faq__group-title picture {
  display: block;
}

.research-faq__group-title img {
  display: block;
  max-width: 100%;
  height: auto;
}

.research-faq__accordion {
  margin-top: 14px;
}

.research-faq__accordion + .research-faq__accordion,
.research-faq__accordion .accordion__item + .accordion__item {
  margin-top: 10px;
}

.research-faq__accordion.accordion {
  border: 0;
  background-color: transparent;
}

.research-faq__accordion .accordion__item {
  border: 2px solid #e5d6bd;
  border-radius: 16px;
  background-color: #fffdf8;
  overflow: hidden;
}

.research-faq__accordion .accordion__header {
  padding: 20px 70px 20px 18px;
}

.research-faq__accordion .accordion__header.is-open {
  padding-bottom: 16px;
  border-bottom-color: #e7d8bf;
}

.research-faq__accordion .accordion__title {
  --color-icon: #009EBE;
}

.research-faq__accordion .accordion__title::after {
  width: 28px;
  height: 28px;
  right: -42px;
  background-size: 14px auto;
}

.research-faq__accordion .accordion__title--faq {
  padding: 0 0 0 50.64px;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.research-faq__accordion .accordion__title--faq::before {
  width: 26.64px;
  height: 45.68px;
  top: 0;
  transform: none;
  background-color: #009EBE;
}

.research-faq__accordion .accordion__content.is-open {
  padding: 14px 0 18px;
}

.research-faq__accordion .accordion__inner {
  padding: 0 18px;
}

.research-faq__accordion .accordion__anser {
  --color-icon: #EB6E00;
  padding: 0 0 0 48.88px;
}

.research-faq__accordion .accordion__anser::before {
  width: 24.88px;
  height: 29.48px;
  top: 3px;
  background-color: #EB6E00;
}

.research-faq__answer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 192px;
  gap: 16px;
  align-items: start;
}

.research-faq__figure {
  margin: 0;
}

.research-faq__figure img {
  width: 100%;
  border-radius: 12px;
}

.research-faq__close-button {
  margin-top: 24px;
}

.research-faq__close-link.contents-button__link {
  max-width: 390px;
  margin: 0 auto;
  padding: 5px 24px 5px 64px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  position: relative;
}

.research-faq__close-link.contents-button__link::after {
  display: none;
}

.research-faq__close-link.contents-button__link::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--color-blue950) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  transition: 0.2s;
}

@media (hover: hover) {
  .research-faq__close-link.contents-button__link:hover::before {
    background-color: var(--color-mono50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 3.5L10.5 10.5' stroke='%23083044' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M10.5 3.5L3.5 10.5' stroke='%23083044' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: translateY(-50%) scale(1.25);
  }
}

@media screen and (max-width: 767px) {
  .research-popup {
    padding-left: 0;
  }

  .research-popup__panel {
    width: 100%;
    box-shadow: none;
  }

  .research-popup__header {
    padding: 16px;
    align-items: flex-start;
    border-radius: 0 0 12px 12px;
  }

  .research-popup__header-close,
  .research-popup__header-ruby {
    align-items: flex-start;
  }

  .research-popup__header-close-text {
    font-size: 0.875rem;
  }

  .research-popup__header-ruby {
    gap: 8px;
  }

  .research-popup__header-ruby-text {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  .research-popup__header-close-text ruby,
  .research-popup__header-ruby-text ruby {
    line-height: 1.0;
  }

  .research-popup__header-close-text rb,
  .research-popup__header-ruby-text rb {
    line-height: 1.2;
  }


  .research-popup__header-close-text rt,
  .research-popup__header-ruby-text rt {
    line-height: 1;
  }

  .research-popup__header-ruby-toggle {
    width: 52px;
    height: 28px;
  }

  .research-popup__header-ruby-toggle::after {
    width: 20px;
    height: 20px;
    top: 4px;
    left: 4px;
  }

  .research-popup__header-ruby-toggle[aria-pressed="true"]::after {
    transform: translateX(24px);
  }

  .research-faq {
    padding-bottom: 48px;
  }

  .research-faq__bg-wave {
    width: 100%;
    padding: 24px 0 96px;
    margin-right: 0;
  }

  .research-faq__bg-wave::before {
    height: 174px;
  }

  .research-faq__bg-wave::after {
    bottom: 172px;
    height: 22px;
  }

  .research-faq__hero {
    padding: 0 20px;
  }

  .research-faq__hero-title-image {
    width: 100%;
    max-width: 335px;
  }

  .research-faq__hero-title-wrap {
    padding: 0;
  }

  .research-faq__hero-card {
    margin-top: 32px;
    margin-left: 0;
    margin-right: 0;
    min-height: 120px;
    padding: 16px;
    border-radius: 20px;
    background-color: #e9f4ff;
  }

  .research-faq__hero-card::before {
    width: 32px;
    height: 55px;
    background-image: url(/kids/research/img/popup/ashirai_sp.svg);
    top: -26px;
    right: -4px;
    left: auto;
    z-index: 1;
  }

  .research-faq__hero-card::after {
    content: "";
    width: 25px;
    height: 25px;
    background-color: var(--color-research-blue);
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    transform: rotate(90deg);
  }

  .research-faq__hero-card-inner {
    z-index: 1;
  }

  .research-faq__hero-card-title {
    font-size: 1.5rem;
  }

  .research-faq__hero-card-title-inner {
    gap: 6px;
    padding: 0 6px 2px;
  }

  .research-faq__hero-card-title-inner::after {
    height: 10px;
    width: calc(100% + 4px);
  }

  .research-faq__hero-card-icon {
    width: 34px;
    height: 34px;
  }

  .research-faq__hero-card-lead {
    max-width: 303px;
    margin: 10px auto 0;
    font-size: 0.875rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
  }

  .research-faq__main {
    margin-top: -76px;
    padding-top: 32px;
    border-radius: 20px 20px 0 0;
  }

  .research-faq__section {
    padding: 0 20px;
  }

  .research-faq__section + .research-faq__section {
    margin-top: 20px;
  }

  .research-faq__section-head .container__title--h3 {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 8px 16px 8px 22px;
    box-sizing: border-box;
    background-color: #faf2e6;
    border-radius: 12px;
  }

  .research-faq__section-head .container__title--h3::before {
    width: 6px;
    height: 100%;
    border-radius: 9999px;
    top: 0;
  }

  .research-faq__section-head .reading__level-img {
    width: 171px;
    height: 24px;
  }

  .research-faq__group {
    margin-top: 24px;
  }

  .research-faq__group + .research-faq__group {
    margin-top: 32px;
  }

  .research-faq__group-title {
    font-size: 1rem;
  }

  .research-faq__accordion {
    margin-top: 10px;
  }

  .research-faq__accordion .accordion__header {
    padding: 14px 42px 14px 12px;
  }

  .research-faq__accordion .accordion__title::after {
    width: 24px;
    height: 24px;
    right: -30px;
    background-size: 12px auto;
  }

  .research-faq__accordion .accordion__title--faq {
    padding-left: 28px;
    font-size: 1rem;
    letter-spacing: 0.48px;
  }

  .research-faq__accordion .accordion__title--faq::before {
    width: 16px;
    height: 24px;
  }

  .research-faq__accordion .accordion__inner {
    padding: 0 12px;
  }

  .research-faq__accordion .accordion__anser {
    padding-left: 28px;
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.48px;
  }

  .research-faq__accordion .accordion__anser .contents-text {
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.48px;
  }

  .research-faq__accordion .accordion__anser::before {
    width: 16px;
    height: 19px;
  }

  .research-faq__answer-layout {
    grid-template-columns: 1fr;
  }

  .research-faq__figure img {
    max-width: 160px;
  }

  .research-faq__close-button {
    margin-top: 20px;
    margin-bottom: 48px;
  }

  .research-faq__close-link.contents-button__link {
    width: 100%;
    max-width: none;
    padding: 5px 16px 5px 60px;
  }

  .research-faq__close-link.contents-button__link::before {
    left: 14px;
  }
}


/* page-top */
.side-navi__page-top{
  z-index: 2;
  position: fixed;
}

@media screen and (min-width: 768px) {
  .side-navi__page-top{
    width: 48px;
    height: 48px;
    border-radius: 8px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
    right: 8px;
    bottom: calc(80px + 8px);
  }
}
