@charset "utf-8";
/* -------------------------------------------------- 
	Copyright: (c)visual and echo japan
	Created: 2013-03-20
 -------------------------------------------------- */

/*----------------------------------------------------
 common
--------------------------------------------------- */
html, body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",  "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color:#333333;
	line-height:140%;
	background-color:#FFF;
	font-size:12px;
	
}

@font-face {
    font-family: 'mo_gblock_regularregular';
    src: url('mogblock-regular-webfont.eot');
    src: url('mogblock-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('mogblock-regular-webfont.woff') format('woff'),
         url('mogblock-regular-webfont.ttf') format('truetype'),
         url('mogblock-regular-webfont.svg#mo_gblock_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*----------------------------------------------------
 link
--------------------------------------------------- */
a:link,a:visited,a:active{
	color:#000;
	text-decoration:none;
}

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

/*----------------------------------------------------
	#wrapper ページ全体
--------------------------------------------------- */
#wrapper {
	width:1024px;
	margin:0px auto;
	padding-top:0px;
	min-height:600px;
}
#contents {
	width:100%;
}

#pageLoading{
	width:50px;
	height:50px;
	position:fixed;
	top:50%;
	margin-top:-45px;
	left:50%;
	margin-left:-25px;
	background: url(../img/loading.png) no-repeat center center;
	/* keyframes に任意の名前を付ける */
  -moz-animation-name: 'rotate1';
  -webkit-animation-name: 'rotate1';
  animation-name: 'rotate1';
  -goog-ms-animation-name: 'rotate1'; 
 
 /* 1動作(ここでは1回転)あたりの秒数 */
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -goog-ms-animation-duration: 4s;
 
/* 動作の向き、初期値はnormal 、逆再生は alternate */
  -moz-animation-direction: normal;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -goog-ms-animation-direction: normal;
  
/* 動き方 linear, ease, easein, ease-out, ease-in-out */
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -goog-ms-animation-timing-function: linear;
  
/* 動作 (ここでは回転) の回数を数値で指定、無限ループは infinite */
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -goog-ms-animation-iteration-count: infinite;
}
@-webkit-keyframes 'rotate1'{
  from {
  /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -goog-ms-transform: rotate(-360deg);
  }
}

/*----------------------------------------------------
	#header
----------------------------------------------------*/
#header {
	height:178px;
	width:100%;
	border-bottom:0px #000 solid;
	
}
#header .area{
	width:1024px;
	margin:0 auto;
	position:relative;
}
#header .icon{
	position:absolute;
	top:47px;
	left:0px;
}
#header .icon a img{
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#header .icon a:hover img{
	
  -moz-transform: rotateZ(-240deg);
  -webkit-transform: rotateZ(-240deg);
  -o-transform: rotateZ(-240deg);
  -ms-transform: rotateZ(-240deg);
}
#header h1{
	position:absolute;
	top:56px;
	left:104px;
}
#navi {
	position:absolute;
	top:115px;
	left:93px;
}
#navi li {
	float: left;
	position:relative;
}
#navi li .fukidashi{
	position:absolute;
	top:-80px;
	right:-40px;
	z-index:99;
}
#navi a{
	display:block;
	height:20px;
	text-indent:-9999px;
	
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#navi li.menu01{
	background:url(../img/common/menu01_on.gif) no-repeat;
	width:85px;
}
#navi li.menu01 a{
	background:url(../img/common/menu01.gif) no-repeat;
	width:85px;
}
#navi li.menu02{
	background:url(../img/common/menu02_on.gif) no-repeat;
	width:190px;
}
#navi li.menu02 a{
	background:url(../img/common/menu02.gif) no-repeat;
	width:190px;
}
#navi li.menu03{
	background:url(../img/common/menu03_on.gif) no-repeat;
	width:104px;
}
#navi li.menu03 a{
	background:url(../img/common/menu03.gif) no-repeat;
	width:104px;
}
#navi li.menu04{
	background:url(../img/common/menu04_on.gif) no-repeat;
	width:124px;
}
#navi li.menu04 a{
	background:url(../img/common/menu04.gif) no-repeat;
	width:124px;
}
#navi li.menu05{
	background:url(../img/common/menu05_on.gif) no-repeat;
	width:113px;
}
#navi li.menu05 a{
	background:url(../img/common/menu05.gif) no-repeat;
	width:113px;
}
#navi li.menu06{
	background:url(../img/common/menu06_on.gif) no-repeat;
	width:103px;
}
#navi li.menu06 a{
	background:url(../img/common/menu06.gif) no-repeat;
	width:103px;
}
#navi li.menu07{
	background:url(../img/common/menu07_on.gif) no-repeat;
	width:99px;
}
#navi li.menu07 a{
	background:url(../img/common/menu07.gif) no-repeat;
	width:99px;
}
#navi li.menu08{
	background:url(../img/common/menu08_on.gif) no-repeat;
	width:113px;
}
#navi li.menu08 a{
	background:url(../img/common/menu08.gif) no-repeat;
	width:113px;
}
#navi li.menu09{
	background:url(../img/common/menu09_on.gif) no-repeat;
	width:113px;
}
#navi li.menu09 a{
	background:url(../img/common/menu09.gif) no-repeat;
	width:113px;
}

#navi li > a:hover,
#navi li > a.active{
  filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
}
/*アーカイブメニュー*/
#header .archiveMenu{
	position:absolute;
	top:34px;
	left:0px;
	z-index:100;
	visibility:hidden;
	
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	opacity:0;
	
	-webkit-transform: translate3d(0px,20px,0px);
	-moz-transform: translate3d(0px,20px,0px);
	-o-transform: translate3d(0px,20px,0px);
	-ms-transform: translate3d(0px,20px,0px);
	transform: translate3d(0px,20px,0px);
}
#header .archiveMenu.view{
	visibility:visible;
	opacity:1;
	-webkit-transform: translate3d(0px,0px,0px);
	-moz-transform: translate3d(0px,0px,0px);
	-o-transform: translate3d(0px,0px,0px);
	-ms-transform: translate3d(0px,0px,0px);
	transform: translate3d(0px,0px,0px);
}
#header .archiveMenu dt a{
	display:block;
	width:120px;
	background:#FFFFFF;
	padding:5px 10px;
	font-family: 'mo_gblock_regularregular';
	margin-bottom:0px;
	color:#000;
	text-indent:0px;
	font-size:10px;
}
#header .archiveMenu dt a:hover{
  filter: alpha(opacity=1);
  -moz-opacity:1;
  opacity:1;
	color:#a28a3d;
}

/*サブメニュー*/
#subnavi {
	position:absolute;
	top:76px;
	left:834px;
}
#subnavi li {
	float: left;
}
#subnavi a{
	display:block;
	height:21px;
	text-indent:-9999px;
	
	
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#subnavi a:hover{
	filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
}
#subnavi li.menu01{
	background:url(../img/common/btn_english_on.gif) no-repeat;
	width:62px;
	margin-right:16px;
}
#subnavi li.menu01 a{
	background: url(../img/common/btn_english.gif) no-repeat;
	width:62px;
}
#subnavi li.menu02{
	background: url(../img/common/sns01_on.gif) no-repeat;
	width:21px;
	margin-right:7px;
}
#subnavi li.menu02 a{
	background: url(../img/common/sns01.gif) no-repeat;
	width:21px;
}
#subnavi li.menu03{
	background:url(../img/common/sns02_on.gif) no-repeat;
	width:21px;
	margin-right:7px;
}
#subnavi li.menu03 a{
	background:url(../img/common/sns02.gif) no-repeat;
	width:21px;
}
#subnavi li.menu04{
	background:url(../img/common/sns03_on.gif) no-repeat;
	width:21px;
	margin-right:7px;
}
#subnavi li.menu04 a{
	background:url(../img/common/sns03.gif) no-repeat;
	width:21px;
}
#subnavi li.menu05{
	background:url(../img/common/sns04_on.gif) no-repeat;
	width:21px;
}
#subnavi li.menu05 a{
	background:url(../img/common/sns04.gif) no-repeat;
	width:21px;
}
#header .english{
	display: none;
}

#menuNavi{
	display:none;
}
/*----------------------------------------------------
	#main
----------------------------------------------------*/
#main{
	overflow:hidden;
	float: left;
	width:730px;
}

/*----------------------------------------------------
	#side サイドバー 
----------------------------------------------------*/
#side {
	overflow:hidden;
	float: right;
	width: 260px;
	padding-top:53px;
}
.pageside{
	padding-top:63px;
}
#side .banner_area{
	margin-bottom:20px;
}
#side .banner{
	margin-bottom:10px;
}
#side .banner a{
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#side .banner a:hover{
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

#side .menu{
	overflow:hidden;
	margin-bottom:20px;
	
}
#side .menu h1{
	border-top:1px #000 solid;
	font-family: 'mo_gblock_regularregular';
	font-size:14px;
	font-weight:normal;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:1px #ccc solid;
}
#side .menu li{
	border-bottom:1px #ccc dotted;
	font-family: 'mo_gblock_regularregular';
	font-size:11px;
	line-height:130%;
	
}
#side .menu li a{
	display:block;
	padding:10px 10px;
	color:#a28a3d;
	
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	
}
#side .menu li a:hover{
	background:#a28a3d;
	color:#FFFFFF;
	
}

/*----------------------------------------------------
	#commonBottom
----------------------------------------------------*/
#commonBottom{
	overflow:hidden;
	width:100%;
	background:#eee;
	padding-top:40px;
	margin-top:40px;
	
}
#commonBottom .area{
	width:1024px;
	margin:0 auto;
}
#commonBottom .banner_area{
	margin:0 auto;
	margin-bottom:20px;
	overflow:hidden;
	width:1080px;
}
#commonBottom .banner{
	float:left;
	margin-right:14px;
}
#commonBottom .banner a{
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#commonBottom .banner a:hover{
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

/*----------------------------------------------------
	#pagenavi
----------------------------------------------------*/
#pagenavi{
	overflow:hidden;
	text-align:center;
	padding:10px 0;
}
#pagenavi li{
	display:inline-block;
	border:1px #ccc solid;
}
#pagenavi li a{
	display:block;
	padding:5px 10px;
}
#pagenavi li span{
	display:block;
	padding:5px 10px;
}
#pagenavi li a:hover{
	background:#ccc;
}


/*----------------------------------------------------
	#footer
----------------------------------------------------*/
#footer {
	overflow:hidden;
	clear: both;
	width: 100%;
	padding-bottom:40px;
	/*background:url(../img/common/footer_image.jpg) center top;*/
	text-align:center;
	background:#eee;
}
#footer .copyright{
	padding-top:28px;
	font-family: 'mo_gblock_regularregular';
}



/*------------------------------------------------------------------ */
/*  SMARTPHONE
/*------------------------------------------------------------------ */

@media (max-width: 767px){
	html, body{
		
 		 -webkit-text-size-adjust: none;
	}
	
		
	/*----------------------------------------------------
		#header
	----------------------------------------------------*/
	#header {
		height:80px;
		overflow:visible;
	}
	#header .area{
		width:100%;
	}
	#header .icon{
		position:absolute;
		top:26px;
		left:10px;
	}
	#header .icon img{
		width:30px;
		height:auto;
	}
	#header h1{
		position:absolute;
		top:30px;
		left:50px;
	}
	#header h1 img{
		height:20px;
		width:auto;
	}
	
	#navi ,#subnavi{
		display:none;
	}
	
	#menuNavi{
		display:block;
		display: block;
		width: 35px;
		height: 29px;
		position:absolute;
		top: 25px;
		right: 10px;
		z-index:10;
	}
	#menuNavi>i{
		width: 100%;
		height:5px;
		margin-top: 12px;
		margin-bottom: 7px;
		display: inline-block;
		background-color: #000;
		
		-webkit-transition: all 0.2s ease;
	    -moz-transition: all 0.2s ease;
	    -ms-transition: all 0.2s ease;
	    -o-transition: all 0.2s ease;
		transition: all 0.2s ease;
		-webkit-transition-delay:0.05s;
		-moz-transition-delay:0.05s;
		-ms-transition-delay:0.05s;
		-o-transition-delay:0.05s;
		transition-delay:0.05s;
	}
	
	#menuNavi.close>i{
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	/*1本目*/
	#menuNavi:before{
		content:"";
		height:5px;
		width: 100%;
		display: inline-block;
		background-color: #000;
		position: absolute;
		top: 0;
		left: 0;
		
		-webkit-transition: all 0.2s ease;
	    -moz-transition: all 0.2s ease;
	    -ms-transition: all 0.2s ease;
	    -o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	#menuNavi.close:before{
		-webkit-transform:translate3d(0px,12px,0px) rotate(-45deg);
		transform:translate3d(0px,12px,0px) rotate(-45deg);
	}
	/*3本目*/
	#menuNavi:after{
	  content:"";
	  height:5px;
	  width: 100%;
	  display: inline-block;
	  background-color: #000;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	}
	#menuNavi.close:after{
		opacity:0;
	}
	#navi {
		position:absolute;
		top:80px;
		left:0px;
		z-index:10;
		width:100%;
		border-top:1px #000 solid;
	}
	#navi li {
		float:none;
		position:relative;
		font-family: 'mo_gblock_regularregular';
	}
	#navi li{
		background:none !important;
		width:100% !important;
		border-bottom:1px #000 solid;
	}
	#navi li a{
		display:block;
		height:auto;
		text-indent:0px;
		background:none !important;
		background:#FFFFFF !important;
		padding:10px;
		width:auto !important;
	}
	#navi li a:hover{
	  filter: alpha(opacity=1);
	  -moz-opacity:1;
	  opacity:1;
	}
	
	#header .english{
	    position: absolute;
	    top: 32px;
	    right: 70px;
	    font-size: 14px;
	    display: block;
			font-family: 'mo_gblock_regularregular';
	}
	#wrapper {
		width:90%;
		margin:0px auto;
		padding-top:10px;
	}
	
			
	#navi li > a:hover,
	#navi li > a.active{
	  filter: alpha(opacity=1);
	  -moz-opacity:1;
	  opacity:1;
	}
	
		
	/*アーカイブメニュー*/
	#header .archiveMenu{
		position:static;
		top:34px;
		left:0px;
		z-index:100;
		visibility:visible;
		
		-webkit-transition: all 0.2s ease;
	    -moz-transition: all 0.2s ease;
	    -ms-transition: all 0.2s ease;
	    -o-transition: all 0.2s ease;
		transition: all 0.2s ease;
		opacity:1;
		
		-webkit-transform: translate3d(0px,0px,0px);
		-moz-transform: translate3d(0px,0px,0px);
		-o-transform: translate3d(0px,0px,0px);
		-ms-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
	}
	#header .archiveMenu.view{
		visibility:visible;
		opacity:1;
		-webkit-transform: translate3d(0px,0px,0px);
		-moz-transform: translate3d(0px,0px,0px);
		-o-transform: translate3d(0px,0px,0px);
		-ms-transform: translate3d(0px,0px,0px);
		transform: translate3d(0px,0px,0px);
	}
	#header .archiveMenu dt a{
		display:block;
		width:auto;
		background:#FFFFFF;
		padding:5px 10px;
		font-family: 'mo_gblock_regularregular';
		margin-bottom:0px;
		color:#000;
		text-indent:0px;
		font-size:10px;
		border-top:1px dotted #ccc;
	}
	#header .archiveMenu dt a:hover{
	  filter: alpha(opacity=1);
	  -moz-opacity:1;
	  opacity:1;
		color:#a28a3d;
	}
	/*----------------------------------------------------
		#commonBottom
	----------------------------------------------------*/
	#commonBottom{
		overflow:hidden;
		width:100%;
		
	}
	#commonBottom .area{
		width:95%;
		margin:0 auto;
	}
	#commonBottom .banner_area{
		margin-bottom:20px;
		overflow:hidden;
		width:100%;
	}
	#commonBottom .banner{
		float:left;
		margin-right:14px;
	}
	#commonBottom .banner img{
		width:100%;
		height:auto;
	}
	#commonBottom .banner.center{
		width:100%;
		margin-right:0px;
		margin-bottom:10px;
	}
	#commonBottom .banner01{
		width:42%;
		margin-right:2%;
	}
	#commonBottom .banner02{
		width:56%;
		margin-right:0px;
	}
	#commonBottom .banner a{
		-webkit-transition: all 0.2s ease;
	    -moz-transition: all 0.2s ease;
	    -ms-transition: all 0.2s ease;
	    -o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	#commonBottom .banner a:hover{
	  filter: alpha(opacity=50);
	  -moz-opacity:0.5;
	  opacity:0.5;
	}
	#commonBottom iframe{
		display:none;
	}
	
	/*----------------------------------------------------
		#footer
	----------------------------------------------------*/
	#footer {
		overflow:hidden;
		clear: both;
		width: 100%;
		height:auto;
		/*background:url(../img/common/footer_image.jpg) center top;*/
		text-align:center;
	}
	#footer .copyright{
		padding-top:10px;
		padding-bottom:10px;
		font-size:8px;
		font-family: 'mo_gblock_regularregular';
	}
	
	/*----------------------------------------------------
	#main
	----------------------------------------------------*/
	#main{
		overflow:hidden;
		float:none;
		width:100%;
	}
	
	/*----------------------------------------------------
		#side サイドバー 
	----------------------------------------------------*/
	#side {
		overflow:hidden;
		float:none;
		width:100%;
		padding-top:10px;
	}
	#side .banner_area{
		margin-bottom:20px;
		overflow:hidden;
	}
	#side .banner{
		margin-bottom:10px;
	}
	#side .center{
		width:100%;
		height:auto;
	}
	#side .banner img{
		width:100%;
		height:auto;
	}
	#side .banner01{
		width:42%;
		margin-right:2%;
		float:left;
	}
	#side .banner02{
		width:56%;
		float:left;
	}
	#side iframe{
		display:none;
	}
	
}