@charset "utf-8";

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


/*=============================
	キャンペーン・イベント
=============================*/
.even01_01>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
}
.even01_01>ul>li:nth-child(1){/*1035 1380*/
	width:100%;
}
.even01_01>ul>li:nth-child(2){/*1035 1380*/
	width:90%;
	margin:1.5em auto;
}
.even01_01 .top03_01>ul>li{
	width:48%;
	margin:0 1% 2em;
}

.even01_01 .top01_02cate a,
.even01_01 .top01_02cate span{
	color:#666666;
	background:#F2F2F2;
}
.even01_01 .top01_02cate a:hover{
	background:#878787;
	color:#FFFFFF;
}


.even01_01btn span{
	width:90%;
	margin:0 auto;
	display: block;
	background:#FAF1CD;
	border-radius: 50px;
	padding:0.2em 1em;
	box-sizing: border-box;
	color:#F07400;
	 font-weight: bold;
	text-align: center;
}

.top03_01 >ul>li>a:hover img{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.even01_02>ul>li{
	padding:0.8em 0;
	border-bottom:1px solid #CCCCCC;
	
}

.even01_03 .top01_02cate>ul>li{
	display: block;
	padding:0.2em 0;
}

.even01_03 .top01_02cate>ul>li a{
	padding:0.4em 2em;
}

.even02_01title{
	border-bottom:2px solid #F4E9BD;
	padding:1.5em 1em;
	box-sizing: border-box;
}


/*=============================
	施工事例・お客様の声
=============================*/

.mainasu_nami{
	background: none;
	margin:-1.5em auto 0;
	position: relative;
	z-index: 1;
}

.case01_00>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
}
.case01_00>ul>li{
	width:49%;
	box-sizing: border-box;
	margin:0 1% 0 0;
	border-bottom:#FF8724 1px solid;
}

.active2,
.active3{
	display: block;
	background:#F2F2F2;
	border-radius: 20px 20px 0 0;
}

.case01_01block{
	padding:0.5em;
	box-sizing: border-box;
	cursor: pointer;
}
.case01_01block p{
	display: inline-block;
}

.case01_01sekoicon{
	position: relative;
	padding:0 0.5em 0 1.5em;
}
.case01_01sekoicon::before{
	content: '';
	background:url("../img/icon/icon_case_01.svg") no-repeat;
	background-size: contain;
	width:22px;
	height:16px;
	position: absolute;
	top: 50%;
	left:0.5em;
	transform: translate(-50%,-50%);
}

.case01_01sichoicon{
	position: relative;
	padding:0 0.5em 0 1.5em;
}
.case01_01sichoicon::before{
	content: '';
	background:url("../img/icon/icon_case_02.svg") no-repeat;
	background-size: contain;
	width:20px;
	height:20px;
	position: absolute;
	top: 50%;
	left:0.5em;
	transform: translate(-50%,-50%);
}


.case01_00 a{
	text-decoration: none;
}
.child2,
.child3{
	display: none;
}
.case01_01 .inner2,
.case01_01 .inner3{
	position: absolute;
	top:100%;
	left:0;
	width:100%;
	background:#F2F2F2;
	z-index: 3;
}

.case01_01cate{
	margin:0.5em 0 0 0;
	border:#FF5500 1px solid;
	border-radius: 50px;
	background:#F4E9BD;
	padding:0.2em 1em;
	font-size: 90%;
	color:#FF5500;
	font-weight: bold;
	line-height: 1.4;
}
.case01_01sibo{
	padding:0 1.5em 0 0.5em;
	position: relative;
}
.switch2 .case01_01>a,
.switch3 .case01_01>a{
	position: relative;
	display: block;
}
.switch2 .case01_01>a::before,
.switch3 .case01_01>a::before{
	content: '';
	background: url("../img/icon/icon_arrow.svg") no-repeat;
	background-size: contain;
	width:10px;
	height:10px;
	position: absolute;
	top: 45%;
	right: 1.5em;
	transform: translate(-50%,-50%);
	transform: rotate( 90deg );
}



.switch2 .case01_01>a.active2::before,
.switch3 .case01_01>a.active3::before{
	content: '';
	background: url("../img/icon/icon_arrow.svg") no-repeat;
	background-size: contain;
	width:10px;
	height:10px;
	position: absolute;
	top: 35%;
	right: 1.5em;
	transform: translate(-50%,-50%);
	transform: rotate( -90deg );
}

.case01_01cate02{
	padding:2em 0;
}
.case01_01cate02>ul>li{
	display: inline-block;
	margin:0.1em 0.3em;
}

.case01_01cate02>ul>li a{
	display: inline-block;
	border-radius: 50px;
	padding:0.2em 1.2em;
	border:#CCCCCC 1px solid;
	background:#FFFFFF;
	color:#808080;
	font-weight: bold;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.case01_01cate02>ul>li a:hover{
	border:#FF5500 1px solid;
	background:#F4E9BD;
	color:#FF5500;
	
}

/*=========================
	施工事例お客様の声
	詳細
========================*/

.case02_00{/*612 1380*/
	width:100%;
	margin:0 auto;
}
.case02_01>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	margin:0 auto;
}
.case02_01befo{
	display: inline-block;
	border:#FF5500 4px solid;
	padding:0.3em 2em;
	color:#FF5500;
	font-weight: bold;
	border-radius: 50px;
}

.case02_02>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
}

.case02_01>ul>li:nth-child(1){/*630 1150*/
	width:100%;
	margin:1em 0 0 0;
}
.case02_01>ul>li:nth-child(2){
	width:100%;
	margin:0;
}

.case02_02>ul>li{/*630 1150*/
	width:46%;
	margin:0 2% 0.5em;
}

.case02_03>ul>li{
	padding:0.5em 0;
}

.case02_03>ul>li>dl>dt{
	display: inline-block;
	padding:0.3em 1.3em;
	color:#FFFFFF;
	font-weight: bold;
	border-radius: 50px;
	background:#FF8724;
}

.case02_03>ul>li>dl>dd{
	padding: 0.8em 0;
	box-sizing: border-box;
}

.case02_04title{
	display: inline-block;
	padding:0 1em 0 3em;
	position: relative;
}
.case02_04title::before{
	content: '';
	background: url("../img/icon/icon_case_03.svg") no-repeat;
	background-size: contain;
	width:30px;
	height:30px;
	position: absolute;
	top: 50%;
	left: 1.5em;
	transform: translate(-50%,-50%);
}

.case02_04title::after{
	content: '';
	width:30%;
	height:4px;
	background:#FF5500;
	position: absolute;
	bottom:-0.5em;
	left:35%;
}


.zoom_icon,
.zoom_icon_big{
	position: relative;
}
.zoom_icon::after,
.zoom_icon_big::after{
	content: '';
	
	position: absolute;
	bottom:1em;
	right:1em;
	width:36px;
	height:36px;
	background: url("../img/icon/icon_zoom.svg") no-repeat;
	background-size: contain;
}



.zoom_icon::before{
	width:25px;
	height:25px;
}
.zoom_icon::after{
	bottom:0.5em;
	right:0.5em;
	width:23px;
	height:23px;
}

#slider01 .top03_01>ul>li{
	width:90%;
	margin:0 auto 1em;
}


/*=============================
	おすすめ商品
=============================*/

.prod01_01 .child {
	display: none;
}
.prod01_00{
	width:100%;/*1080 1380*/
	margin:0 auto;
	padding:1em 1em;
	background:#FFFBCC;
	border-radius: 20px;
	box-sizing: border-box;
}
.prod01_00_mini{
	width:100%;/*1080 1380*/
	margin:0 auto;
	padding:1em 1em;
	background:#FFFBCC;
	border-radius: 20px;
	box-sizing: border-box;
}

.prod01_01>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	margin:0;
}

.prod01_01>ul>li{/*431 1400*/
	width:100%;
	margin:0 0 2em ;
	padding:1em 2em;
	background:#FFFFFF;
	border:#FFEFD9 8px solid;
	border-radius: 20px;
	box-sizing: border-box;
}

.prod01_01 a{
	text-decoration: none;
	display: inline-block;
	padding:0 2em 0 0;
	position: relative;
}
.prod01_01 a::after{
	content: '';
	background: url("../img/icon/icon_arrow.svg") no-repeat;
	background-size: contain;
	width:10px;
	height:10px;
	position: absolute;
	top: 62%;
	right: 0;
	transform: translate(-50%,-50%);
	transform: rotate( 90deg );
}

.prod01_01 a.active::after{
	content: '';
	background: url("../img/icon/icon_arrow.svg") no-repeat;
	background-size: contain;
	width:10px;
	height:10px;
	position: absolute;
	top: 55%;
	right: 0;
	transform: translate(-50%,-50%);
	transform: rotate( -90deg );
}

.prod01_01point{
	display: inline-block;
	padding:0.2em 1em;
	color:#FF5500;
	line-height: 1.4;
	border:#ED6A02 1px solid;
	border-radius: 50px;
}

.prod01_02 .top03_01>ul>li a{
	padding:0.5em 0 0 0;
}

.prod01_02 .top03_01>ul>li{
	width:100%;
	margin:0 0 2em;
	box-sizing: border-box;
}

.prod02_01>ul>li{
	padding:0.5em 0;
	border-bottom:#F4E9BD 1px solid;
}
.prod02_01syohin{
	display: inline-block;
	background:#FF8724;
	border-radius: 5px;
	color:#FFFFFF;
	font-weight: bold;
	padding:0.5em 1.5em;
}
.prod02_01kojihi{
	display: inline-block;
	background:#00A6D9;
	border-radius: 5px;
	color:#FFFFFF;
	font-weight: bold;
	padding:0.5em 1.5em;
}

.prod02_01teika{
	background:#F4E9BD;
	padding:0.3em 1em;
}

.bord_FF5500_t4{
	border-top:4px solid #FF5500;
}

/*=====================
	お客様の声
=====================*/

.cust01_01 .top03_01>ul>li a{
	padding:0;
}

.cust01_01 .top03_01>ul>li{
	width:48%;
	margin:0 1% 2em;
	box-sizing: border-box;
}
.cust02_01{
	background:#FAFAF2;
	border-radius: 20px;
	padding:3em 2em;
	box-sizing: border-box;
}

.cust02_01title{
	display: inline-block;
	position: relative;
	padding:0;
	margin:1em 0 0;
}
.cust02_01title::before{
	content: '';
	background: url("../img/cms/cust_02.png") no-repeat center center;
	background-size: contain;
	width:60%;
	height:80px;
	position: absolute;
	bottom:100%;
	left: 20%;
}
.cust02_02{/*929 584*/
	width:80%;
	margin:0 auto;
	
}


/*=====================
	前へ次へ
	スマホ時落ちるパターン
======================*/
.prenex a{
	text-decoration: none;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.prenex h3 a:hover{
	color:#F07200;
}

.prenex{
	display: table;
	width:100%;
	table-layout: fixed;

}

.prev02_01{
	width:96%;
	margin:0.5em auto;
}

.next02_01{
	width:96%;
	margin:0.5em auto;
}

.prev02_01block{
	display: flex;/*フレックボックス宣言*/
	flex-wrap:wrap;/*折り返しあり*/
	width:100%;/*親要素は100％*/
	
	/*並び方の設定
	justify-content: space-around;/*親要素に空きがあったら均等に配置　これがなければ左寄せ*/
	/*align-content: center;複数行の場合中央に配置*/
	align-items: center;/**/
}
.next02_01block{
	display: flex;/*フレックボックス宣言*/
	flex-wrap:wrap;/*折り返しあり*/
	width:100%;/*親要素は100％*/
	
	/*並び方の設定*/
	justify-content: flex-end;/*親要素に空きがあったら均等に配置　これがなければ左寄せ*/
	/*align-content: center;複数行の場合中央に配置*/
	align-items: center;/**/
}

.prev02_01img{
	width:30%;
	margin:0;
	
}

.prev02_01text{
	width:65%;
	margin:0 0 0 5%;
}

.next02_01img{
	width:30%;
	margin:0;
	
}
.next02_01text{
	width:65%;
	margin:0 5% 0 0;
}

.next02_01img{
	order: 2; 
}
.next02_01text{
	order: 1; 
}

.prev02_01text_arrow{
	position: relative;
	padding:0 0 0 2em;
}
.prev02_01text_arrow::before{
	content: '';
	background: url(../img/icon/cms_prev.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translate(-50%,-50%);
	width: 20px;
	height:20px;
	
}
.next02_01text_arrow{
	position: relative;
	padding:0 2.5em 0 0;
}

.next02_01text_arrow::before{
	content: '';
	background: url(../img/icon/cms_next.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%,-50%);
	width: 20px;
	height:20px;
	
}

/*=====================
	/前へ次へ
	/スマホ時落ちるパターン
======================*/

.youtube {
	position:relative;
	padding-bottom: 60%; /* 100/横*縦*/
	height: 0;
	overflow: hidden;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.reco01_01smn {
	width: 25%;
	padding: 0;
	margin: 0 5% 0 0;
	float: left;
	box-sizing: border-box;
}
.reco01_01text {
	width: 68%;
	padding-right: 2%;
	float: left;
}


/***  CMSのフリー領域処理  ***/
.cms_free p img { display: block; width:auto; float:none; padding:1em 0; margin:0 auto;}
.cms_free p img.alignright { margin: 0 0 0 auto; }/* 配置位置 右 */
.cms_free p img.alignleft { margin: 0 auto 0 0; }/* 配置位置 左 */
.cms_free p img.aligncenter { margin: 0 auto; }/* 配置位置 中央 */
.cms_free p img.alignnone { margin: 0 auto 0 0; }/* 配置位置 左 */

.cms_free img { display: block; width:auto; float:none; padding:1em 0; margin:0 auto;}
.cms_free img.alignright { margin: 0 0 0 auto; }/* 配置位置 右 */
.cms_free img.alignleft { margin: 0 auto 0 0; }/* 配置位置 左 */
.cms_free img.aligncenter { margin: 0 auto; }/* 配置位置 中央 */
.cms_free img.alignnone { margin: 0 auto 0 0; }/* 配置位置 左 */

.cms_free img { width: auto; max-width: 100%; margin:0 auto; }/* 配置位置 左 */

.cms_free p { padding:0.3em 0; }

.cms_free table { border: #CCCCCC solid 1px; width:100%; border-collapse: collapse; border-spacing: 0; }

.cms_free table td {
    border-right: #CCCCCC solid 1px;
    border-bottom: #CCCCCC solid 1px;
}

.cms_free table th {
    border-right: #CCCCCC solid 1px;
    border-bottom: #CCCCCC solid 1px;
    font-weight: normal;
}

/***  ページナビゲーション  ***/
.wp-pagenavi {
	
	font-family: -apple-system, Roboto, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue,"Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	clear: both;
	text-align:center;
}
.wp-pagenavi a, .wp-pagenavi span {
	color: #777777;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
    /*
	padding: 8px 15px;
	margin: 0 2px;
    */
    padding: 0.7em 2.5%;
	margin: 0 0.5%;
    white-space: nowrap;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #777777;
	background-color: #FDF9D7;
	border-color: #DDDDDD;
    }
.wp-pagenavi span.current{
	color: #777777;
	background-color: #FDF9D7;
	border-color: #DDDDDD;
	font-weight: normal;
    }

.wp-pagenavi span.pages{
    display: none;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	color: #FFFFFF;
    font-weight: bold;
	background-color: #F07400;
	border-color: #F07400;
}

.wp-pagenavi .first,
.wp-pagenavi .last {
    display: none;
	color: #FFFFFF;
    font-weight: bold;
	background-color: #F07400;
	border-color: #F07400;
}


/***  カレンダー  ***/
.wp-calendar{
	margin:1.5em 0;
}

.wp-calendar table{
	width:100%;
    padding-top:0.5em;
	color:#000000;
}

.wp-calendar table th,
.wp-calendar table td{
	width:14.2857%;
	background-color:none;
    text-align:center;
}

.wp-calendar table tfoot a {
	text-decoration:underline;
}

.wp-calendar table tfoot a:hover {
	text-decoration:none;
}

.wp-calendar table tbody a {
	display:block;
	color:#000000 !important;
	background-color:#E7E7E7;
	text-decoration:none;
}

.wp-calendar table tbody a:hover {
	color:#000000 !important;
	background-color:#CCCCCC;
}

.top01_01smn,
.top01_02smn,
.top01_03smn,
.top01_04smn{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.top01_04smn{
	border:#FF0000 1px solid;
}

.top01_02smn{
	background:#F8F8F8;
	border-radius:15px;
}

.top01_01smn::before,
.top01_02smn::before,
.top01_03smn::before,
.top01_04smn::before{
    content:"";
    display: block;
    padding-top:67.7325581393%; /*アスペクト比*/
}
.top01_01smn a,
.top01_01smn span,
.top01_02smn a,
.top01_02smn span,
.top01_03smn a,
.top01_03smn span,
.top01_04smn a,
.top01_04smn span{
        display: block;
        width:100%;
        height:100%;
        max-height:100%;
}

.top01_01smn img,
.top01_02smn img,
.top01_03smn img,
.top01_04smn img{
        width:auto;
        height:auto;
        max-width: 100%;
        max-height: 100%;
        margin:auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%); /* Safari用 */
        transform: translate(-50%, -50%);
}
.top01_02smn img{
	border-radius: 20px;
}
.top01_03smn img{
	border-radius: 20px 20px 0 0;
}


/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 768px) {
	
/*=============================
	キャンペーン・イベント
=============================*/
.even01_01>ul>li:nth-child(1){/*1035 1380*/
	width:75%;
}
.even01_01>ul>li:nth-child(2){/*1035 1380*/
	width:21%;
	margin:0 2%;
}
.even01_01 .top03_01>ul>li{
	width:29%;
	margin:0 2% 2.5em;
}

/*=============================
	施工事例・お客様の声
=============================*/

.case01_01block{
	padding:0.5em 2em;
}
.case01_00>ul>li{
	display: inline-block;
	width:auto;
	margin:0 1em 0 0;
	border-bottom:#FF8724 1px solid;
}
.case01_01cate{
	margin:0;
}
	
/*シングル*/
.case02_01>ul>li:nth-child(1){/*576 1200*/
	width:48%;
	margin:1em 0 2em 0;
}
.case02_01>ul>li:nth-child(2){
	width:44%;
	margin:1em 2% 2em 6%;
}
	
.case02_02>ul>li{/*630 1150*/
	width:46%;
	margin:0 2% 1em;
}
.case02_04title::before{
	width:53px;
	height:53px;
	left:1em;
	
}
	
/*=============================
	おすすめ商品
=============================*/

.prod01_00_mini{
	width:70%;/*1080 1380*/
	margin:0 auto;
}
.prod01_01 .child {
	display: block;
}
.prod01_01>ul{
	margin:-1em 0 0 0;
}
.prod01_01>ul>li{/*431 1400*/
	width:30.785714285%;
	margin:0 1.27% 2em ;
}
	
.prod01_01 a::after{
	content: '';
	background:none;
}

.prod01_01 a.active::after{
	content: '';
	background:none;
}
	
.prod01_02 .top03_01>ul>li a{
	padding:0;
}
	

.prod01_02 .top03_01>ul>li{/*344 1200*/
	width:28.666667%;
	margin:0 2.3% 2em;
}
	
	
/*=========================
	お客様の声
=========================*/

.cust01_01 .top03_01>ul>li{/*344 1200*/
	width:28.666667%;
	margin:0 2.3% 2em;
}
.cust02_01title{
	padding:0 0 0 6em;
}
.cust02_01title::before{
	width:128px;
	height:128px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%,-50%);
}
.cust02_02{/*929 584*/
	width:62%;
	margin:0 auto;
	
}

	
/*=====================
	前へ次へ
	スマホ時落ちるパターン
======================*/
.prev02_01,
.next02_01{
	display: table-cell;
	width:48%;
	padding:0 2% 0 0;
	border: none;
}
.next02_01{
	display: table-cell;
	width:48%;
	padding:0 0 0 2%;
	border: none;
}
.prev02_01text{
	width:65%;
	margin:0 2%;
}
.next02_01text{
	width:65%;
	margin:0 2%;
}
	
}

/*=================================================================================*/
/** 1140px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1200px) {

	
.case02_00{/*612 1380*/
	width:59%;
	margin:0 auto;
}
	
/***  ページナビゲーション  ***/
.wp-pagenavi a, .wp-pagenavi span {
	padding: 8px 15px;
	margin: 0 5px;
}
	
}
/*=================================================================================*/
/** 1140px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1600px) {
/**** メインコンテンツ　****/ 


}