@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 899px) {
  #hero.hero-under{
    --hero-height: min(250px,80vw);
  }
  .hero-para-wrap{
    aspect-ratio:1/0.33;
  }
  .hero-para-wrap.para-news picture{
    top: 20%;
  }
  /*about*/
  .about-detail-list li{
    grid-template-columns: auto;
    gap:0;
  }
  .about-detail-list li .thumb-box{
    display: grid;
    grid-template-columns:min(600px,80%);
    place-content:center;
  }
  .company-donation{
    grid-template-columns: auto;
    place-items:center;
    gap:min(40px,4vw);
  }
  .company-donation .logo{
    width: min(150px,30vw);
  }
  /*howto*/
  .howto-solve-list > li{
    grid-template-columns: 1fr;
    gap:min(80px,15vw);
  }
  .howto-solve-list > li::before{
   content: none;
  }
  .howto-solve-list > li dl.answer::before{
    content: "";
    position: absolute;
    top: max(-40px,-7.5vw);
    left: 50%;
    translate: -50% -50%;
    background: url(../images/icon/next.svg) no-repeat center / cover;
    aspect-ratio: 1 / 0.7979;
    width: min(40px, 8vw);
    rotate:90deg;
  }
  
  .howto-flow_intro{
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .clm_contents{
    grid-template-columns: 1fr;
  }
  .form-list .form-in{
    grid-template-columns: 1fr;
    gap:min(20px,5vw);
  }
  .form-wrap .link-privacy{
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .select-wrap{
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  
  /*howto*/
  .howto-solve-list > li dl.answer dd{
  }
  .howto-solve-list > li dl.answer dd .bkg{
    bottom: auto;
    top: 0;
    translate: 10% -100%;
  }
  .flow-step-item:not(:last-child)::before{
    content: none;
  }
  .flow-step-item{
    grid-template-columns: 1fr;
    padding-top: min(25px,6vw);
  }
  .flow-step-item .tag{
    width: min(65px,15vw);
    position: absolute;
        bottom: 100%;
        left: 0;
        translate: 0 calc(100% + 15px);
  }
  .flow-step-item .detail > .thumb{
    width: 85%;
    margin: 0 auto;
  }
  .flow-step-item .detail{
    width: 100%;
    margin-left: auto;
  }
  .flow-step-item .detail .comment{
    max-width: inherit;
  }
  .flow-step-item .detail .comment .box-title{
    padding-left:  min(80px,18vw);
  }
  .payments-list{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .payments-list > li{
    width: min(200px,calc((100% - 10px)/2));
  }
  .flow-step-item.wall-bike::before{
    translate: 30% 50%;
  }
  
  /*about*/
  .company-detail-list > div
  ,.legal-list > div{
    grid-template-columns: 1fr;
  }
  .company-detail-list dd
  ,.legal-list dd{
    border-left: none;
  }
  /*form*/
  .page-contact-form .top-text{
    text-align: justify;
  }
}