@charset "utf-8";

*{
margin:0;
padding:0;
}

html {
/*overflow-y: scroll;*/
}

a{
color:#333333;
text-decoration:none;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}

a:hover {
color:#333333;	
text-decoration:none;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;	
padding: 0;
}

article, aside, canvas, footer, header, hgroup, nav, section, figure, figcaption { 
display: block;
margin: 0;
padding: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
}

table {
border-collapse: collapse;	
border-spacing: 0;
}

caption, th	{
text-align: left;
}

q:before ,q:after {
content: '';
}

object, embed {
vertical-align: top;
}

hr, legend {
display: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

img, abbr, acronym, fieldset {
border: 0;
vertical-align: bottom;
}

li {
list-style-type: none;
}

/*------------ fontStyle------------*/
body {
font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
letter-spacing:1px;
font-size: 13px;
line-height: 2.2;
color:#333;
letter-spacing:1px;
-webkit-text-size-adjust:100%;
}

/*-----------------------------------------------------------------------------------------------------------clearfix-----------------*/

.clearfix{ /zoom:1; }
.clearfix:after{ content : ''; display : block; clear : both; height:0; }
/* .clearfix{ overflow:hidden; } */

/*--------------------------------------------------------------------------------------------------------------jsMessage----------*/

#msg_js{
background: none repeat scroll 0 0 #F00;
color: #FFF;
display: block;
line-height: 1.2;
opacity: 0.7;
padding: 12px 0;
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}

#brass-banner{
	background: url( ../images/brass-banner.jpg) no-repeat left center;
	background-size: cover;
	min-height: 300px;
	margin-bottom: 30px;
	display: block;
}
a#brass-banner:hover{opacity: 0.5;}
#brass-banner-txt{
	float: right;
	width: 50%;
	height: 100%;
	min-height: 300px;
	padding: 75px 50px 75px;
	line-height: 2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#brass-banner-txt h2{margin-bottom: 27px;}
@media screen and (max-width: 768px) {
	#brass-banner{margin-bottom: 60px;}
	#brass-banner-txt{
		float: none;
		width: 100%;
		padding: 80px 20px;
		background-color: rgba(235,240,247,0.75);
	}
}
#begin-banner{
	background: url( ../images/begin-banner.jpg) no-repeat center center;
	background-size: cover;
	margin: 30px auto;
	display: block;
}
a#begin-banner:hover{opacity: 0.5;}
#begin-banner-txt{
	display: block;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	width: 100%;
	height: 100%;
/* 	min-height: 300px; */
	padding: 65px 10px 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#begin-banner-txt:hover{background-color: rgba(245,247,250,0.50);}
@media screen and (max-width: 768px) {
	#begin-banner-txt{padding: 30px 10px;}
}


.greenmyButton {
	background-color:#44c767;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:10px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.greenmyButton:hover {
	background-color:#5cbf2a;
}
.greenmyButton:active {
	position:relative;
	top:1px;
}

#island_city_span{ display:none}
#island_info{ width:340px; border:1px solid #F9C; padding:6px; background:#fff; height:430px; z-index:9999999; position:fixed; top:30%; left:50%; margin-left:-160px; display:none}
.mask_bg{ width:100%; height:100%; position:fixed;  background:rgba(0,0,0,.8); z-index:9999998; position:fixed; display:none; left:0; top:0}