@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: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:62.5%;
	text-align:center;
}

#PageWrapper {
	min-height: 100vh;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	min-width:1100px;
}

header {
	width:100%;
	position: relative;
}

header:before {
	content: "";
	width:100%;
	height:5px;
	display: block;
	background-color:#00b7ee;
}

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

.head_logo {
	background:url("../a_img/head_logo.png") left top no-repeat;
	width:350px;
	height:150px;
}

h1, h2 {
	display: none;
}

.head_logo a {
	display: block;
	width:350px;
	height:150px;
	background-color:#fff;
	transition: all 0.3s;
	opacity: 0;
}

.head_logo a:hover {
	opacity: 0.4;
}

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

ul.menu li {
	display: block;
	width:170px;
	height:70px;
	border-right:1px solid #cccccc;
}

ul.menu li a {
	display: block;
	width:170px;
	height:70px;
	transition: all 0.3s;
}

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

li.menu01 {border-left:1px solid #cccccc;}

li.menu01 a {background:url("../a_img/menu_01.png") left top no-repeat;}
li.menu02 a {background:url("../a_img/menu_02.png") left top no-repeat;}
li.menu03 a {background:url("../a_img/menu_03.png") left top no-repeat;}
li.menu04 a {background:url("../a_img/menu_04.png") left top no-repeat;}

/*メインビジュアル*/

#MV {
	padding-bottom:60px;
}

.mainvisual {
	width:1100px;
	margin:0 auto 24px;
	position: relative;
}

.mainvisual ul li {
	border-radius: 15px;
	overflow: hidden;
	border:5px solid #ebebeb;
	position: relative;
	z-index:3000;
}

.navigation {
	width:1100px;
	margin:0 auto;
}

.navigation ul {
	width:1100px;
	display: flex;
	justify-content: space-between;
	position: relative;
}

.navigation ul li {
	border-radius: 15px;
	overflow: hidden;
	border:5px solid #ebebeb;
	position: relative;
	z-index:3000;
}

#Contents {
	background:#f5f5f5;
	padding:48px 0;
}

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

.contents_steam {
	width:100%;
	background:url("../a_img/head_steam.png") left top no-repeat;
	padding-top:100px;
	margin-bottom:48px;
}


.contents_left {
	width:100%;
	background:url("../a_img/head_product2.png") left top no-repeat;
	padding-top:100px;
	margin-bottom:48px;
}

ul.gamelist {
	display: flex;
	justify-content: flex-start;
	gap:24px 2%;
	width:100%;
	position: relative;
	flex-wrap: wrap;
	box-sizing: border-box;
}

ul.gamelist li {
	margin-bottom:20px;
	width:32%;
	position: relative;
	box-sizing: border-box;
}

ul.steam li {
	height:240px;
	overflow: hidden;
}

ul.gamelist li a img {
	width:100%;
	transition: all 0.3s;
}

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

ul.gamelist li span {
	position: absolute;
	left:0;
	top:0;
	display: block;
	background:#000;
	padding:8px 24px;
	color:#fff;
	font-size: 1.7rem;
	font-weight: bold;
}

ul.gamelist li p {
	position: absolute;
	left:0;
	bottom:0;
	display: block;
	background:#000;
	padding:8px 24px;
	color:#fff;
	font-size: 1.7rem;
	font-weight: bold;
	width:100%;
	text-align: center;
	box-sizing: border-box;
}

.contents_right {
	width:100%;
	background:url("../a_img/head_link.png") left top no-repeat;
	padding-top:100px;
	
}

.contents_right ul {
	display: flex;
	justify-content: space-between;
	width:100%;
	position: relative;
}

.contents_right ul li {
	margin-bottom:20px;
	width:24%;
}

.contents_right ul li a img {
	width:100%;
	transition: all 0.3s;
}

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

#Twitter {
	padding:170px 0 48px;
	background:url("../a_img/head_twitter.png") center top 60px no-repeat;
}

.twitter_wrap {
	background:url("../a_img/bg_twitter.png") center top no-repeat;
	width:100%;
	height:500px;
	padding:5px;
	box-sizing: border-box;
}

.twidget {
	width:590px;
	height:490px;
	border-radius: 10px;
	overflow: hidden;
	margin:0 auto;
}

.foot_space {
	width:100%;
	height:100px;
}

footer {
	background:#00b7ee;
	position: relative;
	padding:60px 0;
	color:#fff;
	font-size:1.6rem;
}

footer a {
	color:#fff;
	text-decoration: underline;
}

footer a:hover {
	text-decoration: none;
}

footer:before {
	content: "";
	background:url("../a_img/wave.png") left top repeat;
	width:100%;
	height:30px;
	display: block;
	position: absolute;
	top:-30px;
}

.foot_head {
	background:url("../a_img/foot_title.png") center top no-repeat;
	width:100%;
	height:36px;
	margin-bottom:50px;
}

.foot_link {
	margin-bottom:50px;
}

.attention {
	margin-bottom:50px;
}

/*サブページ*/

#Subpage {
	background:#fff;
	padding:48px 0;
}

a.pastlink {
	width:500px;
	margin:0 auto 36px;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size:2.6rem;
	text-decoration: none;
	color:#fff;
	padding:10px 24px;
	line-height: 40px;
	border-radius: 30px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b7ee+0,76d3ed+100 */
	background: #00b7ee; /* Old browsers */
	background: -moz-linear-gradient(top,  #00b7ee 0%, #76d3ed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #00b7ee 0%,#76d3ed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #00b7ee 0%,#76d3ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ee', endColorstr='#76d3ed',GradientType=0 ); /* IE6-9 */
	display: block;
	transition: all 0.3s;
}

a:hover.pastlink {
	opacity: 0.6;
}

h3 {
	display: block;
	width:100%;
	height:80px;
	text-indent: -9999px;
	overflow: hidden;
	margin-bottom:72px;
}

h3#Product {background:url("../a_img/head_product.png") center center no-repeat;}
h3#Android {background:url("../a_img/head_android.png") center center no-repeat;}
h3#Music {background:url("../a_img/head_music.png") center center no-repeat;}
h3#Support {background:url("../a_img/head_support.png") center center no-repeat;}
h3#Goods {background:url("../a_img/head_goods.png") center center no-repeat;}

/*製品情報*/

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

.product_box {
	width:520px;
	background:#f5f5f5;
	border-radius: 15px;
	padding:20px;
	box-sizing: border-box;
	position: relative;
	margin-bottom:36px;
}

.p_img a img {
	width:100%;
	margin-bottom:12px;
	transition: all 0.3s;
}

.p_img a:hover img {
	opacity: 0.6;
}

.p_title {
	width:100%;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size:2rem;
	padding:12px 0;
	background-color:#fff;
	color:#00b7ee;
	margin-bottom:12px;
	border-radius: 10px;
}

.p_comment {
	width:100%;
	font-size:1.6rem;
	padding:12px 24px;
	box-sizing: border-box;
	background-color:#fff;
	color:#3F3F3F;
	margin-bottom:12px;
	border-radius: 10px;
	text-align: justify;
	line-height: 1.7;
}

.p_staff ul li{
	width:100%;
	font-size:1.6rem;
	padding:12px 0;
	background-color:#fff;
	color:#515151;
	margin-bottom:12px;
	border-radius: 10px;
}

.product_box a.itemlink {
	width:100%;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size:2rem;
	padding:12px 0;
	background-color:#00b7ee;
	color:#fff;
	text-decoration: none;
	display: block;
	border-radius: 10px;
	transition: all 0.3s;
}

.product_box a:hover.itemlink {
	opacity: 0.6;
}

.product_box a.itemlink2 {
	width:100%;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size:2rem;
	padding:12px 0;
	background-color:#32b16c;
	color:#fff;
	text-decoration: none;
	display: block;
	border-radius: 10px;
	margin-bottom:12px;
	transition: all 0.3s;
}

.product_box a:hover.itemlink2 {
	opacity: 0.6;
}

a.os_banner {
	transition: all 0.3s;
	margin:0 auto 24px;
	border-radius: 15px;
	overflow: hidden;
	border:5px solid #ebebeb;
	width:1000px;
	height:200px;
}

.musicbox {
	width:540px;
	background:#f5f5f5;
	border-radius: 15px;
	padding:20px;
	box-sizing: border-box;
	position: relative;
	margin-bottom:36px;
}

.musicbox a {
	display: flex;
	justify-content: space-between;
	text-decoration: none;
	color:#00b7ee;
	transition: all 0.3s;
}

.musicbox a:hover {
	opacity: 0.6;
}

.m_img {
	width:200px;
	position: relative;
}

.m_img img {
	width:100%;
}

.m_title {
	width:280px;
	display: flex;
	justify-content: left;
	align-items: center;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size:2rem;
	text-align: left;
	line-height: 2;
}