@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('html5reset-1.6.1.css');
@font-face {
font-family: "DINPro-Bold";
src: url('../font/DINPro-Bold.woff2') format('woff2'), url('../font/DINPro-Bold.woff') format('woff');
font-weight: 700;
}
@font-face {
font-family: "DINPro-Medium";
src: url('../font/DINPro-Medium.woff2') format('woff2'), url('../font/DINPro-Medium.woff') format('woff');
font-weight: 600;
}


@media print{
  body::after{ display:none; }
}

*{ box-sizing: border-box; }
html{ height: 100%; scroll-behavior: smooth; overflow-y:scroll;  }
body{
  font-family:"Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #514643;
  line-height: 2;
  font-size: 94.5%;
  overflow: visible;
  /*overflow-x: hidden;*/
  -webkit-text-size-adjust: 100%;
  letter-spacing:0.05em;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
  background-color: #fff;
  word-wrap: break-word;
  min-height: 100vh;
}
body.load{ height:100svh; overflow-y:scroll; }
.en{ font-family: "DINPro-Bold"; }
.en2{ font-family: "DINPro-Medium"; }


img{
  margin: 0;
  padding: 0;
  vertical-align: middle;
  line-height: 0;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
video{ max-width: 100%; height: auto; line-height: 0; vertical-align: bottom; }

a{
  text-decoration: none;
}
a:hover{
  /*text-decoration: underline;*/
}


footer{background: #000; position: relative; z-index: 1; color: #fff; padding: 10rem 10% 2rem;}
footer h2{ max-width:500px; margin:0 auto; }
footer .logo{ max-width:140px; margin:4rem auto 5rem; }
footer .logo img{ /*filter: brightness(0) invert(1);*/ }
footer #copy{}



.pcs{ display:none; }
.tab{ display:none; }
.sp{ display:none; }
.ssp{ display:none; }
@media screen and (max-width: 1600px) {
  .pcs{ display:block; }
}
@media screen and (max-width: 1280px) {
  .tab{ display:block; }
  body{ font-size: 1.2vw; }
}
@media screen and (max-width: 1100px) {
  /*body{ font-size: 1.4vw; }*/
}
@media screen and (max-width: 810px) {
  html{ overflow-x:hidden;  }
  body{ font-size: 1.8vw; }
  .sp{ display:block; }
  .pc{ display:none; }
}
@media screen and (max-width: 600px) {
  body{ font-size: 2.5vw; letter-spacing:0.01em; }
  .ssp{ display:block; }
}




.newWin{ display: inline-block; width: 8px; height: 7px; border: 1px solid #595757; position:relative; top: -2px; margin: 0 5px; }
.newWin:before,.newWin:after{ content: "";  position:absolute; bottom: -4px; right: -4px; background-color: #595757; }
.newWin:before{ width: 1px; height: 7px; }
.newWin:after{ width: 8px; height: 1px; }
.newWin.wh{ border: 1px solid #fff; }
.newWin.wh:before,.newWin.wh:after{ background-color: #fff; }

.newWin2{ position:relative; display: block; }
.newWin2:before,.newWin2:after{ content: "";  position:absolute; width: 7px; height: 5px; right: 13px; top: 10px; border: 1px solid #595757; z-index: 2; }
.newWin2:before{  }
.newWin2:after{ right: 10px; top: 14px; border-width: 0 1px 1px 0;  }

a.alqha{ transition: all .6s cubic-bezier(0.33, 1, 0.68, 1); display: block; }
a.alqha:hover{ opacity:0.5; }

.ef{ opacity:0; }
.ef.play{ animation:fade-effect 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; }

@keyframes fade-effect {
  0% {opacity: 0; transform:translateY(3rem); }
  100% {opacity: 1; transform:translateY(0);}
}
@keyframes fade {  
  0% {opacity: 0; }
  100% {opacity: 1;}
}


ul.notes {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes li {
  list-style: none;
  font-size: 85%;
  line-height: 1.6;
  color: #777;
  margin-top: .3em;
}
ul.notes li span:first-child {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 0.5em;
}
ul.notes li span {
  display: table-cell;
  vertical-align: top;
}


#pagetop{ position: fixed; z-index: 11; right: -100px; bottom: 30px; transition: all .3s; opacity: 0.7; }
body.on #pagetop{ right: 30px;  }
#pagetop:hover{ transform:translate(0,-5px); opacity: 1; }

a[href^="tel:"]:hover { cursor: default; text-decoration: none; }
.menu-trigger{ display: none; }








/* ボックス内dloatｖalear */
.cf:after,#product .detail:after,#product > dl:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}
.cf,#product .detail,#product > dl {display: inline-block;}
/* Hides from macIE \*/
* html .cf,* html #product .detail,* html #product > dl {height: 1%;}
.cf,#product .detail,#product > dl {display: block;}
/* End hide from macIE */

sup{ font-size: 70%; position: relative; top: -.4em; display: inline-block;}
.fontP1{ font-size: 110%;}
.fontP2{ font-size: 120%;}
.fontP3{ font-size: 130%;}
.fb{ font-weight: bold;}
.fl { float: left !important; }
.fr { float: right !important; }
.tac{ text-align: center !important;}
.tal{ text-align: left !important;}
.tar{ text-align: right !important;}

.fc01{ color:  #006bb5; }


/* margin-top */
.mt0{margin-top: 0px !important;}
.mt1{margin-top: 1px !important;}
.mt2{margin-top: 2px !important;}
.mt3{margin-top: 3px !important;}
.mt4{margin-top: 4px !important;}
.mt5{margin-top: 5px !important;}
.mt7{margin-top: 7px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important; }
.mt50{margin-top: 50px !important; }
.mt100{margin-top: 100px !important; }
.mt150{margin-top: 150px !important; }

/* margin-right */
.mr1{margin-right: 1px !important;}
.mr2{margin-right: 2px !important;}
.mr3{margin-right: 3px !important;}
.mr4{margin-right: 4px !important;}
.mr5{margin-right: 5px !important;}
.mr8{margin-right: 8px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr70{margin-right: 70px !important;}

/* margin-bottom */
.mb0{margin-bottom: 0px !important;}
.mb1{margin-bottom: 1px !important;}
.mb2{margin-bottom: 2px !important;}
.mb3{margin-bottom: 3px !important;}
.mb4{margin-bottom: 4px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}
.mb80{margin-bottom: 80px !important;}

/* margin-left */
.ml1{margin-left: 1px !important;}
.ml2{margin-left: 2px !important;}
.ml3{margin-left: 3px !important;}
.ml4{margin-left: 4px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}

/* padding-top */
.pt0{padding-top: 0px !important;}
.pt1{padding-top: 1px !important;}
.pt2{padding-top: 2px !important;}
.pt3{padding-top: 3px !important;}
.pt4{padding-top: 4px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt50{padding-top: 50px !important;}

/* padding-right */
.pr1{padding-right: 1px !important;}
.pr2{padding-right: 2px !important;}
.pr3{padding-right: 3px !important;}
.pr4{padding-right: 4px !important;}
.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr15{padding-right: 15px !important;}
.pr20{padding-right: 20px !important;}

/* padding-bottom */
.pb0{padding-bottom: 0px !important;}
.pb1{padding-bottom: 1px !important;}
.pb2{padding-bottom: 2px !important;}
.pb3{padding-bottom: 3px !important;}
.pb4{padding-bottom: 4px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb80{padding-bottom: 80px !important;}

/* padding-left */
.pl1{padding-left: 1px !important;}
.pl2{padding-left: 2px !important;}
.pl3{padding-left: 3px !important;}
.pl4{padding-left: 4px !important;}
.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl15{padding-left: 15px !important;}
.pl20{padding-left: 20px !important;}