@charset "utf-8";
*{
  margin:0;
  padding:0;
  line-height:1.4;
}
ul{list-style:none;}
li a{text-decoration:none;}
img{vertical-align:bottom;}
*{box-sizing:border-box;}

body{
  cursor:url(img/kunpu-img/shinai-1.cur),auto;
}
ul li a:hover{
  cursor:url(img/kunpu-img/shinai-1.cur),auto;
}
body:active{
  cursor:url(img/kunpu-img/shinai-2.cur),auto;
}
ul li a:active{
  cursor:url(img/kunpu-img/shinai-2.cur),auto;
}
.container{
  width:980px;
  margin:0 auto;
  background:#FFF;
  overflow:hidden;
}
/*--Video----------------------------------*/
video{
  display:block;
  position:fixed;
  left:0;
  top:0;
  z-index:-10;
  min-width:100%;
  min-height:100%;
}

/*TOP関連---------------------------------*/
.top{
  width:100%;
  height:0px;
  padding-top:41.66%; /*高さ÷幅×100*/
  background:url(img/kunpu-img/top.png)no-repeat;
  background-size:cover;
  position:relative;
}
.top h1{display:none;}
/*nav関連---------------------------------*/
.top ul{
  width:100%;
  overflow:hidden;
  position:absolute;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
}
.top li{
  width:15%;
  float:left;
  text-align:center;
}
.top li:last-child{
  margin-right:12.5%;
}
.top li:first-child{
  margin-left:12.5%;
}
.top li a{
  display:block;
  color:#FFF;
  line-height:60px;
  font-weight:bold;
}
.top li a:hover{
  color:orange;
}
.top li a.first{
  color:#90EE90;
}
/*main関連--------------------------------*/
.contents{
  overflow:hidden;
}
.main{
  width:75%;
  overflow:hidden;
  float:left;
  margin-bottom:30px;
  }
/*panel1---------------------------------*/
.panel1{
  width:100%;
  overflow:hidden;
  text-align:center;
  position:relative;
}
.main h2 img{
  width:80%;
  height:auto;
  margin:20px auto;
  background-color:darkkhaki;
}
.panel1 h2 img{
  padding:10px 0;
}
.panel1 h3{
  margin:10px;
  line-height:1.8;
  padding:10px;
  border-bottom:1px solid gray;
  border-top:1px solid gray;
}
.panel1 p img{
  height:150px;
  margin:10px 0 10px 30px;
  float:left;
}
.panel1 h4{
  width:50%;
  margin:10px 10px;
  float:left;
  overflow:hidden;
  line-height:1.6;
  color:#777;
  font-size:16px;
}
.model{
 width:15%;
 position:absolute;
 bottom:0;
 right:10%;    
}
/*panel2---------------------------------*/
.panel2{
  overflow:hidden;
  text-align:center;
}
.panel2 img#hidaka{
  float:left;
  width:30%;
  margin-left:20px;
}
.wrapper1{
  width:60%;
  font-size:24px;
  float:left;
  margin:10px 0 80px 0;
}
.wrapper1 p{
  margin-left:0px;
}
.wrapper1 h3,.wrapper2>h4{
  font-size:26px;
  text-align:center;
  margin-bottom:20px;
}
.panel2 img#hidaka2{
  float:right;
  margin-right:20px;
}
.wrapper2{
  width:70%;
  font-size:24px;
  text-align:left;
  float:left;
  margin-left:10px;
}
.wrapper2 h4{
  text-align:center;
  margin-bottom:20px;
  color:green;
}
.wrapper1 p{
  font-size:18px;
}
.wrapper2 p{
  font-size:16px;
  line-height:1.8;
  margin:0 10px;
}
/*パネル３------------------------*/
.panel3{
 text-align:center;
}
.panel3 h3 img{
 width:90%;
}

/*パネル４------------------------*/
.panel4{
  overflow:hidden;
  position:relative;
}
.panel4 h2{
  text-align:center;
}
.panel4 dl{
  width:50%;
  float:left;
  margin:20px;
}
.panel4 dt{
  font-weight:bold;
  font-size:20px;
  margin:30px 10px 30px 0;
  border-bottom:3px solid darkblue;
}
.panel4 dd{
  margin:5px 1em;
  font-size:18px;
}

.map{
  display:block;
  margin:0px 20px;
  max-width:100%;
  padding-top:10px;
}
.panel4 p img{
 width:30%;
 position:absolute;
 top:10%;
 right:15%;
}
/*パネル５------------------------*/
.panel5 h2{
  text-align:center;
}
.panel5 dl{
 width:90%;
 margin:0 auto;
}
.panel5 dt{
  font-weight:bold;
  font-size:20px;
  margin:10px;
  color:darkslategrey;
}
.panel5 dd{
  margin-left:2em;
}
.panel5 span{
  color:red;
  font-weight:bold;
}
/*スライダー-----------------------------*/
.slider{
  padding-top:20px 0;
}
.slider img{
 width:95%;
 margin:0 auto;
}
/*サイドバー----------------------------*/
.sidebar{
  width:25%;
  float:right;
  margin-top:20px;
}
.blog{
  text-align:center;
}
.blog img{
  width:80%;
  margin:5px 0 20px 0;
}
.blog a:hover{
 opacity:0.5;
}
.sidebar p{
 color:orangered;
 margin-top:30px;
 text-align:center;
 font-size:22px;
}

/*--メリット--------------------------------*/
.melit{
  clear:both;
  overflow:hidden;
  width:100%;
  margin-bottom:30px;
}
.melit h2{
  width:65%;
  margin:25px auto;
}
.melit dl{
  width:30%;
  float:left;
  height:200px;
  margin-right:2%;
}
.melit dt{
  font-weight:bold;
  padding:10px;
  text-align:center;
  border-bottom:2px solid #666;
}
.melit dd{
  padding:3%;
  line-height:1.8;
}
.melit2{
  float:left;
  margin-left:3%;
  background-color:#FDB2CF;
  position:relative;
}
.melit3{
  background-color:#FFF34A;
  position:relative;
}
.melit4{
  background-color:#7DE0FF;
  position:relative;
}
#men{
 width:55px;
 position:absolute;
 top:-10%;
 left:-3%;
 transform:rotate(-10deg);
}
#dou{
 width:50px;
 position:absolute;
 top:-8%;
 left:0;
 transform:rotate(-10deg);
}
#shinai{
 width:50px;
 position:absolute;
 top:-8%;
 left:-6%
}
/*---アニメーション-----------------------*/
.animation{
  width:100%;
  height:550px;
  position:relative;
  overflow:hidden;
  background-image:url("img/kunpu-img/back.png");
  background-size:cover;
}
.man{
  margin-top:15%;
  text-align:center;
  width:40%;
  float:left;
}
.man2{
  margin-top:15%;
  float:right;
  width:40%;
  text-align:center;
}
.doujyo{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
/*--footer--------------------------------*/
.footer{
  clear:both;
  width:100%;
  background-color:#110E05;
  color:#FFF;
  padding:20px;
}
.footer  p{
 text-align:center;
}
.tel,.mail{
 text-align:center;
 width:100%;
 float:left;
 font-size:20px;
 padding:10px;
}
.footer span{
 color:lightskyblue;
 margin:30px;
}
.footer small{
  text-align:right;
  float:right;
  }
/*--上部に戻るやつ--*/
#page-top img{
  width:100px;
  position:fixed;
  bottom:5%;
  right:5%;
}
/*--スマホ対応-----------*/
@media only screen and (max-width:767px){
  .container h2{font-size:20px;}
  .container{
    max-width:100%;
  }
  .top{
    width:100%;
  }
  .top li{
    width:20%;
  }
  .top ul li a{
   font-size:60%;
   line-height:40px;
  }
  .top li:last-child{
  margin-right:0;
}
.top li:first-child{
  margin-left:0;
}
  .main{
    width:100%;
    padding:0;
  }
  .panel1 p img,.panel1 h4,.model{
    display:none;
  }
  .sidebar{
    float:none;
    width:100%;
    text-align:center;
    margin-top:-20%;
  }  
  
  
  .fb-page{
   display:none; 
  }
  .panel1 h4{
    width:100%;
  }
.wrapper1 h3,.wrapper2>h4{
  margin-bottom:10px;
}
  .wrapper2{
   max-width:55%;
   margin-left:3%;
  }
  .wrapper2 h4{
   font-size:70%;
  }
  .wrapper2 p,.wrapper1 p{
    font-size:50%;
  }
  .panel4 dl{
    float:none;
    width:100%;
  }
  .panel4 p img{
    width:180px;
    top:15%;
    right:5%
  }
  .slick-dots li{
    display:none;
  }
    .melit dl{
     font-size:90%;
     max-height:200px;
    }
    .melit dd{
      font-size:85%;
      position:absolute;
        top:20%;
        margin:auto;
    }
    .melit dl br{
     display:none;
    }
    #men,#dou,#shinai{
      width:100%;
      max-width:30%;
      height:auto;
    }
    .animation{
    display:none;
  }
  #page-top img{
  width:70px;
  position:fixed;
  bottom:5%;
  right:5%;
}
}
@media only screen and (max-width:480px){
.panel1 h3{
  margin:20px 0 0 0;
  font-size:65%;
}
.melit dl{
  float:none;
  width:90%;
  height:120px;
  margin:0 5% 3% 5%;
}
.melit dd{
 position:absolute;
 top:30%
}
.panel2 img,.wrapper1,.wrapper2{
float:none;
}
img#hidaka{
  display:none;
}
img#hidaka2{
  width:60%;
  position:relative;
  top:20px;
  right:15%;
}
.wrapper2 h4{
  padding-top:30px;
}
.panel2 h4{
  clear:both;
}
.wrapper2 p{
  float:none;
}
.panel4 dd{
  font-size:90%;
}
    .panel4 p img{
        width:130px;
    }
.panel5 dl{
  margin:0;
  width:100%;
}
.panel5 dt{
  margin-top:15px;
  font-size:90%;
  border-bottom:2px solid navy;
}
.panel5 dd{
  margin:10px;
  font-size:90%;
}
#men,#dou,#shinai{
  max-width:55px;
    }
#shinai{
  position:absolute;
  left:10px;
    }
.footer .mail,.tel{
  font-size:100%;
}
}