@charset "UTF-8";

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* webフォント */

@font-face {
  font-family: "AverageRegular";
  src: url("/font/average-regular-webfont.eot?") format('eot'),
       url("/font/average-regular-webfont.woff")  format('woff'),
	   url("/font/average-regular-webfont.ttf")  format('truetype'),
	   url("/font/average-regular-webfont.svg") format('svg');
}

/* 必要要素の初期設定 */

html {
  font-size: 62.5%;
}

body {
 width: 100%;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 color:#000;
 font-size: 12px;
 font-size: 1.2rem;
 line-height: 1.5;
 background-color: #000;
}

a {
 text-decoration:none;
}

h1, h2, h3, h4, h5, h6 {
 margin: 0 0 0 0;
 line-height: 1.3;
}

p {
 margin: 0 0 1.5em;
 line-height: 1.5;
 text-align: left;
}

ul {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 list-style:none;
}

/* ベースレイアウト */

#wrapper {
 padding: 0 0 0 0;
 background-color: #fff;
 width: 100%;
}


#topContent {
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 0 0;
  border-top: none;
  text-align: center;
  background:url(/images/common/back.jpg) repeat-x;
}

header {
 padding: 0 0 0 0;
 overflow: hidden;
}

nav {
 background-color: #fff;
}

#contents {
  width: 90%;
  margin: 0 auto;
  padding: 0 0 0 0;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
}

section {
 margin: 0 0 0 0;
}

footer {
 width: 100%;
 text-align: center;
 font-size: 11px;
 font-size: 1.1rem;
 border-top:1px solid #000;
 padding: 5px 0 0 0;
 margin: 0 0 0 0;
}

/* PAGETOP */

#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 77%;
}
#page-top a {
	background: #000000;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 3px;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
}


/*メインイメージ*/

#rslides {
 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0;
}

#rslides li {
 position: absolute;
 display: none;
 width: 100%;
 left: 0;
 top: 0;
}

#rslides li:first-child {
 position: relative;
 display: block;
}

#rslides img {
 display: block;
 height: auto;
 width: 100%;
 max-width:100%;
 border-top:2px solid #000;
 border-bottom:2px solid #333;
}

/* 画像のスタイル指定 */
 
.mainImg {
 width: 100%;
 max-width:100%;
 height: auto;
 border-top:2px solid #000;
 border-bottom:2px solid #333;
}

.portfolioImg {
 width: 100%;
 max-width:100%;
 height: auto;
 border:1px solid #eeeeee;
}

/* 各要素のデザイン、レイアウト */

#contents h2 {
 margin: 25px 0 10px 0;
 font-size: 10px;
 font-size: 1rem;
 width: 100%;
 height: 18px;
 line-height: 1;
 border-bottom:1px solid #000;
}

#contents h3 {
 font-size: 15px;
 font-size: 1.5rem;
 line-height: 1.2;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}

#menu2 {
 display: none;
 margin: 0 auto;
 text-align: center;
 border-bottom:1px solid #000;
}

#menu {
 width: 100%;
 margin: 0 auto;
}

nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

nav ul li {
 display: block;
 width: 100%;
 text-align: left;
 padding: 0;
 font-size: 20px;
 font-size: 2.0rem;
 line-height: 2.5;
 border-bottom: 1px solid #999;
 
 font-family: "AverageRegular";
 
 /*
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #999), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #ccc);
 background: -moz-linear-gradient(#fff, #ccc);
 background: -o-linear-gradient(#fff, #ccc);
 background: -ms-linear-gradient(#fff, #ccc);
 background: linear-gradient(#fff, #ccc);
 */
 
}

nav a {
 display: block;
 padding-left: 5%;
 
 background-image: url(/images/common/arrow.gif),url(/images/common/menu_back.jpg);
 background-repeat: no-repeat,repeat-x;
 background-position: 95% 50%,left bottom;
 background-color: #fff;
 
}

nav a:hover{ 
 background-image: url(/images/common/arrow_on.gif),url(/images/common/menu_back_on.jpg);
 
}

.news dt{
 float:left;
 display:block;
}

.news dd{
 margin: 0 0px 10px 80px;
 display:block;
}

/* Media Queries による切り替え */

@media only screen and (min-width: 481px) {
 
 #topContent2 {
   border-bottom: none;
 }
 
 #menu2 {
  display:block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-top:1px solid #000;
  border-bottom:none;
 }
 
 #menu {
  display: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-bottom:1px solid #000;
 }

 nav {
  padding: 0 0 0 0;
  width: 380px;
  margin: 0 auto;
 }
 nav ul {
  list-style: none;
  
 }
 nav ul li {
  float:left;
  width: 95px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  text-align: left;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2.5;
  border-bottom: none;
 }
 
  nav a {
  display: block;
  padding-left: 25px;
 
  background-image: url(/images/common/arrow.gif);
  background-repeat: no-repeat;
  background-position: 10px 50%;
  background-color: #fff;
 
 }

 nav a:hover{ 
  background-image: url(/images/common/arrow_on.gif);
 
 }

 #contents {
  width: 95%;
  margin: 0 auto;
  padding: 0 0 20px 0;
  border-top: none;
 }

 .contents1 {
  width: 49%;
  float: left;
 }
 
 .contents2 {
  width: 49%;
  float: right;
 }
 
 .contents3 {
  width: 98%;
  margin: 0 auto;
 }

}

@media only screen and (min-width: 961px) {
 
 #imgContent {
  width: 100%;
  height: 350px;
  margin: 0 auto;
  padding: 0 0 0 0;
  border-top:2px solid #000;
  border-bottom:2px solid #333;
  background-image:url(/images/top/main_back.jpg);
  text-align: center;
 }
 
 #imgContent2nd {
  width: 100%;
  height: 150px;
  margin: 0 auto;
  padding: 0 0 0 0;
  border-top:2px solid #000;
  border-bottom:2px solid #333;
  background-image:url(/images/top/main_back.jpg);
  text-align: center;
 }
 
 .mainImg {
  width: 960px;
  height: auto;
  border: none;
 }
 
 #rslides {
  width: 960px;
  padding: 0;
  margin: 0 auto;
  border: none;
 }
 
 #rslides img {
  width: 960px;
  height: 350px;
  border-top:0px;
  border-bottom:0px;
 }

 #contents {
  width: 950px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  border-top: none;
 }
 
 nav {
  padding: 0 0 0 0;
  width: 440px;
  margin: 0 auto;
 }
 nav ul {
  list-style: none;
  
 }
 nav ul li {
  float:left;
  width: 110px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  text-align: left;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2.5;
  border-bottom: none;
 }

}

.box-animation{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
	transition: .8s;
}
.box-animation-on{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}