@charset "utf-8";

/* 共通パーツ */
html, body{
	width:100%;
	height:100%;
	font-family: 'Noto Sans JP', sans-serif;
}
html{overflow-y: scroll;font-size: 625%;}
body{
	position: relative;
	width: 100%;
	color: #000000;
	background-color: #ffffff;
	font-size: .14em;
    line-height: 1.8em;
	font-weight: 400; 
	word-wrap: break-word;
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*ﾂ･*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.font-Serif{font-family: 'Noto Serif JP', serif;}

a:link {color: #000000;text-decoration: none;}
a:visited {color: #000000;text-decoration: none;}
a:hover{cursor: pointer; text-decoration: none; color: #55985A !important; transition: all .3s ease-out;}

.nodisp{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 0;
}
.center{text-align: center;}
.right{text-align: right;}
.left{text-align: left;}
.strong{font-weight: 900;}
.bold{font-weight: 700;}
.red{color: #BC0017;}
.green{color: #317849;}
.bluregreen{color: #0E8D78;}
.underline{text-decoration: underline !important;}
.nowrap{white-space: nowrap;}
.block{display: block;}
sup{
	position: relative;
	font-size: 75.5%;
	vertical-align: top;
	top: -0.2em;
}

.fontSmall{font-size: .12rem;}
.fontBig{font-size: .16rem;}

.paddingTop10{padding-top: 10px;}
.paddingTop20{padding-top: 20px;}
.paddingTop30{padding-top: 30px;}
.paddingTop40{padding-top: 40px;}
.paddingTop50{padding-top: 50px;}
.paddingLeft2em{padding-left: 2em;}

.linkArea{
	position: relative;
	margin: 0 auto;
	text-align: center;
}
.button{
	position: relative;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 100px;
	color: #00ad7a !important;
	border: solid 1px #ffffff;
	display: block;
	padding: 10px 3em;
	text-align: center;
	font-weight: 500;
	line-height: 1em;
}
.button.arrow::after{
	position: absolute;
	top:0;
	right: 15px;
	width: 8px;
	height: 100%;
	content: '';
	display: block;
	background-image: url("../img/common/arrow03.svg");
	background-size: contain;
	background-position: 0 50%;
	background-repeat: no-repeat;
}
.button.green{background-color: #00ad7a;border: solid 1px #00ad7a;color: #ffffff !important;}
.button:hover{background-color: #00ad7a; color: #ffffff !important;opacity: 1;}
.button.green:hover{background-color: #ffffff; color: #00ad7a !important;opacity: 1;}
footer .button{color: #014543 !important;}
footer .button:hover{background-color: #014543; }


img{
	max-width:100%;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
/* chrome opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	img {
		image-rendering: -webkit-optimize-contrast;
	}
}
/* safari*/
::-webkit-full-page-media, :future, :root img{
	image-rendering:auto;
}
svg {vertical-align:bottom;max-width: 100%;}
img[src$=".svg"] {width: 100%;}

iframe[name="google_conversion_frame"] { position: absolute; top: 0; }


#wrap{position: relative;width: 100%; height:auto; margin:0 auto; padding:0;}
#contents{position: relative;width: 100%;  margin:50px auto 0 auto; padding:0;}

section{
    position: relative;
    margin: 0 auto;
    padding: 0;
}

.flexbox{
    position: relative;
    margin: 0 auto;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flexbetween{justify-content: space-between;}
.flexcenter{justify-content: center;}
.flexend{justify-content: flex-end;}
.flexstart{justify-content: flex-start;}
.flexalignstart{align-items: flex-start;}
.flexaligncenter{align-items:center;}
.flexalignstrech{align-items: stretch}
.flexalignend{align-items: flex-end;}
.flexbox .box{
    position: relative;
    margin: 0;
    width: 100%;
}

/* navigation */
#menu{
    position: fixed;
	top:0;
    left: 0;
    width: 100%;
    height: 50px;
	z-index: 1000;
    background-color: #00ad7a;
	box-shadow: 0px 10px 16px -13px rgba(0,0,0,0.6);
}
.nav01{
    position: absolute;
	top:0;
    left: 0;
    height: 50px;
	width: calc(100% - 40px);
}
.nav01 .logo{
    position: relative;
	width: calc(100% - 130px);
	margin: 4px 5px;
}
.nav01 .logo img{
	position: relative;
    max-width: 160px;
}
.nav01 a{
    position: relative;
    display: block;
	color: #ffffff;
	font-weight: 900;
	font-size: .20rem;
	line-height: 1em;
}
.nav01 .lead a{font-size: .10rem;font-weight: 500;display: block;margin: 0 0 0 2px;}

nav{
	position: fixed;
	top:50px;
	left: calc(100% + 20px);
	padding: 40px 0 0 0;
	height: 100%;
	width: calc(100% + 20px);
	overflow-y: auto;
    background-color: #ffffff;
    transition: all .3s ease-out;
}
.dispMenu{left:0;}
nav ul{
	position: relative;
	margin: 0 auto;
	transform: translateX(-10px);
	padding: 0 0 100px 0;
	width: calc(100% - 80px);
}
nav ul li{
	position: relative;
	margin: 0;
	padding: 0 0 30px 25px;
    width: 100%;
	transition: all .3s ease-out;
}
nav ul li::before{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	content: '';
	width: 8px;
	height: 100%;
	background-image: url("../img/common/arrow.svg");
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
}
nav ul li.contact::before, nav ul li.shiryo::before{display: none;}
nav ul li a{
	position: relative;
	margin: 0 auto;
	display: block;
	line-height: 1em;
	font-size: .16rem;
}
nav ul li.contact, nav ul li.shiryo{
	margin: 0 ;
	padding: 20px 10px;
	width: calc(50% - 25px);
	text-align: center;
	font-size: .14rem;
}
nav ul li.contact{background-color: #26715b;margin: 0 10px 0 0}
nav ul li.shiryo{background-color: #014833;}
nav ul li.contact a, nav ul li.shiryo a{color: #ffffff !important;}
nav ul li.contact a img, nav ul li.shiryo a img{
	position: relative;
	width: 20px;
	padding-right: 10px;
	vertical-align: middle;
}
.subNav{
	position: relative;
    margin: 10px auto;
	z-index: 1001;
}
.subNavInner{
	position: relative;
	margin: 0 auto;
}
.subNavInner div{
	position: relative;
	width: calc(100% - 5px);
	padding-left: 5px;
}
.subNavInner div .cat{
	position: relative;
	width: 100%;
	padding-left: 0;
	font-size: .15rem;
	color: #2D9630;
	padding-bottom: 5px;
	border-bottom: solid 1px #2D9630;
}
.subNavInner div a{
	font-size: .14rem;
	padding-left: 5px;
	line-height: 1.8em;
}

.btn_menu{
	position: fixed;
	top:6px;
	right: 0;
	display: block;
	width: 40px;
	height: 50px;
	z-index: 1002;
}
.menu-trigger:hover{ cursor: pointer; }
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .2s;
	box-sizing: border-box;
}
.menu-trigger {
	position: absolute;
	top:10px;
	right: 3px;
	width: 30px;
	height: 20px;
	z-index: 10;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 9px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}

/* フッター */
footer{
    position: relative;
    margin:  0 auto;
	padding-bottom: 80px;
}
footer a{color: #000000 !important;}
footer .contacWrap{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background-color: #014543;
	color: #ffffff;
	text-align: center;
}
footer .linkArea{position: relative;margin: 10px auto 0 auto; width: calc(100% - 80px);}
footer .linkArea .button{margin: 20px auto 0 auto;}

footer .footerWrap{
	position: relative;
	margin: 0 auto;
	padding: 20px 0 0 0;
}
footer .footerWrap .footer01{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
footer .footerWrap .name{
	position: relative;
	margin: 0 auto 5px auto;
	font-size: .22rem;
	font-weight: 900;
}
footer .footerWrap .name img{
	position: relative;
	margin: 0;
	display: block;
}
footer .footerWrap .footer02{
	position: relative;
	margin: 20px auto 0 auto;
	padding: 20px 0 0 0;
	width: 100%;
	border-top: solid 1px #ECECEC;
	z-index: 11;
}
footer .footerWrap ul{
	 position: relative;
    margin: 0 auto;
	width: calc(100% - 40px);
}
footer .footerWrap .footer02 ul li{
    position: relative;
    width: calc(50% - 35px);
	margin: 0 0 20px 10px;
	padding: 0 0 0 25px;
	line-height: 1em;
}
footer .footerWrap .footer02 ul li::before{
	position: absolute;
	top:0;
	left: 0;
	display: block;
	content: '';
	width: 8px;
	height: 100%;
	background-image: url("../img/common/arrow02.svg");
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
}
footer .footerWrap .address{font-size: .13rem;}

.totop{
	position: fixed;
	bottom: 0;
	right: 5px;
	width: 110px;
	z-index: 10;
	display: none;
}

/* H2 */
h2.ttl{
	position: relative;
	margin: 0 auto 20px auto;
	font-size: .23rem;
	text-align: center;
	font-weight: 500;
	color: #00ad7a;
}

/* youtube */
.movieWrap{
    position: relative;
    margin: 0 auto;
	background-color: #000000;
	border: solid 3px #103a5a;
}
.movie{
	position: relative;
	margin:0 auto;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.movie iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* list */
ul.listDot, ul.listCircle, ul.listOl{position: relative;}
ul.listOl{counter-reset: my-counter;}
ul.listDot li, ul.listCircle li, ul.listOl li{
	position: relative;
	padding-left: 1.2em;
}
ul.listOl li{padding-left: 30px;line-height: 1.5;margin-bottom: 6px;}
ul.listDot li::before, ul.listCircle li::before, ul.listOl li::before{
	position: absolute;
	top:0;
	left: 0;
}
ul.listDot li::before{content: '・';}
ul.listCircle li::before{content: '●';}
ul.listOl li::before{
	content: counter(my-counter);
	counter-increment: my-counter;
	border: 1px solid;
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px;
	width: 20px;
	font-size: .12rem;
	line-height: 1;
}

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

/* ----- ヘッダーフッター ----- */
@media screen and (min-width: 1110px) {
	
    #contents{margin:70px auto 0 auto; }

	/* navigation */
	.btn_menu{display: none;}
	#menu{height: 70px;}
	#menu a:hover{color: #B8FF99 !important;}
	.nav01{
		height: 70px;
		width: calc(100% - 450px);
	}
	.nav01 .flexbox{align-items: center;}
	.nav01 .logo{
		margin: 0 0 0 5px;
		max-width:270px;
		padding-top: 12px;
	}
	.nav01 .logo img{max-width:255px;}
	.nav01 a{
		display: flex;
		font-size: .30rem;
	}
	.nav01 .lead{position: relative;margin: 0;}
	.nav01 .lead a{font-size: .14rem;margin: 0 ;padding-top: 10px;}

	nav{
		position: absolute;
		top:0;
		left:calc(100% - 450px);
		padding: 0;
		height: auto;
		width: 450px;
		background-color: transparent;
		overflow: visible;
	}
	nav ul{
		transform: translateX(0);
		padding: 0;
		width: 100%;
		justify-content: flex-end !important;
		align-items: stretch;
	}
	nav ul li{
		padding: 0 0 0 25px;
		width: 115px;
	}
	nav ul li::before{background-position: 0 50%;}
	nav ul li a{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		font-size: .18rem;
		color: #ffffff !important;
	}
	nav ul li.contact, nav ul li.shiryo{
		margin: 0 ;
		padding: 10px 0 0 0;
		max-width: 80px;
		height: 60px;
	}
	nav ul li.contact a, nav ul li.shiryo a{
		position: relative;
		top:auto;
		transform: translateY(0);
	}
	nav ul li.contact:hover, nav ul li.shiryo:hover{background-color: #139500;}
	nav ul li.contact{margin: 0;}
	nav ul li.contact a:hover, nav ul li.shiryo a:hover{color: #ffffff !important;}
	nav ul li.contact a, nav ul li.shiryo a{font-size: .12rem;}
	nav ul li.contact a img, nav ul li.shiryo a img{
		width: 37px;
		margin: 0 auto;
		display: block;
		padding-right: 0;
		padding-bottom: 6px;
	}
	.subNav{
		position: fixed;
		margin: 0;
		top:70px;
		right: 0;
		width: 100vw;
	}
	.subNavInner{
		padding: 0;
		background-color: #ffffff;
		width: 100vw;
		z-index: 2000;
		height: 0;
		overflow: hidden;
		 transition: all .3s ease-out;
	}
	.subMenu:hover .subNavInner{padding: 20px 0 0 0;height: auto;}
	.subNavInner div{
		width: calc(33.33% - 60px);
		padding-left: 0;
		margin: 0 30px;
	}
	.subNavInner div .cat{
		padding-left: 0;
		margin: 0;
		font-size: .17rem;
	}
	.subNavInner div .cat:first-child{padding-top: 0;}
	.subNavInner div a{
		position: relative;
		top:auto;
		transform: translateY(0);
		font-size: .15rem;
		margin-top: 10px;
		display: inline-block;
		width: auto;
		line-height: 1em;
		color: #000000 !important;
	}
.subNavInner div.subClose{
	position: relative;
		padding-left: 0;
		margin: 30px 0 0 0;
	width: 100%;
	height: 2px;
	background-color: #CBCBCB;
	}

	/* フッター */
	footer{padding-bottom: 0;}
	footer .contacWrap{
		padding: 60px 0 80px 0;
		font-size: .18rem;
	}
	footer .linkArea{margin: 40px auto 0 auto;max-width: 600px;}
	footer .linkArea .button{margin: 0;width: calc(50% - 20px - 6em); font-size: .24rem;}

	footer .footerWrap{max-width: 840px;padding-bottom: 20px;}
	footer .footerWrap .footer01{
		margin: 0 ;
		width: 50%;
	}
	footer .footerWrap .name{
		margin: 0 auto 3px auto;
		font-size: .24rem;
	}
	footer .footerWrap .name img{margin: 0 0 5px 0;}
	footer .footerWrap .footer02{
		margin: 0;
		padding: 20px 0 0 0;
		width: 50%;
		border-top: none;
	}
	footer .footerWrap ul{width: 100%;}
	footer .footerWrap .footer02 ul li{
		width: calc(25% - 35px);
		margin: 0 0 0 20px;
		padding: 0 0 0 15px;
	}
	footer .footerWrap .footer02 ul li::before{top:1px;}
	footer .footerWrap .address{line-height: 1.4em;}
	
	.totop{
		bottom: 5px;
		right: 5px;
		width: 130px;
	}
	
	.spN{ display: none !important; }
	.pcN{ display: block !important; }
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	.sp{ display: none; }
	.pc{ display: block; }
	.spN{ display: block; }
	.pcN{ display: none; }
	
	body{font-size: .16em;}
    
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
	
	.button{max-width: 360px;}

	.fontSmall{font-size: .14rem;}
	.fontBig{font-size: .18rem;}

		
	/* H2 */
	h2.ttl{
		margin: 0 auto 45px auto;
		font-size: .30rem;
	}
}