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

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

body{
	background: url(../img/back-img.png) #d5f8ff;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
#wrapper{
	margin: 0 auto;
	max-width: 1024px;
	width: 98%;
	background: url(../img/contents-back-img1.gif) no-repeat center top #fff;
	padding-top: 260px;
	min-height: 560px;
}
/* ------------------------------------------
  basic - bigin
------------------------------------------ */
/* ------------------------------------------
  basic - end
------------------------------------------ */

/* ------------------------------------------
  header - bigin
------------------------------------------ */


/*
header#header-set h1{
	position: absolute;
	top: 8px;
	left: 32px;
	width: 190px;
	height: 153px;
}
*/
header#header-set h1{
	transition: .3s;
	position: absolute;
	top: 8px;
	left: 32px;
	width: 190px;
	height: 153px;
}
.address-set{
	transition: .3s;
	display: block;
	position: absolute;
	top: 8px;
	right: 32px!important;
	width: 426px!important;
	height: 140px!important;
	overflow: hidden;
	display: inline-block;
}
header#header-set h1 img,
.address-set img{
	width: 100%!important;
	height: auto!important;
}
/* ------------------------------------------
  header - end
------------------------------------------ */

/* ------------------------------------------
  main - bigin
------------------------------------------ */
/* ------------------------------------------
  main - end
------------------------------------------ */


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

/* ------------------------------------------
  breadcrumbs list  - bigin       
------------------------------------------ */
/* ------------------------------------------
  breadcrumbs list  - end       
------------------------------------------ */

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

#slide ul.slidswou{
}
.slidswou ul li img{
	width: 100%!important;
	height: auto!important;
	position: static!important;
	z-index: -99!important;
}









#contents,
#contents-blog{
	margin: 0px auto;
	max-width: 960px;
	width: 96%;
	min-height: 400px;
	padding-bottom: 96px;
	letter-spacing: 0.1em;
}

#contents h2,
#contents-blog h2:first-child{
	max-width: 960px;
	padding-left: 2.028%;
	padding-bottom: 8px;
	font-size: 140%;
	border-bottom: solid 1px #000;
	margin-bottom: 24px;
}

#contents h3,
#contents-blog h3:first-child{
	max-width: 960px;
	padding-left: 2.028%;
	padding-top: 16px;
	margin-bottom: 24px;
	height: 48px;
	font-size: 140%;
	color: #fff;
	background: url(../img/midashi-h3-1.jpg) #7384ff;
	border-radius: 4px;
}



#contents p{
	padding-left: 2.028%;
	padding-right: 2.028%;
	padding-bottom: 16px;
	line-height: 2em;
}
#contents img{
	width: 100%;
	height: auto;
}
#contents section{
	margin-bottom: 64px;
}

/* ======================================== リフォーム・リノベーション */

#reform-renovation{
}




#reform-renovation section{
}
#reform-renovation section h3{
}

#reform-renovation section h3::before{
	content: "・";
}

#reform-renovation section img{
}


#reform-renovation section div.re-naiyou-box{
	position: absolute;
	left: 5.46875%;
	bottom: -80px;
}


#reform-renovation section div.re-naiyou-box img{
	max-width: 320px;
	max-height: 320px;
	width: 200%;
	height: auto;
}
/*

#reform-renovation section div.re-naiyou-box{
	border-radius: 120px;
	background: aqua;
	width: 210px;
	height: 180px;
	padding: 60px 0 0 30px;
}

#reform-renovation section div.re-naiyou{
	font-size: 70%;
	border-left: 2px solid #ffffff;
}
*/
#reform-renovation section ul{
	padding-left: 2em;
	width: 160px;
}

#reform-renovation section ul li{
	list-style: disc;
}

/* リフォーム・リノベーション　背景画像 */
.re-re-back-img-1{
	background: url(../img/re-toilet-back-img.jpg) no-repeat;
	background-size: cover;
}

/* リフォーム・リノベーション　見出しカラー */
.re-re-back-color-1{
	background: rgba(156, 152, 125, 0.6);
}


.re-re-back-color-2{
	background: rgba(238, 147, 124, 0.6);
}


.re-re-back-color-3{
	background: rgba(213, 230, 152, 0.6);
}
.re-re-back-color-4{
	background: rgba(117, 136, 191, 0.7);
}


.re-re-back-color-5{
	background: rgba(238, 92, 141, 0.7);
}


.re-re-back-color-6{
	background: rgba(175, 191, 253, 0.7);

}


/*　薄くする前
.re-re-back-color-1{
	background: #9b977c;
}


.re-re-back-color-2{
	background: #ee937c;
}


.re-re-back-color-3{
	background: #d5e697;
}
.re-re-back-color-4{
	background: #7487bf;
}


.re-re-back-color-5{
	background: #ec5c8c;
}


.re-re-back-color-6{
	background: #afbffc;
}
*/
/* ------------------------------------------ 解体工事・エクステリア */

.jirei-sample-txt-set{
	padding: 24px;
	width: 60%;
	background: #d3fdb3
}
#section-3 li{
	line-height: 2em;
}
/* ------------------------------------------ 強調・マーカー */
p {
	padding: 10px 0;
}
.mark1 {
	background: linear-gradient(transparent 80%, yellow 0%);
}
.mark2 {
	background: linear-gradient(transparent 60%, yellow 0%);
}
/* ------------------------------------------ blog */

#contents-blog .blog .blog-article{
}
.blog-article header{
	padding-bottom: 8px;
	max-width: 960px;
	width: 100%;
	height: 48px!important;
	background: #2680fa;
	border-radius: 8px 8px 0 0;
	position: static!important;
}
article.post {
	padding: 24px 0;
}
article.post header h1{
	padding: 16px 32px 16px 32px;
}
article.post header  h1 a{
	color: #fff;
}
article.post .post-content{
	border-left: solid 1px #898989;
	border-right: solid 1px #898989;
	border-bottom: solid 1px #898989;
	border-radius: 0 0 8px 8px;
	padding: 24px;
}
article.post .post-content h1{
	font-weight: bold;
	font-size: 125%;
	border-bottom: solid 1px #898989;
	margin-bottom: 16px;
	padding: 8px 16px;
	background: #2680fa;
	color: #fff;
}
article.post .post-content h2{
	font-weight: bold!important;
	font-size: 120%!important;
	border-left: solid 6px #2680fa;
	border-bottom: solid 1px #2680fa;
	margin-bottom: 16px;
	padding: 8px 16px;
}
article.post .post-content h3{
	font-weight: bold;
	font-size: 115%;
	border-bottom: solid 1px #2680fa;
	margin-bottom: 16px;
	padding: 8px 8px;
}
article.post .post-content h4{
	font-weight: bold;
	font-size: 110%;
	border-bottom: solid 1px #898989;
	margin-bottom: 16px;
	padding: 8px 8px;
}
article.post .post-content h5{
	font-weight: bold;
	font-size: 105%;
	margin-bottom: 16px;
	padding: 8px 8px;
}
article.post .post-content h6{
	font-weight: bold;
	margin-bottom: 16px;
	padding: 8px 8px;
}
article.post .post-content p{
	padding-top: 24px; 
	padding-bottom: 1em;
}
article.post .post-content img{
	max-width: 900px;
	height: auto;
}

@media only screen and (min-device-width : 760px) and (max-width: 960px) {
	/* style*/
	article.post .post-content img{
	max-width: 700px;
	height: auto;
	}
}
@media only screen and (min-device-width : 480px) and (max-width: 759px) {
	/* style*/
	article.post .post-content img{
	max-width: 400px;
	height: auto;
	}
}
@media only screen and (min-device-width : 320px) and (max-width: 479px) {
	/* style*/
	article.post .post-content img{
	max-width: 300px;
	height: auto;
	}
}


article.post .post-content .page-numbers{
	padding: 8px;
	background: #2680fa;
}
#pagination {
	text-align: center;
}
#pagination .page-numbers a{
	color: #fff;
}
.prev{
	
}
.next{
	
}
.current{
	
}
/* ------------------------------------------ price-list */
.price-list table thead{
/*
	border-collapse: separate;
	border-spacing: 0 24px;
*/
	border-radius: 8px 8px 0 0;
}
.price-list table thead th{
	padding: 16px 32px 16px 32px;
	border-bottom: solid 1px #898989;
	text-align: left;
	color: #fff;
	background: #2680fa;
}
.price-list table thead th:first-child{
	border-radius: 8px 0 0 0;
}
.price-list table thead th:last-child{
	border-radius: 0 8px 0 0;
}

.price-list table tfoot td{
	padding: 16px 32px 16px 32px;
	border-bottom: solid 1px #898989;
	text-align: left;
	color: #fff;
	background: #2680fa;
	border-radius: 0 0 8px 8px;
}

.price-list table tbody th{
	background: #ffffff;
	padding: 16px 32px 16px 32px;
	text-align: left;
	width: 696px;
	height: 16px;
	max-height: 42px;
	border-left: solid 1px #898989;
	border-right: solid 1px #898989;
	border-bottom: solid 1px #898989;
}
.price-list table tbody td{
	background: #ffffff;
	padding: 16px 32px 16px 32px;
	text-align: left;
	width: 146px;
	height: 10px;
	max-height: 42px;
	border-right: solid 1px #898989;
	border-bottom: solid 1px #898989;
}

.price-list table tbody tr:nth-of-type(2n+0) th,
.price-list table tbody tr:nth-of-type(2n+0) td{
	background-color: #ecf7ff!important;
}

/* ------------------------------------------ company */

.company table{
	border-collapse: separate;
	border-spacing: 0 24px;
}
.company table th{
	background: #2680fa;
	color: #fff;
	padding: 16px 32px 16px 24px;
	text-align: left;
	width: 154px;
}
.company table td{
	background: #e6e6e6;
	color: #000;
	padding: 16px 24px 16px 32px;
	text-align: left;
	width: 704px;
}

.map-information{
	margin-top: 24px;
	height: 450px;
}
@media only screen and (max-device-width : 760px){
	.company table{
	border-collapse: separate;
	border-spacing: 0 24px;
}
.company table th{
	background: #2680fa;
	color: #fff;
	padding: 16px 8% 16px;
	text-align: left;
	width: 84%;
	display: block;
}
.company table td{
	background: #e6e6e6;
	color: #000;
	padding: 16px 8% 16px;
	text-align: left;
	width: 84%;
	display: block;
}

}
/* ------------------------------------------ contact */
.contact-block{
	max-width: 640px;
	width: 92%;
	margin: 0 auto;
	border: solid 2px #2680fa;
	padding: 4% 4% 2%;
	border-radius: 8px;
}
.contact table{
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	max-width: 640px;
	width: 100%;
}
.contact table tr th{
	display: block;
	background: #2680fa;
	color: #fff;
	text-align: left;
	padding: 16px 2% 16px 2%;
	width: 96%;
	
}
.contact table tr td{
	display: block;
	width: 96%;
	padding: 24px 2% 24px 2%;
}
.contact table tr td.border-bottom-line{
	border-bottom: solid 1px #cdcdcd;
}


/*
input[type="button"],
input[type="submit"] {
	padding: 16px;
}
*/
.submit-butom{
	display: inline-block;
	padding: 12px 12px;
	border-radius: 5%;
	cursor: pointer;
	padding: 16px;
	padding       : 12px 12px;   /* 余白       */
	background: #fff;
	border: solid 1px #7e7e7e;
	font-size: 102%;
}
.submit-butom:hover{
	background: #d5edff;
}
@media only screen and (max-device-width : 760px){
	/* style*/

	.contact-block{
		max-width: 760px;
		width: 94%;
		margin: 0 auto;
		border: solid 2px #2680fa;
		padding: 4% 2% 2%;
		border-radius: 8px;
	}
	.contact table{
		margin: 0 auto;
		border-collapse: separate;
		border-spacing: 0;
		padding: 16px 2% 16px 2%;
		width: 96%;
	}
	.contact table tr th{
		display: block;
		background: #2680fa;
		color: #fff;
		text-align: left;
		width: 96%;
	}
	.contact table tr td{
		display: block;
		width: 96%;
	}
	.contact table tr td.border-bottom-line{
		border-bottom: solid 1px #cdcdcd;
	}

	.contact textarea{
		width:90%!important;
	}
	input{
			font-size:16px;
		}
	input[type="text"].input_width_1{
		width:90%!important;
		padding: 4px;
	}
	input[type="text"].input_width_2{
		width:30%!important;
		padding: 4px;
	}
	input[type="text"].suujidake{
		width:20%!important;
		padding: 4px 0;
	}
}

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

/* ------------------------------------------
  footer - bigin
------------------------------------------ */
#footer-wrapper{
	background: #2680fa;
	padding: 32px 0 24px;
	width: 100%;
}
#footer-wrapper small{
	text-align: center;
	font-size: 80%;
	display: block;
	color: #fff;
}

.footer_address{
	display: none;
}
.footer_address img{
	width: 100%;
	height: auto;
}
/* ------------------------------------------
  footer - end
------------------------------------------ */

/* ------------------------------------------
  support - bigin
------------------------------------------ */

/* ------------------------------------------ txt support */
/* テキスト内の電話番号カラー */
.tel_txt_color-1{
	color: #ff8500;
}

/* 料金表、会社概要のテーブルの見出しの文字幅 */
.price-list .letter-space-1,
.company .letter-space-1{
	letter-spacing: 1em;
}

/*  */
.sample-midashi-set{
	background: url(../img/border-1.png) repeat-x left center;
	padding-left: 24px;
	margin-bottom: 16px;
}
.sample-midashi-1{
	padding: 8px 8px 8px 32px;
	background: url(../img/white-point.png) no-repeat left center #2680fa;
	background-position-x: 4px;
	border-radius: 4px;
	width: 58px;
	font-weight: bold;
	color: #fff;
}

/*  */
.tel-color{
	color: #ff7900;
	font-weight: bold;
}
.a-color-1{
	color: #ff7900;
	padding-bottom: 2px;
	border-bottom: solid 1px #ff7900;
	font-weight: bold;
}
.a-color-1{
	color: #ff7900;
}

/* ページネーション */
#pagination{
 font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

.page-numbers {
	background: #b9d4f9!important;
}
#pagination a,
#pagination span{
	border-radius: 4px;
	font-size: 80%!important;
	padding: 12px!important;
	margin: 2px!important;
	text-decoration: none;
}
#pagination a{
	background: #2680fa!important;
	color: #ffffff;
}
#pagination a:hover{
	background: #fa9b26!important;
	color: #ffffff;
}
##pagination span{
	background: #2680fa!important;
	color: #ffffff;
}

#pagination span.dots{
	background: #2680fa!important;
	color: #ffffff;
}

#pagination .page-numbers{
	font-size: 80%;
	padding: 2px;
	margin: 2px;
	width: 100px!important;
	height: 100px!important;
}
#pagination .next,
#pagination .prev{
	border: none!important;
}
#pagination:after{
    content:"";
    display:table;
    clear:both;
}
/* ------------------------------------------
  support - end
------------------------------------------ */


/* 左右交互表示 img support */
.column-wrapper {
  width: 100%;
  display: flex;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
  width: 50%;
  display: flex;
  align-items: center;
}
.column1 {
  background: #fce88d;
  padding: 60px;
  box-sizing: border-box;
}
.column-wrapper:nth-of-type(2n) .column1:nth-of-type(1){
  background: #b5ffb6;
}
.column1title {
  font-size: 25px;
}
.column1txt {
  font-size: 15px;
}
.column2 img {
  height: 100%;
  width: 100%;
  object: cover;
}
@media screen and ( max-width:500px )
{
  .column-wrapper {
    flex-direction: column-reverse;
  }
  .column1, .column2 {
  width: 100%;
}
  .column1 {
  padding: 25px;
}
}
/* ------------------------------------------
  support - end
------------------------------------------ */


/* ------------------------------------------
  会話風吹き出しテキスト
------------------------------------------ */
.balloon_l, .balloon_r {
  margin: 30px 0;
  display:flex;
  justify-content: flex-start;
  align-items: flex-start; /*縦位置を上揃え*/
/*   align-items: center; */ /*縦位置を真ん中揃え*/
}
.balloon_r {
  justify-content:flex-end;
}
.faceicon img {
  width: 80px; /*任意のサイズ*/
  height: auto;
}
.balloon_r .faceicon {
  margin-left:25px;
}
.balloon_l .faceicon {
  margin-right:25px;
}
.says {
  max-width:700px; /*最大幅は任意*/
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 17px 13px 15px 18px;
  border-radius: 12px;
  background: #99dddd;/*色は任意*/
  box-sizing:border-box;
  margin:0 !important;
  line-height:1.5;
/*   align-items: center; */
}
.says p {
  margin:8px 0 0 !important; 
}
.says p:first-child {
  margin-top:0 !important;
}
.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
/*   margin-top:-3px;  */
}
.balloon_l .says:after {
  left: -26px;
  border-right: 22px solid #99dddd;
}
.balloon_r .says:after {
  right: -26px;
  border-left: 22px solid #99dddd;
}

/* ------------------------------------------
  画像の上にテキストを乗せる
------------------------------------------ */
.example {/*親div*/
  position: relative;/*相対配置*/
  }  
  
.example p {
  position: absolute;/*絶対配置*/
  color: black;/*文字は黒に*/
  top: 0;
  left: 0;
  } 

.example img {
  black: 100%;
  }