body {
	width  : 100%;
	height : 100%;
	margin : 0px;
	min-width  : 1080px;
	padding : 0px;
	font-family : 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	color: #4a4a4a;
}
#content {
	position : fixed;
	top : 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
a {
	overflow:hidden;
	outline:none;
}
a:hover {
	text-decoration : underline;
}
img {
	border: none;
}
section {
	min-height : 500px;
	min-height : 100%;
	width      : 100%;
	position   : absolute;
	overflow   : hidden;
	visibility : hidden;
}
div.caption {
	padding-bottom : 30px;
	font-size      : 13px;
}

/* default section show / hide animations */
section.start {
	top : 100%;
}
section.focus, section.to {
	bottom : 0%;
}
section.end {
	bottom : 100%;
}

/* default background image animation */
section .bg {
	position : absolute;
	left     : 0px;
	top      : 0%;
}
section .bg.start {
	top : -50%;
}
section .bg, section .bg.focus, section .bg.to {
	top : 0%;
}
section .bg.end {
	top : 50%;
}

/* ---------- a ---------- */
a {
	color: #332997;
}

/* ---------- clearfix ---------- */
.clearfix:before, .clearfix:after { content: ""; display: block; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ---------- pagetop ---------- */
#pagetop {
	width: 60px;
	height: 60px;
}
body.section-hokkaidoTohoku #pagetop,
body.section-tokyo #pagetop,
body.section-kanto #pagetop,
body.section-tokaiChubu #pagetop,
body.section-kinki #pagetop,
body.section-chugokuShikoku #pagetop,
body.section-kyushuOkinawa #pagetop,
body.section-kaigai #pagetop,
body.section-login #pagetop {
		position : fixed;
		right: 5%;
		top: 5%;
		z-index  : 2;
}
#pagetop a {
	display: block;
	width: 60px;
	height: 0;
	padding-top: 60px;
	overflow: hidden;
	background-image: url("/contents/images/global/gotopOff.png");
	background-repeat: no-repeat;
}
#pagetop a:hover {
	background-image: url("/contents/images/global/gotopOn.png");
	background-repeat: no-repeat;
}

/*---------- logo ----------*/
#logo {
	position: relative;
	left: 0;
	top: 0;
	z-index: 99;
	width: 130px;
	height: 44px;
	padding: 10px 15px 15px 10px;
	background: #FFFFFF;
	border-radius: 0 0 10px;
}
#logo a {
	display:block;
	width: 130px;
	height: 0;
	padding: 44px 0 0;
	overflow :hidden;
	background-image: url("/contents/images/global/logo.png") ;
	background-repeat: no-repeat; 
	background-size :130px 44px; 
}

@media only screen and (max-height: 680px) {
	#logo {
		left: 0;
		top: 0;
		z-index: 2;
		width: 100px;
		height: 34px;
		padding: 8px;
	}
	#logo a {
		width: 100px;
		padding: 34px 0 0;
		background-image: url("/contents/images/global/logo100.png") ;
		background-size :100px 34px; 
	}
}

/*----------for Retina----------*/
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	#logo a {
		background-image: url("/contents/images/global/logo@2x.png") ;
	}
}

/*---------- h2 ----------*/
#story-header h2 {
	display: inline-block;
	position: relative;
	left: 160px;
	top: 100px;
	background-image: url("/contents/images/global/bgStory.png");
	background-repeat: repeat;
	font-size: 200%;
	text-shadow: 1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;
	line-height: 1.6; 
	letter-spacing: 2px;
	padding: 20px;
}

#story-header h2 span {
	display: block;
    font-size: 70%;
    line-height: 1.3;
    padding-top: 10px;
}

@media only screen and (max-height: 680px) {
	#story-header h2 {
			left: 130px;
			font-size: 170%;
			top: 100px;
		}
}

/*----------for Retina----------*/
/*@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	#story-header h2 {
		background-image: url("/contents/images/global/message@2x.png");
	}
}*/

/*---------- nav ----------*/
ul#nav {
		position : fixed;
		left: 0;
		top: 130px;
		z-index: 2;
}

@media only screen and (max-height: 680px) {
	ul#nav {
			position : fixed;
			left: 0;
			top: 70px;
			0px;
			z-index: 2;
	}
}

nav li a {
		display: block;
		width: 61px;
		height: 0;
		padding-top: 60px;
		overflow: hidden;
		outline: none;
		background-position: right bottom;
		background-size: 121px 60px;
}
li.nav01 a { background-image  : url("/contents/images/global/nav01.png");}
li.nav02 a { background-image  : url("/contents/images/global/nav02.png");}
li.nav03 a { background-image  : url("/contents/images/global/nav03.png");}
li.nav04 a { background-image  : url("/contents/images/global/nav04.png");}
li.nav05 a { background-image  : url("/contents/images/global/nav05.png");}
li.nav06 a { background-image  : url("/contents/images/global/nav06.png");}
li.nav07 a { background-image  : url("/contents/images/global/nav07.png");}
li.nav08 a { background-image  : url("/contents/images/global/nav08.png");}
li.nav09 a { background-image  : url("/contents/images/global/nav09.png");}
/*----------for Retina----------*/
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	li.nav01 a { background-image  : url("/contents/images/global/nav01@2x.png") ;}
	li.nav02 a { background-image  : url("/contents/images/global/nav02@2x.png") ;}
	li.nav03 a { background-image  : url("/contents/images/global/nav03@2x.png") ;}
	li.nav04 a { background-image  : url("/contents/images/global/nav04@2x.png") ;}
	li.nav05 a { background-image  : url("/contents/images/global/nav05@2x.png") ;}
	li.nav06 a { background-image  : url("/contents/images/global/nav06@2x.png") ;}
	li.nav07 a { background-image  : url("/contents/images/global/nav07@2x.png") ;}
	li.nav08 a { background-image  : url("/contents/images/global/nav08@2x.png") ;}
	li.nav09 a { background-image  : url("/contents/images/global/nav09@2x.png") ;} 
}
/*---------- hover ----------*/
li.nav01 a:hover { background-image  : url("/contents/images/global/nav01on.png");}
li.nav02 a:hover { background-image  : url("/contents/images/global/nav02on.png");}
li.nav03 a:hover { background-image  : url("/contents/images/global/nav03on.png");}
li.nav04 a:hover { background-image  : url("/contents/images/global/nav04on.png");}
li.nav05 a:hover { background-image  : url("/contents/images/global/nav05on.png");}
li.nav06 a:hover { background-image  : url("/contents/images/global/nav06on.png");}
li.nav07 a:hover { background-image  : url("/contents/images/global/nav07on.png");}
li.nav08 a:hover { background-image  : url("/contents/images/global/nav08on.png");}
li.nav09 a:hover { background-image  : url("/contents/images/global/nav09on.png");}
/*---------- hover for Retina----------*/
/*@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	li.nav01 a:hover { background-image  : url("/contents/images/global/nav01on@2x.png") ;}
	li.nav02 a:hover { background-image  : url("/contents/images/global/nav02on@2x.png") ;}
	li.nav03 a:hover { background-image  : url("/contents/images/global/nav03on@2x.png") ;}
	li.nav04 a:hover { background-image  : url("/contents/images/global/nav04on@2x.png") ;}
	li.nav05 a:hover { background-image  : url("/contents/images/global/nav05on@2x.png") ;}
	li.nav06 a:hover { background-image  : url("/contents/images/global/nav06on@2x.png") ;}
	li.nav07 a:hover { background-image  : url("/contents/images/global/nav07on@2x.png") ;}
	li.nav08 a:hover { background-image  : url("/contents/images/global/nav08on@2x.png") ;}
	li.nav09 a:hover { background-image  : url("/contents/images/global/nav09on@2x.png") ;} 
}*/
/*----------  ON hover ----------*/
body.section-hokkaidoTohoku #nav li.nav01 a:hover { background-image  : url("/contents/images/global/nav01.png");}
body.section-tokyo #nav li.nav02 a:hover { background-image  : url("/contents/images/global/nav02.png");}
body.section-kanto #nav li.nav03 a:hover { background-image  : url("/contents/images/global/nav03.png");}
body.section-tokaiChubu #nav li.nav04 a:hover { background-image  : url("/contents/images/global/nav04.png");}
body.section-kinki #nav li.nav05 a:hover { background-image  : url("/contents/images/global/nav05.png");}
body.section-chugokuShikoku #nav li.nav06 a:hover { background-image  : url("/contents/images/global/nav06.png");}
body.section-kyushuOkinawa #nav li.nav07 a:hover { background-image  : url("/contents/images/global/nav07.png");}
body.section-kaigai #nav li.nav08 a:hover { background-image  : url("/contents/images/global/nav08.png");}
body.section-login #nav li.nav09 a :hover { background-image  : url("/contents/images/global/nav09.png");}
/*---------- ON hover for Retina----------*/
/*@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	body.section-hokkaidoTohoku #nav li.nav01 a:hover { background-image  : url("/contents/images/global/nav01@2x.png") ;}
	body.section-tokyo #nav li.nav02 a:hover { background-image  : url("/contents/images/global/nav02@2x.png") ;}
	body.section-kanto #nav li.nav03 a:hover { background-image  : url("/contents/images/global/nav03@2x.png") ;}
	body.section-tokaiChubu #nav li.nav04 a:hover { background-image  : url("/contents/images/global/nav04@2x.png") ;}
	body.section-kinki #nav li.nav05 a:hover { background-image  : url("/contents/images/global/nav05@2x.png") ;}
	body.section-chugokuShikoku #nav li.nav06 a:hover { background-image  : url("/contents/images/global/nav06@2x.png") ;}
	body.section-kyushuOkinawa #nav li.nav07 a:hover { background-image  : url("/contents/images/global/nav07@2x.png") ;}
	body.section-kaigai #nav li.nav08 a:hover { background-image  : url("/contents/images/global/nav08@2x.png") ;}
	body.section-login #nav li.nav09 a :hover { background-image  : url("/contents/images/global/nav09@2x.png") ;} 
}*/

body.section-hokkaidoTohoku #nav li.nav01 a ,
body.section-tokyo #nav li.nav02 a ,
body.section-kanto #nav li.nav03 a ,
body.section-tokaiChubu #nav li.nav04 a ,
body.section-kinki #nav li.nav05 a ,
body.section-chugokuShikoku #nav li.nav06 a ,
body.section-kyushuOkinawa #nav li.nav07 a ,
body.section-kaigai #nav li.nav08 a,
body.section-login #nav li.nav09 a {
		width:121px;
		background-position: right bottom;
		margin:2px 0;
}

/*---------- hover ----------*/
nav li a:hover {
	margin: 3px 0;
}

nav li.nav01 a:hover {
	margin: 0 0 3px;
}

nav li.nav04 a:hover { background-image  : url("/contents/images/global/nav04on.png") ;}

nav li.nav09 a:hover {
	margin: 3px 0 0;
}
/*---------- circle ----------*/
.circle {
	height: auto;
	position: absolute;
}
.c13 {
	width: 178px;
	left: 1003px;
	top: 486px;	
}
.c2500 {
	width: 154px;
	left: 818px;
	top: 396px;	
}
.c42 {
	width: 126px;
	left: 1064px;
	top: 223px;	
}
.c160 {
	width: 102px;
	left: 673px;
	top: 572px;	
}
.c365 {
	width: 122px;
	left: 454px;
	top: 474px;	
}
/*---------- story ----------*/
section .area_list {
	width         : 560px;
	padding       : 50px 60px 30px 50px;
	background-image: url("/contents/images/global/bgStory.png");
	background-repeat: repeat;
}
section .area_list.large {
	width         : 600px;
	padding       : 30px 20px 30px 30px;
}
.story h2 {
	font-size: 22px;
	color: #5A5A5A;
	font-weight: bold;
	padding: 0 0 10px 0px;
	margin-bottom: 10px;
	background-image: url("/contents/images/global/bgLine.png");
	background-repeat: no-repeat;
	background-position: left bottom;
}
.story ul {
	padding-left: 10px;
	margin-bottom: 15px;
}
.story li {
	float: left;
	margin-bottom: 1px;
	line-height: 1.8;
}
.story li a {
	font-size: 14px;
	margin-right: 20px;
}

/*----------login----------*/
#story-login .story {
    left: 50%;
    margin: 76px auto 76px -290px;
    min-height: 455px;
    padding: 90px 40px 10px;
    width: 480px;
	background-image: url("/contents/images/global/bgStory.png");
	background-repeat: repeat;
}
.story_login_form {
	-webkit-border-radius: 600px;
	-moz-border-radius: 600px;
	border-radius: 600px;
}
#story-login .story > div {
    padding: 30px 40px 50px;
}
#story-login h2 {
	position: relative;
	font-size: 26px;
	text-align: center;
    border: medium none;
	width: 360px;
	height: 0;
	padding: 40px 0 0 0;
	margin:0 0 0 20px;
	overflow: hidden;
	background-image: url("/contents/images/global/loginTxt.png") ;
	background-repeat: no-repeat;
	background-size: 360px 40px;
}
/*----------for Retina----------*/
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
	#story-login h2 {
		background-image: url("/contents/images/global/loginTxt@2x.png");
	}
}

#story-login .story ul {
	width:255px;
	margin: 0 auto;
}
#story-login .story li {
	width:255px;
	float: none;
	margin-bottom: 2px;
}

/*----------form----------*/
#story-login .story li.remarks {
	width:255px;
	margin-bottom: 20px;
}
label {
	width:255px;
    color: #5A5A5A;
    font-size: 14px;
    font-weight: bold;
}
#username {
    margin-bottom: 15px;
}

#username,
#password {
    border: 1px solid #cecece;
	color: #453932;
	font-weight: bold;
	font-size: 14px;
    width: 235px;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#12ffffff,EndColorStr=#12ffffff);
	background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
    padding: 6px 5px;
}
#loginbtn {
	cursor: pointer;
	width:245px;
	color: #fff;
	font-size:14px;
	padding: 7px 0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border-top: 1px solid #FF6702;
	border-left: 1px solid #FF6702;
    border-right: 1px solid #FF5400;
    border-bottom: 1px solid #FF5400;
    /*border: medium none;*/
	background: #f65e02; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2NWUwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMjNhMDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f65e02 0%, #f23a02 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f65e02), color-stop(100%,#f23a02)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f65e02 0%,#f23a02 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f65e02 0%,#f23a02 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f65e02 0%,#f23a02 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f65e02 0%,#f23a02 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f65e02', endColorstr='#f23a02',GradientType=0 ); /* IE6-8 */
}	
#loginbtn:hover {
	border: 1px solid #F20602;
	background-color: #ED4402;
}
/*----------footer----------*/
footer {
	position: absolute;
	bottom: 10px;
	right: 15px;
	z-index : 1;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
@media only screen and (max-height: 680px) {
	footer {
		position: static;
	}
}
footer a {
	color: #fff;
	margin-right: 20px;
	font-weight: bold;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
footer li {
	float: left;
}

.areamypl {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index : 1;
	color: #fff;
	font-size: 15px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.areamypl ul {
	padding: 0;
	margin: 0;
	font-weight: bold;
}

.areamypl ul li {
	float: none;
	line-height: 1.5;
}

.areamypl ul li a {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
}