@charset "utf-8";

/*=====================================================================================
	
	Document    : top.css
	Description : PC用（幅900px以上）
 
=====================================================================================*/

/*---------------------------------------------------------------------------

   Header

---------------------------------------------------------------------------*/

@media screen and (max-width:1060px) {
	header {
		padding:0 3%;
	}
}

.hd {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding:45px 0;
	position:relative;
}

@media screen and (max-width:800px) {
	header {
		padding:0;
	}
	
	.hd {
		display:none;
	}
	
	.hd-sp {
		display:inherit;
	}
}


/*-------------------------------------------------------
   logo
-------------------------------------------------------*/

@media screen and (max-width:1060px) {
	.hd h1 {
		padding-right:40%;
	}
}


/*-------------------------------------------------------
   nav
-------------------------------------------------------*/

.hd ul {
	position:absolute;
	right:0;
	top:20px;
	list-style:none;
}

@media screen and (max-width:800px) {
	.hd ul {
		display:none;
	}
}

.hd li {
	float:left;
	margin-left:0.8em;
	padding-left:0.8em;
	border-left:1px solid #e1e1e1;
	line-height:0;
}

.hd li:first-child {
	border-left:none;
}

.hd li a {
	text-decoration:none;
}

.hd li .hover-tx-on a,
.hd li .hover-tx-on a:hover {
	color:#7ab9d8 !important;
}


/*-------------------------------------------------------
   SNS
-------------------------------------------------------*/
.hd > .sns-icon {
  position: absolute;
  top: 56px;
  right: 136px;
}

.hd > .sns-icon a {
  display: inline-block;
  margin-right: 0;
  width: 48px;
}
.hd > .sns-icon a img {
  width: 100%;
  height: auto;
}


/*-------------------------------------------------------
   JOYCOS
-------------------------------------------------------*/

.hd > .joycos_banner {
	display: block;
	position:absolute;
	right:0;
	top:56px;
}

.hd > .joycos_banner img {
	width: 126px;
	height: auto;
}


/*-------------------------------------------------------
   YUTA CAFFE
-------------------------------------------------------*/

.hd > .yutacaffe {
	position:absolute;
	right:0;
	bottom:28px;
	text-align:left;
	font-weight:bold;
}

@media screen and (max-width:800px) {
	.hd > .yutacaffe {
		display:none;
	}
}

.hd > .yutacaffe a {
	display:block;
	text-decoration:none;
	background:url(../image/hd/yutacaffe-ic.gif) no-repeat left top;
	padding-left:35px;
}

.yutacaffe-tx {
	float:left;
}

.yutacaffe-tx .vol {
	margin-top:4px;
}

.yutacaffe-tx .hoverbox-tx {
	font-family:"Times New Roman", Times, serif;
}

.yutacaffe-tx .hoverbox-tx-on {
	color:#deb36b;
}

.yutacaffe .yutacaffe-new {
	width:48px;
	height:38px;
	float:right;
	margin-top:-5px;
	position:relative;
}

.yutacaffe .yutacaffe-new img {
	position:absolute;
	right:0;
	top:0;
}

/*---------------------------------------------------------------------------

   main-video

---------------------------------------------------------------------------*/

.main-video {
  position: relative;
  width: 100%;
}
.main-video:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.main-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-video-linkbtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .75em 0;
  background-color: #5a5a5a;
  color: #fff;
  font-size: 200%;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 3pt;
  transition: .3s;
  border-bottom: 4px solid #444444;
  margin-top: -3px;
}
.main-video-linkbtn a:hover {
  margin-top: 0;
  border-bottom: 1px solid #7ab9d8;
  background-color: #7ab9d8;
}

.main-video-linkbtn a .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.25em;
  padding-left: .1em;
  background-color: #5a5a5a;
  border-radius: .2em;
  box-sizing: border-box;
  margin-left: .5em;
  border: 1px solid #fff;
  transition: .3s;
}
.main-video-linkbtn a:hover .icon {
  background-color: #7ab9d8;
}

.main-video-linkbtn a .triangle {
  background-color: white;
  width: .85em;
  height: .7em;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

@media (max-width:500px) {
  .main-video-linkbtn a {
    font-size: 150%;
  }
}


/*---------------------------------------------------------------------------

   main slider

---------------------------------------------------------------------------*/

.main-slide-wp {
	width:100%;
	height:500px;
	overflow:hidden;
	position:relative;
}

.main-slide {
	list-style:none;
	width:2000px;
	position:absolute;
	left:50%;
	top:0;
	margin-left:-1000px;
}

@media screen and (max-width:1200px) {
	.main-slide-wp {
		height:0;
		padding-top:40%;
	}

	.main-slide {
		max-width:160%;
		margin-left:-80%;
	}
}

@media screen and (max-width:800px) {
	.main-slide-wp {
		padding-top:50%;
	}

	.main-slide {
		width:100%;
		left:0;
		margin-left:0;
	}
}


/*-------------------------------------------------------
   I'm Live
-------------------------------------------------------*/

.main-slide-wp .ch {
	width:380px;
	height:0;
	padding-top:280px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-190px;
	margin-top:-140px;
	z-index:99;
	background:url(../image/top/main-slide/ch.png) no-repeat center center;
}

@media screen and (max-width:1060px) {
	.main-slide-wp .ch {
		width:35.84905%;
		padding-top:26.41509%;
		margin-left:-17.924525%;
		margin-top:-13.207545%;
		background-size:cover;
	}
}

@media screen and (max-width:800px) {
	.main-slide-wp .ch {
		display:none;
	}
}

.main-slide-wp .ch h2,
.main-slide-wp .ch p {
	position:absolute;
	overflow:hidden;
	width:0;
	height:0;
}


/*-------------------------------------------------------
   ボタン
-------------------------------------------------------*/

.main-slide-wp a.slide-bt {
	text-align:center;
	width:40px;
	height:100px;
	margin-top:-50px;
	position:absolute;
	top:50%;
	color:#fff;
	display:block;
	z-index:99;
	text-decoration:none !important;
	background:url(../image/bg-black-op50.png) repeat left top;
}

.main-slide-wp a.slide-bt:hover {
	background-color:#3c3c3c;
}

.main-slide-wp a.slide-bt span {
	display:block;
	height:100px;
	font-size:0;
	line-height:0;
}

.main-slide-wp .next {
	right:0;
}
.main-slide-wp .next span {
	background:url(../image/top/main-slide/next.png) no-repeat center center;
	background-size:contain;
}

.main-slide-wp .prev {
	left:0;
}
.main-slide-wp .prev span {
	background:url(../image/top/main-slide/prev.png) no-repeat center center;
	background-size:contain;
}

@media screen and (max-width:800px) {
	.main-slide-wp a.slide-bt {
		width:30px;
		height:70px;
		margin-top:-35px;
	}
	
	.main-slide-wp a.slide-bt span {
		height:70px;
	}
}


/*---------------------------------------------------------------------------

   contents

---------------------------------------------------------------------------*/

/*-------------------------------------------------------
   各ブロック
-------------------------------------------------------*/

.ct .block {
	padding-top:40px;
	padding-bottom:45px;
	max-width:100%;
}

.ct .block:last-child {
	padding-bottom:50px;
}

@media screen and (max-width:800px) {
	.ct .block {
		padding-top:6%;
		padding-bottom:6.5%;
	}

	.ct .block:last-child {
		padding-bottom:7%;
	}
}


/*---------------------------------------------------------------------------

   お知らせ・ブログ

---------------------------------------------------------------------------*/

.inner {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

/* お知らせ */
.info {
	width:48.5%;
	float:left;
}

.info .md {
	background:url(../image/md-ic/info.png) no-repeat center top;
	padding-top:55px;
}

.info h3 {
	background:url(../image/bg-black25.png) repeat center top;
	color:#fff;
	padding:10px;
	text-align:center;
}

.info dt {
	width:9em;
	float:left;
	clear:both;
	margin-right:-9em;
	padding-top:5px;
	text-align: left;
}

.info dd {
	padding-left:9em;
	padding-top:5px;
	text-align: left;
}

.info dd a:hover {
	color:#a0a0a0 !important;
}

/* ブログ */
.blog {
	width:48.5%;
	float:right;
}

.blog .md {
	background:url("../image/md-ic/blog.png") no-repeat center top;
	padding-top:55px;
}

.blog h3 {
	background:url(../image/bg-black25.png) repeat center top;
	color:#fff;
	padding:10px;
	text-align:center;
}

.blog ul {
	overflow: hidden;
	list-style: none;
	width: 100%;
	margin-top: 20px;
}

.blog li {
	float: left;
	width: calc(33.3% - 8px);
	margin-right: 12px;
	box-sizing: border-box;
	text-align: left;
}
.blog li:nth-child(3n) {
	margin-right: 0;
}
.blog li a {
	text-decoration: none;
}
.blog li .pie {
    position: relative;
    width: 100%;
}
.blog li .pie:before {
    content:"";
    display: block;
    padding-top: 75%;
}
.blog li .pie img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	object-fit: cover;
}
.blog li p {
	margin-top: 0.5em;
}
.blog li .new-tx {
	background-color: #7ab9d8;
	color: #fff;
	padding: 0.25em 0.5em;
}

@media screen and (max-width:1060px) {
	.info,
	.blog {
		width:100%;
		max-width: 700px;
		float:none;
		margin-left: auto;
		margin-right: auto;
	}
	
	.blog {
		padding-top:5%;
	}
}


/*---------------------------------------------------------------------------

   施工例

---------------------------------------------------------------------------*/

.works {
	background:url(../image/bg-black5.png) repeat center top;
	position:relative;
}

.works-cut {
	width:100%;
	height:640px;
	background:url(../image/top/works-cut.png) no-repeat center top;
	position:absolute;
	left:0;
	top:-45px;
}

@media screen and (max-width:1060px) {
	.works {
		padding-left:2%;
		padding-right:2%;
	}
}

.works .md {
	background:url(../image/md-ic/works.png) no-repeat center top;
	padding-top:58px;
	position:relative;
}


/*-------------------------------------------------------
   スライド
-------------------------------------------------------*/

.works > .slide {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

@media screen and (max-width:1080px) {
	.works > .slide {
		overflow:hidden;
		padding-left:4px;
		padding-right:4px;
	}
}

.works > .slide > div {
	overflow:visible;
}

.works > .slide > div:hover {
	z-index:2;
}

.works > .slide > div p {
	display:block;
	margin-left:4%;
	margin-right:4%;
	text-align:center;
	background-color:#fff;
}

.works > .slide p.selected {
	box-shadow:4px 4px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:4px 4px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:4px 4px 0 rgba(0,0,0,0.1);
}

.works > .slide > div p a {
	display:block;
	padding:10px 10px 15px 10px;
	text-decoration:none !important;
}

.works > .slide > div p img {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}


/*---------------------------------------------------------------------------

   家の性能

---------------------------------------------------------------------------*/

.quality {
	background:url(../image/top/quality-bg.png) no-repeat center center;
}

@media screen and (max-width:1060px) {
	.quality {
		padding-left:3%;
		padding-right:3%;
	}
}

.quality .md {
	background:url(../image/md-ic/quality.png) no-repeat center top;
	padding-top:63px;
}

.quality-wp {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	overflow:hidden;
}

.quality-wp p:first-child {
	padding-bottom:1em;
}

.quality-wp > .qualityC {
	width:45%;
	float:left;
}

.quality-wp .chart {
	width:55%;
	float:right;
	text-align:right;
	/*margin-right:-3.5%;*/
}

.quality-wp .chart img {
	max-width:90%;
}

@media screen and (max-width:1060px) {
	.quality-wp > .qualityC p:first-child br {
		display:none;
	}
}

@media screen and (max-width:900px) {
	.quality {
		background:none;
	}
	
	.quality-wp > .qualityC,
	.quality-wp .chart {
		float:none;
		width:inherit;
	}
	
	.quality-wp .chart {
		width:80%;
		padding-top:6%;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
}


/*-------------------------------------------------------
   表
-------------------------------------------------------*/

.chartdata {
	display:none;
}


/*-------------------------------------------------------
   ボタン
-------------------------------------------------------*/

.quality-bt-pc {
	display:inherit;
	padding-top:2em;
}

.quality-bt-pc .hbt a {
	margin:0 35px;
}

.quality-bt-sp {
	display:none;
}

@media screen and (max-width:900px) {
	.quality-bt-pc {
		display:none;
	}
	
	.quality-bt-sp {
		display:inherit;
		text-align:center;
	}
	
	.quality-bt-sp .hbt {
		width:80%;
	}
}


/*---------------------------------------------------------------------------

   ピックアップ

---------------------------------------------------------------------------*/

.special {
	background:url(../image/bg-black5.png) repeat center top;
}
@media screen and (max-width:1060px) {
	.special {
		padding-left:3%;
		padding-right:3%;
	}
}

.special .md {
	background:url("../image/md-ic/star.png") no-repeat center top;
	padding-top:56px;
}

.special .special-item {
  display: flex;
  gap: 24px;
	max-width:840px;
  margin: 0 auto;
}

.special .special-photo {
  width: calc(50% - 12px);
}
.special .special-photo img {
  width: 100%;
  height: auto;
}

.special .special-description {
  width: calc(50% - 12px);
  text-align: left;
}
.special .special-description ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  font-weight: 500;
}
.special .special-description ul li::before {
  content: "・";
}
.special .special-bt {
  margin-top: 1em;
}

@media screen and (max-width:740px) {
	.special .special-item {
    flex-wrap: wrap;
  }

  .special .special-photo {
    width: 100%;
  }

  .special .special-description {
    width: 100%;
  }
}

@media screen and (max-width:640px) {
  .special .special-description .special-bt,
  .special .special-description .hbt {
    width: 100%;
    text-align: center;
  }
}




/*---------------------------------------------------------------------------

   アフターサービス

---------------------------------------------------------------------------*/

.after {
	background:url(../image/top/after-bg.png) repeat-x center top;
	position:relative;
}

@media screen and (max-width:1060px) {
	.after {
		padding-left:3%;
		padding-right:3%;
	}
}

.after-cut {
	width:100%;
	height:232px;
	background:url(../image/top/after-cut.png) no-repeat center top;
	position:absolute;
	left:0;
	bottom:0;
	z-index:0;
}

.after .md {
	background:url(../image/md-ic/after-w.png) no-repeat center top;
	padding-top:62px;
	position:relative;
}

.after .md span {
	color:rgba(255,255,255,0.6);
	padding-left:1em;
}

.after-wp {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

.after ul {
	list-style:none;
}

.after p {
	padding-top:40px;
}

@media screen and (max-width:800px) {
	.after p {
		padding-top:30px;
	}
}


/*-------------------------------------------------------
   JIO + 定期アフター 品質保証
-------------------------------------------------------*/

.after-s li {
	width:20%;
	position:absolute;
	top:-60%;
}

.after-s li:first-child {
	left:5%;
}

.after-s li:last-child {
	right:5%;
}

@media screen and (max-width:1060px) {
	.after-s li:first-child {
		left:2%;
	}
	
	.after-s li:last-child {
		right:2%;
	}
}

@media screen and (max-width:800px) {
	.after-s {
		padding-top:30px;
	}
	
	.after-s li {
		width:42%;
		position:inherit;
		top:inherit;
		left:inherit;
		right:inherit;
	
		display:-moz-inline-box;
		display:inline-block;
		/display:inline;
		/zoom:1;
	}

	.after-s li:first-child {
		margin-right:4%;
		text-align:right;
	}
	
	.after-s li:last-child {
		margin-left:4%;
		text-align:left;
	}
}


/*-------------------------------------------------------
   ボタン
-------------------------------------------------------*/

.after-bt {
	padding-top:50px;
}
	
@media screen and (max-width:800px) {
	.after-bt {
		padding-top:30px;
	}
}

.after-bt li {
	width:36.5%;
	float:left;
}

.after-bt li:first-child {
	margin-right:1.5%;
	margin-left:12%;
}
.after-bt li:last-child {
	margin-right:12%;
	margin-left:1.5%;
}

@media screen and (max-width:960px) {
	.after-bt li {
		width:48.5%;
		float:left;
	}
	
	.after-bt li:first-child {
		margin-left:0;
	}
	.after-bt li:last-child {
		margin-right:0;
	}
}

.after-bt li > .hbt {
	width:100%;
}

.after-bt li:hover a {
	color:#fff !important;
}



/*---------------------------------------------------------------------------

   リフォーム

---------------------------------------------------------------------------*/

.reform {
	background:url(../image/bg-black5.png) repeat center top;
	position:relative;
}

.reform .reform-wrap {
  display: flex;
  flex-wrap: wrap;
}

.reform .reform-wrap .image {
  width: 50%;
  height: 400px;
  background: url("../image/top/reform-img.jpg") no-repeat center;
}

.reform .reform-wrap .description {
  width: 50%;
  text-align: center;
  padding: 40px 40px 45px;
  box-sizing: border-box;
}
.reform .reform-wrap .description .md {
	background:url("../image/md-ic/reform.png") no-repeat center top;
	padding-top:60px;
	position:relative;
}
.reform .reform-wrap .description .md h3 {
	font-family:"Times New Roman", Times, serif;
	padding-bottom:5px;
}
.reform .reform-wrap .description .hbt {
  margin-top: 20px;
}

@media screen and (max-width:800px) {
  .reform .reform-wrap .image {
    width: 100%;
  }

  .reform .reform-wrap .description {
    width: 100%;
  }
}



/*---------------------------------------------------------------------------

   ピックアップ

---------------------------------------------------------------------------*/

@media screen and (max-width:1060px) {
	.pickup {
		padding-left:3%;
		padding-right:3%;
	}
}

.pickup .md {
	background:url(../image/md-ic/pickup.png) no-repeat center top;
	padding-top:56px;
}

.pickup ul {
	list-style:none;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

.pickup li {
	/*width:32.2%;*/
	background-color:#fff;
	/*float:left;*/
	margin-bottom:10px;
	
	width:322px;
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom:1;
	margin-left:8.5px;
	margin-right:8.5px;
}

/*
.pickup li:nth-child(2) {
	margin-left:1.7%;
	margin-right:1.7%;
}
*/

.pickup li .pickup-box {
	padding:10px 10px 20px 10px;
}

.pickup li .pickup-box p {
	padding:15px 5px;
}

@media screen and (max-width:1060px) {
	.pickup li p br {
		display:none;
	}
}

@media screen and (max-width:800px) {
	.pickup ul {
		margin-bottom:-3%;
	}
	
	.pickup li {
		width:48.5%;
		margin-bottom:3%;
	}
	
	.pickup li:nth-child(1n) {
		margin-right:0.75%;
		margin-left:0;
	}

	.pickup li:nth-child(2n) {
		margin-left:0.75%;
		margin-right:0;
	}
	
	/*
	.pickup li:nth-child(2n) {
		margin-left:3%;
		margin-right:0;
	}
	*/
}

.main-slide .slick-list,
.main-slide .slick-track { width:100%; height:100%; }

.slide div.slide-item{
  /*padding-top: 500px;*/
  background-position: center;
  background-repeat: no-repeat;
	background-size: cover;
}
.ct {
  height:100%;
  overflow: hidden;
}
.main-slide {
  height:100%;
}
.slide {
  height:100%;
}

@media screen and (max-width:800px) {
  .main-slide-wp {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
  }
}
@media screen and (min-width:641px) {    
    .slide div.slide-item.slide01{ background-image: url("../image/top/main-slide/p39.jpg"); }
    .slide div.slide-item.slide02{ background-image: url("../image/top/main-slide/p40.jpg"); }
    .slide div.slide-item.slide03{ background-image: url("../image/top/main-slide/p19.jpg"); }
    .slide div.slide-item.slide04{ background-image: url("../image/top/main-slide/p41.jpg"); }
    .slide div.slide-item.slide05{ background-image: url("../image/top/main-slide/p42.jpg"); }
    .slide div.slide-item.slide06{ background-image: url("../image/top/main-slide/p12.jpg"); }
    .slide div.slide-item.slide07{ background-image: url("../image/top/main-slide/p11.jpg"); }
    .slide div.slide-item.slide08{ background-image: url("../image/top/main-slide/p43.jpg"); }
    .slide div.slide-item.slide09{ background-image: url("../image/top/main-slide/p38.jpg"); }
    .slide div.slide-item.slide10{ background-image: url("../image/top/main-slide/p44.jpg"); }
    .slide div.slide-item.slide11{ background-image: url("../image/top/main-slide/p36.jpg"); }
    .slide div.slide-item.slide12{ background-image: url("../image/top/main-slide/p37.jpg"); }
	  .slide div.slide-item.slide13{ background-image: url("../image/top/main-slide/p35.jpg"); }
    .slide div.slide-item.slide14{ background-image: url("../image/top/main-slide/p31.jpg"); }
    .slide div.slide-item.slide15{ background-image: url("../image/top/main-slide/p45.jpg"); }
    .slide div.slide-item.slide16{ background-image: url("../image/top/main-slide/p46.jpg"); }
    .slide div.slide-item.slide17{ background-image: url("../image/top/main-slide/p47.jpg"); }
    .slide div.slide-item.slide18{ background-image: url("../image/top/main-slide/p48.jpg"); }
}