@charset "utf-8";
/* CSS Document 320-640 */


 
/*--------------------------------------------------------------------

headBox

--------------------------------------------------------------------*/
.pageheadBox{text-align: center ;position: relative}
.pageheadBox h2 img{width:28px ; vertical-align: middle;}
.pageheadBox .text01{position: relative; z-index: 1; margin:0px 0 20px; line-height: 1.6; font-size:clamp(1.25rem, 0.938rem + 1.56vw, 1.563rem)}/*20-25*/

.pageheadBox .pic{max-width: 228px; width:  20%; position: absolute; right: 3%; bottom: -35px}

/*--------------------------------------------------------------------

ab

--------------------------------------------------------------------*/
.ab{text-align: center; padding: 20px 5%}
.ab h2{ max-width: 331px; padding: 0; margin: 0 auto}

.ab ul{margin-top: 20px}
.ab li h3{line-height: 1.3; font-weight: 700; color:#ffb423 ; font-size: clamp(1.75rem, 1.313rem + 2.19vw, 2.188rem)}/*28-35*/
.ab li .text{line-height: 1.6; font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem)}/*16-20*/
.ab li {position: relative;; margin-bottom: 20px}
.ab li .a01{max-width: 284px; width: 60%}
.ab li .a01a{max-width: 88px; position: absolute; left: 2%; bottom: 35% }
.ab li .a01b{max-width: 72px; position: absolute; left: 6%; bottom: 28%}

.ab li .a02{max-width: 284px; width: 60%}
.ab li .a02a{max-width: 99px; position: absolute; right: 0; bottom: 35%}
.ab li .a02b{max-width: 74px; position: absolute; right: 3%; bottom: 23%}

.ab li .a03{max-width: 284px; width: 60%}
.ab li .a03a{max-width: 89px; position: absolute; right: 3%; bottom: 20% }

.ab .line{font-size:clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem) }/*18-22*/

/*--------------------------------------------------------------------

pre+ ご用意いただきたいもの + 

--------------------------------------------------------------------*/
.pre{margin-top: 50px; background: #ffb423; text-align: center; padding: 40px 0 60px}
.pre h2{font-size:clamp(1.5rem, 0.5rem + 5vw, 2.5rem)}/*24-40*/
.pre .plas{margin-bottom: 0}
.pre .plas:before{color: #fff}
.pre .plas:after{color: #fff}

.pre ul{margin: 20px 5% 0}
.pre li{background: #fff; border-radius: 20px; padding: 5%; margin-bottom: 15px ; position: relative}
.pre li img{width:160px }
.pre li p{margin-top: 10px; line-height: 1.5; font-size:clamp(1.125rem, 1rem + 0.63vw, 1.25rem)}/*18-20*/
.pre li p span{font-size: 15px; padding-left: 8px}
.pre li .morebtn a{padding:20px 50px 20px  }
.pre li .pic{width:71px; position: absolute; right: -3%; top: 10px}

/*--------------------------------------------------------------------

flow

--------------------------------------------------------------------*/
#flow{text-align: center; padding: 60px 5%; max-width: 1100px; margin: 0 auto}
#flow .plas{margin-bottom: 40px}
.flowBox{ line-height: 1.7; border: solid 2px #ffb423; padding: 5% 5% 40px; border-radius: 20px; position: relative}
.flowBox h3{color:#ffb423;  font-weight: 800; left: -1%; top: -30px; background: #fff; padding:0 5%; border-radius: 10px; position: absolute; border: solid 2px #ffb423; font-size:clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem) }/*20-30*/
.flowBox h3 img{width:35px; vertical-align: middle; padding-right: 10px; margin-top: -10px}
.flowBox .ffl{text-align: left; padding-top: 20px}

.flowBox .ffl .text01 a{color:#22201e } 

.f01 .morebtn a{display: block; line-height: 1.2; padding: 20px 0}
.f01 .ffr a{background:#fe3d3c; box-shadow: 5px 5px 0px #d43130; font-size: clamp(1.375rem, 0.875rem + 2.5vw, 1.875rem) }/*22-30*/
.f01 .svgf { width: 30px;}
.f01 .text01{margin-bottom: 20px}

.f02 .text01{margin-bottom: 10px}
.f02 .text02{margin: 10px 0 30px}
.f02 .ffr{position: relative}
.f02 .ffr .wow{position: absolute; left: -2%; bottom: -5px; max-width:129px ; width: 30%}
.f02 dl{background:#fff1da; margin: 30px 0 0; padding: 5%; border-radius: 20px; text-align: left}
.f02 dd{margin: 20px 0 0}

.f03 .text01{margin-bottom: 20px}
.f03 .ffr{position: relative}
.f03 .ffr .wow{position: absolute; left: -2%; top: -30px; max-width:124px ; width: 30%}

.f03 .step4{position: relative; margin: 50px 0 0; padding-top: 40px}
.f03 .step4 h3{top: 0; left: -7%}
.f03 .step4 .text01{margin-bottom: 40px}
.f03 .step4 .wow img{max-width:110px }

.f03 .step4a{padding: 40px 0 0 ; text-align: left}
.f03 .step4a .tit{color:#ffb423; border-left: 6px solid #ffb423; padding-left: 8px}
.f03 .step4a .text01 , .f03 .step4a .text02{margin-bottom: 30px}
.f03 .step4a .kensa{position: relative; border-radius: 20px; border: 1px dashed #22201e; margin-bottom: 30px; padding: 5%; font-size:14px }
.f03 .step4a .kensa li:first-child{font-size: 18px; position: absolute; left: 5%; top: -23px}
.f03 .step4a .kensa li{margin-bottom: 5px}
.f03 .step4a .kensa li:last-child{margin-bottom: 0}

.f03 .step4a .morebtn{margin: 30px 0 0 auto; text-align: right}


.f05{margin-top: 30px}
.f05 h3{text-align: left; top: -60px; line-height: 1.3; padding: 10px 5%}
.f05 .text01{margin-bottom: 20px}
.f05 .kensa{position: relative; border-radius: 20px; border: 1px dashed #22201e; margin-bottom: 30px; padding: 5%; font-size:14px }
.f05 .kensa img{margin: 20px 40px 0 0 ; width: 60%; max-width:189px }
.f05 .kensa li:last-child{text-align: center}

.f05 .step5a .ffr{position: relative}
.f05 .step5a .ffr img{max-width:128px; position: absolute; right: -3%; top: -130px}

.f05 .otherflex{margin: 30px 0 0; background:#fff1da; padding: 5%; border-radius: 20px }
.f05 .otherflex h4{display: inline-block; font-size:18px; font-weight: 700 }
.f05 .otherflex .plas{margin-bottom: 5px !important}
.f05 .otherflex p{text-align: left; font-size: 15px}
.f05 .otherflex .otgr{margin: 20px 0 0}
.f05 .otherflex .otgr a{display: block; margin-bottom: 10px}
.f05 .otherflex .otgr a:last-child{margin-bottom: 0}

.f05 .otherflex .otgr .plas{margin-bottom: 10px !important}
.f05 .otherflex .otgr p{text-align: left}
.f05 .otherflex .otgr img{max-width: 234px}

.lastcome{text-align: center}

.scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
  text-align:center; margin-top: -50px
}
.arrow-down {
    display: block;
    margin: 0 auto 0 3.5%;
    width: 10px;
    height: 38px;
}
.arrow-down:after {
    content: '';
    display: block;
    margin: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffb423;
    border-right: 2px solid #ffb423;
    behavior: url(-ms-transform.htc);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.scroll-down::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Safari 4+ */
    
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Fx 5+ */
    
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Opera 12+ */
    
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* IE 10+, Fx 29+ */
    
    position: absolute;
    top: 0px;
    left: 5%;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #ffb423;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

@media (max-width: 639px){
.f03 .step4 .wow{transform: rotate( -15deg );}
}

@media (min-width: 640px){
.pageheadBox .text01{width: 1100px; margin: 0 auto; text-align: left}
.ab{ text-align: center; padding: 20px 0; width: 965px; margin: 0 auto ; background: url("../img/dodbg.jpg") no-repeat center 150px ; background-size:601px 458px }
.ab h2{margin: 0 auto}
.ab .text01{font-size: 30px}
.ab ul{display: flex; justify-content: space-between;}
.ab ul li{width:323px }
.ab li .a01 , .ab li .a02 ,.ab li .a03{width: 100%}
.ab li .a01a{ left: -6%; bottom: 30%;}
.ab li .a01b{bottom:22%; }
.ab li .a02a{bottom: 30%}
.ab li .a02b{right: -5%; bottom: 23%;}
.ab li .a03a{bottom:25%; right: 0 }

.pre ul { margin: 20px auto 0; width: 1100px; display: flex; justify-content: space-between;}
.pre li{width: 240px; padding:20px 0px}
.pre li p span{display: block}

.scroll-down::before{left: 4%;}

.pre li .pic{top: -20px;}

#flow {padding: 60px 0; }
.flowBox{padding: 30px 50px 40px; }
.flowBox h3{padding:0 30px }
.flowBox .fflex{display: flex; justify-content: space-between; align-items: center}
.flowBox .ffl{width: 570px}
.flowBox .ffr{width: 306px}

.f02 .ffr .wow{ width: 100%; left: -20%; bottom: -50px;}
.f02 dl{padding:10px 50px 30px; display: flex; justify-content: space-between; flex-direction: row-reverse ; align-items: center}
.f02 dt{width: 440px}
.f02 dd{width: 389px}

.f03 .ffr{position: absolute; right: 200px; top: 20px}
.f03 .ffr .wow {right: 30px; top: -160px; left: auto}
.f03 .step4 .text01 { padding-top: 20px; margin-bottom: 0px;}
.f03 .step4a .tit{font-size: 20px}
.f03 .step4a .kensa{width: 460px ; padding: 20px;}
.step4{position: relative}
.step4 .ffr{position: absolute; right: 0px; top: 20px ; width: 285px;}
.step4a{position: relative}
.step4a .ffr{position: absolute; right: 0px; top: 100px ;width: 457px}

.f05 { margin-top: -10px; position: relative}
.f05 h3{top: -20px; padding: 10px 5%;}
.f05 .ffl{width:470px }
.f05 .ffr{ width: 286px; right: 220px; top: 20px; position: absolute}
.f05 .kensa{width: 465px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center }
.f05 .kensa li{width:190px }
.f05 .kensa li:last-child{width:189px }
.f05 .kensa img {
    margin: 0;
    width: 100%;
    max-width: 189px;
}
.step5a{position: relative}
.step5a .ffr{ width: 375px; right: 0; top: 0 }

.f05 .otherflex{margin: 0; padding:20px 30px ; display: flex; justify-content: space-between;}
.f05 .otherflex .otgl{width: 40%}
.f05 .otherflex .otgr{width: 56%; margin: 0}
.f05 .otherflex .otgr a{display: inline-block; margin-right: 20px}
.f05 .otherflex .otgr a:last-child{ margin-right: 0px}

.lastcome{font-size: 30px}


}