@charset "UTF-8";
/*CSSをリセットする*/
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;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}

/*全体の調整*/
body {
    *font-size:small;
    *font:x-small;
	-webkit-text-size-adjust: none;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	background-color: #000;
}
a{
	ouline: 0;
	color: #FC0;
}
/*セクションの設定*/
div.section {
	width: 100%;
	max-width: 1900px;
	height: 800px;
	position: relative;
	margin: 0 auto;
}
/*レイヤーの設定*/
div.layer {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/*背景画像の設定*/
/*0*/
#section0 {
	background: url(../images/section0_bg.jpg) no-repeat 0px 0px;
}
#section0 .layer1 {
	background-image: url(../images/sec0_layer1_bg.png);
	background-repeat: repeat-y;
	background-position: 650px 0px;
}
#section0 .layer2 {
	background-image: url(../images/sec0_layer2_bg.png);
	background-repeat: repeat-y;
	background-position: 750px 30px;
}

/*1*/
#section1 {
	background: url(../images/section1_bg.jpg) no-repeat 0px 0px;
}
#section1 .layer1 {
	background-image: url(../images/sec1_layer1_bg.png);
	background-repeat: no-repeat;
	background-position: 20px 120px;
}
#section1 .layer2 {
	background-image: url(../images/sec1_layer2_bg.png);
	background-repeat: no-repeat;
	background-position: 120px 120px;
}


/*2*/
#section2 {
	background: url(../images/section2_bg.jpg) no-repeat 0px 0px;
}
#section2 .layer1 {
	background: url(../images/sec2_layer1_bg.png) repeat-y 700px 30px;
}
#section2 .layer2 {
	background: url(../images/sec2_layer2_bg.png) repeat-y 650px 120px;
}

/*3*/
#section3 {
	background: url(../images/section3_bg.jpg) no-repeat 0px 0px;
}
#section3 .layer1 {
	background-image: url(../images/sec3_layer1_bg.png);
	background-repeat: no-repeat;
	background-position: 100px 250px;
}
#section3 .layer2 {
	background-image: url(../images/sec3_layer2_bg.png);
	background-repeat: no-repeat;
	background-position: 100px 250px;
}

/*4*/
#section4 {
	background: url(../images/section4_bg.jpg) no-repeat 0px 0px;
}
#section4 .layer1 {
	background-image: url(../images/sec4_layer1_bg.png);
	background-repeat: no-repeat;
	background-position: 450px 450px;
}
#section4 .layer2 {
	background-image: url(../images/sec4_layer2_bg.png);
	background-repeat: no-repeat;
	background-position: 250px 350px;
}
ul#topNav {
	position: absolute;
	width: 900px;
	margin: 0px;
	padding: 1px;
	left: 70px;
	bottom: 150px;
}
ul#topNav li {
	display: inline;
	margin-right: 40px;
}

/*各セクション内のレイアウト等*/
/*0*/
#section0 h1 {
	position: absolute;
	left: 30px;
	top: 50px;
}
#section0 p {
	position: absolute;
	top: 221px;
	font-size: 120%;
	width: 670px;
	left: 61px;
	height: 231px;
	line-height: 22px;
}
/* tooltip */
#section0 p span{
	display: none;
	padding: 10px;
	position: absolute;
	box-shadow: 2px 2px 2px #666;
	border: #ccc 1px solid;
	width: 600px;
	height: auto;
	top: 400px;
	left: 5%;
	font-size: 80%;
	color: #FFF;
	background-color: #333333;
}
#section0 p #bnr {
	margin-top: 5px;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 20px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}

#section0 #topNav a {
	opacity: 1;
}
#section0 #topNav a:hover {
	opacity: 0.3;
}
#section0 #sub_images {
	left: 750px;
	top: 220px;
	position: absolute;
	border: 4px solid #FFF;
	-webkit-box-shadow: 8px 8px 8px #000000;box-shadow: 8px 8px 8px #000000
}

#ccc  {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	position: absolute;
	bottom: 6%;
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	left: 5%;
	color: #999;
}
#section1 #youtube tr td {
	font-size: 90%;
	color: #FFF;
}

/*1*/
#section1 h2 {
	position: absolute;
	left: 440px;
	top: 80px;
}
#section1 #youtube {
	position: absolute;
	left: 100px;
	bottom: 10%;
}
#section1 #secNav {
	left: 460px;
	top: 150px;
	position: absolute;
	line-height: 50px;
}
#section1 #secNav li a {
	display: block;
	margin-bottom: 25px;
	background-repeat: no-repeat;
}
#section1 #youtube tr td {
	padding: 3px;
}


/*2*/
#section2 h2 {
	position: absolute;
	left: 8%;
	top: 150px;
}
#section2 p {
	position: absolute;
	left: 98px;
	top: 220px;
	color: #fff;
	font-size: 100%;
	width: 600px;
	line-height: 2;
}

#section2 table {
	position: absolute;
	width: 600px;
	border: 2px solid #000;
	border-radius: 5px;
	top: 400px;
	left: 10%;
	background-color: rgba(255,255,255,0.6);
	text-align: center;
	border-radius: 5px;
}
#section2 table tr td{
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	padding: 3px;
	font-size: 100%;
	line-height: 18px;
	border: 2px solid #000;
}

#section2 table tr th{
	border: 2px solid #000;
	background-color: rgba(255,255,255,0.2);
	text-align: center;
}


#section2 #mailbutton {
	width: 122px;
	text-align: center;
	position: absolute;
	left: 30%;
	top: 680px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -65px;
}
#section2 #mailbutton a {
	opacity: 1;
}
#section2 #mailbutton a:hover {
	opacity: 0.7;
}



/*3*/
#section3 h2 {
	position: absolute;
	left: 35%;
	top: 120px;
}
#section3 p {
	position: absolute;
	left: 400px;
	top: 200px;
	color: #fff;
	font-size: 100%;
	width: 600px;
	line-height: 2;
}
#section4 {
	background-color: #000;
	color: #FFF;
}
#section4 h2 {
	margin-right: auto;
	margin-left: auto;
	top: 150px;
	position: absolute;
	text-align: center;
	left: 8%;
}
#section4 p {
	font-size: 120%;
	line-height: 25px;
	top: 250px;
	color: #FFF;
	position: absolute;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	left: 10%;
}
#section4 #loginbutton {
	position: absolute;
	left: 15%;
	top: 630px;
}
#section4 #passbutton {
	position: absolute;
	left: 15%;
	top: 700px;
}

/*0*/




/*ナビゲーション*/
ul#nav {
	position: fixed;
	left: 20px;
	top: 20px;
	background: #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 3px;
	padding-left: 15px;
}
ul#nav li {
	display: inline;
	margin: 0 10px;
}
ul#nav li a {
	opacity: 0.6;
}
ul#nav li a:hover {
	opacity: 1;
}




/*フォーム用CSS*/
#contact {
	background: #fff;
	width: 500px;
	padding: 30px;
	position: relative;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-moz-box-shadow: 0 7px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 7px 0 rgba(0,0,0,0.1);
}
#contact p {
	color: #999;
	line-height: 20px;
	margin-bottom: 10px;
}
#contact span {
	color: #F00;
	line-height: 20px;
}

#contact h3 {
	padding: 0 0 10px 0;
	font-size: 167%;
	color: #35a8d7;
}
#contact .close {
	position: absolute;
	top: -20px;
	right: 15px;
}
#contact th, #contact td {
	width: 100%;
	padding: 10px 0;
	vertical-align: top;
	text-align: left;
	color: #666;
}
#contact th {
	width: 5%;
	white-space: nowrap;
	padding-right: 2em;
	color: #666;
}
#contact td input, #contact td textarea, #contact td select {
	padding: 3px;
	border: 1px solid #ccc;
	font-size: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#contact td textarea {
	height: 100px;
}
#contact td label {
	margin-right: 1em;
}
#contact .buttonArea {
	text-align: center;
	padding: 20px 0 10px;
}
#contact .buttonArea button {
	width: 180px;
	margin: 0 5px;
	padding: 10px 20px;
	border: none;
	opacity: 1;
	background: #35a8d7;
	color: #fff;
	font-size: 116%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#contact .buttonArea button:hover {
	opacity: 0.7;
}

#contact2 {
	background: #fff;
	width: 600px;
	padding: 30px;
	position: relative;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-moz-box-shadow: 0 7px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 7px 0 rgba(0,0,0,0.1);
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
}
#contact2 p {
	color: #999;
	line-height: 20px;
	margin-bottom: 10px;
}
#contact2 span {
	color: #F00;
	line-height: 20px;
}

#contact2 h3 {
	padding: 0 0 10px 0;
	font-size: 167%;
	color: #35a8d7;
}
#contact2 .close {
	position: absolute;
	top: -19px;
	right: 15px;
}
#contact2 th, #contact td {
	width: 100%;
	padding: 10px 0;
	vertical-align: top;
	text-align: left;
	color: #666;
}
#contact2 th {
	width: 5%;
	white-space: nowrap;
	padding-right: 2em;
	color: #666;
}
#contact2 td input, #contact td textarea, #contact td select {
	padding: 3px;
	border: 1px solid #ccc;
	font-size: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#contact2 td textarea {
	height: 100px;
}
#contact2 td label {
	margin-right: 1em;
}
#contact2 .buttonArea {
	text-align: center;
	padding: 20px 0 10px;
}
#contact2 .buttonArea button {
	width: 180px;
	margin: 0 5px;
	padding: 10px 20px;
	border: none;
	opacity: 1;
	background: #35a8d7;
	color: #fff;
	font-size: 116%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#contact2.buttonArea button:hover {
	opacity: 0.7;
}

#pagetop {
	position: fixed;
	bottom: 50px;
	right: 50px;
}
#contact2 #mailform2 table td {
	font-size: 12px;
}
#contact2 #mailform2 table tr td b {
	color: #F00;
}