@charset "UTF-8";
/* CSS Document */
body {
	font-family: serif;
}

.active{
	border-bottom:2px solid #039;
}
/**header**/


a{
	transition-property: all;
  	transition: 0.8s linear;
}
a:hover{
	color:#039;
}


header{
	width:100%;
	height:90px;
}

header h1{
	font-size:1.8em;
	color:#003;
	text-align:center;
	height:50px;
	line-height:50px;
	text-align:center;
	letter-spacing:3.0px;
}
nav{
	width:400px;
	height:30px;
	margin:0 auto;
	text-align:center;
}
nav li{
	float:left;
	font-size:1.1em;
	margin:0 17px;
}
/**topbar**/
header.scroll{
	position:fixed;
	width:100%;
	height:90px;
	background-color:rgba(255,255,255,1);
	top:0;
	z-index:9999;
	box-shadow:0 0 6px #111;
}

header.scroll h1{
	height:50px;
	line-hegiht:50px;
	font-size:1.8em;
}
header.scroll li a{
	font-size:1em;
}

#kirikae{
	width:100%;
	margin:0;
	padding:0;
}
/*slider***/

#slider{
	max-width:1300px;
	margin:0 auto;
	height:auto;
}

/**box**/
#box{
	width:980px;
	margin:30px auto;
}
.box{
	width:550px;
	height:300px;
	padding:40px;
	float:left;
}
.box_r{
	float:right;
	width:300px;
	heihgt:300px;
}
.box2{
	width:450px;
	height:300px;
	padding:40px;
	float:left;
}
.box_r2{
	float:right;
	width:300px;
	heihgt:300px;
}
.box_r img{
	margin-top:150px;
}
/*
.box span{
	border-bottom:4px double #039;
	color:#009900;
	display:inline-block;
	width:180px;
	line-height:30px;
	font-weight: bold;
}
*/
.box span{
	font-weight:bold;
	color: #FF0000;

}
.box h2{
	font-size:1.5em;
	line-height:50px;
	margin-bottom:15px;
}
.box p,.box1_r p{
	line-height:25px;
}
.cf{
	clear:both;
}
.box1{
	width:350px;
	height:100%;
	margin-top:50px;
	padding:20px;
	float:left;

}
.box1_r{
	float:right;
	width:500px;
	height:450px;
	margin-top:50px;
	padding-top: 20px;
	padding-right: 40px;
	padding-bottom: 20px;
	padding-left: 40px;
	margin-bottom: 30px;
}

/**googlemap**/
#tmap_canvas{
   width:100%;
   height:450px;
}

/***link**/

#link li a span{
	display:inline-block;
}
.button {
  border: 1px solid #ddd;
  width:250px;
  height:40px;
  position: relative;
  display:block;
  line-height:40px;
  text-align:center;
}
.button:hover{
	cursor:pointer;
}

#link{
	clear:both;
	width:960px;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#link ul li{
	width:250px;
	height:40px;
	float:left;
	margin:30px 35px;
}


/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #036;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
  bottom: -1px;
  height: 1px;
  right: -1px;
  width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
  bottom: -1px;
  height: 0px;
  left: -1px;
  width: 1px;
}
/* 右下へ配置 */
.change-border01__inner::before {
  height: 0px;
  right: -1px;
  top: -1px;
  width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}

/**title**/
#title{
	width:100%;
	height:200px;
	background-image:url(../img/title_bg.png);
	background-size:cover;
}
#title h2,#service h2,#contact h2{
	font-size:1.7em;
	padding-top:50px;
	border-bottom:1px solid #fff;
	width:250px;
	margin-left:50px;
	text-align:center;
	letter-spacing:3.0px;
	font-weight: bold;
	color: #FFCC00;
}
#title h3,#service h3,#contact h3{
	margin-left:50px;
	width:250px;
	text-align:center;
	letter-spacing:1.5px;
}


/***gaiyou**/

#gaiyou{
	width:960px;
	margin:0 auto;
}
#gaiyou table{
	width:600px;
	margin:30px auto;
}

#gaiyou table td{
	padding:30px;
	border-bottom:1px solid #ccc;
	
}
/**service****/
#service{
	width:100%;
	height:200px;
	background-image:url(../img/service_bg.png);
	background-size:cover;
}

/**box**/

#s_box{
	width:900px;
	margin:60px auto;
}
#s_wrapper article{
	float:left;
	width:265px;
	height:450px;
	margin:15px;
}

#s_wrapper article h4{
	background-color:#666;
	color:#fff;
	height:30px;
	text-align:center;
	line-height:30px;
	border-bottom:2px solid #222;
}

#sonota{
	clear:both;
	width:850px;
	height:400px;
	margin:0 auto;
}
#sonota h4{
	text-align:left;
	padding-left:20px;
	background-color:#666;
	color:#fff;
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	margin-bottom:20px;
}
#s_wrapper article p{
	width:250px;
	margin:0 auto;
	font-size:0.9em;
}
#sonota p{
	width:800px;
	margin:0 auto;
	text-align:left;
}
.title{
	font-size:1.2em;
	margin-top:20px;
	width:120px;
	border-bottom:2px solid #222;
	padding-left:20px;
	margin-left:5px;
	letter-spacing:2.0px;
}
#sonota ul{
	margin-top:10px;
}
#sonota li{
	float:left;
	height:30px;
	border:1px solid #222;
	line-height:30px;
	padding:8px;
	margin:5px;
}


/**contact***/
#contact{
	width:100%;
	height:200px;
	background-image:url(../img/contact.png);
	background-size:cover;
}
#toi{
	width:800px;
	margin:40px auto;
}
#con{
	margin-top:30px;
}
/***footer***/

footer{
	clear:both;
	width:100%;
	height:180px;
	background-color:#333;
	color:#f9f9f9;
	box-shadow:0 0 10px #111 inset;
}

#f_wrapper{
	width:980px;
	height:150px;
	margin:0 auto;
	padding-top:30px;
}
#f_left{
	width:350px;
	float:left;
	font-size:0.9em;
}
#f_right{
	float:right;
	width:600px;
}
#f_right li{
	float:left;
}
#f_right li a{
	color:#ccc;
	padding:27px;
	display:block;
}
#f_right li a:hover{
	text-decoration:underline;
}
.copyright{
	clear:both;
	padding:0 26px;
	font-size:0.7em;
	letter-spacing:2px;
	text-align: right;
}