@charset "utf-8";
/* CSS Document */
body{
    width: 100%;
    height: auto;
    margin: 0;
    font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    
}


.pc { display: block !important; }
.sp { display: none !important; }

a.btn:hover,
.btn a:hover{
    background-color: #fffece !important;
}


/*!!!!!!!!!!!パララックス！！！！！！！！！！！！！！！！！！*/

.parallax-window {
     min-height: 400px;
     background: transparent;
}

.parallax-slider {
     top: 0;
     left: 0;
    overflow: hidden
}
.para{
    background: #fff;
    position: sticky;
	position: -webkit-sticky; /* Safari */
    top: 7rem;
    text-align: center;
    display:block;
}

/*information*/
div.info{
    text-align: center;
    color: #ee0000;
    background-color: #eeeeee;
    padding: 5px 0;
    font-size: 18px;
    letter-spacing: 2px;
}
div.info a,
div.info a:link,
div.info a:visited{
    color: #ee0000;
}
/*!!!!!!!!!!!main！！！！！！！！！！！！！！！！！！*/

main{
   /*background-color: #f5f5f5;*/
     z-index: 1;
    transform:translate3d(0,0,0); /*ここを追記*/
}

.top{
    position: relative;
    max-height: 500px;
    overflow: hidden;
}

.sura_pc { 
    display: block !important;
    max-height: 100%;
}
.sura_sp { display: none !important; }


div.slide-show {
    width: 100%; /* スライドショーの幅 */
    max-width: 100%; /* スマホで表示が欠けないように */
     /* 中央揃え */
    position: relative;
    max-height: 500px;
}
 
.slide-show img { 
    animation: show 18s infinite; /* 12秒のスライドショーを繰り返し */
    width: 100%;
    height: auto;
    opacity: 0;
    position: absolute; /* 画像を重ねて表示 */
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}
 
@keyframes show {
    0% {opacity: 0}
    17% {opacity: 1}
    33% {opacity: 1}
    50% {opacity: 0}
}
 
.slide-show img:nth-of-type(1) {
    position: relative;
    animation-delay: 0s;
}
 
.slide-show img:nth-of-type(2) {
    animation-delay: 0s;
}
 
.slide-show img:nth-of-type(3) {
    animation-delay: 4s;
}
 
.slide-show img:nth-of-type(4) {
    animation-delay: 8s;
}
.slide-show img:nth-of-type(5) {
    animation-delay: 12s;
}

.main_1 {
    background-color: #f5f5f5;
    margin-top: -3%;
    padding-top: 8%;
}
.top h1{
      position: absolute;
      color: white;
      top: 30%;
      left: 5%;
      font-size: 40px;
      font-family: Georgia, serif;
    text-shadow: 0px 0px 2px #666666; 
}

.top_p{
    text-align: center;
}

.top_p p{
    color: #584d38;
    font-family: "Sawarabi Gothic";
	font-family: Georgia, serif;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.8em;
}
.zu{

    padding-bottom: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.zu img{
	width: 150px;
	margin: 0 40px;
	float: left;
	margin-top: 4%;
}




/*contents 共通***********************************/
.contents{
    text-align: center;
    clear: both;
    padding: 0 0 0px 0;
 }
.contents h2{
    width: 100%;
    text-align: center;
    padding-top: 10%;
    margin: 0 auto;
}

.contents h2 img{
    width: 160px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    margin-bottom: -100px;
}

.contents .read{
    display: flex;
    width:100%;
    padding:100px 0 50px ;
    font-family: "Sawarabi Gothic";
    text-align: center;
    background-color: #fff;
}
.contents .read.second{
    padding:0px 0 50px ;
}
.contents p{
    width:70%;
    max-width: 750px;
    margin: auto;
    line-height: 1.8em;
    text-align: left;
}


.backgroundcolor{
    background-color: #f5f5f5;
    padding: 0 0 0px 0;
   
}
.contents .btn{
    align-items: center;
    width:100%;
    overflow: hidden;
    background-color: #fff;
}
.contents .btn ul{
    clear: both;
    width: 100%;
    max-width: 1024px;
    text-align: center;
    display: block;
    margin: auto;
    padding-inline-start: 0;
    padding: 0 0 60px 0;
}

.contents .btn ul li{
    display: inline-block;
    width: 60%;
    margin: 0 2% 20px 2%;
}
.contents .btn ul li a,
.contents .btn ul li a:link,
.contents .btn ul li a:visited{
    display: block;
    border-radius: 12px;
    border:2px solid #68a4dd;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #ffffff;
    color: #68a4dd;
    text-decoration: none;
}



/*internet***************************/

.internet .btn ul li{
    width: 60%;
    margin: 0 2% 20px 2%
}
.internet .btn ul li a,
.internet .btn ul li a:link,
.internet .btn ul li a:visited{
    border:2px solid #68a4dd;
    color: #68a4dd;
}

/*denki***************************/
.denki .btn ul li{
    display: inline-block;
    width: 60%;
    margin: 0 2% 0px 2%
}
.denki .btn ul li a,
.denki .btn ul li a:link,
.denki .btn ul li a:visited{
    border:2px solid #ffaa5a;
    color: #ffaa5a;
}

/*water***************************/
.water .btn ul li{
    display: inline-block;
    width: 60%;
    margin: 0 2% 0px 2%
}
.water .btn ul li a,
.water .btn ul li a:link,
.water .btn ul li a:visited{
    border:2px solid #3caab7;
    color: #3caab7;
}

@media (max-width: 900px) {
    
    .slide-show img {
        width: 100%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .slide-show img:nth-of-type(1) {
            top: 0px;
        transform: translate(-50%);
    }
    
    

    
.top h1{
  top: 60%;
  left: 10px;
  font-size: 30px;
  font-family: Georgia, serif;
}

.top_p{
    width: 80%;
    margin: 0 auto;
}
   
.top_p p{
        font-size: 110%;
        line-height: 1.8em;
    }
	 .top_p p br{
		display: none;
	}
    
.zu{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.zu img{
	width: 100px;
	margin: 0 3%;
	float: left;
	margin-top: 7%;
    text-align: center;
}
    
    /*contents 共通***********************************/
    .contents p{
        width:80%;
    }
    .contents .btn ul li{
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 600px;
    }
    .contents .btn ul li a,
    .contents .btn ul li a:link,
    .contents .btn ul li a:visited{
        width: 100%;
        border-radius: 50px;
        margin: 0 auto 10px auto;
    }

}

@media (max-width: 600px) {
     .pc { display: none !important; }
    .sp { display: block !important; }

    .sura_pc { display: none !important; }
    .sura_sp { display: block !important; }
    
    /*information*/
    div.info{

        font-size: 14px;
        letter-spacing: 0px;
    }
        
    .top h1{
      left: 50%;
        top: 60%;
        transform: translate(-50%, 0%);
      font-size: 30px;
      font-family: Georgia, serif;
        width: 100%;
        text-align: center;
    }

	.top_p{
		width: 85%;
	}
	.top_p p{
		width: 100%;
	}
    .top_p p br{
		display: none;
	}
    
    .inter_btn{
        width: 90%;
        margin: 0 auto 0px;
        padding-right: 0px;
    }

         .inter_btn img{
        width: 100%;
    }

        .denki_btn img{
        width: 100%;

    } 
        .tell{
        float: none;
        padding:10% 0 10%;
    }

    .tell img{
        width: 80%;
    }
    
    /*contents 共通***********************************/
    .contents .read{
        padding:50px 0 50px ;
    }
    .contents .btn ul {
        width: 90%;
    }
    
    
}