@charset "UTF-8";
/* CSS Document */
.section-qa-main {
  display: flex;
  justify-content: center;
}
.section-qa-main-wrap {
  margin: 12.5vw -9.1vw 8.33vw 0;
  position: relative;
}
.image-container {
  width: 36.81vw;
  height: 34.72vw;
  background: #171717;
  box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container img {
  width: 32.15vw;
  height: 31.39vw;
  object-fit: cover;
}
.theme-container {
  position: absolute;
  bottom: 0;
  left: -9.1vw;
}
.qa-mv {
  display: block;
  width: 11.67vw;
  height: 7.99vw;
}
.qa-mv-sp {
  display: none;
}
@media screen and (max-width: 770px) {
  .section-qa-main-wrap {
    margin: 38.76vw -20.53vw 26.67vw 0;
    position: relative;
  }
  .image-container {
    width: 53.33vw;
    height: 46.93vw;
    background: #171717;
    box-shadow: 4px 4px 10px 0px rgba(17, 17, 17, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image-container img {
    width: 46.4vw;
    height: 45.07vw;
    object-fit: cover;
  }
  .theme-container {
    position: absolute;
    bottom: 0;
    left: -20.53vw;
  }
  .qa-mv {
    display: none;
  }
  .qa-mv-sp {
    display: block;
    width: 24.27vw;
    height: 17.87vw;
  }
}
.QandA {
  margin: 0 19.44vw 8.33vw;
}
.question {
  max-width: 61.11vw;
  margin-bottom: 9.03vw;
  border-bottom: 1px solid #000b22;
}
.question summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.69vw 0 2.78vw 10.76vw;
  color: #444444;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.53vw;
}
.question summary::-webkit-details-marker {
  display: none;
}
.q-01::before, .q-02::before, .q-03::before, .q-04::before {
  position: absolute;
  left: 0;
  color: #C26D6D;
  font-size: 3.06vw;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.q-01::before {
  content: "Q1";
}
.q-02::before {
  content: "Q2";
}
.q-03::before {
  content: "Q3";
}
.q-04::before {
  content: "Q4";
}
.question summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 1.25vw;
  height: 1.25vw;
  margin-left: 10px;
  border-bottom: 5px solid #444444b3;
  border-right: 5px solid #444444b3;
  content: '';
  transition: transform .7s;
}
.question[open] summary::after {
  transform: rotate(225deg);
}
.answer {
  background-color: rgba(194, 109, 109, 0.20);
  border-radius: 1.39vw;
  width: 61.11vw;
  margin: 1.39vw 0 4.17vw;
  display: flex;
  justify-content: center;
}
.question p {
  color: #000B22;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  padding-top: 3.47vw;
  padding-bottom: 3.47vw;
  position: relative;
  transform: translateY(-10px);
  transition: transform .5s, opacity .5s;
  opacity: 0;
}
.question[open] p {
  transform: none;
  opacity: 1;
  width: 31.6vw;
}
@media screen and (max-width: 770px) {
  .QandA {
    margin: 0 6.4vw 21.33vw;
  }
  .question {
    max-width: 87.2vw;
    margin-bottom: 8vw;
    border-bottom: 1px solid #000b22;
  }
  .question summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 5.33vw 0 5.33vw 16vw;
    color: #444444;
    font-weight: 600;
    cursor: pointer;
    font-size: 4.27vw;
    line-height: 180%;
  }
  .question summary::-webkit-details-marker {
  display: none;
  }
  .q-01::before, .q-02::before, .q-03::before, .q-04::before {
    position: absolute;
    left: 0;
    color: #C26D6D;
    font-size: 8vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .q-01::before {
    content: "Q1";
  }
  .q-02::before {
    content: "Q2";
  }
  .q-03::before {
    content: "Q3";
  }
  .q-04::before {
    content: "Q4";
  }
  .question summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 3.2vw;
    height: 3.2vw;
    margin-left: 0;
    border-bottom: 2px solid #444444b3;
    border-right: 2px solid #444444b3;
    content: '';
    transition: transform .5s;
  }
  .question[open] summary::after {
    transform: rotate(225deg);
  }
  .answer {
    background-color: rgba(194, 109, 109, 0.20);
    border-radius: 5.33vw;
    width: 87.2vw;
    margin: 0 0 5.33vw;
    display: flex;
    justify-content: center;
  }
  .question p {
    width: 66.67vw;
    color: #000B22;
    font-size: 4vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    padding-top: 8vw;
    padding-bottom: 8vw;
    position: relative;
    transform: translateY(-10px);
    transition: transform .5s, opacity .5s;
    opacity: 0;
  }
  .question[open] p {
    transform: none;
    opacity: 1;
    width: 80vw;
  }
}