@charset "utf-8";
/* CSS Document */
/***** #nav_ul_sp設定 ******/
#nav_sp{
    display: none;
    position: fixed;
    width:100%;
    top:80px;
    left:0;
    background:#F4ECE5;
    z-index: 10000;
}
#nav_sp_ul li{
    width:100%;
    border-bottom:1px solid #59BA53;
    list-style: none;
}
#nav_sp_ul a{
    display: block;
    text-align: center;
    padding:1.2em 0;
    text-decoration: none;
    color:#59BA53;
    font-weight: bold;
	-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;
    background:#F4ECE5;
}
#nav_sp_ul i{
    margin-right:5px;
    color:#A9D046;
}
#nav_sp_btn_wrap{
	display: flex;
	justify-content: center;
	gap:10px;
	padding:10px;
}
.nav_sp_btn{
	display:block;
	background:#59BA53;
	color:#fff;
	padding:1em 1.5em;
	border-radius: 100px;
	margin-right:0;	
	text-decoration: none;
	width:7em;
	text-align: center;
}
/***** #menu_btn設定 ******/
#menu_btn {
    display: none;
    width: 45px;
    height:50px;
    position: fixed;
    top:15px;
    right:20px;
    z-index: 999999;
    -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;
    cursor: pointer;
}
#menu_btn span {
    display: block;
    background:#59BA53;
    width: 30px;
    height: 3px;
    position: absolute;
    left: 7px;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
	border-radius: 10px;
}
#menu_btn span:first-child {
    top: 13px;
}
#menu_btn span:nth-child(2) {
    margin-top: -2px;
    top: 50%;
}
#menu_btn span:last-child {
    bottom: 14px;
}
#menu_btn.active{
    position:fixed;
}
#menu_btn.active span:first-child {
    -webkit-transform: translateY(6px) rotate(45deg);
    -moz-transform: translateY(6px) rotate(45deg);
    -ms-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg);
    top: 17px;
}
#menu_btn.active span:nth-child(2) {
    opacity: 0;
}
#menu_btn.active span:last-child {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
    bottom: 16px;
}
#overlay {
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.8);
  position:fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity .5s;
}
#overlay.active {
  width: 100vw;
  height: 100vh;
  opacity: 0.9;
}


/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	/***** #menu_btn設定 ******/
    #menu_btn {
        display: block;
    }

	
	/*********** box設定 ***********/
	#contents{
		padding-top:80px;
	}


	/*********** TEXT設定 ***********/
	.ttl1 span{
		border-bottom:4px solid #59BA53;
		padding-bottom:0.4em;
	}



	/*********** FORM設定 ***********/
	#form_wrap{
		padding:40px 20px;
	}
	#form_table,
	#form_table tbody,
	#form_table tr,
	#form_table th,
	#form_table td{
		display: block;
		width:100%;
	}
	#form_table tr{
		margin-bottom:2em;
	}
	#form_table th{
		padding:0 0 10px 0;
	}
	#form_table td{
		padding:0;
	}


	/*********** 悩み設定 ***********/
	#nayami_ul{
		flex-direction: column;
	}


	/*********** 特徴設定 ***********/
	#feature_ul{
		flex-direction: column;
	}
	#feature_ul li{
		flex:1;
	}
	.feature_img{
		max-width:266px;
		margin:0 auto;
	}
	.feature_dl{
		background:#A9D046;
		border-radius: 10px;
		color:#fff;
		padding:25px;
	}
	.feature_dl dt{
		text-align: center;
		font-size: 24px;
		margin-bottom:1em;
		line-height: 1.2;
	}
	.feature_dl dd{
		line-height: 1.5;
	}
	
	.cap_prev{
		left:10px;
	}
	.cap_next{
		right:10px;
	}



	/*********** 機能設定 ***********/
	#kinou_ul{
		gap:20px;
	}
	#kinou_ul li{
		flex: 0 0 calc((100% - 40px) / 3);
		font-size:clamp(12px,2.5vw,18px);
	}
	.kinou_fgr img{
		margin-bottom:8px;
	}
	.kinou_fgr figcaption{
		line-height:1.2;
	}



	/*********** プラン設定 ***********/
	#plan_wrap{
		flex-direction: column;
		gap:25px;
	}
	.plan_name{
		font-size:clamp(22px,4vw,24px);
	}
	.plan_info{
		font-size:clamp(18px,2.6vw,20px);
	}
	
	.plan_btn:before{
		display: none;
	}
	
	
	/*********** header設定 ***********/
	header{
		height:80px;
		padding:0 20px;
	}
	#h_logo{
		width:auto;
	}
	#h_logo img{
		height:50px;
	}
	#h_nav_ul{
		display: none;
	}



	/*********** MV設定 ***********/
	.mv_text_ss{
		font-size:60%;
		left:auto;
		right:1em;
	}
	#mv_flex{
		padding:0 20px;
		align-items: center;
		flex-direction: column;
	}
	#mv_r{
		margin-top:-10px;
	}
	.mv_btn{
		display: block;
		background: #fff;
		color:#59BA53;
		border:3px solid #59BA53;
		padding:1em 1.5em;
		text-decoration: none;
		width:calc(34% - 5px);
		font-size:clamp(16px,2vw,23px);
		text-align: center;
		border-radius: 100px;
		position: relative;
	}



	/*********** footer設定 ***********/
	#f_flex{
		flex-direction: column;
		gap:30px;
		margin-bottom: 60px;
	}
	#f_logo{
		text-align: center;
	}
	#f_logo img{
		width: 70%;
	}
	#f_btn_ul{
		justify-content: center;
		width:100%;
	}
	#f_btn_ul li{
		width:calc(50% - 5px);
		max-width: 200px;
	}
	.f_btn{
		width:100%;
		box-sizing: border-box;
		text-align: center;
	}	
	#f_nav{
		justify-content: center;
		font-size:clamp(14px,2.5vw,16px);
	}


}