@charset "utf-8";
/* =====共通===== */

.step-box__detail {
display: flex;
flex-direction: column;
}
.step-box__title {
height: 20%;
}
.fs16 li {
font-size: 1.6rem!important;
}
.simulation-media__text {
margin: 1rem 0 1.5rem;
}
.mt48 {
margin-top: 4.8rem;
}
.button__type::after {
transform: none;
}
.image-btn {
margin-top: 2.8rem;
}
/* ===吹き出し=== */
.simulation-chatting-area {
display: flex;
align-items: center;
margin: 10rem auto;
position: relative;
justify-content: center;
}
.simulation-chatting {
position: relative;
display: inline-block;
padding: 12px;
color: #fff;
font-size: 16px;
background: #d82b90;
border-radius: 12px;
}
.simulation-chatting span:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 12px solid transparent;
border-left: 12px solid #d82b90;
  }
/* =====simulation-box===== */  
.simulation-box .simulation-step-card__label {
position: absolute;
top: 20px;
left: calc(50% - (109px / 2));
width: 109px;
padding: 12px 15px;
border-radius: 999px;
background-color: #d82b90;
color: #fff;
font-weight: 700;
line-height: 1;
letter-spacing: 0.3px;
}
.simulation-box__lead {
margin: 5rem 0 0;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
}
/* =====simulation-balloon-text===== */  
.simulation-balloon-text {
display: table;
position: relative;
margin: 4.8rem auto 5px;
padding: 0 20px;
text-align: center;
font-weight: 700;
font-size: 18px;
}
.simulation-balloon-text::before,
.simulation-balloon-text::after {
border-left: 2px solid #1f1f1f;
content: "";
position: absolute;
bottom: 2px;
height: 26px;
width: 3px;
}
.simulation-balloon-text::before {
left: 0;
transform: skew(25deg);
}
.simulation-balloon-text::after {
right: 0;
transform: skew(-25deg);
} 
/* =====pc===== */  
@media screen and (min-width: 768px) {
.number-list {
width: auto;
}
.w260 {
width: 260px;
}
.pc-mb20 {
margin-bottom: 20px;
}
#pagetop {
bottom: 90px;
right: 60px;
}
.image-btn a:hover {
opacity: 0.7;
}
.pc-hidden {
display: none;
   }
.mt8 {
margin-top: 8rem!important;
}
.simulation-balloon-text {
margin-top: 8rem;
}
.simulation-step-card__title {
height: 45px;
}
 /* ----- simulation-box ----- */
.simulation-box {
position: relative;
margin: 5.6rem auto;
border: 2px solid #e5e5e5;
border-radius: 8px;
padding: 30px;
max-width: 800px;
}

 /* ----- simulation-step-card-wrap ----- */
.simulation-step-card-wrap {
display: flex;
flex-flow: row wrap;
margin: 7.1rem 0 0;
gap: 32px 80px;
  }
  
/* ----- simulation-step-card ----- */
.simulation-step-card {
position: relative;
width: calc((100% - (80px * 2)) / 3);
  }
.simulation-step-card::after {
position: absolute;
width: 1px;
height: 100%;
top: 0;
left: -40px;
background-color: #D8D8D8;
content: "";
  }
.simulation-step-card:nth-child(3n+1)::after {
content: none
  }
.simulation-step-card__inner {
padding: 3.9rem 2.4rem 4rem;
  }
.simulation-step-card__label {
position: absolute;
top: -16px;
left: calc(50% - (109px / 2));
width: 109px;
padding: 12px 15px;
border-radius: 999px;
background-color: #d82b90;
color: #fff;
font-weight: 700;
line-height: 1;
letter-spacing: 0.3px;
  }
.simulation-step-card__detail {
display: flex;
flex-direction: column;
margin-top: .5rem;
padding: 0 1.2rem;
  }
.simulation-step-card__title {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
  }
.simulation-step-card__image {
margin-top: 3rem;
  }
.simulation-step-card__image + .simulation-step-card__link {
margin: 3.4rem 0 0;
  }
.simulation-step-card__link {
position: relative;
display: inline-block;
width: fit-content;
margin: 1.4rem 0 0;
color: #ad2273;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
  }
.simulation-step-card__link:hover {
text-decoration: underline;
  }
.simulation-step-card__link::after {
position: absolute;
top: 50%;
right: -20px;
width: 8px;
height: 16px;
margin-top: -6px;
background: url(/app-files/img/arrow_01.svg) no-repeat left top / 100%;
content: "";
  }

  /*------ simulation-media ------*/
.simulation-media {
display: flex;
align-items: center;
gap: 16px;
width: 704px;
margin: 5.6rem auto 0;
  }
.simulation-media__head > *:first-child,
.simulation-media__body > *:first-child {
margin-top: 0;
  }
.simulation-media__text {
margin: 1rem 0 1.5rem;
  }
.simulation-media__lead {
margin: 1rem 0 0;
font-size: 1.8rem;
font-weight: 700;
  }
}


@media only screen and (max-width: 767.98px) {
#pagetop {
bottom: 90px;
right: 20px;
}
.mt8 {
margin-top: 5.6rem !important;
}
 /* ----- simulation-box ----- */
.simulation-box {
position: relative;
margin-top: 5.6rem;
padding: 30px 10px;
border: 2px solid #e5e5e5;
border-radius: 8px;
  }

 /* ----- simulation-step-card-wrap ----- */
 .simulation-step-card-wrap {
margin: 6.2rem 0 0;
  }
  /* ----- simulation-step-card ----- */
.simulation-step-card {
position: relative;
max-width: 400px;
margin: 0 auto;
  }
.simulation-step-card + .simulation-step-card {
margin-top: 4rem;
  }
.simulation-step-card:nth-child(3n+1)::after {
content: none
  }
.simulation-step-card__inner {
padding: 3.8rem 2.4rem;
  }
.simulation-step-card__label {
position: absolute;
top: -16px;
left: calc(50% - (109px / 2));
width: 109px;
padding: 12px 15px;
border-radius: 999px;
background-color: #d82b90;
color: #fff;
font-weight: 700;
line-height: 1;
letter-spacing: 0.3px;
  }
.simulation-step-card__detail {
display: flex;
flex-direction: column;
margin-top: .5rem;
padding: 0 1.6rem;
  }
.simulation-step-card__title {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
  }
.simulation-step-card__image {
margin-top: 3rem;
text-align: center;
  }
.simulation-step-card__image + .simulation-step-card__link {
margin: 3.2rem 0 0;
  }
.simulation-step-card__link {
position: relative;
display: inline-block;
width: fit-content;
margin: 1.4rem 0 0;
color: #ad2273;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.3;
  }
.simulation-step-card__link::after {
position: absolute;
top: 50%;
right: -20px;
width: 8px;
height: 16px;
margin-top: -6px;
background: url(/app-files/img/arrow_01.svg) no-repeat left top / 100%;
content: "";
  }
/*------ simulation-media ------*/
.simulation-media {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
margin: 3.2rem auto 0;
  }
.simulation-media__head > *:first-child,
.simulation-media__body > *:first-child {
margin-top: 0;
  }
.simulation-media__head {
flex-shrink: 0;
margin: 0 auto;
  }
.simulation-media__text {
margin: 1rem 0 2rem;
font-size: 1.4rem;
line-height: 1.3;
  }
.simulation-media__lead {
margin: .8rem 0 0;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
  }
/* ===吹き出し=== */
.simulation-chatting::after {
width: 131px;
height: 82px;
right: -14rem;
 }


}