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

  font-family: "Noto Sans JP", sans-serif;
  font-family: "Noto Serif JP", serif;
  font-family: "M PLUS 1", sans-serif;
  font-family: "Roboto", sans-serif;
  font-family: "Zen Maru Gothic", serif;

  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

  font-family: "Zen Maru Gothic", serif;
  font-weight: 400 / 800 /700;
  font-style: normal;


1700　→　17px（大きな画面）
    　→　16px
1280　→　15px（小さい画面）
900 　→　14px（タブレット〜スマホ）
　
　767　スマホビュー


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

body{
	font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
	font-size: 100%;
	font-weight: 400;
	line-height: 1.75;
	color: #4d4c43;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
	@media screen and (min-width:1700px) {
		body{
			font-size: 106.25%;
		}
	}
	@media screen and (max-width:1280px) {
		body{
			font-size: 93.75%;
			line-height: 1.666666666;
		}
	}
	@media screen and (max-width:900px) {
		body{
			font-size: 87.5%;
		}
	}


body.active{
	overflow: hidden;
	height: 100%;
}
a{
	color: #4d4c43;
	text-decoration: none;
}
a[href^="tel:"] {
	pointer-events: none;
	cursor: default;
}
a.link{
	color: #4d568e;
	text-decoration: underline;
}
	@media screen and (max-width:767px) {
		a[href^="tel:"] {
			pointer-events: auto;
			cursor: pointer;
		}
	}
.inline-block{
	display: inline-block;
}
.overflow-x{
	overflow-x: hidden;
}
/* list */
.list-disc li{
	list-style-type: disc;
	list-style-position: outside;
	line-height: 1.5;
	margin-left: 1.375em;
	margin-top: .25em;
}


/*-----------------------
	Animation
-----------------------*/
@keyframes fv-fade-up {
	0% { 
		opacity: 0;
		transform: translateY(-1em);
	}
	100% { 
		opacity: 1; 
		transform: translateY(0);
	}
}

@keyframes fv-fade-slide {
	0% {
		opacity: 0; 
		transform: translateX(1em);
	}
	100% { 
		opacity: 1; 
		transform: translateX(0);
	}
}
@keyframes bottom-page {
	0% { 
		opacity: 1;
	}
	100% { 
		opacity: 0; 
	}
}
.fadein{
	opacity : 0;
	transform: translateY(1.5em);
	transition : all 1.5s;
}
.fadein.scrollin{
	opacity : 1;
	transform: translateY(0);
}
.fade{
	opacity : 0;
	filter: blur(2px);
	transition : all 1.5s;
}
.fade.scrollin{
	filter: blur(0);
	opacity : 1;
}
.scale{
	opacity: 0;
	transform: scale(1.05);
	transition : all 1s;
	overflow: hidden;
}
.scale.scrollin{
	opacity : 1;
	transform: scale(1.0);
}
.svgscroll{
	opacity : .6;
	filter: blur(2px);
	transition : all 1s;
}
.svgscroll.scrollin{
	opacity : 1;
	filter: blur(0);
}

/*-----------------------
	header / main
-----------------------*/
#base--section{
	position: relative;
	margin: 2em 5% 0;
	display: flex;
	flex-wrap: wrap;
}
	@media screen and (max-width:767px) {
		#base--section{
			margin-right: 4%;
			margin-left: 4%;
			display: block;
			margin-top: 0;
		}
	}
#header{
	width: calc(100% - 80%);
	padding-right: 2.5%;
}
#header h1{
	max-width: 200px;
	margin: .5em 0 1.25em;
	animation: fv-fade-up 1.2s ease 0s 1 normal forwards;
	opacity: 0;
}
.header-nav ul{
	line-height: 2;
}
.header-nav li{
	animation: fv-fade-slide 1.2s ease .8s 1 normal forwards;
	opacity: 0;
}
.header-nav a{
	display: inline-block;
}

#main{
	width: 80%;
}
	@media screen and (max-width:1280px) {
		#header h1{
			max-width: 150px;
		}
	}
	@media screen and (max-width:900px) {
		.header-nav li{
			font-size: 87.5%;
		}
	}
	@media screen and (max-width:767px) {
		#header{
			width: 100%;
		}
		#header h1{
			margin: .75em 0 .5em;
		}
		.header-nav{
			display: none;
		}
		#main{
			width: 100%;
		}
	}
	@media screen and (max-width:600px) {
		#header h1{
			width: 120px;
		}
	}
/*-----------------------
	humbergermenu
-----------------------*/
.hamburger-icon{
	position: fixed;
	top: 2.5%;
	right: 2.5%;
	display: flex;
	width: 62px;
	height: 62px;
	justify-content: center;
	align-items: center;
	background-color: #599c52;
	border-radius: 50%;
	z-index: 101;
}
	@media screen and (max-width:1280px) {
		.hamburger-icon{
			top: 1.5%;
			right: 1.5%;
		}
	}
	@media screen and (max-width:767px) {
		.hamburger-icon{
			width: 56px;
			height: 56px;
			top: .5em;
			right: .75em;
		}
	}

.hamburger-icon span,
.hamburger-icon span::before,
.hamburger-icon span::after{
	content: "";
	display: block;
	height: 3px;
	width: 33px;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	transition: .2s all;
}
.hamburger-icon span:before {
	bottom: 8px;
}
.hamburger-icon span:after {
	top: 8px;
}
#nav-check{
	display: none;
}
#nav-check:checked ~ .hamburger-icon span{
	background-color: rgba(255, 255, 255, 0);
}
#nav-check:checked ~ .hamburger-icon span::before{
	bottom: 0;
	transform: rotate(45deg);
}
#nav-check:checked ~ .hamburger-icon span::after{
	top: 0;
	transform: rotate(-45deg);
}

.overlay{
	opacity: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	visibility:hidden;
	transition: .2s all;
	z-index: 100;
}
.overlay nav{
	background: #599c52;
	border-radius: 0 0 0 4em;
	width: 320px;
	height: auto;
	position: fixed;
	top: 0;
	left: 100%;
	transition: .4s left;
	overflow-y: scroll;
	padding-bottom: 3em;
}
#nav-check:checked ~ .overlay {
	opacity: 1;
	visibility: visible;
}
#nav-check:checked ~ .overlay nav {
	left: calc(100% - 320px);
}
#nav-check:checked ~ .hamburger-icon{
	background: #4d6e58;
}

.overlay ul{
	padding: 5.25em 60px 2em;
}
.overlay ul li{
	margin-bottom: 1em;
	font-size: 1.125em;
}
.overlay ul a{
	color: #fff;
	font-weight: 500;
	transition: .2s all;
}
.overlay ul a:hover{
	color: #e6cd6f;
}
	@media screen and (max-width:767px) {
		.overlay nav{
			width: 200px;
		}
		#nav-check:checked ~ .overlay nav {
			left: calc(100% - 200px);
		}
		.overlay ul{
			padding: 4.75em 10% 1.5em 10%;
		}
		.overlay ul li{
			margin-bottom: .75em;
			font-size: 1em;
		}
	}
/*-----------------------
	footer
-----------------------*/
#footer{
	background: #599c52;
	color: #fff;
	text-align: center;
	padding: .75em 0 2em 0;
}
#footer .copy{
	font-size: .875em;
	font-family: "M PLUS 1", sans-serif;
}
#footer .eng{
	font-family: "Roboto", sans-serif;
	font-size: .75em;
	letter-spacing: 1px;
	margin-top: .25em;
}

/*-----------------------
	fixed
-----------------------*/
#fixed-tel{
	position: fixed;
	bottom: 1.25em;
	right: 1.25em;
	font-family: "Roboto", sans-serif;
	font-size: 1.25em;
	background: #599c52;
	padding: .5em 2em;
	border-radius: 5em;
	z-index: 10;
	letter-spacing: 1px;
	opacity: 0;
	box-shadow: 0 .25em .5em .25em rgba(0, 0, 0, .1);
}

#fixed-tel a{
	color: #fff;
}
	@media screen and (max-width:767px) {
		#fixed-tel{
			padding: .5em 1.25em;
			bottom: .75em;
			right: .5em;
			font-size: 1.125em;
		}
	}

#fixed-tel.display{
	animation: fv-fade-up 1s ease 0s 1 normal forwards;
}

/*
-----------------------
 アコーディオン
-----------------------*/
.accd{
	margin-bottom: 7px;
}
.accd summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	font-weight: 600;
	cursor: pointer;
	border-radius: 3em;
}
.accd summary::-webkit-details-marker {
	display: none;
}
.accd summary::before,
.accd summary::after {
	width: 3px;
	height: 1.125em;
	border-radius: 5px;
	content: '';
}
	.accd-lightgreen{
		background: #d0e6d4;
	}
	.accd-lightgreen::before,
	.accd-lightgreen::after{
		background-color: #599c52;
	}

.accd summary::before {
	position: absolute;
	right: 2em;
	rotate: 90deg;
}
.accd summary::after {
	transition: rotate .3s;
}
.accd[open] summary::after {
	rotate: 90deg;
}
.accd-txt {
	transform: translateY(-10px);
	opacity: 0;
	margin: .5em 0 0 0;
	padding: 1.75em 2.5em;
	transition: transform .5s, opacity .5s;
	background: #fff;
	border-radius: 3em;
}
.accd[open] .accd-txt {
    transform: none;
    opacity: 1;
}
	@media screen and (max-width:600px) {
		.accd summary {
			padding-left: 1.5em;
		}
		.accd-txt {
			padding-left: 1.5em;
			padding-right: 1.5em;
			border-radius: 2em;
		}
	}

/*
-----------------------
 土台 
-----------------------*/
.sect-std{
	max-width: 1120px;
	width: 90%;
	margin:0 auto;
	padding: 2.25em 0 1.75em;
}
	@media screen and (min-width:1700px) {
		.sect-std{
			max-width: 1366px;
		}
	}
/*
-----------------------
 flex 
-----------------------*/
.flex{
	display: flex;
	flex-wrap: wrap;
}
.between{
	justify-content: space-between; 
}
.row-reverse{
	flex-direction: row-reverse;
}
.flex-end{
	align-items: flex-end;
}
.center{
	align-items: center;
}
.center{
	justify-content: center;
}
.clm2{
	width: calc(50% - 1em);
	margin-bottom: 1.5em;
}
.clm2:nth-last-child(-n+2){
	margin-bottom: 0;
}

	@media screen and (max-width:767px) {
		.clm2{
			width: calc(50% - .375em);
			margin-bottom: .5em;
		}
	}


/* dl 
-----------------------*/
.dl-2clm{
	display: flex;
	flex-wrap: wrap;
}
.dl-2clm dt{
	width: 6.5em;
	margin-bottom: .325em;
}
.dl-2clm dd{
	width: calc(100% - 6.5em);
	margin-bottom: .325em;
}

/* table 
-----------------------*/
.table-shinryo{
	width: 100%;
	color: #4d6e58;
	border-bottom: 1px solid;
}
.table-shinryo td{
	width: 10%;
	padding: .5em 0;
	border-top: 1px solid;
}
.table-shinryo th{
	width: 20%;
	padding: .5em 0;
	border-top: 1px solid;
}
/*
-----------------------
 mt 
-----------------------*/
.mtxxl{
	margin-top: 5em;
}
.mtxl{
	margin-top: 4em;
}
.mtl{
	margin-top: 3em;
}
.mt{
	margin-top: 2em;
}
.mtm{
	margin-top: 1.5em;
}
.mts{
	margin-top: 1em;
}
.mtxs{
	margin-top: .5em;
}
.mtxss{
	margin-top: .25em;
}

/*
-----------------------
 icon
-----------------------*/
.point-maru{
	font-weight: 600;
	padding-left: 1.25em;
	position: relative;
}
.point-maru:before{
	position: absolute;
	top: .5em;
	left: 0;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	border: 3px solid;
	content: "";
}
.icon-paw{
	padding-left: 1.5em;
	background: url(../images/common/icon-paw.png) no-repeat left center;
	background-size:  auto 1em;
}


/*
-----------------------
 box
-----------------------*/
.bgbox-green{
	background: #599c52;
	padding: 1.25em 1.75em;
}
.borderbox-mossgreen{
	border: 1px solid #4d6e58;
	background: #fff;
	padding: 1.25em 1.75em;
}
	@media screen and (max-width:767px) {
		.bgbox-green,
		.borderbox-mossgreen{
			padding: 1.25em 1.5em;
		}
	}


.kakumaru-large{
	border-radius: 1.5em;
}
.kakumaru{
	border-radius: 1em;
}
.kakumaru-small{
	border-radius: .5em;
}


/*
-----------------------
 font
-----------------------*/
.em{
	font-weight: bold;
}
.em500{
	font-weight: 500;
}
.min{
	font-family: "Noto Serif JP", serif;
}
.roboto{
		font-family: "Roboto", sans-serif;
}
.zenmaru{
		font-family: "Zen Maru Gothic", serif;
}
.mplus{
		font-family: "M PLUS 1", sans-serif;
}
.xxx-large{
	font-size: 1.375em;
}
.xx-large{
	font-size: 1.25em;
}
.x-large{
	font-size: 1.125em;
}
.large{
	font-size: 1.0625em;
}
.medium{
	font-size: .9375em;
}
.small{
	font-size: .875em;
}
.x-small{
	font-size: .75em;
}
.lh-140{
	line-height: 1.4;
}
.lh-150{
	line-height: 1.5;
}
	@media screen and (max-width:767px) {
		.sp-txt-c{
			text-align: center;
		}
	}
.red{
	color: #be3f3f;
}
.green{
	color: #599c52;
}
.mossgreen{
	color: #4d6e58;
}
.yellow{
	color: #e6cd6f;
}
.white{
	color: #fff;
}
.copy-min{
	font-size: 1.75em;
	font-family: "Noto Serif JP", serif;
	line-height: 1.5;
	margin-bottom: .75em;
}
.copy-min-small{
	font-size: 1.625em;
	font-family: "Noto Serif JP", serif;
	line-height: 1.5;
	margin-bottom: .75em;
}
.copy-weight{
	font-size: 1.75em;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: .75em;
}
.sect-midashi{
	font-size: 1.625em;
	font-weight: 500;
}
.bline-komidashi{
	position: relative;
	font-size: 1.375em;
	font-weight: 600;
	border-bottom: 4px solid #d3d2d0;
	padding-bottom: .125em;
	margin-bottom: .75em;
}
.bline-komidashi:before{
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 7em;
	height: 4px;
	background: #599c52;
	content: "";
}
.bline-large{
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3;
	border-bottom: 1px solid;
	padding-bottom: .375em;
	margin-bottom: .5em;
}
.bline-xlarge{
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.3;
	border-bottom: 1px solid;
	padding-bottom: .375em;
	margin-bottom: .5em;
}

	@media screen and (max-width:1280px) {
		.copy-min,
		.copy-weight{
			font-size: 1.66666667em;
		}
		.copy-min-small{
			font-size: 1.46666666667em;
		}
	}
	@media screen and (max-width:900px) {
		.copy-min,
		.copy-weight{
			font-size: 1.78571428571em;
		}
		.copy-min-small{
			font-size: 1.5em;
		}
	}
	@media screen and (max-width:600px) {
		.copy-min{
			font-size: 1.42857142857em;
		}
		.copy-weight{
			font-size: 1.64285714285em;
		}
		.copy-min-small{
			font-size: 1.3571485714em;
		}
	}