@charset "utf-8";


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/*----------------------------------------全体設定----------------------------------------*/

body {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	line-height: 2;	
	background: #fff;
	overflow-x: hidden;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", "sans-serif","Great Vibes";
}

a p {
	color: #70696a;	/*リンクテキストカラー*/
}

.pbox {
	margin: 0 auto;
	width: 90%;
}

ul {list-style-type: none;}

.clear {clear:both;　/*floatの解除ポイント*/}

@media screen and (min-width:600px){
body {
	font-size: 15px;	
}
}



/*----------------------------------------ヘッダー----------------------------------------*/

header #nav {
	list-style: none;
	position: fixed;
	width: 100%;
	z-index: 100;
	opacity: 0.8;
}
 
header #nav li {
  width: 20%;
  text-align: center;
  background-color: #369;
  float: left;
  height: 40px;
  line-height: 40px;
}
 
header #nav li a {
  text-decoration: none;
  color: #fff;
}



/*----------------------------------------メイン画像----------------------------------------*/

.mainpic {
    position: relative;
	width: 100%;
}

/*メイン画像上ロゴ*/
.logo {
	position: absolute;
	z-index: 99;
	width: 60%;
	margin: 85px 20%;
}

/*メイン画像上タイトル*/
.title {
	text-align: center;
	font-weight: bold;
	font-size: 150%;
	color: #369;
}

@media screen and (min-width:600px){
.logo {margin: 250px 20%;}
.title {font-size: 200%;}
}





/*----------------------------------------コンテンツ----------------------------------------*/

#contents {
	clear: both;
	overflow: hidden;
}

#contents .inner {
	width: 100%;
	margin: 0 auto;
}

@media screen and (max-width:600px){
#contents .inner {
	width: auto;
	height: auto;
	margin: 0 auto;
}
}



/*----------------------------------------見出し----------------------------------------*/


h1 {
     text-align: center;
	 font-size: 25px;
	 font-weight: bold;
	 margin: 75px auto 20px auto;
	 color: #369;
}
 
h1 span{
     position: relative;
     display: inline-block;
     padding: 0 0.5em;
}
      
h1 span::before, h1 span::after{
     position: absolute;
     top: 50%;
     content: '';
     width: 1.5em;
     height: 1px;
     background-color: #369;
}
 
h1 span::before {left: 100%;}
h1 span::after { right: 100%;}



h2{
	text-align: center;
	font-size: 15px;
	clear: both;
}


/*--------------------------------------サービス--------------------------------------*/

.service_img {
	float: left;
	width: 46%;
	margin: 2%;
}

.service_img img{width: 100%;}

.caption {
	text-align: center;
	font-size: 11px;
	margin-top: -5px;
}

@media screen and (min-width:600px){
.service_img {
	float: left;
	width: 18%;
	margin: 1%;
}
}




/*------------------------------------作業の流れ------------------------------------*/
.flow {text-align: center;}



/*--------------------------------------料金表--------------------------------------*/
.price {
	width: 90%;
	margin: 0 auto;
	border-top: 1px dashed #ccc;
}
.price tr:nth-child(odd) {
	background: #f7f6f3;	/*奇数行に色*/
}
.price td,
.price th {
	padding: 2px;
	border-bottom: 1px dashed #ccc;
	text-align: center;
}

.price td {
	color: #F00;
	font-size: 14px;
}

.price th {
	width: 25%;
	vertical-align: top;
}



/*--------------------------------------会社概要--------------------------------------*/

.company{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  width: 90%;
}
.company th,
.company td{
  border: 2px solid #fff;
  padding: 2px;
}
.company th{
  background: #eee;
  width: 25%;
}



/*------------------------------------問い合わせ------------------------------------*/
.contact {
  margin: 10px auto 10px auto;
  text-align: center;
  font-size: 15px;
  width: 300px;
  background-color: #369;
  border: solid 1px #369;
  border-radius: 3px;
}

.contact a {
  display: inline-block;
  padding: 0.3em 1em;
  text-align: center;
  text-decoration: none;
  color: #fff;
}





/*----------------------------------------フッター----------------------------------------*/

footer {
	clear: both;
	height: 20px;
	width: 100%;
	background: #369;
	font-size: 10px;
	text-align: center;
	line-height: 23px;
}
footer a {
	color: #fff
}