@charset "utf-8";
/* CSS Document */

/*パララックス効果
-----------------------------------------------------*/
.fadeDone {
	opacity: 0;
}

/*SLIDE
-----------------------------------------------------*/
.wideslider {
	position: relative;
	top:110px;
	text-align:left;
	width: 100%;
	height: 500px;
	z-index:1;
	overflow:hidden;
}
.wideslider ul, .wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
}
.wideslider ul li img {
	width: 100%;
	display: none;
}
.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;
}
.slider_prev, .slider_next {
	top: 205px;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev:before, .slider_next:before {
	font-size:70px;
	color:#FFFFFF;
	position: absolute;
}
.slider_prev:before {
	font-family: FontAwesome;
	content:'\f104';
	right:10px;
}
.slider_next:before {
	font-family: FontAwesome;
	content:'\f105';
	left:10px;
}
.pagination {
	display:none;
}
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}
.wideslider ul {
	display: inline-block;
	overflow: hidden;
}
/*CONTENT
-----------------------------------------------------*/
#content h2.topContentTitle {
	font-size:28pt;
	font-weight:bold;
	text-align:center;
	line-height:100%;
	color: #34314C;
	margin-top:0.7em;
	margin-bottom:0.8em;
	letter-spacing:0.1em;
}
#content h2.topContentTitle span {
	display:block;
	font-size:13pt;
	font-weight:bold;
	color:#49A7E6;
}

#content h2.topContentTitle2 {
	font-size:22pt;
	font-weight:bold;
	text-align:center;
	line-height:100%;
	color: #34314C;
	margin-top:0.2em;
	margin-bottom:0.8em;
	letter-spacing:0em;
}
#content h2.topContentTitle2 span {
	padding-left:1.2em;
	vertical-align:middle;
	font-size:13pt;
	font-weight:bold;
	color:#49A7E6;
}

/*topHyosho
-----------------------------------------------------*/
#topHyosho{
	width:1100px;
	padding:40px 50px 20px 50px;
	box-sizing:border-box;
	margin:0 auto;
	background:#ffffff;
	box-shadow:0 0 15px #ccc;
	position: relative;
	top:-40px;
	z-index:1;
	margin-bottom:-40px;
	text-align:center;
	}
#topHyosho h3.title{
	color:#FF9966;
	font-size:1.4em;
	letter-spacing:0.1em;
	font-weight:bold;
	margin-bottom:20px;
	padding:0;
	}
#topHyosho p{
	font-size:1.05em;
	font-weight:bold;
	line-height:2em;
	}


/*introduction
-----------------------------------------------------*/
#introduction {
	position: relative;
	width: 100%;
	height:650px;
	overflow:hidden;
}
#intro {
	position: absolute;
	left:50%;
	margin-left:-640px;
	top: 0;
	padding: 0px;
	overflow:hidden;
}
.introduction {
	width:1280px;
	margin:0 auto;
	padding:80px 0 80px 60px;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	overflow:hidden;
}
dl.intro_image {
	width: 280px;
	height: 280px;
	transform: rotate(-45deg);
	border:6px solid #47AED6;
	padding:20px 0;
	margin-right:-60px;
	position:relative;
}
.intro_image:nth-of-type(2n) {
	margin-top:225px;
}
dl.intro_image a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
dl.intro_image:hover {
	background:	#47AED6 !important;
	transition-property: all;
	transition: 0.2s linear;
}
.intro_image:hover dt span {
	color:#FFFFFF;
}
.intro_image dt {
	background: transparent;
	transform: rotate(45deg);
	text-align:center;
	width:100%;
	position:absolute;
	left:0px;
	top:40px;
}
.introduction .intro_image:nth-child(1) {/*LPガス*/
	background:#F9E6EF;
}
.introduction .intro_image:nth-child(2) {/*水の宅配*/
	background:#EAF4FA;
}
.introduction .intro_image:nth-child(3) {/*メンテナンス*/
	background:#FFF8C1;
}
.introduction .intro_image:nth-child(4) {/*インターネット*/
	background:#FBEDD5;
}
.introduction .intro_image:nth-child(5) {/*リフォーム*/
	background:#DEECD2;
}
.intro_image dt span {
	color:#3F3F3F;
	text-align:center;
	padding-top:1em;
}
.introduction span.topCategoryTitle {
	font-weight:bold;
	font-size:1.2em;
}
/* information
-----------------------------------------------------*/
#information {
	background:url(../common/bg_imageblue.png) repeat;
	padding:60px 0;
}
.infoInner {
	width:1180px;
	margin:0 auto;
	padding:20px 40px;
	box-sizing:border-box;
	background:#FFFFFF;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.topVideoComment{
	float:left;
	width:50%;
	}
.videoArea {
	position:relative;
	float:right;
}
.videoArea::after {
	content: url(../top/bonbear_cm2.png);
	position:absolute;
	right:-68px;
	top:-115px;
}
/*in this case
-----------------------------------------------------*/
#case {
	width:100%;
	padding:60px 0 40px 0;
}
.case {
	padding:30px 0;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.case dl {
	margin:0 2% 2% 0;
	padding:15px;
	width:32%;
	box-sizing:border-box;
	background:#47AED6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	text-align:center;
	transition-property: all;
	transition: 0.3s linear;
	position:relative;
}
.case dl:nth-child(3n) {
	margin-right:0px;
}
.case figure {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	background:#FFFFFF;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.case dl:hover {
	opacity:0.7;
	cursor:pointer;
}
.case dd {
	width:100%;
	padding:10px 0 0 0;
}
.case dd.topCaseTitle {
	font-weight:normal;
	font-size:1.2em;
	text-align:center;
	color:#fff;
	line-height:120%;
	font-weight:bold;
	padding-bottom:18px;
}
.case dl::after {
	content:'';
	border-top: 10px solid #fff;
	border-right: 21px solid transparent;
	border-left: 21px solid transparent;
	position:absolute;
	bottom:10px;
	left:50%;
	margin-left:-21px;
}
/*other
-----------------------------------------------------*/
#other {
	width:100%;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.74, #ebedf1));
	background: -webkit-linear-gradient(top, #ebedf1 74%, #fff 100%);
	background: -moz-linear-gradient(top, #ebedf1 74%, #fff 100%);
	background: -o-linear-gradient(top, #ebedf1 74%, #fff 100%);
	background: -ms-linear-gradient(top, #ebedf1 74%, #fff 100%);
	background: linear-gradient(to bottom, #ebedf1 74%, #fff 100%);
	padding:60px 0;
	overflow:hidden;
}

.fbArea{
	float:left;
	width:500px;
	}
.fbBanner{
	display:none;
	}
.link{
	float:right;
	width:610px;
	letter-spacing:0;
	font-size:0;
	}
ul.linkBanner li {
	display:inline-block;
	width:300px;
	height:140px;
	margin:0 1px 1px 0;
	position:relative;
	font-size:13pt;
}
ul.linkBanner li img{
	width:100%;
	height:auto;
	}
ul.linkBanner li:nth-child(2n) {
	margin-right:0px;
}
ul.linkBanner li a {
	position:absolute;
	width:100%;
}
ul.linkBanner li span {
	width:100%;
	z-index:1;
	position:absolute;
    top: 50%;
    transform: translateY(-50%);
	text-align:center;
	font-size:1.3em;
	color:#FFFFFF;
	font-weight:bold;
	display:block;
    line-height: 120%;
}
/*外部リンク*/
.otherBannerArea {
	float:right;
	width:610px;
	text-align:center;
	padding-top:50px;
	padding-bottom:30px;
}
ul.otherlink li {
	display:inline-block;
	width:220px;
	height:68px;
	margin:0 7px 7px 0;
}
ul.linkBanner li a:hover, ul.otherlink li a:hover {
	opacity:0.7;
}





/* PC・タブレット横 960px～1280px */
@media screen and (max-width:1280px) {
/*SLIDE
-----------------------------------------------------*/
.wideslider {
	top:155px;
	margin-bottom:0;
	height:auto;
}
/*CONTENT
-----------------------------------------------------*/
#content {
	position: relative;
}
/*introduction
-----------------------------------------------------*/
#introduction {
	position: relative;
	top:0;
	width: 100%;
	height:240px;
	overflow:hidden;
}
#intro {
	position: absolute;
	top: 0px;
	margin-left:0;
	left:0;
	width: 100%;
	overflow:hidden;
}
.introduction {
	width: 100%;
	padding:0;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	overflow:hidden;
}
dl.intro_image {
	width: 20%;
	height:240px;
	overflow:hidden;
	transform: rotate(0);
	padding:0;
	margin-right:0px;
	border:none;
}
dl.intro_image a {
	height:100%;
}
.intro_image:nth-of-type(2n) {
	margin-top:0;
}
dl.intro_image dt img {
	width:85%;
}
.intro_image dt {
	transform: rotate(0);
}
.intro_image dt span {
	padding-top:1em;
}
/* information
-----------------------------------------------------*/
#information {
	padding:40px 0;
}
.infoInner {
	width:96%;
	margin:0 auto;
	padding:20px;
}
.videoArea {
	width:45%;
}
.videoArea video {
	width:100%;
	height:auto;
}
.videoArea::after {
	display:none;
}
/*in this case
-----------------------------------------------------*/
#case {
	padding:30px 0 0 0;
}
.case {
	width:98%;
	margin:0 auto;
	padding:20px 0 0 0;
}
/*other
-----------------------------------------------------*/
.link{
	width:calc(100% - 500px - 30px);
	}
ul.linkBanner li {
	width:49%;
	height:120px;
	margin:0 2px 2px 0;
	font-size:13pt;
}
ul.linkBanner li span {
	font-size:1.1em;
}
/*外部リンク*/
.otherBannerArea {
	width:calc(100% - 500px - 30px);
}

/*topHyosho
-----------------------------------------------------*/
#topHyosho{
	width:100%;
	box-shadow:none;
	top:0px;
	margin-bottom:0;
	}

}


/* タブレット縦　600px～959px */
@media only screen and (max-width:959px) {
/*SLIDE
-----------------------------------------------------*/
.wideslider {
	top:50px;
	margin-bottom:50px;
	height:auto;
}
/*CONTENT
-----------------------------------------------------*/
#content {
	top:0px;
	padding-bottom:0px;
}
/*introduction
-----------------------------------------------------*/
#introduction, dl.intro_image {
	height:180px;
}
.introduction span.topCategoryTitle {
	font-size:1em;
}
.intro_image dt {
	top:20px;
}
/* information
-----------------------------------------------------*/
#information {
	padding:20px 0;
}
.infoInner {
	padding:10px;
}
/*in this case
-----------------------------------------------------*/
#case {
	padding:10px 0 0 0;
}
.case {
	padding:0px 0 0 0;
}
.case dl {
	padding:8px;
}
.case dl:hover {
	opacity:0.7;
	cursor:pointer;
}
.case dt img {
	width:78%;
}
.case dd {
	padding:8px 0 0 0;
}
.case dd.topCaseTitle {
	font-size:1em;
}
/*other
-----------------------------------------------------*/
.fbArea{
	float:none;
	margin:0 auto;
	}
.link{
	float:none;
	width:auto;
	margin:30px auto;
	}
ul.linkBanner{
	max-width:620px;
	margin:0 auto;	
	}
ul.linkBanner li {
	display:inline-block;
	width:300px;
	height:140px;
	margin:5px;
}
ul.linkBanner li span {

	font-size:1.3em;
}
/*外部リンク*/
.otherBannerArea {
	float:none;
	width:100%;
	padding-bottom:0px;
}
ul.otherlink li {
	width:24%;
	height:auto;
	margin:0 2px 2px 0;
}
ul.otherlink li img{
	width:100%;
	}

/*topHyosho
-----------------------------------------------------*/
#topHyosho{
	padding:20px 10px 0 10px ;
	}
#topHyosho p{
	font-size:.9em;
	line-height:1.5em;
	}

}


/* スマホ 599px以下 */
@media only screen and (max-width:599px) {
#content h2.topContentTitle {
	font-size:20pt;
}
#content h2.topContentTitle span {
	font-size:11pt;
}	
	
/*SLIDE
-----------------------------------------------------*/
.wideslider {
	top:80px;
	background:#00FF00;
}
/*introduction
-----------------------------------------------------*/
#introduction {
	top:20px;
	margin-bottom:20px;
	height:auto;
}
#intro {
	position: static;
	width: 100%;
	overflow:hidden;
}
dl.intro_image {
	width:calc(100% / 3);
	height:155px;
}
dl.intro_image:nth-child(4),dl.intro_image:nth-child(5){
	width:50%;
	}
.intro_image dt span .sp{
	display:none;
	}

/* information
-----------------------------------------------------*/
.infoInner {
	width:94%;
	padding:10px;
}
.topVideoComment{
	float:left;
	width:100%;
	}
.videoArea {
	width:100%;
}

/*in this case
-----------------------------------------------------*/
#case {
	width:100%;
	padding:20px 0;
}
.case {
	padding:30px 0;
	display: block;
	flex-wrap:nowrap;
}
.case dl {
	margin:0 auto 10px auto;
	padding:7px;
	width:100%;
	box-sizing:border-box;
}
.case dl:nth-child(3n) {
	margin-right:auto;
}
.case dd {
	padding:7px 0 0 0;
}
.case dd.topCaseTitle {
	font-size:1.2em;
	padding-bottom:0px;
}
.case dl::after {
	display:none;
}

/*other
-----------------------------------------------------*/
#other {
	padding:20px 0;
}
#other h2.topContentTitle{
	display:none;
	}
ul.linkBanner li {
	width:48.5%;
	height:80px;
	margin:0 .7% 15px 0;
	position: relative;
}
ul.linkBanner li:nth-child(2n){
	margin-right:0px;
	}
ul.linkBanner li span {
	position:absolute;
	font-weight:normal;
	font-size:.85em;
}
.fbArea{
	display:none;
	}
.fbBanner{
	display:block;
	background:#3B5998;
	font-size:1;
	width:60%;
	margin:0 auto;
	text-align:center;
	}
.fbBanner i{
	padding-right:1em;
	}
.fbBanner a{
	color:#FFFFFF;
	display:block;
	width:100%;
	padding:.4em;
	}


/*外部リンク*/
.otherBannerArea {
	padding:20px 0;
	display:block;
	overflow:hidden;
}
ul.otherlink li {
	width:45%;
}

/*topHyosho
-----------------------------------------------------*/
#topHyosho{
	text-align:left;
	}


}