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

/*========================================================================
+ STYLE RESET
==========================================================================*/
body{line-height:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,table,caption,tbody,tfoot,thead,th,td,option{margin:0;padding:0;line-height:1;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}table{border-collapse:collapse;border-spacing:0;}caption,th {text-align:left;}fieldset,img,abbr,acronym{border:0;margin: 0px;vertical-align: bottom;}object,embed,th,td{vertical-align: top;}address,caption,cite,code,dfn,th,var,optgroup,strong,em,b,i{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}a,ins,del{text-decoration: none;}q:before,q:after {content:'';}
/*========================================================================
+ STYLE SET
==========================================================================*/
* html body{font-size: 65%;}
*+html body{font-size: 65%;}
html{
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;
	overflow-x: scroll;}
strong{font-weight: bold;}
em{font-style: italic;}
del{text-decoration: line-through;}
a{cursor:pointer;}
/*
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
-------------------------------------------------------------------------

					COMMON

-------------------------------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*========================================================================
+ FLOAT
==========================================================================*/
/*--------------------------------------------------- CLEARFIX*/
.clf:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;}
* html .clf { zoom: 1; } /* IE6 */
*:first-child+html .clf { zoom: 1; } /* IE7 */
.clf {overflow:hidden;}

/*==================================================
	WEB FONT
====================================================*/
@import url(http://fonts.googleapis.com/css?family=Numans);
/*-----------------------------
WEB FONT*/


/*==================================================
----------------------------------------------------

					BASE

----------------------------------------------------
====================================================*/
html{
	height:100%;
	width:100%;
	overflow:auto;}
body {
	height:100%;
	width:100%;
	padding:0 0 50px 0;
	font-size:100%;
	color:#39362F;
	position:relative;
	background-color:#F1F2E7;
	font-family:'Numans', sans-serif;}


h2{
	font-size:40px;
	padding:0 0 50px;
	line-height:1.5;
	text-shadow:1px 1px 2px rgba(0,0,0,0.4);
	text-align:center;}
h3{
	font-size:25px;
	padding:30px 0;
	line-height:1.5;
	text-align:center;
	text-shadow:1px 1px 2px rgba(0,0,0,0.4);}
p,li,dt,dd,th,td{
	font-size:16px;
	padding:10px 0 0 0;
	line-height:1.7;
	text-shadow:1px 0 2px rgba(0,0,0,0.2);}
p.Accent {
	font-size:40px;
	color:#000;
	text-shadow:none;}
iframe{
	text-align:center;
	margin:20px auto 20px;}
a:link,a:visited{
	color:#FFF;}
a:hover,a:active{
	/*color:#226F6F;*/
	text-shadow:0 0 2px rgba(255,255,255,0.8);}
.Bg009 img{
	background:none;
	padding:0;}
/*==================================================
	LIST
====================================================*/
.ListFloat dt{
	clear:both;
	float:left;
	width:230px;
	word-wrap:break-word;}
.ListFloat dd{
	text-align:left;
	width:400px;
	word-wrap:break-word;
	margin:0 0 0 240px;}
.ListFloat dd:before{
	content:':';
	margin:0 0 0 -1em;}
.Left .ListFloat dt, .Right .ListFloat dt{
	width:140px;
	word-wrap:break-word;}
.Left .ListFloat dd, .Right .ListFloat dd{
	text-align:left;
	width:150px;
	white-space:nowrap;
	word-wrap:break-word;
	margin:0 0 0 150px;}
/*==================================================
	LAYOUT BOX
====================================================*/
.Box {
	width:100%;
	height:100%;
	min-height:640px;
	display: table;
	position:relative;
	overflow:hidden;
	background:url(images/common/bg_noise_white.png) center repeat;}
.BoxIn{
	width:100%;
	display: table-cell;
	text-align:center;
	position:relative;
	vertical-align: middle;}
.BoxCnt{
	max-width:1240px;
	min-width:600px;
	overflow:hidden;
	padding:50px 20px 100px;
	margin:0 auto;}
.TextBox{
	width:800px;
	margin:0 auto;}
/*==================================================
	BOX1
====================================================*/
.Bg001{
	width:100%;
	height:100%;
	min-height:640px;
	position:relative;
	overflow:hidden;
	background:url(images/top/stg1_kusa.png) center bottom repeat-x, url(images/top/stg1_bg.png) center bottom repeat-x;
	color:#F1F2E7;}
.BgBoxWrap{
	width:100%;
	height:100%;
	position:relative;}
.BgBox{
	width:100%;
	max-width:1500px;
	height:100%;
	position:absolute;
	bottom:0;
	left:0;}
.BgKusa{
	width:100%;
	max-width:1500px;
	height:100%;
	position:absolute;
	bottom:-100%;
	left:0;}
#BgStep00{
	width:100%;
	height:100%;
	position:absolute;
	left: 0;
	bottom:-100%;
	background:url(images/top/stg1_bg.png) center bottom repeat-x;}
#BgStep01{
	width:100%;
	height:100%;
	position:absolute;
	left: 0;
	bottom:-100%;
	background:url(images/top/stg1_kusa.png) center bottom repeat-x;}
#Bgkusa01{ background:url(images/top/stg1_05.png) center bottom no-repeat;}
#Bgkusa02{ background:url(images/top/stg1_03.png) center bottom no-repeat;}
#Bgkusa03{ background:url(images/top/stg1_01.png) center bottom no-repeat;}
#CarArea{
	left:100%;
	bottom:130px;
	width:400px;
	height:140px;
	background:url(images/top/stg1_car.png) left top no-repeat;}

#Tower{
	background:url(images/top/stg1_04.png);
	width:130px;
	height:410px;
	left:auto;
	right:20px;
	bottom:110px;}
#Tetch{
	background:url(images/top/stg1_02.png);
	width:120px;
	height:460px;
	left:30%;
	bottom:30px;}
.Bg001 .BoxIn{
	position:relative;}
.BoxCloud{
	position:absolute;
	top:30px;
	left:30%;
	width:600px;
	height:256px;
	background:url(images/bg/01_cloud01.png) center bottom no-repeat;
	background-size:100% 100%;}
#BoxCld02.BoxCloud{
	top:100px;
	left:100%;
	width:250px;
	height:113px;}
#BoxCld03.BoxCloud{
	top:50px;
	left:60%;
	width:100px;
	height:45px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);}
#Stg1_cnt{
	height:100%;
	width:100%;
	position:absolute;
	display:table-cell;
	vertical-align:middle;}
#logo{
	font-size:50px;
	text-align:center;
	padding:50px 0 25px;
	color:#333;
	text-shadow:1px 1px 2px rgba(0,0,0,0.4);}
#bytetch{
	font-size:30px;
	text-align:center;
	color:#333;
	padding:20px 0 0 0;}
/*==================================================
	BOX2
====================================================*/
.Bg002{
	background:url(images/bg/hata_left_b.png) left top no-repeat,url(images/bg/hata_right_b.png) right top no-repeat,url(images/bg/02_finger.png) center bottom repeat-x,
	url(images/bg/02_cracker.png) left bottom no-repeat,url(images/bg/02_cracker_close.png) right bottom no-repeat,
	url(images/common/bg_noise_white.png) center repeat,#3BAD99;
	color:#F1F2E7;}
.Bg002 .BoxCnt{
	padding:150px 20px 100px;}
.Cracker{
	position:absolute;
	left:100px;
	bottom:230px;
	width:10px;
	height:10px;
	background:url(images/bg/02_kami.png) left top no-repeat;}
.Cracker:nth-child(odd) {
	background-position:-10px 0;}
/*==================================================
	BOX3
====================================================*/
.Bg003{
	background:url(images/common/bg_noise_white.png) center repeat,#F1F2E7;}
.Bg003 h2{
	text-indent:-9999px;
	background:url(images/bg/03_title.png) center no-repeat;}
#NorenWrap{
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	top:0;
	padding:0 0 20px;
	background:url(images/bg/03_noren.png) center bottom repeat-x;}
#Noren{
	width:100%;
	height:1px;
	background:url(images/bg/03_noren_m.png) center repeat;}
.Bg003 .BoxCnt{
	padding:50px 20px 30px;}
#BoxCircle{
	width:600px;
	height:600px;
	margin: 0 auto;
	position:relative;
	border-radius:300px;
	box-shadow:0 2px 5px rgba(85,65,22,0.7) inset;
	background:url(images/bg/03_brain.png) center no-repeat,url(images/common/bg_noise_white.png) center repeat,#F1F2E7;}
#BoxCircle.On{
	animation: rotate 2s; 
	animation-iteration-count: 1; 
	-webkit-animation: rotate 2s; /* Safari & Chrome */
	-webkit-animation-iteration-count: 1;}
@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}
@-webkit-keyframes rotate { /*Safari & Chrome */ 
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } 
} 
#BoxCircle .Item{
	position:absolute;
	width:150px;
	height:150px;
	border-radius:75px;
	background:rgba(0,0,0,0.1);
	box-shadow:0 2px 5px rgba(85,65,22,0.7) inset;}
#BoxCircle .Item:hover{
	background:none;}
#BoxCircle .Item a{
	display:block;
	height:150px;
	width:150px;
	border-radius:75px;
	background:rgba(241,242,231,0.5);}
#BoxCircle .Item a:hover,#BoxCircle .Item a.Hover{
	background:#FFF url(images/common/bg_noise_white.png) center repeat;
	box-shadow:0 0 5px rgba(85,65,22,0.7);}
#BoxCircle .Item a img{
	border-radius:75px;}
#BoxCircle .Item.Cir01{
	left:0;
	top:225px;}
#BoxCircle .Item.Cir02{
	left:65px;
	top:65px;}
#BoxCircle .Item.Cir03{
	left:225px;
	top:0;}
#BoxCircle .Item.Cir04{
	left:385px;
	top:65px;}
#BoxCircle .Item.Cir05{
	left:450px;
	top:225px;}
#BoxCircle .Item.Cir06{
	left:385px;
	top:385px;}
#BoxCircle .Item.Cir07{
	left:225px;
	top:450px;}
#BoxCircle .Item.Cir08{
	left:65px;
	top:385px;}
.ContentsNavi{
	width:100%;
	height:200px;
	padding:0 0 20px;
	position:relative;
	overflow:hidden;}
.CntNavi{
	width:100%;
	height:200px;
	position:absolute;
	top:0;
	left:0;
	display:none;}
.CntNavi:first-child{
	display:block;}
.CntNaviIn{
	height:170px;
	padding:10px 20px;
	margin:5px 20px;
	border-radius:10px;
	background:rgba(255,255,255,0.4);
	box-shadow:0 0 5px rgba(85,65,22,0.4);}
/*==================================================
	BOX4
====================================================*/
.Bg004{
	background-color:#931F00;
	color:#F1F2E7;}


.Bg005{ background-color:#00B068;}
.Bg006{ background-color:#C24675;}
.Bg007{ background-color:#95B500;}
.Bg008{ background-color:#2F4F91;}
#LoadingWrap{
	width:100%;
	height:100%;
	min-height:640px;
	display: table;
	top:0;
	left:0;
	background:#0086A8 url(images/common/bg_noise_white.png) center repeat;
	position:fixed;
	z-index:999;}

.Box .Left, .Box .Right{
	width:45%;
	min-width:300px;}
.Box .Left{
	float:left;}
.Box .Right{
	float:right;}
.Center{
	text-align:center;}

/*==================================================
	MEDIA SCREEN
====================================================*/
@media screen and (min-width: 0px) and (max-width: 640px) {
	.MediaBox{
		margin:0 10px;}
	img{
		max-width:100%;}
	.TextBox{
		width:100%;}
	.Bg002{
	background:url(images/bg/hata_left_s.png) left top no-repeat,url(images/bg/hata_right_s.png) right top no-repeat,url(images/bg/02_finger.png) center bottom repeat-x;}
}
@media screen and (min-width: 640px) {
	.MediaBox{
		padding:0;
		width:60%;
		margin:0 auto;}
}
/*==================================================
	POST
====================================================*/
#PostName {
	padding:10px;
	text-align:center;
	border-top:1px solid #DEDEDE;
	border-left:1px solid #DEDEDE;
	border-right:1px solid #DEDEDE;
	border-radius:10px 10px 0 0;}
#PostName li{
	display:inline-block;
	padding:10px;}
#PostList{
	padding:10px;
	min-height:100px;
	border:1px solid #DEDEDE;
	border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;}
#PostList li{
	text-align:left;}
#PostList.on {
	background:url(images/common/loding.gif) center no-repeat;}
#PostList.on li{
	visibility:hidden;}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4) }
  20% { transform: scaleY(1.0) }
}

::selection {
    background:#226F6F;
		color:#FFF;}
::-moz-selection {
	background:#226F6F;
	color:#FFF;}
/*for IE6, IE7, IE8
-------------------------------------------------*/
html p{letter-spacing:2px\9;}
*html p{letter-spacing:2px;}
/*----------------------------------
for IE6, IE7, IE8*/