@charset "UTF-8";

@keyframes fadeIn {

0% {
  opacity: 0;
  transform: translateY(-10px);
}

100% {
  opacity: 1;
  transform: none;
}

}


/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

#faq main {
  background: #F9F9F7;
}

#faq .p-bnr {
  background: #F9F9F7;
  margin-bottom: -160px;
}

#faq .p-bnr .l-inner.l-bnr {
  position: relative;
}

#faq .l-footer {
  padding-block: 195px 0;
}

.p-system {
  margin-bottom: -410px;
  padding-block: 683px 490px;  
}

.p-system .l-inner.l-system {
}

.p-system .p-system__cat {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 144px;
  margin-inline: auto;
  width: min(95%, 1040px);
}

.p-system .p-system__cat-nav a {
  background: #FFF;
  border: 1px solid #231815;
  color: #D8780C;
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  padding-block: 25px 25px;
  padding-inline: 40px;
  position: relative;
}

.p-system .p-system__cat-nav a::after {
  background: url(../images/faq/arrow.svg) no-repeat center center/contain;
  content: "";
  height: 26px;
  position: absolute;
  right: 30px;
  right: clamp(0.875rem, 0.208rem + 1.39vw, 1.875rem);
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}

.p-system .p-system__lists {
  margin-bottom: 132px;
  margin-inline: auto;
  width: min(95%, 1100px);
}

.p-system .p-system__lists-cat {
  color: #D8780C;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-block: 0px 53px;
  padding-block: 20px 0;
  text-align: center;
}

.p-system .p-system__lists-box {
  display: grid;
  gap: 40px 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.p-system .p-system__box {
  background: #FFF;
  box-shadow: 4px 4px 15px 2px rgba(0, 0, 0, 0.05);
}

.p-system .p-system__item {

}

.p-system summary {
  display: block;
  padding-block: 60px;
  padding-inline: 64px 144px;
}

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

.p-system .p-system__qu {
  position: relative;
  display: block;
}

.p-system .p-system__qu::before,
.p-system .p-system__qu::after {
  background: #D8780C;
  content: "";
  position: absolute;
  top: 0px;
  /* translate: 0 -50%; */
}

.p-system .p-system__qu::before {
  height: 2px;
  right: -82px;
  width: 32px;
  top: 16px;
}

.p-system .p-system__qu::after {
  height: 32px;
  right: -67px;
  transition: rotate 0.3s ease;
  width: 2px;
}

.p-system details[open] .p-system__qu::after {
  rotate: 90deg;
}

.p-system .p-system__item[open] .p-system__an {
  animation: fadeIn 0.5s ease;
}

.p-system .p-system__qu-txt {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5909090909;
  padding-inline: 110px 0;
}

.p-system .p-system__qu-txt::before {
  background: #D8780C;
  border-radius: 50%;
  color: #fff;
  content: "Q";
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  height: 71px;
  left: 0;
  letter-spacing: 0.09em;
  line-height: 2.8333333333;
  position: absolute;
  text-align: center;
  top: 50%;
  translate: 0 -50%;
  width: 71px;
}

.p-system .p-system__an-txt {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5555555556;
  padding-block: 0px 60px;
  padding-inline: 176px 144px;
  position: relative;
}

.p-system .p-system__an-txt::before {
  background: #fff;
  border: 1px solid #D8780C;
  border-radius: 50%;
  color: #D8780C;
  content: "A";
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  height: 71px;
  left: 64px;
  letter-spacing: 0.09em;
  line-height: 2.8333333333;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 71px;
}

@media (any-hover: hover) {

.p-system .p-system__qu:hover {
  cursor: pointer;
}

}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1300px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1300px) {
.p-system {
  margin-bottom: -31.538vw;
  padding-block: 40.538vw 37.692vw;  
}
}

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#faq main {
  background: #F9F9F7;
}

#faq .p-bnr {
  background: #F9F9F7;
  margin-bottom: -38.647vw;
}

#faq .p-bnr .l-inner.l-bnr {
  position: relative;
}

#faq .l-footer {
  padding-block: 0;
}

#faq .sp-page-top {
  padding-block: 64.9vw 7.426vw;
}

.p-system {
  margin-bottom: -52.309vw;
  padding-block: 111.527vw 0;
}

.p-system .l-inner.l-system {
  padding-block: 0 71.531vw;
}

.p-system .p-system__cat {
  display: grid;
  gap: 4.5vw 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-bottom: 8.493vw;
  margin-inline: auto;
  width: min(95%, 86.9vw);
}

.p-system .p-system__cat-nav a {
  background: #FFF;
  border: 1px solid #231815;
  color: #D8780C;
  display: block;
  font-size: 4.348vw;
  font-weight: 600;
  line-height: 1;
  padding-block: 5.072vw 5.106vw;
  padding-inline: 9.662vw;
  position: relative;
}

.p-system .p-system__cat-nav a::after {
  background: url(../images/faq/arrow.svg) no-repeat center center/contain;
  content: "";
  height: 6.28vw;
  position: absolute;
  right: 6.797vw;
  top: 50%;
  transform: translateY(-50%);
  width: 3.623vw;
}

.p-system .p-system__lists {
  margin-bottom: 9.662vw;
  margin-inline: auto;
  width: min(95%, 90.3381642512vw);
}

.p-system .p-system__lists-cat {
  font-size: 5.314vw;
  font-weight: 600;
  line-height: 1.5909090909;
  margin-block: 0px 7.246vw;
  padding-block: 4.831vw 0;
  text-align: center;
  color: #D8780C;
}

.p-system .p-system__lists-box {
  display: grid;
  gap: 6.039vw 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.p-system .p-system__box {
  background: #FFF;
  box-shadow: 4px 4px 15px 2px rgba(0, 0, 0, 0.05);
}

.p-system summary {
  display: block;
  padding-block: 7.246vw;
  padding-inline: 4.831vw 14.493vw;
}

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

.p-system .p-system__qu {
  position: relative;
}

.p-system .p-system__qu::before,
.p-system .p-system__qu::after {
  background: #D8780C;
  content: "";
  position: absolute;
  top: 3.5vw;
}

.p-system .p-system__qu::before {
  height: 0.483vw;
  right: -8vw;
  width: 6.039vw;
}

.p-system .p-system__qu::after {
  height: 6.039vw;
  right: -5vw;
  transition: rotate 0.3s ease;
  width: 0.483vw;
  top: 1vw;
}

.p-system details[open] .p-system__qu::after {
  rotate: 90deg;
}

.p-system .p-system__item[open] .p-system__an {
  animation: fadeIn 0.5s ease;
}

.p-system .p-system__qu-txt {
  display: block;
  font-size: 3.865vw;
  font-weight: 600;
  line-height: 1.875;
  padding-inline: 17.908vw 0;
  position: relative;
}

.p-system .p-system__qu-txt::before {
  background: #D8780C;
  border-radius: 50%;
  color: #fff;
  content: "Q";
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-size: 4.831vw;
  font-style: normal;
  font-weight: 400;
  height: 12.077vw;
  left: 1vw;
  letter-spacing: 0.09em;
  line-height: 2.3;
  position: absolute;
  text-align: center;
  top: 0.28vw;
  width: 12.077vw;
}

.p-system .p-system__an-txt {
  display: block;
  font-size: 3.382vw;
  font-weight: 400;
  line-height: 2;
  padding-block: 0 7.246vw;
  padding-inline: 22.908vw 14.493vw;
  position: relative;
}

.p-system .p-system__an-txt::before {
  background: #fff;
  border: 1px solid #D8780C;
  border-radius: 50%;
  color: #D8780C;
  content: "A";
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-size: 4.831vw;
  font-style: normal;
  font-weight: 400;
  height: 10.8vw;
  left: 6.5vw;
  letter-spacing: 0.09em;
  line-height: 2.3;
  position: absolute;
  text-align: center;
  top: 0vw;
  width: 10.8vw;
}

.p-system .p-system__qu:hover {
  cursor: pointer;
}

}