@charset "UTF-8";

body {
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}



strong, em {
	font-weight: normal;
	font-style: normal;
}

.fade {
    -webkit-transition: 0.6s ease-in-out;
       -moz-transition: 0.6s ease-in-out;
         -o-transition: 0.6s ease-in-out;
            transition: 0.6s ease-in-out;
}

.fade:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}


/* #########スマホ設定 768px以以上######### */

@media (min-width: 768px) {

/* sp設定 */

.sp_site {
    display: none;
}

}


/* #########パソコン設定 767px以下 ######### */

@media (max-width: 767px) {

/* pc設定 */

.pc_site {
    display: none;
}

}





/*ヘッダー*/

.header h1 {
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0;
    padding: 10px;
    background-color: #1e50a2;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header img {
    width: 100%;
}






/*スマホメニュー*/

/*####768px以上####*/

@media (min-width: 768px) {

.sp_menu {
    display: none;
}

}


/*####767px以下####*/

@media (max-width: 767px) {

.sp_menu {
    padding: 5px;
}

#menubtn {
    width: 100%;
    padding: 6px 12px;
    border: solid 1px #AAAAAA;
    border-radius: 7px;
    background-color: #EEEEEE;
    cursor: pointer;
}

#menubtn:hover {
    background-color: #DDDDDD;
}

#menubtn:focus {
    outline: none;
}

#menubtn i {
    color: #888888;
    font-size: 18px;
}

#menubtn span {
    display: inline-block;
    text-indent: -9999px;
}

#menu {
    display: none
}

.menu ul {
    margin: 15px 0 0 0;
    padding: 0;
    list-style: none;
}

.menu li a {
    display: block;
    padding: 10px;
    color: #000000;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    border-bottom: dashed 1px #CCCCCC;
    
}

.menu li a:hover {
    background-color: #A0D8EF;
}

.menu a img {
    width: 100%;
}

}


@media (min-width: 400px) {

.menu a img {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

}






/*コンテンツ*/

.contents a img:hover {
    opacity: 0.8;
}


/*レフトナビ*/

.con-1-title img {
    width: 100%;
}

.con-1 ul,
.con-1-link {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.con-1 ul li a,
.con-1-link li a {
    display: block;
    padding: 10px 5%;
    margin: 0;
    width: 100%;
    font-size: 13px;
    border-bottom: 1px dotted #BBBBBB;
    line-height: 100%;
    text-decoration: none;
    position: relative;
    color: #000000;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.con-1 ul li a:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: solid 2px #7f7f7f;
    border-right: solid 2px #7f7f7f;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}

.con-1 ul li a:hover,
.con-1-link li a:hover {
    background-color: #a0d8ef;
}

.con-1-link li a img {
    width: 90%;
    text-align: center;
}

.con-1-link p {
    text-align: center;
    margin-top: 3px;
    color: #007FFF;
}

.con-1 i {
    font-size: 23px;
    color: #1E50A2;
    margin-right: 10px;
}



/*メインコンテンツ*/

.con-top {
    width: 100%;
    margin: 0;
    padding: 0;
}

.con-top img {
    width: 100%;
}

.con-sub {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
}





.con-sub-box {
    width: 100%;
    margin: 0;
    padding: 0;
}

.con-sub-box:after {
    content: "";
    display: block;
    clear: both;
}

.con-sub-box img {
    width: 100%;
}

.con-sub-box01 {
    width: 32%;
    margin-right: 2%;
    float: left;
}

.con-sub-box02 {
    width: 32%;
    margin-right: 2%;
    float: left;
}

.con-sub-box03 {
    width: 32%;
    float: left;
}


.con-sub-qanda {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
}

.con-sub-qanda a img {
    width: 100%;
}










/*中ページ*/

.con-2-kiji h1 {
    width: 100%;
    border-left: solid 15px #89c3eb;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #89c3eb;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 0 10px 20px;
}

.con-2-kiji img {
    width: 100%;
}


/*会社案内*/

.outline {
    width: 100%;
    margin: 10px 0 0 0;
}

.outline_g {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px 10px 5px;
    border-bottom: dotted 1px #000000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

.outline_g div {
    float: left;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
}

.outline_left {
    width: 30%;
    display: table-cell;
    vertical-align: middle;
}

.outline_right {
    width: 70%;
}


.outline_g:after {
    content: "";
    display: block;
    clear: both;
}



/*工事の流れ*/

.reno-2-kiji {
	margin-bottom: 50px;
}

.reno-2-kiji h1 {
    width: 100%;
    border-left: solid 15px #89c3eb;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #89c3eb;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 0 10px 20px;
}

.reno-2-kiji img {
    width: 100%;
}

.renovation {
    width: 95%;
    margin: 0;
    padding-left: 5%;
    padding-right: 0;
}

.renovation_box {
	width: 100%;
}

.renovation_box img {
	max-width: 300px;
	margin-bottom: 0;
	vertical-align: bottom;
	margin-top: 20px;
}

.renovation_box p {
	width: 93%;
	margin-left: 7%;
	color: #1E50A2;
	font-size: 15px;
	margin-top: 0;
}

.nagare {
	width: 100%;
}

.nagare-text {
	width: 65%;
	float: left;
	margin-left: 5%;
	margin-top: 15px;
}

.nagare:after {
	content: "";
	display: block;
	clear: both;
}

/* #########スマホ設定 768px以上######### */

@media (min-width: 501px) {

.nagare-img {
	width: 30%;
	float: left;
}

.nagare-text {
	color: #1E50A2;
}



}


/* #########パソコン設定 767px以下 ######### */

@media (max-width: 500px) {

.nagare-img {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.nagare img {
	width: 100%;
}

}






/*Q&A*/

.q-and-a-link {
	width: 100%;
}

.q-and-a-link ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.q-and-a-link li {
	border-bottom: 1px dotted #666666;
	display: block;
	position: relative;
	margin-top: 15px;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
}

.q-and-a-link li:hover {
	background-color: #A0D8EF;
}

.q-and-a-link li a {
	width: 100%;
	text-decoration: none;
	margin-bottom: 25px;
}

.q-and-a-link li:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: solid 2px #7f7f7f;
    border-right: solid 2px #7f7f7f;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}

.q-and-a-link-btn {
	font-weight: bold;
	background-color: #007FFF;
	color: #FFFFFF;
	padding: 5px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	width: 90%;
}

.q-and-a-text {
	color: #000000;
	width: 90%;
	font-size: 13px;
}

/* #########スマホ設定 768px以上######### */

@media (min-width: 768px) {

.qa_sp {
	display: none;
}

}



/* #########パソコン設定 767px以下 ######### */

@media (max-width: 767px) {

.q-and-a-link-btn {
	font-weight: bold;
	background-color: #007FFF;
	color: #FFFFFF;
	padding: 5px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	width: 75%;
}

.q-and-a-text {
	color: #000000;
	width: 75%;
	font-size: 13px;
}

.qa_pc {
	display: none;
}

}



.qanda {
    width: 98%;
    margin: 0 0 50px 0;
}

.q-and-a-title {
	margin-top: 25px;
}

.qanda_g {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 15px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: bottom;
}

.qanda_g h2 {
    width: 95%;
    font-size: 16px;
    font-weight: bold;
    color: #2FA0EB;
    border-bottom: 1px solid #2FA0EB;
    padding-left: 1.25em;
    text-indent: -1.25em;
}

.qanda_g p {
    width: 95%;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #946243;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.answer {
    font-weight: bold;
    color: #CC0000;
    font-size: 16px;
}


	
.sp_bottom_link {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #007FFF;
}

.sp_bottom_link ul {
	width: 90%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sp_bottom_link li a {
	width: 29%;
	margin: 10px 1%;
	float: left;
	background-color: #FFFFFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	padding: 1%;
	color: #000000;
}

.sp_bottom_link li a:hover {
	background-color: #DDDDDD;
}

.sp_bottom_link ul:after {
	content: "";
	display: block;
	clear: both;
}





/*施工事例*/

.construction-text {
	margin-top: 30px;
}

.construction-title-img img {
	max-width: 400px;
	margin-top: 30px;
}

.yajirushi-top img {
	margin-bottom: 0;
	vertical-align: bottom;
}

.construction-box002 {
	margin: 0;
	border: 4px solid #59B9C6;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 5px;
}

.construction002-clear {
	width: 100%;
	vertical-align: bottom;
	margin: 0;
}



.construction002-center {
	margin-top: 15px;
}

.construction002-right {
	margin-top: 15px;
}

.construction-box002-text {
	background-color: #33AAFF;
	color: #FFFFFF;
	text-align: center;
	width: 90%;
	margin: 0;
	padding: 5%;
	font-size: 18px;
}

.construction-bottom {
	margin-top: 50px;
}

/* #########スマホ設定 501px以上######### */

@media (min-width: 501px) {

.construction-left {
	float: left;
	width: 48%;
	margin-right: 2%;
}

.construction-right {
	float: left;
	width: 48%;
	margin-left: 2%;
}

.construction-box001:after {
	content: "";
	display: block;
	clear: both;
}

.yajirushi-top {
	margin-top: 25px;
}

.yajirushi-bottom {
	margin-bottom: 25px;
}

.construction002-left {
	margin-top: 15px;
}

.construction002-center {
	margin-top: 15px;
}

.construction002-right {
	margin-top: 15px;
}


.construction-box002 {
	width: 100%;
}

.construction002-left {
	float: left;
	width: 30.6%;
	margin-left: 2%;
}

.construction002-center {
	float: left;
	width: 30.6%;
	margin-left: 2%;
	margin-right: 2%;
}

.construction002-right {
	float: left;
	width: 30.6%;
	margin-right: 2%;
}

.construction002-clear:after {
	content: "";
	display: block;
	clear: both;
}

.construction-box002-text {
	width: 86%;
	margin-left: 2%;
	margin-right: 2%;
}




}



	





/*見積り・問い合わせ*/

.contact {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}

.contact p {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
}



   /*メールフォーム*/

#formWrap {
    width:100%;
    margin:0 auto;
    color:#555;
    line-height:120%;
    font-size:90%;
}

#formWrap p {
    margin-top: 20px;
}

table.formTable{
    width:100%;
    margin:0 auto;
    border-collapse:collapse;
}

table.formTable td,table.formTable th{
    border:1px solid #ccc;
    padding:10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table.formTable th{
    width:25%;
    font-weight:normal;
    background:#efefef;
    text-align:left;
    vertical-align: middle;
}




/* #########スマホ設定 768px以上######### */

@media (min-width: 768px) {

  /*メインコンテンツ横並び設定*/

.contents:after {
    content: "";
    display: block;
    clear: both;
}

.con-1 {
    width: 20%;
    float: left;
}

.con-2 {
    width: 78%;
    float: left;
    margin-left: 2%;
}

}


/* #########パソコン設定 767px以下 ######### */

@media (max-width: 767px) {

.con-1 {
    display: none;
}

.contents {
    margin-left: 10px;
    margin-right: 10px;
}

}









/*フッター*/

.footer {
    border-top: solid 3px #59b9c6;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 50px;
}

.footer_inner {
    width: 100%;
}

.footer_link {
    width: 100%;
    margin: 20px 0 0 0;
    position: relative;
    overflow: hidden;
}

.footer_link:after {
    content: "";
    display: block;
    clear: both;
}



.footer_link ul {
    font-size: 12px;
    font-weight: normal;
    list-style: none;
    float: left;
    left: 50%;
    position: relative;
}

.footer_link li {
    float: left;
    left: -50%;
    position: relative;
}

.footer_link li a {
    text-decoration: none;
    margin: 0 10px 0 10px;
    color: #000000;
}

.footer_link li a:hover {
    color: #007bbb;
}

.footer_add p {
    text-align: center;
    font-size: 12px;
    color: #000000;
    font-weight: normal;
}

.copyright {
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    color: #2fa0eb;
}





/*横幅設定*/

/* ######## 1040px以上 ######## */

@media (min-width: 1040px) {

.header, .contents, .footer_inner {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

}













/* リセット */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea {
	margin: 0;
	padding: 0;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse; 
    border-spacing:0;
}

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

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

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}

/* よく使うCSS start

img {
	max-width:100%;
}

table {
	width:100%;
}

a,a:hover {
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s;
}

a img:hover {
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}

よく使うCSS end -----
時々使うCSS3 start ---

テキストシャドウ {
	text-shadow: 1px 1px 3px #000;
}

テキストシャドウ {
	text-shadow: 1px 1px 3px #000;
}

ボックスシャドウ {
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

ボックスシャドウ内側 {
	-moz-box-shadow: inset 1px 1px 3px #000;
	-webkit-box-shadow: inset 1px 1px 3px #000;
	box-shadow: inset 1px 1px 3px #000;
}

角丸 {
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
}

トランジション {
	-webkit-transition: 1.5s;
	-moz-transition: 1.5s;
	-o-transition: 1.5s;
	transition: 1.5s;
}

透明 {
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
}

背景のみ透明 {
	background-color:rgba(255,255,255,0.2);
}

グラデーション {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	background-image: -moz-linear-gradient(top, #ffffff, #000000);
	background-image: -ms-linear-gradient(top, #ffffff, #000000);
	background-image: -o-linear-gradient(top, #ffffff, #000000);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
	background-image: -webkit-linear-gradient(top, #ffffff, #000000);
	background-image: linear-gradient(top, #ffffff, #000000);
}

スマホ対応
@media screen and (max-width: 480px){
	
}
@media screen and (max-width: 320px){
	
}

時々使うCSS3 end */