@charset "UTF-8";
/*--------------------------------------------------------------------
共通
---------------------------------------------------------------------*/

@media (max-width: 1300px) {
	#wrap_home #sec3 .overlay {
		padding-left: 20px;
		padding-right: 20px;
	}
	#wrap_home #sec3 .stepbox ul {
		margin-bottom: 20px;
	}
	#wrap_home #sec3 .stepbox ul li {
		/*background-size: 40px;
		margin-left: 0;
		padding-left: 45px;
		line-height: 40px;
		min-height: 40px;*/
		margin-bottom: 10px;
	}

/*-----------------------------*/
}

@media (max-width: 1200px) {
	ul#menu-gnavi a {
		padding: 20px;
	}
	#wrap_home #sec3 .stepbox ul li {
		margin: 0 20px 20px 0;
	}

/*-----------------------------*/
}

@media (max-width: 1100px) {
	#sphead {
		display: inline-block;
	}
	#pchead {
		display: none;
	}
	
	#sitedesc,
	#h_rbtn {
		display: none;
	}
	.navbar-custom {
		background-color: #f2f2f2;
	}
	ul#menu-gnavi {
		max-width: 100%;
		width: 100%;
	}
	#custom-collapse {
		background-color: inherit;
	}
	.navbar-collapse.collapse,
	.navbar-collapse.collapsing {
		padding: 0;
	}
	.navbar-custom .navbar-nav li {
		margin: 0;
	}
	ul#menu-gnavi a {
		padding: 10px 20px;
	}
	.navbar-custom .navbar-nav li > a {
		font-size: 16px;
	}
	img.custom-logo {
		width: 154px;
		height: auto;
	}
	.navbar-custom .navbar-brand {
		float: left;
		margin: 0;
		padding: 20px 20px 10px 0;
	}
	.navbar-custom {
		min-height: auto;
		font-size: 100%;
	}
	
	.navbar-toggler {
		background-color: #fff;
		border-radius: 0;
	}
	.navbar-toggler-icon {
	}

/*-----------------------------*/
}

@media (max-width: 991px) {
	.page-title-section .overlay {
		padding: 50px 0;
	}
	.page-title-section h1 {
		font-size: 40px;
	}
	
	.box_L50,
	.box50,
	.box_R50 {
		width: 100%;
		float: none;
		padding: 0;
	}
	
	h2 {
		margin-top: 40px;
		font-size: 30px;
	}
	.widget-separator {
		margin-bottom: 30px;
	}
	h3 {
		margin-top: 20px;
	}
	.box_L01,
	.box_R01,
	.box_L02,
	.box_R02,
	.box_L03,
	.box_R03 {
		padding: 0;
		width: 100%;
		float: none;
	}
	
	#wrap_outer .ph,
	#wrap_roof .ph,
	#wrap_amamori .ph,
	#wrap_paint .ph {
		margin-bottom: 20px;
		text-align: center;
	}
	#wrap_outer .mgn_B20,
	#wrap_roof .mgn_B20,
	#wrap_amamori .mgn_B50,
	#wrap_paint .mgn_B50 {
		margin-bottom: 0;
	}
	
	#wrap_flow .flowbox {
		padding: 20px;
	}
	#wrap_flow .flowbox h3 {
		font-size: 20px;
	}
	#wrap_flow .flowbox .ph,
	#wrap_flow .flowbox .txt {
		width: 100%;
		padding: 0;
	}
	#wrap_flow .flowbox .ph {
		margin-bottom: 20px;
	}
	
	#wrap_worklist .ph img {
		height: 150px;
	}
	#wrap_worklist .box h3 {
		font-size: 16px;
	}
	#content #wrap_worklist ul li {
		padding: 0 5px 20px;
	}
	
	#wrap_work #wrap_ph {
		margin-bottom: 20px;
	}
	#wrap_work #wrap_ph .main {
		padding-right: 10px;
	}
	#wrap_work #wrap_ph .ph {
		padding-left: 0;
	}
	#wrap_work #wrap_ph .ph .box {
		padding: 0 5px 10px;
	}
	#wrap_work #wrap_ph .ph .box img {
		height: 120px;
	}
	
	#wrap_voice {
		width: 100%;
	}
	
	
	/*
	#wrap_voice .icon {
		width: 10%;
	}
	#wrap_voice .txt {
		width: 90%;
	}*/
	
	table {
		overflow: hidden;
	}
	table th,
	table td {
		float: left;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}
	table.result td,
	table.result .pricearea {
		padding: 20px;
	}
	table.result td {
		padding-bottom: 0;
	}
	table.result .pricearea {
		padding-bottom: 20px;
		padding-top: 10px;
	}

/*-- 991px ---------------------------*/
}

@media (max-width: 767px) {
	.grecaptcha-badge {
		z-index: 100;
	}
	.pc,
	#h_rbtn ul li.pc {
		display: none;
	}
	.sp,
	#h_rbtn ul li.sp {
	    display: inline-block;
    }
	
	h2 {
		font-size: 30px;
		margin-top: 30px;
	}
	#wrap_home h2 {
		margin-bottom: 10px;
	}
	.widget-separator {
		margin-bottom: 30px;
	}
	
	#wrap_home #sec1 .wrap,
	#wrap_home #sec2 {
		padding-bottom: 30px;
	}
	
	#wrap_home #sec1 .wrap {
		padding: 0 10px 20px;
	}
	#wrap_home #sec1 .wrap .inner {
		padding: 10px 10px 15px;
	}
	#wrap_home #sec1 .ph {
		margin-bottom: 10px;
	}
	
	#wrap_home #sec2 .box {
		width: 50%;
	}
	
	#wrap_home #sec3 .overlay {
		padding: 40px 20px;
	}
	#wrap_home #sec3 .box,
	#wrap_home #sec4 .box {
		width: 100%;
	}
	#wrap_home #sec3 .Lside,
	#wrap_home #sec3 .Rside {
		padding: 0;
	}
	
	#wrap_home #sec4 .box {
		padding: 0;
	}
	
	.site-footer {
		padding-top: 40px;
	}
	#wrap_f .container {
		padding-bottom: 0;
	}
	#copytxt {
		padding-bottom: 60px;
	}
	
	
	#btmbtn {
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
		height: auto;
	}
	#btmbtn ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
    #btmbtn ul li {
		list-style-type: none;
		width: 33.3%;
		padding: 10px;
    }
	#btmbtn ul li.btn1 {
		background-color: #1962bf;
    }
	#btmbtn ul li.btn2 {
		background-color: #333;
    }
	#btmbtn ul li.btn3 {
		background-color: #dfa018;
    }
	
	#content #wrap_worklist ul li {
		width: 50%;
	}
	#wrap_worklist .ph img {
		height: 220px;
	}
	
	#wrap_work #wrap_ph .ph .box img {
		height: 80px;
	}
	
	#wrap_pos,
	#wrap_sidebar {
		width: 100%;
	}
	body.single #wrap_pos {
		margin-bottom: 30px;
	}
	.blog-section .post {
		margin-bottom: 20px;
	}
	#wrap_sidebar .widget {
		margin-bottom: 0;
	}
	
	.btnbox .inner {
		padding: 15px 20px;
		display: block;
		line-height: 1.5;
	}
	#wrap_estimate .stepbox ul li {
		margin: 0;
	}
	#wrap_home #sec3 .stepbox ul li {
		float: none;
	}
	#wrap_home #sec3 .stepbox ul li {
		margin-right: 0;
	}
	#wrap_estimate .flexwrap .box {
		width: 100%;
		padding: 0;
	}
	#wrap_estimate .ckbtn {
		padding-top: 30px;
	}
	.ckbtn .inner {
		padding: 10px 15px;
	}

/*-- 767 ---------------------------*/
}

@media (max-width: 600px) {
	#wrap_home h2 {
		margin-bottom: 20px;
	}
	#wrap_home #sec1,
	#wrap_home #sec2 .cover {
		padding-left: 20px;
		padding-right: 20px;
	}
	#wrap_home #sec1 .wrap {
		padding-left: 0;
		padding-right: 0;
	}
	#wrap_home #sec1 .wrap .box {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	#wrap_home #sec2 .wrap {
		padding: 0;
	}
	#wrap_home #sec2 .box {
		padding: 0 5px 10px;
	}
	#wrap_home #sec3 .wrap {
		padding: 30px 20px;
	}
	#wrap_home #sec3 .stepbox ul li {
		float: none;
	}
	#wrap_home #sec3 .stepbox ul li {
		background-size: 40px;
		padding-left: 45px;
		min-height: 40px;
		line-height: 2;
		margin: 0 0 20px;
	}
	.page-title-section h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 24px;
		text-align: left;
		border-bottom: 1px solid #dfa018;
		padding-bottom: 5px;
	}
	.widget-separator {
		display: none;
	}
	h3 {
		font-size: 20px;
	}
	#pankuzu {
		margin-bottom: 0;
	}
	#wrap_flow .flowbox h3 {
		font-size: 18px;
	}

/*-----------------------------*/
}

@media (max-width: 575px) {
	#content .container,
	#wrap_f .container {
		padding-left: 20px;
		padding-right: 20px;
	}

/*-----------------------------*/
}

@media (max-width: 500px) {
	#wrap_home #sec3 .stepbox ul li {
		line-height: 1.7;
	}
	#wrap_home #sec2 .box {
		width: 100%;
		padding: 0 0 20px;
	}
	.navbar-header {
		text-align: center;
	}
	.navbar-custom .navbar-brand {
		float: none;
		padding: 20px 0 0;
	}
	body .navbar-expand-lg .navbar-toggler {
		margin-bottom: 20px !important;
	}
	#wrap_worklist .ph img {
		height: 180px;
	}
	#wrap_work #wrap_ph {
		margin-bottom: 10px;
	}
	#wrap_work #wrap_ph .main,
	#wrap_work #wrap_ph .ph {
		width: 100%;
	}
	#wrap_work #wrap_ph .main {
		padding: 0;
		margin-bottom: 10px;
	}
	#wrap_work #wrap_ph .ph .box {
		width: 25%;
	}
	table {
		overflow: hidden;
	}
	table th,
	table td {
		float: left;
		width: 100%;
		padding: 10px 15px;
	}
	
	#wrap_work table th,
	#wrap_work table td {
		float: left;
		width: 100%;
		padding: 5px 20px;
	}

/*-----------------------------*/
}

@media (max-width: 400px) {
	h3 {
	}
	#content #wrap_worklist ul li {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	#wrap_worklist .ph img {
		height: auto;
	}
	#wrap_voice .icon {
		display: none;
	}
	#wrap_voice .txt {
		width: 100%;
		padding: 0;
	}
	#wrap_voice .wrap {
		margin-bottom: 10px;
	}
	#wrap_voice h3 {
		background-color: #dfa018;
		color: #fff;
		padding: 10px;
		border: none;
		margin-bottom: 10px;
	}
	#wrap_flow .flowbox {
		border: none;
		padding: 0;
		margin-bottom: 20px;
	}
	table.result .price {
		font-size: 20px;
	}

/*-----------------------------*/
}