@charset "utf-8";

/*基本の設定*/
@media print, screen and (min-width:769px){
.smp{ display:none !important;}
}
@media screen and (max-width:768px){
.pc{ display:none !important;}
*{ box-sizing:border-box;}
.figure{ text-align:center; margin:10px auto;}
.right { text-align:left;}
img { height:auto;}
.full { width:100%; height:auto; }
	body { min-width: 100%;}
}
.center { text-align: center;}
.right { text-align:right !important;}
/*headerの設定*/
@media screen and (max-width:768px){

#header {
	position: fixed;
	width: 100%;
	padding:1%;
	z-index: 9999;
	background: rgba(255,255,255,0.7);
	border:0 !important;
	top: 0;	
}

#header .h_main { background-color: transparent; padding: 3%; }

#header .h_main .h_logo { width: 50%; }
#header img { max-width:100%; height:auto;}

#header .h_main .h_tools { width: 48%; }

#header .h_main .h_tools li { width: 30%; margin-right: 5%; }

#header .h_main .h_tools li#h_menu { position: relative; margin-right: 0; text-align:left; }

#header .h_main .h_tools li#h_menu span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 33px; height: 5px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; transition: All 0.35s ease; -webkit-transition: All 0.35s ease; -o-transition: All 0.35s ease; }

#header .h_main .h_tools li#h_menu span:after { content: ''; position: absolute; top: 10px; width: 33px; height: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-color: #fff; transition: All 0.35s ease-in-out; -webkit-transition: All 0.35s ease-in-out; -o-transition: All 0.35s ease-in-out; }

#header .h_main .h_tools li#h_menu span:before { content: ''; position: absolute; top: -10px; width: 33px; height: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-color: #fff; transition: All 0.35s ease-in-out; -webkit-transition: All 0.35s ease-in-out; -o-transition: All 0.35s ease-in-out; }

#header .h_main .h_tools li#h_menu span.active { background: rgba(255, 255, 255, 0); }

#header .h_main .h_tools li#h_menu span.active:after { top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); }

#header .h_main .h_tools li#h_menu span.active:before { top: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }

#header .h_main .h_tools li#h_menu span { width: 20px; height: 3px; }
  #header .h_main .h_tools li#h_menu span:after { top: 7px; width: 20px; height: 3px; }
  #header .h_main .h_tools li#h_menu span:before { top: -7px; height: 3px; width: 20px; }

/*----------------------------------------------------------------------------------------------------
 □ #site_header
---------------------------------------------------------------------------------------------------- */
.dis_flex { display: -webkit-box; display: -ms-flexbox; display: flex; display: -moz-flex; display: -ms-flex; }

.flex_wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex_align_item_start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; }

.flex_align_item_end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; }

.flex_align_item_center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; }

.flex_jus_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; }



.flex_jus_center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.flex_jus_around { -ms-flex-pack: distribute; justify-content: space-around; }

.flex_jus_start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; }

.flex_jus_end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

#gnav { position: absolute; top: 100%; left: 0; right: 0; display: none; z-index: 9999; background: rgba(0,0,0,0.7); }

#gnav ul { padding: 0 4%; }

#gnav li { border-bottom: 1px solid #fff; float: none; position: relative; }

#gnav li:last-child { border-bottom: none; }

#gnav li a { color: #fff; text-decoration: none; display: block; padding: 3% 0; width: 100%; position: relative; }

#gnav li a:before { content:" "; position: absolute; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff; top: 0; right: 3%; height: 6px; bottom: 0; margin: auto; }

#gnav li a span { display: block; }

}

/*googlemapの設定*/
@media screen and (max-width:768px){

#gmap {
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

}

/*レスポンシブ対応の設定*/
.flex-wrap { display:flex; flex-wrap: wrap; }
.flex-center { display: flex; justify-content: center; align-items: center; }

.inner01 { width:1200px; margin:0 auto; }

.bor-box { box-sizing: border-box;}

.main-reform-box { width:50%; padding:1%; }

.w30p { width: 30%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.txt80p { font-size: 80%; }


.mtb35 { margin:35px 0;}

#don li { margin-right: 30px; }
#don li:last-child { margin-right: 0; }

.top-full-bn { margin:3% 1%; }
.top-full-bn img { width:100%; height: auto; }

@media screen and (min-width:769px){
.order01 { order:1;}
.order02 { order:2;}
	.w45p_pc { width: 45%; }
	.pl3p_pc { padding-left:3%;}
}

@media screen and (max-width:768px){
	.inner01 { width:100%; margin:0 auto; }
	.center_smp { text-align: center; }
	
	#wrapper {
		width: 100%;
		margin-top: 80px;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
	}
		
	#container_main2 {
		width: 100%;
		float: none;
	}
	
	.main-reform-box { width:100%; padding:1%; }
	#don ul { display: flex; flex-wrap: wrap; }
	#don ul li { width: 50%; padding: 1%; margin: 0;}
	#don ul li img { width: 100%; height: auto; }
	
	#link {
		width: 100%;
		margin: 0;
		float: none;
		display: flex;
		flex-wrap: wrap;
	}
	
	#link p {
		margin: 0;
		float: none;
		width: 50%;
		padding: 1%;
	}
	
	#footlink {
		overflow: hidden;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 3%;
		padding-bottom: 3%;
		display: flex;
		flex-wrap:wrap;
	}
	
	#flinein {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.float_L {
		float: none;
	}
	
	.float_R {
		float: none;
	}
	
	#sidebar {
		float: none;
		width: 100%;
		padding: 3%;
	}
	
	.flex-wrap-smp { display: flex; flex-wrap: wrap; margin: 3% 0; }
	.flex-wrap-smp li { width: 50%; padding: 1%; margin-bottom: 0 !important;}
	
	#kind {
		width: 100%;
		/* height: 680px; */
		margin: 0px ;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		font-size: 100%;
		padding: 3%;
		box-sizing: border-box;
	}
	
	#copy {
		margin: 0 auto;
		height: auto;
		padding: 3%;
		font-size: 11px;
		width: 100%;
	}
	
	#copy2 {
		margin: 0 auto;
		 padding: 3%;
		width: 100%;
	}
	
	#foot { box-sizing: border-box; margin-top: 0; }
	
	#box1 {
		float: none;
		margin-right: 0px;
		line-height: 1.5;
		width: 50%;
		padding: 2%;
	}
	
	.side-top { background-color: #ab0000; padding: 2%; }
	.side-top:before { content: "各種リフォーム"; display: block; color: #fff; font-weight: bold; font-size: 150%; text-align: center; }
	.side-top img { display: none; }
	
	#main-content { width:100%; margin: 0 auto; padding: 3%; }
	#main-content h3 { margin-bottom:20px; font-size: 130%;}
	#main-content p { margin-bottom:20px;}
	#main-box { width: 100%; padding: 1%; box-sizing: border-box; order: 1; }
	#left-box { width:100%; padding:1% 0; box-sizing: border-box; order: 3; }
	#left-box ul { margin:0 0 5% 0; padding: 0; display: flex; flex-wrap: wrap; }
	#left-box li { list-style:none; width: 50%; padding: 1%; }
	#left-box li img { width:100%; height: auto;}
	
	.w30p { width: 100%; }
	.w40p { width: 100%; }
	.w60p { width: 100%; }
	.w70p { width: 100%; }
	
	.p3p_smp { padding:3%;}
	
	#right-box { width:100%; order: 2; padding: 1%; box-sizing: border-box; border-bottom: solid 1px #ccc; }
	
	.soudan_box_l { width: 100%; padding: 3%; box-sizing: border-box; }
	.soudan_box_r { width: 100%; font-size: 100%; padding: 3%; box-sizing: border-box; }
	
	#FOOTER { margin-top: 5%; padding: 3%; border-top: 1px dashed #D9D9D9; text-align: center; }
	#FOOTER div { margin: 0 auto; width: 100%;}
	#FOOTER p { margin: 0; line-height: 1.4; float: none; font-size: 80%; }
	#FOOTER ul { float: none; margin:3% 0 0 0; padding: 0; list-style: none; border-right: 1px solid #D9D9D9; display: flex; flex-wrap: wrap; }
	#FOOTER ul li { float: none; border-left: 1px solid #D9D9D9; width: 33.33%; text-align: center; }
	.apply { padding:3%;}
}

.pet_title01 { background-image:url("https://www.live-service.net/images/pet/title_bg01.png"); background-repeat:no-repeat; background-size: 100% auto; height:180px; display:flex; justify-content: center; align-items:center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight:900; }

.pet-main-box { padding:3%; background-color:#d1f3fc; border-radius:10px; }
.pet_box { width:50%; box-sizing: border-box;}
.pet-side-list li { margin-bottom:3%;}
.pet-side-list li a { display:block; background-color:#55bcdf; border:solid 3px #55bcdf; border-radius:10px; padding:25px; color:#fff; font-family: 'Kosugi Maru', sans-serif; font-weight:900; text-decoration:none; }
.pet-side-list li a:hover { background-color:#d1f3fc; color:#55bcdf;}
.fa-paw { font-size:140%!important; margin-right:10px;}

.side_line_qr { background-color:#07b53b; color:#fff; font-weight:900; font-family: 'Noto Sans JP', sans-serif; padding:5px 10px; border-radius:10px; font-size:90%; text-align:center;}

@media screen and (max-width:480px){
	.pet_title01 { background-image:url("https://www.live-service.net/images/pet/title_bg01.png"); background-repeat:no-repeat; background-position:center; background-size: 100% auto; height:auto; padding:35px 0; display:flex; justify-content: center; align-items:center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight:900; }
}