@charset "utf-8";
/* CSS Document */




@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);

.menu-trigger, .close-trigger {
	position: absolute;
	right: 20px;
	top:50%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	display: block;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 333;
}
.menu-trigger:hover .menu-trigger-bar:before, .close-trigger:hover .menu-trigger-bar:before {
  width: 100%;
}
.menu-trigger:hover .close-trigger-bar:before, .close-trigger:hover .close-trigger-bar:before {
  width: 100%;
}

.close-trigger{z-index: 5;}

.menu-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: white;
  margin-bottom: 6px;
  transform: rotate(-45deg);
  position: relative;
}
.menu-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.menu-trigger-bar.top {
  width: 50%;
}
.menu-trigger-bar.middle:before {
  left: auto;
  right: 0;
}
.menu-trigger-bar.bottom {
  width: 50%;
  margin-left: 50%;
}

.close-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #fff;
  position: relative;
}
.close-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.close-trigger-bar.left {
  transform: translateX(100px) translateY(-100px) rotate(-45deg);
}
.close-trigger-bar.right {
  transform: translateX(-100px) translateY(-100px) rotate(45deg);
  top: -3px;
}

.overlay{
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .35s, visibility .35s, height .35s;
	transition: opacity .35s, visibility .35s, height .35s;
	z-index: 5;
	overflow: hidden;
}
.overlay:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.overlay::-webkit-scrollbar{height: 10px; width: 1px;}
.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
	z-index: 11;
}
.overlay.open li {
	-webkit-animation: fadeInRight .5s ease forwards;
			animation: fadeInRight .5s ease forwards;
	-webkit-animation-delay: .35s;
			animation-delay: .35s;
}
/*
.overlay.open li:nth-of-type(2) {
	-webkit-animation-delay: .4s;
			animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
	-webkit-animation-delay: .45s;
			animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
	-webkit-animation-delay: .50s;
			animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
	-webkit-animation-delay: .55s;
			animation-delay: .55s;
}
.overlay.open li:nth-of-type(6) {
	-webkit-animation-delay: .60s;
			animation-delay: .60s;
}
.overlay.open li:nth-of-type(7) {
	-webkit-animation-delay: .65s;
			animation-delay: .65s;
}
.overlay.open li:nth-of-type(8) {
	-webkit-animation-delay: .70s;
			animation-delay: .70s;
}
.overlay.open li:nth-of-type(9) {
	-webkit-animation-delay: .75s;
			animation-delay: .75s;
}
.overlay.open li:nth-of-type(10) {
	-webkit-animation-delay: .80s;
			animation-delay: .80s;
}
.overlay.open li:nth-of-type(11) {
	-webkit-animation-delay: .85s;
			animation-delay: .85s;
}
*/
/*
.overlay div.overlay-menu{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.overlay div.overlay-menu::-webkit-scrollbar {
	display:none;
}
*/
.overlay div.overlay-nav{
	overflow: scroll;
	overflow: -moz-scrollbars-none;
	height: 100%;
}
.overlay div.overlay-nav::-webkit-scrollbar {
	display:none;
}
.overlay div.overlay-menu,.overlay div.overlay-img{
	position: relative;
	height: 100%;
}
.overlay .overlay-nav > ul{
	list-style: none;
	padding: 0;
	margin: 0 auto;
}
.overlay .overlay-nav > ul > li{
	position: relative;
	opacity: 0;
}
.overlay .overlay-nav > ul li a {
	display: inline-block;
	position: relative;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
.overlay .overlay-nav ul.top a:hover:after,
.overlay .overlay-nav ul.middle a:hover:after{width: 100%;}
.overlay .overlay-nav ul.top a:after,
.overlay .overlay-nav ul.middle a:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: #FFF;
	-webkit-transition: .35s;
	transition: .35s;
}


/*.overlay .overlay-nav .en{font-family: "hgs","sans-serif";}*/
/* 上段 */
.overlay .overlay-nav .top{margin-bottom: 50px;}
.overlay .overlay-nav .top li{margin-bottom: 20px;}
.overlay .overlay-nav .top .en{font-size: 24px;}
.overlay .overlay-nav .top .jp{font-size: 14px;}
/* 中段 */
.overlay .overlay-nav .middle li{margin-bottom: 10px;}
.overlay .overlay-nav .middle .jp{font-size: 12px;}
/* SNSリンク */
.overlay ul.sns_links{margin: 50px 0;}
/* 下段 */
.overlay .overlay-nav .bottom li{width: calc(50% - 20px);}
.overlay .overlay-nav .bottom a{display: block;}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		left: 20%;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		left: 20%;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}

/* 1280px以下 */
@media screen and (max-width: 1280px){
	/* 上段 */
	.overlay .overlay-nav .top{margin-bottom: 30px;}
	.overlay .overlay-nav .top li{margin-bottom: 15px;}
	/* SNSリンク */
	.overlay ul.sns_links{margin: 40px 0;}
}
/* 1100px以下 */
@media screen and (max-width: 1100px){
	/* 下段 */
	.overlay .overlay-nav .bottom li{width: 100%;margin-bottom: 10px;}
}
@media screen and (max-width: 768px){
	.overlay div.overlay-nav{height: 85%;}
	/* 上段 */
	.overlay .overlay-nav .top li{margin-bottom: 10px;}
	.overlay .overlay-nav .top .en{font-size: 20px;}
}
@media screen and (max-width: 667px){
	.close-trigger{
		right: 10px;
		top: 60%;
	}
	.overlay div.overlay-nav{height: auto;}
	/* 上段 */
	.overlay .overlay-nav .top li{margin-bottom: 5px;}
	.overlay .overlay-nav .top .en{font-size: 18px;}
	/* SNSリンク */
	.overlay ul.sns_links{margin: 0 auto;}
}