:root {
  --color-bg-kv: #92A6A9;
  --color-bg-white: #e9e9e9;
  --color-bg-black: #0A0A0A;
  --color-text-black: #000000;
  --color-text-white: #FFFFFF;
  --color-text-gray: #6B6B6B;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-accent: #B85C38;
  --content-width: 1280px;
  --header-height: 80px;
  --transition: 0.3s ease;
  --header-bg-scrolled: rgba(0, 0, 0, 0.8);
  --header-text: #FFFFFF;
  --header-transition-bg: background 1.2s ease-in;
  --header-transition-transform: transform 0.6s ease;
  --header-font-en: 'Lato', 'Noto Sans JP', sans-serif;
  --px-1: max(0.05vw, 1px);
  --px-2: max(0.10vw, 2px);
  --px-3: max(0.16vw, 3px);
  --px-4: max(0.21vw, 4px);
  --px-5: max(0.26vw, 5px);
  --px-6: max(0.32vw, 6px);
  --px-7: max(0.37vw, 7px);
  --px-8: max(0.42vw, 8px);
  --px-9: max(0.47vw, 9px);
  --px-10: max(0.53vw, 10px);
  --px-11: max(0.58vw, 11px);
  --px-12: max(0.63vw, 12px);
  --px-13: max(0.69vw, 13px);
  --px-14: max(0.74vw, 14px);
  --px-15: max(0.79vw, 15px);
  --px-16: max(0.85vw, 16px);
  --px-17: max(0.90vw, 17px);
  --px-18: max(0.95vw, 18px);
  --px-19: max(1.01vw, 19px);
  --px-20: max(1.06vw, 20px);
  --px-21: max(1.11vw, 21px);
  --px-22: max(1.17vw, 22px);
  --px-23: max(1.22vw, 23px);
  --px-24: max(1.27vw, 24px);
  --px-25: max(1.32vw, 25px);
  --px-26: max(1.38vw, 26px);
  --px-27: max(1.43vw, 27px);
  --px-28: max(1.48vw, 28px);
  --px-29: max(1.54vw, 29px);
  --px-30: max(1.59vw, 30px);
  --px-31: max(1.64vw, 31px);
  --px-32: max(1.70vw, 32px);
  --px-33: max(1.75vw, 33px);
  --px-34: max(1.80vw, 34px);
  --px-35: max(1.85vw, 35px);
  --px-36: max(1.90vw, 36px);
  --px-37: max(1.95vw, 37px);
  --px-38: max(2.01vw, 38px);
  --px-39: max(2.06vw, 39px);
  --px-40: max(2.12vw, 40px);
  --px-41: max(2.17vw, 41px);
  --px-42: max(2.22vw, 42px);
  --px-43: max(2.27vw, 43px);
  --px-44: max(2.33vw, 44px);
  --px-45: max(2.38vw, 45px);
  --px-46: max(2.43vw, 46px);
  --px-47: max(2.49vw, 47px);
  --px-48: max(2.54vw, 48px);
  --px-49: max(2.59vw, 49px);
  --px-50: max(2.65vw, 50px);
  --px-52: max(2.75vw, 52px);
  --px-54: max(2.86vw, 54px);
  --px-56: max(2.96vw, 56px);
  --px-58: max(3.06vw, 58px);
  --px-60: max(3.17vw, 60px);
  --px-62: max(3.27vw, 62px);
  --px-64: max(3.38vw, 64px);
  --px-66: max(3.49vw, 66px);
  --px-68: max(3.59vw, 68px);
  --px-70: max(3.70vw, 70px);
  --px-72: max(3.81vw, 72px);
  --px-74: max(3.91vw, 74px);
  --px-76: max(4.02vw, 76px);
  --px-78: max(4.13vw, 78px);
  --px-80: max(4.23vw, 80px);
  --px-82: max(4.34vw, 82px);
  --px-84: max(4.44vw, 84px);
  --px-86: max(4.55vw, 86px);
  --px-88: max(4.66vw, 88px);
  --px-90: max(4.76vw, 90px);
  --px-92: max(4.87vw, 92px);
  --px-94: max(4.98vw, 94px);
  --px-96: max(5.08vw, 96px);
  --px-98: max(5.19vw, 98px);
  --px-100: max(5.29vw, 100px);
  --px-105: max(5.54vw, 105px);
  --px-110: max(5.82vw, 110px);
  --px-115: max(6.09vw, 115px);
  --px-120: max(6.35vw, 120px);
  --px-125: max(6.62vw, 125px);
  --px-130: max(6.88vw, 130px);
  --px-135: max(7.15vw, 135px);
  --px-140: max(7.41vw, 140px);
  --px-145: max(7.67vw, 145px);
  --px-150: max(7.94vw, 150px);
  --px-155: max(8.21vw, 155px);
  --px-160: max(8.46vw, 160px);
  --px-165: max(8.73vw, 165px);
  --px-170: max(8.99vw, 170px);
  --px-175: max(9.21vw, 175px);
  --px-180: max(9.52vw, 180px);
  --px-185: max(9.78vw, 185px);
  --px-190: max(10.05vw, 190px);
  --px-195: max(10.31vw, 195px);
  --px-200: max(10.58vw, 200px);
  --px-210: max(11.11vw, 210px);
  --px-220: max(11.64vw, 220px);
  --px-230: max(12.17vw, 230px);
  --px-240: max(12.70vw, 240px);
  --px-250: max(13.22vw, 250px);
  --px-260: max(13.75vw, 260px);
  --px-270: max(14.29vw, 270px);
  --px-280: max(14.82vw, 280px);
  --px-290: max(15.34vw, 290px);
  --px-300: max(15.87vw, 300px);
  --px-310: max(16.40vw, 310px);
  --px-320: max(16.93vw, 320px);
  --px-330: max(17.46vw, 330px);
  --px-340: max(17.98vw, 340px);
  --px-350: max(18.52vw, 350px);
  --px-360: max(19.05vw, 360px);
  --px-370: max(19.58vw, 370px);
  --px-380: max(20.10vw, 380px);
  --px-390: max(20.63vw, 390px);
  --px-400: max(21.16vw, 400px);
  --px-410: max(21.70vw, 410px);
  --px-420: max(22.22vw, 420px);
  --px-430: max(22.75vw, 430px);
  --px-440: max(23.28vw, 440px);
  --px-450: max(23.81vw, 450px);
  --px-460: max(24.34vw, 460px);
  --px-470: max(24.86vw, 470px);
  --px-480: max(25.40vw, 480px);
  --px-490: max(25.93vw, 490px);
  --px-500: max(26.46vw, 500px);
  --px-510: max(26.98vw, 510px);
  --px-520: max(27.51vw, 520px);
  --px-530: max(28.04vw, 530px);
  --px-540: max(28.57vw, 540px);
  --px-550: max(29.10vw, 550px);
  --px-560: max(29.63vw, 560px);
  --px-570: max(30.16vw, 570px);
  --px-580: max(30.69vw, 580px);
  --px-590: max(31.22vw, 590px);
  --px-600: max(31.74vw, 600px);
  --px-610: max(32.27vw, 610px);
  --px-620: max(32.80vw, 620px);
  --px-630: max(33.33vw, 630px);
  --px-640: max(33.86vw, 640px);
  --px-650: max(34.39vw, 650px);
  --px-660: max(34.92vw, 660px);
  --px-670: max(35.45vw, 670px);
  --px-680: max(35.98vw, 680px);
  --px-690: max(36.51vw, 690px);
  --px-700: max(37.03vw, 700px);
  --px-710: max(37.56vw, 710px);
  --px-720: max(38.09vw, 720px);
  --px-730: max(38.62vw, 730px);
  --px-740: max(39.15vw, 740px);
  --px-750: max(39.68vw, 750px);
  --px-760: max(40.21vw, 760px);
  --px-770: max(40.74vw, 770px);
  --px-780: max(41.27vw, 780px);
  --px-790: max(41.80vw, 790px);
  --px-800: max(42.33vw, 800px);
  --px-1-: max(-0.05vw, -1px);
  --px-2-: max(-0.10vw, -2px);
  --px-3-: max(-0.16vw, -3px);
  --px-4-: max(-0.21vw, -4px);
  --px-5-: max(-0.26vw, -5px);
  --px-6-: max(-0.32vw, -6px);
  --px-7-: max(-0.37vw, -7px);
  --px-8-: max(-0.42vw, -8px);
  --px-9-: max(-0.47vw, -9px);
  --px-10-: max(-0.53vw, -10px);
  --px-11-: max(-0.58vw, -11px);
  --px-12-: max(-0.63vw, -12px);
  --px-13-: max(-0.69vw, -13px);
  --px-14-: max(-0.74vw, -14px);
  --px-15-: max(-0.79vw, -15px);
  --px-16-: max(-0.85vw, -16px);
  --px-17-: max(-0.90vw, -17px);
  --px-18-: max(-0.95vw, -18px);
  --px-19-: max(-1.01vw, -19px);
  --px-20-: max(-1.06vw, -20px);
  --px-21-: max(-1.11vw, -21px);
  --px-22-: max(-1.17vw, -22px);
  --px-23-: max(-1.22vw, -23px);
  --px-24-: max(-1.27vw, -24px);
  --px-25-: max(-1.32vw, -25px);
  --px-26-: max(-1.38vw, -26px);
  --px-27-: max(-1.43vw, -27px);
  --px-28-: max(-1.48vw, -28px);
  --px-29-: max(-1.54vw, -29px);
  --px-30-: max(-1.59vw, -30px);
  --px-31-: max(-1.64vw, -31px);
  --px-32-: max(-1.70vw, -32px);
  --px-33-: max(-1.75vw, -33px);
  --px-34-: max(-1.80vw, -34px);
  --px-35-: max(-1.85vw, -35px);
  --px-36-: max(-1.90vw, -36px);
  --px-37-: max(-1.95vw, -37px);
  --px-38-: max(-2.01vw, -38px);
  --px-39-: max(-2.06vw, -39px);
  --px-40-: max(-2.12vw, -40px);
  --px-41-: max(-2.17vw, -41px);
  --px-42-: max(-2.22vw, -42px);
  --px-43-: max(-2.27vw, -43px);
  --px-44-: max(-2.33vw, -44px);
  --px-45-: max(-2.38vw, -45px);
  --px-46-: max(-2.43vw, -46px);
  --px-47-: max(-2.49vw, -47px);
  --px-48-: max(-2.54vw, -48px);
  --px-49-: max(-2.59vw, -49px);
  --px-50-: max(-2.65vw, -50px);
  --px-52-: max(-2.75vw, -52px);
  --px-54-: max(-2.86vw, -54px);
  --px-56-: max(-2.96vw, -56px);
  --px-58-: max(-3.06vw, -58px);
  --px-60-: max(-3.17vw, -60px);
  --px-62-: max(-3.27vw, -62px);
  --px-64-: max(-3.38vw, -64px);
  --px-66-: max(-3.49vw, -66px);
  --px-68-: max(-3.59vw, -68px);
  --px-70-: max(-3.70vw, -70px);
  --px-72-: max(-3.81vw, -72px);
  --px-74-: max(-3.91vw, -74px);
  --px-76-: max(-4.02vw, -76px);
  --px-78-: max(-4.13vw, -78px);
  --px-80-: max(-4.23vw, -80px);
  --px-82-: max(-4.34vw, -82px);
  --px-84-: max(-4.44vw, -84px);
  --px-86-: max(-4.55vw, -86px);
  --px-88-: max(-4.66vw, -88px);
  --px-90-: max(-4.76vw, -90px);
  --px-92-: max(-4.87vw, -92px);
  --px-94-: max(-4.98vw, -94px);
  --px-96-: max(-5.08vw, -96px);
  --px-98-: max(-5.19vw, -98px);
  --px-100-: max(-5.29vw, -100px);
  --px-105-: max(-5.54vw, -105px);
  --px-110-: max(-5.82vw, -110px);
  --px-115-: max(-6.09vw, -115px);
  --px-120-: max(-6.35vw, -120px);
  --px-125-: max(-6.62vw, -125px);
  --px-130-: max(-6.88vw, -130px);
  --px-135-: max(-7.15vw, -135px);
  --px-140-: max(-7.41vw, -140px);
  --px-145-: max(-7.67vw, -145px);
  --px-150-: max(-7.94vw, -150px);
  --px-155-: max(-8.21vw, -155px);
  --px-160-: max(-8.46vw, -160px);
  --px-165-: max(-8.73vw, -165px);
  --px-170-: max(-8.99vw, -170px);
  --px-175-: max(-9.21vw, -175px);
  --px-180-: max(-9.52vw, -180px);
  --px-185-: max(-9.78vw, -185px);
  --px-190-: max(-10.05vw, -190px);
  --px-195-: max(-10.31vw, -195px);
  --px-200-: max(-10.58vw, -200px);
  --px-210-: max(-11.11vw, -210px);
  --px-220-: max(-11.64vw, -220px);
  --px-230-: max(-12.17vw, -230px);
  --px-240-: max(-12.70vw, -240px);
  --px-250-: max(-13.22vw, -250px);
  --px-260-: max(-13.75vw, -260px);
  --px-270-: max(-14.29vw, -270px);
  --px-280-: max(-14.82vw, -280px);
  --px-290-: max(-15.34vw, -290px);
  --px-300-: max(-15.87vw, -300px);
  --px-310-: max(-16.40vw, -310px);
  --px-320-: max(-16.93vw, -320px);
  --px-330-: max(-17.46vw, -330px);
  --px-340-: max(-17.98vw, -340px);
  --px-350-: max(-18.52vw, -350px);
  --px-360-: max(-19.05vw, -360px);
  --px-370-: max(-19.58vw, -370px);
  --px-380-: max(-20.10vw, -380px);
  --px-390-: max(-20.63vw, -390px);
  --px-400-: max(-21.16vw, -400px);
  --px-410-: max(-21.70vw, -410px);
  --px-420-: max(-22.22vw, -420px);
  --px-430-: max(-22.75vw, -430px);
  --px-440-: max(-23.28vw, -440px);
  --px-450-: max(-23.81vw, -450px);
  --px-460-: max(-24.34vw, -460px);
  --px-470-: max(-24.86vw, -470px);
  --px-480-: max(-25.40vw, -480px);
  --px-490-: max(-25.93vw, -490px);
  --px-500-: max(-26.46vw, -500px);
  --px-510-: max(-26.98vw, -510px);
  --px-520-: max(-27.51vw, -520px);
  --px-530-: max(-28.04vw, -530px);
  --px-540-: max(-28.57vw, -540px);
  --px-550-: max(-29.10vw, -550px);
  --px-560-: max(-29.63vw, -560px);
  --px-570-: max(-30.16vw, -570px);
  --px-580-: max(-30.69vw, -580px);
  --px-590-: max(-31.22vw, -590px);
  --px-600-: max(-31.74vw, -600px);
  --px-610-: max(-32.27vw, -610px);
  --px-620-: max(-32.80vw, -620px);
  --px-630-: max(-33.33vw, -630px);
  --px-640-: max(-33.86vw, -640px);
  --px-650-: max(-34.39vw, -650px);
  --px-660-: max(-34.92vw, -660px);
  --px-670-: max(-35.45vw, -670px);
  --px-680-: max(-35.98vw, -680px);
  --px-690-: max(-36.51vw, -690px);
  --px-700-: max(-37.03vw, -700px);
  --px-710-: max(-37.56vw, -710px);
  --px-720-: max(-38.09vw, -720px);
  --px-730-: max(-38.62vw, -730px);
  --px-740-: max(-39.15vw, -740px);
  --px-750-: max(-39.68vw, -750px);
  --px-760-: max(-40.21vw, -760px);
  --px-770-: max(-40.74vw, -770px);
  --px-780-: max(-41.27vw, -780px);
  --px-790-: max(-41.80vw, -790px);
  --px-800-: max(-42.33vw, -800px);
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Lato, "Noto Sans JP", "Hiragino Sans", sans-serif;
  color: var(--color-text-black);
  background: var(--color-bg-white);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

img {
  max-width: 100%;
  display: block;
}

#site-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  z-index: 9000;
  background: var(--header-bg-scrolled);
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  height: var(--header-height);
  transform: translateY(0px);
  transition: var(--header-transition-transform), var(--header-transition-bg);
  color: var(--header-text);
  font-weight: 400;
  letter-spacing: 0.18em;
}

#site-header.hidden {
  /* プラットフォーム標準の汎用クラス .hidden { display:none } と
     クラス名が衝突し、付与した瞬間に display:none で消えていた
     （＝transform/transition が効かず一瞬で切り替わって見える）。
     id 付きセレクタで display を上書きし、要素を表示したまま
     transform をアニメーションさせる。 */
  display: block;
  transform: translateY(-100%);
}

.header-inner {
  max-width: 100%;
  width: 98%;
  margin: 0 0 0 2%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  gap: 24px;
}

.header-logo {
  flex-shrink: 0;
  margin-right: auto;
}

.header-logo a {
  color: var(--header-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-family: var(--header-font-en);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.header-logo a:hover {
  opacity: 0.7;
}

.header-search {
  display: flex;
  align-items: center;
}

.header-search {
  & form[name="frmSearch"] {
    display: flex;
  }

  & input.block-global-search--keyword {
    background: transparent;
    border-width: medium medium 1px;
    border-style: none none solid;
    border-color: currentcolor currentcolor rgb(255, 255, 255);
    border-image: initial;
    color: rgb(255, 255, 255);
  }

  & button {
    background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--header-text);
    opacity: 1;
    transition: opacity 0.3s;
  }

  & button:hover {
    opacity: 0.6;
  }

  & button svg {
    width: 18px;
    height: 18px;
    display: block;
  }
}

.header-search button svg circle,
.header-search button svg path,
.header-search button svg line {
  stroke: var(--header-text);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.header-nav a {
  color: var(--header-text);
  font-size: clamp(0.7vw, 15px, 1.4vw);
  font-weight: 300;
  letter-spacing: 0.1em;
  font-family: var(--header-font-en);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.3s;
  padding: 4px 0px;
}

.header-nav a:hover {
  opacity: 1;
}

/* -----------------------------------------------
   NAV LINK ホバー下線アニメーション
   （www.nikka.com の .hover_txt と同一挙動：
     左から線を引き直すワイプ。リンク文字を
     <span class="hover_txt">…</span> で囲む）
----------------------------------------------- */
.header-nav .hover_txt {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.5em 0;
  margin: -0.5em 0;
}

.header-nav .hover_txt::before,
.header-nav .hover_txt::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(100% + 2px);
  height: 1px;
  background: var(--header-text, #fff);
  opacity: 0;
  will-change: transform;
  transition: transform 0.6s ease-in-out, opacity 0.6s;
}

.header-nav .hover_txt::before {
  left: -2px;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition-delay: 0s;
}

.header-nav .hover_txt::after {
  right: -2px;
  transform: scaleX(1);
  transform-origin: 100% 0;
  transition-delay: 0.05s;
}

.header-nav a:hover .hover_txt::before {
  transform: scaleX(1);
  opacity: 1;
  transition-delay: 0.05s;
}

.header-nav a:hover .hover_txt::after {
  transform: scaleX(0);
  opacity: 1;
  transition-delay: 0s;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 8px;
  height: 100%;
}

.header-actions a {
  color: var(--header-text);
  font-weight: 700;
  letter-spacing: 2%;
  font-family: var(--header-font-en);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.3s;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-direction: column;
  justify-content: center;
  padding: 0px 20px;
  line-height: 16px;
  font-size: 12px;
}

.header-actions a:hover {
  opacity: 0.6;
}

.header-actions .cart-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.header-actions .cart-link svg path {
  stroke: var(--header-text);
}

a.header-brand-site {
  padding: 0px 20px;
  transition: background-color 0.3s, opacity 0.3s;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.header-brand-site:hover {
  background-color: rgba(255, 255, 255, 0.12);
  opacity: 1 !important;
}

.header-brand-site svg {
  width: 10px;
  height: 10px;
  display: block;
}

.header-brand-site svg path {
  stroke: var(--header-text);
}

.sp-header-actions {
  display: none;
}

.header-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* min-width: 44px; */
  /* min-height: 44px; */
}

.header-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--header-text);
  transition: 0.3s;
}

.sp-menu-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 9999;
  pointer-events: none;
}

.sp-menu-overlay.open {
  pointer-events: auto;
}

.sp-drawer {
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 60px);
  height: 100%;
  background: var(--color-bg-kv);
  display: flex;
  flex-direction: column;
  padding: 30px 6% 0 52px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}

.sp-menu-overlay.open .sp-drawer {
  transform: translateX(0px);
}

.sp-drawer-left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 100%;
  background: var(--color-bg-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 24px 0px;
}

.sp-menu-overlay.open .sp-drawer-left {
  transform: translateX(0px);
}

.sp-drawer-left-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  font-family: Lato, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
}

.sp-menu-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 32px;
  background: none;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  cursor: pointer;
  padding: 4px;
  align-self: flex-end;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px;
  min-height: 44px;
}

.sp-menu-close svg {
  width: 31px;
  height: 13px;
}

.sp-menu-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #000;
  padding-bottom: 0px;
  margin-bottom: 40px;
}

.sp-menu-search form {
  display: flex;
}

.sp-menu-search .btn-default {
  background-color: transparent !important;
  padding: 0;
}

.sp-menu-search input {
  background: none;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  outline: none;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-black);
  width: 100%;
}

.sp-menu-search input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.sp-menu-search svg {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.sp-menu-nav {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.sp-menu-nav li {
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.12); */
}

.sp-menu-nav li a {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 20px 0px;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-black);
  transition: opacity 0.2s;
  gap: 12px;
}

.sp-menu-nav li a:hover {
  opacity: 0.6;
}

.sp-menu-nav li a .nav-icon {
  font-size: 14px;
  opacity: 0.5;
}

.sp-menu-nav li a .external-icon {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.kv-section {
  position: relative;
  height: calc(100svh - 100px);
  min-height: 600px;
  overflow: hidden;
}

.kv-slides {
  position: fixed;
  inset: 0px;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.kv-slide {
  position: absolute;
  inset: 0px;
  opacity: 0;
  transition: opacity 1.2s;
}

.kv-slide.active {
  opacity: 1;
}

.kv-slide-1 {
  /* background-image: ;
  background-position-x: ;
  background-position-y: ;
  background-repeat: ;
  background-attachment: ;
  background-origin: ;
  background-clip: ;
  background-color: ; */
  background-size: 400px 400px;
}

.kv-slide-2 {
  background: radial-gradient(at 30% 60%, rgb(45, 34, 24) 0%, rgb(13, 10, 6) 70%) rgb(26, 21, 16);
}

.kv-slide-2::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px);
}

.kv-slide-3 {
  background: 0% 0% / 400px 400px rgb(143, 168, 164);
}

.kv-slide-4 {
  background: radial-gradient(at 70% 40%, rgb(28, 21, 13) 0%, rgb(8, 6, 4) 80%) rgb(15, 12, 9);
}

.kv-slide-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-white);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0.6;
}

.kv-emblem {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  opacity: 0.7;
}

.kv-slide-3 .kv-bottom-text {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-black);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.kv-copy {
  position: absolute;
  inset: 0px 0px -45svh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc((100% - var(--content-width)) / 2 + 40px);
  pointer-events: none;
}

.kv-copy-logo {
  margin-bottom: 30px;
}

.kv-copy-logo span {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10%;
  text-transform: uppercase;
  color: var(--color-text-white);
  display: block;
  line-height: 1.6;
}

.kv-copy-heading {
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 16px;
}

.kv-copy-sub {
  font-size: 16px;
  letter-spacing: 10%;
  color: var(--color-text-white);
}

.kv-spacer {
  position: relative;
  height: 100vh;
  min-height: 600px;
  z-index: 5;
}

.main-content {
  position: relative;
  z-index: 10;
  background: var(--color-bg-white);
  margin-top: 0px;
}

.feature-section {
  background: var(--color-bg-kv);
  padding: 0px;
}

.feature-section-label {
  padding: 70px calc((100% - var(--content-width)) / 2);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10%;
}

.feature-inner {
  max-width: var(--content-width);
  margin: 0px auto;
  padding: 0px 0px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.feature-text {
  padding-top: 0px;
}

.feature-heading {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  line-height: 65px;
  margin: 0px 0px 50px;
  letter-spacing: 10%;
}

.feature-body {
  font-size: 16px;
  line-height: 36px;
  max-width: 400px;
  letter-spacing: 10%;
}

.feature-product-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.5);
}

.feature-image-area {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-top: 0px;
}

.feature-product-img {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -105px;
  margin-top: -100px;
}

.product-img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 5;
  background: linear-gradient(145deg, rgb(200, 197, 188) 0%, rgb(168, 165, 156) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-img-placeholder::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(255, 255, 255, 0.1) 0%, transparent 60%);
}

.product-img-label {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  text-align: center;
  padding: 8px;
}

.btn-viewall {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 10%;
  color: var(--color-text-black);
  border: 0.7px solid var(--color-text-black);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  background: transparent;
  text-decoration: none;
  justify-content: center;
  width: 194px;
  height: 62px;
}

.btn-viewall:hover {
  background: var(--color-text-black);
  color: var(--color-text-white);
}

.btn-viewall svg {
  position: absolute;
  top: 14px;
  right: 14px;
}

.btn-viewall svg:hover {
  fill: rgb(255, 255, 255);
}

.feature-1 {
  margin-bottom: 8px;
}

.feature-1 img {
  display: block;
  max-width: 100%;
  height: 272px;
  margin-left: -30px;
}

.feature-link-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

.btn-outer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 380px;
  padding: 18px 32px;
  background: var(--color-bg-black, #0A0A0A);
  color: var(--color-text-white);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  cursor: pointer;
  transition: opacity 0.3s;
}

.btn-outer:hover {
  opacity: 0.85;
  color: var(--color-text-white);
}

.btn-outer .btn-outer-ja {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.85;
  white-space: nowrap;
}

.btn-outer .btn-outer-en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 400;
}

.btn-outer .btn-outer-en svg {
  display: block;
  width: 14px;
  height: 14px;
}

.btn-outer svg path {
  stroke: currentcolor;
}

.middle-01 {
  position: relative;
  height: 560px;
  overflow: hidden;
  background-color: rgb(15, 12, 9);
  background-image: url("/img/usr/top/back.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle-01>img {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  pointer-events: none;
}

.middle-01-emblem {
  text-align: center;
  position: relative;
  z-index: 1;
}

.middle-01-emblem-icon {
  width: 140px;
  height: 140px;
  margin: 0px auto 24px;
  opacity: 0.5;
}

.middle-01-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.lineup-section {
  padding: 80px 0px 175px;
}

.lineup-inner {
  max-width: var(--content-width);
  margin: 0px auto;
  padding: 0px;
}

.section-label {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10%;
  margin-bottom: 40px;
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 48px;
  background: var(--color-border);
}

.lineup-item {
  background: var(--color-bg-white);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}

.lineup-item-img {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  background: linear-gradient(145deg, rgb(232, 230, 225) 0%, rgb(213, 210, 203) 100%);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.lineup-item-img::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}

.lineup-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 8px;
}

.lineup-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.lineup-name-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
}

.lineup-price {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.6);
  margin-top: auto;
}

.lineup-cta {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.news-section {
  background: var(--color-bg-white);
  padding: 0px 0px 80px;
  border-top: 1px solid var(--color-border);
}

.news-inner {
  max-width: var(--content-width);
  margin: 0px auto;
  padding: 60px 40px 0px;
}

.news-list {
  list-style: none;
}

.news-item {
  display: grid;
  grid-template-columns: 140px 120px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0px;
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition);
}

.news-item:hover {
  opacity: 0.7;
}

.news-date {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.45);
}

.news-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.news-title {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.news-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}


#footer_pagetop {
  display: none !important;
}

/*---------
  backToTop
  ---------*/
.backToTop {
  aspect-ratio: 1 / 1;
  background-color: rgba(233, 233, 233, 0.6);
  border: 1px solid #000000;
  display: none;
  position: fixed;
  bottom: 0;
  right: 4%;
  width: var(--px-64);
  height: var(--px-64);
  margin: 0 0 var(--px-28) 0;
  z-index: 9000;
}

.backToTop a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--px-8);
  width: 100%;
  height: 100%;
}

.backToTop svg {
  aspect-ratio: 20 / 27;
  width: var(--px-16);
  transition: transform 0.3s;
}

.backToTop:hover svg {
  transform: translateY(-5px);
}

.backToTop span {
  font-family: "Lato", serif;
  font-size: var(--px-13);
  font-weight: 400;
  letter-spacing: 0.1em;
}


footer {
  background-color: rgb(0, 0, 0);
  padding: var(--px-78) 0 0 0;
}

footer .inner {
  width: 88%;
  max-width: 100%;
  margin: 0px auto;
  letter-spacing: 10%;
}

footer .inner[data-type="wide"] {
  width: 96%;
  margin-top: var(--px-125);
  margin-bottom: var(--px-26);
  display: flex;
  flex-direction: row-reverse;
  align-items: end;
  justify-content: space-between;
}

.footer_menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px-80);
}

.footer_menu .footer_menu_box {}

.footer_menu .footer_menu_box[data-type="no-child"] {
  display: flex;
  gap: var(--px-80);
}

.footer_menu_ttl {
  margin: 0 0 var(--px-26) 0;
  position: relative;
  white-space: nowrap;
}

.footer_menu_ttl a {
  color: rgb(204, 204, 204);
  font-family: Lato, serif;
  font-size: var(--px-15);
  font-weight: 300;
  letter-spacing: 0.1em;
}

.footer_menu ul {
  display: flex;
  flex-direction: column;
  gap: var(--px-16);
}

.footer_menu ul li {
  padding: 0 0 0 var(--px-16);
  position: relative;
}

.footer_menu ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0px;
  width: var(--px-3);
  height: 1px;
  background-color: rgb(204, 204, 204);
  transform: translateY(-50%);
}

.footer_menu ul li a {
  color: rgb(204, 204, 204);
  font-size: var(--px-13);
  font-weight: 400;
}

.footer_sns {
  margin: var(--px-92) 0 0 0;
}

.footer_sns ul {
  display: flex;
  gap: var(--px-15);
  margin: 0 0 var(--px-18) 0;
}

.footer_sns ul li {
  aspect-ratio: 1 / 1;
  background-color: rgb(255, 255, 255);
  border-radius: var(--px-100);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--px-36);
  height: auto;
}

.footer_sns ul li a {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer_sns ul li[data-type="insta"] a img {
  width: var(--px-20);
  height: var(--px-20);
}

.footer_sns ul li[data-type="x"] a img {
  width: var(--px-18);
  height: var(--px-18);
}

.footer_sns ul li img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}

.footer_sns p {
  color: rgb(204, 204, 204);
  font-size: var(--px-12);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.footer_logo {
  width: var(--px-195);
  text-align: center;
}

.footer_logo svg {
  fill: rgb(255, 255, 255);
  height: auto;
}

.footer_logo svg[data-type="emblem"] {
  aspect-ratio: 152 / 113;
  width: var(--px-150);
}

.footer_logo svg[data-type="text"] {
  aspect-ratio: 197 / 19;
  width: 100%;
  margin: var(--px-18) 0 0 0;
}

.footer_nav {
  display: flex;
  flex-direction: column;
  gap: var(--px-24);
}

.footer_nav ul {
  display: flex;
  align-items: center;
  min-width: var(--px-470);
}

.footer_nav ul li {
  height: var(--px-18);
}

.footer_nav ul li[data-type="policy"] {
  min-width: 160px;
}

.footer_nav ul li:nth-of-type(n+2) {
  border-left: 1px solid rgb(204, 204, 204);
}

.footer_nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(204, 204, 204);
  font-size: var(--px-13);
  font-weight: 300;
  height: 100%;
  padding: 0 var(--px-20);
  letter-spacing: 0.1em;
}

.footer_nav ul li[data-type="terms"] a,
.footer_nav ul li[data-type="webuse"] a {
  font-size: var(--px-12);
}

.footer_copyright {
  color: rgb(204, 204, 204);
  font-size: var(--px-12);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 0 var(--px-20);
}

.footer_attention {
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--px-70);
  padding: 0px 2%;
}

.footer_attention p {
  font-size: var(--px-11);
  font-weight: 400;
  letter-spacing: 0px;
  margin: 0 var(--px-6) 0 var(--px-12);
  order: 0;
}

.footer_attention div {
  width: var(--px-35);
}

.footer_attention div[data-type="stop"] {
  aspect-ratio: 35 / 50;
  order: 0;
  width: var(--px-26);
  margin: 0 0 0 var(--px-5);
}

.footer_attention div[data-type="recycle"] {
  aspect-ratio: 1 / 1;
  order: 1;
}

.footer_attention div[data-type="alcohol"] {
  aspect-ratio: 1 / 1;
  margin: 0 0 0 var(--px-5);
  order: 2;
}

.footer_attention div img {
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .header-nav {
    gap: 24px;
  }

  .header-actions {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  main {
    padding: 100px 0px 50px;
  }

  .header-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0px 6%;
    height: var(--px-80);
  }

  .header-nav,
  .header-actions,
  .header-search {
    display: none;
  }

  .sp-header-actions {
    display: flex;
    gap: 30px;
    /* justify-content: center; */
    align-items: center;
  }

  .header-cart,
  .header-hamburger {
    display: flex;
  }

  .header-logo a {
    font-size: 12px;
    width: var(--px-140);
    display: block;
  }

  .header-logo a svg {
    max-width: 100%;
  }

  #site-header {
    background: rgba(0, 0, 0, 0.85);
    height: var(--px-80);
  }

  .kv-slides {}

  .kv-copy {
    padding-left: 6%;
    padding-right: 0;
    inset: auto;
    height: 100vh;
    bottom: -25svh;
  }

  .kv-copy-heading {
    font-size: clamp(40px, 11vw, 60px);
  }

  .kv-copy-logo {
    margin-bottom: 15px;
    padding: 0;
  }

  .kv-copy-logo span {
    font-size: 18px;
  }


  .kv-copy-sub {
    font-size: 14px;
    letter-spacing: 10%;
    color: var(--color-text-white);
  }

  .kv-emblem {
    width: 60px;
    height: 60px;
    right: 5%;
    top: 30%;
  }

  .feature-section-label {
    padding: 90px 6% 0px;
    margin-bottom: 50px;
  }

  .feature-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0px 6% 100px;
  }

  .feature-1 {
    margin-bottom: 0px;
  }

  .feature-image-area {
    margin-bottom: 60px;
  }

  .feature-product-img {
    transform: scale(1.2);
    margin: 0;
  }

  .feature-heading {
    font-size: 36px;
    line-height: 62px;
    padding: 0;
    margin-bottom: 40px;
  }

  .middle-01 {
    height: 400px;
    background-size: contain;
    background-position: center center;
    background-image: url(/img/usr/top/back_sp.jpg);
    /* background-attachment: scroll; */
  }

  .feature-link-area {
    width: 100%;
    /* align-items: center; */
    margin-top: 0;
  }

  .btn-outer {
    max-width: 100%;
    padding: 16px 20px;
  }

  .feature-link-area .btn-viewall {
    font-size: 15px;
    padding: 24px 58px;
    /* gap: 20px; */
  }

  .lineup-section {
    padding: 80px 0px;
  }

  .lineup-inner {
    padding: 0px 6%;

    .section-label {
      padding: 0;
    }

    ul.block-thumbnail-t--items {
      padding: 0;
    }
  }


  .lineup-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lineup-item:last-child {
    grid-column: 1 / -1;
  }

  .btn-viewall {
    width: auto;
    height: auto;
    padding: 24px 58px;
  }

  .news-inner {
    padding: 40px 20px 0px;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .news-title {
    font-size: 12px;
  }

  /*---------
  backToTop
  ---------*/
  .backToTop {
    aspect-ratio: 1 / 1;
    background-color: rgba(233, 233, 233, 0.6);
    border: 1px solid #000000;
    display: none;
    position: fixed;
    bottom: 0;
    right: var(--px-24);
    width: var(--px-50);
    height: var(--px-50);
    margin: 0 0 var(--px-28) 0;
    z-index: 9000;
  }

  .backToTop a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    width: 100%;
    height: 100%;
  }

  .backToTop svg {
    aspect-ratio: 20 / 27;
    width: var(--px-13);
    transition: transform 0.3s;
  }

  .backToTop span {
    font-family: "Lato", serif;
    font-size: var(--px-13);
    font-weight: 400;
    letter-spacing: 0.1em;
  }

  .footer-inner {
    padding: 0px 20px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column-reverse;
    gap: 20px;
    text-align: center;
  }

  footer {
    background-color: rgb(0, 0, 0);
    padding: var(--px-64) 0 0 0;
  }

  footer .inner {
    width: 86%;
    max-width: 100%;
    margin: 0px auto;
  }

  footer .inner[data-type="wide"] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 86%;
    margin-top: var(--px-84);
    padding: 0 0 var(--px-84) 0;
    position: relative;
  }

  .footer_menu {
    display: flex;
    flex-direction: column;
    gap: var(--px-42);
    padding: 0 0 0 var(--px-25);
  }

  .footer_menu .footer_menu_box {}

  .footer_menu .footer_menu_box[data-type="no-child"] {}

  .footer_menu_ttl:not([data-type="contact"]) {
    margin: 0 0 var(--px-24) 0;
  }

  .footer_menu_ttl a {
    color: rgb(204, 204, 204);
    font-family: Lato, serif;
    font-size: var(--px-14);
    font-weight: 300;
    letter-spacing: 0.1em;
  }

  .footer_menu ul {
    display: flex;
    flex-direction: column;
    gap: var(--px-15);
  }

  .footer_menu ul li {
    padding: 0 0 0 var(--px-15);
    position: relative;
  }

  .footer_menu ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    width: var(--px-3);
    height: var(--px-1);
    background-color: rgb(204, 204, 204);
    transform: translateY(-50%);
  }

  .footer_menu ul li a {
    color: rgb(204, 204, 204);
    font-size: var(--px-13);
    font-weight: 400;
  }

  .footer_sns {
    margin: var(--px-110) 0 0 0;
  }

  .footer_sns ul {
    display: flex;
    gap: var(--px-14);
    margin: 0 0 var(--px-30) 0;
  }

  .footer_sns ul li {
    aspect-ratio: 1 / 1;
    background-color: rgb(255, 255, 255);
    border-radius: var(--px-100);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--px-33);
    height: auto;
  }

  .footer_sns ul li a {
    aspect-ratio: 1 / 1;
    display: flex;
  }

  .footer_sns ul li[data-type="insta"] a {
    width: var(--px-16);
    height: var(--px-16);
  }

  .footer_sns ul li[data-type="x"] a {
    width: var(--px-12);
    height: var(--px-12);
  }

  .footer_sns ul li img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }

  .footer_sns p {
    color: rgb(204, 204, 204);
    font-size: var(--px-11);
    font-weight: 400;
    line-height: 1.73;
  }

  .footer_logo {
    width: var(--px-110);
    text-align: center;
    margin: var(--px-8-) 0 0 0;
  }

  .footer_logo svg {
    fill: rgb(255, 255, 255);
    height: auto;
  }

  .footer_logo svg[data-type="emblem"] {
    aspect-ratio: 152 / 113;
    width: var(--px-86);
  }

  .footer_logo svg[data-type="text"] {
    aspect-ratio: 197 / 19;
    width: 100%;
    margin: var(--px-10) 0 0 0;
  }

  .footer_nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--px-14);
    margin: 0 0 var(--px-2-) 0;
    align-items: flex-start;
    min-width: 0px;
  }

  .footer_nav ul li {
    height: auto;
  }

  .footer_nav ul li:nth-of-type(n+2) {
    border-left-width: medium;
    border-left-style: none;
    border-left-color: currentcolor;
  }

  .footer_nav ul li a {
    color: rgb(204, 204, 204);
    font-size: var(--px-11);
    font-weight: 300;
    letter-spacing: 0.1em;
    justify-content: flex-start;
    padding: 0px;
  }

  .footer_copyright {
    color: rgb(204, 204, 204);
    font-size: var(--px-10);
    font-weight: 400;
    position: absolute;
    left: 0px;
    bottom: var(--px-14);
    letter-spacing: 0.05em;
    margin-left: 0px;
    line-height: 17px;
  }

  .footer_attention {
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: var(--px-8) 2%;
    overflow: hidden;
  }

  .footer_attention p {
    font-size: var(--px-9);
    font-weight: 400;
    margin: 0px;
    white-space: nowrap;
    letter-spacing: 0px;
    text-align: justify;
  }

  .footer_attention div {
    width: var(--px-34);
  }

  .footer_attention div[data-type="stop"] {
    aspect-ratio: 35 / 50;
    margin: 0 var(--px-6) 0 0;
  }

  .footer_attention div[data-type="recycle"] {
    aspect-ratio: 1 / 1;
    margin: 0px;
    order: 2;
  }

  .footer_attention div[data-type="alcohol"] {
    aspect-ratio: 1 / 1;
    margin: 0 0 0 var(--px-3);
    order: 3;
  }

  .footer_attention div img {
    width: 100%;
    height: auto;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
}

.block-top-event--goods {
  margin-bottom: 48px;
}

.block-thumbnail-t {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.block-thumbnail-t>li {
  display: block;
  padding: 0px;
}

.block-thumbnail-t--goods {
  padding: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.block-thumbnail-t--goods-image {
  margin-bottom: 40px;
  overflow: hidden;
  border-bottom: 0.5px solid rgb(0, 0, 0);
  padding: 0px;
  height: auto;
}

.block-thumbnail-t--goods-image a {
  display: block;
}

.block-thumbnail-t--goods-image .img-center img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s;
}

.block-thumbnail-t--goods-image:hover .img-center img {
  transform: scale(1.03);
}

.block-thumbnail-t--goods-description {
  margin: 0px;
  display: flex;
  flex-direction: column;

  & .block-thumbnail-t--goods-name {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 10%;
    order: 1;
  }

  & .block-thumbnail-t--goods-name a {
    color: var(--color-text-black);
    transition: opacity 0.2s;
  }

  & .block-thumbnail-t--goods-name a:hover {
    opacity: 0.6;
  }

  & div.variation-name {
    font-size: 14px;
    letter-spacing: 10%;
    order: 0;
  }

  & .block-thumbnail-t--price-infos {
    margin-top: 0px;
    font-size: 17px;
    order: 2;
  }

  & .price {
    font-weight: 400 !important;
    color: rgb(0, 0, 0) !important;
  }
}

.block-thumbnail-t--goods-price {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 8px;
}

.block-top-topic {
  max-width: 1000px;
  margin: 0px auto;
  padding: 175px 0px 135px;
}

.block-top-topic::before {
  content: "";
  display: block;
  background: rgb(0, 0, 0);
  width: 100vw;
  height: 0.7px;
  position: absolute;
  top: -1px;
  left: calc(500px - 50vw);
}

.block-top-topic--items::-webkit-scrollbar {
  width: 1px;
}

.block-top-topic--items::-webkit-scrollbar-thumb {
  background: var(--color-border);
  height: 90px;
}

.block-top-topic--items::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
}

.block-top-topic--items li {
  max-width: 960px;
}

h2.block-top-topic--header {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10%;
  margin: 0px 0px 70px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  background: none;
  padding: 0px;
  text-align: left;
}

.block-top-topic--header.after-border::after,
.block-top-topic--header.bg-after-color::after {
  display: none;
}

.block-top-topic--list {
  list-style: none;
  padding: 0px;
  margin: 0px 0px 40px;
}

.block-top-topic--list li {
  border-bottom: 1px solid var(--color-border);
}

.block-top-topic--list li a {
  display: grid;
  grid-template-columns: 140px 120px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0px;
  transition: opacity 0.2s;
  color: var(--color-text-black);
}

.block-top-topic--list li a:hover {
  opacity: 0.6;
}

.block-top-topic--date {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.block-top-topic--category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.block-top-topic--title {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.block-top-topic .lineup-cta,
.block-top-topic>.lineup-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

@media (max-width: 768px) {

  .block-thumbnail-t {
    grid-template-columns: auto;
  }

  .block-thumbnail-t--goods {
    padding: 20px 16px;
  }

  .block-top-topic {
    padding: 70px 6% 80px;
  }

  .block-top-topic::before {
    left: 0;
  }

  h2.block-top-topic--header {
    margin-bottom: 60px
  }

  h2.block-top-topic--header:after {
    display: none;
  }

  .block-top-topic--items li {
    padding: 26px 0;
  }

  .block-top-topic--items li dt {
    margin-bottom: 15px;
  }

  .block-top-topic--list li a {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0px;
  }

  .block-top-topic--date,
  .block-top-topic--category {
    font-size: 10px;
  }

  .block-top-topic--title {
    font-size: 12px;
  }

  .block-top-topic--next-page {
    display: none;
  }
}

.block-top-body,
.block-top-free-1,
.block-top-free-2,
.block-free-1,
.block-top-event,
.block-top-topic,
.pane-footer {
  position: relative;
  z-index: 1;
}

.block-top-event {
  background: rgb(233, 233, 233);
  box-shadow: rgb(233, 233, 233) 0px 0px 0px 100vmax;
  clip-path: inset(0px -100vmax);
}

.block-top-topic {
  background: var(--color-bg-white, #fff);
  box-shadow: 0 0 0 100vmax var(--color-bg-white, #fff);
  clip-path: inset(0px -100vmax);
  position: relative;
}

.block-topic-path {
  padding: 15px 0px;
  margin: 0px auto;
}

.block-topic-path--list a {
  color: rgb(0, 0, 0);
  font-family: Lato, "Noto Sans JP", serif;
  font-size: var(--px-12);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
}


/* width / utility */
@media (max-width: 768px) {
  .block-inquiry {
    margin: 0px auto;
    width: 88%;
  }
}

/*history*/
.block-recent-item--header {
  font-size: 0;
  text-align: left;
  border-top: none;
  padding: 0;
  margin-bottom: 40px;
}

.block-recent-item--header:after {
  content: "HISTORY";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  margin-left: 0em;
  height: auto;
  background-color: #444;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10%;
}

.block-recent-item--empty-message {
  text-align: left;
}


.page-category :not(footer)>.container {
  width: 88%;
  margin: 0px auto;
  max-width: 1280px;

  & .pane-main {
    margin-top: 0px;
  }

  & .pane-main .block-category-list--goods {
    width: 100%;
    margin: 0px auto;
  }

  & .block-category-list--header-freespace {
    padding: 60px 0px;
  }

  & .category_fs_wrap {
    width: 100%;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;

    & .flex_left {
      width: 35%;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;

      & img {
        width: 75%;
      }

      & h1 {
        margin-bottom: 7px;
      }
    }

    & .flex-right {
      width: 60%;

      & .feature-body {
        max-width: 100%;
        font-weight: 700;
      }
    }

    & dl.block-goods-list--sort-order-items {
      display: none;
    }
  }

  & .block-goods-list--sort-order-items {
    display: none;
  }
}

@media (max-width: 768px) {
  .block-category-list--header-freespace {
    padding: 0px 6% 12%;

    .category_fs_wrap {
      display: flex;
      flex-direction: column;
    }

    .flex_left {
      display: contents;
    }

    h1 {
      margin: 0px;
      padding: 0px;
      order: 10;
    }

    h2 {
      padding: 0px;
    }

    .feature-body {
      font-size: 14px;
      word-break: keep-all;
    }

    .feature-text {
      margin-bottom: 36px;
    }
  }

  .block-goods-list--sort-order-items,
  .block-goods-list-naviframe {
    display: none;
  }

  .block-thumbnail-t--goods-image {
    margin-bottom: 25px;
  }

  .block-icon {
    margin: 0px 0px 12px;
  }

  .block-thumbnail-t--comment {
    font-size: 12px;
    display: none;
  }

  .block-thumbnail-t--goods-name {
    margin-bottom: 18px;
  }

  .block-thumbnail-t--price {
    font-size: 17px;
  }

  .block-category-list--sub {
    display: none;
  }

  .block-topic-path {
    padding: 0 6%;
    background-color: transparent;
  }
}


/*goods*/
.page-goods :not(footer)>.container {
  width: 88%;
  margin: 0px auto;
  max-width: 1280px;

  & .pane-goods-left-side {
    width: calc(-48px + 52.8vw);
    max-width: 700px;
  }

  & .pane-goods-right-side {
    width: calc(-32px + 34.2vw);
    max-width: 500px;
  }
}

dl.goods-detail-description.block-goods-color {
  display: none;
}

.block-contact-about-goods {
  margin-top: 0px;
  text-align: right;
}

.block-contact-about-goods a {
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #000;
  width: auto;
}

.block-goods-qty {
  display: none;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-text-black) !important;
}

.block-goods-detail .swiper-slider-main figure {
  max-height: unset;
  max-width: unset;
}

@media (max-width: 768px) {
  .page-goods {

    letter-spacing: 10%;

    & .block-category-tree,
    & .block-genre-tree {
      display: none;
    }

    .swiper-horizontal {

      &.swiper-rtl .swiper-button-next,
      &.swiper-rtl~.swiper-button-next,
      &~.swiper-button-prev,
      .swiper-button-prev {
        left: -3%;
        right: auto;
      }

      &.swiper-rtl .swiper-button-prev,
      &.swiper-rtl~.swiper-button-prev,
      &~.swiper-button-next,
      .swiper-button-next {
        left: auto;
        right: -3%;
      }

    }

    .block-goods-detail--color-variation-goods-thumbnail-form .swiper-slider-thumbnail {
      margin: 0 0 36px;
    }

    .block-add-cart .block-goods-favorite .btn-default {

      width: 60px;
      height: 60px;
      padding: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 0;
      color: transparent;
      background-color: transparent;
      background-image: url(/img/usr/ico_fav.png);
      background-size: 75%;
      background-repeat: no-repeat;
      background-position: center;
      background-color: transparent !important;
      border: 1px solid #000;
    }

    .block-add-cart .block-goods-favorite .btn-default.block-goods-favorite-registed--btn {
      background-image: url(/img/usr/ico_faved.png);
    }

    .block-contact-about-goods-btn {
      color: var(--color-text-black) !important;
      padding-bottom: 6px;
    }
  }
}