@charset "UTF-8";
/*
	BASE
*******************************/
/*
font-family: "Zen Kaku Gothic New", sans-serif;
font-family: "Lato", sans-serif;
font-family: goldenbook, serif;
*/
* {
  font-family: "Lato", "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
}
.en, .en * {
  font-family: goldenbook, serif;
}
:root {
  --color_main: #DE1557;
}
html {
  font-size: 62.5%;
  line-height: 1;
}
html body {
  font-size: 1.6rem;
}
html body img {
  -webkit-backface-visibility: hidden;
  vertical-align: bottom;
  line-height: 0;
  max-width: 100%;
  height: auto;
}
html body p, html body th, html body td, html body dt, html body dd, html body li, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body label {
  color: #000000;
}
html body p {
  margin: 0;
}
html body a {
  color: #000000;
  text-decoration: none;
  outline: none;
  border: none;
}
html body a img {
  outline: none;
  border: none;
  -webkit-backface-visibility: hidden;
}
html body area {
  border: none;
  outline: none;
}
html body ul, html body li, html body dl, html body dt, html body dd {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .clear {
  clear: both;
}
html body :focus {
  outline: none;
}
/*//////////////////////////////////////////////////////////////////////////*/
/*
	BASE LAYOUT
******************/
.sidemenu {
  position: fixed;
  top: 0;
  left: -501px;
  z-index: 9998;
  width: 90%;
  max-width: 500px;
  height: 100vh;
  height: 100dvh;
  background-color: #FFFFFF;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2);
  padding: 30px 20px;
  transition: 0.5s;
}
.sidemenu .close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  cursor: pointer;
}
.sidemenu .close::before {
  font-size: 2.4rem;
  color: #000000;
}
.sidemenu h2 {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 1.5em;
}
.sidemenu .sidemenu_inner {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  overflow: auto;
}
.sidemenu .sidemenu_inner .brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 10px;
}
.sidemenu .sidemenu_inner .brands a {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
  padding-bottom: 1em;
  border-bottom: 1px solid #cccccc;
}
.sidemenu .sidemenu_inner .brands a img {
  display: block;
  width: 100%;
  aspect-ratio: 1.2244897959;
  object-fit: cover;
  margin-bottom: 0.66em;
}
.sidemenu.sidemenu_cat {
  z-index: 9999;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul {
  font-size: 1.3rem;
  text-align: left;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul li {
  border-bottom: 1px solid #cccccc;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul li a {
  font-weight: 500;
  display: grid;
  height: 2.4em;
  align-items: center;
  grid-template-columns: 1fr 2em;
  grid-gap: 0.5em;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul > li:not(:has(ul)) > a .down::before {
  content: none;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul > li:has(ul) {
  position: relative;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul > li:has(ul) > a .down {
  position: relative;
  height: 100%;
  cursor: pointer;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul > li:has(ul) > a .down::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul > li:has(ul) > a .down.open::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul ul {
  display: none;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul ul li {
  border-top: 1px solid #cccccc;
  border-bottom: none;
}
.sidemenu.sidemenu_cat .sidemenu_inner > ul ul li a {
  padding-left: 1em;
}
.sidemenu.sidemenu_menu #menu-spmenu li a {
  font-size: 1.5rem;
  color: #000000;
  display: block;
  padding: 0.66em 0.5em;
  border-bottom: 1px solid #cccccc;
}
body.catopen {
  overflow: hidden;
}
body.catopen .sidemenu_cat {
  left: 0;
}
body.brandopen {
  overflow: hidden;
}
body.brandopen .sidemenu_brand {
  left: 0;
}
body.menuopen {
  overflow: hidden;
}
body.menuopen .sidemenu_menu {
  left: 0;
}
/*
	Contents LAYOUT
******************/
@media screen and (max-width: 900px) {
  .pcOnly {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) {
  .tbOnly {
    display: none !important;
  }
}
@media screen and (min-width: 901px) {
  .spOnly {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .spOnly2 {
    display: none !important;
  }
}