/* ============================================
     3. ここから下に自分のスタイルを書いていく
     ============================================ */
.wrapper{
   display: flex;
   flex-direction: column;
   gap: 10%;
   width: 90%;
   align-items: center;
   margin: 0 auto;
   word-break: break-all;
   position: relative;
}
.wrapper::before{
   content: "";
   position: absolute;
   background: no-repeat;
   background-image: url(https://ikkyosai.com/shinkan/57/img/entry/asiato.svg);
   width: 80%;
   height: 78%;
   background-position-x: center;
}
.inline_block{
   display: inline-block;
}

.line, .underline{
   color: var(--clr-blue);
   margin: 0 2.5px;
   border-bottom: 1px solid var(--clr-blue);
   cursor:pointer;
}
.paragraph_box a{
   transition: all 0.2s ease;
}
.paragraph_box a:hover{
   transform: translateY(3px);
   text-shadow: 0 0 1px;
}
.subtitle{
   display: flex;
   flex-direction: row;
   gap: 30px;
   align-items: center;
}


main{
   background-color: #f0e9d7;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 60px; 
}

.steps_wrapper{
   display:flex;
   flex-direction:column;
   gap:30px;
   position: relative;
}
.steps{
    padding: 3% 0;
    position: relative;
}
.step_deco{
   display:flex;
   flex-direction:column;
   gap:15px;
   width:15%;
   align-items:center;
}
.step_number{
    font-size: 20px;
    display: flex;
    position: relative;
    width: 100%;
    height: 55px;
    z-index: 1;
    color: var(--clr-beige);
    padding-top: 13px;
    padding-left: 11.5px;
}
.step_number::before{
   position: absolute;
   content: "";
   width: 35px;
   height: 47.5px;
   background-color: var(--clr-lightorange);
   top: 5px;
   left: 5px;
   z-index: -1;
}
.step_number::after{
   content: "";
   position: absolute;
   background: no-repeat;
   background-image: url(https://ikkyosai.com/shinkan/57/img/entry/kitte.svg);
   width: 55px;
   height: 70px;
   top: -7px;
   left: -5px;
   z-index: -2;
}

.step_main {
   display: flex;
   flex-direction: column;
   text-align: center;
}
.step_title{
   font-size: clamp(14px, 3vw, 22px);
   color:var(--black);
   font-weight:bold;
   background-color: var(--clr-beige);
   box-shadow: 0 0 8px 8px var(--clr-beige);
   position: absolute;
   width: 100%;
   text-align: center;
   margin-left: 2%;
}

.paragraph_box {
   color: var(--clr-text);
   margin: 0 auto;
   text-align: justify;
   font-size: clamp(12px, 2vw, 16px);
   margin-bottom: 20px;
   padding: 12px;
   background-color: var(--clr-lightbeige);
   border-radius: 8px;
   width: 93%;
   margin-top: 20px;
}
.rules {
   font-size: 12px;
   color: #1a1a1a;
   background-color: var(--clr-lightbeige);
   border-radius: 8px;
   position: relative;
   padding: 10px 18px 18px 30px;
   margin-top: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.list_title{
   display: flex;
   justify-content: center;
   margin-right: 22px;
}
.checklist{
   font-size: 14px;
   color: var(--clr-orange);
   position: relative;
}
.checklist::after{
   content: "";
   background-color: var(--clr-orange);
   height: 1px;
   width: 75px;
   position: absolute;
   top: 21px;
   left: 0;
}
.check::before {
   content: "";
   position: absolute;
   background-image: url(https://ikkyosai.com/shinkan/57/img/entry/check.svg);
   width: 10px;
   height: 10px;
   top: 3.5px;
   left: -15px;
}

.check {
   position: relative;
}

.midtitle{
   margin-top: 10%;
}

.viewmore-wrap{
   display:inline-flex;
   flex-direction:column;
   align-items:center;
   margin:0 auto;
   --current-main:var(--clr-orange);
   --current-sub:var(--clr-lightorange);
   transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.viewmore-text{
   font-size:13px;
   color:var(--current-main);
   text-align:center;
   transition: text-shadow 0.25s ease;
   margin-left: 0;
}

.viewmore-decoration{
   position:relative;
   width:100%;
   transition: filter 0.25s ease;
}

.viewmore-line{
   width:100%;
   border-bottom:1.5px dashed var(--current-main);
}

.viewmore-arrow2{
   position:absolute;
   right:-15px;
   bottom:0;
   width:20px;
   border-bottom:1.5px solid var(--current-main);
   transition: right 0.25s ease;
}

.viewmore-arrow2::after{
   content:"";
   position:absolute;
   top:-4px;
   right:-1px;
   width:10px;
   height:1.5px;
   background-color:var(--current-main);
   transform:rotate(45deg);
}

/* hover */


.viewmore-wrap:hover .viewmore-text{
   text-shadow:0 0 3px var(--current-sub);
}

.viewmore-wrap:hover .viewmore-decoration{
   filter:drop-shadow(0 0 3px var(--current-sub));
}
.viewmore-wrap:hover{
   transform: translateX(5px);
}

/* レスポンシブ用 */
@media screen and (min-width:1024px){
   .title{
      margin-top: 60px;
   }
   .pagetitle{
      margin-bottom: 45px;
   }
   main{
      margin-bottom: 90px;
   }
   .wrapper{
      width: 70%;
   }
   .wrapper::before{
      background-image: url(https://ikkyosai.com/shinkan/57/img/entry/asiato_large.svg);
      background-position-x: center;
   }
   .subtitle{
      height: 150px;
   }
   .step_number{
      font-size: 35px;
      padding-top: 23px;
      padding-left: 22px;
  }
  .step_title{
   margin-top: 50px;
  }
  .step_number::before{
     width: 60px;
     height: 85px;
     top: 10px;
     left: 11px;
  }
  .step_number::after{
     background-image: url(https://ikkyosai.com/shinkan/57/img/entry/kitte_large.svg);
     width: 95px;
     height: 120px;
  }
  .paragraph_box{
      width: 90%;
      padding: 20px;
  }
  
   .rules {
      font-size: 16px;
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 50px;
   }
   .checklist{
       font-size: 18px;
       font-weight: 600;
   }
   .checklist::after{
      height: 1.5px;
      width: 97px;
      top: 25px;
   }
   .check::before {
      background-image: url(https://ikkyosai.com/shinkan/57/img/entry/check.svg);
      background-size: contain;
      width: 15px;
      height: 15px;
      top: 5px;
      left: -20px;
   }
   .list_contents p{
      padding: 5px 0;
   }
   .viewmore-text{
      font-size: 19px;
   }
}