/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/


/*----------------------------------------------------
 reset
----------------------------------------------------*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*----------------------------------------------------
 common
----------------------------------------------------*/



html {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	overflow-y: scroll; /* always force a scrollbar in non-IE */
	background: url(../img/bg_2.png) center 0 repeat-y;
}

body {
	background: url(../img/bg.png) center 0 repeat-y;
	margin: 0 auto;
	height: 3700px;
	line-height: 1.5;
	color: #000;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0;
	overflow:hidden;
}

a, a:link, a:active, a:visited {
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	color: #21a97e;
	outline: none;
	text-decoration: underline;
	color: #4AA6CD;
}

a:hover { color: #B02727; }

p { margin: 1em 0; }

hr {
	border: none;
	border-bottom: 1px dashed #313131;
	height: 1px;
	margin: 0 auto 0;
	clear: both;
}

#wrapper { position: relative; }

span {
	font-size: 14px;
	color: #B02727;
}

/*----------------------------------------------------
 navi
----------------------------------------------------*/


nav#primary {
	z-index: 5;
	position: fixed;
	top: 50%;
	right: 16px;
	margin-top: -40px;
}

nav#primary li {
	position: relative;
	height: 20px;
}

nav#primary a {
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: transparent url('../img/nav-dot.png') 4px 4px no-repeat;
}

nav#primary a:hover, nav#primary a.active { background: transparent url('../img/nav-dot.png') 4px -16px no-repeat; }

nav#primary h1 {
	position: absolute;
	right: 22px;
	top: -7px;
	display: none;
	padding: 4px 20px 4px 7px;
	;
	color: #fff;
	white-space: nowrap;
	background: transparent url('../img/nav-arrow.png') 100% 50% no-repeat;
}

nav.next-prev { margin: 40px 0 0 0; }

a.prev,  a.next {
	display: block;
	width: 26px;
	height: 26px;
	text-indent: -9999px;
	line-height: 0;
	margin: 0;
	padding: 0;
}

a.prev {
	margin: 0 auto 5px auto;
	background: transparent url('../img/scroll-arrow-up.png') 0 0 no-repeat;
}

a.prev:hover { background: transparent url('../img/scroll-arrow-up.png') 0 -26px no-repeat; }

a.next {
	margin: 5px auto 0 auto;
	background: transparent url('../img/scroll-arrow-down.png') 0 0 no-repeat;
}

a.next:hover { background: transparent url('../img/scroll-arrow-down.png') 0 -26px no-repeat; }

/*----------------------------------------------------
 content
----------------------------------------------------*/


#content {
	z-index: 4;
	position: relative;
	max-width: 900px;
	padding: 0 10px;
	margin: 0 auto;
	line-height: 1.7;
}

#content article { }

div {
	margin: 0 auto;
	text-align: center;
}


p{
	font-size: 18px;
	line-height: 1.8;
	margin: 20px auto;
	text-align: left;
	width: 700px;
}


#box_top, #box_service, #box_works, #box_company, #map {
	margin-top: 50px;
	position: absolute;
	left: 40px;
	width: 860px;
}

#box_top h2, #box_service h2, #box_works h2, #map h2, #box_company h2 { margin-bottom: 50px; }

#box_top { top: 0px; }

#box_top header { margin-bottom: 80px; }

#box_top header h1 {
	float: left;
	margin: 60px 0 0 0;
	width: 250px;
}

#box_top .counter {
	background: url(../img/img_01.gif) 0 0 no-repeat;
	height: 122px;
	position: relative;
	width: 566px;
	left: 150px;
}

#box_top .counter p {
	position: absolute;
	color: #4AA7CE;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}

#box_top .counter p:first-child {
	width: 140px;
	top: 50px;
	left: 50px;
}

#box_top .counter p.no {
	width: 160px;
	top: 50px;
	left: 325px;
}

#box_service { top: 650px; }

#box_service dl {
	width: 400px;
	padding: 15px 5px;
	background: #fff;
	display: inline-block;
	margin: 0 20px 20px 0;
	border-radius: 5px;
}

#box_service dl.last{
	margin-right:0;
}

#box_service dd {
	text-align: left;
	width: 360px;
	margin: 0 auto;
}

#box_works { top: 1300px; }

#box_works h3,
#box_company h3 {
	font-size: 20px;
	text-align: left;
	border-radius: 10px;
	text-align: center;
	padding: 5px;
	background: #4AA7CE;
	color: #fff;
	font-weight: bold;
}

#box_works div{
	margin: 20px auto;
	text-align: left;
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	overflow: hidden;
}

#box_works div img {
	float: left;
	margin-right: 30px;
}

#box_works div dt { font-weight: bold; }

#box_works div dt:before {
	content: url(../img/icon_01.gif);
	position: relative;
	top: 3px;
	margin-right: 10px;
}

#box_works dl dd:first-child {
	margin: 10px auto;
	display: block;
}


#box_works dd.works a {
	border-radius: 4px;
	background: #ccc;
	color: #313131;
	float: left;
	padding: 2px 10px;
	margin-top: 20px;
	text-decoration: none;
	font-size: 15px;
}

#box_works dd.works a:hover {
	background: #B02727;
	color: #fff;
}

#map { top: 2850px; }


/*----------------------------------------------------
 table
----------------------------------------------------*/

table{
	margin:0 auto;
	width:100%;
}

th, td{
	padding:10px;
	
}

td{
	padding-left:10px;
	background:#eee;
	border-left:10px solid #fff;
	border-bottom:10px solid #fff;
	text-align:left;
}

th{
	background:#21A97E;
	color:#fff;
	width:25%;
	text-align:center;
	vertical-align:middle;
	border-bottom:10px solid #fff;
}

input,textarea{
	border:1px solid #ccc;
	font-size:16px;
	padding:5px;
}

input{
	cursor:pointer;
}

input:focus{
	border:1px solid #4AA7CE;
	background:#FFC;
}

textarea{
	max-width:564px;
}
.toiawase{
	width:15px;
	height:15px;
}
	
.text{
	margin:0 auto 20px;
	width:100%;
}
.text:before{
	content:url(../img/icon_01.gif);
	position:relative;
	margin-right:10px;
}

form p{
	text-align:center;
	margin:20px auto;
}
form p input{
	border:1px solid eee;
	background:#4AA7CE;
	border-radius:4px;
	padding:10px 20px;
	color:#fff;
}
form p input:hover,
form p input:focus{
	background:#B02727;
	border:1px solid #eee;
}
form p input:first-child{
	margin-right:20px;
}

/*----------------------------------------------------
 parallax
----------------------------------------------------*/


/* cloud */

#parallax-bg1 {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
}

/* hito */

#parallax-bg2 {
	z-index: 10;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 940px;
	margin-left: -470px; /* move left by half element's width */
}

#bg1-1, #bg1-2, #bg1-3, #bg1-4,  #bg1-5, #bg1-6, #bg1-7, #bg1-8, #bg1-9,  #bg1-10, #bg1-11, #bg1-12, #bg1-13, #bg1-14,  #bg2-1, #bg2-2, #bg2-3, #bg2-4, #bg2-5,  #bg2-6, #bg2-7, #bg2-8, #bg2-9, #bg2-10 { position: absolute; }

/* cloud */

#bg1-1 {
	top: 85px;
	left: -150px;
}

#bg1-2 {
	left: 980px;
	top: 80px;
}

#bg1-3 {
	top: 900px;
	left: -150px;
}

#bg1-4 {
	top: 1020px;
	left: 980px;
}

#bg1-5 {
	left: -250px;
	top:300px;
}

#bg1-6 {
	left: 980px;
	top: 1600px;
}

#bg1-7 {
	top: 2600px;
	left: -150px;
}

#bg1-8 {
	top: 3000px;
	left: 980px;
}

#bg1-9 {
	top: 3300px;
	left: -150px;
}

#bg1-10 {
	top: 3600px;
	left: 980px;
}

#bg1-11 {
	top: 4100px;
	left: -150px;
}

#bg1-12 {
	top: 4500px;
	left: 980px;
}

#bg1-13 {
	top: 4800px;
	left: -150px;
}

#bg1-14 {
	top: 6000px;
	left: 980px;
}

/* hito */

#bg2-1 {
	top: 300px;
	left: 900px;
}

#bg2-2 {
	left:-250px;
	top: 500px;
}

#bg2-3 {
	top: 1000px;
	left: 900px;
}

#bg2-4 {
	top: 1800px;
	left: -250px;
}

#bg2-5 {
	top: 2300px;
	left: 900px;
}

#bg2-6 {
	left:-250px;
	top: 2500px;
}

#bg2-7 {
	top: 4500px;
	left: 900px;
}

#bg2-8 {
	top: 6000px;
	left: -250px;
}

#bg2-9 {
	top: 6500px;
	left: 900px;
}

#bg2-10 {
	top: 7000px;
	left: -250px;
}

/*----------------------------------------------------
 footer
----------------------------------------------------*/


footer {
	z-index: 100;
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #000;
	color: #FFF;
	opacity: 0.8;
}

footer ul {
	line-height: 0;
	text-align: center;
}

footer li {
	display: inline-block;
	border-left: 1px solid #fff;
	padding: 10px 15px;
	text-align: right;
}

footer li:last-child { border-right: 1px solid #fff; }

footer:hover {
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	cursor: pointer;
	opacity: 1;
}

/*----------------------------------------------------
 clearfix
----------------------------------------------------*/


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix { min-height: 1px; }

* html .clearfix { height: 1px;/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/*----------------------------------------------------
 pagetop
----------------------------------------------------*/



.pagetop {
	position: fixed;
	right: 20px;
	bottom: 150px;
	z-index: 100;
	width: 63px;
}

.pagetop a {
	display: block;
	width: 63px;
	height: 90px;
	float: right;
}

.pagetop a:hover img { opacity: 0; }

.pagetop a:hover { background: url(../img/pagetop_on.png) 0 0 no-repeat; }