/* p-simulation
---------------------------------------------------------------------------- */
.p-simulation {
  padding-block: 6rem 10rem;
  overflow-x: hidden;
}

.p-simulation-wrapper {
  display: flex;
  justify-content: center;
  padding-bottom: 7rem;
  position: relative;
  margin-top: 6.6rem;
}

.p-simulation-wrapper::before,
.p-simulation-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.p-simulation-wrapper::before {
  left: 1rem;
  width: 30.9rem;
  aspect-ratio: 309/221;
  background-image: url(./../../images/simulation/img_simulation_left_pc.png);
}

.p-simulation-wrapper::after {
  right: -5rem;
  width: 33.1rem;
  aspect-ratio: 331/227;
  background-image: url(./../../images/simulation/img_simulation_right_pc.png);
}

.p-simulation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.8rem;
}

.p-simulation-wrap-txt {
  font-size: 1.8rem;
  line-height: 1.7777777778;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: center;
}
.p-simulation-wrap-txt em {
  font-weight: 900;
  color: #C90909;
}
.p-simulation-wrap-txt span {
  display: inline-block;
  position: relative;
}
.p-simulation-wrap-txt span::after {
  content: "";
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(./../../images/simulation/icn_simulation_wave.svg);
}
.p-simulation-wrap-txt span::first-letter {
  font-size: 2.6rem;
}

.p-simulation-container {
  padding-block: 8.8rem 7.7rem;
  padding-inline: 16.5rem;
  background-color: #fff;
  border-radius: 1rem;
  border: 0.8rem solid #FFDED5;
  position: relative;
}

.p-simulation-container::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 7.6rem;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(./../../images/simulation/icn_simulation_arrow_bottom.svg);
}

.p-simulation-blocks {
  counter-reset: num;
  display: flex;
  flex-direction: column;
  gap: 5.7rem;
}

.p-simulation-block:not(:last-child) {
  padding-bottom: 4.8rem;
  border-bottom: 0.4rem dotted #C8C8C8;
}

.p-simulation-block-ttl {
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #C90909;
  padding-block: 0.7rem;
  padding-inline: 9rem 2rem;
  border-radius: 10vmax;
  background-color: #F7F3EE;
  border: 0.2rem solid #C90909;
  box-shadow: 0.3rem 0.3rem 0 #c90909;
  position: relative;
}
.p-simulation-block-ttl span {
  font-size: 1.8rem;
  line-height: 2.5;
}

.p-simulation-block-ttl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  z-index: 1;
  transform: translateY(-50%);
  width: 8.6rem;
  aspect-ratio: 86/84;
  background-image: url(./../../images/simulation/icn_simulation_q.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.p-simulation-block-ttl::after {
  counter-increment: num;
  content: "Q" counter(num);
  font-family: "Rubik";
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
}

.p-simulation-block-txtBox {
  margin-block: 1.8rem 0;
}

.p-simulation-block-txt {
  font-size: 1.6rem;
  line-height: 1.75;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #7E0000;
}
.p-simulation-block-txt em {
  background-image: linear-gradient(to bottom, transparent 60%, #FFEF6E 60%);
  background-repeat: no-repeat;
}

.p-simulation-block-item-wrap {
  margin-top: 4.3rem;
}

.p-simulation-block-item-wrap:not(:first-of-type) {
  margin-top: 3rem;
}

.p-simulation-block-item-ttl {
  font-size: 1.9rem;
  line-height: 1.5263157895;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.p-simulation-block-radio,
.p-simulation-block-check {
  display: grid;
  gap: 1rem;
}
.p-simulation-block-radio._col3,
.p-simulation-block-check._col3 {
  grid-template-columns: repeat(3, 1fr);
}
.p-simulation-block-radio._col2,
.p-simulation-block-check._col2 {
  grid-template-columns: repeat(2, 1fr);
}

.p-simulation-block-radio-label,
.p-simulation-block-check-label {
  width: 100%;
  min-height: 5rem;
  padding-block: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 700;
  cursor: pointer;
}

.p-simulation-block-radio-label {
  padding-inline: 1.2rem 1rem;
  color: #fff;
  background-color: #CCCCCC;
}

.p-simulation-block-check-label {
  padding-inline: 1.8rem 1rem;
  background-color: #fff;
}

/*** radio ***/
.p-simulation-block-radio-label:has(> input[type=radio]:checked) {
  background-color: #C90909;
  border-color: #C90909;
  border-width: 0.2rem;
}

.p-simulation-block-radio-label input[type=radio] {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid #D7D8DA;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 1rem;
  position: relative;
}

.p-simulation-block-radio-label [type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1.2rem;
  aspect-ratio: 1;
  background-color: #C90909;
  border-radius: 50%;
}

/*** checkbox ***/
.p-simulation-block-check-label:has(> input[type=checkbox]:checked) {
  background-color: #FFDED5;
  border-color: #C90909;
  border-width: 0.2rem;
  color: #C90909;
}

.p-simulation-block-check-label input[type=checkbox] {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  background-color: #fff;
  border: 0.2rem solid #CCCCCC;
  border-radius: 0.2rem;
  margin-right: 1rem;
  position: relative;
}

.p-simulation-block-check-label [type=checkbox]:checked {
  border-color: #C90909;
}

.p-simulation-block-check-label [type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.2rem;
  width: 0.9rem;
  height: 0.6rem;
  border-left: 0.2rem solid #C90909;
  border-bottom: 0.2rem solid #C90909;
  transform: rotate(-45deg);
}

.p-simulation-form-button {
  font-size: 1.9rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 6.4rem;
  padding-top: 0.3rem;
  padding-inline: 6.9rem;
  background-color: #C90909;
  border-radius: calc(infinity * 1px);
  box-shadow: 0 0.4rem 0 #7E0000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-inline: auto;
  margin-top: 8rem;
  position: relative;
}
.p-simulation-form-button:hover {
  transform: translateY(0.4rem);
  box-shadow: 0 0 0 #7E0000;
}

.p-simulation-form-button::before,
.p-simulation-form-button::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.p-simulation-form-button::before {
  top: 42%;
  z-index: 2;
  right: 2.4rem;
  width: 0.6rem;
  border-top: 0.2rem solid #C90909;
  border-right: 0.2rem solid #C90909;
  transform: rotate(45deg);
}

.p-simulation-form-button::after {
  top: 30%;
  z-index: 1;
  right: 1.5rem;
  width: 2.4rem;
  background-color: #fff;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .p-simulation {
    padding-block: 10.1333333333vw 10.6666666667vw;
  }
  .p-simulation-wrapper {
    padding-bottom: 32.5333333333vw;
    margin-top: 0;
  }
  .p-simulation-wrapper::before {
    left: -2.6666666667vw;
    width: 34.4vw;
    aspect-ratio: 129/101;
    background-image: url(./../../images/simulation/img_simulation_left_sp.png);
  }
  .p-simulation-wrapper::after {
    right: -2.6666666667vw;
    width: 36.5333333333vw;
    aspect-ratio: 137/103;
    background-image: url(./../../images/simulation/img_simulation_right_sp.png);
  }
  .p-simulation-wrap {
    width: 100%;
    gap: 5.3333333333vw;
  }
  .p-simulation-wrap-txt {
    font-size: 4.2666666667vw;
    line-height: 1.5625;
  }
  .p-simulation-wrap-txt span::after {
    bottom: -0.5333333333vw;
    height: 1.0666666667vw;
  }
  .p-simulation-wrap-txt span::first-letter {
    font-size: 5.3333333333vw;
  }
  .p-simulation-container {
    padding-block: 9.3333333333vw 10.6666666667vw;
    padding-inline: 4.5333333333vw;
    border-radius: 2.6666666667vw;
    border-width: 1.0666666667vw;
  }
  .p-simulation-container::before {
    top: -9.3333333333vw;
    width: 13.8666666667vw;
  }
  .p-simulation-blocks {
    gap: 8vw;
  }
  .p-simulation-block:not(:last-child) {
    padding-bottom: 7.4666666667vw;
    border-bottom-width: 1.0666666667vw;
  }
  .p-simulation-block-ttl {
    font-size: 5.3333333333vw;
    line-height: 1.5;
    padding-block: 2.4vw;
    padding-inline: 14.6666666667vw 4.8vw;
    border-width: 0.5333333333vw;
    box-shadow: 0.5333333333vw 0.8vw 0 #c90909;
    width: calc(100% - 3.4666666667vw);
    min-height: 13.8666666667vw;
    margin-left: auto;
  }
  .p-simulation-block-ttl span {
    font-size: 4.2666666667vw;
    line-height: 1.5625;
  }
  .p-simulation-block-ttl::before {
    left: -4.5333333333vw;
    width: 15.7333333333vw;
  }
  .p-simulation-block-ttl::after {
    font-size: 6.4vw;
    line-height: 1;
    left: -1.8666666667vw;
  }
  .p-simulation-block-txtBox {
    margin-block: 4.8vw 0;
  }
  .p-simulation-block-txt {
    font-size: 4.2666666667vw;
    line-height: 1.75;
  }
  .p-simulation-block-item-wrap {
    margin-top: 5.0666666667vw;
  }
  .p-simulation-block-item-wrap:not(:first-of-type) {
    margin-top: 8vw;
  }
  .p-simulation-block-item-ttl {
    font-size: 5.0666666667vw;
    line-height: 1.5263157895;
    margin-bottom: 3.2vw;
  }
  .p-simulation-block-radio,
  .p-simulation-block-check {
    gap: 2.6666666667vw;
  }
  .p-simulation-block-radio._col3, .p-simulation-block-radio._col2,
  .p-simulation-block-check._col3,
  .p-simulation-block-check._col2 {
    grid-template-columns: 1fr;
  }
  .p-simulation-block-radio-label,
  .p-simulation-block-check-label {
    min-height: 13.3333333333vw;
    padding-block: 2.6666666667vw;
    border-radius: 1.3333333333vw;
    font-size: 4.2666666667vw;
    line-height: 1.625;
  }
  .p-simulation-block-radio-label {
    padding-inline: 3.2vw 2.6666666667vw;
  }
  .p-simulation-block-check-label {
    padding-inline: 4.8vw 2.6666666667vw;
  }
  /*** radio ***/
  .p-simulation-block-radio-label:has(> input[type=radio]:checked) {
    border-width: 0.5333333333vw;
  }
  .p-simulation-block-radio-label input[type=radio] {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 2.6666666667vw;
  }
  .p-simulation-block-radio-label [type=radio]:checked::before {
    width: 3.2vw;
    aspect-ratio: 1;
  }
  /*** checkbox ***/
  .p-simulation-block-check-label {
    padding-inline: 4.8vw 2.6666666667vw;
    border-radius: 1.3333333333vw;
    font-size: 4.2666666667vw;
  }
  .p-simulation-block-check-label:has(> input[type=checkbox]:checked) {
    border-width: 0.5333333333vw;
  }
  .p-simulation-block-check-label input[type=checkbox] {
    width: 4.8vw;
    height: 4.8vw;
    border-width: 0.5333333333vw;
    border-radius: 0.5333333333vw;
    margin-right: 4vw;
  }
  .p-simulation-block-check-label [type=checkbox]:checked::before {
    top: 0.2666666667vw;
    left: 0.5333333333vw;
    width: 2.4vw;
    height: 1.6vw;
    border-left-width: 0.5333333333vw;
    border-bottom-width: 0.5333333333vw;
  }
  .p-simulation-form-button {
    font-size: 4.2666666667vw;
    line-height: 1.5;
    width: 100%;
    height: 15.4666666667vw;
    padding-top: 0.8vw;
    padding-inline: 10.6666666667vw;
    margin-top: 8vw;
    box-shadow: 0 1.0666666667vw 0 #7E0000;
  }
  .p-simulation-form-button:hover {
    transform: translateY(1.0666666667vw);
  }
  .p-simulation-form-button::before {
    top: 43%;
    right: 6.1333333333vw;
    width: 1.3333333333vw;
    border-top-width: 0.5333333333vw;
    border-right-width: 0.5333333333vw;
  }
  .p-simulation-form-button::after {
    right: 4vw;
    width: 5.6vw;
  }
}