/*SP版 ハンバーガーメニュー*/
.SpNavi{
    display: none;
}
@media only screen and (max-width: 890px) {
    /*SP版 ハンバーガーメニュー*/
    .SpNavi{
        position: absolute;
        right: 15px;
        top: 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 30px;
        z-index: 5;
    }
    .SpNavi span{
        height: 3px;
        width: 100%;
        background: #2e2e2e;
        position: relative;
        transition: 0.4s;
    }
    .SpNavi span:first-child{
        top: 0;
    }
    .SpNavi span:last-child{
        bottom: 0px;
    }
    /*クリック時のレイアウト*/
    .SpNavi.active span:first-child{
        top: 25%;
        transform: rotate(-135deg);
    }
    .SpNavi.active span:nth-child(2){
		display: none;
    }
    .SpNavi.active span:last-child{
        bottom: 25%;
        transform: rotate(135deg);
    }
	.SpNavi span:last-child:after{
		content: "メニュー";
		font-size: 10px;
		letter-spacing: 0;
		color: #2e2e2e;
		position: absolute;
		top: 3px;
		left: 0;
		right: 0;
		margin: auto;
		white-space: nowrap
	}
	.SpNavi.active span:last-child:after{
		display: none;
	}
}

/*ヘッダーメニューに色付け*/
header.mission .Navi ul li.mission-add a:after,
header li.member-add.show a:after,
header.recruit .Navi ul li.recruit-add a:after,
header li.info-add.show a:after,
header.contact .Navi ul li.contact a:after{
    content: "";
    width: 95%;
    transition: 0.4s;
}
header.mission .Navi ul li.mission-add.hidden a:after,
header.recruit .Navi ul li.recruit-add.hidden a:after{
    width: 0 !important;
    transition: 0.4s;
    overflow: auto !important;
}

/*ヘッダー*/
header {
 	padding: 0;
	margin: 0; 	
	width: 100%;
	height: auto;
    background-color: #fff;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}
.menu {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 25px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo {
	width: 20%;
	max-width: 215px;
}

/*ヘッダーメニューテキスト*/
.Navi ul {
	width: 100%;
	max-width: 1180px;
	margin-right: auto;
	display: flex;
	align-items: center;
	text-align: right;
}
.Navi ul li a {
	display: inline-block;
	width: auto;
	padding-right: 12px;
	margin-right: 12px;
	border-right: solid 1px #c1c1c1;
	font-size: clamp(13px,1.4vw,17px);
	letter-spacing: 0.02em;
    line-height: 1em;
	color: #2e2e2e;
	transition: 0.4s;
    position: relative;
}
.Navi ul li:last-child a{
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}
.Navi ul li a:after{
    content: "";
    width: 0;
    height: 2px;
    background-color: #008480;
    position: absolute;
    right: 0;
    left: -5%;
    bottom: -15px;
    margin: auto;
    transition: 0.4s;
}
.Navi ul li a:hover:after{
    width: 95% !important;
}

/*SP版 ロゴ*/
@media only screen and (max-width: 890px) {
    .Navi ul li a:after{
        display: none;
    }

    .logo{
		position: absolute;
        top: 18px;
        left: 20px;
        width: 40%;
        max-width: 185px;
    }
}
/*SP版 メニュー表示*/
@media only screen and (max-width: 890px) {
	.menu{
        height: 85px;
		transition: 0.4s;
	}
	.menu.open{
        height: 100vh;
		padding: 85px 20px 20px;
		background: #fff;
		box-shadow: 0 0 30px 0px rgb(0 0 0 / 40%);
        position: sticky;
        align-items: flex-start;
        z-index: 1;
	}
    .Navi{
        width: 100%;
        display: none;
        transition: 0.4s;
    }
    .open .Navi{
    	width: 100%;
    	display: block;
    }
    .open .Navi ul{
    	flex-wrap: wrap;
    }
    .open .Navi ul li{
        width: 100%;
        text-align: left;
	    border-bottom: 1px solid #2e2e2e;
    }
    .open .Navi li a{
    	font-size: 16px;
    	width: 100%;
    	border-right: none;
    	padding: 20px 0 20px 8px;
    }
    .open .Navi li a:before{
    	content: "\025b6";
    	color: #008480;
    	font-size: 70%;
    	margin-right: 6px;
    }
    .open .Navi li a:hover{
        color: #008480;
    }
}
/*全ページ共通Navi・footerのお問い合わせ*/
.Navi .contact_box,
footer .contact_box {
    width: 100%;
    max-width: 1180px;
    padding: 20px 50px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 40px;
}
.Navi .contact_box {
    display: none !important;
}
.Navi .contact_box a,
footer .contact_box a {
    width: calc(80% - 20px);
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #a1a1a1;
    border-radius: 10px;
    overflow: hidden;
}
.Navi .contact_box a img,
footer .contact_box a img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: 0.4s;
    z-index: 1;
}
.Navi .contact_box a p,
footer .contact_box a p{
    font-size: clamp(25px,2.5vw,30px);
    font-family: serif;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0.08em;
    color: #fff;
    filter: drop-shadow(0 0 10px rgba(0,0,0,1));
    z-index: 2;
}
.Navi .contact_box a:hover img,
footer .contact_box a:hover img{
    transform: scale(1.05);
}
@media only screen and (max-width: 890px) {
    footer .contact_box{
        max-width: 680px;
        padding: 20px;
    }
    footer .contact_box a {
        width: 100%;
    }
    /*SP版メニュー内のバナー*/
    .Navi .contact_box {
        display: flex !important;
    }
    .Navi .contact_box {
        grid-gap: 20px;
        padding: 40px 0 0;
    }
    .Navi .contact_box a {
        width: 100%;
        height: 90px;
    }
}


/*フッター*/
footer {
	width: 100%;
}
footer .reserve {
	width: 100%;
	padding: 50px;
	margin: 0 auto;
}
footer .bottom {
	padding: 25px;
	background-color: #c8c8c8;
}