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

/* ＋＋＋＋パソコン対応＋＋＋＋ */

.btn {
	width: 300px;
	height: 80px;
	border: 2px solid white;
	color: white;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	transition: all 0.25s ease;
	cursor: pointer;
	line-height: 300%;
	margin-bottom: 10px;
	-webkit-box-shadow: 2px 2px 4px #555555;
	box-shadow: 2px 2px 4px #555555;
}
.btn:hover {
	background-color: #00002C;
	color: #FFDD00;
}
.hero {
	width: 100%;
	height: 100%;/*skipper の縦幅*/
	max-width: 1300px;
	min-height: 800px;
	position: relative;
	border-bottom: 4px solid #01ACFF;
	-webkit-box-shadow: 4px 0px 10px;
	box-shadow: 4px 0px 10px;
	margin-left: auto;
	margin-right: auto
}
.hero .container_skipper {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	z-index: 999
}
.hero .tagline {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	letter-spacing: -3px;
	width: 40%;
	padding: 200px 0 0 0;
	float: left;
	color: white
}
.hero .tagline p {
	font-size: 1.5rem;
	line-height: 1.5rem;
	letter-spacing: -0.25rem;
	margin-top: 10px
}
.hero .tagline h1 {
	font-weight: bold;
	font-size: 1rem;
	letter-spacing: 0.5rem;
	line-height: 1rem
}
.hero .downloads {
	float: right;
	width: 40%;
	color: white;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 1.6rem;
	height: 80%;
	padding: 60px 0 0 0;
	position: relative
}
.hero .downloads .btn-container {
	position: absolute;
	left: 50%;
	top: 280px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%
}
.hero .downloads .btn-container .btn {
	float: right;
	text-align: center;
	margin-left: 20px;
	margin-bottom: 20px;
	background-image: url(../img/downloads_btn_bg.png);
}
#random a {
	font-size: 300%;
	line-height: 300%;
	letter-spacing: -0.25rem;
	text-decoration: none;
	font-weight: bold;
	color: #B6FFFD;
	padding-left: 10%;
	margin-top: 60%;
	text-shadow: 4px 4px 8px #000545;
}
#random a:hover {
	color: #F8FF00;
}

@media (min-width: 600px) and (max-width: 959px) {
/* ＋＋＋＋タブレット対応＋＋＋＋ */
.hero .tagline {
	width: 100%;
	padding: 0% 0 0 0;
	margin-bottom: 30px;
}
.hero .tagline p {
}
.hero .tagline h1 {
}
.hero .tagline {
	padding: 50px 0 0 0
}
.hero .downloads .btn-container {
	top: 160px;	
}
/* ＋＋＋＋タブレット対応：end＋＋＋＋ */
}

@media (max-width: 599px) {
/* ＋＋＋＋スマホ対応＋＋＋＋ */
.hero .tagline {
	float: none;
	width: 100%;
	padding: 0% 0 0 0;
	margin-bottom: 30px;
}
.hero .tagline p {
	font-size: 1rem
}
.hero .downloads {
	float: right;
	width: 100%;
	height: auto;
	margin-top: 0px;
}
.hero .downloads .btn-container {
	left: 50%;
	top: 200px;	
}
.hero .downloads .btn-container .btn {
	float: right;
	margin: 10px 0px 0 0
}
#random a {
	font-size: 200%;
	line-height: 300%;
}
/* ＋＋＋＋スマホ対応：end＋＋＋＋ */
}