@charset "UTF-8";

/*カテゴリから質問を探す
---------------------------*/
.faq-categories{
  background: var(--color-ECECEC);
  padding-block: 2rem;
  padding-inline: 2rem;
}
.faq-categories__title{
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 4px) * (6 / 8))), var(--font24));
  margin-bottom: 1em;
}
.category-list{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem 1.2rem;
}
.category-list__link{
  place-content: center start;
  height: 3.5em;
  background: var(--color-white);
  border: 2px solid;
  border-radius: 0.2em;
  color: var(--color-5D7DBF);
  padding-left: 1.5em;
  &::before{
    left: 0.5em;
    background: var(--color-D9D9D9);
  }
  &:hover{
    background: var(--color-5D7DBF);
    color: var(--color-white);
  }
}
/*Q&A
---------------------------*/
.faq-section__item{
  --p: clamp(0.8rem, 1.9vw / 1.2, 1.2rem);
  margin-bottom: 1.5rem;
}
.aq-subsection{
  padding-top: clamp(2rem, 6.4vw, 4rem);
}
details {
  &::details-content {
    transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
    height: 0;
    border-bottom: 1px solid;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content {
    opacity: 1;
  }
}
@supports (interpolate-size: allow-keywords){
  :root {
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords){
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}
summary{
  display: block;
  list-style: none;
}
summary::-webkit-details-marker{
  display:none;
}
.faq-item__question, .faq-item__answer{
  grid-template-columns: clamp(35px, 5vw / 1.2, 50px) 1fr clamp(10px, 3vw / 1.2, 20px);
  gap: clamp(0.9rem, 2.4vw / 1.2, 1.5rem);
  padding-block: var(--p);
}
.faq-item__question{
  align-items: center;
  background: var(--color-ECECEC);
  color: var(--color-5D7DBF);
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 4px) * (4 / 8))), var(--font20));
  padding-inline: var(--p) clamp(0.8rem, 4vw / 1.2, 2.5rem);
}
.faq-item__answer{
  padding-inline: var(--p);
}
.icon__drop-down{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  &::before, &::after{
    content: '';
    position: absolute;
    inset: calc(50% - 1px) 0;
    background: var(--color-5D7DBF);
    transition: .3s;
  }
  &::after{
    transform: rotate(90deg);
  }
  details[open] &::after{
    transform: rotate(0deg);
  }
}
.faq-item__label{
  place-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 4px) * (4 / 8))), var(--font24));
  line-height: 1;
}
.faq-item__label--question{
  background: var(--color-5D7DBF);
  border: 2px solid var(--color-5D7DBF);
  color: var(--color-white);
}
.faq-item__label--answer{
  background: var(--color-white);
  border: 2px solid;
  color: var(--color-F48283);
}
.faq-item__content{
  padding-block: clamp(0.5rem, 1.3vw / 1.2, 0.8rem);
 :nth-child(n + 2 of .faq-item__subtitle), :nth-child(n + 2 of .faq-item__subtitle-small),:nth-child(n + 2 of .content__subtitle), .text__note + .content__subtitle, .text + .content__subtitle, .text__note + .text{
   margin-top: 2.5em;
 }
 a{
  color: var(--color-F48283);
  text-decoration:underline;
  &:hover{
    opacity: .8;
    text-decoration: none;
  }
 }
}
.faq-item__list{
  margin-bottom: clamp(1rem, 2.4vw / 1.2, 1.5rem);
  margin-left: clamp(1.2rem, 3.2vw / 1.2, 2rem);
  li{
    list-style-type: disc;
    margin-bottom: 0.5em;
  }
}
table{
  border-collapse:  collapse;
}
th, td{
  border: 1px solid;
  padding: 0.4em 1em;
}
th{
  background: var(--color-ECECEC);
}
.faq-item__subtitle-small, .faq-item__subtitle{
  margin-bottom: 0.5em;
}
.faq-item__table-header{
  text-align: left;
}
.faq-subsection__title{
  color: var(--color-5D7DBF);
}