/*====================================================================================*/
/* Common
/*====================================================================================*/
.standardMenu{
	position:fixed;
    z-index: 3;
    color: white;
    top: 30px;
    right: 30px;
    width: 100%;
	text-align: right;
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
.standardMenu.blackStyle{
    color: black;

}
.standardMenu > .logo{
	width:200px;
	position:absolute;
    left: 60px;;
}

.standardMenu > .logo > img{
	width:100%;
	position:absolute;
	left: 0;
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
.standardMenu > .logo > .wh{
	opacity:1;
}
.standardMenu > .logo > .bk{
	opacity:0;
	
}
.blackStyle > .logo > .wh{
	opacity:0;
}
.blackStyle > .logo > .bk{
	opacity:1;
	
}
.standardMenu > .menuList{
	
}
.standardMenu > .menuList > .item{
	display:inline-block;
	margin:10px;
    cursor: pointer;
}
.standardMenu > .menuList > .icon{
	display: inline-block;
    vertical-align: middle;
	width: 30px;
	position:relative;
    margin: 0 10px;
}
.standardMenu > .menuList > .icon img{
	width: 100%;
	position:absolute;
	top: -15px;
	left: 0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.standardMenu > .menuList > .icon .wh{
	opacity:1;
}
.standardMenu > .menuList > .icon .bl{
	opacity:0;
}
.blackStyle > .menuList > .icon .wh{
	opacity:0;
}
.blackStyle > .menuList > .icon .bl{
	opacity:1;
}

.openMenu{
	position:fixed;
	z-index: 3;
	width:100%;
}
.openMenu > .logo{
	position:absolute;
    top: 20px;
    left: 30px;
    width: 150px;
}

.openMenu > .logo > img{
	width:100%;
	position:absolute;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;	
}

.openMenu > .logo > .wh{
	opacity:1;
}
.openMenu > .logo > .bk{
	opacity:0;
}
.open > .logo > .wh{
	opacity:0;
}
.open > .logo > .bk{
	opacity:1;
}

.openMenu > .icon{
	position:absolute;
	top:10px;
	right:70px;
	width:30px;
}
.openMenu > .icon img{
	width:100%;
	position:absolute;
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;	
}

.openMenu > .icon .wh{
	opacity:1;
}
.openMenu > .icon .bk{
	opacity:0;
}
.open > .icon .wh{
	opacity:0;
}
.open > .icon .bk{
	opacity:1;
}

.openMenu > .base{
	height:0vh;
	overflow:hidden;
	background:white;
	opacity:0;
	pointer-events: none;

	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;	
	

}
.open > .base{
	opacity:1;
	height:100vh;
	pointer-events: auto;
	
}

.openMenu > .base > .menuList{
    padding-top: 80px;
    padding-left: 30px;
    box-sizing: border-box;
}
.openMenu > .base > .menuList > .item{
	font-size: 12pt;
    margin-bottom: 10px;
    letter-spacing: 0.15rem;
}
.openMenu > .base > .menuList > .item > .subList{
	padding-left:20px;
	padding-top:5px;

}
.subList > .list{
	margin-bottom:5px;
}
.subList > .list:before{
	width:5px;
	height:1px;
	background:black;
	display:inline-block;
	content:" ";
    transform: translate(-7px, -5px);
}
.openMenu > .openIcon{
	position:absolute;
	top:22px;
	right:20px;

}
.openMenu > .openIcon > .bar{
	display: block; /* inline-block から block に変更 */
	width:30px;
	height:1px;
	margin-bottom:8px;
	background:white;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;	
}
.open > .openIcon > #bar1{
	transform: translate(0px, 4px) rotate(-45deg);
	transform-origin: center;
	background:black;
}
.open > .openIcon > #bar2{
	transform: translate(0px, -5px) rotate(45deg);
	transform-origin: center;
	background:black;

}



/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){

}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){

}

/*====================================================================================*/
/* PC縦狭表示
/*====================================================================================*/
@media screen and (max-height: 899px) and (orientation: landscape) {
	.openMenu > .base > .menuList > .group > .title {
		width: 140px;
	}	
	.openMenu > .base > .menuList > .group {
		margin-bottom: 30px;
		display: inline-block;
		width: 40%;
		vertical-align: top;
	}
}