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


/*------------------------------------------------------

	common css

------------------------------------------------------*/
*, *: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; }
html { width: 100%; overflow: scroll; font-size: 10px; }
html.fixed {}
html.fixed body { height: 100%; position: fixed; width: 100%;}
body { font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333; line-height: 1.8; background-color: #fff; overflow: hidden;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/
a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; margin-bottom: 50px; }

@media (min-width: 768px) {
	body {}
	.container { max-width: 1000px; }
	.w800 { max-width: 800px; margin-left: auto; margin-right: auto;}
    .w920 { max-width: 920px; margin-left: auto; margin-right: auto;}
	.w960 { max-width: 960px; margin-left: auto; margin-right: auto;}

	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
	a[href^="tel:"]{ pointer-events: none; }
}

@media screen and (min-width:768px) and ( max-width:1050px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body{ }
	.container { margin-left: 15px; margin-right: 15px; width: auto; }
	.pc { display: none !important; }
	.sp { display: block !important; }

}

/*
@font-face {
font-family: "Avenir";
src: url("../fonts/Avenir.ttc") format("truetype");
font-weight: 400;
font-style: normal;
}
*/
/*
@font-face {
font-family: "Avenir";
src: url("../fonts/Avenir.ttc") format("truetype");
font-weight: 900;
font-style: normal;
}
*/


/*------------------------------------------------------

    pageTop

------------------------------------------------------*/
#page-top { position: fixed; bottom:20px; right:20px; z-index:999; }
#page-top a { background: #fff; text-decoration: none; width: 80px; height: 50px; text-align: center; display: block; transition: all 0.2s;border: 2px solid #007F41; border-radius: 5px; color: #007F41; font-size: 1.6rem; padding-top: 10px; }

@media (min-width: 768px) {
    #page-top a:hover { text-decoration:none; opacity: 0.8; }
}

@media (max-width: 767px) {
	#page-top { display: none;}
}


/*------------------------------------------------------

	animation

------------------------------------------------------*/
:root {
    --delay: 0.5s;
    --duration: 500ms;
    --iterations: 1;
}

/**
	js-fade-up
	animation
*/
.js-fade-up { opacity: 0;}
.js-fade-up.animation-on {
	animation-name: basic-animation;
	animation-duration: var(--duration);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
/**
	下から上
*/
@keyframes basic-animation{
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


@media (min-width: 768px) {
	.delay01 { animation-delay: 0.1s; }
	.delay02 { animation-delay: 0.2s; }
	.delay03 { animation-delay: 0.3s; }
	.delay04 { animation-delay: 0.4s; }
	.delay05 { animation-delay: 0.5s; }
	.delay06 { animation-delay: 0.6s; }
	.delay07 { animation-delay: 0.7s; }
	.delay08 { animation-delay: 0.8s; }
	.delay09 { animation-delay: 0.9s; }
	.delay10 { animation-delay: 1.0s; }
	.delay11 { animation-delay: 1.1s; }
	.delay12 { animation-delay: 1.2s; }
	.delay13 { animation-delay: 1.3s; }
	.delay14 { animation-delay: 1.4s; }
	.delay15 { animation-delay: 1.5s; }
	.delay16 { animation-delay: 1.6s; }
	.delay17 { animation-delay: 1.7s; }
	.delay18 { animation-delay: 1.8s; }
	.delay19 { animation-delay: 1.9s; }
	.delay20 { animation-delay: 2.0s; }
}


/*------------------------------------------------------

	menu-btn

------------------------------------------------------*/
#menu-btn { width: 32px; height: 32px; position: absolute; top: 5px; right: 5px; cursor: pointer; z-index: 100; }
#menu-btn span { background-color: #6BBB63; display: block; height: 3px; position: relative; transition: all 0.15s; width: 26px; left: 0; right: 0; margin: auto; }

#menu-btn span:nth-child(1) { top: 7px;}
#menu-btn span:nth-child(2) { top: 13px;}
#menu-btn span:nth-child(3) { top: 19px;}

#menu-btn.active span:nth-child(2) { opacity: 0;}
#menu-btn.active span:nth-child(1) { transform: translateY(8px) rotate(-45deg); }
#menu-btn.active span:nth-child(3) { transform: translateY(-10px) rotate(45deg); }

@media (min-width: 768px) {
	#menu-btn { display: none;}
}

@media (max-width: 767px) {
	#menu-btn {}

}



/*------------------------------------------------------

	header

------------------------------------------------------*/
header { background-color: #fff; border-bottom: 1px solid #6BBB63;}
header .permitted { height: 20px; background-color: #6BBB63; color: #fff; font-size: 1.2rem;}
header .l_col-head {}
header .l_col-head .logo {}
header .l_col-head .logo a { display: block;}
header .l_col-head .logo img {}
header .l_col-head nav {}
header .l_col-head nav p { color: #0FA45B; font-weight: bold; text-align: right;}
header .l_col-nav {}
header .l_col-nav li { font-weight: bold;}
header .l_col-nav li a { color: #007F41; text-decoration: none;}

@media (min-width: 768px) {
	header {}
	header .permitted { padding: 0 20px;}
	header .l_col-head { height: 70px; margin: 0 20px; align-items: center;}
	header .l_col-head .logo {}
	header .l_col-head .logo a {}
	header .l_col-head .logo img {}
	header .l_col-head nav {}
	header .l_col-head nav p { font-size: 1.6rem; }
	header .l_col-nav {}
	header .l_col-nav li { font-size: 1.3rem; }
	header .l_col-nav li a {}
	
	header .l_col-nav li:not(:first-child) { margin-left: 25px;}
}

@media (max-width: 767px) {
	header {}
	header .permitted { display: none;}
	header .l_col-head {}
	header .l_col-head .logo { margin-bottom: 0; height: 46px; padding-top: 10px; padding-left: 15px;}
	header .l_col-head .logo a {}
	header .l_col-head .logo img { height: 26px;}
	header .l_col-head nav { margin-bottom: 0; width: 100%;}
	header .l_col-head nav p { font-size: 1.2rem; position: absolute; top: 12px; right: 50px; }
	header .l_col-nav { background-color: #0FA45B; padding: 20px 20px 50px; display: none;}
	header .l_col-nav li { width: 100%; font-size: 1.6rem; border-bottom: 1px solid #fff; margin-bottom: 0;}
	header .l_col-nav li a { color: #fff; display: block; height: 100%; padding: 15px 18px 4px 10px; position: relative;}
	header .l_col-nav li a::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        width: 8px;
        height: 8px;
	}
}


/*------------------------------------------------------

	footer

------------------------------------------------------*/
footer { background-color: #0FA45B;}
#copy { color: #fff; height: 36px; line-height: 36px;}
#page-top {}

@media (min-width: 768px) {
	footer {}
	#copy { font-size: 1.6rem; }
	#page-top {}
}

@media (max-width: 767px) {
	footer {}
	#copy {}
	#page-top {}
}



/*------------------------------------------------------

	title

------------------------------------------------------*/
.title-a { background: #6bbb63; color: #fff; text-align: center; font-weight: normal; height: 100px; line-height: 100px; }
.title-b { font-size: 2.8rem; font-weight: bold; text-align: center; color: #007f41; }
.title-c { background: #0FA45B; color: #fff; text-align: center; font-weight: normal; height: 100px; line-height: 100px; }

@media (min-width: 768px) {
	.title-a { font-size: 3.6rem; margin-bottom: 50px;  }
	.title-c { font-size: 3.6rem; margin-bottom: 50px; }
}

@media (max-width: 767px) {
	.title-a { font-size: 2.4rem; margin-bottom: 30px; }
	.title-b { font-size: 2rem; }
	.title-c { font-size: 2.4rem; margin-bottom: 30px; }
}


/*------------------------------------------------------

	button

------------------------------------------------------*/
.buttonWrap { text-align: center; }
.button { display: inline-block; }
.button a { display: block; width: 100%; color: #fff; text-decoration: none; }

.button.brown a { background: #8c6239; border-radius: 20px; padding: 15px 100px 15px; font-size: 2.8rem; font-weight: bold; box-shadow:0px 10px 0px 0px #754c24; -moz-box-shadow:0px 10px 0px 0px #754c24; -webkit-box-shadow:0px 10px 0px 0px #754c24; }
.button.brown a:hover { opacity: 0.7; }

.button.green01 a ,
.button.green02 a { font-size: 2rem; padding: 0 15px; border-radius: 25px; }
.button.green01 a::before ,
.button.green02 a::before { content: ""; position: relative; display: inline-block; margin-right: 5px; width: 12px; height: 14px; background: url(../images/b_Arrow.png) no-repeat center center; background-size: 12px auto; }
.button.green01 a { background: #0FA45B; }
.button.green02 a { background: #6bbb63; }


.page-btn-a { margin: 0px auto; font-weight: bold; }
.page-btn-a a { background: #0FA45B; box-shadow: 0px 6px 0px 0px #0C8C4D; border: 1px solid #0FA45B; text-decoration: none; padding: 20px; display: block; border-radius: 20px; text-align: center; color: #fff; transition: 0.1s ease-in-out; position: relative;  top: 0px;}
.page-btn-a.white a {  background: #ffffff; box-shadow: 0px 6px 0px 0px #0C8C4D; border: 1px solid #0FA45B; border-radius: 20px; text-align: center; color: #0C8C4D; position: relative; }
.page-btn-a:not(:last-child) {}

@media (min-width: 768px) {
	.button.green01 a ,
	.button.green02 a { height: 50px; line-height: 50px; }

    .page-btn-a { width: 640px;  }
    .page-btn-a a { font-size: 2.4rem; }
	.page-btn-a a:hover { box-shadow: 0px 0px 0px 0px #0C8C4D; top: 6px; }
    .page-btn-a:not(:last-child) { margin-bottom: 30px; }

}

@media (max-width: 767px){
	.button.brown a { font-size: 2.4rem; }

    .page-btn-a a { font-size: 1.8rem; }
    .page-btn-a:not(:last-child) { margin-bottom: 15px; }

}

@media (min-width: 481px) {
	.button.green01 a ,
	.button.green02 a { min-width: 480px; }
}

@media (max-width: 480px) {
	.button { width: calc(100% - 20px); }
	.button a { width: 100%; }

	.button.brown a { padding: 20px 20px 18px 20px; font-size: 1.8rem; box-shadow:0px 6px 0px 0px #754c24; -moz-box-shadow:0px 6px 0px 0px #754c24; -webkit-box-shadow:0px 6px 0px 0px #754c24; }

	.button.green01 a ,
	.button.green02 a { font-size: 1.4rem; padding: 10px; }
	.button.green01 a::before ,
	.button.green02 a::before { top: 1px; }
}

@media (max-width: 374px) {
	.button { width: 100%; }
	.button.brown { width: 98%; }
	.button.brown a { font-size: 1.6rem; }

	.button.green01 a ,
	.button.green02 a { font-size: 1.2rem; }
	.button.green01 a::before ,
	.button.green02 a::before { top: 2px; }
}

/*------------------------------------------------------

	list

------------------------------------------------------*/
.list-a li { font-size: 1.6rem; }
.list-a li span { color: #007f41; }

@media (max-width: 767px){
	.list-a li { line-height: 1.6em; font-size: 1.4rem; }
	.list-a li span { display: block; text-indent: -0.5em; margin-bottom: 2px; }
}


/*------------------------------------------------------

	side

------------------------------------------------------*/
#side { position: fixed; z-index: 1;}
#side > div {}
#side > div a { color: #fff; font-size: 1.6rem; font-weight: bold; text-decoration: none; position: relative; }
#side .tel {}
#side .tel a { background-color: #F15A24; }
#side .tel .title {}
#side .tel .no {}
#side .form {}
#side .form a { background-color: #6BBB63; display: block; }
#side .form .title {}



@media (min-width: 768px) {
	#side { transform: rotate(90deg); transform-origin: left top; top: 120px; right: -600px; width: 600px;  }

	#side > div {}
	#side > div a { height: 46px; line-height: 46px;}
	#side .tel { width: 370px;}
	#side .tel a { padding-left: 48px;}
	#side .tel a::before { content: ""; width: 30px; height: 30px; background: url(../images/icon_tel.svg) no-repeat center center / 20px auto #fff; border-radius: 50%; position: absolute; left: 8px; top: 7px; right: auto; bottom: 0; transform: rotate(270deg);}
	#side .tel .title {}
	#side .tel .no { transform: rotate(270deg); transform-origin: left top; position: relative; left: -175px; top: 34px; }
	#side .form { width: 220px;}
	#side .form a { padding-left: 48px; }
	#side .form a::before { content: ""; width: 30px; height: 30px; background: url(../images/icon_form.svg) no-repeat center center / 20px auto #fff; border-radius: 50%; position: absolute; left: 8px; top: 7px; right: auto; bottom: 0; transform: rotate(270deg);}
	#side .form .title {}
}

@media (max-width: 767px) {
	#side { width: 100%; height: 50px; left: 0; bottom: 0;}
	#side > div { width: 50%;}
	#side > div a { font-size: 1.6rem; line-height: 1.2; height: 50px; padding-top: 6px;}
	#side .tel { border-right: 1px solid #fff;}
	#side .tel a { justify-content: center;}
	#side .tel .title { margin-bottom: 0; position: relative; padding-left: 45px; background: url(../images/icon_tel2.svg) no-repeat left top / 37px auto; left: -10px;}
	#side .tel .no { display: none;}
	#side .form { text-align: center;}
	#side .form a { display: flex; justify-content: center;}
	#side .form .title { margin-bottom: 0; position: relative; padding-left: 45px; background: url(../images/icon_form2.svg) no-repeat left 6px / 35px auto; left: -10px;}
}


/*------------------------------------------------------



------------------------------------------------------*/


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}