@charset "utf-8";

/*******グローバルメニュー*********************/
.jiromaru_menu {
	display: none;
}
.site-header {
	z-index:22;
	position:fixed;
	top:0;
}



/**ハンバーガー部分**/
#hamburger {
	background-image:url(images/spmenu_bg.png);
	background-repeat:no-repeat;
	background-position:center;
   position: relative;
   display: block;
   width: 14%;
   height: 70px;
   margin: 0 2% 0 auto;
   z-index:22;
   background-size:contain;
   top:-25%;
}
#hamburger span {
   position: absolute;
   top: 56%;
   left: 50%;
   display: block;
   width: 55%;
   height: 4px;
   background-color: #fff;
   transform: translateX(-55%) translateY(-50%);
}
#hamburger::before {
   content: '';
   display: block;
   position: absolute;
   top: 40%;
   left: 50%;
   width: 55%;
   height: 4px;
   background-color: #fff;
   transform: translateX(-55%);
}
#hamburger::after {
   content: '';
   display: block;
   position: absolute;
   bottom: 29%;
   left: 43%;
   width: 40%;
   height: 4px;
   background-color: #fff;
   transform: translateX(-55%);
}

/*****************************************************タップ後ナビ部分*****************/

.sp-nav {
   z-index: 23;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: block;
   width: 100%;
   background: rgba(239, 125, 172, .8);
   transition: all .2s ease-in-out;
   opacity: 0;
   transform: translateY(-100%);
}
.sp-nav ul {
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   list-style:none;
   font-family: source-han-sans-cjk-ja, sans-serif;
   font-weight:900;
}
.sp-nav li {
   margin: 0;
   padding: 0;
   font-family:
}
.sp-nav li span {
   font-size: 15px;
   color: #fff;
}
.sp-nav li a, .sp-nav li span {
   display: block;
   padding: 15px 0;
   color:#FFF;
}


/*****************************************************クローズボタン*****************/

/*基準となるli要素*/
.sp-nav .close {
	margin-top:13%;
   position: relative;
   padding-left: 40px;
   padding-right:20px;
   background:#FFF;
   border-radius: 20px;
}
.sp-nav .close span {
   color:#F69;
   padding: 10px 0;

}
/*バツ印線1*/
.sp-nav .close::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 20px;
   display: block;
   width: 16px;
   height: 1px;
   background: #F69;
   transform: rotate( 45deg );
}
/*バツ印線2*/
.sp-nav .close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 20px;
   display: block;
   width: 16px;
   height: 1px;
   background: #F69;
   transform: rotate( -45deg );
}

.toggle {
   transform: translateY( 0 );
   opacity: 1;
}




/* ======================================== 
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}


.nav {
	padding: 0 20px;
	margin: 0 auto 60px;
	width: 760px;
	font-size: 85%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: #333;
	background: -moz-linear-gradient(top, #666, #333);
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	background: -o-linear-gradient(top, #666, #333);
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}
.nav li {
	list-style: none;
	float: left;
}
.nav li a {
	text-decoration: none;
	color: #fff;
	padding: 8px 12px;
	display: block;
}
.nav li a:hover {
	background: #666;
}*/