:root {
  --color-base: #000;
  --color-black: #000;
  --color-black-hover: color-mix(in srgb, #fff 40%, var(--color-black));
  --color-white: #fff;
  --color-gray-light-bg: #ebebea;
  --color-gray-light-bg-hover: color-mix(in srgb, #fff 50%, var(--color-gray-light-bg));
  --color-gray-light: #b6bbcc;
  --color-disabled-bg: color-mix(in srgb, #fff 60%, var(--color-gray-light));
  --color-bg-global: #eee;
  --color-bg-base: var(--color-white);
  --color-bg-black: #131116;
  --color-bg-red: #8f0028;
  --color-link-base: #414141;
  --color-link-hover: #999;
  --rem1: 0.0625rem;
  --vw1: min(0.2325581395vw, 0.0625rem);
  --font-size-x3s: calc(var(--vw1)*9);
  --font-size-x2s: calc(var(--vw1)*10);
  --font-size-xs: calc(var(--vw1)*11);
  --font-size-sm: calc(var(--vw1)*12);
  --font-size-base: calc(var(--vw1)*14);
  --font-size-lg: calc(var(--vw1)*15);
  --font-size-xl: calc(var(--vw1)*16);
  --font-size-x2l: calc(var(--vw1)*18);
  --font-size-x3l: calc(var(--vw1)*19);
  --font-size-h1: calc(var(--vw1)*20);
  --font-size-h2: calc(var(--vw1)*20);
  --font-size-h3: calc(var(--vw1)*19);
  --radius-md: calc(var(--vw1)*20);
  --space1: calc(var(--vw1)*4);
  --space2: calc(var(--space1)*2);
  --space2_5: calc(var(--space1)*2.5);
  --space3: calc(var(--space1)*3);
  --space4: calc(var(--space1)*4);
  --space4_5: calc(var(--space1)*4.5);
  --space5: calc(var(--space1)*5);
  --space6: calc(var(--space1)*6);
  --space7: calc(var(--space1)*7);
  --space8: calc(var(--space1)*8);
  --space9: calc(var(--space1)*9);
  --space10: calc(var(--space1)*10);
  --space11: calc(var(--space1)*11);
  --space12: calc(var(--space1)*12);
  --space13: calc(var(--space1)*13);
  --space14: calc(var(--space1)*14);
  --space15: calc(var(--space1)*15);
  --space16: calc(var(--space1)*16);
  --space17: calc(var(--space1)*17);
  --space18: calc(var(--space1)*18);
  --space20: calc(var(--space1)*20);
  --space22: calc(var(--space1)*22);
  --space25: calc(var(--space1)*25);
  --line-height-base: 1.5;
  --line-height-heading: 1.3;
  --content-width: calc(var(--rem1)*430);
  --kern100: 0.1em;
  --z-header: 999;
  --family-base: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Arial, "BIZ UDPGothic", Meiryo, sans-serif;
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1)
}
*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-feature-settings: inherit !important;
}
:where(:focus-visible) {
  outline-offset: 3px
}
:where(ul, ol) {
  list-style: none
}
:where(img, picture, svg, video, canvas) {
  display: block;
  max-inline-size: 100%
}
:where(input, button, textarea, select) {
  color: currentColor;
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  word-spacing: inherit
}
:where(textarea) {
  resize: none
}
:where(textarea:not([rows])) {
  max-height: 10lh;
  min-height: 2lh;
  field-sizing: content
}
html {
  scroll-behavior: smooth;
  scroll-margin-block: 0
}
body {
  background: var(--color-bg-global);
  color: var(--color-base);
  font-family: var(--family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base)
}
:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--line-height-heading)
}
:where(h1) {
  font-size: var(--font-size-h1)
}
:where(h2) {
  font-size: var(--font-size-h2)
}
:where(h3) {
  font-size: var(--font-size-h3)
}
:where(a) {
  color: currentColor;
  -webkit-text-decoration: none;
  text-decoration: none
}
main {
  background: var(--color-bg-base);
  margin-inline: auto;
  max-width: var(--content-width);
  padding-bottom: var(--space20);
  position: relative
}
main.is-active:before {
  opacity: 0 !important;
  transition: all .3s linear .1s;
  visibility: hidden !important
}
main:before {
  background-color: var(--color-white);
  content: "";
  inset: 0;
  position: absolute;
  will-change: opacity;
  z-index: 10
}
main :where(a) {
  color: var(--color-link-base);
  -webkit-text-decoration: underline;
  text-decoration: underline
}
main :where(a:hover) {
  color: var(--color-link-hover)
}
.bg-code,
.bg-logo {
  display: grid;
  height: 100%;
  place-items: center;
  position: fixed;
  z-index: 0
}
:is(.bg-code, .bg-logo) img {
  block-size: auto;
  inline-size: 100%
}
.bg-logo {
  inline-size: calc(var(--rem1)*180);
  inset-inline-start: calc(50% - var(--rem1)*571)
}
.bg-code {
  inline-size: calc(var(--rem1)*108);
  inset-inline-start: calc(50% + var(--rem1)*425)
}
.bg-houga {
  transform: translateY(-0%) !important;
}
.c-button-houga {
  --c-button-houga-text: var(--color-white);
  --c-button-houga-text-hover: var(--color-white);
  --c-button-houga-bg: var(--color-black);
  --c-button-houga-bg-hover: var(--color-black-hover);
  --c-button-houga-border: var(--color-black);
  --c-button-houga-border-hover: var(--color-black-hover);
  --c-button-houga-border-width: 1px;
  --c-button-houga-padding: calc(var(--vw1)*2) var(--space3);
  --c-button-houga-font-size: var(--font-size-x2s);
  --c-button-houga-radius: 0;
  --c-button-houga-gap-icon: 0.5em;
  appearance: none;
  background-color: var(--c-button-houga-bg);
  border: solid var(--c-button-houga-border) var(--c-button-houga-border-width);
  border-radius: var(--c-button-houga-radius);
  box-shadow: none;
  color: var(--c-button-houga-text);
  cursor: pointer;
  display: inline-grid;
  font-size: var(--c-button-houga-font-size);
  font-weight: 700;
  line-height: 1;
  min-width: calc(var(--vw1)*68);
  padding: var(--c-button-houga-padding);
  place-items: center;
  position: relative;
  transition: color .15s ease-in-out;
  transition-property: color, background-color, border-color;
  vertical-align: middle;

  justify-content: center;
  margin-inline: auto;
}
.c-button-houga,
.c-button-houga:hover {
  -webkit-text-decoration: none;
  text-decoration: none
}
.c-button-houga:hover {
  background-color: var(--c-button-houga-bg-hover);
  border-color: var(--c-button-houga-border-hover);
  color: var(--c-button-houga-text-hover)
}
.c-button-houga:disabled,
.c-button-houga[aria-disabled],
.c-button-houga[disabled],
.c-button-houga[inert] {
  --c-button-houga-bg: var(--color-disabled-bg);
  --c-button-houga-border: var(--color-disabled-bg);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none
}
.c-button-houga.is-outline {
  --c-button-houga-text: var(--color-black);
  --c-button-houga-text-hover: var(--color-white);
  --c-button-houga-bg: var(--color-white);
  --c-button-houga-bg-hover: var(--color-black);
  --c-button-houga-border-hover: var(--color-black)
}
.c-button-houga.is-small {
  --c-button-houga-padding: var(--space1) var(--space3);
  --c-button-houga-font-size: var(--font-size-sm)
}
.c-button-houga.is-large {
  --c-button-houga-padding: var(--space1) var(--space2);
  --c-button-houga-font-size: var(--font-size-base)
}
.u-visually-hidden {
  border: 0 !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
  clip: rect(0, 0, 0, 0) !important
}
.a-disable :not(.a-force),
:is(.a-disable :not(.a-force)):after,
:is(.a-disable :not(.a-force)):before {
  animation: none !important
}
.a-pause :not(.a-force),
:is(.a-pause :not(.a-force)):after,
:is(.a-pause :not(.a-force)):before {
  animation-play-state: paused !important
}
.u-disable-click,
.u-disable-click * {
  pointer-events: none !important
}
:where(.u-fluid) {
  display: block;
  height: auto;
  width: 100%
}
.c-inview {
  --in-delay: 0s;
  --fade-in-duration: 0.3s;
  --fade-in-easing: linear;
  --trans-in-duration: 0.6s;
  --trans-in-easing: var(--ease-out-cubic);
  --trans-in-start-x: 0;
  --trans-in-start-y: calc(var(--vw1)*15);
  animation: fade-in var(--fade-in-duration) var(--fade-in-easing) calc(var(--in-delay) + .1s) both, trans-in var(--trans-in-duration) var(--trans-in-easing) calc(var(--in-delay) + .1s) both
}
.c-inview:not(.is-in) {
  animation-play-state: paused !important
}
@keyframes maskSlide {
  0% {
    clip-path: inset(0 100% 0 0)
  }
  to {
    clip-path: inset(0)
  }
}
@keyframes fade-in {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes trans-in {
  0% {
    translate: var(--trans-in-start-x) var(--trans-in-start-y)
  }
  to {
    translate: 0 0
  }
}
.c-inview-cover {
  --cover-in-delay: 0s;
  --cover-in-duration: 0.6s;
  --cover-in-easing: var(--ease-out-quart);
  position: relative
}
.c-inview-cover:not(.is-in):before {
  animation-play-state: paused !important
}
.c-inview-cover.is-red:before {
  background-color: var(--color-bg-red)
}
.c-inview-cover.is-hero:before {
  background-image: linear-gradient(to right, var(--color-bg-red), var(--color-bg-red) 50%, var(--color-bg-black) 50%, var(--color-bg-black) 100%)
}
.c-inview-cover:before {
  animation: maskSlideBefore var(--cover-in-duration) var(--cover-in-easing) var(--cover-in-delay) both;
  background-color: var(--color-bg-black);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1
}
@keyframes maskSlideBefore {
  0% {
    clip-path: inset(0)
  }
  to {
    clip-path: inset(0 0 0 100%)
  }
}
.hero-container {
  --cover-in-delay: 0.65s;
  --cover-in-duration: 0.85s;
  margin-bottom: var(--space10);
  position: relative
}
.hero-container>.title {
  --in-delay: 0.2s;
  --fade-in-duration: 0.5s;
  --trans-in-duration: 0.8s;
  bottom: calc(var(--vw1)*54);
  left: calc(var(--vw1)*59);
  position: absolute;
  width: calc(var(--vw1)*312);
  z-index: 1
}
.lead-section {
  --in-delay: 0.6s;
  --fade-in-duration: 0.4s;
  border: 1px solid var(--color-black);
  font-size: var(--font-size-sm);
  line-height: 2.7;
  margin: 0 var(--space10) calc(var(--vw1)*220);
  padding: var(--space10) var(--space6);
  text-align: center
}
.lead-section>.text:not(:last-child) {
  margin-bottom: var(--space8)
}
.product-section {
  margin-bottom: var(--space20)
}
.product-section>.title {
  margin-bottom: var(--space10)
}
.product-section>.lead {
  --in-delay: 0.1s;
  font-size: var(--font-size-xs);
  line-height: 1.8;
  margin-bottom: var(--space7);
  text-align: center
}
.product-detail {
  margin-bottom: var(--space15)
}
.product-detail.is-02 {
  margin-bottom: 0
}
.product-detail.is-02>.imageWrap {
  margin-inline: auto;
  margin-bottom: var(--space6);
  width: calc(var(--vw1)*350)
}
.product-detail>.imageWrap {
  --fade-in-duration: 0.4s;
  --trans-in-duration: 0.7s;
  display: block;
  margin-bottom: var(--space9);
  overflow: hidden
}
:is(.product-detail>.imageWrap):hover>.img {
  filter: brightness(1.035);
  scale: 1.015
}
:is(.product-detail>.imageWrap)>.img {
  transition: scale .6s var(--ease-out-cubic), filter .2s linear
}
.product-info {
  display: flex;
  gap: var(--space8);
  justify-content: center;
  line-height: 1.4
}
.product-info+.product-info {
  margin-top: var(--space5)
}
.product-info-item {
  text-align: center
}
.product-info-item.is-invert {
  color: var(--color-white)
}
.product-info-item.is-invert>.buy {
  --c-button-houga-text: var(--color-white);
  --c-button-houga-text-hover: var(--color-black);
  --c-button-houga-bg: var(--color-black);
  --c-button-houga-bg-hover: var(--color-white);
  --c-button-houga-border: var(--color-white);
  --c-button-houga-border-hover: var(--color-white)
}
.product-info-item:nth-child(2n)>.nameRow {
  --in-delay: 0.1s
}
.product-info-item:nth-child(2n)>.priceRow {
  --in-delay: 0.15s
}
.product-info-item:nth-child(2n)>.buy {
  --in-delay: 0.25s
}
.product-info-item>.nameRow {
  align-items: baseline;
  display: flex;
  justify-content: center
}
:is(.product-info-item>.nameRow)>.name {
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin-right: var(--space1)
}
:is(.product-info-item>.nameRow)>.code {
  font-size: var(--font-size-xs)
}
:is(.product-info-item>.nameRow)>.color {
  font-size: var(--font-size-x2s)
}
.product-info-item>.priceRow {
  --in-delay: 0.05s;
  align-items: baseline;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space2)
}
:is(.product-info-item>.priceRow)>.price {
  font-size: var(--font-size-lg);
  font-weight: 700;
  grid-area: price
}
:is(.product-info-item>.priceRow)>.tax {
  font-size: var(--font-size-xs);
  font-weight: 400
}
.product-info-item>.buy {
  --in-delay: 0.15s
}
.product-info-item>.release {
  --in-delay: 0.15s;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 2
}
.styling-section {
  margin-bottom: var(--space14)
}
.styling-item.is-01>.imageWrap {
  background-color: var(--color-bg-black);
  padding-block: var(--space4)
}
.styling-item.is-01.is-red>.imageWrap {
  background-color: var(--color-bg-red)
}
.styling-item.is-02 {
  margin-top: var(--space20)
}
.styling-item.is-02>.imageWrap {
  background-color: var(--color-bg-black);
  margin-inline: auto;
  padding: 0 0 var(--space3) var(--space3);
  width: calc(var(--vw1)*350)
}
.styling-item.is-03 {
  background-color: var(--color-bg-black);
  color: var(--color-white);
  margin-block: var(--space15) 0;
  padding-block: var(--space17)
}
.styling-item.is-03>.imageWrap {
  margin-inline: auto;
  width: calc(var(--vw1)*350)
}
.styling-item>.title {
  margin-inline: auto;
  margin-bottom: var(--space3);
  width: calc(var(--vw1)*109)
}
.styling-item>.imageWrap {
  display: block;
  margin-bottom: var(--space6);
  overflow: hidden
}
:is(.styling-item>.imageWrap):hover>.img {
  filter: brightness(1.035);
  scale: 1.015
}
:is(.styling-item>.imageWrap)>.img {
  transition: scale .6s var(--ease-out-cubic), filter .2s linear
}
.styling-item>.descWrap {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space5);
  padding-inline: var(--space10);
  text-align: center
}
:is(.styling-item>.descWrap)>.text {
  --in-delay: 0.05s;
  margin-bottom: var(--space3);
  letter-spacing: 0.08em
}
:is(.styling-item>.descWrap)>.text--long {
  letter-spacing: 0.03em
}
:is(.styling-item>.descWrap)>.staff {
  --in-delay: 0.1s
}
.item-section {
  margin-bottom: var(--space22);
  padding: 0 var(--space6)
}
.item-section>.title {
  margin: 0 auto var(--space10);
  width: calc(var(--vw1)*52)
}
.item-section>.itemList {
  display: grid;
  gap: var(--space4_5);
  grid-template-columns: 1fr 1fr
}
.item-card {
  background-color: var(--color-gray-light-bg);
  display: block;
  padding: var(--space3) var(--space3) var(--space2_5);
  position: relative;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: color .15s ease-in-out;
  transition-property: color, background-color
}
.item-card:hover {
  background-color: var(--color-gray-light-bg-hover);
  color: var(--color-black-hover)
}
.item-card:hover>.image {
  scale: 1.05
}
:is(.item-card:hover>.infoRow)>.buy {
  background-color: var(--color-black);
  color: var(--color-white)
}
.item-card:nth-child(2n) {
  --in-delay: 0.1s
}
.item-card:nth-child(2n)>.image {
  --in-delay: 0.3s
}
.item-card>.name {
  font-size: var(--font-size-xs)
}
.item-card>.image {
  --in-delay: 0.2s;
  --trans-in-start-y: calc(var(--vw1)*10);
  --fade-in-duration: 0.4s;
  margin: 0 auto var(--space4);
  transition: scale .4s var(--ease-out-cubic);
  width: calc(var(--vw1)*140)
}
.item-card>.infoRow {
  align-items: center;
  display: flex;
  justify-content: space-between
}
:is(.item-card>.infoRow)>.price {
  font-size: var(--font-size-sm)
}
:is(.item-card>.infoRow)>.buy {
  background-color: var(--color-gray-light-bg);
  border: 1px solid var(--color-black);
  color: var(--color-black);
  display: inline-block;
  font-size: var(--font-size-x3s);
  line-height: 1;
  padding: calc(var(--vw1)*2) calc(var(--vw1)*6);
  text-align: center;
  transition: color .15s ease-in-out;
  transition-property: color, background-color
}
.about-section {
  margin-inline: var(--space13) var(--space10);
  padding-block: var(--space17)
}
.about-section>.title {
  margin-bottom: var(--space3);
  width: calc(var(--vw1)*53)
}
.about-section>.brand {
  --cover-in-delay: 0.15s;
  margin-bottom: var(--space12);
  width: calc(var(--vw1)*156)
}
:is(.about-section>.aboutBody)>.concept {
  --in-delay: 0.2s;
  font-size: var(--font-size-lg);
  line-height: 1.8;
  margin-bottom: var(--space7)
}
:is(.about-section>.aboutBody)>.desc {
  --in-delay: 0.3s;
  font-size: var(--font-size-sm);
  line-height: 2.5;
  margin-bottom: var(--space10)
}
:is(:is(.about-section>.aboutBody)>.desc) p:not(first-child) {
  margin-top: 2.3em
}
:is(.about-section>.aboutBody)>.more {
  --in-delay: 0.4s
}
@media screen and (width >=768px) {
  .u-hide-md {
    display: none !important
  }
}
@media screen and (width < 768px) {
  .u-hide-until-md {
    display: none !important
  }
}
@media not print {
  :where(body) {
    min-height: 100dvh
  }
}
.c-additional-info {
  margin-top: var(--space10);
  margin-bottom: 0 !important;
  font-weight: bold;
  >.text {
    font-size: 10px;
  margin-bottom: 0 !important;
  }
}
.c-additional-info--wrap {
  text-align: center;
  padding-inline: var(--space10);
  padding-bottom: var(--space7);
}