@charset "UTF-8";
@font-face {
  font-family: "Marcellus", serif;
  font-family: "NotoSansJP", sans-serif;
}
/*------------------------------------------------------------------------------
    header
------------------------------------------------------------------------------*/
body {
  margin: 0;
  color: #222;
}

.header {
  width: 100%;
  position: fixed;
  z-index: 100;
  padding: 0.9375vw 0vw;
  height: 2.0833333333vw;
  transition: all 0.6s ease;
}
.header .wrap_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 84.7395833333vw;
  margin: auto;
}
@media (min-width: 769px) and (max-width: 1300px) {
  .header .wrap_head {
    width: 52.0833333333vw;
  }
}
.header .wrap_head .innerLeft img {
  width: 7.4479166667vw;
}
.header .wrap_head .innerLeft a {
  margin: 0;
}
.header .wrap_head .innerLeft a h1 {
  position: relative;
  width: 6.5104166667vw;
  height: 1.9270833333vw;
  margin: 0;
  padding-left: 0.1041666667vw;
}
.header .wrap_head .innerLeft a h1:after {
  content: "";
  width: 6.5104166667vw;
  height: 1.9270833333vw;
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/logo_sp_w.png) no-repeat right center/contain;
  position: absolute;
  bottom: 0;
  margin: auto 0;
  right: 0;
}
.header .wrap_head .innerRight a {
  display: inline-block;
  vertical-align: middle;
}
.header .wrap_head .innerRight a:hover {
  opacity: 0.7;
}
.header .wrap_head .innerRight nav {
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .wrap_head .innerRight nav ul {
  margin: 0 auto 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .wrap_head .innerRight nav ul li {
  line-height: 1.1;
  margin-left: 2.4479166667vw;
  font-size: 0.8333333333vw;
}
.header .wrap_head .innerRight nav ul li a {
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.header .wrap_head .innerRight nav ul li .link {
  position: relative;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  color: #fff;
}
.header .wrap_head .innerRight nav ul li .link-hover::after {
  content: "▼";
  padding-top: 0;
  font-size: 0.5208333333vw;
  padding-left: 0.5208333333vw;
}
.header .wrap_head .innerRight nav ul li .dropDown {
  position: absolute;
  top: 0.8333333333vw;
  display: none;
  padding: 0.5208333333vw 0.5208333333vw 0.5208333333vw 0.5208333333vw;
  background-color: #fff;
  box-shadow: 0px 3px 8px -2px #777;
  color: initial;
}
.header .wrap_head .innerRight nav ul li .dropDown__item {
  margin-left: 0;
}
.header .wrap_head .innerRight nav ul li .link:hover > .dropDown,
.header .wrap_head .innerRight nav ul li .link:focus-within > .dropDown {
  display: block;
}
.header .wrap_head .innerRight nav ul li .dropDown__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header .wrap_head .innerRight nav ul li .dropDown__link {
  padding: 0.5208333333vw 1.0416666667vw;
  transition: color 0.15s;
  color: #333;
}
.header .wrap_head .innerRight nav ul li .dropDown__link:hover,
.header .wrap_head .innerRight nav ul li .dropDown__link:focus {
  color: #4d4d4d;
}
.header .wrap_head .innerRight nav ul .hart {
  margin: 0vw 0vw 0vw 3.125vw;
}
.header .wrap_head .innerRight nav ul .hart a {
  position: relative;
  width: 1.4583333333vw;
  height: 1.4583333333vw;
}
.header .wrap_head .innerRight nav ul .hart a:after {
  content: "";
  width: 1.4583333333vw;
  height: 1.4583333333vw;
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/hart_icon_w.png) no-repeat right center/contain;
  position: absolute;
  top: 0.1041666667vw;
  bottom: 0;
  margin: auto 0;
  right: 0;
}
.header .wrap_head .innerRight nav ul .user {
  margin: 0vw 0vw 0vw 1.0416666667vw;
}
.header .wrap_head .innerRight nav ul .user a {
  position: relative;
  width: 1.4583333333vw;
  height: 1.4583333333vw;
}
.header .wrap_head .innerRight nav ul .user a:after {
  content: "";
  width: 1.25vw;
  height: 1.25vw;
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/user_icon_w.png) no-repeat right center/contain;
  position: absolute;
  top: 0.1041666667vw;
  bottom: 0;
  margin: auto 0;
  right: 0;
}
.header .wrap_head .innerRight nav ul .cart {
  margin: 0vw 0vw 0vw 1.3541666667vw;
}
.header .wrap_head .innerRight nav ul .cart a {
  position: relative;
  width: 1.4583333333vw;
  height: 1.4583333333vw;
}
.header .wrap_head .innerRight nav ul .cart a:after {
  content: "";
  width: 1.40625vw;
  height: 1.40625vw;
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/cart_icon_w.png) no-repeat right center/contain;
  position: absolute;
  top: 0.1041666667vw;
  bottom: 0;
  margin: auto 0;
  right: 0.15625vw;
}
.header .wrap_head .innerRight .hamburger {
  display: none;
}
.header .wrap_head .innerRight .nav_btn,
.header .wrap_head .innerRight .nav_bg {
  display: none;
}

.headerColorScroll {
  background-color: rgba(255, 255, 255, 0.8196078431);
  transition: all 0.6s ease;
}
.headerColorScroll .wrap_head .innerLeft a h1:after {
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/logo_sp.png) no-repeat right center/contain;
}
.headerColorScroll .wrap_head .innerRight nav ul li a {
  color: #333;
  white-space: nowrap;
}
.headerColorScroll .wrap_head .innerRight nav ul li .link {
  color: #333;
}
.headerColorScroll .wrap_head .innerRight nav ul li .link:hover, .headerColorScroll .wrap_head .innerRight nav ul li .link:focus-within {
  color: #333;
}
.headerColorScroll .wrap_head .innerRight nav ul li .dropDown {
  color: #333;
}
.headerColorScroll .wrap_head .innerRight nav ul .hart a:after {
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/hart_icon.png) no-repeat right center/contain;
}
.headerColorScroll .wrap_head .innerRight nav ul .user a:after {
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/user_icon.png) no-repeat right center/contain;
}
.headerColorScroll .wrap_head .innerRight nav ul .cart a:after {
  background: url(/user_data/packages/raku2pc/img/hapt_ec/common/cart_icon.png) no-repeat right center/contain;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #222;
}

.pc {
  display: unset;
}

.sp {
  display: none;
}

iframe {
  height: 42.7083333333vw;
}

.wrap {
  width: 72.9166666667vw;
  margin: auto;
}

/*------------------------------------------------------------------------------
    footer
------------------------------------------------------------------------------*/
footer {
  position: relative;
  z-index: 20;
  margin: 0 auto;
  padding-top: 3.125vw;
  background: #191919;
  margin-top: 0.5208333333vw;
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
footer .wrap .logoWrap {
  margin-right: auto;
}
footer .wrap .logoWrap img {
  width: 6.5104166667vw;
}
footer .wrap .footerLink {
  margin: 0.5208333333vw 0vw 1.5625vw;
  text-align: right;
  position: relative;
  padding-right: 0.8854166667vw;
}
footer .wrap .footerLink:after {
  content: "";
  position: absolute;
  width: 2px;
  height: -webkit-fill-available;
  top: 0;
  right: 0;
  border-right: 1px #fff solid;
}
footer .wrap .footerLink li {
  display: inline-block;
  vertical-align: top;
  margin-right: 1.0416666667vw;
}
footer .wrap .footerLink li a {
  color: #fff;
  font-size: 0.8333333333vw;
  letter-spacing: 1px;
}
footer .wrap .sns {
  padding-left: 2.0833333333vw;
  padding-top: 0.4166666667vw;
}
footer .wrap .sns .insta_icon {
  width: 1.25vw;
}
footer .wrap .sns .line_icon {
  width: 1.25vw;
  padding-left: 1.3541666667vw;
}
footer .copy_wrap {
  width: 72.9166666667vw;
  margin: auto;
}
footer .copy_wrap .copy {
  font-size: 0.8333333333vw;
  color: #767676;
  text-align: right;
  padding: 1.0416666667vw 0vw;
  padding: 1.1979166667vw 0vw 3.125vw;
  width: 100%;
}/*# sourceMappingURL=head_pc.css.map */