@charset "utf-8";

:root {
    /* カラー */
    --color-base1: #EDEDED;
    --color-main: #33AB39;
    --color-accent1: #FFF04E;
    --color-accent2: #F6D60F;
    --color-accent3: #F0382A;
    --color-text: #0D0D0D;

} 



/*--------------------------------
 全体
---------------------------------*/
html {
    /* スムーズスクロール ページ内移動をゆったりと*/
    scroll-behavior: smooth;
}

body {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
}

a {
    text-decoration: none;
}
a:visited{
    /*訪問後の文字色を親要素と同じにする*/
    color: inherit;
}
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

li {
    list-style: none;
}


/*--------------------------------
    アニメーション
---------------------------------*/

/* fadeアニメーション */
.fadeUp {
    -webkit-animation-name: fadeUpAnime;
            animation-name: fadeUpAnime;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    opacity: 0;
}
@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

.fadeUp2 {
    -webkit-animation-name: fadeUpAnime2;
            animation-name: fadeUpAnime2;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
    opacity: 0;
}
@-webkit-keyframes fadeUpAnime2 {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeUpAnime2 {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

.fadeDown {
    -webkit-animation-name: fadeDownAnime;
            animation-name: fadeDownAnime;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
}
@-webkit-keyframes fadeDownAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeDownAnime {
    from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

.fadeLeft {
    -webkit-animation-name: fadeLeft;
            animation-name: fadeLeft;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    opacity: 0;
}
@-webkit-keyframes fadeLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

.fadeRight {
    -webkit-animation-name: fadeRight;
            animation-name: fadeRight;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 1.0s;
            animation-delay: 1.0s;
    opacity: 0;
}
@-webkit-keyframes fadeRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(100px);
                transform: translateX(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(100px);
                transform: translateX(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}


/* ボタンアニメーション */
.wave-animation {
    animation-name: wave-animation;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
@keyframes wave-animation {
    0%, 40%, 60%, 80% {
        transform: scale(1.0);
    }
    50%, 70% {
        transform: scale(0.95);
    }
}



/*--------------------------------
    共通
---------------------------------*/

.inner1000 {
    max-width: 1000px;
    margin: 0 auto;
}
.Form {
    text-align: center;
}
.btn {
    position: relative;
}
.btn:hover {
    top: 3px;
    opacity: 0.9;
}

.img_sp {
    display: none;
}



/*--------------------------------
    Area_main
---------------------------------*/
#area_main {

}

.main_inner {
    background-image: url(../images/001_fv_bg.jpg);
    background-position: top;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.top1 {
    width: 19.2%;
    padding-top: 3.2%;
    margin-left: 9.2%;
}
.top2 {
    width: 45.4%;
    margin: 0 auto;
    margin-top: -12.7%;
}
.top3 {
    width: 21%;
    margin: 0 auto;
    margin-top: -1%;
}
.top4 {
    width: 45.6%;
    margin: 0 auto;
    margin-top: 2.1%;
}
.top5 {
    width: 51.4%;
    margin: 0 auto;
    margin-top: -2%;
}
.top6 {
    width: 30.2%;
    position: absolute;
    right: 0.5%;
    top: 26%; 
    z-index: 0;
}
.top7 {
    width: 100%;
    margin-top: 0.8%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.top7 img {
    filter: drop-shadow(0 3px 6px rgba(33,74,35,.2));
}
.top8 {
    width: 100%;
    padding: 4% 0 4.5% 0;
} 
.top_cta {
    width: 84%;
    margin: 0 auto;
}


/*--------------------------------
    area_worries
---------------------------------*/

.worries_inner {
    background-color: var(--color-base1);
    position: relative;
}

.worries1 {
    width: 76.8%;
    margin: 0 auto;
    padding-top: 10%;
    margin-bottom: 7.2%;
}
.worries2,
.worries3,
.worries4 {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 8%;
}


/*--------------------------------
    area_merit
---------------------------------*/
.merit_inner {
    background-color: #F2FEF3;
    position: relative;
}

.merit1 {
    width: 20%;
    margin: 0 auto;
    margin-bottom: 5.3%;
}
.merit2 {
    width: 100%;
    margin: 0 auto;
}
.merit_box {
    width: 100%;
    padding: 5%;
}
.merit_box_inner {
    width: 100%;
    padding: 5%;
    border: dashed 1px #0D0D0D;
}

.merit3 {
    width: 74.3%;
    margin: 0 auto;
}
.merit4 {
    width: 96.8%;
    margin: 6.2% auto;
}
.merit5 {
    width: 90.4%;
    margin: 0 auto;
}

.merit6 {
    background-image: url(../images/003_merit_006.png);
    background-position: center;
    background-size: cover;
    padding: 7.2% 0 17.5% 0;
}
.merit_cta {
    width: 84%;
    margin: 0 auto;
}
.merit_space {
    width: 100%;
    padding-bottom: 10%;
}


/*--------------------------------
    area_auto
---------------------------------*/
.auto_inner {
    width: 100%;
    background-color: #FFF47A;
    position: relative;
}

.auto_box {
    width: 90%;
    background-color: #FFF;
    margin: 0 auto;
    padding: 6% 0;
    border: solid 2px var(--color-main);
    border-radius: 20px;
}
.auto1 {
    width: 76%;
    margin: 0 auto;
}
.auto2 {
    width: 74%;
    margin: 4.5% auto 0;
}
.auto_space {
    width: 100%;
    padding-bottom: 10%;
}

/*--------------------------------
    area_point
---------------------------------*/
.point_inner {
    width: 100%;
    background-color: #F2FEF3;
    position: relative;
}

.point1 {
    width: 20%;
    margin: 0 auto;
    margin-bottom: 6%;
}
.point2 {
    width: 63.4%;
    margin: 0 auto;
    margin-bottom: 8%;  
}
.point3,
.point4,
.point5 {
    width: 72%;
    margin: 0 auto;
}
.point3,
.point4 {
    margin-bottom: 8%;
}
.point_space {
    width: 100%;
    padding-bottom: 10%;
}


/*--------------------------------
    area_3step
---------------------------------*/
.step_inner {
    width: 100%;
    background-color: #FFF47A;
    position: relative;
}
.step1 {
    width: 20%;
    margin: 0 auto;
    margin-bottom: 6%;
}
.step2 {
    width: 77%;
    margin: 0 auto;
    margin-bottom: 8%;  
}
.step_box {
    width: 90%;
    background-color: #FFFCDF;
    padding: 8% 0;
    margin: 0 auto;
}
.step3 {
    width: 80%;
    margin: 0 auto;
}
.step_space {
    width: 100%;
    padding-bottom: 10%;
}

/*--------------------------------
    area_request
---------------------------------*/
.request_inner {
    width: 100%;
    background-color: #63D469;
    position: relative;
}
.request_ttl {
    width: 100%;
    background-image: url(../images/007_request_001.png);
    background-position: center;
    background-size: 102%;
    padding: 3.5% 0 8.5%;  
}
.request1 {
    width: 55%;
    margin: 0 auto;
}
.request2 {
    width: 90%;
    margin: 4% auto 8%;
}

.request3 {
    width: 100%;
}

.request_cta {
    width: 84%;
    margin: 0 auto;
}
.request_space {
    width: 100%;
    padding-bottom: 10%;
}


/*--------------------------------
    footer
---------------------------------*/
.footer_inner {
    width: 100%;
    padding: 10px;
    background-color: var(--color-text);
}
.footer_copyright {
    font-size: 20px;
    color: var(--color-base1);
    text-align: center;
}

/*--------------------------------
    page_top
---------------------------------*/
#page_top {
    width: 80px;
    position:fixed;
    right: 10px;
    bottom: 20px;
}
#page_top:hover {
    opacity: 0.8;
}

/*========================================================
media Queries 800
=========================================================*/

@media only screen and (max-width: 800px) {
/*--------------------------------
  全体
---------------------------------*/

.img_pc {
    display: none;
}

.img_sp {
    display: inherit;
}


/*--------------------------------
    Area_main
---------------------------------*/
.main_inner {
    background-image: url(../images/001_fv_bg_sp.jpg);
}
.top1 {
    margin-left: 0;
}
.top2 {
    width: 57%;
    margin-top: -10%;
}
.top3 {
    width: 26%;
    margin-top: -1%;
}
.top4 {
    width: 57%;
    margin-top: 2.1%;
}
.top5 {
    width: 64.5%;
    margin-top: -2%;
}
.top6 {
    width: 38%;
    right: -10%;
}
.top8 {
    padding: 4% 0;
} 

.top_cta {
    width: 95%;
}



/*--------------------------------
    area_worries
---------------------------------*/
.worries1 {
    width: 95%;
    padding-top: 15%;
    margin-bottom: 10%;
}
.worries2,
.worries3,
.worries4 {
    width: 95%;
    padding-bottom: 12.5%;
}


/*--------------------------------
    area_merit
---------------------------------*/
.merit1 {
    width: 40%;
    margin-bottom: 9%;
}
.merit_box {
    padding: 5% 2.5%;
}
.merit_box_inner {
    padding: 8.4% 0;
}
.merit3 {
    width: 82%;
}

.merit4 {
    width: 77%;
    margin: 7% auto 5%;
}
.merit5 {
    width: 95%;
    margin: 0 auto;
}
.merit6 {
    background-image: url(../images/003_merit_006_sp.png);
    padding: 9.5% 0 23% 0;
}
.merit_cta {
    width: 95%;
}


/*--------------------------------
    area_merit
---------------------------------*/
.auto_box {
    width: 95%;
    padding: 8% 0;
}
.auto1 {
    width: 89.5%;
}
.auto2 {
    width: 88%;
    margin: 5.5% auto 0;
}


/*--------------------------------
    area_point
---------------------------------*/
.point1 {
    width: 40%;
    margin-bottom: 8%;
}
.point2 {
    width: 70.5%;
    margin-bottom: 10%;  
}
.point3,
.point4,
.point5 {
    width: 90%;
}
.point3,
.point4 {
    margin-bottom: 10%;
}


/*--------------------------------
    area_3step
---------------------------------*/
.step1 {
    width: 40%;
    margin-bottom: 7.5%;
}
.step2 {
    width: 95%;
    margin-bottom: 10%;  
}


.step_box {
    width: 95%;
    padding: 10% 0;
}
.step3 {
    width: 90%;
}

/*--------------------------------
    area_request
---------------------------------*/
.request_ttl {
    background-image: url(../images/007_request_001_sp.png);
    background-size: 103%;
    padding: 2.5% 0 13%;
}
.request1 {
    width: 70%;
}
.request2 {
    width: 95%;
    margin: 5% auto 10%;
}
.request_cta {
    width: 95%;
}

/*--------------------------------
    footer
---------------------------------*/
.footer_copyright {
    font-size: 14px;
}

/*--------------------------------
    page_top
---------------------------------*/
#page_top {
    width: 50px;
}

}

/*========================================================
media Queries 500
=========================================================*/

@media only screen and (max-width: 500px) {

/*--------------------------------
footer
---------------------------------*/
.footer_copyright {
    font-size: 10px;
}

/*--------------------------------
    page_top
---------------------------------*/
#page_top {
    width: 40px;
    bottom: 10px;
}

}


/*========================================================
media Queries 320
=========================================================*/

@media only screen and (max-width: 320px) {

/*--------------------------------
    area_merit
---------------------------------*/
.merit1 {
    width: 50%;
}
/*--------------------------------
    area_point
---------------------------------*/
.point1 {
    width: 50%;
}

/*--------------------------------
    area_3step
---------------------------------*/
.step1 {
    width: 50%;
}



}
