@charset "utf-8";

html{
  scroll-behavior: smooth;
  }

#wrap{
  width: 100%;
   position: relative;
   height:auto !important; /*IE6対策*/
   height: 100%; /*IE6対策*/
   min-height: 100%;
}

#main{
   width: 100%;
}

@font-face {
	font-family: 'myfont';
	src: url(Pangolin-Regular.ttf);
  font-style: normal;
}

.myfont{	font-family: 'myfont';}

a{-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}
a:hover{ }

.pc-none {display:none;}
.sp-none {display:block;}

@media only screen and (max-width:767px){
	.pc-none {display:block;}
	.sp-none {display:none;}
	}

.blue{color:#011293;}
.gray{color:#ccc;}

small{line-height:120%;font-size:85%;}

table{line-height:160%;width: 100%;}
table th,table td{padding:3px 10px;}


/*========▼▼header▼▼========*/

header {
  position:fixed;
  z-index: 99;
  width: 100%;
}
header h1{
  /*max-width:246px;*/
  max-width: 24vh;
  position: absolute;
  top:110px;
  left: 110px;
  z-index: 10;
}
header h1 img {filter: brightness(0) invert(1);}
header #cart{display:none;}
  header nav {
    transition: all .6s;
    overflow-y: auto;
    max-width: 480px;
    height: 100vh;
    z-index: 200;
    top: 0;
    margin-top: 0;
    padding:40px;
    right: 0;
    background:rgba(255,255,255,0.6);
    position: fixed;
  }
  header hr{ margin:8% 0;border-top: 1px solid #707070}
  header nav li{display: block;/*margin-bottom: 12%;*/margin-bottom: calc(100% / 6);}
  header nav a p,header nav a span,header nav div p,header nav div span{font-size:24px;font-family: 'myfont', sans-serif;line-height: 160%;margin-bottom: -5px;}
  header nav a p small{font-size:16px;}
  header nav a,header nav a p,header nav a span,header nav a small{color:#000;}
  header nav a:hover,header nav li a:hover p,header nav li a:hover span,header nav li a:hover small{color:#999;}
  header nav li a.gray p,header nav li a.gray small{color:#ccc;}
  header nav a{
    -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease;}
  header nav a:hover{opacity: 0.5;}
  header nav li small{margin-left:15px;}
  img.icon{width:32px;margin-left:20px;}

  .sns{width:100%;display:block;float: right;text-align: right;margin-bottom:10px;}
  .sns img{width:50px;margin:0;}

  header copyright{font-size: 75%;}

  header .nav_btn{display: none;}

@media only screen and (max-width:1439px){
  header {background: rgba(255,255,255,0.3);}
  header h1 {
      max-width: 63px;
      position: static;
      margin: 12px auto;
      left:36px;
  }
  header h1 img {filter: none;}
    header nav {
      left: -480px;
      right:auto;
      background:rgba(255,255,255,1);
      padding: 12px 32px;
    }

    .nav_open header nav {left: 0px;}

    header .nav_btn {
      display: block;
      width: 33px;
      height: 33px;
      z-index: 300;
      top: 15px;
      right: auto;
      left: 20px;
      cursor: pointer;
      position: absolute;
    }

    .hamburger_line {
      transition: all .6s;
      width: 33px;
      height: 6px;
      left: 0px;
      background: url(../img/nav-line.png) no-repeat center center / 35px 6px;
      position: absolute;
    }

    .hamburger_line1 { top: 0px; }
    .hamburger_line2 { top: 12px; }
    .hamburger_line3 { top: 24px; }

    .nav_bg {
      opacity: 0;
      transition: all .6s;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      top: 30px;
      left: 0;
      visibility: hidden;
      cursor: pointer;
      position: fixed;
    }

    .nav_open .nav_bg {
      opacity: .8;
      visibility: visible;
    }

    .nav_open .hamburger_line1 {
      transform: rotate(45deg);
      top: 10px;
    }

    .nav_open .hamburger_line2 {
      width: 0;
      left: 50%;
    }

    .nav_open .hamburger_line3 {
      transform: rotate(-45deg);
      top: 10px;
    }
    header .sns img{width:30px;margin:2px 5px;}
    header #cart{
      display:block;
      position: absolute;
      top: 13px;
      right: 30px;
      z-index: 10;}
    header nav a p,header nav a span{font-size:2.25vh;font-family: 'myfont', sans-serif;line-height: 160%;}
    header nav li small{font-size:1.5vh;}
    header nav ul{margin-top:60px;}
    header nav li {margin-bottom: calc(100% / 9);}
    header .sns {margin: -10px 0 10px;}
    .sns img {width: 3vh;}
}

@media only screen and (max-width:321px){
  header nav ul {margin-top: 35px;}
  header nav li {margin-bottom: 6.5%;}
}