@charset "UTF-8";
/**
 * ViewPort Mixin and setting rem to pixel.
 */
/** ここでデザインファイルのサイズを入力 */
/**
 * mixin
 */
/**
 * pxをvwで返す関数
 */
/** デスクトップ上でpxをvwを返す */
/** モバイル上でpxをvwを返す */
/** largeDisplay（1536px以上）でウィンドウサイズサイズに追従するための関数 */
/**
 * Colors
 */
.faq {
  max-width: 1032rem;
  margin: 140rem auto 60rem;
}
@media (max-width: 768px) {
  .faq {
    width: 90%;
    margin: 80rem auto 40rem;
  }
}
.faq .heading2 {
  margin-bottom: 20rem;
  text-align: left;
}
.faq .heading2 .heading2__en {
  font-family: "impact", "zen-kaku-gothic-new", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", meiryo, sans-serif;
  font-size: 50rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #ff3434;
  letter-spacing: 1.5rem;
  opacity: 0.2;
}
@media (max-width: 768px) {
  .faq .heading2 .heading2__en {
    font-size: 40rem;
  }
}
.faq .heading2 .heading2__ja {
  display: inline-block;
  margin-left: 10rem;
  font-size: 22rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #251e1c;
  letter-spacing: 0.66rem;
  transform: translateY(-6rem);
}
@media (max-width: 768px) {
  .faq .heading2 .heading2__ja {
    font-size: 18rem;
  }
}
@media (max-width: 768px) {
  .faq .gold_button a {
    width: 94%;
  }
}
@media (max-width: 768px) {
  .faq .faq_txt {
    width: 85rem;
    padding-right: 15rem;
  }
}
.faq .btn {
  position: relative;
  z-index: 2;
  margin-top: 20rem;
}
.faq .btn a {
  color: #000;
  background-color: #000;
  border: 2rem solid #000;
}
@media (max-width: 768px) {
  .faq .btn a {
    width: 240rem;
  }
}
.faq .btn a:hover {
  color: #ff3434;
}
@media (max-width: 768px) {
  .faq .btn a:hover {
    color: #000;
    background-color: #000;
  }
}
.faq .btn a:hover svg {
  color: #000;
}
@media (max-width: 768px) {
  .faq .btn a:hover svg {
    color: #000;
  }
}
.faq .btn a:hover path {
  color: #000;
}
@media (max-width: 768px) {
  .faq .btn a:hover path {
    color: #000;
  }
}
.faq .btn svg {
  color: #000;
}
.faq .btn path {
  color: #000;
}
.faq .title_wrap {
  margin-bottom: 50rem;
}
@media (max-width: 768px) {
  .faq .title_wrap {
    margin-bottom: 30rem;
  }
}
.faq.show .single {
  opacity: 1;
  transform: translateY(0);
}
.faq .single {
  position: relative;
  margin-bottom: 10rem;
  border-radius: 10rem;
  transition: 200ms ease, padding 0s;
}
@media (max-width: 768px) {
  .faq .single {
    width: 100%;
    margin: 0 auto 10rem;
  }
}
.faq .single a {
  text-decoration: underline;
}
.faq .single::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 1rem;
  content: "";
  background: #000;
  transition: 400ms linear;
  transform: scaleX(1) translateX(-50%);
  transform-origin: left;
}
.faq .single:last-of-type::after {
  display: none;
}
.faq .single:nth-child(1) {
  transition-delay: 200ms;
}
.faq .single:nth-child(1)::after {
  transition-delay: 200ms;
}
.faq .single:nth-child(2) {
  transition-delay: 300ms;
}
.faq .single:nth-child(2)::after {
  transition-delay: 300ms;
}
.faq .single:nth-child(3) {
  transition-delay: 400ms;
}
.faq .single:nth-child(3)::after {
  transition-delay: 400ms;
}
.faq .single:nth-child(4) {
  transition-delay: 500ms;
}
.faq .single:nth-child(4)::after {
  transition-delay: 500ms;
}
.faq .single:nth-child(5) {
  transition-delay: 600ms;
}
.faq .single:nth-child(5)::after {
  transition-delay: 600ms;
}
.faq .single:nth-child(6) {
  transition-delay: 700ms;
}
.faq .single:nth-child(6)::after {
  transition-delay: 700ms;
}
.faq .single:nth-child(7) {
  transition-delay: 800ms;
}
.faq .single:nth-child(7)::after {
  transition-delay: 800ms;
}
.faq .single:nth-child(8) {
  transition-delay: 900ms;
}
.faq .single:nth-child(8)::after {
  transition-delay: 900ms;
}
.faq .single:nth-child(9) {
  transition-delay: 1000ms;
}
.faq .single:nth-child(9)::after {
  transition-delay: 1000ms;
}
.faq .single:nth-child(10) {
  transition-delay: 1100ms;
}
.faq .single:nth-child(10)::after {
  transition-delay: 1100ms;
}
.faq .single:nth-child(11) {
  transition-delay: 1200ms;
}
.faq .single:nth-child(11)::after {
  transition-delay: 1200ms;
}
.faq .single:nth-child(12) {
  transition-delay: 1300ms;
}
.faq .single:nth-child(12)::after {
  transition-delay: 1300ms;
}
.faq .single:nth-child(13) {
  transition-delay: 1400ms;
}
.faq .single:nth-child(13)::after {
  transition-delay: 1400ms;
}
.faq .single:nth-child(14) {
  transition-delay: 1500ms;
}
.faq .single:nth-child(14)::after {
  transition-delay: 1500ms;
}
.faq .single:nth-child(15) {
  transition-delay: 1600ms;
}
.faq .single:nth-child(15)::after {
  transition-delay: 1600ms;
}
.faq .single:nth-child(16) {
  transition-delay: 1700ms;
}
.faq .single:nth-child(16)::after {
  transition-delay: 1700ms;
}
.faq .single:nth-child(17) {
  transition-delay: 1800ms;
}
.faq .single:nth-child(17)::after {
  transition-delay: 1800ms;
}
.faq .single:nth-child(18) {
  transition-delay: 1900ms;
}
.faq .single:nth-child(18)::after {
  transition-delay: 1900ms;
}
.faq .single:nth-child(19) {
  transition-delay: 2000ms;
}
.faq .single:nth-child(19)::after {
  transition-delay: 2000ms;
}
.faq .single:nth-child(20) {
  transition-delay: 2100ms;
}
.faq .single:nth-child(20)::after {
  transition-delay: 2100ms;
}
.faq .single:nth-child(21) {
  transition-delay: 2200ms;
}
.faq .single:nth-child(21)::after {
  transition-delay: 2200ms;
}
.faq .single .top {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24rem 25rem 30rem 10rem;
  padding-right: 0;
  cursor: pointer;
}
@media (max-width: 768px) {
  .faq .single .top {
    padding: 8rem 0 15rem 15rem;
  }
}
.faq .single .top:hover .question .exp {
  color: #ff3434;
}
@media (max-width: 768px) {
  .faq .single .top:hover .question .exp {
    color: #000;
  }
}
.faq .single .top:hover .line1 {
  transform: translate(-50%, -50%) rotate(-270deg);
}
.faq .single .top:hover .line2 {
  transform: translate(-50%, -50%) rotate(-180deg);
}
.faq .single.show {
  transition: 100ms linear, padding 0s;
}
.faq .single.show .btn {
  transform: rotate(540deg);
}
@media (max-width: 768px) {
  .faq .single.show .btn {
    transform: translateY(-50%) rotate(540deg);
  }
}
.faq .single.show .answer {
  max-height: 1000rem;
  padding-bottom: 30rem;
  transition: opacity 400ms ease 200ms, max-height 600ms linear, padding 0s;
}
@media (max-width: 768px) {
  .faq .single.show .answer {
    margin-bottom: 20rem;
  }
}
.faq .single.show .content {
  max-height: 1000rem;
  transition: 1000ms linear;
}
.faq .single.show .content .inner {
  display: block;
  max-height: 1000rem;
  opacity: 1;
  transition: opacity 400ms ease 200ms, max-height 600ms linear;
}
.faq .single.show .inner::after {
  transform: scaleX(1) translateX(-50%);
}
.faq .single .question {
  font-size: 18rem;
  font-weight: 700;
  color: #000;
  text-align: left;
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .faq .single .question {
    display: flex;
    width: 80%;
    font-size: 13rem;
  }
}
.faq .single .question .q {
  margin-right: 25rem;
  font-size: 30rem;
  font-style: italic;
  font-weight: 100;
}
@media (max-width: 768px) {
  .faq .single .question .q {
    margin-right: 7rem;
    font-size: 21rem;
  }
}
.faq .single .title {
  margin-bottom: 0;
  font-size: 31rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: 400ms ease;
}
@media (max-width: 768px) {
  .faq .single .title {
    width: unset;
    font-size: 17rem;
  }
}
.faq .single .btn {
  position: absolute;
  top: 24rem;
  right: 10rem;
  width: 20rem;
  height: 20rem;
  margin: 0;
  opacity: 1;
  transition: 300ms ease;
  transform: rotate(0);
}
@media (max-width: 768px) {
  .faq .single .btn {
    top: 41%;
    right: 20rem;
    width: 15rem;
    height: 15rem;
    transform: translateY(-50%);
  }
}
.faq .single .content {
  max-height: 0;
  transition: 600ms linear;
}
.faq .single .inner {
  position: relative;
  max-height: 0;
  font-size: 16rem;
  line-height: 2;
  text-align: left;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 400ms ease, 600ms linear;
}
.faq .heading4 .ja {
  width: 140rem;
}
.faq .answer {
  position: relative;
  display: flex;
  max-width: 690rem;
  padding-left: 10rem;
  font-size: 13rem;
  font-style: normal;
  font-weight: 500;
  line-height: 154%;
  color: #666;
  letter-spacing: 0.04em;
  transition: opacity 400ms ease 200ms, max-height 600ms linear, padding 0s 600ms;
}
@media (max-width: 768px) {
  .faq .answer {
    padding-left: 15rem;
    font-size: 12rem;
    line-height: 1.83;
  }
}
.faq .answer .a {
  display: inline-block;
  height: 100%;
  margin-top: -13rem;
  margin-right: 25rem;
  font-size: 30rem;
  font-style: italic;
  font-weight: 100;
  color: #000;
}
@media (max-width: 768px) {
  .faq .answer .a {
    margin-top: -5rem;
    margin-right: 15rem;
    font-size: 21rem;
  }
}