@charset "utf-8";
/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */

/*----------------------------------------------------
	BaseSettings
----------------------------------------------------*/
* { margin: 0; padding: 0; }
html{
	height: 100%;
}
body {
	font-family: 'Belleza', "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	background: #fff;
	color: #006;
}
h1 {
	text-align: center;
	margin-top: 50px;
}
h3 {
	width: 100%;
	text-align: center;
}

.clear{ clear: both; visibility: hidden; height: 0;}

/* Link
----------------------------------------------------*/
a {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

a:link {
	color: #666;
	text-decoration: none;
}

a:visited {
	color: #666;
}

a:hover {
	color: #fff;
}

a:active {
}


/* Loading
----------------------------------------------------*/
/* ラインの最初の色のスタイル */
#line { 
	width:100%; /* 横幅100% */
	z-index: -1;
}

/* ラインのアニメーション時の色と動き */
.fullwidth .expand { 
	width:100%; 
	height:3px; 
	margin:30% 0 0 0; 
	background:#17cddd; 
	position:absolute;
    -moz-animation:fullexpand 2s ease-out;
	-webkit-animation:fullexpand 2s ease-out;
}

 /* キーフレームを使った横幅100%のローディングの始まりと終わりの変化 */
@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}
@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}


/* Bg
----------------------------------------------------*/
img.bg1 {
  max-height: 640px;
  min-width: 480px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-animation: appear 2s ease-in-out 2s backwards;
  -moz-animation: appear 2s ease-in-out 2s backwards;
  animation: appear 2s ease-in-out 2s backwards;
}
img.bg2 {
  max-height: 640px;
  min-width: 480px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-animation: appear 4s ease-in-out 4s backwards;
  -moz-animation: appear 4s ease-in-out 4s backwards;
  animation: appear 4s ease-in-out 4s backwards;
}


@media screen and (max-width: 480px){
  bg1 bg2 {
  left: 50%;
  margin-left: -240px; }
}

#container {
	position: relative; 
}
#contents {
	position: absolute;
	top: 800px;
	left: 50%;
	margin-left: -450px;
	width: 900px;
	padding: 20px;
	z-index: 1000;
}
.box {
	padding: 0 70px;
	_zoom: 1;
	overflow: hidden;
}

.mov-border {
	float: left;
	margin: 10px 13px 20px 7px;
	border: 3px solid #fff;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,0.4);
	box-shadow: 0 0 4px 2px rgba(0,0,0,0.4);
}

footer {
	width: 100%;
	text-align: center;
	margin-top: 50px;
}
#twit {
	padding: 20px;
}

/*----------------------------------------------------
	Elements
----------------------------------------------------*/
/* Introduction
----------------------------------------------------*/
.sp-container {
	position: absolute;
	top: 400px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 5;
}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 100;
}
.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 30px;
	height: 310px;
	margin-top: -155px;
	width: 100%;
	text-align: center;
}
.sp-container h2.frame-1 {
	-webkit-animation: main 2s ease-in-out 3s both;
	-moz-animation: main 2s ease-in-out 3s both;
	-o-animation: main 2s ease-in-out 3s both;
	animation: main 2s ease-in-out 3s both;
}
.sp-container h2.frame-2 {
	-webkit-animation: main2 2s ease-in-out 5s both;
	-moz-animation: main2 2s ease-in-out 5s both;
	-o-animation: main2 2s ease-in-out 5s both;
	animation: main2 2s ease-in-out 5s both;
}

/* Table
----------------------------------------------------*/
table {
	border-top: solid 1px #75bec0;
	margin-bottom: 30px;
}
table th, table td {
	padding: 5px 2px;
	border-bottom: solid 1px #75bec0;
}
table td.partition {
	width: 7%;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
#info table th {
	width: 30%;
	font-weight: bold;
	text-align: right;
}
#info table {
	float: left;
	width: 420px;
	margin-top: 10px;
}
#track table {
	float: left;
	width: 300px;
	margin-top: 10px;
}

#track table th {
	font-weight: normal;
}
#staff table, #link table {
	width: 100%;
	border: none;
}
#staff table th, #staff table td {
	padding: 5px 2px;
	border: none;
}
#staff table td.partition {
	width: 3%;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
#staff table th {
	width: 50%;
	font-weight: normal;
	text-align: right;
}

#link table th, #link table td {
	padding: 5px 2px;
	border: none;
}
#link table td.partition {
	width: 3%;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
#link table th {
	width: 50%;
	font-weight: normal;
	text-align: right;
}

/* pagetop
----------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 5000;
}
#page-top a {
	background: rgba(12,84,139,0.6);
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
}

/*----------------------------------------------------
	Keyframes-main
----------------------------------------------------*/

/* webkit
----------------------------------------------------*/
@-webkit-keyframes main{
	0%{
		opacity: 0;
		-webkit-transform: translate(-240px,-150px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-240px,-150px);
	}
}
@-webkit-keyframes main2{
	0%{
		opacity: 0;
		-webkit-transform: translate(-250px,200px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-250px,220px);
	}
}
@-webkit-keyframes appear{
	0%{
		opacity: 0;
	}
	100% { 
		opacity: 1;
	}
}
@-webkit-keyframes dis{
	0%{
		opacity: 1;
	}
	100% { 
		opacity: 0;
	}
}

/* moz
----------------------------------------------------*/
@-moz-keyframes main{
	0%{
		opacity: 0;
		-webkit-transform: translate(-240px,-150px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-240px,-150px);
	}
}
@-moz-keyframes main2{
	0%{
		opacity: 0;
		-webkit-transform: translate(-250px,200px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-250px,220px);
	}
}
@-moz-keyframes appear{
	0%{
		opacity: 0;
	}
	100% { 
		opacity: 1;
	}
}
@-moz-keyframes dis{
	0%{
		opacity: 1;
	}
	100% { 
		opacity: 0;
	}
}

/* keys
----------------------------------------------------*/
keyframes main{
	0%{
		opacity: 0;
		-webkit-transform: translate(-240px,-150px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-240px,-150px);
	}
}
keyframes main2{
	0%{
		opacity: 0;
		-webkit-transform: translate(-250px,200px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate(-250px,220px);
	}
}
keyframes appear{
	0%{
		opacity: 0;
	}
	100% { 
		opacity: 1;
	}
}
keyframes dis{
	0%{
		opacity: 1;
	}
	100% { 
		opacity: 0;
	}
}