/* ----------------------------------------
	setting
-------------------------------------------*/
*, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
hr{ display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio,canvas,img,video{ vertical-align: middle; }
fieldset{	border: 0; margin: 0; padding: 0; }
textarea{ resize: vertical; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
table,div,ul,ol,li,dl,dt,dd{ list-style: none; margin: 0; padding: 0; }
table{ border-collapse:collapse; border-spacing:0; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ display:block; }
nav ul,li{ list-style:none; }
img{ max-width: 100%; height: auto; margin: 0; padding: 0; border:0; outline: none; border-style: none; vertical-align: bottom; line-height: 0; }
img,iframe,object{ max-width:100%; }	/* モダンブラウザ用 */
img[src$=".svg"]{	width: 100%; }		/* SVG IE対策 */


:root{
	--green: rgba(100,182,40);
	--sub-green: rgba(82,147,73);
	--font-black: rgba(51,51,51);
	--bg-color: rgba(252,247,222);
	--bg-sub-color: rgba(225,217,190);
	--beige: rgba(242,236,213);
	--brown: rgba(90,60,30);
	--sub-brown: rgba(149,121,94);
	--text-color: rgba(51,51,51);	
	
	--green-rgb: 100,182,40;
	--sub-green-rgb: 82,147,73;
	--font-black-rgb: 51,51,51;
	--bg-color-rgb: 252,247,222;
	--bg-sub-color-rgb: 225,217,190;
	--text-color-rgb: 51,51,51;
	
	
	--font-en: "Quicksand", sans-serif;
	--page-width: 82%;
	--max-width: 1300px;
	--hover: 0.7;
}

@media screen and (max-width: 650px){
	:root{
		--page-width: 84%;
	}
}

a,
a:visited,
a:hover,
a:active{
	color: var(--font-black);
	-webkit-tap-highlight-color: transparent rgba(0,0,0,0);
	-moz-tap-highlight-color: transparent rgba(0,0,0,0);
	-ms-tap-highlight-color: transparent rgba(0,0,0,0);
	-o-tap-highlight-color: transparent rgba(0,0,0,0);
	tap-highlight-color: transparent rgba(0,0,0,0);
	text-decoration: none;
	transition: all 0.2s ease;
	-webkit-transform: translateZ(0);
}
a:hover{
	color: var(--main-color);
	text-decoration: none;
}
a img:hover{
	opacity: var(--hover);
}
a img{ 
	text-decoration: none;
	outline: none;
}
a img::before,a img::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
a img,a img::before,a img::after{
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
svg{
	fill: currentColor;
}
.pc{ display: block; }
.sp{ display: none; }

@media screen and (max-width: 650px){
	.pc{ display: none; }
	.sp{ display: block; }
}

/* ----------------------------------------
	cmn
-------------------------------------------*/

html,body{
	height: 100% !important;
	height: -webkit-fill-available;
	background: var(--bg-color);
}
html{
	font-size: 62.5%;
	line-height: 2;
	font-feature-settings: 'palt' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
body{
	color: var(--font-black);
	font-size: 18px;
	letter-spacing: 0.05em;
	text-align: center;
	font-weight: normal;
	word-wrap: break-word;
	font-family:"Quicksand","Zen Kaku Gothic New",sans-serif;
}
.fade{
	opacity: 0;
	transform: translateY(16px);/* 下にずれる幅 */
	transition: opacity 1.1s, transform 1.0s;
}
.fade.active{
	opacity: 1;
	transform: translateY(0px);
}
.more_link a{
	display: block;
	width: 300px;
	height: 80px;
	line-height: 80px;
	border-radius: 40px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background-color: var(--green);
}
.more_link a:hover{
	background-color: var(--sub-green);
}
.more_link a .button__label{
	padding-right: 10%;
	background: url(../img/common/ic_circle_arrow_white.svg) right center / 20px auto no-repeat;
}
.more_link a span span{
	display: inline-block;
}
.more_link a:hover span span{
	transition: .5s;
	-webkit-transform: rotateX(360deg);
	transform: rotateX(360deg);
}

#container{
	position: relative;
	overflow: hidden;
	width: 100%;
}
#wrapper_all{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 1000px){
	
	.more_link a .button__label{
		padding: 2% 0;
		padding-right: 10%;
	}
}

@media screen and (max-width: 650px){	
	
	html{
		line-height: 1.8;
	}
	body{
		font-size: 14px;
		letter-spacing: 0;
	}
	.more_link a{
		width: 100%;
		height: 52px;
		line-height: 52px;
		border-radius: 26px;
		font-size: 14px;
	}
	.more_link a .button__label{
		padding: 1% 0;
		padding-right: 10%;
	}
}


/* ----------------------------------------
	g_nav
-------------------------------------------*/

.g_nav{
	position: relative;
	overflow: hidden!important;
	width: 100%;
}
.drawer_nav_wrap{
	display: flex;
	flex-direction:row-reverse;
	justify-content: space-between;
	width: 100%;
	height: auto;
	min-height: 100vh;
}
.drawer_nav_wrap .main_nav_area{
	position: relative;
	overflow: hidden;
	width: 54%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
.main_nav_area .loop{
	position: absolute;
	bottom: -3%;
	z-index: -1;
}
.main_nav_area .loop .loop__item{
	color: rgba(var(--bg-sub-color-rgb),0.3);
}
.drawer_nav_wrap .nav_bg{
	position: relative;
	width: 46%;
	background: url(../img/common/nav_visual.jpg) center center / cover no-repeat;
}
#main_nav{
	z-index: 0;
	width: 60%;
	margin: 0 auto;
}
#main_nav ul{
	width: 100%;
}
#main_nav .g_nav__list li{
	text-align: left;
	border-bottom: 1px solid;
	border-color: var(--bg-sub-color);
}
#main_nav .g_nav__list li a{
	display: block;
	font-size: 20px;
	line-height: 3.2;
	font-weight: bold;
	color: var(--brown);
}
#main_nav .g_nav__sub_list{
	padding: 8% 0;
}
#main_nav .g_nav__sub_list li{
	text-align: left;
}
#main_nav .g_nav__sub_list li a{
	color: var(--brown);
	padding-left: 14px;
	background: url(../img/common/ic_arrow_green.svg) left 55% / 6px auto no-repeat;
}
#main_nav .g_nav__list li a:hover,
#main_nav .g_nav__sub_list li a:hover{
	color: var(--sub-brown);
}
#main_nav .g_nav_botton{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main_nav .g_nav_botton li{
	width: 49%;
}
#main_nav .g_nav_botton li a{
	display: block;
	align-content: center;
	width: 100%;
	height: 70px;
	line-height: 70px;
	border-radius: 35px;
	color: #fff;
}
#main_nav .g_nav_botton .req a{
	background: var(--brown);
}
#main_nav .g_nav_botton .req a:hover{
	background: var(--sub-brown);
}
#main_nav .g_nav_botton li a .button__label{
	padding-right: 0;
}
#main_nav .g_nav_botton .req .button__label{
	padding-left: 12%;
	background: url(../img/common/ic_request.svg)left center / 16px auto no-repeat;
}
#main_nav .g_nav_botton .con a{
	background-color: #ff7187;
}
#main_nav .g_nav_botton .con a:hover{
	background-color: #f8a0ad;
}
#main_nav .g_nav_botton .con .button__label{
	padding-left: 13%;
	background: url(../img/common/ic_contact.svg) left center / 20px auto no-repeat;
}

@media screen and (max-width: 960px){
	
	.drawer_nav_wrap .nav_bg{
		background: url(../img/common/nav_visual.jpg) 70% center / cover no-repeat;
	}
	#main_nav .g_nav_botton{
		row-gap: 12px;
	}
	#main_nav .g_nav_botton li{
		width: 100%;
	}
}
@media screen and (max-width: 768px){
	
	.drawer_nav_wrap .main_nav_area{
		width: 100%;
		height: auto;
		min-height: 100vh;
	}
	.drawer_nav_wrap .nav_bg{
		display: none;
	}
}
@media screen and (max-width: 650px){
	#main_nav .g_nav__list li a{
		font-size: 16px;
		line-height: 3.4;
	}
	#main_nav .g_nav__sub_list{
		padding: 8% 0 12%;
	}
	#main_nav .g_nav__sub_list li a{
		line-height: 2.2;
	}
	#main_nav .g_nav_botton li a{
		height: 52px;
		line-height: 52px;
		border-radius: 26px;
		font-size: 13px;
	}
	#main_nav .g_nav_botton .button__label{
		padding: 1% 0;
		padding-left: 12%;
	}
}

/* ----------------------------------------
	side_button_nav
-------------------------------------------*/

#side_button{
	position: fixed;
	top: 25%;
	right: 0;
	width: 66px;
	z-index: 1;
}
#side_button div a{
	display: block;
	width: 100%;
	height: 220px;
	border-radius: 24px 0 0 24px;
}
#side_button .b_req a{
	padding-top: 80px;
	margin-bottom: 24px;
	letter-spacing: 0.25em;
	background: url(../img/common/ic_request.svg) 54% 42px / 18px auto no-repeat;
	background-color: var(--brown);
}
#side_button .b_req a:hover{
	background-color: var(--sub-brown);
}
#side_button .b_con a{
	padding-top: 66px;
	background: url(../img/common/ic_contact.svg) 54% 38px / 22px auto no-repeat;
	background-color: #ff7187;
}
#side_button .b_con a:hover{
	background-color: #f8a0ad;
}
#side_button div a p{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
}
@media screen and (max-width: 960px){
	#side_button{
		width: 60px;
	}
}
@media screen and (max-width: 650px){
	
	#side_button{
		display: none;
	}
}

/* ----------------------------------------
	side_menu
-------------------------------------------*/

#side_menu{
	position: fixed;
	top: 0;
	left: 0;
	width: 26%;
	height: 100%;
	background-color: #fff;
	border-right: 1px solid;
	border-color: var(--beige);
}
#side_menu li a:hover{
	color: var(--green);
}
.s_menu__in{
	width: 80%;
	padding: 8% 0 0;
	margin: 0 auto;
	text-align: left;
}
.s_menu__logo{
	width: 80%;
	margin: 0 auto;
}
.s_menu__list,
.s_menu__sub_list{
	padding: 10% 0 0;
	line-height: 2.2;
}
.s_menu__list a,
.s_menu__sub_list a{
	display: block;
}
.s_menu__list li{
	padding: 4% 0;
	font-weight: bold;
	border-bottom: 1px solid var(--beige);
}
.s_menu__sub_list li{
	font-size: 16px;
	padding-left: 12px;
	background: url(../img/common/ic_arrow_green.svg) left center / 6px auto no-repeat;
}

@media screen and (max-width: 960px){
	#side_menu{
		display: none;
	}
}


/* ----------------------------------------
	main
-------------------------------------------*/

#main{
	position: relative;
	overflow: hidden;
	width: 74%;
	margin-left: 26%;
	background-color: var(--bg-color);
}
#main .logo{
	display: none;
}
#contents{
	width: 100%;
	margin: 0 auto;
}
#contents .con__in{
	width: var(--page-width);
	max-width: var(--max-width);
	margin: 0 auto;
}

@media screen and (max-width: 960px){
	#main{
		width: 100%;
		margin-left: auto;
	}
	#main .logo{
		display: block;
		position: absolute;
		top: 20px;
		left: 4%;
		width: 22%;
		height: auto;
		z-index: 2;
	}
}

@media screen and (max-width: 650px){
	#main .logo{
		top: 12px;
		left: 16px;
		width: 30%;
		min-width: 120px;
	}
}


/* ----------------------------------------
	footer
-------------------------------------------*/

#footer{
	padding-top: 4%;
}
#footer .footer_contact{
	width: 96%;
	margin: 0 auto;
	background: url(../img/common/bg_f_contact.jpg) center center / cover no-repeat;
}
.footer_contact .bg_color{
	width: 100%;
	background-color: rgba(var(--green-rgb),0.8);
}
#footer .footer_contact,
.footer_contact .bg_color{
	border-radius: 60px;
}
.footer_contact__in{
	width: 80%;
	margin: 0 auto;
	padding: 12% 0;
	color: #fff;
	text-align: left;
	letter-spacing: 0.1em;
}
.footer_contact__in .tit{
	font-weight: bold;
	font-size: 24px;
	line-height: 1.6;
}
.footer_contact__in p{
	padding-bottom: 4%;
}
.footer_contact__in .btn_area{
	display: flex;
	justify-content: space-between;
}
.footer_contact__in .btn_area div{
	width: 32%;
}
.footer_contact__in .btn_area div a{
	width: 100%;
	height: 70px;
	line-height: 70px;
	border-radius: 35px;
	color: var(--brown);
	background-color: #fff;
}
.footer_contact__in .btn_area div a:hover{
	background-color: var(--beige);
}
.footer_contact__in .btn_area div a .button__label{
	background: url(../img/common/ic_circle_arrow_green.svg) right 70% / 20px auto no-repeat;
}
.footer_info{
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 8% 0;
	text-align: left;
}
.footer_info ul{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	column-gap: 4%;
}
.footer_info li a{
	display: block;
	font-weight: bold;
	color: var(--brown);
	white-space: nowrap;
}
.footer_info li a:hover{
	color: var(--sub-brown);
}
.footer_info li a .button__label{
	padding-right: 18px;
	background: url(../img/common/ic_outlink.svg) right 70% / 12px auto no-repeat;
}
.copyright{
	font-size: 16px;
	font-weight: bold;
	letter-spacing: .2em;
	color: var(--sub-brown);
	font-family: var(--font-en);
	padding-top: 8%;
}
.pagetop{
	position: absolute;
	bottom: 80px;
	right: 6%;
}
.pagetop a{
	font-size: 16px;
	font-weight: bold;
	color: var(--green);
	font-family: var(--font-en);
}
.pagetop img{
	width: 60px;
	height: auto;
}

@media screen and (max-width: 768px){
	
	.footer_contact__in .btn_area{
		flex-wrap: wrap;
		row-gap: 16px;
	}
	.footer_contact__in .btn_area div{
		width: 49%;
	}
}
@media screen and (max-width: 650px){
	
	#footer{
		padding-top: 0;
	}
	#footer .footer_contact,
	.footer_contact .bg_color{
		border-radius: 28px;
	}
	.footer_contact__in{
		width: 84%;
	}
	.footer_contact__in .tit{
		font-size: 18px;
		padding-bottom: 8%;
	}
	.footer_contact__in p{
		padding-bottom: 4%;
	}
	.footer_contact__in .btn_area{
		row-gap: 12px;
		padding-top: 8%;
	}
	.footer_contact__in .btn_area div{
		width: 100%;
	}
	.footer_contact__in .btn_area div a{
		height: 52px;
		line-height: 52px;
		border-radius: 26px;
		font-size: 13px;
	}
	.footer_contact__in .btn_area div a .button__label{
		padding: 1% 0;
		padding-right: 24px;
	}
	.footer_info{
		padding: 16% 0;
	}
	.footer_info ul{
		display: block;
	}
	.footer_info li a{
		padding-bottom: 4%;
	}
	.copyright{
		font-size: 12px;
	}
	.pagetop{
		right: 4%;
	}
	.pagetop a{
		font-size: 14px;
		letter-spacing: 0.05em;
	}
}