@charset "UTF-8";
@charset "UTF-8";
/* -----------------------------------------------------------------
    reset
----------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  word-break: break-all;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

input,
select {
  font-size: inherit;
}

input::-moz-placeholder {
  color: var(--color-gray-7);
}

input::placeholder {
  color: var(--color-gray-7);
}

input:focus::-moz-placeholder {
  opacity: 0;
}

input:focus::placeholder {
  opacity: 0;
}

pre {
  white-space: pre-wrap;
}

.clearfix {
  display: block;
}
.clearfix::before, .clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.bx-wrapper {
  box-shadow: none !important;
}

.bx-controls-direction a {
  z-index: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
select,
textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  color: inherit;
  font-size: inherit;
  font-family: var(--font-fm-ja);
  -webkit-appearance: none;
}

select {
  white-space: normal;
}

a, button {
  transition: var(--transition);
}

button {
  cursor: pointer;
}

:where(img, picture, video, canvas, svg, iframe) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* -----------------------------------------------------------------
    共通
----------------------------------------------------------------- */
:root {
  --color-text: #333333;
  --color-gray-7: #7C7C7C;
  --color-gray-b: #B8B8B8;
  --color-accent: #E96856;
  --color-white: #fff;
  --color-primary: #3C1A0D;
  --color-sub: #F6F1EB;
  --color-todayback : #D6C6AF;
  --color-beg: #8F8876;
  --color-sil: linear-gradient(90deg,#999999, #A0A0A0, #666666);
  --color-brz: linear-gradient(#D78300 47%, #835000 83%, #73310C);
  --color-ltpnk: #F89E91;
  --color-brn: #C5B59D;
  --font-fm-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-fm-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
  --font-fm-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --padding-inline: min(0.78125rem, 3.333333333333333333vw);
  --min-inner-width: 1200px;
  --min-width: calc(var(--min-inner-width) + var(--padding-inline) * 2);
  --main-inner-width: 91.397849462365591398%;
  --transition: .2s ease;
  --opacity: .7;
  --shadow: 0 2px 2px rgba(#000, .1);
}
@media screen and (max-width: 768px) {
  :root {
    --header-height: min(6.1875rem, 26.4vw);
    --header-bottom-height: min(4.375rem, 18.666666666666666667vw);
  }
}
@media screen and (min-width: 769px) {
  :root {
    --header-height: 8.875rem;
  }
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-block-start: var(--header-height);
}

body {
  position: relative;
  line-height: 1.6;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font-fm-ja);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.hidden {
  overflow: hidden;
}

p a {
  text-decoration: underline;
}
p a:hover {
  text-decoration: none;
}

ul.--dot li {
  position: relative;
  padding-inline-start: min(1.625rem, 6.9333333333vw);
}
ul.--dot li + li {
  margin-block-start: 0.5rem;
}
ul.--dot li::before {
  position: absolute;
  display: block;
  content: "";
  inset-block-start: 0.6rem;
  inset-inline-start: min(0.5rem, 4.2666666667vw);
  width: min(0.375rem, 1.6vw);
  height: min(0.375rem, 1.6vw);
  border-radius: 50%;
}

/* -----------------------------------------------------------------
    slick
----------------------------------------------------------------- */
.slick-arrow,
.slick-dots button {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.slick-arrow {
  transform: translateY(-50%) !important;
  aspect-ratio: 1;
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_slider_small.svg') center/contain no-repeat !important;
  transition: var(--transition);
  z-index: 1;
}
.slick-arrow::before {
  display: none !important;
}
.slick-arrow.slick-next {
  transform: translateY(-50%) scale(-1, 1) !important;
}

/* -----------------------------------------------------------------
    button
----------------------------------------------------------------- */
.bt-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.button {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  font-weight: 500;
}
.button.--more {
  border-block-end: 1px solid var(--color-text);
}
.button.--more span {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-inline-end: min(1.5rem, 6.4vw);
}
.button.--more span::before {
  position: absolute;
  content: "";
  aspect-ratio: 7/12;
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_right.svg') center/contain no-repeat;
}
.button.--default {
  align-items: center;
  justify-content: center;
  padding-block: 0.5rem;
  padding-inline: min(1rem, 4.2666666667vw);
  min-height: 3.125rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  font-weight: 700;
}
.button.--small {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 2.875rem;
  padding-block: 0.3rem;
  padding-inline: min(1.125rem, 4.8vw);
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 400;
  border: 1px solid var(--color-beg);
}
.button.--icon span {
  display: flex;
  align-items: center;
}
.button.--icon span::before {
  content: "";
  margin-inline-end: min(0.625rem, 2.6666666667vw);
  width: min(1.0625rem, 4.5333333333vw);
  aspect-ratio: 1;
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_support_bt.svg') center/contain no-repeat;
}
.button.--cart {
  background: var(--color-accent);
}
.button.--gray {
  background: var(--color-gray-7);
}
.button.--border {
  color: var(--color-primary);
  background: var(--color-white);
  border: 2px solid var(--color-accent);
}

/* -----------------------------------------------------------------
    pager
----------------------------------------------------------------- */
:is(.default-pager, .news-pager) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.default-pager li {
  aspect-ratio: 1/1;
}
.default-pager li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  color: var(--color-primary);
  line-height: 1;
  border: 1px solid var(--color-primary);
}

.pager-num.current a {
  background: var(--color-primary);
  color: var(--color-white);
}

.pager-arrow {
  min-width: min(1.25rem, 5.3333333333vw);
}
.pager-arrow a::before {
  position: absolute;
  display: block;
  content: "＞";
  font-size: 1.25rem;
}
.pager-arrow.prev a::before {
  content: "＜";
}
.pager-arrow.--transparent a {
  background: none;
  border: none;
  pointer-events: none;
}
.pager-arrow.--transparent a::before {
  display: none;
}

/* -----------------------------------------------------------------
    heading
----------------------------------------------------------------- */
.heading {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
}
.heading:not(.--sub, .--news-heading) {
  justify-content: center;
  text-align: center;
}
.heading:not(.--sub, .--news-heading)::before, .heading:not(.--sub, .--news-heading)::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-beg);
}
.heading .heading-inner {
  display: inline-flex;
  flex-direction: column;
  max-width: calc(100% - 2rem);
}
.heading .--ja {
  font-weight: 500;
}
.heading .--en {
  color: var(--color-beg);
  font-weight: 600;
  font-family: var(--font-fm-en);
  letter-spacing: 0.05em;
}
.heading.--sub {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: min(1.25rem, 5.3333333333vw);
  min-height: 2rem;
  font-weight: 700;
  text-align: start;
}
.heading.--sub::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  width: 0.25rem;
  height: 100%;
  background: var(--color-primary);
  border-radius: 0.125rem;
}

/* -----------------------------------------------------------------
    dl.list
----------------------------------------------------------------- */
dl.list {
  width: 100%;
}
dl.list .group {
  display: grid;
}
dl.list:is(.index-news-list, .news-list) .group {
  position: relative;
}
dl.list:is(.index-news-list, .news-list) .group::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, var(--color-gray-b) 2px, var(--color-gray-b) 4px);
}
dl.list:is(.company-list, .law-list) .group {
  border-block-end: 1px solid var(--color-gray-b);
}
dl.list:is(.company-list, .law-list) dt {
  font-weight: 500;
}

/* -----------------------------------------------------------------
    item-list
----------------------------------------------------------------- */
.item-list-container {
  width: 100%;
}

.item-list-wrap {
  width: 100%;
}

.item-list.--grid {
  display: grid;
}

.item-list-item {
  position: relative;
}
.item-list-item > * + * {
  margin-block-start: 1rem;
}
.item-list-item .item-list-image {
  position: relative;
}
.item-list-item .item-list-image a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-list-item .item-list-image a::before {
  display: block;
  content: "";
  padding-block-start: 100%;
}
.item-list-item .item-list-image a img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: var(--transition);
}
.item-list-item .item-list-image.--soldout a::after {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "品切れ";
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  font-weight: 700;
}

.item-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: min(0.5rem, 2.1333333333vw) min(1rem, 4.2666666667vw);
}
.item-icon-list li {
  display: inline-flex;
  height: -moz-fit-content;
  height: fit-content;
}
.item-icon-list img {
  width: auto;
  height: 1.25rem;
}

/* -- price -- */
.price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: min(0.125rem, 0.5333333333vw);
}
.price .price-num {
  line-height: 1;
  font-size: 1rem;
}
.price .price-num.line-through {
  text-decoration: line-through;
}
.price.--small .--tax {
  font-size: 0.9rem;
  line-height: 1;
}
.price.--middle .price-num {
  font-size: 1.125rem;
}
.price.--middle .--tax {
  font-size: 0.75rem;
  line-height: 1.1;
}
.price.--big .price-num {
  font-size: 1.5rem;
}
.price.--big .--tax {
  font-size: 0.875rem;
  line-height: 1.1;
}

/* sale */
.sale-price {
  color: var(--color-accent);
}
.sale-price .price {
  font-weight: 700;
}

.sale-discount-rate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

/* soldout */
.item-soldout {
  color: var(--color-accent);
  font-weight: 700;
}

/* === slider === */
[id^=slider-] {
  display: flex;
  align-items: center;
  width: calc(100% - 80px);
  margin-inline: auto;
}
[id^=slider-] .slick-arrow {
  width: 30px;
  height: 30px;
}
[id^=slider-] .slick-arrow.slick-prev {
  inset-inline-start: -40px;
}
[id^=slider-] .slick-arrow.slick-next {
  inset-inline-end: -40px;
}
[id^=slider-].unslick {
  display: grid;
  align-items: flex-start;
  grid-template-columns: repeat(5, 1fr);
  gap: min(1.5rem, 6.4vw);
  width: 100%;
}
[id^=slider-]:not(.unslick) .item-list-item {
  min-width: 170px;
  max-width: 170px;
  padding-inline: 12px;
}

/* -----------------------------------------------------------------
    sort
----------------------------------------------------------------- */
.sort-wrap {
  align-items: center;
  padding-block-end: 0.375rem;
  font-size: clamp(min(0.75rem, 3.2vw), 16px, min(1.25rem, 5.3333333333vw));
}

.sort-default {
  position: relative;
}
.sort-default dt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.125rem;
  padding-block: 0.5rem;
  padding-inline: min(0.5rem, 2.1333333333vw) min(2rem, 8.5333333333vw);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  line-height: 1;
  transition: var(--transition);
  cursor: pointer;
}
.sort-default dt::before {
  position: absolute;
  display: block;
  content: "";
  inset-inline-end: min(0.625rem, 2.6666666667vw);
  margin-block-start: 0.125rem;
  inline-size: min(0.75rem, 3.2vw);
  aspect-ratio: 12/7;
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_bottom.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.sort-default dd {
  position: absolute;
  display: none;
  inset-block-start: calc(100% - 1px);
  inset-inline-start: 0;
  width: 100%;
  height: auto;
  background: var(--color-white);
  padding: 0.5rem min(0.5rem, 2.1333333333vw);
  border: 1px solid var(--color-primary);
  z-index: 1;
}
.sort-default dd ul li + li {
  margin-block-start: 1em;
}
.sort-default dd ul li a {
  display: block;
}

/* -----------------------------------------------------------------
    empty
----------------------------------------------------------------- */
.empty {
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: 700;
  text-align: center;
}
.empty p {
  font-size: 1.125rem;
}

/* -----------------------------------------------------------------
    modal
----------------------------------------------------------------- */
.makeshop-modal.emodal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.makeshop-modal-window {
  margin-block-end: 0 !important;
  background: var(--color-white) !important;
}
.makeshop-modal-window .error-text {
  font-size: 0.9rem !important;
}
.makeshop-modal-window .emodal-confirm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 3rem;
  line-height: 1.2;
  padding-inline: 2.5rem;
  padding-block: 0 !important;
  margin-block-start: 1.5rem !important;
  margin-inline: auto;
  font-weight: 700;
  background: transparent !important;
  transition: var(--transition) !important;
}

.emodal-close {
  color: var(--color-gray-a) !important;
  transition: var(--transition) !important;
}

.remodal-confirm {
  min-height: 3.125rem;
}

/* -----------------------------------------------------------------
    header
----------------------------------------------------------------- */
#header {
  position: sticky;
  display: block;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--color-white);
  transition: var(--transition);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
  transform: translateZ(0);
  z-index: 500;
}
#header .--inner {
  align-items: center;
  margin-inline: auto;
}

/* === hd-info === */
.hd-info {
  background: var(--color-primary);
}
.hd-info .--inner {
  display: flex;
  justify-content: center;
  padding-inline: var(--padding-inline);
}
.hd-info a {
  color: var(--color-white);
}

/* === hd-bottom === */
.hd-bottom > .--inner {
  display: grid;
  padding-inline: var(--padding-inline);
}

/* -- hd-logo -- */
.hd-logo {
  flex-shrink: 0;
}

/* -- hd-nav-wrap -- */
.hd-nav-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.hd-nav-wrap > * {
  height: 100%;
}

/* - hd-nav - */
.hd-bottom-menu {
  display: flex;
  height: 100%;
}

.hd-b-menu-item {
  display: flex;
  align-items: center;
  min-height: 104px;
  cursor: default;
  font-size: 1rem;
}
.hd-b-menu-item + .hd-b-menu-item::before {
  content: "";
  width: 1px;
  height: 1em;
  background: var(--color-beg);
  margin-inline: 1em;
}
.hd-b-menu-item .hd-b-menu-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: 500;
  text-align: center;
}
.hd-b-menu-item.hd-accordion .hd-b-menu-title {
  gap: 7px;
}
.hd-b-menu-item.hd-accordion .hd-b-menu-title::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 12px;
  aspect-ratio: 12/7;
  background: center/contain no-repeat url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_bottom.svg');
}
.hd-b-menu-item:hover .hd-b-menu-title {
  opacity: var(--opacity);
}

/* child-element */
:is(.child-element, .header-search-child-element) {
  position: absolute;
  display: flex;
  inset-block-start: 100%;
  max-height: 0;
  transition: max-height 0.2s ease, visibility 0.2s ease;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
}

.child-element {
  inset-inline-start: 0;
  min-inline-size: var(--min-width);
  inline-size: 100%;
  background: var(--color-sub);
}
.child-element .--inner {
  width: var(--min-width);
  padding-block: 2rem 2.5rem;
  padding-inline: var(--padding-inline);
}

.hd-accordion:hover .child-element {
  max-height: calc(100vh - var(--header-height));
  visibility: visible;
}

.child-element-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.375rem 8.8333333333%;
  width: 100%;
}

.child-element-menu-item a {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  min-height: 2rem;
  height: 100%;
  padding-block: 0.5rem;
  padding-inline: min(1rem, 4.2666666667vw) min(2rem, 8.5333333333vw);
  font-weight: 500;
  border-block-end: 1px solid var(--color-text);
}
.child-element-menu-item a::before {
  position: absolute;
  display: block;
  content: "";
  inset-inline-end: min(0.875rem, 3.7333333333vw);
  height: min(0.75rem, 3.2vw);
  aspect-ratio: 7/12;
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_right.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* - hd-icon-menu - */
.hd-icon-menu {
  display: flex;
}

.hd-icon-menu-item > :is(a, button) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: min(0.25rem, 1.0666666667vmin);
  block-size: 100%;
  inline-size: 100%;
}
.hd-icon-menu-item .--icon {
  position: relative;
  background: center/contain no-repeat;
  aspect-ratio: 1;
}
.hd-icon-menu-item .--text {
  font-size: min(0.75rem, 3.2vw);
}
.hd-icon-menu-item.--search .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_search.svg'), url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_close.svg');
  background-size: contain, 0 0;
}
.hd-icon-menu-item.--search.active .--icon {
  background-size: 0 0, contain;
}
.hd-icon-menu-item:is(.--mypage, .--entry) .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_user.svg');
}
.hd-icon-menu-item.--login .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_login.svg');
}
.hd-icon-menu-item.--logout .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_logout.svg');
}
.hd-icon-menu-item.--cart a {
  background: var(--color-accent);
  color: var(--color-white);
}
.hd-icon-menu-item.--cart .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_cart.svg');
}
.hd-icon-menu-item.--favorite .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_favorite.svg');
}
.hd-icon-menu-item.--hamburger button {
  background: var(--color-sub);
}

/* header-cart */
.cart-count {
  position: absolute;
  inset-block-start: calc(-1 * min(0.4375rem, 1.8666666667vw));
  inset-inline-end: calc(-1 * min(0.6875rem, 2.9333333333vw));
  display: flex;
  justify-content: center;
  min-width: min(1.375rem, 5.8666666667vw);
  aspect-ratio: 1;
  line-height: calc(min(1.375rem, 5.8666666667vw) - 2px);
  background: var(--color-white);
  color: var(--color-text);
  font-size: min(0.875rem, 3.7333333333vw);
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}
.cart-count.hide {
  display: none;
}

/* open-bt */
.open-bt.active::before {
  display: block;
}
.open-bt .--icon {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_hamburger.svg'), url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_close.svg');
  background-size: contain, 0 0;
}
.open-bt.active .--icon {
  background-size: 0 0, contain;
}

/* header-search-child-element */
.header-search-child-element .--inner {
  width: 100%;
}
.header-search-child-element.active {
  max-height: calc(100vh - var(--header-height));
  visibility: visible;
}

.search-form-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-keyword {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
}

.searchform-submit {
  position: absolute;
  display: block;
  inset-inline-start: min(0.5rem, 6.4vw);
  margin-block-end: 0.0625rem;
  aspect-ratio: 1;
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_header_search.svg') center/contain no-repeat;
}

/* -- tel-box -- */
.tel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  padding-inline: min(0.9375rem, 4vw);
  background: var(--color-sub);
}
.tel-box .--text {
  font-size: 0.875rem;
  text-align: center;
}
.tel-box .--num {
  display: flex;
  align-items: center;
  font-size: min(1.375rem, 5.8666666667vw);
  font-weight: 700;
}
.tel-box .--num a {
  color: var(--color-text);
}
.tel-box .--num::before {
  content: "";
  margin-inline-end: min(0.25rem, 1.0666666667vw);
  width: min(1.625rem, 6.9333333333vw);
  aspect-ratio: 1;
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_tel.svg') center/contain no-repeat;
}

/* -----------------------------------------------------------------
    footer
----------------------------------------------------------------- */
#footer {
  background: var(--color-sub);
}

/* === ft-top === */
/* -- ft-top-upper -- */
.ft-top-upper {
  display: grid;
}

.ft-heading {
  font-weight: 700;
}

.ft-guide-text > * + * {
  margin-block-start: 1.5rem;
}
.ft-guide-text p {
  font-size: 0.875rem;
}

.ft-company-info-data > * + * {
  margin-block-start: 1rem;
}

/* -- ft-top-lower -- */
.ft-top-lower {
  display: grid;
}

/* ft-sns-menu */
.ft-sns-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* === ft-bottom === */
.ft-bottom {
  background: var(--color-primary);
}
.ft-bottom .--inner {
  display: flex;
  align-items: center;
  color: var(--color-white);
}

/* -- ft-bottom-menu -- */
.ft-bottom-menu {
  display: flex;
  align-items: center;
}

.ft-bottom-menu-item a {
  color: var(--color-white);
}

/* -----------------------------------------------------------------
    top-bt
----------------------------------------------------------------- */
#top-bt {
  position: fixed;
  display: block;
  inset-block-end: -100%;
  inset-inline-end: var(--padding-inline);
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_topbt.svg') center/contain no-repeat;
  aspect-ratio: 1;
  transition: var(--transition);
  box-shadow: var(--shadow);
  z-index: 1;
}
#top-bt.show {
  inset-block-end: var(--padding-inline);
}

/* -----------------------------------------------------------------
    side
----------------------------------------------------------------- */
.side-heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);
  padding-block: 0.5rem;
  padding-inline: min(0.5rem, 2.1333333333vw);
  color: var(--color-white);
  font-weight: 700;
}

/* === side-top-list === */
.side-top-list {
  display: flex;
  justify-content: center;
  gap: min(2.25rem, 9.6vw);
  padding-inline: var(--padding-inline);
  margin-block: 2.5rem;
}

.side-top-item a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  min-height: 3.90625rem;
  padding-block-start: 2.8125rem;
  font-size: 0.75rem;
}
.side-top-item a::before {
  position: absolute;
  display: block;
  content: "";
  inset-block-start: 0;
  width: min(2.5rem, 10.6666666667vw);
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.side-top-item a span {
  width: 100%;
  text-align: center;
}
.side-top-item:is(.--entry, .--mypage) a::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_user.svg');
}
.side-top-item.--login a::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_login.svg');
}
.side-top-item.--logout a::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_logout.svg');
}
.side-top-item.--guide a::before {
  background-image: url(https://gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_guide.svg);
}
.side-top-item.--support a::before {
  background-image: url(https://gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_support.svg);
}
.side-top-item.--company a::before {
  background-image: url(https://gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_shop.svg);
}
.side-top-item.--favorite a::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_spmenu_favorite.svg');
}

/* === subbanner-list === */
.subbanner-list {
  display: grid;
  gap: 1.5rem;
}

.subbanner-item {
  width: 100%;
}
.subbanner-item a {
  display: block;
}
.subbanner-item a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* === side-cont === */
/* -- side-ct-list -- */
.side-ct-list {
  position: relative;
}

.side-ct-item {
  position: relative;
}
.side-ct-item :is(.side-ct-item-link, .ct-child-title) {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 0.3rem;
  padding-inline-end: min(2rem, 8.5333333333vw);
}
.side-ct-item :is(.side-ct-item-link, .ct-child-title)::before {
  position: absolute;
  display: block;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
}
.side-ct-item .side-ct-item-link::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_right.svg');
  background-size: auto min(0.75rem, 3.2vw);
}
.side-ct-item .ct-child-title {
  transition: var(--transition);
}
.side-ct-item .ct-child-title:hover {
  opacity: var(--opacity);
}

/* -- accordion -- */
.side-accordion {
  cursor: pointer;
}
.side-accordion::before {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_plus.svg'), url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_minus.svg');
  background-size: min(0.75rem, 3.2vw) auto, 0;
  transition: var(--transition);
}
.side-accordion.open::before {
  background-size: 0, min(0.75rem, 3.2vw) auto;
}

/* -- 2階層以下 -- */
.side-ct-child-list {
  position: relative;
}

/* === sp-menu === */
.sp-menu {
  display: grid;
  gap: 1.25rem;
}

.sp-item a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);
  padding-block: 0.5rem;
  color: var(--color-white);
  font-weight: 700;
  min-height: 2.5rem;
  font-size: 0.875rem;
}

/* === sns === */
/* side-sns-menu */
.side-sns-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
}

.sns-menu-item {
  width: 2rem;
  height: 2rem;
}
.sns-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.sns-menu-item.--x a {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_sns_x_1.webp');
}
.sns-menu-item.--inst a {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_sns_inst_1.webp');
}
.sns-menu-item.--fb a {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_sns_fb_1.webp');
}

/* === side-cont.--banner === */
.side-cont.--banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* === calendar === */
.side-cont.--cal {
  margin-block-start: 2.5rem;
}

.cal-wrap {
  margin-inline: auto;
}
.cal-wrap + .cal-wrap {
  margin-block-start: 1.25rem;
}

.calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.calendar table {
  width: 100%;
}
.calendar table tr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar table :is(th, td) {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: clamp(11px, 14px, min(0.875rem, 3.73vw));
  border: min(0.125rem, 0.5333333333vw) solid var(--color-white);
  border-radius: min(0.375rem, 1.6vw);
}
.calendar table thead tr {
  margin-block-end: 0.3125rem;
}
.calendar table thead th {
  height: 1.25rem;
}
.calendar table tbody td {
  align-items: center;
  height: 1.8125rem;
  padding-block-end: 1px;
}
.calendar table td.today {
  color: var(--color-primary);
  background: var(--color-todayback) !important;
}

.cal-title {
  font-size: 1.125rem;
}

/* -- color-list -- */
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem min(0.625rem, 2.6666666667vw);
  margin-block-start: 0.75rem;
  padding-inline-start: min(0.125rem, 0.5333333333vw);
}

.color-list-item {
  display: flex;
  align-items: center;
  gap: min(0.5rem, 2.1333333333vw);
  font-size: 0.875rem;
}
.color-list-item .color-ball {
  display: block;
  width: min(1.5rem, 8.5333333333vw);
  aspect-ratio: 1;
  border-radius: min(0.25rem, 1.0666666667vw);
}
.color-list-item.--today .color-ball {
  background: var(--color-todayback);
}

/* -----------------------------------------------------------------
    main
----------------------------------------------------------------- */
.contents-inner {
  grid-template-columns: 20% 77.5%;
  gap: 2.5%;
}

.section {
  overflow: hidden;
}
.section .--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 3.75rem;
}
.section.--bg-color {
  background: var(--color-sub);
}

/* === lower-contents === */
.lower-contents {
  padding-block-start: 1.25rem;
}
.lower-contents .main-section .--inner {
  padding-block-start: 2.5rem;
}

/* === breadcrumb === */
.breadcrumb {
  margin-block-end: 1rem;
}
.breadcrumb .breadcrumb-item::before {
  content: ">";
  margin-inline: min(0.25rem, 1.0666666667vw);
}
.breadcrumb .breadcrumb-item:first-child::before {
  display: none;
}
.breadcrumb .breadcrumb-item.current a {
  pointer-events: none;
}

.breadcrumb + .section .--inner {
  padding-block-start: 0;
}

/* === pre === */
.pre-wrap {
  inline-size: 100%;
}

pre {
  font-size: 0.875rem;
  line-height: 2.1428571429;
}

/* === 商品詳細＆買い物カゴ === */
/* -- 数量 -- */
.item-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem min(1rem, 4.2666666667vw);
}
.item-qty .--label {
  font-size: 0.875rem;
  font-weight: 500;
}

.quantity {
  display: grid;
  grid-template-columns: min(2.5rem, 10.6666666667vw) min(3.5625rem, 15.2vw) min(2.5rem, 10.6666666667vw);
  gap: min(0.5rem, 2.1333333333vw);
  min-height: 2.5rem;
}
.quantity :is(.--btn, .--qty) {
  border: 1px solid var(--color-primary);
}
.quantity .--btn {
  background-color: var(--color-white);
  background-position: center;
  background-size: min(0.75rem, 3.2vw) auto;
  background-repeat: no-repeat;
}
.quantity .--btn.--down {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_minus.svg');
}
.quantity .--btn.--up {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_plus.svg');
}
.quantity .--btn:hover {
  opacity: var(--opacity);
}
.quantity .--qty {
  padding-inline: min(0.5rem, 2.1333333333vw);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
}

/* -----------------------------------------------------------------
    responsive
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
  p,
  pre {
    font-size: 0.875rem;
  }
  /* ============================
      button
  ============================ */
  .button.--more {
    width: min(8.8125rem, 37.6vw);
    padding-block-end: 0.3125rem;
    font-size: 0.8125rem;
  }
  .button.--more span {
    padding-inline-start: min(0.5rem, 2.1333333333vw);
  }
  .button.--more span::before {
    inset-inline-end: min(0.5625rem, 2.4vw);
    width: min(0.5rem, 2.1333333333vw);
  }
  .button.--footer {
    max-width: 12.5rem;
    font-weight: 400;
  }
  .button.--default {
    font-size: 0.875rem;
  }
  /* ============================
      item-list
  ============================ */
  .item-list:not(.--sp-grid) {
    display: flex;
    align-items: flex-start;
    padding-inline: var(--padding-inline);
    gap: min(1.25rem, 5.3333333333vw);
    padding-block-end: 1.5rem;
    overflow-y: hidden;
    overflow-x: auto;
  }
  .item-list:not(.--sp-grid) .item-list-item {
    min-width: min(8.625rem, 36.8vw);
    width: min(8.625rem, 36.8vw);
  }
  .item-list.--grid:not(.--sp-scroll) {
    gap: 2.5rem min(1rem, 4.2666666667vw);
    grid-template-columns: repeat(2, 1fr);
  }
  .item-list-item .item-list-image.--soldout a::after {
    font-size: min(1rem, 4.2666666667vw);
  }
  .item-list-item .item-name {
    font-size: 0.875rem;
  }
  /* ============================
      dl.list
  ============================ */
  dl.list .group {
    padding-block-end: 0.75rem;
  }
  dl.list .group + .group {
    margin-block-start: 1.875rem;
  }
  dl.list :is(dt, dd) {
    font-size: 0.875rem;
  }
  dl.list:is(.index-news-list, .news-list) .group {
    gap: min(0.75rem, 3.2vw);
    grid-template-columns: min(5.1875rem, 22.1333333333vw) 1fr;
  }
  dl.list:is(.index-news-list, .news-list) dd {
    font-size: 0.8125rem;
  }
  dl.list:is(.company-list, .law-list) .group {
    gap: min(1.1875rem, 5.0666666667vw);
    padding-inline: min(1rem, 4.2666666667vw);
  }
  dl.list.company-list .group {
    grid-template-columns: 4.375rem 1fr;
  }
  dl.list.law-list .group {
    grid-template-columns: min(6.2rem, 26.4533333333vw) 1fr;
  }
  /* ============================
      pager
  ============================ */
  :is(.default-pager, .news-pager) {
    gap: min(0.5rem, 2.1333333333vw);
  }
  .default-pager li {
    width: min(2.5rem, 10.6666666667vw);
  }
  .pager-num a {
    font-size: min(1rem, 4.2666666667vw);
  }
  /* ============================
      heading
  ============================ */
  .heading {
    width: 100%;
  }
  .heading .heading-inner {
    padding-inline: min(0.5rem, 2.1333333333vw);
  }
  .heading .--ja {
    font-size: 1.25rem;
  }
  .heading .--en {
    font-size: 0.75rem;
  }
  /* ============================
      sort
  ============================ */
  .sort-wrap {
    gap: 2.2857142857%;
  }
  .total-count {
    font-size: 0.75rem;
  }
  .sort-default {
    font-size: 0.75rem;
  }
  /* ============================
      empty
  ============================ */
  .empty {
    padding-block-start: 3.75rem;
  }
  /* ============================
      top-bt
  ============================ */
  #top-bt {
    width: min(3.125rem, 13.3333333333vw);
  }
  /* ============================
      header
  ============================ */
  /* === hd-info === */
  .hd-info .--inner {
    min-height: 1.8125rem;
    padding-block: 0.3rem;
  }
  .hd-info a {
    font-size: 0.8125rem;
  }
  /* === hd-bottom === */
  #header .hd-bottom > .--inner {
    grid-template-columns: 14.1333333333% 81.6%;
    gap: 4.2666666667%;
    padding-inline-end: 0;
  }
  /* -- hd-nav-wrap -- */
  .hd-icon-menu-item {
    min-height: min(4.375rem, 18.6666666667vw);
  }
  .hd-icon-menu-item > :is(a, button) {
    width: min(3.75rem, 16vw);
    padding-inline: min(0.25rem, 1.0666666667vw);
  }
  .hd-icon-menu-item .--icon {
    width: min(1.75rem, 7.4666666667vw);
  }
  .hd-icon-menu-item.--search {
    border-inline-start: 1px solid var(--color-beg);
  }
  /* header-search-child-element */
  .header-search-child-element {
    inset-inline-start: 0;
    inline-size: 100%;
  }
  .header-search-child-element .--inner {
    padding-inline: var(--padding-inline);
  }
  .search-keyword {
    min-height: 2.8125rem;
    padding-block: min(0.25rem, 1.0666666667vw);
    padding-inline: min(10.6666666667rem, 12.8vw) min(0.5rem, 2.1333333333vw);
  }
  .searchform-submit {
    width: min(1.875rem, 8vw);
  }
  /* ============================
      footer
  ============================ */
  /* === ft-top === */
  /* -- ft-top-upper -- */
  .ft-accordion {
    border-block-end: 1px solid var(--color-beg);
  }
  .ft-accordion .ft-heading {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ft-accordion .ft-heading::before {
    position: absolute;
    display: block;
    content: "";
    inset-inline-end: min(0.75rem, 3.2vw);
    width: min(1.5625rem, 4.8vw);
    aspect-ratio: 1;
    background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_plus_footer_sp.svg'), url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_minus_footer_sp.svg');
    background-size: contain, 0;
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--transition);
  }
  .ft-accordion .ft-heading.open::before {
    background-size: 0, contain;
  }
  .ft-heading {
    padding-block: 1.40625rem;
    padding-inline: min(1.25rem, 5.3333333333vw) min(2.34375rem, 20vw);
    font-size: 0.875rem;
  }
  :is(.ft-guide-text, .ft-link-list) {
    padding-inline: min(1.25rem, 5.3333333333vw);
    padding-block-end: 1.25rem;
  }
  .--toggle-item {
    display: none;
  }
  .ft-company-info-data {
    font-size: 0.875rem;
  }
  .ft-top-upper .bt-wrap {
    justify-content: flex-start;
  }
  .ft-guide-text > * + .bt-wrap {
    margin-block-start: 0.5rem;
  }
  .button.--more.--footer {
    width: auto;
    padding: 0;
    border-block-end: 0;
    font-size: 0.875rem;
  }
  .button.--more.--footer span {
    padding-inline-start: 0;
  }
  .button.--more.--footer span::before {
    width: min(0.5rem, 2.1333333333vw);
  }
  /* -- ft-top-lower -- */
  /* ft-link-list */
  .ft-link-list > * + * {
    margin-block-start: 0.5rem;
  }
  .ft-link-item a {
    font-size: 0.875rem;
  }
  /* ft-sns-menu */
  .ft-lower-box.--sns .ft-heading {
    padding-inline: min(1.25rem, 5.3333333333vw);
    text-align: center;
  }
  .ft-sns-menu {
    width: 60.2666666667%;
    margin-inline: auto;
    padding-block-end: 1.875rem;
  }
  .sns-menu-item {
    width: min(2.8125rem, 12vw);
    height: min(2.8125rem, 12vw);
  }
  /* === ft-bottom === */
  .ft-bottom .--inner {
    flex-direction: column;
    gap: 1.5625rem;
    min-height: 16.6875rem;
    padding-block: 1.875rem;
    padding-inline: var(--padding-inline);
  }
  /* -- ft-bottom-menu -- */
  .ft-bottom-menu {
    flex-direction: column;
    gap: 1.5625rem;
    font-size: 0.8125rem;
  }
  .copyright {
    font-size: 0.75rem;
  }
  /* ============================
      side
  ============================ */
  #side {
    position: fixed;
    display: block;
    inset-block-start: -120%;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    padding-block-start: var(--header-height);
    transition: var(--transition);
    z-index: 300;
  }
  #side.fixed {
    inset-block-start: 0;
  }
  #side.--hd-scroll {
    padding-block-start: var(--header-bottom-height);
  }
  #side .--scroll {
    height: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
    padding-block: 0.75rem 2.5rem;
    padding-inline: var(--padding-inline);
  }
  .side-heading {
    font-size: 0.875rem;
  }
  .side-heading:not(.--sns) {
    min-height: 2.5rem;
  }
  .side-heading.--sns {
    margin-block-start: 1rem;
    padding-block: 0;
    background: none;
    color: var(--color-primary);
  }
  /* === tel-box === */
  .tel-box.sp-only {
    background: var(--color-primary);
    color: var(--color-white);
  }
  .tel-box.sp-only a {
    color: var(--color-white);
  }
  .tel-box.sp-only .--num::before {
    background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/icon_tel_white.svg');
  }
  /* === side-cont === */
  .side-cont + .side-cont {
    margin-block-start: 2.5rem;
  }
  /* -- side-ct-list -- */
  .side-ct-list::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, var(--color-gray-b) 2px, var(--color-gray-b) 4px);
  }
  .side-ct-item + .side-ct-item::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, var(--color-gray-b) 2px, var(--color-gray-b) 4px);
    inset-block-start: 0;
    inset-block-end: auto;
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title) {
    min-height: 3.6875rem;
    padding-inline-start: min(1.25rem, 5.3333333333vw);
    font-size: 0.8125rem;
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title)::before {
    inset-inline-end: min(0.75rem, 3.2vw);
    width: min(1.5625rem, 4.8vw);
    aspect-ratio: 1;
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title).--first {
    padding-inline-start: min(0.75rem, 3.2vw);
    font-size: 0.875rem;
    font-weight: 500;
  }
  .side-ct-child-list::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, var(--color-gray-b) 2px, var(--color-gray-b) 4px);
    inset-block-start: 0;
    inset-block-end: auto;
  }
  /* === side-cont.--banner === */
  .side-cont.--banner {
    max-width: 43.75rem;
    width: 100%;
    margin-inline: auto;
  }
  /* === sns === */
  /* side-sns-menu */
  .side-sns-menu {
    width: 64.5714285714%;
    margin-block: 1rem 2.5rem;
  }
  /* === calendar === */
  .cal-wrap {
    width: 58%;
  }
  /* ============================
      main
  ============================ */
  .section .--inner {
    gap: 2.5rem;
  }
  .section:not(.--item-list) .--inner {
    padding-inline: var(--padding-inline);
  }
  .section.--item-list .heading {
    width: 93.3333333333%;
  }
  .main > .section:first-child .--inner {
    padding-block-start: 2.5rem;
  }
  /* === breadcrumb === */
  .breadcrumb {
    font-size: 0.75rem;
  }
  .breadcrumb .--inner {
    padding-inline: var(--padding-inline);
  }
}
@media screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
  :is(a, button):hover {
    opacity: var(--opacity);
  }
  /* ============================
      button
  ============================ */
  .button.--more {
    max-width: 13.875rem;
    width: 100%;
    padding-block-end: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
  }
  .button.--more span {
    padding-inline-start: 16px;
  }
  .button.--more span::before {
    inset-inline-end: 12px;
    width: 7px;
  }
  .button.--footer {
    max-width: 12.5rem;
    font-weight: 400;
  }
  .button.--default {
    font-size: 1.125rem;
  }
  /* ============================
      dl.list
  ============================ */
  dl.list .group {
    padding-block-end: 1rem;
  }
  dl.list .group + .group {
    margin-block-start: 2rem;
  }
  dl.list :is(dt, dd) {
    font-size: 1.125rem;
  }
  dl.list:is(.index-news-list, .news-list) .group {
    grid-template-columns: 6.6875rem 1fr;
    gap: min(1.5rem, 6.4vw);
  }
  dl.list:is(.index-news-list, .news-list) dd {
    font-size: 1rem;
  }
  dl.list:is(.company-list, .law-list) .group {
    gap: min(5.5rem, 23.4666666667vw);
    padding-inline: min(2rem, 8.5333333333vw);
  }
  dl.list.company-list .group {
    grid-template-columns: 5.625rem 1fr;
  }
  dl.list.law-list .group {
    grid-template-columns: 8rem 1fr;
  }
  /* ============================
      item-list
  ============================ */
  .item-list.--grid {
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
  }
  .item-list-item .item-list-image.--soldout a::after {
    font-size: min(1.2rem, 5.12vw);
  }
  .item-list-item .item-name {
    font-size: 1rem;
  }
  /* ============================
      pager
  ============================ */
  :is(.default-pager, .news-pager) {
    gap: min(0.875rem, 3.7333333333vw);
  }
  .default-pager li {
    width: 3.375rem;
  }
  .pager-num a {
    font-size: 1.25rem;
  }
  /* ============================
      heading
  ============================ */
  .heading {
    width: var(--main-inner-width);
  }
  .heading .heading-inner {
    padding-inline: min(1.25rem, 5.3333333333vw);
  }
  .heading .--ja {
    font-size: 1.375rem;
  }
  .heading .--en {
    font-size: 0.875rem;
  }
  /* ============================
      sort
  ============================ */
  .sort-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem min(1rem, 4.2666666667vw);
  }
  .sort-wrap > * {
    max-width: 50%;
  }
  .total-count {
    font-size: 0.875rem;
  }
  .sort-cont {
    display: flex;
    gap: min(0.5rem, 2.1333333333vw);
  }
  .sort-default {
    min-width: min(7.75rem, 33.0666666667vw);
    font-size: 0.875rem;
  }
  /* ============================
      empty
  ============================ */
  .empty {
    padding-block-start: 1.875rem;
  }
  /* ============================
      header
  ============================ */
  #header {
    min-width: var(--min-width);
  }
  #header :is(.hd-info, .hd-bottom) > .--inner {
    width: var(--min-width);
  }
  /* === hd-info === */
  .hd-info .--inner {
    min-height: 2.375rem;
    padding-block: 0.5rem;
  }
  .hd-info a {
    font-size: 0.75rem;
  }
  /* === hd-bottom === */
  .hd-bottom > .--inner {
    grid-template-columns: 7.6666666667% 91%;
    gap: 1.3333333333%;
  }
  /* -- hd-nav-wrap -- */
  .--login .hd-nav {
    margin-inline-end: min(0.5rem, 6.4vw);
  }
  .--login .hd-icon-menu-item > :is(a, button) {
    padding-inline: 8px;
  }
  .--login .hd-icon-menu-item.--cart {
    margin-inline-start: 8px;
  }
  .--login .hd-icon-menu-item.--cart > :is(a, button) {
    padding-inline: 20px;
  }
  .--logout .hd-nav {
    margin-inline-end: 26px;
  }
  .--logout .hd-icon-menu-item > :is(a, button) {
    padding-inline: 20px;
  }
  .--logout .hd-icon-menu-item.--cart {
    margin-inline-start: 12px;
  }
  .hd-icon-menu-item {
    min-height: 6.5rem;
  }
  .hd-icon-menu-item .--icon {
    width: 36px;
  }
  .hd-icon-menu-item.--search {
    position: relative;
  }
  /* header-search-child-element */
  .header-search-child-element {
    margin-block-start: -0.625rem;
    inset-inline-end: 0;
    inline-size: 31.25rem;
  }
  .search-keyword {
    min-height: 3rem;
    padding-block: min(0.5rem, 2.1333333333vw);
    padding-inline: min(3rem, 12.8vw) min(1rem, 4.2666666667vw);
  }
  .searchform-submit {
    width: min(1.75rem, 7.4666666667vw);
  }
  /* ============================
      footer
  ============================ */
  #footer {
    min-width: var(--min-width);
    margin-block-start: 8.75rem;
  }
  #footer .--inner {
    width: var(--min-width);
    padding-inline: var(--padding-inline);
    margin-inline: auto;
  }
  /* === ft-top === */
  .ft-top .--inner {
    padding-block: 3.75rem;
  }
  .ft-top .--inner > * + * {
    margin-block-start: 2.5rem;
  }
  /* -- ft-top-upper -- */
  .ft-top-upper {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.3333333333%;
  }
  .ft-heading {
    margin-block-end: 0.75rem;
    padding-block-end: 0.5rem;
    padding-inline: min(0.5rem, 2.1333333333vw);
    font-size: 1.125rem;
    border-block-end: 1px solid var(--color-beg);
  }
  .ft-accordion .ft-heading {
    pointer-events: none;
  }
  .ft-company-info-data {
    font-size: 1rem;
  }
  /* -- ft-top-lower -- */
  .ft-top-lower {
    grid-template-columns: 68.5714285714% 17.7678571429%;
    gap: 13.6607142857%;
    width: 93.3333333333%;
  }
  /* ft-link-list */
  .ft-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: min(1rem, 4.2666666667vw);
  }
  .ft-link-item a {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: min(1rem, 4.2666666667vw);
    background: var(--color-white);
    border: 1px solid var(--color-beg);
    border-radius: 2.5rem;
    font-size: 1rem;
  }
  /* ft-sns-menu */
  .ft-sns-menu {
    width: 86.432160804%;
  }
  /* === ft-bottom === */
  .ft-bottom .--inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.4375rem;
    padding-block: 1rem;
  }
  /* -- ft-bottom-menu -- */
  .ft-bottom-menu {
    flex-wrap: wrap;
    font-size: 1rem;
  }
  .ft-bottom-menu-item {
    display: flex;
    align-items: center;
  }
  .ft-bottom-menu-item + .ft-bottom-menu-item::before {
    content: "";
    width: 1px;
    height: 1em;
    background: var(--color-white);
    margin-inline: 1em;
  }
  .copyright {
    font-size: 0.875rem;
  }
  /* ============================
      top-bt
  ============================ */
  #top-bt {
    width: min(4.375rem, 18.6666666667vw);
  }
  /* ============================
      side
  ============================ */
  .side-heading {
    margin-block-end: 0.5rem;
    min-height: 3rem;
    font-size: 1rem;
  }
  /* === side-cont === */
  .side-cont + .side-cont {
    margin-block-start: 1.5rem;
  }
  /* -- side-ct-list -- */
  .side-ct-list > .side-ct-item {
    padding-block: 0.5rem;
  }
  .side-ct-list > .side-ct-item::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, var(--color-gray-b) 2px, var(--color-gray-b) 4px);
  }
  .side-ct-list.--all .side-ct-item .side-ct-item-link.--first {
    padding-inline-end: min(0.5rem, 2.1333333333vw);
  }
  .side-ct-list.--all .side-ct-item .side-ct-item-link.--first::before {
    display: none;
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title) {
    min-height: 2.5rem;
    padding-inline-start: min(1.5rem, 6.4vw);
    font-size: 1rem;
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title)::before {
    inset-inline-end: min(0.25rem, 1.0666666667vw);
    width: min(1.125rem, 4.8vw);
    height: min(1.125rem, 4.8vw);
  }
  .side-ct-item :is(.side-ct-item-link, .ct-child-title).--first {
    padding-inline-start: min(0.5rem, 2.1333333333vw);
  }
  .side-ct-child-list.--grandchild {
    display: none;
  }
  /* === sns === */
  /* side-sns-menu */
  .side-sns-menu {
    width: 71.6666666667%;
    margin-block: 1.5rem 0.875rem;
  }
  /* === calendar === */
  .cal-wrap {
    width: 84.1666666667%;
  }
  /* ============================
      main
  ============================ */
  .contents-inner {
    display: grid;
    width: var(--min-width);
    margin-inline: auto;
    padding-inline: var(--padding-inline);
  }
  .section .--inner {
    gap: 3.75rem;
  }
  .main > .section:first-child .--inner {
    padding-block-start: 0;
  }
  /* === lower-contents === */
  .breadcrumb {
    font-size: 0.875rem;
  }
}/*# sourceMappingURL=全ページ共通.css.map */
@charset "UTF-8";
/* -----------------------------------------------------------------
    mv
----------------------------------------------------------------- */
.mv-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mv-wrap .slick-arrow {
  background: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_arrow_slider.svg') center/contain no-repeat !important;
}

.mv {
  position: relative;
  width: 100%;
  margin-bottom: 0 !important;
  margin-inline: auto;
}
.mv .slick-list {
  overflow: visible !important;
}
.mv .slick-list img {
  aspect-ratio: 1200/600;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mv .slide-inner {
  position: relative;
  display: block;
}
.mv .slick-dots {
  display: flex;
  inset-block-end: 0 !important;
  justify-content: center;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-inline: var(--padding-inline);
}
.mv .slick-dots li {
  width: min(1.5rem, 6.4vw) !important;
  height: min(1.5rem, 6.4vw) !important;
  margin: 0 !important;
}
.mv .slick-dots li button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.mv .slick-dots li button::before {
  inset-block-start: auto !important;
  inset-inline-start: auto !important;
  background: transparent;
  color: transparent !important;
  border: 1px solid var(--color-beg);
  border-radius: 50%;
  transition: var(--transition);
  opacity: 1 !important;
}
.mv .slick-dots li.slick-active button::before {
  background: var(--color-beg);
}

.arrow-wrap {
  position: absolute;
}
.arrow-wrap .slick-arrow {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}
.arrow-wrap .slick-arrow:hover {
  opacity: var(--opacity);
}
.arrow-wrap .slick-prev {
  inset-inline-start: 0 !important;
}
.arrow-wrap .slick-next {
  inset-inline-end: 0 !important;
}

/* -----------------------------------------------------------------
    お知らせ
----------------------------------------------------------------- */
.section.--toppage-news .heading {
  width: 100%;
}

/* -----------------------------------------------------------------
    特集
----------------------------------------------------------------- */
.top-subbanner-list {
  display: grid;
  margin-inline: auto;
}

.top-subbanner-item a {
  display: block;
  border: 1px solid var(--color-text);
}

/* -----------------------------------------------------------------
    取扱ブランド
----------------------------------------------------------------- */
.brand-list {
  margin-inline: auto;
}

/* -----------------------------------------------------------------
    ランキング
----------------------------------------------------------------- */
.ranking-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 43.5294117647%;
  aspect-ratio: 74/54;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.ranking-icon.rank-1 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_1.svg');
}
.ranking-icon.rank-2 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_2.svg');
}
.ranking-icon.rank-3 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_3.svg');
}
.ranking-icon.rank-4 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_4.svg');
}
.ranking-icon.rank-5 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_5.svg');
}
.ranking-icon.rank-6 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_6.svg');
}
.ranking-icon.rank-7 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_7.svg');
}
.ranking-icon.rank-8 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_8.svg');
}
.ranking-icon.rank-9 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_9.svg');
}
.ranking-icon.rank-10 {
  background-image: url('/import/tenant_1/gigaplus.makeshop.jp/kobefine4194/img/common/img_rank_10.svg');
}

/* -----------------------------------------------------------------
    カテゴリー
----------------------------------------------------------------- */
.top-cate-list {
  display: grid;
  margin-inline: auto;
}

.top-cate-item a {
  position: relative;
  display: flex;
  align-items: center;
}
.top-cate-item a .--text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: min(1rem, 4.2666666667vw);
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  font-family: var(--font-fm-serif);
  font-weight: 700;
}

/* -----------------------------------------------------------------
    shop
----------------------------------------------------------------- */
.section.--shop .--inner {
  position: relative;
}
.section.--shop .text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(246, 241, 235, 0.9);
  font-family: var(--font-fm-serif);
  z-index: 1;
}
.section.--shop .text-wrap p {
  font-weight: 500;
  text-align: center;
}

.top-shop-heading {
  font-weight: 700;
  text-align: center;
}

/* -----------------------------------------------------------------
    responsive
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* ============================
      mv
  ============================ */
  .mv-wrap {
    margin-block-end: 1.25rem;
  }
  .mv {
    padding-block-end: min(1.78125rem, 7.6vw);
  }
  .mv .slick-list img {
    max-width: 100vw;
  }
  .mv .slick-dots li button::before {
    width: min(0.5625rem, 2.4vw);
    height: min(0.5625rem, 2.4vw);
  }
  .arrow-wrap {
    width: calc(var(--min-inner-width) - var(--padding-inline) * 2);
    height: 2.1875rem;
    margin-block-start: calc(-1 * min(2.1875rem, 9.3333333333vw) / 2);
  }
  /* ============================
      お知らせ
  ============================ */
  .section-wrap {
    margin-block-end: 1.875rem;
    padding-inline: var(--padding-inline);
  }
  .section.--toppage-news .--inner {
    padding-block: 2.5rem;
    padding-inline: min(0.75rem, 3.2vw);
  }
  /* ============================
      特集
  ============================ */
  .top-subbanner-list {
    gap: 1.25rem;
  }
  /* ============================
      取扱ブランド
  ============================ */
  .brand-list {
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: space-around;
    gap: min(1.875rem, 8vw);
    max-width: min(21.875rem, 93.3333333333vw);
    width: 100%;
  }
  .brand-list > * {
    width: calc((100% - min(1.875rem, 8vw)) / 2);
  }
  .brand-item:first-child {
    order: 1;
  }
  /* ============================
      ランキング
  ============================ */
  .section.--ranking .item-list-item {
    padding-block-start: min(2.75rem, 11.7333333333vw);
  }
  .item-list-item > .ranking-icon + * {
    margin-block-start: 0;
  }
  /* ============================
      カテゴリー
  ============================ */
  .top-cate-list {
    gap: 1.25rem;
  }
  .top-cate-item a .--text {
    min-height: 3.1875rem;
    font-size: 1.3125rem;
  }
  /* ============================
      shop
  ============================ */
  .section.--shop .text-wrap {
    gap: 1.25rem;
    padding-block: 2.5rem;
    padding-inline: min(1.40625rem, 6vw);
  }
  .section.--shop .text-wrap p {
    font-size: 0.8125rem;
  }
  .top-shop-heading {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 769px) {
  /* ============================
      mv
  ============================ */
  .mv-wrap {
    min-width: var(--min-width);
    margin-block-end: 1.125rem;
  }
  .mv {
    padding-block-end: 42px;
  }
  .mv .slick-list img {
    max-width: var(--min-inner-width);
  }
  .mv .slick-dots {
    gap: 19px;
  }
  .mv .slick-dots li button::before {
    width: 12px;
    height: 12px;
  }
  .arrow-wrap {
    width: calc(var(--min-inner-width) - min(0.5rem, 2.1333333333vw) * 2);
    height: 70px;
    margin-block-start: -35px;
  }
  /* ============================
      お知らせ
  ============================ */
  .section-wrap {
    margin-block-end: 3.75rem;
  }
  .section.--toppage-news .--inner {
    gap: 2.5rem;
    padding-inline: min(2.5rem, 10.6666666667vw);
  }
  /* ============================
      特集
  ============================ */
  .top-subbanner-list {
    grid-template-columns: repeat(2, 1fr);
    gap: min(2.5rem, 10.6666666667vw);
    width: var(--main-inner-width);
  }
  /* ============================
      取扱ブランド
  ============================ */
  .brand-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.5rem, 10.6666666667vw);
    width: var(--main-inner-width);
  }
  /* ============================
      ランキング
  ============================ */
  .section.--ranking .item-list-item {
    padding-block-start: min(3.375rem, 14.4vw);
  }
  /* ============================
      カテゴリー
  ============================ */
  .top-cate-list {
    grid-template-columns: repeat(2, 1fr);
    gap: min(2.5rem, 10.6666666667vw);
    width: var(--main-inner-width);
  }
  .top-cate-item a .--text {
    min-height: 4rem;
    font-size: 1.375rem;
  }
  /* ============================
      shop
  ============================ */
  .section.--shop .--inner {
    min-height: 47.8125rem;
  }
  .section.--shop .img-wrap {
    position: absolute;
    inset-block-start: 7.8431372549%;
    inset-inline-start: 0;
    width: 54.623655914%;
  }
  .section.--shop .text-wrap {
    position: absolute;
    inset-block-end: 7.8431372549%;
    inset-inline-end: 0;
    gap: 2rem;
    padding-block: 2rem;
    padding-inline: min(1.875rem, 8vw);
    width: 54.623655914%;
  }
  .section.--shop .text-wrap p {
    font-size: 1rem;
  }
  .top-shop-heading {
    font-size: 1.125rem;
  }
}/*# sourceMappingURL=トップ.css.map */