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

h1{
    position: absolute;
    top: 1em;
    left: 2em;
    width: 10em;
    z-index: 10;
}
#mainimage{
    background-color: #e7fbfe;
    padding: 20em 0 0 0;
    background-image: url("../img/back1.png");
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 35%;
    position: relative;
}
#mainimage .title{
    text-align: left;
    color: #2aab3c;
    font-family: "Jost", sans-serif;
    text-transform:uppercase;
    font-weight: 300;
    font-size: 6rem;
    line-height: 1.2;
}
#mainimage h2{
    text-align: left;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 1.6em 0 1em 0;
}
#mainimage .read{
    text-align: justify;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.4;
}
#mainimage .icon{
    text-align: left;
    margin: 5em 0 0 3em;
    width: 20em;
}
#mainimage .icon2{
    position: absolute;
width: 8em;
  top: 10em;
  right: 37%;
}

#step{
    background-color: #f7f3ea;
    padding-bottom: 6em;
}
#step h2,#item h2{
    color: #023232;
    font-size: 3.6rem;
    font-weight: 700;
    padding: 3.5em 0 0 0;
}
#step ul{
    display: flex;
    justify-content: space-between;
    margin-top: 4em;
}
#step li{
    width: 31%;
    background-color: #769283;
    color: #fff;
    border-radius: 1em;
    padding: 3em 2em;
}
#step li .num{
    color: #e5d0b1;
    font-family: "Jost", sans-serif;
    font-size: 3.8rem;
  font-weight: 600;
}
#step li img{
    width: 50%;
}
#step li h3{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    padding: 1em 0;
}
#step li .txt{
    text-align: justify;
}
#step .title2{
    color: #023232;
    font-size: 2.4rem;
    font-weight: 500;
}
#step .read{
    line-height: 2;
    padding: 2em 0;
}
#step dl,#item dl{
    display: flex;
    align-items: center;
    border-top: 1px solid #769283;
    padding: 1.5em 0;
    margin: 0 8em;
}
#step dl:last-of-type, #item dl:last-of-type{
    border-bottom: 1px solid #769283;
}
#step dt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 19em;
}
#step dt .num{
    font-family: "Jost", sans-serif;
    color: #494949;
    font-size: 18rem;
    font-weight: 700;
    line-height: 1;
}
#step dt .icon{
    width: 11em;
}
#step dd{
    flex: 1;
    text-align: justify;
    padding-left: 3em;
}
#step dd h3{
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 0.6em;
}
#step dd .indent{
    line-height: 1.6;
    text-indent: -1em;
    padding: 0.2em 0 0.2em 1em;
}
#step dd .indent strong{
    font-weight: 600;
}
#step .caution{
    background-color: #fff;
    border: 5px solid #769283;
    border-radius: 1em;
    margin: 6em 8em 0 8em;
    padding: 1em 3em 3em 3em;
    text-align: justify;
}
#step .caution h3{
    font-size: 2.4rem;
    font-weight: 600;
    margin: 2em 0 0.6em 0;
}
#step .caution .txt{
    padding-bottom: 1em;
}
#step .caution .indent{
    text-indent: -1em;
    padding-left: 1em;
}
#step .caution .ad{}
#step .caution .txt a{
    display: inline-block;
    position: relative;
}
#step .caution .txt a::after{
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    width: 100%;
    bottom: -0.3em;
}

#item{
    padding-bottom: 6em;
}
#item h2{}
#item .read{
    padding: 2em 0 3em 0;
    line-height: 2;
}
#item dl{
    align-items: flex-start;
    text-align: justify;
}
#item dt{
    width: 17em;
}
#item dd{
    flex: 1;
}


#contact{
    background-color: #f7f7f7;
    padding: 8em 0 1em 0;
}
#contact .title_e{
    font-family: "Jost", sans-serif;
    font-size: 9rem;
    font-weight: 600;
    line-height: 1;
}
#contact h2{
    line-height: 1.5;
    padding: 2em 0 1em 0;
}
#contact .read{}
#contact .pdf{
    padding: 2em 0 3em 0;
}
#contact .pdf a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 5px solid #bebebe;
    border-radius: 0.6em;
    padding: 0.6em 0.6em 0.6em 0;
    width: 19em;
    margin: 0 auto;
}
#contact .pdf img{
    width: 4em;
    margin-right: 1em;
}
#contact .pdf p{
    text-align: left;
    line-height: 1.4;
    padding-top: 0.5em;
}
#contact .pdf p span{
    display: block;
    font-size: 1.5rem;
    text-indent: -0.5em;
}
#contact .telbox{
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    padding: 2em 0 2.5em 0;
    margin: 0 8em 2.5em 8em;
}
#contact .telbox h3{
    font-size: 2rem;
    font-weight: 500;
}
#contact .telbox .tel{
    font-family: "Jost", sans-serif;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.4em 0 0.1em 0;
}
#contact .telbox .txt{
    font-size: 1.6rem;
}


#form{
    margin: 0 8em;
}
#form h3{
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 1.5em;
}
#form .w_box{
    background-color: #fff;
    padding: 2em 4em;
    border-radius: 0.6em;
    margin-bottom: 3em;
    text-align: left;
    font-size: 1.6rem;
}
#form dl{
    display: flex;
    padding: 1.5em 0;
}
#form dt{
    width: 19em;
    position: relative;
    padding-top: 0.5em;
}
#form dt.pd0{
    padding-top: 0;
}
#form dt.hisu::after{
    content: "必須";
    display: block;
    position: absolute;
    right: 1em;
    top: 1.1em;
    background-color: #e03173;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
    padding: 0 0.5em 0.2em 0.5em;
    border-radius: 0.3em;
}
#form dd{
    flex: 1;
}
.box3{
    border-radius: 1em;
    background-color: #eeeada;
    padding: 3em 2em;
    margin: 2em -2em;
}
.box3 .txt{
    color: #6c5327;
    text-align: center;
    padding-bottom: 2em;
}
.box3 dl{
    border-top: 1px solid #c4b497;
}
#form #span dl, #form #data dl, #form .noline{
    padding-top: 0;
    border-top: none;
}

#copy{
    background-color: #f7f7f7;
    padding: 2em 1em 5em 1em;
}
#copy p{
    font-size: 1.5rem;
    color: #6c6c6c;
    font-family: "Jost", sans-serif;
}


@media only screen and (max-width: 768px) {
    
h1{
top: 0.5em;
  left: 0.5em;
  width: 6em;
}
#mainimage{
    background-position: 100% 5em;
    background-size: 54%;
}
#mainimage .title{
  font-size: 4.5rem;
}
#mainimage h2{
  font-size: 3.4rem;
}
#mainimage .read{
    font-size: 2rem;
    line-height: 2;
}
#mainimage .icon{
text-align: right;
    margin: 2em 2em 0 auto;
    width: 12em;
}
#mainimage .icon2{
width: 4em;
    top: 15em;
    right: 58%;
}

#step{
    padding-bottom: 6em;
}
#step h2,#item h2{
    font-size: 3rem;
    line-height: 1.4;
    padding: 3.5em 0 0 0;
}
#step ul{
    display: block;
    margin-top: 4em;
}
#step li{
    width: 100%;
    padding: 2em 1em;
}
    #step li:nth-child(2){
        margin: 2em 0;
    }
#step li .num{
}
#step li img{
    width: 30%;
}
#step li h3{
}
#step li .txt{
}
#step .title2{
    font-size: 2.2rem;
}
#step .read{
}
#step dl,#item dl{
    display: block;
    margin: 0;
}

#step dt{
    justify-content:flex-start;
    width: 100%;
}
#step dt .num{
    font-size: 8rem;
}
#step dt .icon{
    width: 5em;
    margin-left: 1em;
}
#step dd{
    padding-left: 0;
    padding-top: 0.8em;
}
#step dd h3{
}
#step dd .indent{
}
#step dd .indent strong{
}
#step .caution{
    margin: 6em 0 0 0;
    padding: 1em 1em 2em 1em;
}
#step .caution h3{
    font-size: 2.2rem;
    line-height: 1.4;
    margin: 2em 0 0.8em 0;
}
#step .caution .txt{
    padding-bottom: 1em;
}
#step .caution .indent{
}
#step .caution .ad{
    padding-top: 0.5em;
    }

#item{
    padding-bottom: 6em;
}
#item h2{}
#item .read{
    text-align: justify;
}
#item dl{
}
#item dt{
    width: 100%;
    font-weight: 500;
    padding-bottom: 0.6em;
}
#item dd{
}


#contact{
    padding: 6em 0 1em 0;
}
#contact .title_e{
    font-size: 7rem;
}
#contact h2{
    line-height: 1.5;
    padding: 2em 0 1em 0;
}
#contact .read{
    text-align: justify;
    }
#contact .pdf{
}
#contact .pdf a{
}
#contact .pdf img{
}
#contact .pdf p{
}
#contact .pdf p span{
}
#contact .telbox{
    padding: 2em 0;
    margin: 0 0 2em 0;
}
#contact .telbox h3{
    font-size: 2rem;
    font-weight: 500;
}
#contact .telbox .tel{
}
#contact .telbox .txt{
    font-size: 1.6rem;
}


#form{
    margin: 0;
}
#form .w_box{
    border-radius: 0;
    padding: 0 1em;
    font-size: 1.6rem;
    margin: 0 -1.5em;
}
#form dl{
    display: block;
}
#form dt{
    width: 100%;
    padding: 0.5em 0;
    font-weight: 500;
}
#form dt.pd0{
    padding-top: 0;
}
#form dt.hisu::after{
}
#form dd{
}
.box3{
    border-radius: 0.5em;
    padding: 3em 1em;
    margin: 2em -0.5em;
}
.box3 .txt{
    text-align: justify;
}
.box3 dl{
}
#form #span, #form #data, #form .noline{
margin-top: -0.5em;
}
    #form .noline dt{
        display: none;
    }

}