@charset "utf-8";



body{
	-webkit-text-size-adjust: 100%;
	width:100%;
	height: auto;
	margin:0 auto;
}


#wrapper {
	width:100%;
	font-size:100%;
	line-height:200%;
}

#wrapper section{
	width:950px;
}

.Inner{
	width:1000px;
	margin:0 auto;
}


#header {
	width:100%;
	}

#header #top {
	background-color:#F4F4F4;
	width:100%;
	height:50px;
	}
	
#header .Inner h1 {
	color:#666;
	padding:13px 0;
	font-size:90%;
}

#header #subbar {
	background-color:#B2D8D4;
	width:100%;
	height:65px;
	}

#header #subbar .Inner{
	position:relative;
	height:65px;
	}

#header #subbar .Inner h2 img{
	width:223px;
	height:32px;
	padding:18px 0;}


#header #subbar .Inner img.souda{
	width:105px;
	height:85px;
	position:absolute;
	top:-30px;
	right:0;
}

#main {
	background-color:#B2D8D4;
	width:100%;

}

#main .Inner{
	background-image:url('../images/main-bg.jpg');
	background-repeat:no-repeat;
	height:500px;
	position:relative;
}

#main .Inner #slideBox{
	position:absolute;
	top:70px;
	left:454px;
	width:481px;
}


#nav_ph {
	display:none;
}

#nav {
	background-color:#FFF;
	width:100%;
	height:100px;
	float:left;
	border:1px solid #DDD;
	margin-bottom:30px;
}
#nav ul {
	width:1020px;
	height:100px;
	margin:0 auto;
}
#nav ul li {
	float: left;
	border-right:1px solid #DDD;
	text-indent:-6789px;
}

#nav ul li a{
	width:168px;
	height:100px;
	display:block;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:center;
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -o-transition: .2s linear;
    -ms-transition: .2s linear;
}

#nav ul li.nav01 a{background-image:url('../images/navi-home2.png');}
#nav ul li.nav02 a{background-image:url('../images/navi-about2.png')}
#nav ul li.nav03 a{background-image:url('../images/navi-works2.png')}
#nav ul li.nav04 a{background-image:url('../images/navi-menu2.png')}
#nav ul li.nav06 a{background-image:url('../images/navi-office2.png')}
#nav ul li.nav05 a{background-image:url('../images/navi-contact2.png')}

#nav ul li.nav01{
	border-left:1px solid #DDD;
	}
	
#nav ul li a:hover{
background-color:#DEDEDE;
}

#contents {
	width:100%;
	clear:both;
	margin-top:50px;

}

#pankuzu {
position:absolute;
top:20px;
left:50px;
}

#pankuzu ul{
	margin:25px 0 15px 0;
}

#pankuzu ul li{
	background-repeat:no-repeat;
	float:left;
}


#pankuzu ul li.home{
	background-image:url('../images/pan1.png');
	width:123px;
	height:101px;
	margin-right:13px;
	}

#pankuzu ul li.sub{
	background-image:url('../images/pan2.png');
	width:101px;
	height:101px;
	}

#pankuzu ul li a{
	width:101px;
	height:61px;
	display:block;
	color:#FFF;
	padding:40px 0 0 0px;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.1em;
	line-height:135%;
}




#contentMain{
	width:1000px;
	margin-bottom:100px;

	}

#title{
	text-align:center;
	margin-bottom:40px;
	margin-top:120px;
}

#title em{
	font-size:120%;
	color:#CCC;
}


#title h3{
	font-size:200%;
	color:#282f35;
	margin:10px 0 25px 0;
}


#contents h4{
	font-size:120%;
	border:1px solid #B2D8D4;
	padding:10px 10px 8px 20px;
	margin:50px 0 10px 0;
}


.BTcontact{
    perspective: 0px;
    -webkit-perspective: 0x;
   	margin:100px auto 60px auto;
    position: relative;
    display: block;
    width:400px;
	height:50px;
}


.BTcontact span {
   	width:380px;
	height:40px;
	font-size:180%;
	text-decoration:none;
   	padding-top:20px;
	color:#FFF;
	text-align:center;
	background-color:#B2D8D4;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-align: center;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: 0.8s;
    position:absolute;
    top: 0;
    margin-top:-30px;

}


.BTcontact .back {
	background-color:#F39E95;
	transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
.BTcontact:hover .front {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
.BTcontact:hover .back {
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}


#topNow{
background:#EDEDED;
padding:50px;
text-align:center;
}


#topNow .title{
font-size:16px;
margin-bottom:20px;
}


#topNow p{
font-size:22px;
text-align:center;
color:#EB5E4F;
}



#footer {
	position:relative;
	background-color:#282f35;
	width:100%;
}

#footer .Inner #sitename{
	padding:150px 0;
	text-align:center;	
	}

#footer .Inner #sitename h3{
	margin-bottom:10px;
}

#footer #f-menu{
	background-color:#E1E3E4;
	width:100%;
	padding:30px 0;
	font-size:13px;
	}

#footer #f-menu .Inner ul li a{
	background:url('../images/icon.png') no-repeat 0 11px; 
	float:left;
	padding-left:15px;
	margin:0 18px 0 0;
	text-decoration:none;
	color:#3F3F3F;
	}

#footer #f-menu .Inner ul li a:hover{
	text-decoration:underline;
}

#footer .gotop{
	position:absolute;
	right:50px;
	top:-100px;
	width:83px;
	height:83px;
	text-indent:-9876px

}
 
#footer .gotop a{
	background:url('../images/gotop.png');
	width:83px;
	height:83px;
	display:block;
}

#footer .gotop a:hover{
	background:url('../images/gotop-on.png');
	
}




.footerbnr{
	float:right;
	margin-top:-45px;
}



.about{	

	padding-bottom:0;
}

.about .box{
	border-bottom:1px dotted #8CB0BE;
	margin-bottom:20px;
	padding-bottom:20px;
}

.about .box h3{
	color:#8CB0BE;
	font-size:16px;	
	line-height:250%;
	padding-top:50px;
	text-align:left;
}

.about .box h3 b{
	font-size:40px;	
	font-weight:400;
}


.about img.illust{
	width:200px;
	float:left;
	margin:0 20px 15px 0;
	
}

.about p{
	text-align:left;

}

.about .good{
	padding:12px 6px;
	background:#EBF5F4;
	margin-bottom:30px;
	text-align:center;
}

#contentMain .about .good h4{
	border:0;
	font-size:18px;
	text-align:center;
	margin:0 0 6px 0;

}

.about .good ul li{
	display:inline-block;
	color:#8CB0BE;
	margin:2px 4px;
}

ul.folio{
	text-align:left;
}

ul.folio li{
	margin-bottom:80px;
}

ul.folio li img{
	padding:5px;
	border:1px solid #DDD;
	height:195px;
	margin-bottom:15px;
}

ul.folio li.sin img{
	height:230px;
	margin-right:20px;
	border:1px solid #DDD;
	padding:0;
}

ul.folio a{
	text-decoration:none;
}

ul.folio li p{
	margin-bottom:10px;
}

ul.folio li span{
	font-size:14px;
	display:inline-block;
	line-height:170%;
}


ul.folioother{
	text-align:left;
}
ul.folioother li {
	float:left;
	margin:20px;
}

ul.folioother li p{
	background-color:#F2F2F2;
	font-size:85%;
	text-align:center;
	color:#666;
}

.kiyaku{
	text-align:left;
	width:1000px;
}





}


@media screen and (max-width: 768px) {
/* タブレット表示 */
#wrapper {
	width:100%;
	font-size:90%;
	line-height:200%;
}

.Inner{
	width:620px;
	margin:0 auto;
}

#header {
	width:100%;
	}


#header #top {
	background-color:#F4F4F4;
	width:100%;
	}

#header .Inner h1 {
	color:#666;
	padding:10px 0 0 0;
	font-size:90%;
}

#header #subbar {
	background-color:#B2D8D4;
	width:100%;
	height:65px;
	}

#header #subbar .Inner{
	position:relative;
	height:65px;
	}

#header #subbar .Inner h2 img{
	width:223px;
	height:32px;
	padding:18px 0;}


#header #subbar .Inner img.souda{
	width:105px;
	height:85px;
	position:absolute;
	top:10px;
	right:0;
}

#main {
	background-color:#B2D8D4;
	width:100%;
	}

#main .Inner{
	background-image:url('../images/main-bg.jpg');
	background-size:100%;
	background-repeat:no-repeat;
	height:323px;
	position:relative;
}

#main .Inner #slideBox{
	position:absolute;
	top:45px;
	left:293px;
	width:311px;
}

#main .Inner #slideBox img{
	left:293px;
	width:311px;
}

#nav_ph {
	display:none;
}

#nav {
	background-color:#FFF;
	width:100%;
	height:64px;
	float:left;
}
#nav ul {
	width:620px;
	height:64px;
	margin:0 auto;
}

#nav ul li {
	width:122px;
	height:64px;
	float: left;
	border-right:1px solid #DDD;
	text-indent:-6789px;
}

#nav ul li a{
	width:122px;
	height:64px;
	float: left;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:center;
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -o-transition: .2s linear;
    -ms-transition: .2s linear;
	}


#nav ul li.nav01 a{background-image:url('../images/navi-home2.png')}
#nav ul li.nav02 a{background-image:url('../images/navi-about2.png')}
#nav ul li.nav03 a{background-image:url('../images/navi-works2.png')}
#nav ul li.nav04 a{background-image:url('../images/navi-menu2.png')}
#nav ul li.nav05 a{background-image:url('../images/navi-office2.png')}
#nav ul li.nav05 a{background-image:url('../images/navi-contact2.png')}

#nav ul li.nav01{
	border-left:1px solid #DDD;
	}


#nav ul li a:hover{
background-color:#DEDEDE;
}


#contents {
	width:100%;
	clear:both;
}

#contents .Inner #pankuzu ul{
	margin:15px 0 15px 0;
}

#contents .Inner #pankuzu ul li{
	background-repeat:no-repeat;
	float:left;
}


#contents .Inner #pankuzu ul li.home{
	background-image:url('../images/pan1.png');
	width:100px;
	height:80px;
	background-size:100px 80px; 
	margin-right:13px;
	}

#contents .Inner #pankuzu ul li.sub{
	background-image:url('../images/pan2.png');
	background-size:80px 80px; 
	width:80px;
	height:80px;
	}

#contents .Inner #pankuzu ul li a{
	width:80px;
	height:48px;
	display:block;
	color:#FFF;
	padding:32px 0 0 0px;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.1em;
	line-height:135%;
}


#contentSide{
	float:right;
	width:177px;
	}

#navS {
	background-color:#FFF;
	width:177px;
	margin-bottom:100px;

}

#navS ul {
	width:177px;
}

#navS ul li {
	width:175px;
	height:60px;
	border-bottom:1px solid #DDD;
	border-left:1px solid #DDD;
	border-right:1px solid #DDD;
	text-indent:-6789px;
}

#navS ul li a{
	width:175px;
	height:60px;
	background-color:#FAFAFA;
	background-repeat:no-repeat;
	background-position:12px 50%;
	display:block;
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -o-transition: .2s linear;
    -ms-transition: .2s linear;
}


#navS ul li.nav01 a{background-image:url('../images/navis-home.png');}
#navS ul li.nav02 a{background-image:url('../images/navis-about.png')}
#navS ul li.nav03 a{background-image:url('../images/navis-works.png')}
#navS ul li.nav04 a{background-image:url('../images/navis-menu.png')}
#navS ul li.nav05 a{background-image:url('../images/navis-contact.png')}

#navS ul li.nav01{
	border-top:1px solid #DDD;
	}

#navS ul li.nav01on a{background-image:url('../images/navis-home2.png'); background-color:#8DC6BF;}
#navS ul li.nav02on a{background-image:url('../images/navis-about2.png'); background-color:#8DC6BF;}
#navS ul li.nav03on a{background-image:url('../images/navis-works2.png'); background-color:#8DC6BF;}
#navS ul li.nav04on a{background-image:url('../images/navis-menu2.png'); background-color:#8DC6BF;}
#navS ul li.nav05on a{background-image:url('../images/navis-contact2.png'); background-color:#8DC6BF;}

	
#navS ul li a:hover{
	background-color:#8DC6BF;
	background-repeat:no-repeat;
	}

#navS ul li.nav01 a:hover{background-image:url('../images/navis-home2.png');}
#navS ul li.nav02 a:hover{background-image:url('../images/navis-about2.png')}
#navS ul li.nav03 a:hover{background-image:url('../images/navis-works2.png')}
#navS ul li.nav04 a:hover{background-image:url('../images/navis-menu2.png')}
#navS ul li.nav05 a:hover{background-image:url('../images/navis-contact2.png')}



#contentMain{
	float:left;
	width:420px;
	margin-bottom:70px;
	text-align:left;
	}

#contents .title{
	text-align:center;
	margin-bottom:30px;
}

#contents .title em{
	font-size:120%;
	color:#CCC;
}

#contents .title h3{
	font-size:200%;
	color:#282f35;
	margin:5px 0 20px 0;
}

#contentMain h4{
	font-size:120%;
	border:1px solid #B2D8D4;
	padding:10px 10px 8px 20px;
	margin:20px 0 10px 0;
}

#contents #topWelcome{
	background:#EDEDED;
	padding:60px 0;
	}

#contents #topWelcome .Inner{
	width:620px;
	margin:0 auto;
	text-align:center
	}

#contents #topWelcome h2{
	padding-top:8px;
	font-size:140%;
	letter-spacing:0.1em;
	color:#33A98C;
	margin-bottom:30px;

}

#contents #topWelcome p{
	color:#555;
	font-size:100%;
	text-align:center;
}

#contents #topWelcome p em{
	color:#2EB293;
}

#topAbout .sankaku{
	width: 0;
	height: 0;
	margin:0 auto;
	border: 20px solid transparent;
	border-top: 20px solid #EDEDED;
}

#topAbout .title{
	font-size:170%;
	line-height:140%;
	margin:20px 0;
	color:#EB5E4F;
}

#topAbout ul.point{
margin-bottom:0px;
}

#topAbout ul.point li{
	float:left;
	width:188px;
	margin:10px;
	text-align:center;
	font-size:86%;
	line-height:140%;
	color:#555;
}

#topAbout ul.point li img{
	margin-bottom:15px;
}

#topAbout ul.point li h3{
	font-size:130%;
	margin-bottom:15px;
	color:#33A98C;
	font-weight:bold;
}


.BTcontact a{
	width:380px;
	height:40px;
	margin:50px auto;
	padding-top:20px;
	font-size:180%;
	display:block;
	text-decoration:none;
	color:#FFF;
	text-align:center;
	background-color:#B2D8D4;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.BTcontact span.back{
display:none;
	
}



.BTcontact a:hover{
	background-color:#F39E95;
}

#topNow{
background:#EDEDED;
padding:40px 0;
text-align:center;
}


#topNow .title{
font-size:15px;
margin-bottom:10px;
}


#topNow p{
font-size:20px;
text-align:center;
color:#EB5E4F;
}


#footer {
	background-color:#282f35;
	width:100%;
	position:relative;
}

#footer .Inner #sitename{
	padding:100px 0;
	text-align:center;
	}

#footer .Inner #sitename h3{
	margin-bottom:10px;
}

#footer .Inner #sitename h3 img{
	width:135px;

}


#f-menu{
	background-color:#E1E3E4;
	width:100%;
	padding:15px 0;
	}

#f-menu .Inner ul li a{
	background:url('../images/icon.png') no-repeat 0 5px; 
	float:left;
	padding-left:15px;
	margin:0 30px 0 0;
	text-decoration:none;
	color:#3F3F3F;
	}

#f-menu .Inner ul li a:hover{
	text-decoration:underline;
}

.footerbnr{
margin-top:10px;
}


#footer .gotop{
	position:absolute;
	right:30px;
	top:-70px;
	text-indent:-9876px

}
 
#footer .gotop a{
	background:url('../images/gotop.png');
	background-size:60px;
	width:60px;
	height:60px;
	display:block;
}

#footer .gotop a:hover{
	background:url('../images/gotop-on.png');
	background-size:60px;
	
}
}