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

/*======================================

1: body
2: header
3: common
4: footer
5: #pagetop
6: .clearfix

=======================================*/


/* ---------------------------------------------------------
1:body
----------------------------------------------------------*/
body {
	color: #000;
	font-family: "ヒラギノ明朝 W3 JIS2004", "Hiragino Mincho W3 JIS2004", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 14px;
	line-height: 1.5;
	width: 100%;
	background-color: #fff;
}

img { vertical-align: top;}

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

@media screen and (min-width:641px) {
	
.sp { display: none;}
	
/* ---------------------------------------------------------
2:header
----------------------------------------------------------*/
header {
	position: absolute;
	width: 100%;
	height: 50px;
	z-index: 3;
}
nav {
	text-align: right;
	padding: 15px 52px 0 0;
}
nav li {
	display: inline;
	margin-left: 51px;
	line-height: 1;
}
nav li:first-child,
nav span.cr,
nav span.link { display: none;}

nav li.cr span.cr { display: inline;}
nav li.cr span.link,nav li.cr span.white { display: none;}

header.fixed {
	position: fixed;
	background-color: #fff;
	border-bottom: 1px solid #dcdcdc;
}
header.fixed nav { padding-top: 20px;}
header.fixed nav li:first-child { display: inline;}
header.fixed .white { display: none;}
header.fixed .link { display: inline;}

/* ---------------------------------------------------------
3:#main
----------------------------------------------------------*/
#main { position: relative; height: 2000px; overflow: hidden;}
#main h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -167px 0 0 -441px;
	z-index: 2;
	opacity: 0;
}
#main .bg {
	position: absolute;
	top: 0;
	background: url(../img/bg_main.jpg) no-repeat center center;
	background-size: cover;
	opacity: 0;
}

/* ---------------------------------------------------------
4:#service
----------------------------------------------------------*/
#service {
	width: 1000px;
	margin: 0 auto;
}
#service h2 {
	margin-bottom: 25px;
}
#service .left-col {
	float: left;
	width: 360px;
}
#service .right-col {
	float: right;
	width: 595px;
}
#service .txt1 { font-size: 14px;}
#service .left-col .txt1 { margin-bottom: 15px;}
#service .right-col .txt1 { margin: -1px 0 0 0;}
#service h3 {
	font-size: 34px;
	font-weight: normal;
	line-height: 1.47;
}
#service .left-col h3 { margin-bottom: 16px;}
#service .right-col h3 {
	padding: 25px 0 7px;
}
#service .txt2 {
	font-size: 16px;
	line-height: 1.9;
}
#service .right-col .txt2 { margin: -7px 0 23px;}
#service .graph {
	position: relative;
	height: 236px;
	margin-bottom: 29px;
	margin-top: -1px;
}
#service .graph div { position: absolute; top: 53px;}
#service h4 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 1;
	color: #666;
	padding-top: 1px;
}
#service .graph .anime1 { left: 0; z-index: 2;}
#service .graph .anime2 { left: 158px; z-index: 2;}
#service .graph .anime3 { left: 316px; z-index: 2;}
#service .graph .anime4 { left: 484px; z-index: 2;}
#service .graph .anime5 { left: 401px; z-index: -1;}
#service .graph .arrow1 { top: 88px; left: 109px;}
#service .graph .arrow2 { top: 88px; left: 266px;}
#service .graph .arrow3 { top: 11px; left: 380px; margin: 100px 0 0 0;}
#service .graph .arrow3 img { margin: -100px 0 0 0;}
#service .graph .arrow4 { top: 158px; left: 376px; margin: -100px 0 0 0}
#service .graph .arrow4 img { margin: 100px 0 0 0;}

#service .icon a {
	display: block;
	width: 291px;
}
#service .icon span.pc {
	display: block;
	line-height: 1;
}
#service .icon span:first-child {
	margin-bottom: 8px;
}
/* ---------------------------------------------------------
5:#policy
----------------------------------------------------------*/
#policy {
	width: 746px;
	margin: 0 auto;
}
#policy .right-col {
	float: right;
	width: 240px;
}
#policy h2 { margin-bottom: 29px;}
#policy .txt1 { font-size: 14px; line-height: 1;}
#policy h3 {
	font-size: 34px;
	font-weight: normal;
	line-height: 1;
	padding: 28px 0 22px;
}
#policy .txt2 { font-size: 16px; line-height: 1.9; letter-spacing: -1px; margin-bottom: 17px;}
#policy .narrow { letter-spacing: -2px;}
#policy .pic { float:left; padding: 19px 0 0 0;}

/* ---------------------------------------------------------
6:#prof
----------------------------------------------------------*/
#prof {
	width: 1000px;
	margin: 0 auto 41px;
	padding-top: 98px;
}
#prof h2 { margin-bottom: 23px;}
#prof .left-col {
	float: left;
	width: 520px;
}
#prof .right-col {
	position: relative;
	float: right;
	width: 454px;
}
#prof table {
	font-size: 14px;
	line-height: 2.2;
}
#prof table .narrow { letter-spacing: -1px;}
#prof th {
	width: 108px;
	font-weight: normal;
	text-align: left;
}
#prof td { width: 412px;}
#prof .left-col h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 2.14;
	margin-top: 30px;
}
#prof .logo { clear: both; padding: 50px 0 0;}
#prof h3.about {
	font-size: 16px;
	font-weight: normal;
	line-height: 1;
	margin: 30px 0 20px;
}
#prof .txt1 { line-height: 2.14;}
#prof .right-col h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 2.14;
	margin: 0 0 22px 185px;
}
#prof .txt2,
#prof .txt3,
#prof .txt4 {
	font-size: 13px;
	margin-left: 185px;
	line-height: 1.77;
}
#prof .txt2 { margin-bottom: 68px;}
#prof .txt3 { margin-bottom: 280px;}
#prof .txt3 .narrow1 { letter-spacing: -1px;}
#prof .txt3 .narrow2 { letter-spacing: -2px;}
#prof .pic1,#prof .pic2,#prof .pic3 { position: absolute;}
#prof .pic1 { top: 8px; left: 0;}
#prof .pic2 { top: 306px; left: 215px;}
#prof .pic3 { top: 521px; left: 3px;}


/* ---------------------------------------------------------
7:#contact
----------------------------------------------------------*/
#contact {
	position: relative;
}
#contact .txt {
	position: absolute;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
	z-index: 2;
}
#contact h2 { margin-bottom: 22px;}
#contact .bg {
	position: absolute;
	top: 51px;
	background: url(../img/bg_contact.jpg) no-repeat center top;
	background-size: cover;
}


/* ---------------------------------------------------------
8:footer
----------------------------------------------------------*/
footer {
	width: 1000px;
	margin: 0 auto;
	padding: 22px 0 18px;
	text-align: right;
}
footer address { line-height: 1;}

}

@media screen and (max-width:640px) {
	
body { font-size: 12px;}

.pc { display: none;}

/* ---------------------------------------------------------
9:header sp
----------------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
	opacity: 0;
}
header .btn {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	z-index: 2;
	margin-left: 200px;
}
header .btn .close { display: none;}
nav {
	position: absolute;	
	width: 100%;
	height: 340px;
	background-color: #fff;
	top: 0;
	display: none;
}
nav ul { padding-top: 50px;}
nav li { text-align: center; line-height: 1;}
nav li a {
	display: block;
	padding: 20px 0;
}

/* ---------------------------------------------------------
10:#main sp
----------------------------------------------------------*/
#main { position: relative; height: 2000px; overflow: hidden;}
#main h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -140px 0 0 -145px;
	z-index: 2;
	opacity: 0;
}
#main .bg {
	position: absolute;
	top: 0;
	background: url(../img/sp/bg_main.jpg) no-repeat center center;
	background-size: cover;
	opacity: 0;
}

/* ---------------------------------------------------------
12:#service sp
----------------------------------------------------------*/
#service { padding: 0 15px; overflow: hidden;}
#service h2 { padding: 60px 0 20px;}
#service h2 img { width: 83px; height: auto;}
#service .txt1 { line-height: 1; margin-bottom: 14px;}
#service h3 { font-size: 22px; line-height: 1.36; margin-bottom: 11px; font-weight: normal;}
#service .txt2 { font-size: 13px; line-height: 1.54; margin-bottom: 36px;}
#service .right-col .txt1 { margin-bottom: 20px;}
#service .right-col h3 { margin-bottom: 6px;}
#service .right-col h3 img { width: 203px; height: auto;}
#service h4 {
	font-family: Arial, Roboto, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Droid Sans", "游ゴシック", YuGothic, sans-serif;
	font-weight: normal;
	font-size: 10px; color: #666; line-height: 1;
}
#service .graph { position: relative; height: 158px;}
#service .anime1 img,#service .anime2 img,
#service .anime3 img,#service .anime4 img,#service .anime5 img {
	width: 55px; height: auto;
}
#service .arrow1 img,#service .arrow2 img { width: 23px; height: auto;}
#service .arrow3 img,#service .arrow4 img { width: 78px; height: auto;}
#service .anime1,#service .anime2,#service .anime3,#service .anime4,#service .anime5,
#service .arrow1,#service .arrow2,#service .arrow3,#service .arrow4 {
	position: absolute; top: 46px;
}
#service .anime1 { left: 0; margin-left: -4px; z-index: 2;}
#service .anime2 { left: 75px; z-index: 2;}
#service .anime3 { left: 154px; z-index: 2;}
#service .anime4 { left: 238px; z-index: 2;}
#service .anime5 { left: 196px;}
#service .arrow1 { top: 64px; left: 50px;}
#service .arrow2 { top: 64px; left: 129px;}
#service .arrow3 { top: 25px; left: 186px; margin-top: 50px;}
#service .arrow3 img { margin-top: -50px;}
#service .arrow4 { top: 98px; left: 183px; margin-top: -50px;}
#service .arrow4 img { margin-top: 50px;}
#service .icon img { width: 208px; height: auto;}

/* ---------------------------------------------------------
13:#policy sp
----------------------------------------------------------*/
#policy { padding: 59px 15px 0;}
#policy h2 { margin-bottom: 12px;}
#policy h2 img { width: 69px; height: auto;}
#policy .txt1 { line-height: 1; margin-bottom: 20px;}
#policy h3 { font-size: 22px; line-height: 1; font-weight: normal; margin-bottom: 15px;}
#policy .txt2 { font-size: 13px; line-height: 1.54; margin-bottom: 9px;}
#policy .pic { padding: 31px 0 0; text-align: center;}
#policy .pic img { width: 160px; height: auto;}

/* ---------------------------------------------------------
14:#prof sp
----------------------------------------------------------*/
#prof {
	padding: 60px 15px 51px;
}
#prof h2 { margin-bottom: 15px;}
#prof h2 img { width: 76px; height: auto;}
#prof table { font-size: 12px; line-height: 1.7;}
#prof th { width: 75px; text-align: left; font-weight: normal;}
#prof td { width: 235px; letter-spacing: -1px;}
#prof h3 { font-size: 12px; font-weight: normal; padding-top: 31px;}
#prof .right-col { position: relative; margin-top: 35px;}
#prof .right-col h3 { padding: 0 0 15px 0; line-height: 1;}
#prof .pic1 img,#prof .pic2 img,#prof .pic3 img { width: 117px; height: auto;}
#prof .pic1,#prof .pic2,#prof .pic3 { text-align: center; padding: 23px 0;}
#prof .pic3 { padding-bottom: 10px}
#prof .txt2,#prof .txt3,#prof .txt4 { font-size: 12px; line-height: 1.7;}
#prof .logo { padding: 40px 0 19px;}
#prof h3.about { font-size: 13px; padding: 0; line-height: 1; margin-bottom: 15px;}
#prof .txt1 { line-height: 1.7;}

/* ---------------------------------------------------------
15:#contact sp
----------------------------------------------------------*/
#contact { position: relative;}
#contact .txt { position: relative; z-index: 2;}
#contact h2 { position: absolute; top: 50px; right: 85px; z-index:2;}
#contact h2 img { width: 90px; height: auto;}
#contact p { position: absolute; top: 79px; right: 16px; z-index: 2;}
#contact p img { width: 159px; height: auto;}
#contact .bg {
	position: absolute;
	top: 0;
	background: url(../img/sp/bg_contact.jpg) no-repeat center center;
	background-size: cover;
}

/* ---------------------------------------------------------
16:footer
----------------------------------------------------------*/
footer { text-align: center; line-height: 1; padding: 20px 0;}
footer img { width: 235px; height: auto;}

}

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

.clearfix { min-height: 1px; }