@charset "utf-8";

/*=====================================================================================
	
	Document    : top-s.css
	Description : スマホ用（幅640px以下）
 
=====================================================================================*/

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

   opening

---------------------------------------------------------------------------*/
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}
body{height: 100%; overflow:visible;}

#wp-opening {
	display:none;
}


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

   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 slider

---------------------------------------------------------------------------*/
.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;
  }
}

/*
.slide div img.pc{
  display: none;
}
*/

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

.slide div.slide-item{
    z-index:10;
    opacity: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-animation: anime 54s 0s infinite;
    animation: anime 54s 0s infinite;
}

.slide div.slide-item.slide01{
	background-image: url("../image/top/main-slide-sp/p39.jpg");
	-webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.slide div.slide-item.slide02{
	background-image: url("../image/top/main-slide-sp/p40.jpg");
	-webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.slide div.slide-item.slide03{
	background-image: url("../image/top/main-slide-sp/p19.jpg");
	-webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slide div.slide-item.slide04{
	background-image: url("../image/top/main-slide-sp/p41.jpg");
	-webkit-animation-delay: 9s;
    animation-delay: 9s;
}
.slide div.slide-item.slide05{
	background-image: url("../image/top/main-slide-sp/p42.jpg");
	-webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slide div.slide-item.slide06{
	background-image: url("../image/top/main-slide-sp/p12.jpg");
	-webkit-animation-delay: 15s;
    animation-delay: 15s;
}
.slide div.slide-item.slide07{
	background-image: url("../image/top/main-slide-sp/p11.jpg");
	-webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.slide div.slide-item.slide08{
	background-image: url("../image/top/main-slide-sp/p43.jpg");
	-webkit-animation-delay: 21s;
    animation-delay: 21s;
}
.slide div.slide-item.slide09{
	background-image: url("../image/top/main-slide-sp/p38.jpg");
	-webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.slide div.slide-item.slide10{
	background-image: url("../image/top/main-slide-sp/p44.jpg");
	-webkit-animation-delay: 27s;
    animation-delay: 27s;
}
.slide div.slide-item.slide11{
	background-image: url("../image/top/main-slide-sp/p36.jpg");
	-webkit-animation-delay: 30s;
    animation-delay: 30s;
}
.slide div.slide-item.slide12{
	background-image: url("../image/top/main-slide-sp/p37.jpg");
	-webkit-animation-delay: 33s;
    animation-delay: 33s;
}
.slide div.slide-item.slide13{
	background-image: url("../image/top/main-slide-sp/p35.jpg");
	-webkit-animation-delay: 36s;
    animation-delay: 36s;
}
.slide div.slide-item.slide14{
	background-image: url("../image/top/main-slide-sp/p31.jpg");
	-webkit-animation-delay: 39s;
    animation-delay: 39s;
}
.slide div.slide-item.slide15{
	background-image: url("../image/top/main-slide-sp/p45.jpg");
	-webkit-animation-delay: 42s;
    animation-delay: 42s;
}
.slide div.slide-item.slide16{
	background-image: url("../image/top/main-slide-sp/p46.jpg");
	-webkit-animation-delay: 45s;
    animation-delay: 45s;
}
.slide div.slide-item.slide17{
	background-image: url("../image/top/main-slide-sp/p47.jpg");
	-webkit-animation-delay: 48s;
    animation-delay: 48s;
}
.slide div.slide-item.slide18{
	background-image: url("../image/top/main-slide-sp/p48.jpg");
	-webkit-animation-delay: 51s;
    animation-delay: 51s;
}


@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:9;
    }
    100% { opacity: 0 }
}
/*-------------------------------------------------------
   ボタン
-------------------------------------------------------*/

/*
@media screen and (max-width:420px) {
	.main-slide-wp a.slide-bt {
		width:20px;
		height:50px;
		margin-top:-25px;
	}
		
	.main-slide-wp a.slide-bt span {
		height:50px;
	}
}
*/

@media screen and (max-width:640px) {
	.main-slide-wp a.slide-bt {
		display: none;
	}
		
	.main-slide-wp a.slide-bt span {
		display: none;
	}
}


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

   1-3. Contents

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

.scroll-nav {
  display: none;
}

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

@media screen and (max-width:420px) {
	.ct .block {
		padding-top:7%;
		padding-bottom:7.5%;
	}
}

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

   お知らせ

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

@media screen and (max-width:420px) {
	.info .md {
		padding-top:40px;
	}
	
	.info dt {
		width:inherit;
		float:none;
		margin-right:0;
		padding-top:10px;
	}
	
	.info dd {
		padding-left:0;
		padding-top:0;
	}
}


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

   施工例

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

@media screen and (max-width:420px) {
	.works .md {
		padding-top:43px;
		background-size:auto 33%;
	}
}


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

   家の性能

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

.quality-wp .chart {
	width:100%;
}
		
@media screen and (max-width:420px) {
	.quality .md {
		padding-top:46px;
		background-size:auto 35%;
	}

	.quality-wp .chart {
		display:none;
	}
}


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

@media screen and (max-width:420px) {
	.chartdata {
		width:100%;
		display:block;
	}
	
	.chartdata table {
		border-collapse:collapse;
		width:100%;
	}
	
	.chartdata th,
	.chartdata td {
		padding:10px;
		vertical-align:middle;
	}
	
	.chartdata th {
		background:url(../image/bg-black25.png) repeat center top;
		border-left:1px solid #aaa;
		border-right:1px solid #aaa;
		color:#fff;
	}
	
	.chartdata tr th:first-child {
		border-right-color:rgba(255,255,255,0.5);
	}
	.chartdata tr th:last-child {
		border-left-color:rgba(255,255,255,0.5);
	}
	
	.chartdata td {
		background-color:#fff;
		border:1px solid #c3c3c3;
	}
	
	.chartdata tr:nth-child(2) td {
		border-top:0;
	}
	
	.chartdata th,
	.chartdata tr td:last-child {
		text-align:center !important;
	}
	
	.chartdata tr td:last-child {
		white-space:nowrap;
	}
}


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

.quality-bt-sp .hbt {
	width:100%;
}


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

   スペシャル

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

@media screen and (max-width:420px) {
	.special .md {
		padding-top:41px;
	}
	
	.special ul {
		margin-bottom:-5%;
	}
	
	.special li {
		width:100%;
		float:none;
		margin-left:0 !important;
		margin-right:0 !important;
		margin-bottom:5%;
	}
}

.special li .special-box >.hbt {
	width:92%;
}


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

   アフターサービス

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

@media screen and (max-width:420px) {
	.after .md {
		padding-top:47px;
		background-size:auto 35%;
	}
}

.after p {
	padding-top:5%;
}

@media screen and (max-width:420px) {
	.after p {
		padding-top:7%;
	}
}


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

.after-s {
	padding-top:5%;
}

@media screen and (max-width:420px) {
	.after-s {
		padding-top:7%;
	}
}


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

.after-bt {
	padding-top:5%;
}

@media screen and (max-width:420px) {
	.after-bt {
		padding-top:7%;
	}
}
	
.after-bt li {
	width:100%;
	float:none;
	margin-left:0 !important;
	margin-right:0 !important;
}

.after-bt li:last-child {
	margin-top:1em;
}


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

   ピックアップ

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

@media screen and (max-width:420px) {
	.pickup .md {
		padding-top:41px;
	}
	
	.pickup ul {
		margin-bottom:-5%;
	}
	
	.pickup li {
		width:100%;
		float:none;
		margin-left:0 !important;
		margin-right:0 !important;
		margin-bottom:5%;
	}
}

.pickup li .pickup-box >.hbt {
	width:92%;
}