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

/*-------ここからPCナビ-------*/
.header-nav > ul{width: 460px;}
.header-nav ul li a{letter-spacing: 2.5px;transition: all .2s ease; }
.header-nav > ul > li > a:hover{
	color: #0623FD;
}
.header-nav ul li a.active::before{
content: "●";	
	font-size: 6px;
	color: #0623FD;
	position: relative;
	top: -1px;
	left: -8px;
}

#pc_nav li span:before,
.cb_nav li span:before{
	content: "\A" ;
	white-space: pre ;
}
#pc_nav li i,
.cb_nav li i{
	top:50%;
	right: -50px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.menu__second-level{
	top: 40px;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	border-radius: 10px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	background: linear-gradient(45deg, #2C00FF,#4704FF);
	padding: 10px 15px;
}
#pc_nav ul li:nth-of-type(1) .menu__second-level{	width: 215px;}
#pc_nav ul li:nth-of-type(2) .menu__second-level{	width: 68px;}
#pc_nav ul li:nth-of-type(3) .menu__second-level{	width: 118px;}
#pc_nav ul li:nth-of-type(4) .menu__second-level{	width: 98px;}

.menu__second-level li a:hover{
	color: #bd16ec;
}

#pc_nav li:hover .menu__second-level,
.cb_nav li:hover .menu__second-level{
	top: 50px;
    visibility: visible;
    opacity: 1;
}
.cb_nav li:hover .menu__second-level{ top: 70px;}


/*-------ここからスマホナビ-------*/
header .trans_logo{box-sizing: border-box}
header .menu_stick{
	width: 50px;
	height: 50px;
	z-index: 12;
	top: 20px;
	right: 20px;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 100px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
}
header .menu_stick span{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s;
	width: 20px;
	height: 2px;
	border-radius: 10px;
}
header .menu_stick span:first-of-type{top: 10px}
header .menu_stick span:last-of-type{bottom: 10px}
header .menu_stick.stick_trans span:first-of-type,header .menu_stick.stick_trans span:last-of-type{
	top: 0;
	bottom: 0;
	margin: auto;
}
header .menu_stick.stick_trans span:not(:first-of-type):not(:last-of-type){background-color: transparent}
header .menu_stick.stick_trans span:first-of-type{transform: rotate(225deg)}
header .menu_stick.stick_trans span:last-of-type{transform: rotate(-225deg)}
header #sp_nav{
	z-index: 11;
	left: 0;
	top: 0;
	box-sizing: border-box;
}
header #sp_nav .nav_bg{
	top: 0;
	right: 0;
	left: 0;
	cursor: pointer
}
header #sp_nav.fade_bg_trans .nav_bg{
	right: -300px
}
header #sp_nav sp_nav_box{
	overflow-y: auto;
}
header #sp_nav ul.bg_white{
	top: 0;
	right: -300px;
	box-sizing: border-box;
	overflow-y: auto;
}
header #sp_nav.fade_bg_trans ul.bg_white{right: 0}
#sp_nav ul li{margin-bottom: 10px;}
#sp_nav a{
	color: #fef5ff;
}

/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
.hvr_trans:hover,#pager a:hover{transform: translateY(0)}
header .trans_header{top: 0}

}