@charset "utf-8";
/***  メインビジュアル　フェード  ***/

/*==========================
	メインの背景色
=========================***/
/*サブぺージタイトル下のテキストの背景色*/
.title_sub_text h3{
	background:var(--main-color);
}

/* 雲のマスク */
.kumo_mask {
  mask-image: url('../img/common/kumo_mask.svg');
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-image: url('../img/common/kumo_mask.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  height: 100px;
}

/*====================================
	TOPリフォーム一覧
===================================***/

/*TOPリフォームのタイトルの背景色*/
.top01_04title::after{
	background: #FBB03B;
}

/*TOPリフォームのタイトルのドット*/
.top01_04title::before{
	background: url("../img/top/mizu_bg_F9E794.png") repeat;
}

/*TOPリフォームのボタン１つ目*/
.top01_04btn a{
	background:var(--sub-btn-color);/*背景*/
	border:var(--sub-btn-color) 1px solid;/*枠*/
}

/*TOPリフォームのボタン１つ目にカーソルが合った時*/
.top01_04btn a:hover{
	background:#FFFFFF;/*背景*/
	color:var(--sub-btn-color);/*文字色*/
}


/*TOPリフォームのボタン2つ目*/
.top01_04btn_02 a{
	background:var(--main-btn-color);/*背景*/
	border:var(--main-btn-color) 1px solid;/*枠*/
}

/*TOPリフォームのボタン2つ目にカーソルが合った時*/
.top01_04btn_02 a:hover{
	background:#FFFFFF;/*背景*/
	color:var(--main-btn-color);/*文字色*/
}

/*イベント＆お知らせ一覧のタイトルのテキスト*/
.top04_01title{color:var(--main-color);}



/*イベント＆お知らせ一覧の日付の色*/
.top04_01day{
	color:var(--main-color);
}


/*イベント＆お知らせ一覧のタイトルの隣のカテゴリ*/
.top04_01cate>ul>li a{
	background:var(--tertiary-btn-color);/*背景*/
	border:var(--tertiary-btn-color) 1px solid;/*枠*/
	color: #000000;
}

/*イベント＆お知らせ一覧のタイトルの隣のカテゴリにカーソルが合った時*/
.top04_01cate>ul>li a:hover{
	background:#FFFFFF;/*背景*/
	color:#000000;/*文字色*/
}

/*イベント＆お知らせ一覧の日付の隣のカテゴリ*/
.top04_02cate>ul>li a{
	background:var(--main-btn-color);/*背景*/
	border:var(--main-btn-color) 1px solid;/*枠*/
	color:#FFFFFF;/*文字色*/
}

/*イベント＆お知らせ一覧の日付の隣のカテゴリにカーソルが合った時*/
.top04_02cate>ul>li a:hover{
	background:#FFFFFF;/*背景*/
	color:var(--main-btn-color);/*文字色*/
}



/*==========================
	TOP　イベント＆お知らせ
=========================***/

/*イベント＆お知らせ一覧　のテキスト*/
.top04_01more a{
	color:var(--main-btn-color);
}
/*イベント＆お知らせ一覧　のテキストにカーソル合わせたとき*/
.top04_01more a:hover{
	color:#000000;
}

/*イベント＆お知らせ一覧　の矢印アイコン*/
.top04_01more a::before{
	background:url("../img/common/icon_more_006638_bold.svg")no-repeat;
}

/*==========================
	TOP　施工事例
=========================***/

/*施工事例の全体の背景色*/
.top03_01>ul>li a,
.top03_02text{
	background:#FFFFFF;/*背景色*/
}
/*施工事例にカーソルが合ったときの全体背景色*/
.top03_01>ul>li a:hover .top03_02text{
	background:#FDD23E;/*背景色*/
}
/*施工事例料金部分の背景*/
.top03_02fee{
	background:#FFE780;/*背景色*/
}
/*施工事例にカーソルが合ったときの料金の背景色*/
.top03_01>ul>li a:hover .top03_02fee{
	background:#FBB03B;/*背景色*/
}
/*施工事例の#○○のテキスト部分*/
.top03_01tag>ul>li,
.top03_01tag>ul>li a{
	color:var(--main-btn-color);/*文字色*/
}
/*施工事例の#○○の#部分*/
.top03_01tag>ul>li::before{
	content: '#';
	color:var(--main-btn-color);/*文字色*/
}
/*施工事例の#○○にカーソルが合ったとき*/
.top03_01tag>ul>li a:hover{
	color:#000000;/*文字色*/
}



/*施工事例下部分のボタン２つ（地域で選ぶ、工事内容で選ぶ）*/
.top03_03>ul>li>a{
	background:var(--sub-btn-color);/*背景色*/
	border:var(--sub-btn-color) 2px solid;/*枠*/
}

/*施工事例下部分のボタン２つ（地域で選ぶ、工事内容で選ぶ）にカーソルが合った時*/
.top03_03>ul>li>a:hover{
	border:#FFFFFF 2px solid;/*枠*/
}


/*==========================
	TOP　選ばれる理由
=========================***/

/*枠の色*/
.top02_01>ul>li{
	border:var(--border-main-color) 6px solid;/*枠*/
}

/*==========================
	TOP　ショールームのご案内
=========================***/

.top06_logo{
	max-width: 130px;
}
/*対応エリアの色*/
.top06_01area{
	background:#206B3F;/*背景*/
	color: #FFFFFF;
}



/*==========================
	フッター
=========================***/
/*フッターの背景色*/
.back_foot{
	background:#3D3D3D;/*背景*/
}
/*フッターの文字色*/
.foot_colo{color:#FFFFFF !important;}/*文字色*/
.foot_colo a{color:#FFFFFF !important;}/*文字色*/



/*=========================================
	流れ
=========================================*/

.flow02_01>ul>li::after{
	background-image: radial-gradient(circle farthest-side, #F15A24 35%, transparent 25%, transparent 100%);/*点線の色*/
}


.flow02_01text{
	background:#FFFFFF;/*背景色*/
	box-shadow: 4px 4px  rgba(0,0,0,0.15);/*影の色*/
}


/*=========================================
	よくある質問
=========================================*/

.qa01_01>ul>li{
	border:#FDF2BD 5px solid;/*ボーダーの色*/
}
.qa01_01>ul>li>a{
	background:#FDF2BD;/*アンサーの背景色*/
}
.qa01_00 h3{
	color:var(--main-color);/*カテゴリタイトルの文字色*/
}
.qa01_01>ul>li dl dt{
	color:var(--sub-btn-color);/*QとAの文字色*/
}
.qa01_01>ul>li>a::after{
	content: '';
	background: url("../img/sub/icon_faq_plus.svg") no-repeat;/*＋の画像*/
	background-size: 100%;
}

.qa01_01>ul>li>a.active::after{
	content: '';
	background: url("../img/sub/icon_faq_mai.svg") no-repeat;/*-の画像*/
	background-size: 100%;
}




/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 768px) {
	
/*==========================
	TOP　イベント＆お知らせ
=========================***/

/*イベント＆お知らせ一覧　の記事の真ん中の縦線*/
.top04_02>ul>li{
	border-right:#3194CB 1px solid;
}
	
/* 雲のマスク */
.kumo_mask {
	height: 282px;
}	
}

@media (min-width : 1200px) {
	
	
	
}


/*=================================================================================*/
/** 1600px以上 padding: ;PCサイズ画面 **/

@media (min-width : 1300px) {

}

@media (min-width : 1400px) {

/*=================================
	ヘッダーのお問い合わせボタン
==================================*/

/*ボタンの色*/
.head_cont{
	background:var(--sub-btn-color);
}
/*ボタンの矢印の色*/
.head_cont::after{
	content: '';
	background: url("../img/common/icon_arrow_FCEE21.svg") no-repeat;
}


/*=================================
	ヘッダーの影
==================================*/

.head_block{
	box-shadow: 0 5px var(--border-main-color);
}


}


@media (min-width : 1750px) {
	
}