@charset "utf-8";
/* CSS Document */
/*********** 基本設定 ***********/
html{
	height:100%;
}
body{
	height:100%;
	width:100%;
	font-size:16px;
	line-height:1;
	color:#333333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-style: normal;
    font-weight: 500;/*medium*/
}
input,
textarea{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
}

*{
	outline:none;
}
a{
	/*\*/
	overflow:hidden;
	/**/
}

/*iphoneボタン調整*/
input[type="submit"],
input[type="button"] {
	-webkit-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

.clearfix{
	zoom:100%;
}
.clearfix:after{
	content:"";
	clear:both;
	height:0;
	display:block;
	visibility:hidden;
}


.ta_c{
	text-align:center;
}
.ta_r{
	text-align:right;
}
.ta_l{
	text-align:left;
}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

/*********** 透過設定 ***********/
.opac,
.bright,
.easing{
	-webkit-transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
	-o-transition: 0.1s ease-in-out;
	transition: 0.1s ease-in-out;
}
.opac:hover{
  opacity: 0.7;
  filter: alpha(opacity=60);
}
.bright:hover{
	filter: brightness(80%);
}


/*********** 各種設定 ***********/
#wrap{
	min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow: hidden;
}



/*********** header設定 ***********/
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:20px;
    background: #fff;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    box-sizing: border-box;
    z-index: 99999;
}
#h_nav{
    font-weight: 700;
}
#h_nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
}
#h_nav a{
    color:#1B9B08;
    text-decoration: none;
}
#h_nav a:hover{
    color:#333;
}
#h_nav .ha_contact{
    background:#1B9B08;
    color:#fff;
    padding:10px 20px;
}
#h_nav .ha_contact:hover{
    background:#126306;
    color:#fff;
}
.ha_contact i{
    margin-right:10px;
}


/*********** contents設定 ***********/
#contents{
    padding-top:92px;
    padding-bottom:70px;
}
.box1{
    max-width:970px;
    margin:0 auto;
    padding:0 20px;
}
.box2{
    max-width:1070px;
    margin:0 auto;
    padding:0 20px;
}


/*********** mv設定 ***********/
#mv img{
    width:100%;
}





/*********** footer設定 ***********/
footer{
    margin-top: auto;
	background:#1B9B08;
    padding:20px 30px 0;
}
#f_flex{
    display: flex;
    gap:80px;
    
}
.f_contact{
    display: inline-block;
    background: #fff;
    color:#1B9B08;
    width:168px;
    text-align: center;
    padding:10px 0;
    font-weight: 700;
    text-decoration: none;
}
.f_contact i{
    margin-right:10px;
}
#f_nav{
    list-style: none;
    line-height: 1.5;
    border-left:1px solid #fff;
    padding-left:20px;
}
#f_nav a{
    color:#fff;
    text-decoration: none;
}
#copy{
    text-align: center;
    color:#fff;
    padding:4em 0 2em;
}
#page_top{
    position: fixed;
    right:0;
    bottom:100px;
}
#page_top a{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1B9B08;
    font-size: 30px;
    text-decoration: none;
    color:#fff;
    width:60px;
    height:50px;
    border-radius: 50px 0 0 50px;
    border:1px solid #fff;
    border-right:0;
}


/*********** ttl設定 ***********/
.ttl1{
    font-weight: 900;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    line-height: 1.2;
}
#reason .ttl1{
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
}
#nayami .ttl1:after{
    content:url(/img/nayami.svg);
}
#kaiketsu .ttl1:after{
    content:url(/img/kaiketsu.svg);
}
#function .ttl1:after{
    content:url(/img/kinou.svg);
}
#reason .ttl1:after{
    content:url(/img/riyu.svg);
}
#flow .ttl1:after{
    content:url(/img/flow.svg);
}
#faq .ttl1:after{
    content:url(/img/faq.svg);
}

.ttl2 span{
    display: inline-block;
    font-weight: 900;
    font-size: 35px;
    line-height: 1.2;
    background: #1B9B08;
    padding:1em 2em;
    position: relative;
    overflow: hidden;
}
.ttl2 span:before{
    content:'';
    display: inline-block;
    width: 30px;
    aspect-ratio: 1/2;
    clip-path: polygon(0 0,100% 50%,0 100%);
    background:#fff;
    position: absolute;
    left:-1px;
    top:0;
    bottom:0;
    margin:auto 0;
    border-left:2px solid #fff;
}
.ttl2 span:after{
    content:'';
    display: inline-block;
    width: 30px;
    aspect-ratio: 1/2;
    clip-path: polygon(100% 0,0 50%,100% 100%);
    background:#fff;
    position: absolute;
    right:-1px;
    top:0;
    bottom:0;
    margin:auto 0;
}

.ttl3{
    font-size: 40px;
    font-weight: 500;
    color:#fff;
}
.ttl3 b{
    display: inline-block;
    font-weight: 900;
    color:#3B9B2D;
    background: #fff;
    width:60px;
    height:60px;
    line-height: 60px;
    text-align: center;
    margin-right:2px;
    margin-bottom:15px;
}

#page_ttl{
    text-align: center;
    padding:70px 20px;
    background: url(/img/form_bg.webp) center center/cover no-repeat;
    font-size:40px;
    font-weight: 900;
    color:#3B9B2D;
    line-height:0.8;
}
#page_ttl span{
    font-size:20px;
}


/*********** pankuzu設定 ***********/
#pankuzu{
    display: flex;
    padding:20px 20px 0;
    list-style: none;
    font-size:14px;
    color:#999;
}
#pankuzu a{
    color:#3B9B2D;
    margin-right:5px;
    text-decoration: none;
}
#pankuzu i{
    margin-right:5px;
}



/*********** dl設定 ***********/
.dl1{
    display: flex;
    margin-bottom:20px;
    line-height:1.5;
    align-items: flex-end;
}
.dl1 dt{
    border-bottom:2px solid #3B9B2D;
    width:155px;
    color:#3B9B2D;
    font-weight: 700;
    padding-bottom:10px;
}
.dl1 dd{
    border-bottom:2px solid #eee;
    width:calc(100% - 155px);
    padding-bottom:10px;
}



/*********** 悩み設定 ***********/
#nayami:after{
    content:'';
    display: block;
    height: 39px;
    aspect-ratio: 2.5;
    clip-path: polygon(50% 100%,100% 0,0 0);
    background:#1B9B08;
    margin:80px auto 60px;
}
#ul_nayami{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
}
#ul_nayami li{
    background: #FFF6C6;
    border-radius: 20px;
    padding:30px;
    width:calc(50% - 10px);
    box-sizing: border-box;
}
#ul_nayami figure{
    height:182px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:30px;
}
#ul_nayami p{
    font-weight: 700;
    line-height:1.2;
    display: flex;
    justify-content: center;
    gap:4px;
    font-size: 20px;
}
#ul_nayami p:before{
    content: url(/img/check1.svg);
}


/*********** kaiketsu設定 ***********/
#ul_kaiketsu{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
}
#ul_kaiketsu li{
    background:#F0F9EF;
    border-radius: 20px;
    padding:30px;
    width:calc(50% - 10px);
    box-sizing: border-box;
}
#ul_kaiketsu figure{
    height:182px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:10px;
}
#ul_kaiketsu h3{
    font-weight: 700;
    line-height:1.2;
    display: flex;
    justify-content: center;
    gap:4px;
    font-size: 20px;
    color:#1B9B08;
    margin-bottom: 10px
}
#ul_kaiketsu h3:before{
    content: url(/img/check2.svg);
}
#ul_kaiketsu p{
    line-height: 1.5;
}


/*********** 機能設定 ***********/
#ul_kinou li{
    list-style: none;
    display: flex;
    gap:20px;
    margin-bottom:15px;
    background: #fff;
    padding:30px;
    border-radius: 10px;
    justify-content: space-between;
}
#ul_kinou li:nth-child(2n){
    flex-direction: row-reverse;
}
.kinou_img{
    max-width:420px;
    width:45%;
    margin:auto 0;
}
.kinou_atc{
    width:calc(55% - 30px);
    margin-bottom:10px;
}
.kinou_ttl{
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
    margin-bottom:30px;
    line-height: 1.2;
    gap:5px;
}


/*********** フォームへ設定 ***********/
.to_form{
    background: url(/img/form_bg.webp) center center/cover no-repeat;
    padding:70px 0;
}
.to_form img{
    max-width:90%;
}
.btn_form{
    font-size:35px;
    font-weight: 900;
    color:#1B9B08;
    background: #FCDC4A;
    padding:1em 2em;
    border-radius: 20px;
    display:inline-block;
    max-width:562px;
    text-decoration: none;
}
.btn_form i{
    font-size:45px;
    margin-right:10px;
}


/*********** 理由設定 ***********/
#ul_reason li{
    list-style: none;
    display: flex;
    gap:20px;
    margin-bottom:20px;
    padding-bottom:20px;
    justify-content: space-between;
    border-bottom:1px solid #1B9B08;
}
.reason_img{
    max-width:420px;
    width:43%;
    margin:auto 0;
}
.reason_atc{
    width:calc(57% - 30px);
}
.reason_ttl{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
    margin-bottom:30px;
    line-height: 1.2;
    gap:7px;
    color:#1B9B08;
    margin-bottom:20px;
}
.reason_ttl b{
    background:#1B9B08;
    color:#fff;
    width:47px;
    height:47px;
    display: flex;
    justify-content: center;
    line-height:43px;
    border-radius: 45px;
    font-size: 30px;
    font-weight: 900;
}
.reason_ttl span{
    width:calc(100% - 54px);
}


/*********** flow設定 ***********/
#dl_flow dt{
    border-radius: 10px 10px 0 0;
    background: #3B9B2D;
    color:#fff;
    text-align: center;
    padding:1em;
    font-size: 20px;
    font-weight: 700;
    line-height:1.2;
}
#dl_flow dd{
    border-radius: 0 0 10px 10px;
    background: #fff;
    text-align: center;
    padding:1.5em;
    position: relative;
    margin-bottom:30px;
    line-height:1.5;
}
#dl_flow dd:last-of-type{
    margin-bottom:0;
}
#dl_flow dd:nth-of-type(n):not(:last-of-type):after {
    content: '';
    display:block;
    width: 64px;
    aspect-ratio: 1/cos(65deg);
    clip-path: polygon(50% 100%,100% 0,0 0);
    background: #fff;
    position: absolute;
    bottom:-26px;
    left:0;
    right:0;
    margin:0 auto;
}


/*********** プラン設定 ***********/
#ul_plan{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}
#ul_plan li{
    width:calc(25% - 30px / 4);
    text-align: center;
    font-weight: 700;
}
.plan_ttl{
    color:#fff;
    background: #55DD90;
    border-radius: 10px;
    margin-bottom: 5px;
    padding:0.7em;
    font-size: 20px;
}
#ul_plan li:nth-of-type(2) .plan_ttl{
    background:#5FDBD3;
}
#ul_plan li:nth-of-type(3) .plan_ttl{
    background:#FF9259;
}
#ul_plan li:nth-of-type(4) .plan_ttl{
    background:#FD87B2;
}
#ul_plan div{
    background:#fff;
    border-radius: 10px;
    padding:20px;
    line-height:1.2;
}
.plan_tx{
    margin-bottom:10px;
}
.plan_plice{
    font-size:22px;
    color:#3B9B2D;
}
.plan_plice span{
    font-size:50px;
}


/*********** faq設定 ***********/
.ac_title{
    background: #3B9B2D;
    color:#fff;
    border-radius: 10px;
    font-size:20px;
    font-weight: 700;
    padding:0.7em 2em 0.7em 1em;
    position: relative;
    cursor: pointer;
    margin-bottom:10px;
    line-height:1.2;
}
.ac_title:after {
    content:'\f078';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-weight: 900;
    right:15px;
}
.ac_title.active:after {
    content:'\f077';
}
.ac_child{
    display: none;
    padding:0.7em 1em;
    margin-bottom:20px;
}
.faq_a{
    color:#3B9B2D;
    font-size:20px;
    font-weight: 700;
    line-height:1.2;
}
.faq_tx{
    padding:0.7em 1em 0 1.5em;
}


/*********** form設定 ***********/
#form_table{
    width:100%;
    table-layout: fixed;
}
#form_table th{
    color:#3B9B2D;
    text-align: left;
    padding-bottom:20px;
    width:250px;
    vertical-align:top;
}
#form_table td{
    padding-bottom:20px;
}
.req{
    display: inline-block;
    font-size: 14px;
    background: #E2297C;
    padding:2px;
    color:#fff;
    margin-left:20px;
}
.input1,
#form_table textarea{
    padding:5px 10px;
    font-size: 16px;
    border:1px solid #ccc;
    width:300px;
}
#form_table textarea{
    min-width:100%;
    max-width:100%;
    min-height:100px;
    box-sizing: border-box;
}
.input1:focus,
#form_table textarea:focus{
    border:1px solid #3B9B2D;
}
.form_btn{
    display: inline-block;
    background: #1b9b08;
    color:#fff;
    padding:1em 20px;
    border:0;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
}

.error_wrap{
    background: #efefef;
    padding:20px;
}
.error_messe{
    color: #E2297C;
    line-height:1.7;
}


/*********** font設定 ***********/
.fw400{
    font-weight: 400;/*regular*/
}
.fw500{
    font-weight: 500;/*medium*/
}
.fw700{
    font-weight: 700;/*bold*/
}
.fw900{
    font-weight: 900;/*black*/
}

.fs_m{
    font-size: 20px;
}
.fs_l{
    font-size: 35px;
}

.cl_green{
    color:#1B9B08;
}
.cl_white{
    color:#fff;
}

.lh5{
    line-height: 1.5
}


/*********** bg設定 ***********/
.bg_green{
    background: #3B9B2D;
}
.bg_cream{
    background: #FFF6C6;
}


/*********** アニメーション設定 ***********/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein.fadein-left{
    transform: translate(-30px,0);
}
.fadein.fadein-right{
    transform: translate(30px,0);
}
.fadein.fadein-up{
    transform: translate(0,-30px);
}
.fadein.fadein-bottom{
    transform: translate(0,30px);
}
.fadein.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}


/*********** 余白設定 ***********/
.mb15{
    margin-bottom: 15px;
}
.mb20{
    margin-bottom: 20px;
}
.mb50{
    margin-bottom: 50px;
}
.mb70{
    margin-bottom: 70px;
}

.pt50{
    padding-top: 50px;
}
.pt70{
    padding-top: 70px;
}
.pb70{
    padding-bottom: 70px;
}