*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }

/*  ------------------------------------------------------ */
/*  all-css */

html{
    font-family: 'Noto Sans JP', sans-serif;
}

body{
    margin:0px;
    scroll-behavior: smooth;
}

.heading{
    padding:80px 0px 40px 0px;
}

h1{
    font-size:20px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0px;
}

a {
    text-decoration: none;
  }

.sliderlink{
  display: block;
}

.bk-p{
    color: #000;
}

.bk-p:hover{
    color:#098A8F;
}


.w-p{
    color: #fff;
}


/*以下で線を表示*/
h1:before {
    content: '';
    position: absolute;
    left: 50%;
    margin-top: 35px;/*線の上下位置*/
    display: inline-block;
    width: 40px;/*線の長さ*/
    height: 2px;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: #fff;/*線の色*/
  }

  h2{
    font-size:20px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    margin: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
      /*線の種類（実線） 太さ 色*/
    border-bottom: solid 2px #fff;
    width: 160px;
}

ul{
    margin: 0px;
    padding:0px;
}

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


/*  header-css */

header{
    height: 110px;
}

.header-container{
    display:flex;
    background-color: #fff;
    width:100%;
    height: 110px;
    padding:0;
    margin:0;
    position: fixed;
    z-index: 9997;
}

.header-logo{
    height: 85px;
    width: auto;
    padding-left: 35px;
    padding-top: 23px;
}

.header-right{
    margin-left:auto;
    width: 600px;
    padding-left: 15px;
    padding-top: 10px;
}

.lower-inner{
    padding-left: 190px;
}

/*  ------------------------------------------------------ */
/*  nav-css */

nav{
text-align: center;
}

nav ul{
margin: 0 ;
padding: 15px 0px ;
}

nav li{
    list-style: none;
    display: inline-block;
    width: 15%;
    min-width: 100px;
}

nav li:not(:last-child){
    border-right:1px solid #fff;
}

nav a{
    text-decoration: none;
    color: #fff;
}

nav a:hover{
        color:rgb(91, 255, 255);
}

.nav-container{
    background-color: #30CFC6;
    height: 50px;
    width:100%;
    position: fixed;
    z-index: 9998;
}

/*  serch-css */


.search button{
    color: #fff;
    height: 30px;
    margin-left: -1px;
}

.search-btn{
    background-color:#DDDDDD ;
    height: 30px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    border-left: solid 1px #000;
    margin-bottom: 5px;
    border-top-right-radius : 7px;
    border-bottom-right-radius : 7px;

}

.input-box{
    width:330px;
    height: 30px;
    border:1px solid #000;
    border-top-left-radius : 7px;
    border-bottom-left-radius : 7px;
    padding-left: 10px;

}

.small-p{
    font-size:12px;
    margin-top:-5px;
}

.search{
    align-items: center;
}

.search-button{
    color: #DDDDDD;


}

.upper-inner{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    width: 100%;
    text-align: center;
    align-items: center;
}

.upper-icon{
    padding:10px;
}

.sub-nav{
    display: flex;
}

.sub-nav-text{
    list-style:none;
    text-align: center;
    font-size: 12px;
    padding:0 10px;
}


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

/* top-swiper-css */
.c-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0px;
  padding-top: 50px
}

.l-header-inner {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.l-header-logo,
.l-header-logo a { font-size: 2.0rem; text-decoration: none; }
.l-header-logo a:hover { text-decoration: underline; color: #2196f3; }
/* ------------------------------------------------------ */

/* top-swiper-css */
.c-container-1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0px;
  padding-top: -10px
}



/* ------------------------------------------------------ */
/*  main-css */

#Popular{
    padding-top: 90px;
}
#regular{
    padding-top: 90px;
}

#all-item{
    padding-top: 90px;
}

#menu{
    padding-top: 90px;
}

.container{
    margin-top:-100px;
    padding-top:100px;
}

.bg-container{
    background-size: cover;
    width: 100%;
    height:  auto;
}

/*  top-slider-css */
.top-slider{
/*
    height:340px;
    background-color: red;
*/
}


/*  top-slider-css */
.item-slider{
/*    height:260px;*/

}

/*  main-css */
.banner-container{
    padding-left: 200px;
    padding-right: 200px;
    text-align: center;
}

.banner-image{
    width: 100%;
    padding-top:20px;
}

.list-container{
    padding-bottom: 50px;
}

.swiper-pagination{
  padding-top: 20px;
}

/*  menu-css */
.menu-container{
    padding-left:130px;
    padding-right:130px;
}

.menu-ul{
   display:flex;
   flex-wrap:wrap;
   list-style:none;
   width: 100%;
   justify-content: space-between;
   align-items: center;
}

.menu-li{
   width:33%;
   height: auto;
   padding: 4px 6px 4px 6px;
}

.menu-li img{
    width: 100%;
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

  .menu-li :hover img {
    opacity: .5;
  }


.register-box{
    padding-bottom: 100px;
}

.register-ul{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    width: 100%;
}

.register-li{
   width:50%;
   height: auto;
   padding: 1px 4px 1px 4px;
}

.register-li img{
    width: 100%;
}


/*  about-css */

.about-container{
    padding:30px 90px 80px 90px;
}

.about-box{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style:none;
    justify-content: space-between;
    nav li:not(:last-child){
    border-right:1px solid #fff;
}
}

.about-p{
    color: #30CFC6;
    font-weight: bold;
    text-align: center;
    margin-top: -5px;
}

.about-item{
    display: flex;
    width: 33%;
    text-align: center;
    padding:30px;
    flex-direction: column;
    margin-bottom: 40px;
}

.breake-line{
    border-right:1px solid  #098A8F;
    border-left:1px solid #098A8F;
}

.card-img{
    width: 100%;
}

.about-svg{
    width:60px;
    margin: 0 auto ;
}

.about-left{
    text-align: left;
    font-weight: bold;
    font-size: 14px;
}

.btn {
    display: inline-block;
    padding: 0.4em 1.6em;
    font-size: 16px;
    color: #fff;
    background-color: #098A8F;
    border: 1px #fff solid;
    text-decoration: none;
    user-select: none;
    border-radius: 20px;
    transition: 0.4s ease;
    text-align: center;
    padding: 5px 40px;
    margin-top: auto;
  }

  .btn:hover {
    color: #098A8F;
    background: #fff;
    border: 1px #098A8F solid;
  }

/*  ------------------------------------------------------ */
/*  footer-css */

.copyright-container{
    background-color: #30CFC6;
    height: 56px;
    width: 100%;
}
.copyright-text{
    font-size: 12px;
    color: white;
    text-align: center;
    line-height: 56px;
    margin: 0px;
}
/*  ------------------------------------------------------ */
/*  header.html */
.productpage {
  display: block;
}
.nav-productpage{
  background-color: #30CFC6;
  height: 50px;
  width: 100%;
}