/*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: 0;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
}
/*ヘッダーの背景*/
/* 共通の背景スタイル */
header img.bg {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    max-height: 110px;
}

/* 最初はSP版を隠しておく */
.sp-header-bg {
    display: none;
}

/* PC版は表示（デフォルト） */
.pc-header-bg {
    display: block;
}
header .menu {
	width: 100%;
	margin: 0 auto;
	padding: 22px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .logo {
	width: 30%;
	max-width: 120px;
}

@media only screen and (max-width: 890px) {
    .pc-header-bg {
        display: none;
    }

    .sp-header-bg {
        display: block;
    }
    header .logo {
        max-width: 60px;
    }
}

/*ヘッダーメニューテキスト*/
.Navi ul {
	width: 100%;
	max-width: 1180px;
	margin-right: auto;
	display: flex;
	align-items: center;
	text-align: right;
}
.Navi ul li a {
	display: flex;
	width: auto;
	margin-right: 25px;
    margin-left: 25px;
	font-size: clamp(13px,1.4vw,17px);
	letter-spacing: 0.02em;
    line-height: 1em;
	color: #2e2e2e;
	transition: 0.4s;
    position: relative;
}
.Navi ul .btn-contact {
    background-color: #91d2f1;
    padding: 10px 30px;
    border-radius: 30px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 15%);
    color: #fff;
    transition: all 0.3s ease;
}
.Navi ul .btn-contact:hover {
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 2%);
    transform: translateY(4px);
}

.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: #91d2f1;
    position: absolute;
    right: 0;
    left: -5%;
    bottom: -15px;
    margin: auto;
    transition: 0.4s;
}
.Navi ul li a:hover:after{
    width: 95% !important;
}
.Navi ul li:last-child a {
    padding-left: 0;
}

/* ヘッダーメニューに下線をつける */
header.top_tags a.top:after,
header.service-price_tags a.service-price:after,
header.reha_tags a.service-price:after,
header.contact_tags a.contact:after,
header.staff_tags a.staff:after,
header.recruit_tags a.recruit:after,
header.sitepolicy_tags a.sitepolicy:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    background: #91d2f1;
    bottom: -15px;
    visibility: visible;
    opacity: 1;
    transition: 0.7s;
}
/* 「サービス」配下の「保険外サービス」に下線を付ける */
header.reha_tags a.reha:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    background: #91d2f1;
    bottom: -2px;
    visibility: visible;
    opacity: 1;
    transition: 0.7s;
}
@media only screen and (max-width: 890px) {
    .Navi ul .btn-contact {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
}

/* ドロップダウン */
.dropDown_menu {
    position: relative;
}
.dropDown_list_container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 20px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    z-index: 100;
}
/* ホバー時に表示 */
.dropDown_menu:hover .dropDown_list_container {
    visibility: visible;
    opacity: 1;
}
/* 白ボックス */
.dropDown_list {
    background: #fff;
    padding: 15px 30px 15px 0px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    white-space: nowrap;
    margin-top: 10px;
}
/* 吹き出しの三角 */
.dropDown_list::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}
/* 中身のレイアウト */
.dropDown_list li a {
    display: flex !important;
    align-items: center;
    margin-right: 0 !important;
    padding: 5px 0;
    color: #2e2e2e;
    text-decoration: none;
}
.dropDown_list li a:after {
    display: none !important;
}
header.reha_tags .dropDown_list li a.reha:after {
    display: block !important;
}
.dropDown_list li a img {
    width: 14px;
    height: auto;
    margin-right: 3px;
}


@media only screen and (max-width: 890px) {
    .dropDown_list_container {
        position: static;
        transform: none;
        visibility: visible;
        opacity: 1;
        padding-top: 0;
    }
    .dropDown_list {
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 20px;
    }
    .dropDown_list::before {
        display: none;
    }
}


/*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 .reha {
        padding: 0px 0 20px 8px;
    }
    .open .Navi li a:before{
    	content: "\025b6";
    	color: #91d2f1;
    	font-size: 70%;
    	margin-right: 6px;
    }
    .open .Navi li a:hover{
        color: #91d2f1;
    }
    .boder_none {
        border-bottom: none !important;
    }

}
/*全ページ共通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;
}