@charset "utf-8";
/* CSS Document */
/* FireFoxFadeブレ防止 */

img { display:block; box-shadow: #000 0 0 0; }

/* 全体・枠作り */

html,body {
	height:100%;
}

html {
	font-size:62.5%;
}

img { display:block; }


body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
	text-align:center;
	min-width: 1100px;
	min-height: 100vh;
	font-size: 1.0rem;
}

.inv {opacity: 0; transition:0.7s; transform:translate(0,20px); }
.vie {opacity: 1.0; transform:translate(0);}

#PageWrapper {
	min-width:1100px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	background:url("../img/bg.jpg") left top repeat;
}

h1 {display:none;}
h2 {display:none;}

header {
	width:100%;
	background:#f7f7f7;
	height:100px;
	position: relative;
}

header:after {
	content: "";
	width:100%;
	height:2px;
	display: block;
	background: #36318f;
	background: -moz-linear-gradient(left,  #36318f 0%, #005eac 50%, #7dccf3 100%);
	background: -webkit-linear-gradient(left,  #36318f 0%,#005eac 50%,#7dccf3 100%);
	background: linear-gradient(to right,  #36318f 0%,#005eac 50%,#7dccf3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36318f', endColorstr='#7dccf3',GradientType=1 );
}

.head_wrap {
	width:1100px;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
}

.head_logo {
	width:159px;
	height:100px;
	display: block;
}

.head_logo a {
	background:url("../img/menu_head.png") center center no-repeat;
	width:159px;
	height:100px;
	display: block;
	transition: all 0.3s;
}

.head_logo a:hover {
	opacity: 0.6;
}

.menu {
	width:600px;
	height:100px;
}

.menu ul {
	width:600px;
	display: flex;
	justify-content: space-between;
	padding-top:40px;
}

.menu ul li a {
	display: block;
	height:20px;
	
}

.menu ul li.menu01 a {background:url("../img/menu01.png") left top no-repeat;width:67px;position: relative;}
.menu ul li.menu02 a {background:url("../img/menu02.png") left top no-repeat;width:67px;position: relative;}
.menu ul li.menu03 a {background:url("../img/menu03.png") left top no-repeat;width:67px;position: relative;}
.menu ul li.menu04 a {background:url("../img/menu04.png") left top no-repeat;width:118px;position: relative;}
.menu ul li.menu05 a {background:url("../img/menu05.png") left top no-repeat;width:66px;position: relative;}

.menu ul li a:after {
	content: "";
	width:0;
	height:3px;
	display: block;
	background: #36318f;
	background: -moz-linear-gradient(left,  #36318f 0%, #005eac 50%, #7dccf3 100%);
	background: -webkit-linear-gradient(left,  #36318f 0%,#005eac 50%,#7dccf3 100%);
	background: linear-gradient(to right,  #36318f 0%,#005eac 50%,#7dccf3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36318f', endColorstr='#7dccf3',GradientType=1 );
	position: absolute;
	left:0;
	bottom:-5px;
	transition: all 0.3s;
}

.menu ul li a:hover:after {
	width:100%;
}

#Mainvisual {
	background:url("../img/mv.jpg") center center no-repeat;
	width:100%;
	height:600px;
	position: relative;
	background-size: cover;
}

#Mainvisual a {
	background:url("../img/mv_logo.png") center center no-repeat;
	width:100%;
	height:600px;
	display: block;
	transition: all 0.3s;
}

#Mainvisual a:after {
	content: "";
	background-color:#fff;
	width:100%;
	height:600px;
	display: block;
	transition: all 0.3s;
	position: absolute;
	left:0;
	top:0;
	opacity: 0;
}

#Mainvisual a:hover:after {
	opacity: 0.3;
}

#Product {
	width:100%;
	padding:72px 0;
}

.head_product {
	background:url("../img/soft_head.png") left top no-repeat;
	width:364px;
	height:48px;
	margin:0 auto 60px;
}

ul.soft_list {
	width:1100px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin:0 auto;
}

ul.soft_list li {
	background:url("../img/product_frame.png") left bottom no-repeat;
	width:340px;
	height:390px;
	position: relative;
	box-sizing: border-box;
	padding:0 10px 10px;
	margin-bottom:32px;
}

ul.soft_list li a {
	width:320px;
	height:380px;
	display: block;
	box-shadow:0 0 15px rgba(16,12,102,0.20);
	transition: all 0.3s;
	position: relative;
}

ul.soft_list li a:hover {
	transform: translateY(-20px);
	box-shadow:0 0 15px rgba(16,12,102,0.6);
}

li.product_01 a {background:url("../img/product01.jpg") left top no-repeat;}
li.product_02 a {background:url("../img/product02.jpg") left top no-repeat;}
li.product_03 a {background:url("../img/product03.jpg") left top no-repeat;}
li.product_04 a {background:url("../img/product04.jpg") left top no-repeat;}
li.product_ex01 a {background:url("../img/product_ex01.jpg") left top no-repeat;}
li.product_ex02 a {background:url("../img/product_ex02.jpg") left top no-repeat;}

ul.soft_list li a:after {
	position: absolute;
	content: "";
	display: block;
	
	width:120px;
	height:24px;
	top:-12px;
	left:10px;
}

li.product_01 a:after {background:url("../img/nb01.png") left top no-repeat;}
li.product_02 a:after {background:url("../img/nb02.png") left top no-repeat;}
li.product_03 a:after {background:url("../img/nb03.png") left top no-repeat;}
li.product_04 a:after {background:url("../img/nb04.png") left top no-repeat;}
li.product_ex01 a:after {background:url("../img/nbe1.png") left top no-repeat;}
li.product_ex02 a:after {background:url("../img/nbe2.png") left top no-repeat;}

#Links {
	background:#e6e6e6;
	width:100%;
	padding:60px 0;
}

.links_wrap {
	width:1100px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin:0 auto;
}

.links_left {
	width:620px;
	background:url("../img/download_sales.png") left top no-repeat;
	padding-top:110px;
	display: flex;
	justify-content: space-between;
}

ul.line01 li {
	width:300px;
	height:100px;
	display: block;
	margin-bottom:20px;
}

ul.line01 li a {
	width:300px;
	height:100px;
	display: block;
	transition: all 0.3s;
}

ul.line01 li a:hover {
	opacity: 0.6;
}

li.dl01 a {background:url("../img/dlgame_01.jpg") left top no-repeat;}
li.dl02 a {background:url("../img/dlgame_02.jpg") left top no-repeat;}
li.dl03 a {background:url("../img/dlgame_03.jpg") left top no-repeat;}
li.dl04 a {background:url("../img/dlgame_04.jpg") left top no-repeat;}

ul.line02 li {
	width:300px;
	height:100px;
	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom:20px;
}

.select_wrap {
	width:300px;
	height:100px;
	background-color:rgba(0,0,0,0.6);
	opacity: 0;
	transition: all 0.3s;
	display: flex;
	justify-content: center;
	align-items:center;
	gap:10px;
}

.select_wrap:hover {
	opacity: 1;
}

.select_wrap a {
	display: block;
	width:130px;
	line-height:40px;
	font-weight: bold;
	color:#fff;
	text-decoration: none;
	font-size:1.6rem;
}

.sele01 {
	background:#f32237;
}

.sele02 {
	background:#011e7a;
}

li.mu01 {background:url("../img/music01.jpg") left top no-repeat;}
li.mu02 {background:url("../img/music02.jpg") left top no-repeat;}
li.mu03 {background:url("../img/music03.jpg") left top no-repeat;}

.links_right {
	width:440px;
}

.links_console {
	width:1100px;
}

.links_right {
	background:url("../img/tweet.png") left top no-repeat;
	width:440px;
	padding-top:40px;
	position: relative;
	margin-bottom:60px;
}

a.twit_link {
	width:130px;
	height:24px;
	position: absolute;
	top:8px;
	right:11px;
	background-color:#fff;
	border-radius: 12px;
	display: block;
	transition: all 0.3s;
	opacity: 0;
}

a:hover.twit_link {
	opacity: 0.5;
}

.twidget {
	width:440px;
	height:530px;
	background-color:#fff;
	border-radius: 0 0 10px 10px;
}

.links_console {
	width:800px;
	margin:0 auto;
	background:url("../img/console_game.png") center top no-repeat;
	padding-top:110px;
}

.links_console ul {
	width:800px;
}

.links_console ul li {
	width:800px;
	height:100px;
	background:#fff;
}

.links_console ul li a {
	display: block;
	width:800px;
	height:100px;
	transition: all 0.3s;
}

.links_console ul li a:hover {
	opacity: 0.6;
}

li.cons_01 a {background:url("../img/console_01.jpg") left top no-repeat;}

footer {
	width:100%;
	padding:120px 0;
}

.foot_logo {
	background:url("../img/brand_logo.png") left top no-repeat;
	width:301px;
	height:146px;
	margin:0 auto 32px;
}

.foot_policy {
	width:350px;
	height:32px;
	display: block;
	margin:0 auto 32px;
	border-radius: 16px;
	overflow: hidden;
	background-color:#fff;
}

.foot_policy a {
	background:url("../img/link_policy.png") left top no-repeat;
	width:350px;
	height:32px;
	display: block;
	transition: all 0.3s;
}

.foot_policy a:hover {
	opacity: 0.6;
}

.foot_link {
	width:420px;
	margin:0 auto;
}

.foot_link ul {
	width:420px;
	display: flex;
	justify-content: space-between;
}

.foot_link ul li {
	width:200px;
	height:40px;
	background-color:#fff;
}

.foot_link ul li a img {
	transition: all 0.3s;
}

.foot_link ul li a:hover img {
	opacity: 0.6;
}