@charset "UTF-8";

/*▼　PC版メニュー　------------------------▼*/
nav.main_nav ul{
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
nav.main_nav ul li{
	text-align: center;
    font-size: 14px;
	width: 15%;
}
nav.main_nav ul li span{
	display: block;
}
nav.main_nav ul li a {
	color: #fff;
	text-decoration: none;
}
nav.main_nav ul li a span {
	text-decoration: none;
}
nav.main_nav ul li a:hover,
nav.main_nav ul li a:active{
	color: #ccc;
}


@media screen and (max-width:1000px){
.nav_fast{border: none;}
nav.main_nav ul li a span {
	display: none;
}
}


/* --- CONTACTボタン --------------------- */
nav.main_nav ul li.nav_mail {
    border-right: none;
    width: auto;
    margin-left: 15px;
}
nav.main_nav ul li.nav_mail i{
	padding-right: 5px;
}
nav.main_nav ul li.nav_mail a {
    display: block;
    background-color: #fff;
    color: #333;
    padding: 8px 30px;
    border-radius: 50px;
	font-size: 16px!important;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;  /* ホバーのアニメーション */
    line-height: 1.2;      /* ボタン内の文字高さ調整 */
}

/* ホバー時の挙動 */
nav.main_nav ul li.nav_mail a:hover {
    background-color: #386b35; /* 少し濃い緑 */
    color: #fff;
    opacity: 0.8;
}

@media screen and (max-width:1000px){
nav.main_nav ul li.nav_mail {
	max-width: 400px;
	width: 80%;
	margin: 0 auto;
	border-bottom: none;
}
nav.main_nav ul li.nav_mail a {
    background-color: #498745;
    color: #fff;
    padding: 15px 30px;
	letter-spacing: 1px;
	font-size: 20px!important;
}
}


/*▼　PC非表示ボタン　------------------------▼*/
.nav_sp{display: none;} /* 非表示ボタン */

@media screen and (max-width:1000px){
.nav_sp{display:block;}
}

/* --- TELボタン --------------------- */
@media screen and (max-width:1000px){
.nav_tel{
	display: block;	
	max-width: 450px;
	text-align: center;
	border-bottom: none!important;
	padding-top: 30px!important;
}
.nav_tel p{
	font-size: 25px!important;
	line-height: 200%;
	background: #E67E22;
	color: #FFF;
	padding: 0px 0px;
	margin: 0px 30px;
}
.nav_tel img{
	padding-top: 20px!important;
	width: 90%;
}
}
@media screen and (max-width:600px){
.nav_tel p{
	font-size: 20px!important;
}
}





/*▼　SPハンバーガーメニュー　------------------------▼*/
@media screen and (max-width:1000px){
.hamburger {
	display : block;
	position: fixed;  /*位置固定*/
	margin-right:10px;
	margin-top: 10px;
	z-index : 110;
	right : 0;
	top   : 0;
	width : 60px;  /*ハンバーガーボタンの大きさ*/
	height: 60px;  /*ハンバーガーボタンの大きさ*/
	cursor: pointer;
	text-align: center;
	background: #386b35;/*ハンバーガーボタンの色*/
}
@media screen and (max-width: 600px) {
.hamburger {
	margin-right:10px;
	margin-top: 10px;
	width : 60px;  /*ハンバーガーボタンの大きさ*/
	height: 60px;  /*ハンバーガーボタンの大きさ*/
}
}

/*ボタンの線の長さや太さ、ボタンの大きさを変える時は、この長さも合わせて変える*/
.hamburger span {
	display : block;
	position: absolute;
	width   : 40px;  
	height  : 4px ;
	left    : 10px;
	background : #FFF;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out; /*線がバッテンになる時のアニメーションの速さ*/
}
@media screen and (max-width: 600px) {
.hamburger span {
	width   : 40px;  
	height  : 4px ;
	left    : 10px;
}
}

/*ハンバーガーボタンの線の高さ、ボタンの大きさを変える時は、この高さも合わせて変える*/
.hamburger span:nth-child(1) {top: 14px;/*一番上の線*/}
.hamburger span:nth-child(2) {top: 29px;/*二番上の線*/}
.hamburger span:nth-child(3) {top: 44px;/*三番上の線*/}
@media screen and (max-width: 600px) {
.hamburger span:nth-child(1) {top: 14px;/*一番上の線*/}
.hamburger span:nth-child(2) {top: 29px;/*二番上の線*/}
.hamburger span:nth-child(3) {top: 44px;/*三番上の線*/}
}


/* ナビ開いてる時の×ボタン、top leftはボタンを開いたときの位置、ボタンの大きさを変える時はここも変える*/
.hamburger.active span:nth-child(1) {
	top : 27px;
	left: 13px;
	background :#FFF;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg); /*線の角度*/
}
@media screen and (max-width: 600px) {
.hamburger.active span:nth-child(1) {
	top : 27px;
	left: 13px;
}
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	 top: 27px;
	 background :#FFF;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);/*線の角度*/
}
@media screen and (max-width: 600px) {
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
	top : 27px;
}
}


nav.main_nav ul li{
}


/*▼SPメニュー---------------------------------▼*/	
nav.main_nav {
	position: fixed;
	z-index : 88;
	top  : 0;
	left : 0;
	background:#f1f7f0;
	text-align: center;
	width: 100%;
	height: 100vh; /*高さを画面サイズに合わせる*/
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s ease;
}
nav.main_nav ul {
	display: block;
	margin: 0 auto;
	margin-top: 50px;
	padding: 0;
	width: 100%;
	list-style: none;
}
nav.main_nav ul li {	
	width: 90%;
	margin: 0 auto;
	transition: .4s all;
	line-height: 80%;
	font-size: 18px;
	text-align:center;
	padding: 0.9em 0;
	border-right: none;
	border-bottom: 1px dashed #ccc;
}
nav.main_nav ul li span{
	padding-bottom: 5px;
}
@media screen and (max-width: 600px) {/*スマホでフォントサイズを変更*/
	nav.main_nav ul li {font-size: 16px;}
}

nav.main_nav ul li:last-child {
	padding-bottom: 0;
	border: none;
}
nav.main_nav ul li:hover{
}
nav.main_nav ul li a {
	display: block;
	color: #000;/*文字のカラー*/	
	text-decoration :none;
}
nav.main_nav ul li a:hover,
nav.main_nav ul li a:active{
	color: #ccc;/*ホバー時の文字のカラー*/	
}
/* このクラスを、jQueryで付与・削除する */
nav.main_nav.active {
	opacity: 1;
	visibility: visible;
}
}