@CHARSET "utf-8";






/* PC版トップページ用CSS */

/**************** コロナ対策 **************/

div.stopCovid19Board{
	font-weight:bold;
	text-align:center;
	margin:30px 0 0px;
}

div.stopCovid19Board a:link , div.stopCovid19Board a:visited{
	display:inline-block;
	padding:12px 32px;
	color:#333333;
}

div.stopCovid19Board a:hover , div.stopCovid19Board a:active{
	color:#dd8822;
}

/*
dl.coronaBoard{
	background:#eeeeee;
	color:#333333;
	margin:50px 30px 20px;
	padding:20px;
}

dl.coronaBoard dt{
	font-weight:bold;
	margin-bottom:20px;
}

dl.coronaBoard dd{

}
*/

/**************** コロナ対策 **************/


div.topImage{
	height:488px;
	text-align:center;
}


.indexCallBoxWrapper{
	text-align:center;
}


.indexCallBox{
	background:#ffeecc;
	border-radius:5px;
	box-shadow:2px 2px 4px rgba(0,0,0,0.2);
	display:inline-block;
	margin:20px auto 60px;

}

dl.indexCall dt{
	float:left;
	color:#dd8822;
	font-size:28px;
	padding:20px;
}

dl.indexCall dt .spCaption{
	display:none;
}

dl.indexCall dd{
	float:left;
	padding:20px 20px 20px;
	font-size:32px;
	color:#333333;
}

dl.indexCall dd img{
	height:28px;
}

dl.indexCall dd div.businessTime{
	font-size:14px;
	color:#666666;
}

.indexCallBox .link{
	clear:both;
}

.indexCallBox .link a:link , .indexCallBox .link a:visited{
	display:inline-block;
	text-decoration:none;
	background:url('../img/icon/mail.png') #dd8822 no-repeat;
	background-position: 20px center;
	background-size:26px auto;
	color:#ffffff;
	padding:12px 40px 12px 60px;
	font-size:20px;
	text-align:center;
	border-radius:1px;
	margin:0px 0 0;
	transition:.3s;
	border-radius:4px;
	box-shadow:2px 2px 4px rgba(0,0,0,0.2);
}

.indexCallBox .link a:hover , .indexCallBox .link a:active{
	background:url('../img/icon/mail.png') #dfdddb no-repeat;
	background-position: 98% center;
	background-size:120px auto;
	padding:20px 40px 20px 60px;
	color:#dd8822;
	font-weight:bold;
}


	/* トップページナビ */
	
div.indexMainNaviBox{
	margin-top:20px;
}
	
ul.indexMainNavi li{
	width:180px;
	list-style:none;
	float:left;
	margin-left:7px;
	margin-bottom:7px;
}

ul.indexMainNavi li.last{
	margin-right:0;
}

ul.indexMainNavi li a:link , ul.indexMainNavi li a:visited{
	display:block;
	background:#eeeeee;
	background-position:96% center;
	text-align:center;
	font-size:14px;
	color:#343332;
	text-decoration:none;
	padding:14px 14px;
	font-weight:bold;
}

ul.indexMainNavi li a:hover , ul.indexMainNavi li a:active{
	background:#dd8822;
	color:#ffffff;
}

ul.indexMainNavi li img{
	max-height:50px;
	margin-bottom:10px;
}

ul.indexMainNavi li div.sup{
	font-size:12px;
	letter-spacing:0.05em;
	margin-top:10px;
}

	/* お知らせ */

ul.summaryNewsList{
	
}

ul.summaryNewsList li{
	list-style:none;
	border-bottom:1px solid #bbbbbb;
}


ul.summaryNewsList li dl dt{
	padding:5px 14px;
	margin-top:10px;
	float:left;
}



ul.summaryNewsList li dl dd{
	padding:5px 14px;
	margin-top:10px;
	float:left;
}

ul.summaryNewsList li dl dd.category{
	color:#ffffff;
	float:left;
	margin:10px 14px 10px 0;
	padding:0;
}

ul.summaryNewsList li dl dd.category div{
	background:#6c9bd2;
	color:#ffffff;
	padding:5px 14px;
	min-width:100px;
	text-align:center;
}

ul.summaryNewsList li dl dd.blog div{
	background:#88bb88 !important;
}

	/* カテゴリー特定クラス */
	
ul.summaryNewsList li dl dd.category div.event{
	background:#88bb44;
	color:#ffffff;
}

ul.summaryNewsList li dl dd.category div.soldout{
	background:#bf2222;
	color:#ffffff;
}


ul.summaryNewsList li a:link , ul.summaryNewsList li a:visited{
	display:block;
	background:url('../img/icon/arrow_gray.png') no-repeat;
	background-position:99% center;
	color:#333333;
	text-decoration:none;
}

ul.summaryNewsList li a:hover , ul.summaryNewsList li a:active{
	background:url('../img/icon/arrow_gray.png') no-repeat #dfdddb;
	background-position:99% center;
	color:#2280d0;
}




	/* トップニュース */
	
div.topNewsBox{
	/*
	position:absolute;
	top:20px;
	left:20px;
	z-index:500;
	*/
	margin-bottom:30px;
}

div.topNewsBox ul.topNewsList li{
	list-style:none;
}

div.topNewsBox ul.topNewsList li a:link , div.topNewsBox ul.topNewsList li a:visited{
	display:block;
	background:#dd8822 url('../img/icon/arrow_white.png') no-repeat;
	background-position:98% center;
	color:#ffffff;
	text-decoration:none;
	padding:10px 40px 10px 10px;
	border-radius:4px;
}

div.topNewsBox ul.topNewsList li div.date{
	font-size:11px;
	font-weight:bold;
}

div.topNewsBox ul.topNewsList li div.content{
	font-size:16px;
	font-weight:bold;
	padding-top:4px;
}

div.topNewsBox ul.topNewsList li br.clear{
	display:none;
}



	/* ピックアップ一覧 */
ul.indexPickupWrapper li{
	list-style:none;
	padding:30px;
}
ul.indexPickupList{
	list-style:none;
}

ul.indexPickupList li{
	margin:10px 10px 30px;
	position:relative;
}

ul.indexPickupList li dl{
	margin:0 0 10px;
}

ul.indexPickupList li dl dt{
	margin:0 0 10px;

}

ul.indexPickupList li dl dt:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	transition: .3s;
}

ul.indexPickupList li dd{
	font-size:18px;
	color:#333333;
	font-weight:bold;
}

ul.indexPickupList li dd.date{
	position:absolute;
	top:0;
	right:0;
	font-size:14px;
	color:#ffffff;
	padding:10px 14px;
	background:rgba(230,146,35,0.8);
	border-radius:0 0 0 6px;
}
	

	
	/* 太陽ハウスのリフォームについて */
	
div.aboutBox div.image{
	width:400px;
	height:265px;
	float:left;
}

div.aboutBox ul.indexSpecialtyList{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}

div.aboutBox ul.indexSpecialtyList li{
	width:390px;
	margin:10px 20px;
	background:#eeddcc;
	padding:12px 20px;
	color:#333333;
	font-weight:bold;
	margin-bottom:20px;
}



/*
div.aboutBox div.content{
	width:510px;
	float:right;
}
	
	
div.aboutBox ul.indexSpecialtyList li{
	list-style:none;
	background:#eeddcc;
	padding:12px 20px;
	color:#333333;
	font-weight:bold;
	margin-bottom:20px;
	width:400px;
}

div.aboutBox ul.indexSpecialtyList li.second{
	margin-left:20px;
}

div.aboutBox ul.indexSpecialtyList li.third{
	margin-left:40px;
}

div.aboutBox ul.indexSpecialtyList li.fourth{
	margin-left:60px;
}
*/

	
	/* 初めての方へ */
ul.reformFirstList li{
	list-style:none;
	width:300px;
	float:left;
	margin-left:10px;
	margin-bottom:30px;
	text-align:center;
	font-size:14px;
}

ul.reformFirstList li.last{
	margin-right:0;
}

ul.reformFirstList li.pcFirst{
	clear:both;
}

ul.reformFirstList li a:link , ul.reformFirstList li a:visited{
	display:block;
	text-decoration:none;
	font-weight:bold;
	color:#333333;
}

ul.reformFirstList li a:link dd , ul.reformFirstList li a:visited dd{
	background:url('../img/icon/arrow_gray.png') no-repeat;
	background-position:98% center;
	padding:6px 18px 6px 12px;
}

ul.reformFirstList li a:hover , ul.reformFirstList li a:active{
	text-decoration:underline;
	color:#dd8822;
}


ul.reformFirstList li dl dt{
	position: relative;
	padding-bottom: 66.7%;
	height: 0;
	overflow: hidden;
	text-align:center;
}

ul.reformFirstList li dl dt img{
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
}

ul.reformFirstList li dl dd{
	margin-top:6px;
}
	
	
	/* サービスピックアップ */
ul.indexServicePickupList li{
	list-style:none;
	overflow:hidden;
	text-align:center;
}

ul.indexServicePickupList li.main{
	margin-bottom:30px;
	width:940px;
	height:400px;
}	

ul.indexServicePickupList li.sub{
	width:450px;
	height:300px;
	margin-bottom:30px;
}

ul.indexServicePickupList li.leftImage{
	float:left;
}

ul.indexServicePickupList li.rightImage{
	float:right;
}

ul.indexServicePickupList li.serviceItem{
	width:300px;
	height:200px;
	float:left;
	margin-right:20px;
	position:relative;
	margin-bottom:30px;
}

ul.indexServicePickupList li.serviceItem div{
	position:absolute;
	top:34%;
	left:20px;
	right:20px;
	text-align:center;
}

ul.indexServicePickupList li.last{
	margin-right:0;
}

ul.indexServicePickupList li img{
	-moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: .3s;
}

ul.indexServicePickupList li a:hover img{
	-webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	transition: .3s;
}

ul.indexServicePickupList li.serviceItem a:link , ul.indexServicePickupList li.serviceItem a:visited{
	text-decoration:none;
	font-weight:bold;
	color:#dd8822;
	font-size:24px;
	text-shadow:
		#ffffff 2px 0px 2px,  #ffffff -2px 0px 2px,
	    #ffffff 0px -2px 2px, #ffffff 0px 2px 2px,
	    #ffffff 2px 2px 2px, #ffffff -2px 2px 2px,
	    #ffffff 2px -2px 2px, #ffffff -2px -2px 2px,
	    #ffffff 1px 2px 2px,  #ffffff -1px 2px 2px,
	    #ffffff 1px -2px 2px, #ffffff -1px -2px 2px,
	    #ffffff 2px 1px 2px,  #ffffff -2px 1px 2px,
	    #ffffff 2px -1px 2px, #ffffff -2px -1px 2px;
}

ul.indexServicePickupList li.serviceItem a:hover , ul.indexServicePickupList li.serviceItem a:active{
	color:#dd8822;
}


	/* リフォームメニュー */
	
	/* リフォームメニュー一覧 */
	
ul.reformMenuList li{
	list-style:none;
	width:300px;
	float:left;
	margin-right:20px;
	margin-bottom:30px;
	text-align:center;
	font-size:14px;
}

ul.reformMenuList li.last{
	margin-right:0;
}

ul.reformMenuList li.pcFirst{
	clear:both;
}

ul.reformMenuList li a:link , ul.reformMenuList li a:visited{
	display:block;
	text-decoration:none;
	font-weight:bold;
	color:#333333;
}

ul.reformMenuList li a:link dd , ul.reformMenuList li a:visited dd{
	background:url('../img/icon/arrow_gray.png') no-repeat;
	background-position:98% center;
	padding:6px 18px 6px 12px;
}

ul.reformMenuList li a:hover , ul.reformMenuList li a:active{
	text-decoration:underline;
	color:#dd8822;
}


ul.reformMenuList li dl dt{
	position: relative;
	padding-bottom: 66.7%;
	height: 0;
	overflow: hidden;
	text-align:center;
}

ul.reformMenuList li dl dt img{
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
}

ul.reformMenuList li dl dd{
	margin-top:6px;
}





	/* 施工事例 */
	
	/* 施工事例リスト*/
	
ul.indexWorksList{
	margin-top:40px;}

ul.indexWorksList li{
	width:300px;
	float:left;
	margin-left:10px;
	margin-bottom:40px;
	list-style:none;
}

ul.indexWorksList li img{
	width:300px;
	height:200px;
	overflow:hidden;
	text-align:center;
}

ul.indexWorksList li a:link , ul.indexWorksList li a:visited{
	display:block;
	position:relative;
	line-height:100% !important;
	overflow:hidden;
	margin:2px;
}

ul.indexWorksList li div.hoverContents{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(54,46,43,0.9);
	line-height:100% !important;
	display:none;
}



ul.indexWorksList li div.hoverContents div.title{
	position:absolute;
	top:34%;
	left:0;
	right:0;
	text-align:center;
	color:#ffffff;
	font-size:14px;
}

ul.indexWorksList li div.hoverContents div.link{
	position:absolute;
	bottom:20px;
	left:20px;
	right:20px;
	padding:6px 0;
	color:#ffffff;
	background:#dd8822;
	text-align:center;
	font-size:14px;
	border-radius:2px;
	line-height:100% !important;
}


	/* テンプレート1 */
	
div.worksContentBox div.templete1{
	width:720px;
	margin:0 auto;
}	
	/* 動画 */

ul.movieList li{
	width:33%;
	float:left;
	list-style:none;
}

ul.movieList li div.youtubeBoxWrapper{
	margin:10px;
}

ul.movieList li div.youtubeBox{
	clear:both;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

ul.movieList li div.youtubeBox iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


ul.movieList li div.title{
	font-size:14px;
	font-weight:bold;
	text-align:center;
}


	/* アクセス */
	
div.accessBox div.content{
	width:500px;
	float:left;
}

div.accessBox div.map{
	width:400px;
	height:400px;
	float:right;
	overflow: hidden;
}

div.accessBox div.map iframe {
  width: 100%;
  height: 570px;
  margin-top: -170px;
}

div.accessBox dl.accessList dt{
	color:#333333;
	
}

div.accessBox dl.accessList dd{
	color:#333333;
	margin-bottom:10px;
}


	/* 会社情報 */
	
div.companyBox{

}

div.companyBox div.catch{
	font-size:16px;
	font-weight:bold;
	padding:0 14px 20px;
	text-align:center;
	color:#333333;
}

div.companyBox div.image{
	width:420px;
	min-height:284px;
	float:left;
	text-align:center;
}

div.companyBox div.content{
	width:490px;
	float:right;
}

div.companyBox div.content p{
}

div.companyBox p.license{
	font-size:14px;
	background:#eeeeee;
	margin:0 0 20px;
	padding:14px 20px;
}




	/* メイン動画 */
	
div.indexMainYoutubeBoxWrapper{
	color:#34322b;
	margin:40px 0 20px;
}

div.indexMainYoutubeBoxWrapper div.youtubeBox{
	text-align:center;
}

div.indexMainYoutubeBoxWrapper div.youtubeBox div.youtube{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

div.indexMainYoutubeBoxWrapper div.youtubeBox div.youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.indexMainYoutubeBoxWrapper div.youtubeBox div.caption{
	margin:30px 0 30px;
	font-size:24px;
}


	/* SNS */


.instagramBox{
	padding:10px 0 30px;
	color:#333333;
}

.instagramBox table{
	margin:14px auto;
	line-height:100% !important;
}

.instagramBox table th,
.instagramBox table td{
	vertical-align:middle;
}




.instagramBox dl dd ul{
	display: flex;
	flex-wrap: wrap;
	/*max-width: 600px;*/
}

.instagramBox dl dd ul li{
    background: #f4f4f4;
	display: block;
	position: relative;
	width:20%;
	aspect-ratio:4/5;
}

.instagramBox dl dd ul li::before {
  content: "";
  display: block;
  padding-top: 100%;
}


.instagramBox dl dd ul li img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: contain;
}

.instagramBox dl dd ul li video{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: contain;
}


.instagramBox dl dd ul li img:hover,
.instagramBox dl dd ul li video:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	transition:.3s;
}