@charset "UTF-8";
/*
* style_app.css
* description : THE GRAND SLAM [ APPLICATION ]
*
* Created  2021/11/4.
* Last Update 2021/11/4.
*/




/* INDEX */
/*[[[ Contents ]]]*/

/*----- [[[ APPLICATION for Pages ]]] -----*/
/*----- [[[ Head Box ]]] -----*/
/*----- [[[ Application Introduce ]]] -----*/
/*----- [[[ Step Info ]]] ----- */
/*----- [[[ Attention Rich Box ]]] ----- */
/*----- [[[ WEB Monshin ]]] ------*/









/*
[[[ Contents ]]]
*/

/*----- [[[ APPLICATION for Pages ]]] -----*/

a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

/*----- [[[ Head Box ]]] -----*/

.headBox.step {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 box-sizing: border-box;
 text-align: center;
 margin: 0;
 padding: 0;
}
.headBox.step dt,
.headBox.step dd {
 display: flex;
 align-items: center;
 
}


@media screen and (min-width: 768px) {
 .headBox.step dt {
  flex-basis: 92px;
  width: 92px;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
 }
 .headBox.step dd {
  flex-basis: calc(100% - 92px);
  width: calc(100% - 92px);
  flex-grow: 0;
  flex-shrink: 1;
 }

} /* @media screen and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 .headBox.step dt {
  flex-basis: 52px;
  width: 52px;
  justify-content: center;

 }
 .headBox.step dd {
  flex-basis: calc(100% - 52px);
  width: calc(100% - 52px);
  flex-grow: 0;
  flex-shrink: 1;
  text-align: left;
 }

} /* @media screen and (max-width: 767px) end */






/*----- [[[ Application Introduce ]]] -----*/

/* App Title Box */
.app-info-box {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
}
.app-info-box dt {
 flex-basis: 92px;
 width: 92px;
 flex-grow: 0;
 flex-shrink: 0;
 margin-bottom: 0;
}
.app-info-box dt figure {
 margin: 0;
 padding: 0;
}
.app-info-box dd {
 flex-basis: calc(100% - 92px);
 width: calc(100% - 92px);
 flex-grow: 1;
 flex-shrink: 1;
 margin-bottom: 0;
}
.app-info-box dd > div {
 padding: 1rem 0 1rem 2rem;
}

.app-info-box dd [class*=header] {
 line-height: 1.4;
 margin-top: 0;
 margin-bottom: 0;;
}


@media screen and (max-width: 767px) {
 .app-info-box dt {
  flex-basis: 68px;
  width: 68px;
 }
 .app-info-box dd {
  flex-basis: calc(100% - 68px);
  width: calc(100% - 68px);
 }

} /* @media screen and (max-width: 767px) end */


.app-main-image {
    position: absolute;
    top: -90px;
    left: 70px;
}
@media screen and (max-width: 991px) {
    .app-main-image {
        position: static;
    }
}



/* App Download */
.flex-list.app-icon.jc-center {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 0;
}

.flex-list.app-icon > li img {
 max-width: 220px;
}





/*----- [[[ Step Info ]]] ----- */
.flex-list li {
 margin-bottom: 0.875rem;
}

.step-info-img {
    max-height: auto;
}
@media screen and (max-width: 991px) {
.step-info-img {
    max-height: 350px;
}
}

@media screen and (min-width: 768px) {
 .second-list {
  margin-left: 1.85rem;
 }

 .flex-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
 }
 .flex-list.jc-center {
  justify-content: center;
 }

 /* 50% */
 .flex-list.wt-50 > li {
  flex-basis: calc(50% - 20px / 2);
  width: calc(50% - 20px / 2);
  margin: 20px 20px 0 0;
 }
 .flex-list.wt-50 > li:nth-child(2n) {
  margin-right: 0;
 }

 /* 33% */
 .flex-list.wt-33 > li {
  flex-basis: calc(33.33333% - 40px / 3);
  width: calc(33.33333% - 40px / 3);
  margin: 20px 20px 0 0;
 }
 .flex-list.wt-33 > li:nth-child(3n) {
  margin-right: 0;
 }

 /* 25% */
 .flex-list.wt-25 > li {
  flex-basis: calc(25% - 60px / 4);
  width: calc(25% - 60px / 4);
  margin: 20px 20px 0 0;
 }
 .flex-list.wt-25 > li:nth-child(4n) {
  margin-right: 0;
 }

} /* @media screen and (min-width: 768px) end */


@media screen and (max-width: 991px) and (min-width: 768px) {
 /* 25% */
 .flex-list.w-25 > li {
  flex-basis: calc(50% - 20px / 2);
  width: calc(50% - 20px / 2);
  margin: 20px 20px 0 0;
 }
 .flex-list.w-25 > li:nth-child(2n) {
  margin-right: 0;
 }

} /* @media screen and (max-width: 991px) and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 .flex-list li:last-child {
  margin-bottom: 0;
 }

} /* @media screen and (max-width: 767px) end */



/* [[[ Circle Number ]]]*/
.maru {
 width: 50px;
 height:50px;
 border-radius: 50%;
 line-height: 50px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 font-weight: bold;
}
.maru + p {
 margin-top: 1rem;
 font-size: 16px;
}


@media screen and (max-width: 1199px) and (min-width: 992px) {
 .maru + p {
  font-size: .95vw;
 }

} /* @media screen and (max-width: 1199px) and (min-width: 992px) end */


@media screen and (max-width: 991px) and (min-width: 768px) {
 .maru + p {
  font-size: 2vw;
 }

} /* @media screen and (max-width: 991px) and (min-width: 768px) end */





/*----- [[[ Attention Rich Box ]]] ----- */
.rich-box,
.rich-box dt,
.rich-box dd {
 margin-bottom: 0;
}

.rich-box {
 border-bottom: 1px solid #dddddd;
}
.rich-box dd {
 border-top: 1px solid #dddddd;
}






/*----- [[[ WEB Monshin ]]] ------*/
.point-list,
.point-list dt,
.point-list dd {
 margin-bottom: 0;
}

@media screen and (min-width: 768px) {
 /* Step List */
 .point-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
 }
 .point-list dt {
  flex-basis: auto;
  width: auto;
  flex-shrink: 0;
  flex-grow: 0;
  /* text-align: center; */
 }
 .point-list dd {
  flex-shrink: 1;
 }

 .point-list dd .flex-box {
  display: flex;
 }

} /* @media screen and (min-width: 768px) end */