body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	 color: #666;
}

p{
    font-size: 1em;
    line-height: 1.8em;
    text-align: left;

}

@media screen and (max-width: 750px) {
    .br-sp { 
		display:none; }
}
@media screen and (min-width: 750px) {
    .br-pc { 
		display:none; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



#container{
	margin: 75px 0 0 0;
}



#left-box {
	position: fixed;
	display: block;
	left: 0px;
	top:0;
    width: 12%;
	height:100%;
    background-image: url("../img/kk-tate001.png");
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left 20px top 50%;
	z-index: 99;
}

	
	
#right-box {
    position: fixed;
    display: block;
    right: 0;
    top: 0px;
    width: 12%;
    height:100%;
    background-image: url("../img/kk-tate001.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right 20px top 50%;
	z-index: 99;
}


#slider {
	width: 76%;
	margin: 160px auto 70px auto;
	float:clear;
}



.contents{
	width: 76%;
	margin: 0 auto ;
}





/* page  *******************************************/
.contents-title {
	position: relative;
	width:100%;
	margin: 160px 0 60px 0;
    }

.contents-title p{
	position: absolute;
	width:100%;
	top:12%;
	text-align: center;
	font-weight: bold;
	color:#fff;
	font-size: 3vw;
	letter-spacing: 14px;
	z-index: 1;
}
.title-jp{
	position: absolute;
	width:100%;
	top:58%;
	text-align: center;
	font-weight: bold;
	color:#fff;
	font-size: 1vw;
	letter-spacing: 14px;
	   background-color: rgba(0,51,255,0.6);
	z-index: 1
}

#main {
	width:100%;
	margin:0 auto 50px auto;
}
#main p{
	width:90%;
	margin:0 auto;
	font-size:0.9em;
	line-height:1.8em;
	text-align: center;
}
.main-midashi{
  position: relative;
  display: inline-block;
    width:100%;
	text-align: center;
	margin: 0px auto 30px auto;
	font-size: 1.8em;
    letter-spacing: 10px;
    font-weight: bold;
}
.main-midashi:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 6px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #a2d7d4;/*線の色*/
}

.flex-midashi{
	width:100%;
    text-align: left;
	margin: 0px auto 20px auto;
	padding: 0 0 10px 0;
	font-size: 1.8em;
    letter-spacing: 10px;
    font-weight: bold;
	background-image: url(../img/flex-midashi-line.png);
    background-repeat: no-repeat;
    background-position: bottom;
}



 .flexbox {
    display: flex;
	 float:clear;
	 margin: 50px 0 100px 0;
 }

.box-1 {
     width: 48%;
     margin: 0 4% 0 0;
     overflow: hidden;
 }
.box-2{
     width: 48%;
     margin: 0;
     overflow: hidden;
 }

.box-image{
    position: relative;
	overflow: hidden;
	width: 100%;
	height: 300px;
	background-color: #000;
}



.box-image img:hover {
    transform: scale(1.2);
    transition-duration: 0.3s;
	opacity: 0.6;	
}

 .flex-ashiba {
    display: flex;
    float: clear;
    margin: 50px 0 100px 0;
    background-image: url(../img/ashiba-back.jpg);
	background-attachment: fixed;
  	background-size: cover;
  	background-position: center;
	background-color: #999;
 }
.ashiba-1 {
    width: 43%;
    margin: 0 4% 0 0;
	padding: 30px 0 30px 30px;
    overflow: hidden;
 }
.ashiba-2{
    width: 53%;
    margin: 0;
	padding: 30px 10px 30px 0px;
    overflow: hidden;
 }
.ashiba-2 img{
    margin: 10px;
	float: left;
	max-width: 270px;
 }

.ashiba-midashi{
	width: 100%;
    text-align: left;
    margin: 0px auto 30px auto;
	padding: 0 0 10px 0;
    font-size: 1.8em;
    letter-spacing: 2px;
    font-weight: bold;
    color: #fff;
    background-image: url(../img/ashiba-midashi-line.png);
    background-repeat: no-repeat;
    background-position: bottom;
}


.ashiba{
	text-align: left;
	color: #fff;
    }
.ashiba-con{
	display: block;
	max-width:560px;
	margin: 20px 0 ;
	text-align: left;
    }

.ashiba-con li{
	margin: 10px auto;
    color: #fff;
    }



.box-title{
	position: absolute;
	top:35%;
	width:100%;
	text-align: center;
	color:#fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	z-index: 99;	
}

.box-title2{
    font-size: 32px;
    font-weight: bold;
	letter-spacing: 7px;
}
.box-title3{
    display: block;
    width: 100%;
    margin: 2px auto;
    padding: 0;
    font-size: 0.9em;
	letter-spacing: 5px;
    background-color: rgba(0,51,255,0.6);
}

.box-click a{
	display: block;
	width: 110px;
	margin: 0 auto;
	padding: 8px 10px;
	font-size: 0.8em;
	text-align: center;
	color:#f3981c;
	letter-spacing: 1px;
	text-decoration: none;
	border: 1px solid #f3981c;
	border-radius: 20px; 
}
.box-click  a:hover{
	background-color: #fffbc7;	
}
.box-text{
	position: relative;
	top:50%;
	left:3%;
	z-index: auto;	
}


.text-link a{
	text-decoration: none;
	font-weight: bold;
	color: #999999;	
}

.text-link a:hover{
    color: #333;	
}






/* footer  *******************************************/

#footer{
	width:100%;
	margin:100px auto 0 auto;
	border-top:1px solid #999;
    }
#footer p{
	text-align: center;
    }











/* top  *******************************************/
.midashi{
	max-width:45%;
	text-align: center;
	margin: 50px auto 20px auto;
}
.top-profile p{
	margin: 0px 0 120px 0;
	text-align: center;
	line-height: 2.4em;
}

 .top-contact {
	 display: flex;
     width: 100%;
	 margin: 60px 0;
	 float:clear;
	 border: 7px solid #999;
	 box-sizing:border-box;
 }
.contactbox1{
	width:70%;
	text-align: center;
}
.contactbox1 img{
	margin: 20px auto 0 auto;
}
.contact-btn img{
	margin: 10px;
}

.contact-btn img:hover {
  transition-duration: 0.3s;
	 opacity: 0.6;	
}

.contactbox2{
    width: 30%;
    background-image: url(../img/contact-image001.jpg);
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

 .snsbox {
    display: flex;
	 float:clear;
    margin: 30px auto 100px auto;
 }
@media screen and (min-width: 720px) {
 .snsbox {
	width:720px;
 }
 }      
    
}
.sns-1 {
     width: 40%;
     margin: 0 auto;
     overflow: hidden;
 }
.sns-2{
     width: 40%;
     margin: 0 auto;
     overflow: hidden;
 }


.box-image{
    position: relative;
	overflow: hidden;
	width: 100%;
	height: 300px;
	background-color: #000;
}



.box-image img:hover {
    transform: scale(1.2);
    transition-duration: 0.3s;
	opacity: 0.6;	
}


.service-info a{
	display: block;
	max-width:640px;
	margin: 0px auto 80px auto;
	padding: 8px 10px;
	text-align: center;
    font-size: 1.4em;
    color:#f3981c;
	font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
	border: 1px solid #f3981c;
    border-radius:30px;
    }

.service-info a:hover{
	background-color: #fffbc7;	
}

.service-tel{
	font-size: 1.8em;
	font-weight: bold;
    }
.service-con{
	display: block;
	max-width:560px;
	margin: 20px 0 ;
	text-align: left;
    }

.service-con li{
	margin: 10px auto;
    }



/* company  *******************************************/
.company{
    box-sizing: border-box;
    border-collapse:collapse;
    margin: 0 auto 100px auto;
    text-align: left;
    width: 600px;
    }
.company th,
.company td{
    border: 1px solid #999;
    padding: .5em 1em;
    }
.company th{
    background: #a2d7d4;
    }
#accsess{
	margin: 50px auto 0 auto;
    }
.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 40%;
    position: relative;
    margin-bottom: 50px;
    }
.gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    }
.map-title{
	width: 100%;
	margin: 15px auto 10px auto;
	padding-top:10px; 
	text-align: center;
	font-size: 1.1em;
	border-top: 1px solid #666;	
    }




/* contact*******************************************/
.contact-tel{
	max-width:60%;
	text-align: center;
	margin: 50px auto 0px auto;
}
#formWrap {
	width:100%;
	margin:0 auto;
	color:#666;
	line-height:1.2em;
	font-size:0.9em;
}
#formWrap p{
	text-align: center;
}
table.formTable{
	width:75%;
	margin:0 auto 20px auto;
	border-collapse:collapse;
	text-align:left;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}


table.formTable th{
     width:35%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
.input{
	width:90%;
}
.textarea{
	width:90%;
}



/* SP *******************************************/

@media screen and (max-width: 720px) {
.contents{
	width: 95%;
	margin: 0 auto ;
    text-align: left;
    }
#left-box {
    display: none;
    }
#right-box {
    display: none;
    } 
#slider {
    width: 100%;
	margin:0;
    }
.midashi{
	max-width:90%;
}
.top-profile p{
	text-align: left;
    }
#main p{
	width:100%;
	text-align: left;
}
.title-jp{
	position: absolute;
	width:100%;
	top:58%;
	text-align: center;
	font-weight: bold;
	color:#fff;
	font-size: 2vw;
	letter-spacing: 14px;
	   background-color: rgba(0,51,255,0.6);
	z-index: 1
}
.top-contact {
    display: block;
     }
.contactbox1 {
     width: 100%;
    margin: 0 auto;
     }
.contactbox2 {
      width: 100%;
      margin: 0 auto;
     }
.contents-title p{
	position: absolute;
	width:100%;
	top:-15%;
	text-align: center;
	font-weight: bold;
	color:#fff;
    letter-spacing: 5px;
	font-size: 1.5em;
	z-index: 1;
    }
.flexbox {
    display: block;
     }
.flexbox .box-1 {
    width: 100%;
    margin: 0 auto 60px auto;
   }
.flexbox .box-2 {
    width: 100%;
    margin: 0 auto;
    }

 .snsbox {
    display: block;
        float: clear;
 }

.sns-1 {
     width: 100%;
     margin: 0 auto;
 }
.sns-2{
       width: 100%;
     margin: 0 auto;
 }

 .flex-ashiba {
    display: block;
    float: clear;
 }
.ashiba-1 {
         width: 90%;
    padding: 10px;
    margin: 0 auto;
     overflow: hidden;
     cursor: pointer;
 }
.ashiba-2{
     width: 85%;
    margin: 0 auto;
    text-align: center;
 }
.ashiba-2 img{
     margin: 10px auto;
	float: left;
	max-width: 300px;
 }
.ashiba-midashi{
    text-align: center;
	margin: 0px auto 30px auto;
	font-size: 1.4em;
}
.flex-midashi {
     	font-size:1.4em;
        letter-spacing: 3px;
        text-align: center;
     }


.company,.company th,.company  td{
    display: block;
	width: 90%;
    }
.contact-tel{
	max-width:95%;
}
table.formTable{
	width:95%;
    margin: 10px auto;
}
table.formTable td,table.formTable th{
    width:90%;
    display: block;
    }
.input{
	width:95%;
	}
.textarea{
	width:95%;
	}
}


@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}























/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
} 

.sl-slide {
	z-index: 1;
}

/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

.sl-content {
	width: 100%;
	height: 100%;
	background: #fff;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
	background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
	background: #ccc;
}