@charset "UTF-8";

/*Reset=====================================*/

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
line-height:1.0;
font-family:"Hiragino Kaku Gothic Pro",Meiryo, sans-serif;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
vertical-align: bottom;
border: none;
max-width:100%;
height:auto;
}

/*.container============================*/
.container{
max-width: 960px;
margin: 0 auto;
padding: 0 15px;
}
p{
line-height: 1.6;
}
/*header================================*/
header{
background-color: #00174a;
color: #fff;
padding: 10px 0;
}
header>.container{
display: flex;
justify-content: space-between;
align-items: flex-end;
}

header h1{
margin-bottom: 5px;
font-size: 24px;
font-weight: 500;
letter-spacing: 4px;
}
header h1 span{
font-size: 16px;
letter-spacing: 3px
}
header p{
display: block;
font-size: 14px;
line-height: 1.0;
}

/*PC navigation=====================*/
.pcnav ul{
display: flex;
justify-content: flex-end;
}

.pcnav a{
display: block;
font-size: 14px;
padding: 0 10px;
border-left: 1px solid #fff;;
}
.pcnav a:hover{
color: #ffe522;
}
.pcnav li:first-child a{
border-left: none;
}

/*menu btn===============================*/
.btn{
display: none;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #ff9d00;
  
position: fixed;
top: 8px;
right: 6px;
z-index: 9999;
cursor: pointer;
}
.btn span,.btn span::before, .btn span::after{
display: block;
width: 32px;
height: 3px;
background-color: #fff;
border-radius: 6px;

margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transition: 0.4s;
}
.btn span::before, .btn span::after{
content: "";
display: block;
}
.btn span::before{
top: -22px;
}
.btn span::after{
bottom: -22px;
}
.btn.open span{
background-color: transparent;
width: 38px;
}
.btn.open span::before{
/*transform:GPUを使ってスムーズに動く*/
transform: rotateZ(-315deg);
top: 0;
width: 38px;
}
.btn.open span::after{
transform: rotateZ(315deg);
bottom: 0;
width: 38px;
}

/*spnav=============================*/
.spnav{
display: none;
position: fixed;
width: 100%;
top: 62px;
/*left: 100%;*/
margin-left: 100%;
z-index: 9999;
transition: 0.3s ease-in-out;

}
.spnav.open{
margin-left: 0;
}
.spnav li{
/*width: 100%;*/
}
.spnav a{
display: block;
font-size: 16px;
line-height: calc((90vh - 55px)/5 );
text-align: center;
background-color: rgba(255, 147, 0, 0.9);
border-top: 1px #ffce80 solid;
color: #fff;
}
.spnav a:hover{
background-color: rgba(255, 50, 0, 0.9);
border-bottom: #000;
}
.spnav li:first-child a{
border-top: none;
}

/*トップへボタン======================*/
.top-btn{
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
background-color: rgba(255, 50, 0, 0.8);
color: #fff;
text-align: center;
font-size: 28px;
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
z-index: 9999;
/*transition: 0.2s;*/
}
.top-btn:hover{
background-color: rgba(255, 30, 0, 0.9);
}

/*.keyVis===========================*/
/*コピー部分*/
.cell p{
text-shadow: 0 2px 10px #000000;
text-align: center;
color: #fff;
}
.cell p:first-child{
font-size: 32px;
font-weight: bold;
letter-spacing: 4px;
margin-bottom: 10px;
}
.cell p:last-child{
font-size: 18px;
}

/*スライダー部分*/
.main-carousel{
width: 100%;
}
.cell-1{
background: url(../img/keyvis.jpg) no-repeat top center;
}
.cell-2{
background: url(../img/keyvis_2.jpg) no-repeat center;
}
.cell-3{
background: url(../img/keyvis_3.jpg) no-repeat center;
}
.cell{
width: 100%;
padding: 100px 0;
background-size:cover;
text-align: center;
color: #fff;
}

/*contents共通*/
.contents1,.contents2,.contents3{
padding: 100px 0;
}
section h2{
width: 33.3%;
margin: 0 auto 50px;
padding: 8px 0 5px;
background-color: #ddd;
font-size: 16px;
font-weight: normal;
letter-spacing: 3px;
color: #333;
text-align: center;
}

/*contents1 SERVICE===========================*/
.wrapper{
display: flex;
justify-content: space-between;
}

.service{
width: 33.3%;
}
.service h3{
width: 225px;/*70.38%*/
height: 225px;
margin: 0 auto 20px;
border-radius: 50%;
font-size: 16px;
text-align: center;
transition: 0.6s;
}
.service h3 a>i{
display: block;
font-size: 50px;
margin-bottom: 10px;
padding-top: 78px;
}
.service p{
width: 225px;
margin: 0 auto;
color: #333;
}

.service:first-child h3{
background-color: #b9faa4;
color: #00b252;
}
.service:first-child h3:hover{
background-color: #91d99c;
}
.service:nth-child(2) h3{
background-color: #c8c8fa;
color: #2963ff;
}
.service:nth-child(2) h3:hover{
background-color: #a1baff;
}
.service:last-child h3{
background-color: #f8eba2;
color:  #ff8900;
}
.service:last-child h3:hover{
background-color: #ffdc7d;
}

/*contents2 INFO======================*/
.contents2{
background-color: #ddd;
}
.contents2 .wrapper{
align-items: center;
}
.contents2 h2{
background-color: #fff;
}
.contents2 p{
border: 1px solid #aaa;
}
.contents2 img{
display: block;
max-width: 300px;
border: 7px solid #fff;
box-sizing: border-box;
}
.contents2 dl{
width: 100%;
overflow: hidden;
}
.contents2 dt,.contents2 dd{
color: #333;
margin-bottom: 20px;
}
.contents2 dt:last-of-type,.contents2 dd:last-of-type{
margin-bottom: 0;
}
.contents2 dt{
border-left: 16px solid #ff8900;
float: left;
padding-left: 5px;
width: 20%;
}


/*contents3 MAP======================*/
.map{
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
}
.map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/*footer==============================*/
footer{
background: url(../img/footerBg.jpg) repeat-x;
text-align: center;
padding: 50px 0 20px;
color: #333;
}


/*JQ===================================*/
@media screen and (max-width:767px){
/*header================*/
header>.container{
display: block;
}
.header_title{
text-align: center;
}
header h1{
margin: 0;
padding: 14px 0 8px;
}
header p{
display: none;
}

/*nav====================*/
.btn{
display: block;
}
.pcnav{
display: none;
}
.spnav{
display: block;
}
/*keyVis==================*/
.cell p:first-child{
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 10px;
}
.cell p:last-child{
font-size: 16px;
}
.cell{
padding: 30px 0;
background-size:cover;
}

/*contents================*/
.contents1,.contents2,.contents3{
padding: 20px 0;
}
.contents1,.contents3{
margin-top: 20px ;
}
section h2{
width: auto;
margin: 0 auto 20px;
}
.wrapper{
display: block;
}
.service{
width: auto;
}
.service h3{
width: 100%;
height: 120px;
margin: 0 auto 10px;
border-radius: 0;
}
.service h3 a>i{
margin-bottom: 10px;
padding-top: 26px;
}
.service p{
width: 100%;
margin: 0 auto 10px;
}
.contents2 p{
display: none;
}
.contents2 dt{
width: 18%;
font-size: 14px;
}
.contents2 dd{
font-size: 14px;
}
.map{
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
}
}/*end*/