/* menu.css */

#fix{
	position:fixed;
	top:0;
	text-align:center;
	width:100%;
	transition:0.3s;
}
@media(max-width:650px){
	#fix{
		display:none;
	}
}

.cf:after{
    content:" ";
    display:block;
    clear:both;
}

#top-head{
    top: 0px;
    position: absolute;
    width: 100%;
    line-height: 1;
    z-index: 999;
}
@media(max-width:900px){
	#top-head{
		top:0;
	}
}


#top-head .inner {
    position: relative;
    text-align:center;
}

#top-head.fixed {
    top: 0;
    padding-top: 10px;
    /* height: 25px; */
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}

#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}

#call{
    display: none;
    position: absolute;
    right: 51px;
    top: 10px;
    width: 30px;
    height: 34px;
    cursor: pointer;
}

#call img{
	width:100%;
}
 
/* Toggle Button */

#nav-toggle {
    display: none;
    right: 12px;
    top: 14px;
    width: 30px;
    height: 35px;
    cursor: pointer;
    z-index: 101;
}

#nav-toggle div {
    position: relative;
    height:15vw;
    background:url(../images/sp_menu_bg.png) left top no-repeat;
    background-size:contain;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 60%;
    margin-left: 20%;
    background: #888;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {top: 3vw;}
#nav-toggle span:nth-child(2) {top: 5.5vw;}
#nav-toggle span:nth-child(3) {top: 8vw;}

#menu_limitter{
	transition:0.5s;
	max-width:1250px;
	margin:0 auto;
	/* background-color: rgba( 255, 255, 255, 0.9 ); */
	/* box-shadow: 5px 3px 3px #99999950; */
	/* height: 42px; */
}
.bg_dark{
	background: #ed7895ee;
}
@media(max-width:650px){
	#menu_limitter{
        height:0;
	}	
}
.dropmenu{
	position:
	relative;
	zoom: 1;
	list-style-type: none;
	width: 100%;
	max-width: 1500px;
	margin:0 auto;
	font-size: calc(5px + 0.65vw)
	/* border:1px solid #f00; */
}
@media(min-width:1500px){
	.dropmenu{
	font-size: 15px;
}
}

.dropmenu:before, .dropmenu:after{
	content: "";
	display: table;
}
.dropmenu:after{
	clear: both;
}
.dropmenu li{
	position: relative;
	float: left;
	text-align: left;
}
.dropmenu > li{
	padding-top: 25px;
}
.dropmenu > li:nth-child(1){
	width: 24%;
	padding: 0px 55px 0px 10px;
}
.dropmenu > li:nth-child(2){
	width: 14.5%;
}
.dropmenu > li:nth-child(3){
	width: 7.7%;
}
.dropmenu > li:nth-child(4){
	width: 7.7%;
}
.dropmenu > li:nth-child(5){
	width: 9.8%;
}
.dropmenu > li:nth-child(6){
	width: 8.5%;
}

.dropmenu > li:nth-child(7){
	width: 8.5%;
}
.dropmenu > li:nth-child(8){
	width: 9%;
}
/*
.dropmenu > li:nth-child(9) span{
	border:1px solid #fff;
	padding: 0 1em 1px;
}
*/
.menu_home img{
	/* max-height:1em; */
}
.dropmenu > li a{
	display: block;
	padding: 12px 5px 0;
	color: #fff;
	letter-spacing: 1px;
	height: 36px;
	overflow:hidden;
	background-color: #ffffff00;
}
.dropmenu > li:first-child a{
	height: 95px;
	overflow:visible;
}
.menu_btn3{
	list-style-type: none;
	position:absolute;
	top:0;
	right:2.5vw;
	display:flex;
	margin:0 0 12px;
	font-size: calc(5px + 0.65vw);
}
.menu_btn3 .fas,
.menu_btn3 .fa-solid{
	margin-right:0.3em;
}
.logo_tab{
	position:absolute;
	top: 15px;
	left:1.5vw;
	width:200px
}
@media(min-width:1201px){
	.logo_tab{
		display:none
	}
}


@media(min-width:1210px){
	
	.menu_btn3{
		right: calc((100% - 1210px)/2);
	}
	
}
.menu_btn3 li{
	/*padding:7px 10px 10px;*/
	margin-right:1.5vw;
	border-left:1px solid#fff;
	border-right:1px solid#fff;
	border-bottom:1px solid#fff;
	background:#fff;
}
.menu_btn3 li a{
	display:inline-block;
	padding:8px 10px 9px;
	letter-spacing: 1px;
	color:#ed7895;
}
.menu_btn3 li:hover{
	background:#fffd;	
}
.menu_btn3 li a:hover{
	color:#ed7895;	
}

/*メニュー　タブレット用*/
@media(max-width:1200px){
	.dropmenu > li a{
		display: block;
		padding: 12px 0px 0 1vw;	
	}
	.dropmenu > li{
		padding-top: 60px;
	}
	.dropmenu{
		margin:0 auto;
		font-size: calc(3px + 1vw);
	}
	.dropmenu > li:nth-child(1){
		display:none;
	}
	.dropmenu > li:nth-child(2){
		padding-left:1em;
		width: 20%;
	}
	.dropmenu > li:nth-child(3){
		width: 11.3%;
	}
	.dropmenu > li:nth-child(4){
		width: 9.5%;
	}
	.dropmenu > li:nth-child(5){
		width: 12.5%;
	}
	.dropmenu > li:nth-child(6){
		width: 21.5%;
	}
	.dropmenu > li:nth-child(7){
		width: 11%;
	}
	.dropmenu > li:nth-child(8){
		width: 11%;
	}
}


@media(max-width:650px){
	.menu_btn3{
		display:none;
	}	
}

#sp_logo_menu{
    display:none;
}



.dropmenu li ul{
	list-style: none;
	z-index: 999;
	top: 100%;
	left: 0;
}

.dropmenu li ul li{
	width: fit-content;
}

.dropmenu li ul li a{
    padding: 8px 0 0 1em;
    text-align: left;
    font-size:90%;
}

.dropmenu li:hover > a{
	color:#ccc;
}

.dropmenu li ul li{
	overflow: hidden;
	height: 0;
	transition: .3s;
	width:100%;
}

.dropmenu li:hover ul li{
	overflow: visible;
	height:1.8em;
}
.dropmenu li:hover ul li:last-child{
	margin-bottom:20px;
}
.dropmenu .fas{
	margin-left:0.2em;
	font-size:80%;
}

@media(max-width:650px){
	#top-head {
		top: 0;
		position: fixed;
	}

	#top-head.fixed {
		padding-top: 0;
		height:auto;
		background: transparent;
	}

	#mobile-head {
		width: 100%;
		height: 50px;
		z-index: 999;
		position: relative;
		background-color: #f8b;
	}

	#call{display: block;}
	#nav-toggle {
		display: block;
		background:#fff;
		height:30px;
	}
	
	#nav-toggle.open  span:nth-child(1) {
		top: 5.5vw;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}

	#nav-toggle.open  span:nth-child(2) {
		width: 0;
		left: 30%;
	}

	#nav-toggle.open  span:nth-child(3) {
		top: 5.5vw;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	.dropmenu{
		display:none;
	}

	#sp_logo_menu{
        opacity:0;
		width: 100%;
		position:fixed;
		overflow:auto;
		top:0;
		height:100vh;
		background:#fff;
		padding-bottom:20vw;
 	}
	#sp_logo_menu.close {
   		display: block;
        animation-duration: 0.5s;
        animation-name: fade-out;
        -moz-animation-duration: 0.5s;
        -moz-animation-name: fade-out;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-name: fade-out;
	}
	#sp_logo_menu.close a{
		pointer-events:none;
	}
	
	#sp_logo_menu.open {
		z-index:100;
   		display: block;
        opacity:1;
        animation-duration: 0.5s;
        animation-name: fade-in;
        -moz-animation-duration: 0.5s;
        -moz-animation-name: fade-in;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-name: fade-in;
	}
	@keyframes fade-in {
        0% {
            position:fixed;
        	top:0;
			opacity: 0;
		}
	    1% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
	@keyframes fade-out {
        0% {
			opacity: 1;
		}
	    99% {
            position:fixed;
            top:0;
            opacity: 0;
        }
        100% {
        	position: absolute;
        	top:-9999px;
        }
    }
    .sp_logo img{
    	max-width:280px;
    	display:block;
    	margin:10px auto;
    }

    .sp_menu{
    	display:flex;
    	flex-wrap:wrap;
    }
    .sp_menu a{
    	display:block;
    	border-bottom:1px solid #ccc;
    	padding:3.5vw 3vw 3vw;
    	font-size:calc(2vw + 5px);
    	text-align:left;
    	width:50%;
    	color: #555;
    	font-weight:bold;
    }
    .sp_menu a:nth-child(odd){
    	border-right:1px solid #ccc;
    }
    .sp_menu a:nth-child(-n+2){
    	border-top:1px solid #ccc;
    }
    .sp_menu a img{
    	display:inline-block;
    	margin: 0 2vw 0 0;
    	width: 25px;
    	max-width:5.5vw;
    	vertical-align:middle;
    }
    .sp_banner a{
    	background:#f8b url(../images/go_arrow.png) 96% 50% no-repeat;
    	background-size:16px;
    	display:block;
    	color:#fff;
    	text-align:center;
    	margin:18px auto;
    	padding: 7px;
    	width:80%;
    	border-radius:7px;
    }
    .sp_banner a:nth-child(1){
    	background-color:#cfc27e;
    }
    .sp_banner a:nth-child(4){
    	background-color:#ff9297;
    }
    .sp_banner a:nth-child(3){
    	background-color:#88a2ff;
    }
	.dropmenu  li {width: 100%;}
	.dropmenu li ul{display:none;}
	.menu li a{	border-top:0px;}

	#top-head .dropmenu  li a,
	#top-head.fixed .dropmenu  li a {
		border-top:none;
        border-right:1px dotted #f8b;
		text-align: left;
		padding-left: 40px;
		background-color: #fff6fa;
		margin:0 5%;
	}
	#top-head .dropmenu li ul li a{	padding-left:18%;}
}