@charset "utf-8";


.page-label { font-weight: 700; font-size: 2.4rem; line-height: 1.5; margin-bottom: 20px; }
.based .page-label { color: #de8614; }
.page-item { position: relative; padding-left: 1em; font-size: 1.8rem; }
.page-item:nth-child(n+2) { margin-top: 10px; }
.based .page-item--ball:before { position: absolute; content: ""; inset: 0.35em auto auto 0; width: 0.7em; height: 0.7em; border-radius: 100%; background: #de8614; }

.step-trimg { display: flex; flex-wrap: wrap; gap: 30px 15px; margin-top: 30px; }
.step-trimg__item { inline-size: calc((100% - 30px) / 3); }

.step2-item + .step2-item { padding-top: 45px; margin-top: 50px; border-top: 1px solid #cccccc; }
.step3-label { background: #f5a33a; color: #fff; font-weight: 700; font-size: 2.4rem; line-height: 1.5; padding: 12px 20px; margin-bottom: 30px; }


.visual-step { display: flex; flex-wrap: wrap; gap: 30px; margin: 40px auto 0; }
.visual-step__list  { width: 100%; margin-top: 10px; margin-bottom: 15px; }
.visual-step__list li + li { margin-top: 5px; }
.visual-step__item { position: relative; background: #fcf9e4; inline-size: calc((100% - 60px) / 3); padding: 20px; display: flex; flex-wrap: wrap; flex-direction: column; }
.visual-step__item + .visual-step__item::after { position: absolute; content: ""; inset: 0 auto 0 -20px; margin: auto 0; height: 15px; aspect-ratio: cos(30deg); clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: #de8614; }
.visual-step__label { font-weight: 700; font-size: 1.8rem; line-height: 1.5; }
.visual-step__label span { color: #de8614; padding-right: 1em; }
.visual-step__txt { font-size: 1.4rem; margin-top: 10px; }

.visual-step__ball { position: relative; padding-left: 1em; font-size: 1.4rem; font-weight: 700; }
.visual-step__ball::before { position: absolute; content: ""; inset: 0.35em auto auto 0; width: 0.8em; height: 0.8em; border-radius: 100%; background: #de8614; }
.visual-step__img { margin: auto auto 0; }

.sct-label { color: #de8614; }
.sct-label span { color: #000; padding-right: 1em; }
.step1-list { margin-top: 20px; }
.step1-item { display: flex; flex-wrap: wrap; gap: 20px; }
.step1-item:nth-child(n+2) { margin-top: 30px; }
.step1-txt .page-note { margin-top: 10px; }
.step1-acce { width: 90px; }
.step1-ex { flex: 1; }
.step1-label { position: relative; font-size: 1.8rem; font-weight: 700; padding-left: 1em; color: #de8614; }
.step1-label::before { position: absolute; content: ""; inset: 0.4em auto auto 0; height: 0.8em; width: 0.8em; border-radius: 100%; background: #de8614; }

.step3-acco { margin-top: 30px; }
.step3-acco + .step3-acco { margin-top: 60px; }
.step3-acco .sct-wrap + .sct-wrap { padding-top: 40px; border-top: 1px solid #ccc; }
.step3-acco__wrap { position: relative; height: 450px; overflow: hidden; }
.step3-acco__wrap::after { position: absolute; content: ""; inset: auto auto 0 0; background: linear-gradient(to top,rgba(255,255,255,1) 15px,rgba(255, 255, 255, 0) 100%); width: 100%; height: 100px; }
.step3-acco__btn { max-width: 250px; margin: 30px auto 0; height: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; background: #20a9b1; border-radius: 25px; color: #fff; cursor: pointer; opacity: 1; transition: 1s; }
.step3-acco__btn.active { display: none; }
.step3-acco__wrap.active::after { opacity: 0; }
.step3-acco__btn { max-width: 250px; margin: 30px auto 0; height: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; background: #20a9b1; border-radius: 25px; color: #fff; cursor: pointer; }
.step3-aside__label { max-width: 500px; margin: 0 auto; }
.step3-aside__img { margin-inline-start: auto; margin-inline-end: auto; max-width: 650px; }

@media (hover: hover) {
   .step3-acco__btn:hover { background: #f075bb; }
}

@media (max-width: 767px) {
   .page-label { font-size: 1.8rem; margin-bottom: 15px; }
   .page-item { font-size: 1.5rem; }

   .visual-step { margin-top: 30px; }
   .visual-step__item { inline-size: 100%; padding: 15px; }
   .visual-step__item + .visual-step__item::after { position: absolute; content: ""; inset: -20px 0 auto 0; margin: 0 auto; transform: rotate(90deg); }
   .visual-step__label { font-size: 1.5rem; max-width: 250px; width: 100%; margin-inline-start: auto; margin-inline-end: auto; }
   .visual-step__txt { font-size: 1.3rem; margin: 5px auto 0; max-width: 250px; width: 100%; }
   .visual-step__list { max-width: 250px; margin-inline-start: auto; margin-inline-end: auto; }
   
   .visual-step__ball { position: relative; padding-left: 1em; font-size: 1.4rem; font-weight: 700; }
   .visual-step__ball::before { position: absolute; content: ""; inset: 0.35em auto auto 0; width: 0.8em; height: 0.8em; border-radius: 100%; background: #de8614; }
   .visual-step__img { max-width: 250px; }
   .step-trimg { max-width: 300px; margin-inline-start: auto; margin-inline-end: auto; }
   .step-trimg__item { inline-size: 100%; max-width: 250px; margin-inline-start: auto; margin-inline-end: auto; }
   .step3-aside__img { margin: 10px auto 0 !important; max-width: 300px; width: 60%; }

}