@charset "UTF-8";
/* ============================================================= *

base

* ============================================================= */
:where(:root) {
  /* utility */
  --vw: 1vw;
  --slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
  /* setting */
  --base-color: #202020;
  /* fonts */
  --base-font-family: "Lato", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --en-font-family: "Lato";
  --point-en-font-family: "Roboto";
}

:is(.COMMON-UCAR) {
  /* color */
  --key-color: #c00;
  --bg-color: #f7f7f7;
  /* size */
  --select-width: min(354px, 100%);
  --inner-width-px: 1160px;
  /* view */
  --block-radius: 4px;
  --button-radius: 3px;
  --leading-trim: calc((1em - 1lh) / 2);
  /* svg icons */
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.21315 14.0509C8.25625 14.0509 7.32084 13.7672 6.52522 13.2356C5.72959 12.704 5.10947 11.9484 4.74328 11.0644C4.3771 10.1803 4.28128 9.20756 4.46797 8.26911C4.65465 7.33064 5.11544 6.4686 5.79206 5.79201C6.46869 5.11541 7.33076 4.65464 8.26927 4.46796C9.20775 4.28129 10.1806 4.3771 11.0646 4.74327C11.9487 5.10944 12.7043 5.72954 13.2359 6.52513C13.7676 7.32073 14.0513 8.25609 14.0513 9.21295C14.0513 9.84825 13.9261 10.4774 13.683 11.0644C13.4399 11.6513 13.0835 12.1847 12.6342 12.6339C12.185 13.0831 11.6516 13.4395 11.0646 13.6826C10.4776 13.9257 9.84847 14.0509 9.21315 14.0509ZM9.21315 5.34516C8.45068 5.34516 7.70534 5.57125 7.07137 5.99484C6.4374 6.41842 5.94328 7.02048 5.65151 7.72488C5.35972 8.42928 5.28338 9.20434 5.43213 9.95214C5.58087 10.6999 5.94804 11.3868 6.48718 11.9259C7.02633 12.465 7.71323 12.8322 8.46105 12.981C9.20884 13.1297 9.98397 13.0534 10.6884 12.7616C11.3928 12.4698 11.9949 11.9757 12.4185 11.3418C12.8421 10.7078 13.0682 9.96254 13.0682 9.2001C13.0682 8.1777 12.6621 7.19719 11.9391 6.47425C11.2161 5.7513 10.2356 5.34516 9.21315 5.34516Z' fill='black'/%3E%3Cpath d='M15.1436 15.625C15.0803 15.6253 15.0175 15.6129 14.959 15.5886C14.9006 15.5644 14.8475 15.5287 14.803 15.4836L12.1494 12.8302C12.0643 12.7388 12.018 12.618 12.0202 12.4931C12.0224 12.3683 12.073 12.2492 12.1613 12.1609C12.2495 12.0726 12.3687 12.022 12.4935 12.0199C12.6183 12.0177 12.7391 12.064 12.8305 12.1491L15.4841 14.8026C15.5743 14.8929 15.625 15.0154 15.625 15.1431C15.625 15.2708 15.5743 15.3933 15.4841 15.4836C15.4396 15.5287 15.3866 15.5644 15.3281 15.5886C15.2696 15.6129 15.2069 15.6253 15.1436 15.625Z' fill='black'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.6344 4.23432C10.9468 3.92189 11.4533 3.92189 11.7657 4.23432C12.0781 4.54674 12.0781 5.05316 11.7657 5.36559L5.36559 11.7657C5.05316 12.0781 4.54674 12.0781 4.23432 11.7657C3.92189 11.4533 3.92189 10.9468 4.23432 10.6344L10.6344 4.23432Z' fill='black'/%3E%3Cpath d='M4.23432 4.23432C4.54674 3.92189 5.05316 3.92189 5.36559 4.23432L11.7657 10.6344C12.0781 10.9468 12.0781 11.4533 11.7657 11.7657C11.4533 12.0781 10.6344 12.0781 10.6344 11.7657L4.23432 5.36559C3.92189 5.05316 3.92189 4.54674 4.23432 4.23432Z' fill='black'/%3E%3C/svg%3E");
  --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.781 10.25"><path fill="%23c00" fill-rule="evenodd" d="M.699 10.24a.723.723 0 0 1-.511-.21.745.745 0 0 1 0-1.04l3.825-3.87L.188 1.24a.733.733 0 0 1 0-1.03.709.709 0 0 1 1.022 0L5.546 4.6a.733.733 0 0 1 0 1.03l-4.336 4.4a.723.723 0 0 1-.511.21Z"/></svg>');
  --icon-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.13091 6.39661C4.38878 6.1178 4.80687 6.1178 5.06475 6.39661L9 10.6514L12.9353 6.39661C13.1931 6.1178 13.6112 6.1178 13.8691 6.39661C14.127 6.67542 14.127 7.12746 13.8691 7.40628L9.46692 12.1659C9.20905 12.4447 8.79095 12.4447 8.53308 12.1659L4.13091 7.40628C3.87303 7.12746 3.87303 6.67542 4.13091 6.39661Z' fill='%23333333'/></svg>");
  --icon-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.2792 6.57537C15.7403 7.00919 15.7403 7.71255 15.2792 8.14638L9.84279 13.2619C9.09651 13.9642 7.86726 13.9001 7.20791 13.1247L5.25873 10.832C4.85143 10.3529 4.93399 9.65385 5.44312 9.2706C5.95225 8.88734 6.69516 8.96502 7.10246 9.4441L8.63956 11.2521L13.6097 6.57537C14.0707 6.14154 14.8182 6.14154 15.2792 6.57537Z' fill='%230075FF'/%3E%3C/svg%3E");
  --icon-checked-compare: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMinYMid" viewBox="0 0 512 512"><path fill="%23202020" d="M440.469 73.413 218.357 295.525 71.531 148.709 0 220.229l146.826 146.826 71.531 71.532 71.521-71.532L512 144.945z"/></svg>');
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.4545 20.25H9.54545C8.73172 20.25 7.95132 19.9157 7.37592 19.3206C6.80053 18.7256 6.47727 17.9185 6.47727 17.0769V9.46154C6.47727 9.29323 6.54192 9.13181 6.657 9.0128C6.77208 8.89378 6.92816 8.82692 7.09091 8.82692C7.25366 8.82692 7.40974 8.89378 7.52482 9.0128C7.63989 9.13181 7.70455 9.29323 7.70455 9.46154V17.0769C7.70455 17.5819 7.8985 18.0661 8.24374 18.4231C8.58897 18.7802 9.05722 18.9808 9.54545 18.9808H14.4545C14.9428 18.9808 15.411 18.7802 15.7563 18.4231C16.1015 18.0661 16.2955 17.5819 16.2955 17.0769V9.46154C16.2955 9.29323 16.3601 9.13181 16.4752 9.0128C16.5903 8.89378 16.7463 8.82692 16.9091 8.82692C17.0718 8.82692 17.2279 8.89378 17.343 9.0128C17.4581 9.13181 17.5227 9.29323 17.5227 9.46154V17.0769C17.5227 17.9185 17.1995 18.7256 16.6241 19.3206C16.0487 19.9157 15.2683 20.25 14.4545 20.25Z' fill='%23333333'/%3E%3Cpath d='M18.1364 7.55769H5.86364C5.70089 7.55769 5.54481 7.49083 5.42973 7.37182C5.31465 7.2528 5.25 7.09139 5.25 6.92308C5.25 6.75477 5.31465 6.59335 5.42973 6.47434C5.54481 6.35532 5.70089 6.28846 5.86364 6.28846H18.1364C18.2991 6.28846 18.4552 6.35532 18.5703 6.47434C18.6853 6.59335 18.75 6.75477 18.75 6.92308C18.75 7.09139 18.6853 7.2528 18.5703 7.37182C18.4552 7.49083 18.2991 7.55769 18.1364 7.55769Z' fill='%23333333'/%3E%3Cpath d='M14.4545 7.55769H9.54545C9.38271 7.55769 9.22663 7.49083 9.11155 7.37182C8.99647 7.2528 8.93182 7.09139 8.93182 6.92308V5.65385C8.93182 5.14891 9.12577 4.66466 9.47101 4.30762C9.81625 3.95058 10.2845 3.75 10.7727 3.75H13.2273C13.7155 3.75 14.1838 3.95058 14.529 4.30762C14.8742 4.66466 15.0682 5.14891 15.0682 5.65385V6.92308C15.0682 7.09139 15.0035 7.2528 14.8885 7.37182C14.7734 7.49083 14.6173 7.55769 14.4545 7.55769ZM10.1591 6.28846H13.8409V5.65385C13.8409 5.48554 13.7763 5.32412 13.6612 5.20511C13.5461 5.08609 13.39 5.01923 13.2273 5.01923H10.7727C10.61 5.01923 10.4539 5.08609 10.3388 5.20511C10.2237 5.32412 10.1591 5.48554 10.1591 5.65385V6.28846Z' fill='%23333333'/%3E%3Cpath d='M10.7727 16.4423C10.61 16.4423 10.4539 16.3754 10.3388 16.2564C10.2237 16.1374 10.1591 15.976 10.1591 15.8077V11.3654C10.1591 11.1971 10.2237 11.0357 10.3388 10.9166C10.4539 10.7976 10.61 10.7308 10.7727 10.7308C10.9355 10.7308 11.0916 10.7976 11.2066 10.9166C11.3217 11.0357 11.3864 11.1971 11.3864 11.3654V15.8077C11.3864 15.976 11.3217 16.1374 11.2066 16.2564C11.0916 16.3754 10.9355 16.4423 10.7727 16.4423Z' fill='%23333333'/%3E%3Cpath d='M13.2273 16.4423C13.0645 16.4423 12.9084 16.3754 12.7934 16.2564C12.6783 16.1374 12.6136 15.976 12.6136 15.8077V11.3654C12.6136 11.1971 12.6783 11.0357 12.7934 10.9166C12.9084 10.7976 13.0645 10.7308 13.2273 10.7308C13.39 10.7308 13.5461 10.7976 13.6612 10.9166C13.7763 11.0357 13.8409 11.1971 13.8409 11.3654V15.8077C13.8409 15.976 13.7763 16.1374 13.6612 16.2564C13.5461 16.3754 13.39 16.4423 13.2273 16.4423Z' fill='%23333333'/%3E%3C/svg%3E");
  --icon-list: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMinYMid" viewBox="0 0 512 512"><path fill="%234b4b4b" d="M40.252 14.489C18.019 14.489 0 32.507 0 54.741c0 22.233 18.019 40.252 40.252 40.252 22.225 0 40.252-18.019 40.252-40.252 0-22.234-18.027-40.252-40.252-40.252zm107.87 0H512v80.504H148.122zM40.252 215.748C18.019 215.748 0 233.767 0 256c0 22.233 18.019 40.252 40.252 40.252 22.225 0 40.252-18.019 40.252-40.252 0-22.233-18.027-40.252-40.252-40.252zm107.87 0H512v80.504H148.122zM40.252 417.007C18.019 417.007 0 435.026 0 457.259c0 22.232 18.019 40.252 40.252 40.252 22.225 0 40.252-18.019 40.252-40.252 0-22.233-18.027-40.252-40.252-40.252zm107.87 0H512v80.504H148.122z" class="st0"/></svg>');
}

@container CMN-UCAR (max-width: 767px) {
  :is(.COMMON-UCAR) {
    --select-width: 100%;
  }
}

.COMMON-UCAR {
  position: relative;
  width: min(var(--inner-width-px), calc(var(--vw) * 100 - 40px));
  margin-inline: auto;
  padding-bottom: calc(30px + var(--slope-1px) * 50);
  line-height: 1.75;

  container: CMN-UCAR / inline-size;
}

.COMMON-UCAR:not(:has(.COMMON-UCAR-breadcrumb)):before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  pointer-events: none;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR:not(:has(.COMMON-UCAR-breadcrumb)):before {
    height: 0;
  }
}

.COMMON-UCAR:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--width) * .5);
  display: block;
  width: var(--width);
  height: 100%;
  max-width: none;
  background: var(--bg-color);

  --width: calc(var(--vw) * 100);
}

body:not([data-id=index]) .COMMON-UCAR:after {
  --bg-color: #fff;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR:after {
    --bg-color: #fff;
  }
}

.COMMON-UCAR > * {
  position: relative;
  z-index: 1;
}

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

.COMMON-UCAR :where(a) {
  color: inherit;
}

.COMMON-UCAR img {
  display: block;
  height: auto;
  max-width: 100%;
}

:is(.COMMON-UCAR, .COMMON-UCAR-gallery-zooms) :is(input, select, button) {
  font-family: inherit;
  cursor: pointer;
}

:is(.COMMON-UCAR, .COMMON-UCAR-gallery-zooms) label:has(input),
:is(.COMMON-UCAR, .COMMON-UCAR-gallery-zooms) label:has(select) {
  cursor: pointer;
}

/* ============================================================= *

common - search

* ============================================================= */
/* COMMON-UCAR-search
=============================== */
.COMMON-UCAR-search {
  width: 100%;
  padding: 39px calc(100cqi / 1160 * 39);
  border: 1px solid #ddd;
  border-radius: var(--block-radius);
  background: #fff;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
}

/* COMMON-UCAR-search-toggle
=============================== */
.COMMON-UCAR-search-toggle {
  display: grid;
  gap: 20px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-toggle {
    display: contents;
  }
}

.COMMON-UCAR-search-toggle__body {
  display: none;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-toggle__body {
    display: contents;
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-toggle__foot {
    display: none;
  }
}

.COMMON-UCAR-search-toggle__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 272px;
  height: 42px;
  outline: none;
  border: 1px solid var(--base-color);
  border-radius: 3px;
  background: transparent;
  color: var(--base-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
  appearance: none;
}

.COMMON-UCAR-search-toggle__button:hover {
  background: var(--base-color);
  color: #fff;
}

.COMMON-UCAR-search-toggle__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.COMMON-UCAR-search-toggle__button ._close {
  display: none;
}

.COMMON-UCAR-search-toggle__button.is-open ._close {
  display: block;
}

.COMMON-UCAR-search-toggle__button.is-open ._open {
  display: none;
}

.COMMON-UCAR-search-toggle__button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: block;
  width: 18px;
  aspect-ratio: 1/1;
  margin-block: auto;
  background: currentColor;
  mask: var(--icon-arrow-down) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-search-toggle__button.is-open:after {
  rotate: 180deg;
}

/* COMMON-UCAR-search-area
=============================== */
.COMMON-UCAR-search-area {
  display: grid;
  grid-template-columns: 140px 1fr;
  overflow: hidden;
  margin-bottom: calc(32px + var(--slope-1px) * 8);
  border-radius: var(--block-radius);
  font-size: calc(14px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-area {
    grid-template-columns: 100%;
    margin-block: 24px;
    background: #fff;
  }
  body[data-id=search] .COMMON-UCAR-search-area {
    margin-block: 0;
  }
}

.COMMON-UCAR-search-area__head {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  background: var(--base-color);
  color: #fff;
  font-weight: bold;
  font-size: calc(16px + var(--slope-1px) * 2);
}

.COMMON-UCAR-search-area__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 24px;
  padding: 15px 18px;
  background: var(--bg-color);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-area__body {
    flex-direction: column;
  }
}

.COMMON-UCAR-search-area__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1.5em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-area__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
}

.COMMON-UCAR-search-area__reset {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 8px 24px;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: currentColor;
  text-decoration: none;
  font-size: calc(14px + var(--slope-1px) * 1);
  line-height: 1;
  cursor: pointer;
  transition: all .2s;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-area__reset {
    margin-inline: auto;
  }
}

.COMMON-UCAR-search-area__reset:hover {
  opacity: .7;
}

/* COMMON-UCAR-car-search
=============================== */
.COMMON-UCAR-car-search {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 0;
  overflow: hidden;
  margin-top: -18px;
  margin-bottom: 22px;
  border-radius: var(--block-radius);
  font-size: calc(14px + var(--slope-1px) * 2);
}

@media screen and (max-width: 767px) {
  .COMMON-UCAR-car-search {
    grid-template-columns: 100%;
    margin: 24px 20px;
    background: #fff;
  }
}

.COMMON-UCAR-car-search__head {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  background: var(--base-color);
  color: #fff;
  font-weight: bold;
  font-size: calc(16px + var(--slope-1px) * 2);
}

@media screen and (min-width: 768px) {
  .COMMON-UCAR-car-search .COMMON-UCAR-search-select {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* COMMON-UCAR-search-tab
============================== */
.COMMON-UCAR-search-tab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(7px + var(--slope-1px) * 3);
}

.COMMON-UCAR-search-tab._x3 {
  grid-template-columns: repeat(3, 1fr);
}

.COMMON-UCAR-search-tab__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(45px + var(--slope-1px) * 19);
  border: 1px solid var(--base-color);
  border-radius: 3px;
  background: #fff;
  color: var(--base-color);
  text-decoration: none;
  font-weight: bold;
  font-size: calc(15px + var(--slope-1px) * 3);
  transition: opacity .2s;
}

.COMMON-UCAR-search-tab__button:hover {
  opacity: .7;
}

.COMMON-UCAR-search-tab__button span {
  font-size: 12px;
}

.COMMON-UCAR-search-tab__button.is-current {
  background: var(--base-color);
  color: #fff;
  pointer-events: none;
}

.COMMON-UCAR-search-tab__button.is-current:after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  display: block;
  width: calc(15px + var(--slope-1px) * 5);
  height: calc(6px + var(--slope-1px) * 2);
  margin-inline: auto;
  background: var(--base-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* COMMON-UCAR-search-block
=============================== */
.COMMON-UCAR-search-block {
  margin-top: 17px;
  padding: 40px calc(100cqi / 1160 * 40);
  border-radius: var(--block-radius);
  background: var(--bg-color);

  --padding-bottom: calc(32px + var(--slope-1px) * 8);
}

.COMMON-UCAR-search-block[data-UCAR-tab-id] {
  display: none;
}

.COMMON-UCAR-search-block[data-UCAR-tab-id].is-current {
  display: block;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-block {
    margin-top: 0;
    margin-top: 37px;
    padding: 0 0 var(--padding-bottom);
    border-radius: 0;

    --bg-color: #fff;
  }
  body[data-id=search] .COMMON-UCAR-search-block {
    padding-bottom: 0;
  }
}

.COMMON-UCAR-search-block__head {
  margin-bottom: 40px;
  padding-bottom: 11px;
  border-bottom: 1px solid;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-block__head {
    display: none;
  }
}

.COMMON-UCAR-search-block__foot {
  position: sticky;
  bottom: calc(var(--block-foot-padding) - var(--padding-bottom));
  z-index: 11;
  visibility: hidden;
  margin-top: calc(28px + var(--slope-1px) * 12);
  margin-bottom: calc(var(--padding-bottom) * -1);
  padding-block: var(--block-foot-padding) var(--padding-bottom);
  opacity: 0;
  transition: all .3s;
  pointer-events: none;

  --block-foot-padding: calc(16px + var(--slope-1px) * 8);
}

.COMMON-UCAR-search-block__foot.is-show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.COMMON-UCAR-search-block__foot > * {
  position: relative;
  z-index: 1;
}

.COMMON-UCAR-search-block__foot:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  display: block;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: rgba(51, 51, 51, .2);
  transition: opacity .2s;
  transform: translateX(-50%);
}

.COMMON-UCAR-search-block__foot.is-static:before {
  opacity: 0;
  pointer-events: none;
}

/* COMMON-UCAR-search-simple
=============================== */
.COMMON-UCAR-search-simple {
  display: grid;
  align-items: center;
  grid-template-columns: 7.875em 1fr;
  gap: 12px;
  width: 100%;
  font-size: calc(14px + var(--slope-1px) * 2);
}

.COMMON-UCAR-search-simple:not(:first-child) {
  margin-top: calc(32px + var(--slope-1px) * 8);
  padding-top: calc(32px + var(--slope-1px) * 8);
  border-top: 1px solid #ccc;
}

.COMMON-UCAR-search-simple__head {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 8px;
  font-weight: bold;
  line-height: 1;
}

.COMMON-UCAR-search-simple._column :is(.COMMON-UCAR-search-simple__head, .COMMON-UCAR-search-simple__body) {
  grid-column: span 2;
}

@container CMN-UCAR (max-width: 767px) {
  :is(.COMMON-UCAR-search-simple__head, .COMMON-UCAR-search-simple__body) {
    grid-column: span 2;
  }
}

.COMMON-UCAR-search-simple__head small {
  display: block;
  font-weight: normal;
  font-size: 11px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-simple__head {
    flex-direction: row;
  }
  .COMMON-UCAR-search-simple__head small {
    display: inline;
  }
  .COMMON-UCAR-search-simple__head small:before {
    content: "(";
  }
  .COMMON-UCAR-search-simple__head small:after {
    content: ")";
  }
}

.COMMON-UCAR-search-simple__carlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 1.5em calc(8px + var(--slope-1px) * 8);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-simple__carlist {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
  }
}

.COMMON-UCAR-search-simple-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  width: 100%;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-simple-buttons {
    grid-template-columns: repeat(auto-fill, minmax(103px, 1fr));
  }
}

.COMMON-UCAR-search-simple-buttons li {
  display: contents;
}

.COMMON-UCAR-search-simple-buttons a {
  display: block;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding-block: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: calc(11px + var(--slope-1px) * 2);
  line-height: 1;
  transition: opacity .2s;
}

.COMMON-UCAR-search-simple-buttons a:hover {
  opacity: .7;
}

.COMMON-UCAR-search-simple-buttons a > em {
  font-weight: 400;
  font-size: calc(15px + var(--slope-1px));
}

/* COMMON-UCAR-multi-select
============================== */
.COMMON-UCAR-multi-select {
  position: relative;
  width: 100%;
}

.COMMON-UCAR-multi-select-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  line-height: 1;
  cursor: text;
}

.COMMON-UCAR-multi-select-input:focus-within {
  border-color: #0075ff;
  box-shadow: 0 0 3px 3px rgba(59, 130, 246, .1);
}

.COMMON-UCAR-multi-select-input:has(.COMMON-UCAR-multi-select-chip) {
  border-color: #0075ff;
  box-shadow: 0px 0px 0px 1px #0075ff;
}

.COMMON-UCAR-multi-select-input__chips {
  display: contents;
}

.COMMON-UCAR-multi-select-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 3px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 400;
  font-size: 16px;
}

.COMMON-UCAR-multi-select-chip__remove {
  width: 1em;
  aspect-ratio: 1/1;
  border: none;
  background: currentColor;
  mask: var(--icon-close) no-repeat center/contain;
  color: inherit;
  cursor: pointer;
}

.COMMON-UCAR-multi-select-input__text {
  flex: 1;
  min-width: 120px;
  padding: 4px;
  outline: none;
  border: none;
  font-size: 16px;
}

.COMMON-UCAR-multi-select-input__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: #9ca3af;
}

.COMMON-UCAR-multi-select-input__arrow {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  aspect-ratio: 1/1;
  outline: none;
  border: 0;
  border-radius: 0;
  background: var(--icon-arrow-down) 50% 50%/contain no-repeat;
  color: currentColor;
  cursor: pointer;
  transition: opacity .2s;
  pointer-events: none;
  appearance: none;
}

.COMMON-UCAR-multi-select-input__arrow:hover {
  opacity: .7;
}

.COMMON-UCAR-multi-select:has(.COMMON-UCAR-multi-select-dropdown.is-show) .COMMON-UCAR-multi-select-input__arrow {
  pointer-events: auto;

  rotate: 180deg;
}

.COMMON-UCAR-multi-select-input__arrow:after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}

.COMMON-UCAR-multi-select-input__clear {
  display: block;
  align-self: center;
  width: 24px;
  height: 24px;
  border: none;
  background: currentColor;
  mask: var(--icon-trash) 50% 50%/contain no-repeat;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  transition: opacity .2s;
}

.COMMON-UCAR-multi-select-input__clear:hover {
  background: #ef4444;
}

.COMMON-UCAR-multi-select-input__submit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding-inline: 16px 20px;
  outline: none;
  border: 0;
  border-radius: 3px;
  background: #c00;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity .2s;
  appearance: none;
}

.COMMON-UCAR-multi-select-input__controls .COMMON-UCAR-multi-select-input__submit {
  display: none;
}

.COMMON-UCAR-multi-select-input:has(.COMMON-UCAR-multi-select-chip) .COMMON-UCAR-multi-select-input__submit {
  display: flex;
}

.COMMON-UCAR-multi-select-input__submit:hover {
  opacity: .7;
}

.COMMON-UCAR-multi-select-input__submit:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 20px;
  aspect-ratio: 1/1;
  background: currentColor;
  mask: var(--icon-search) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-multi-select-dropdown {
  position: absolute;
  z-index: 10;
  display: none;
  overflow: hidden;
  width: 100%;
  margin-top: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
  box-shadow: 0 0 5px 0 rgba(51, 51, 51, .15);
}

.COMMON-UCAR-multi-select-dropdown.is-show {
  display: block;
}

.COMMON-UCAR-multi-select-dropdown__head {
  display: none;
  padding: 8px 12px;
  border-bottom: 1px solid #ccc;
  background: #f9fafb;
  font-size: 12px;
}

.COMMON-UCAR-multi-select-dropdown__allselect {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font-weight: normal;
  font-size: 13px;
  cursor: pointer;
  transition: color .2s;
}

.COMMON-UCAR-multi-select-dropdown__allselect:hover {
  color: #0075ff;
}

.COMMON-UCAR-multi-select-dropdown__allselect.is-all-selected:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  display: block;
  width: 19px;
  aspect-ratio: 1/1;
  margin-block: auto;
  background: currentColor;
  mask: var(--icon-checked) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-multi-select-dropdown__allselect:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 13px;
  aspect-ratio: 1/1;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: #fff;
}

.COMMON-UCAR-multi-select-dropdown__list {
  overflow-y: auto;
  max-height: 250px;
}

.COMMON-UCAR-multi-select-dropdown__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 10px 15px;
  cursor: pointer;
}

.COMMON-UCAR-multi-select-dropdown__item:hover {
  background: #eef6ff;
}

.COMMON-UCAR-multi-select-dropdown__item.is-selected {
  background: #eef6ff;
}

.COMMON-UCAR-multi-select-dropdown__item .label {
  font-size: 14px;
}

.COMMON-UCAR-multi-select-dropdown__item.is-selected .label {
  color: #0075ff;
}

.COMMON-UCAR-multi-select-dropdown__check:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #0075ff;
  mask: var(--icon-checked) center/contain no-repeat;
}

.COMMON-UCAR-multi-select-dropdown__foot {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  border-top: 1px solid #ccc;
  background: #f7f7f7;
  text-align: right;
  line-height: 1;
}

.COMMON-UCAR-multi-select-dropdown__close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 32px;
  padding-right: 4px;
  border: none;
  border-radius: 3px;
  background: #333;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity .2s;
}

.COMMON-UCAR-multi-select-dropdown__close:hover {
  opacity: .7;
}

.COMMON-UCAR-multi-select-dropdown__close:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--icon-close) center/contain no-repeat;
}

.COMMON-UCAR-multi-select-dropdown__no-result {
  padding: 1em;
  color: #9ca3af;
  text-align: center;
}

/* COMMON-UCAR-search-item
=============================== */
.COMMON-UCAR-search-item {
  display: grid;
  align-items: center;
  grid-template-columns: 7.875em 1fr;
  gap: 12px;
  width: 100%;
  font-size: calc(14px + var(--slope-1px) * 2);
  line-height: 1;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-item {
    grid-template-columns: 100%;
  }
}

.COMMON-UCAR-search-item:not(:first-child) {
  margin-top: calc(20px + var(--slope-1px) * 4);
  padding-top: calc(20px + var(--slope-1px) * 4);
  border-top: 1px solid #ccc;
}

.COMMON-UCAR-search-item__head {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 8px;
  font-weight: bold;
}

.COMMON-UCAR-search-item__head small {
  display: block;
  font-weight: normal;
  font-size: 11px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-item__head {
    flex-direction: row;
  }
  .COMMON-UCAR-search-item__head small {
    display: inline;
  }
  .COMMON-UCAR-search-item__head small:before {
    content: "(";
  }
  .COMMON-UCAR-search-item__head small:after {
    content: ")";
  }
}

.COMMON-UCAR-search-item__body {
  flex-grow: 1;
  min-width: 0%;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-item__body > .COMMON-UCAR-search-label {
    margin-top: 8px;
  }
}

.COMMON-UCAR-search-item__body small {
  display: block;
  margin-top: .75em;
  font-size: 75%;
  line-height: 1;
}

.COMMON-UCAR-search-item__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
  gap: 1em 2em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-item__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 8px;
  }
}

.COMMON-UCAR-search-item__flex {
  display: flex;
  flex-wrap: wrap;
  gap: .85em 1.375em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-item__flex {
    margin-top: 4px;
  }
}

/* COMMON-UCAR-search-label
============================== */
.COMMON-UCAR-search-label {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.COMMON-UCAR-search-label input {
  width: 1em;
  height: 1em;
  margin: 0;
  border: 1px solid #b0b0b0;
  border-radius: var(--button-radius);
  background: #fff;
  appearance: none;
}

.COMMON-UCAR-search-label input:checked {
  border: 0;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect fill='%230075ff' width='16' height='16'/><path fill='none' stroke='%23fff' stroke-width='2' d='M12.6,5.17l-5.66,5.66L3.4,7.29'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

.COMMON-UCAR-search-label input[name^=color] + span:before {
  content: "\25cf";
  margin-right: .25em;
}

.COMMON-UCAR-search-label input[name=color][value=red] + span:before,
.COMMON-UCAR-search-label input[name="color[RD]"] + span:before {
  color: red;
}

.COMMON-UCAR-search-label input[name=color][value=white] + span:before,
.COMMON-UCAR-search-label input[name="color[WT]"] + span:before {
  color: white;
  text-shadow: 0px 0px 1px #000;
}

.COMMON-UCAR-search-label input[name=color][value=black] + span:before,
.COMMON-UCAR-search-label input[name="color[BK]"] + span:before {
  color: black;
}

.COMMON-UCAR-search-label input[name=color][value=silver] + span:before,
.COMMON-UCAR-search-label input[name="color[SL]"] + span:before {
  color: silver;
}

.COMMON-UCAR-search-label input[name=color][value=blue] + span:before,
.COMMON-UCAR-search-label input[name="color[BL]"] + span:before {
  color: blue;
}

.COMMON-UCAR-search-label input[name=color][value=green] + span:before,
.COMMON-UCAR-search-label input[name="color[GN]"] + span:before {
  color: green;
}

.COMMON-UCAR-search-label input[name=color][value=yellow] + span:before,
.COMMON-UCAR-search-label input[name="color[YL]"] + span:before {
  color: #f8c62c;
}

.COMMON-UCAR-search-label input[name=color][value=orange] + span:before,
.COMMON-UCAR-search-label input[name="color[OR]"] + span:before {
  color: orange;
}

.COMMON-UCAR-search-label input[name=color][value=brown] + span:before,
.COMMON-UCAR-search-label input[name="color[BR]"] + span:before {
  color: brown;
}

.COMMON-UCAR-search-label input[name=color][value=beige] + span:before,
.COMMON-UCAR-search-label input[name="color[BG]"] + span:before {
  color: #c8ae7a;
}

.COMMON-UCAR-search-label input[name=color][value=pink] + span:before,
.COMMON-UCAR-search-label input[name="color[PK]"] + span:before {
  color: pink;
}

.COMMON-UCAR-search-label input[name=color][value=purple] + span:before,
.COMMON-UCAR-search-label input[name="color[PP]"] + span:before {
  color: purple;
}

/* COMMON-UCAR-search-textarea
============================== */
.COMMON-UCAR-search-textarea {
  width: 100%;
  height: 5em;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 0;
  border-radius: var(--button-radius);
  font-size: calc(12px + var(--slope-1px) * 2);
  resize: none;
}

/* COMMON-UCAR-search-select-container
============================== */
.COMMON-UCAR-search-select-container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 2em 1fr;
  width: var(--select-width);
  text-align: center;
  font-size: 16px;
}

/* COMMON-UCAR-search-select
============================== */
.COMMON-UCAR-search-select {
  width: var(--select-width);
  height: 42px;
  padding: 0 46px 0 12px;
  border: 1px solid #ccc;
  border-radius: var(--button-radius);
  background: var(--icon-arrow-down) right 10px top 50%/14px auto no-repeat, linear-gradient(to left, #ddd 34px, #fff 34px);
  font-size: 16px;
  appearance: none;
}

/* COMMON-UCAR-search-button-container
============================== */
.COMMON-UCAR-search-button-container {
  display: grid;
  grid-template-columns: 1fr 66%;
  gap: 1%;
}

/* COMMON-UCAR-search-button
============================== */
.COMMON-UCAR-search-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2px + var(--slope-1px) * 4);
  height: calc(45px + var(--slope-1px) * 19);
  outline: none;
  border: 0;
  border-radius: 3px;
  background: var(--key-color);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(15px + var(--slope-1px) * 3);
  cursor: pointer;
  transition: opacity .2s;
  appearance: none;
}

.COMMON-UCAR-search-button:hover {
  opacity: .7;
}

.COMMON-UCAR-search-button._submit:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(23px + var(--slope-1px) * 9);
  aspect-ratio: 1 / 1;
  background: currentColor;
  mask: var(--icon-search) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-search-button._clear {
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
}

/* ============================================================= *

common - list

* ============================================================= */
/* COMMON-UCAR-list
=============================== */
.COMMON-UCAR-list__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list__foot {
    flex-direction: column;
  }
}

.COMMON-UCAR-list__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);

  --gap: calc(6px + var(--slope-1px) * 14);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media screen and (max-width: 560px) {
  .COMMON-UCAR-list__grid {
    grid-template-columns: repeat(2, calc(50% - var(--gap) / 2));
  }
}

/* COMMON-UCAR-list-card
=============================== */
.COMMON-UCAR-list-card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  padding: calc(12px + var(--slope-1px) * 12) calc(5px + var(--slope-1px) * 14);
  border: 1px solid #e6e6e6;
  background: #fff;

  --button-max-width: 220px;
}

.COMMON-UCAR-list-card__head {
  font-weight: bold;
  line-height: 1.4;
}

.COMMON-UCAR-list-card__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.125em 0 1.25em;
}

.COMMON-UCAR-list-card__name {
  font-weight: bold;
  font-size: calc(12px + var(--slope-1px) * 6);
}

.COMMON-UCAR-list-card__type {
  margin-top: .75em;
  font-size: calc(10px + var(--slope-1px) * 2);
}

.COMMON-UCAR-list-card__type span {
  display: block;
}

.COMMON-UCAR-list-card__image {
  min-height: 0%;
  margin-bottom: 1.125em;
}

.COMMON-UCAR-list-card__image a {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  background: var(--base-color);
  transition: all .25s ease-out;
}

.COMMON-UCAR-list-card__image a:before {
  content: "MORE";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  font-size: 1.25em;
  font-family: var(--en-font-family);
  opacity: 0;
  transition: all .25s ease-out;
  transform: translate3d(-50%, -40%, 0px);
}

.COMMON-UCAR-list-card__image a img {
  transition: all .25s ease-out;
}

.COMMON-UCAR-list-card__image a:hover {
  border-radius: var(--button-radius);
  transform: scale(.98);
}

.COMMON-UCAR-list-card__image a:hover:before {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0px);
}

.COMMON-UCAR-list-card__image a:hover img {
  opacity: .6;
}

.COMMON-UCAR-list-card__detail {
  width: 100%;
  font-size: calc(12px + var(--slope-1px) * 1);
}

.COMMON-UCAR-list-card__detail dl {
  display: grid;
  align-items: baseline;
  grid-template-columns: 5em 1fr;
  gap: 0 .5em;
  border-bottom: 1px solid #e6e6e6;
}

.COMMON-UCAR-list-card__detail dt,
.COMMON-UCAR-list-card__detail dd {
  padding: .6rem 0;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-card__detail dt,
  .COMMON-UCAR-list-card__detail dd {
    display: block;
  }
}

.COMMON-UCAR-list-card__detail dd {
  font-weight: bold;
  font-family: var(--en-font-family), var(--base-font-family);
}

.COMMON-UCAR-list-card__detail dd em {
  font-size: 1.42857em;
}

.COMMON-UCAR-list-card__detail dl[data-type=total] dd {
  color: #c00;
}

.COMMON-UCAR-list-card__detail dl[data-type=inspection] dd {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.COMMON-UCAR-list-card__detail .syaken_disp {
  white-space: normal;
}

.COMMON-UCAR-list-card__shop {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.30769em;
  margin-bottom: auto;
  font-size: calc(12px + var(--slope-1px) * 1);
}

.COMMON-UCAR-list-card__shop span:after {
  content: "\ff1a";
  margin: 0 .25em;
}

.COMMON-UCAR-list-card__shop a {
  position: relative;
  z-index: 2;
  color: var(--key-color);
  font-weight: bold;
}

.COMMON-UCAR-list-card__shop a:hover {
  text-decoration: none;
}

.COMMON-UCAR-list-card__foot {
  display: grid;
  grid-template-columns: 100%;
  gap: 6px;
  width: 100%;
  max-width: var(--button-max-width);
  margin-inline: auto;
}

.COMMON-UCAR-list-card__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.57143em;
  border-radius: var(--button-radius);
  background: var(--key-color);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: calc(13px + var(--slope-1px) * 1);
  transition: all .2s;
}

.COMMON-UCAR-list-card__link:hover {
  filter: brightness(1.1);
}

.COMMON-UCAR-list-card__compare {
  display: block;
  width: 100%;
  cursor: pointer;
}

.COMMON-UCAR-list-card__compare input {
  display: none;
}

.COMMON-UCAR-list-card__compare span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 2.57143em;
  border: 1px solid;
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--base-color);
  font-weight: bold;
  font-size: calc(11px + var(--slope-1px) * 1);
  transition: all .2s;
}

.COMMON-UCAR-list-card__compare:hover span {
  background: var(--bg-color);
}

.COMMON-UCAR-list-card__compare span:before {
  content: "";
  display: block;
  width: 12px;
  aspect-ratio: 12/9;
  background: currentColor;
  mask: var(--icon-checked-compare) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-list-card__compare span + span {
  display: none;
  border-color: #ccc;
  background: #f4f4f4;
  color: #888;
}

.COMMON-UCAR-list-card__compare span + span:before {
  opacity: .64;
}

.COMMON-UCAR-list-card__compare input:checked + span {
  display: none;
}

.COMMON-UCAR-list-card__compare input:checked + span + span {
  display: flex;
}

.COMMON-UCAR-list-card__checked {
  display: none;
  width: 100%;
}

/* ============================================================= *

common - compare

* ============================================================= */
/* COMMON-UCAR-compare
============================== */
.COMMON-UCAR-compare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em 1em;
  max-width: 375px;
  padding: 11px 14px;
  border-radius: var(--button-radius);
  background: #313131;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}

.COMMON-UCAR-compare__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}

.COMMON-UCAR-compare__close {
  width: 22px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--icon-close) 50% 50%/14px auto no-repeat #fff;
  transition: all .2s;
}

.COMMON-UCAR-compare__close:hover {
  filter: brightness(.9);
}

.COMMON-UCAR-compare__close span {
  display: none;
}

.COMMON-UCAR-compare__body a {
  color: #fff;
  text-decoration: underline;
}

.COMMON-UCAR-compare__body a:hover {
  text-decoration: none;
}

/* ============================================================= *

common - breadcrumb

* ============================================================= */
/* COMMON-UCAR-breadcrumb
============================== */
.COMMON-UCAR-breadcrumb {
  width: var(--inner-width-px);
  max-width: 100%;
  margin-block: calc(16px + var(--slope-1px) * 4) calc(32px + var(--slope-1px) * 8);
  margin-inline: auto;
  text-align: left;
  font-size: calc(11px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-breadcrumb {
    position: relative;
    left: 50%;
    width: calc(var(--vw) * 100);
    max-width: none;
    padding-inline: 10px;
    transform: translateX(-50%);
  }
}

.COMMON-UCAR-breadcrumb__item {
  display: inline;
}

.COMMON-UCAR-breadcrumb__item:not(:first-child) {
  margin-left: .5em;
}

.COMMON-UCAR-breadcrumb__item:not(:first-child):before {
  content: ">";
  margin-right: .5em;
}

.COMMON-UCAR-breadcrumb__item a {
  text-decoration: underline;
}

.COMMON-UCAR-breadcrumb__item a:hover {
  text-decoration: none;
}

/* ============================================================= *

U-Select

* ============================================================= */
/* COMMON-UCAR-uselect
=============================== */
.COMMON-UCAR-uselect {
  position: relative;
  width: 100%;
  padding-block: calc(56px + var(--slope-1px) * 34);
}

.COMMON-UCAR-uselect:not(:last-child) {
  padding-bottom: calc(40px + var(--slope-1px) * 8);
}

.COMMON-UCAR:has(.COMMON-UCAR-uselect:last-child) {
  padding-bottom: 0;
}

.COMMON-UCAR-uselect:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--width) * .5);
  z-index: -1;
  display: block;
  width: var(--width);
  height: 100%;
  max-width: none;
  background: var(--bg-color);

  --width: calc(var(--vw) * 100);
}

.COMMON-UCAR-search .COMMON-UCAR-uselect {
  padding-inline: 20px;
}

.COMMON-UCAR-uselect__head {
  display: grid;
  align-items: center;
  grid-template-columns: 255px auto;
  gap: 18px 50px;
  width: 100%;
  max-width: 835px;
  margin-inline: auto;
  margin-bottom: calc(30px + var(--slope-1px) * 10);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-uselect__head {
    grid-template-columns: 100%;
  }
}

.COMMON-UCAR-uselect__logo {
  width: calc(200px + var(--slope-1px) * 55);
  margin-inline: auto;
}

.COMMON-UCAR-uselect__feature {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  container-type: inline-size;
}

.COMMON-UCAR-uselect__feature > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5em;
  aspect-ratio: 160 / 120;
  border: 1px solid #ddd;
  border-radius: var(--button-radius);
  background: #fff;
  font-weight: bold;
  font-size: calc(100cqi / 484 * 16);
  line-height: 1;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-uselect__feature > li {
    font-size: calc(12px + var(--slope-1px) * 4);
  }
}

.COMMON-UCAR-uselect__feature > li > i {
  width: 3.625em;
  aspect-ratio: 1 / 1;
}

.COMMON-UCAR-uselect__feature > li > i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.COMMON-UCAR-uselect__lead {
  margin-block: var(--leading-trim) 2.66667em;
  text-align: center;
  font-size: calc(13px + var(--slope-1px) * 2);
  line-height: 1.86667;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-uselect__lead {
    text-align: left;
  }
}

.COMMON-UCAR-uselect__lead sup {
  vertical-align: super;
  font-size: 50%;
}

.COMMON-UCAR-uselect__lead small {
  display: block;
  margin-top: .75rem;
  font-size: .86667em;
}

/* COMMON-UCAR-uselect-detail
=============================== */
.COMMON-UCAR-uselect-detail {
  padding: calc(20px + var(--slope-1px) * 30) calc(12px + var(--slope-1px) * 38);
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--block-radius);
  background: #fff;
}

.COMMON-UCAR-uselect-detail__inner {
  max-width: 1048px;
  margin: 0 auto;
}

.COMMON-UCAR-uselect-detail__lead {
  margin-top: var(--leading-trim);
  margin-bottom: calc(1.57143em + var(--leading-trim));
  font-size: calc(13px + var(--slope-1px) * 1);
  line-height: 1.85714;
}

.COMMON-UCAR-uselect-detail__notes {
  margin-top: calc(1.57143em + var(--leading-trim));
  margin-bottom: var(--leading-trim);
  font-size: calc(12px + var(--slope-1px) * 2);
  line-height: 1.85714;
}

.COMMON-UCAR-uselect-detail__notes > p {
  padding-left: 1em;
  text-indent: -1em;
}

/* COMMON-UCAR-uselect-table
=============================== */
.COMMON-UCAR-uselect-table {
  max-width: 845px;
  margin: 0 auto;
  border-spacing: 0;
  font-size: calc(14px + var(--slope-1px) * 2);
  line-height: 1;
}

.COMMON-UCAR-uselect-table th,
.COMMON-UCAR-uselect-table td {
  border-bottom: 1px solid #ccc;
  text-align: center;
}

@container CMN-UCAR (min-width: 768px) {
  .COMMON-UCAR-uselect-table th:not(:last-child),
  .COMMON-UCAR-uselect-table td:not(:last-child) {
    border-right: 1px solid #ccc;
  }
}

.COMMON-UCAR-uselect-table thead th {
  padding: 0 6px calc(14px + var(--slope-1px) * 11);
}

.COMMON-UCAR-uselect-table thead th img {
  width: min(100%, 181px);
  margin: 0 auto;
}

.COMMON-UCAR-uselect-table tbody th, .COMMON-UCAR-uselect-table tbody td {
  padding: 1em 6px;
  text-align: center;
}

.COMMON-UCAR-uselect-table tbody th {
  width: calc(100px + var(--slope-1px) * 100);
  background: var(--bg-color);
  font-weight: bold;
}

/* ============================================================= *

CAR PLAT

* ============================================================= */
.COMMON-UCAR:has(.COMMON-UCAR-carplat) {
  padding-bottom: 0;
}

/* COMMON-UCAR-carplat
============================== */
.COMMON-UCAR-carplat {
  position: relative;
  width: 100%;
  padding-block: calc(56px + var(--slope-1px) * 44);
}

.COMMON-UCAR-carplat:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: calc(100 * var(--vw));
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
}

.COMMON-UCAR-carplat__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(24px + var(--slope-1px) * 8) 6%;

  container-type: inline-size;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-carplat__inner {
    grid-template-columns: 100%;
  }
}

.COMMON-UCAR-carplat__logo {
  align-self: center;
  width: 85%;
  max-width: calc(280px + var(--slope-1px) * 280);
  margin-inline: auto;
}

.COMMON-UCAR-carplat__lead {
  margin-block: var(--leading-trim);
  font-weight: 500;
  font-size: max(1.89655cqi, 16px);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-carplat__lead {
    margin-block: calc(4px + var(--leading-trim)) calc(14px + var(--leading-trim));
    text-align: center;
    font-size: calc(14px + var(--slope-1px) * 8);
  }
}

.COMMON-UCAR-carplat__notes {
  align-self: end;
}

/* COMMON-UCAR-carplat-site
============================== */
.COMMON-UCAR-carplat-site {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(8px + var(--slope-1px) * 8);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-carplat-site {
    width: 285px;
    margin-inline: auto;
  }
}

.COMMON-UCAR-carplat-site__head {
  margin-block: var(--leading-trim);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: calc(11px + var(--slope-1px) * 2);
  line-height: 1.5;
}

.COMMON-UCAR-carplat-site__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(40px + var(--slope-1px) * 20);
  padding: 10px;
  border-radius: 3px;
  background: #ff8700;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(15px + var(--slope-1px) * 2);
  transition: opacity .3s ease-out;
}

.COMMON-UCAR-carplat-site__button:hover {
  opacity: .7;
}

/* COMMON-UCAR-carplat-notes
============================== */
.COMMON-UCAR-carplat-notes {
  margin-block: var(--leading-trim);
  font-size: calc(11px + var(--slope-1px) * 2);
  line-height: 1.75;
}

/* ============================================================= *

top

* ============================================================= */
/* COMMON-UCAR-search-car
============================== */
.COMMON-UCAR-search-car {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 10px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-car {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* COMMON-UCAR-search-car-nav
============================== */
.COMMON-UCAR-search-car-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.COMMON-UCAR-search-car-nav__image {
  width: calc(110px + var(--slope-1px) * 30);
  max-width: 100%;
  aspect-ratio: 120 / 74;
  object-fit: contain;
}

.COMMON-UCAR-search-car-nav__name {
  color: var(--key-color);
  text-decoration: underline;
  font-weight: bold;
  font-size: calc(13px + var(--slope-1px) * 3);
}

.COMMON-UCAR-search-car-nav:hover .COMMON-UCAR-search-car-nav__name {
  text-decoration: none;
}

.COMMON-UCAR-search-car-nav__count {
  font-size: calc(13px + var(--slope-1px) * 2);
}

.COMMON-UCAR-search-car-nav__count:before {
  content: "(";
}

.COMMON-UCAR-search-car-nav__count:after {
  content: ")";
}

/* COMMON-UCAR-search-car-select
============================== */
.COMMON-UCAR-search-car-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: span 2;
  gap: 10px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-car-select {
    grid-column: span 3;
  }
}

.COMMON-UCAR-search-car-select__head {
  font-weight: bold;
  font-size: calc(14px + var(--slope-1px) * 2);
  line-height: 1;
}

/* COMMON-UCAR-search-car-section
============================== */
.COMMON-UCAR-search-car-section {
  display: grid;
  align-items: center;
  grid-template-columns: 100%;
  gap: 24px 12px;
  margin-top: calc(32px + var(--slope-1px) * 8);
}

@container CMN-UCAR (min-width: 768px) {
  .COMMON-UCAR-search-car-section._select {
    grid-template-columns: auto 1fr;
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-car-section._select {
    margin-top: 0;
  }
}

.COMMON-UCAR-search-car-section__head {
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(14px + var(--slope-1px) * 2);
}

.COMMON-UCAR-search-car-section__body .COMMON-UCAR-search-select {
  width: 400px;
  max-width: 100%;
}

.COMMON-UCAR-search-car-section__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 10px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-search-car-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================= *

search result page

* ============================================================= */
/* COMMON-UCAR-list-pc-header
============================== */
.COMMON-UCAR-list-pc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 10px;
  margin-bottom: 30px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-pc-header {
    display: none;
  }
}

/* COMMON-UCAR-list-sp-header
=============================== */
.COMMON-UCAR-list-sp-header {
  position: relative;
  left: calc(50% - var(--width) * .5);
  z-index: 2;
  display: none;
  width: var(--width);
  max-width: none;
  background: #fff;

  --width: calc(var(--vw) * 100);
}

@container CMN-UCAR (max-width: 1024px) {
  .COMMON-UCAR-list-sp-header {
    --width: 1024px;
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-sp-header {
    --width: calc(var(--vw) * 100);
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-sp-header {
    display: block;
    padding-inline: 20px;
  }
}

/* COMMON-UCAR-list-title
============================== */
.COMMON-UCAR-list-title {
  font-weight: bold;
  font-size: 0;
  line-height: 1.2;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-title {
    padding-block: 20px;
  }
}

.COMMON-UCAR-list-title > * {
  font-size: calc(14px + var(--slope-1px) * 2);
}

.COMMON-UCAR-list-title__main {
  display: inline;
  float: none !important;
  font-weight: bold;
}

.COMMON-UCAR-list-title__main em {
  padding-right: .25em;
  font-size: calc(18px + var(--slope-1px) * 2);
}

.COMMON-UCAR-list-title__sub {
  display: inline-block;
  float: none !important;
  font-size: calc(14px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-title__sub {
    display: none;
  }
}

/* COMMON-UCAR-list-paging
=============================== */
.COMMON-UCAR-list-paging {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 50px 1fr auto 1fr 50px;
  gap: 20px calc(4px + var(--slope-1px) * 2);
  font-size: 14px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-paging {
    grid-template-columns: 70px 1fr 1fr 70px;
    width: 100%;
  }
}

.COMMON-UCAR-list-paging > li {
  display: contents;
}

.COMMON-UCAR-list-paging__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: var(--button-radius);
  text-decoration: none;
  font-weight: bold;
  transition: all .2s;
}

.COMMON-UCAR-list-paging__button:hover {
  color: var(--key-color);
}

.COMMON-UCAR-list-paging__button.is-disabled {
  color: #a8a8a8;
  pointer-events: none;
}

.COMMON-UCAR-list-paging__button._prev, .COMMON-UCAR-list-paging__button._next {
  padding-inline: 1em;
  font-size: 15px;
}

.COMMON-UCAR-list-paging__button._prev:after, .COMMON-UCAR-list-paging__button._next:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 5px;
  height: 10px;
  margin: auto;
  background: var(--key-color, #c00);
  mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-list-paging__button._prev.is-disabled:after, .COMMON-UCAR-list-paging__button._next.is-disabled:after {
  background: #a8a8a8;
}

.COMMON-UCAR-list-paging__button._prev {
  padding-left: 2.5em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-paging__button._prev {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
}

.COMMON-UCAR-list-paging__button._prev:after {
  left: 19px;
  transform: rotate(180deg);
}

.COMMON-UCAR-list-paging__button._next {
  padding-right: 2.5em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-paging__button._next {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
  }
}

.COMMON-UCAR-list-paging__button._next:after {
  right: 19px;
}

.COMMON-UCAR-list-paging__index {
  display: flex;
  justify-content: center;
  gap: 5px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-paging__index {
    grid-column: span 2;
  }
}

.COMMON-UCAR-list-paging__index > li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 100%;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-weight: bold;
  transition: all .2s;
}

.COMMON-UCAR-list-paging__index > li a:hover {
  color: var(--key-color);
}

.COMMON-UCAR-list-paging__index > li a.is-current {
  border-bottom-color: currentColor;
  color: var(--key-color);
}

/* COMMON-UCAR-list-sort
=============================== */
.COMMON-UCAR-list-sort {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px calc(100cqi / 1160 * 26);
  padding: 18px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  line-height: 1;
}

@container CMN-UCAR (min-width: 768px) {
  .COMMON-UCAR-list-sort._x5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-sort {
    grid-template-columns: 100%;
    padding: 0;
    border: 0;
  }
}

.COMMON-UCAR-list-sort__item {
  display: grid;
  align-items: center;
  grid-template-columns: 100%;
  gap: 10px 1em;
  text-align: center;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-sort__item {
    grid-template-columns: 6.71429em 1fr;
    text-align: left;
  }
}

.COMMON-UCAR-list-sort__head {
  font-weight: bold;
}

.COMMON-UCAR-list-sort__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.COMMON-UCAR-list-sort__button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.57143em;
  border-radius: var(--button-radius);
  background: color-mix(in srgb, var(--color) 5%, #fff);
  color: var(--color);
  text-align: center;
  text-decoration: none;
  transition: all .2s;

  --color: var(--base-color);
}

.COMMON-UCAR-list-sort__button:hover {
  filter: brightness(.9);
}

.COMMON-UCAR-list-sort__button.is-current {
  background: color-mix(in srgb, var(--color) 5%, #fff);
  font-weight: bold;

  --color: var(--key-color);
}

/* COMMON-UCAR-list-tab-container
============================== */
.COMMON-UCAR-list-tab-container {
  display: none;
}

@container CMN-UCAR (min-width: 768px) {
  .COMMON-UCAR-list-tab-container {
    display: block !important;
  }
  .COMMON-UCAR-list-tab-container:not(:first-child) {
    margin-top: 20px;
  }
}

@container CMN-UCAR (max-width: 1024px) {
  .COMMON-UCAR-list-tab-container {
    --width: 1024px;
  }
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-tab-container {
    position: relative;
    left: calc(50% - var(--width) * .5);
    width: var(--width);
    max-width: none;
    padding: 29px 20px 50px;
    background: #fff;

    --width: calc(var(--vw) * 100);
  }
}

.COMMON-UCAR-list-tab-container.is-current {
  display: block;
}

/* COMMON-UCAR-list-wrapper
============================== */
.COMMON-UCAR-list-wrapper {
  width: 100%;
}

@container CMN-UCAR (min-width: 768px) {
  .COMMON-UCAR-list-wrapper {
    margin-top: 40px;
    padding-bottom: calc(50px + var(--slope-1px) * 40);
  }
}

/* COMMON-UCAR-list-suggest
=============================== */
.COMMON-UCAR-list-suggest:not(:first-child) {
  margin-top: calc(54px + var(--slope-1px) * 26);
}

.COMMON-UCAR-list-suggest .COMMON-UCAR-list {
  margin-top: 0 !important;
}

.COMMON-UCAR-list-suggest__head {
  position: relative;
  margin-block: var(--leading-trim) calc(16px + var(--slope-1px) * 8 + var(--leading-trim));
  font-weight: bold;
  font-size: calc(15px + var(--slope-1px) * 3);
}

.COMMON-UCAR-list-suggest__body {
  padding: calc(24px + var(--slope-1px) * 16) calc(16px + var(--slope-1px) * 24);
  border-radius: 3px;
  background: var(--bg-color);
}

.COMMON-UCAR-list-suggest__table {
  display: block;
  width: 100%;
  font-size: calc(12px + var(--slope-1px) * 3);
}

.COMMON-UCAR-list-suggest__table tbody {
  display: grid;
  grid-template-columns: auto 1fr;
}

.COMMON-UCAR-list-suggest__table tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: calc(12px + var(--slope-1px) * 3) calc(20px + var(--slope-1px) * 4);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-suggest__table tr {
    grid-template-columns: 100%;
  }
}

.COMMON-UCAR-list-suggest__table tr:not(:first-child) {
  margin-top: calc(20px + var(--slope-1px) * 4);
  padding-top: calc(20px + var(--slope-1px) * 4);
  border-top: 1px solid #ccc;
}

.COMMON-UCAR-list-suggest__table th {
  display: flex;
  align-items: center;
  align-self: stretch;
  text-align: left;
  white-space: nowrap;
  font-weight: bold;
  font-size: calc(14px + var(--slope-1px) * 2);
  line-height: 1;
}

.COMMON-UCAR-list-suggest__table td {
  display: block;
  text-align: left;
  font-size: calc(15px + var(--slope-1px) * 1);
}

.COMMON-UCAR-list-suggest__table ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(8px + var(--slope-1px) * 2);
}

.COMMON-UCAR-list-suggest__nav {
  display: block;
  padding: .5em 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
  letter-spacing: .03em;
  font-size: 14px;
  transition: opacity .1s ease-out;
}

.COMMON-UCAR-list-suggest__nav:hover {
  opacity: .7;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-list-suggest__nav {
    font-size: inherit;
  }
}

/* COMMON-UCAR-list-empty-msg
============================== */
.COMMON-UCAR-list-empty {
  font-size: 14px;
}

.COMMON-UCAR-list-empty a {
  text-decoration: underline;
}

.COMMON-UCAR-list-empty a:hover {
  text-decoration: none;
}

.COMMON-UCAR-list-empty-next-steps {
  margin-top: .5em;
}

/* ============================================================= *

Detail

* ============================================================= */
/* COMMON-UCAR-detail
=============================== */
.COMMON-UCAR-detail {
  width: 100%;
}

.COMMON-UCAR-detail__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1em;
  margin-bottom: 30px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail__head {
    position: relative;
    left: 50%;
    width: calc(var(--vw) * 100);
    margin-bottom: 0;
    transform: translateX(-50%);
  }
}

.COMMON-UCAR-detail__head a:hover {
  text-decoration: none;
}

.COMMON-UCAR-detail__update {
  padding-block: 1em;
  font-size: calc(11px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail__update {
    padding: .5em 10px;
  }
}

.COMMON-UCAR-detail__pageback {
  padding-block: 1em;
  font-size: calc(11px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail__pageback {
    display: none;
  }
}

.COMMON-UCAR-detail__foot {
  margin-top: 40px;
}

.COMMON-UCAR-detail__foot:not(:last-child) {
  margin-bottom: calc(40px + var(--slope-1px) * 40);
}

.COMMON-UCAR-detail__header {
  width: 100%;
}

/* COMMON-UCAR-detail-header
=============================== */
.COMMON-UCAR-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 10px;
  width: 100%;
  padding: 15px 28px;
  background: var(--bg-color);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 3.2% 24px;
  }
}

.COMMON-UCAR-detail-header__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75em 1em;
  padding: 11px 0;
  font-size: calc(11px + var(--slope-1px) * 4);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-header__title {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
  }
  .COMMON-UCAR-detail-header__title:last-child {
    padding-top: 24px;
  }
}

.COMMON-UCAR-detail-header__title ._name {
  margin-block: var(--leading-trim);
  font-weight: bold;
  font-size: calc(16px + var(--slope-1px) * 6);
}

.COMMON-UCAR-detail-header__id {
  display: flex;
  padding-block: calc(1.38462em + var(--leading-trim));
  padding-left: 2em;
  border-left: 1px solid #ccc;
  font-size: calc(11px + var(--slope-1px) * 2);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-header__id {
    order: -1;
    margin-left: auto;
    padding: .5em 0;
    border-left: 0;
  }
}

/* COMMON-UCAR-detail-main
=============================== */
.COMMON-UCAR-detail-main {
  display: flex;
  justify-content: space-between;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-main {
    flex-direction: column;
  }
}

.COMMON-UCAR-detail-main__image {
  flex-shrink: 0;
  width: 53.71622%;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-main__image {
    position: relative;
    left: 50%;
    width: calc(var(--vw) * 100);
    margin-bottom: 25px;
    transform: translateX(-50%);
  }
}

.COMMON-UCAR-detail-main__data {
  width: 42.65203%;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-main__data {
    width: 100%;
  }
}

.COMMON-UCAR-detail-gallery img {
  width: 100%;
}

.COMMON-UCAR-detail-gallery__slider {
  overflow: hidden;
}

.COMMON-UCAR-detail-gallery__slider > ul {
  display: flex;
  flex-wrap: nowrap;
  width: calc(100% * var(--ucar-gallery-length));
  transition: all .3s ease-out;
  transform: translateX(var(--x));

  --x: calc(-100% / var(--ucar-gallery-length) * (var(--ucar-gallery-current) - 1));
}

.COMMON-UCAR-detail-gallery__slider > ul > li {
  overflow: hidden;
  width: calc(var(--vw) * 100);
  aspect-ratio: 3 / 2;
}

.COMMON-UCAR-detail-gallery__slider > ul > li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.COMMON-UCAR-detail-gallery__image {
  position: relative;
}

.COMMON-UCAR-detail-gallery:not([data-show=gallery]) .COMMON-UCAR-detail-gallery__image {
  display: none;
}

.COMMON-UCAR-detail-gallery__index {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 2em;
  padding: 0 .5em;
  border-radius: 3px;
  background: var(--base-color, #333);
  color: #fff;
  font-size: 13px;
  font-family: "Barlow Condensed";
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .COMMON-UCAR-detail-gallery__index {
    font-size: 11px;
  }
}

.COMMON-UCAR-detail-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.COMMON-UCAR-detail-gallery__arrow > button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  outline: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06);
  transition: opacity .1s ease-out;
  pointer-events: auto;
  appearance: none;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__arrow > button {
    width: 30px;
    height: 30px;
  }
}

.COMMON-UCAR-detail-gallery__arrow > button:hover {
  opacity: .7;
}

.COMMON-UCAR-detail-gallery__arrow > button span {
  display: none;
}

.COMMON-UCAR-detail-gallery__arrow > button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4px;
  width: 0;
  height: 0;
  margin: auto;
  border-width: 5px 0 5px 13px;
  border-style: solid;
  border-color: transparent transparent transparent var(--key-color);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__arrow > button:before {
    border-width: 3px 0 3px 7px;
  }
}

.COMMON-UCAR-detail-gallery__arrow > button:first-child:before {
  right: 4px;
  left: 0;
  border-width: 5px 13px 5px 0;
  border-color: transparent var(--key-color) transparent transparent;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__arrow > button:first-child:before {
    border-width: 3px 7px 3px 0;
  }
}

.COMMON-UCAR-detail-gallery__inside, .COMMON-UCAR-detail-gallery__outside {
  position: relative;
  width: 100%;
  padding-top: 56.13208%;
}

.COMMON-UCAR-detail-gallery__inside iframe, .COMMON-UCAR-detail-gallery__outside iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.COMMON-UCAR-detail-gallery:not([data-show=inside]) .COMMON-UCAR-detail-gallery__inside {
  display: none;
}

.COMMON-UCAR-detail-gallery:not([data-show=outside]) .COMMON-UCAR-detail-gallery__outside {
  display: none;
}

.COMMON-UCAR-detail-gallery__viewselect {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: var(--base-color, #333);
  color: #fff;
}

.COMMON-UCAR-detail-gallery__button {
  display: block;
  width: 258px;
  max-width: 50%;
  padding: 0 4px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__button {
    width: 50%;
  }
}

.COMMON-UCAR-detail-gallery__button input {
  display: none;
}

.COMMON-UCAR-detail-gallery__button span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 390px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

.COMMON-UCAR-detail-gallery__button input:checked + span {
  background: #fff;
  color: var(--key-color);
}

.COMMON-UCAR-detail-gallery__thumb {
  margin-top: 6px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__thumb {
    overflow-x: auto;
    margin-top: 3.2%;
    padding: 0 3.2%;
  }
}

.COMMON-UCAR-detail-gallery__thumb ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-gallery__thumb ul {
    grid-template-columns: repeat(20, minmax(67px, 1fr));
    width: auto;
  }
}

.COMMON-UCAR-detail-gallery__thumb a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.COMMON-UCAR-detail-gallery__thumb a.is-current:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--key-color);
  background: color-mix(in srgb, var(--key-color) 40%, transparent);
}

.COMMON-UCAR-detail-gallery__thumb a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* COMMON-UCAR-gallery-zooms
============================== */
.COMMON-UCAR-gallery-zooms {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--base-color, #000) 90%, transparent);
  opacity: 0;
  transition: all .15s ease-out;
  pointer-events: none;

  --arrow-color: var(--key-color, #c00);
}

.COMMON-UCAR-gallery-zooms.is-show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.COMMON-UCAR-gallery-zooms :where(*, *:before, *:after) {
  box-sizing: border-box;
}

.COMMON-UCAR-gallery-zooms__list {
  display: flex;
  flex-wrap: nowrap;
  width: calc(100% * var(--ucar-gallery-length));
  height: 100%;
  transition: all .3s ease-out;
  transform: translateX(var(--x));

  --x: calc(-100% / var(--ucar-gallery-length) * (var(--ucar-gallery-current) - 1));
}

.COMMON-UCAR-gallery-zooms__item {
  display: flex;
  align-items: center;
  align-self: stretch;
  overflow: hidden;
  width: calc(var(--vw) * 100);
  height: 100%;

  --translateX: 0;
}

.COMMON-UCAR-gallery-zooms__item > div {
  width: 100%;
  transition: all .3s ease-out .15s;
}

.COMMON-UCAR-gallery-zooms__item img {
  display: block;
  width: 100%;
  height: auto;
}

.COMMON-UCAR-gallery-zooms.is-show .COMMON-UCAR-gallery-zooms__item > div {
  transform: scale(var(--zoom));
}

.COMMON-UCAR-gallery-zooms.is-show .COMMON-UCAR-gallery-zooms__item img {
  transform: translateX(calc(1px * var(--translateX) / var(--zoom)));
}

.COMMON-UCAR-gallery-zooms__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-inline: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.COMMON-UCAR-gallery-zooms__arrow > button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  outline: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06);
  transition: opacity .1s ease-out;
  pointer-events: auto;
  appearance: none;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-gallery-zooms__arrow > button {
    width: 30px;
    height: 30px;
  }
}

.COMMON-UCAR-gallery-zooms__arrow > button:hover {
  opacity: .7;
}

.COMMON-UCAR-gallery-zooms__arrow > button span {
  display: none;
}

.COMMON-UCAR-gallery-zooms__arrow > button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4px;
  width: 0;
  height: 0;
  margin: auto;
  border-width: 5px 0 5px 13px;
  border-style: solid;
  border-color: transparent transparent transparent var(--arrow-color);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-gallery-zooms__arrow > button:before {
    border-width: 3px 0 3px 7px;
  }
}

.COMMON-UCAR-gallery-zooms__arrow > button:first-child:before {
  right: 4px;
  left: 0;
  border-width: 5px 13px 5px 0;
  border-color: transparent var(--arrow-color) transparent transparent;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-gallery-zooms__arrow > button:first-child:before {
    border-width: 3px 7px 3px 0;
  }
}

.COMMON-UCAR-gallery-zooms__close > button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  overflow: hidden;
  width: 50px;
  height: 50px;
  outline: none;
  border: 0;
  background: transparent;
  transition: opacity .1s ease-out;
  pointer-events: auto;
  appearance: none;
}

.COMMON-UCAR-gallery-zooms__close > button:hover {
  opacity: .7;
}

.COMMON-UCAR-gallery-zooms__close > button svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.COMMON-UCAR-gallery-zooms__close > button span {
  display: none;
}

/* COMMON-UCAR-detail-price
=============================== */
.COMMON-UCAR-detail-price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(9px + var(--slope-1px) * 4);
}

.COMMON-UCAR-detail-price__item {
  padding-top: calc(18px + var(--slope-1px) * 2);
  border-top: calc(3px + var(--slope-1px) * 1) solid #909090;

  container-type: inline-size;
}

.COMMON-UCAR-detail-price__item._total {
  border-top-color: var(--key-color);
  color: var(--key-color);
}

.COMMON-UCAR-detail-price__head {
  margin-bottom: 1em;
  font-size: calc(11px + var(--slope-1px) * 2);
  line-height: 1;
}

.COMMON-UCAR-detail-price__body {
  font-weight: bold;
  font-size: min(calc(12px + var(--slope-1px) * 4), 14.8cqi);
}

.COMMON-UCAR-detail-price__body span {
  font-size: 1.75em;
  font-family: var(--en-font-family);
}

.COMMON-UCAR-detail-price__body span em {
  font-size: 1.35714em;
}

.COMMON-UCAR-detail-price__notes {
  width: 100%;
  margin-bottom: calc(16px + var(--leading-trim)) var(--leading-trim);
  font-size: 12px;
}

/* COMMON-UCAR-detail-question
=============================== */
.COMMON-UCAR-detail-question {
  position: relative;
  top: -2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  margin-left: .3em;
  background: #909090;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  line-height: 1;
  transition: opacity .1s ease-out;
}

.COMMON-UCAR-detail-question:hover {
  opacity: .7;
}

.COMMON-UCAR-detail-question span {
  display: none;
}

.COMMON-UCAR-detail-question:before {
  content: "\FF1F";
  font-weight: bold;
}

/* COMMON-UCAR-detail-spec
=============================== */
.COMMON-UCAR-detail-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: 28px;
  margin-bottom: calc(18px + var(--slope-1px) * 3);
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: calc(11px + var(--slope-1px) * 2);
  line-height: 20px;
}

@media screen and (max-width: 560px) {
  .COMMON-UCAR-detail-spec {
    margin-top: 13px;
  }
}

.COMMON-UCAR-detail-spec__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  text-align: center;
}

.COMMON-UCAR-detail-spec__head {
  margin-block: var(--leading-trim);
}

.COMMON-UCAR-detail-spec__body {
  margin-block: var(--leading-trim);
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-family: var(--en-font-family), var(--base-font-family);
}

/* COMMON-UCAR-detail-contact
=============================== */
.COMMON-UCAR-detail-contact {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: calc(65px + var(--slope-1px) * 20);
  border-radius: 5px;
  background: #cc0000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 1.4;
  transition: all .2s;
}

.COMMON-UCAR-detail-contact:not(:first-child) {
  margin-top: calc(15px + var(--slope-1px) * 10);
}

.COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact {
  width: 100%;
  height: calc(40px + var(--slope-1px) * 25);
  border-radius: 7px;
}

.COMMON-UCAR-detail-contact:hover {
  filter: brightness(1.1);
}

.COMMON-UCAR-detail-contact__head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background: color-mix(in srgb, var(--key-color) 70%, #000);
  font-size: 14px;
}

.COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact__head {
  font-size: calc(10px + var(--slope-1px) * 5);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact__head {
    padding: 1em .75em;
  }
}

.COMMON-UCAR-detail-contact__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 1em 20px;
  font-size: calc(16px + var(--slope-1px) * 3);
}

.COMMON-UCAR-detail-contact__body span {
  display: block;
  font-size: .73684em;
}

.COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact__body {
  flex-direction: row;
  font-size: calc(13px + var(--slope-1px) * 9);
}

.COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact__body span {
  font-size: 1em;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-contact-container .COMMON-UCAR-detail-contact__body {
    padding: 1em;
  }
}

.COMMON-UCAR-detail-contact-container {
  position: fixed;
  right: 0;
  bottom: 1em;
  left: 0;
  z-index: 1;
  visibility: hidden;
  width: 640px;
  max-width: 94.66667%;
  margin: 0 auto;
  opacity: 0;
  transition: all .3s ease-out;
  pointer-events: none;
}

.COMMON-UCAR-detail-contact-container.is-show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media print {
  .COMMON-UCAR-detail-contact-container {
    display: none;
  }
}

/* COMMON-UCAR-detail-lead
=============================== */
.COMMON-UCAR-detail-lead {
  margin-block: var(--leading-trim);
  font-size: calc(13px + var(--slope-1px) * 2);
  line-height: 2;
}

.COMMON-UCAR-detail-lead:not(:first-child) {
  margin-top: 1.5em;
}

/* COMMON-UCAR-detail-shop
=============================== */
.COMMON-UCAR-detail-shop {
  margin-top: calc(12px + var(--slope-1px) * 3);
  padding: calc(12px + var(--slope-1px) * 10) calc(12px + var(--slope-1px) * 13);
  border-radius: var(--block-radius);
  background: var(--bg-color);
  font-size: 14px;
}

.COMMON-UCAR-detail-shop__name {
  margin-block: var(--leading-trim);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

.COMMON-UCAR-detail-shop__name a {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--key-color);
  text-decoration: underline;
  font-size: 20px;
}

.COMMON-UCAR-detail-shop__name a:hover {
  text-decoration: none;
}

.COMMON-UCAR-detail-shop__data {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
  margin-top: 1.5em;
}

.COMMON-UCAR-detail-shop__order {
  margin-block: calc(1.42857em + var(--leading-trim)) var(--leading-trim);
  font-weight: bold;
  font-size: calc(12px + var(--slope-1px) * 2);
}

/* COMMON-UCAR-detail-tel
============================== */
.COMMON-UCAR-detail-tel {
  margin-bottom: 30px;
}

.COMMON-UCAR-detail-tel__head {
  margin-block: var(--leading-trim) .6em;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

.COMMON-UCAR-detail-tel__body a {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--key-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 22px;
  font-family: var(--en-font-family);
  line-height: 1;
  pointer-events: none;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-tel__body a {
    text-decoration: underline;
    pointer-events: auto;
  }
  .COMMON-UCAR-detail-tel__body a:hover {
    text-decoration: none;
  }
}

.COMMON-UCAR-detail-tel__body a:before {
  content: "";
  display: block;
  width: 18px;
  aspect-ratio: 18 / 27;
  background: var(--key-color, #c00);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.31 27.5"><path fill="%23c00" fill-rule="evenodd" d="M13.52 15.5A12.177 12.177 0 0 1 1.34 3.321c0-.3.01-.6.03-.9a2.033 2.033 0 0 1 .22-.942 1.5 1.5 0 0 1 .64-.592 2.124 2.124 0 0 1 1-.146h2.08a2.243 2.243 0 0 1 .84.1 1.438 1.438 0 0 1 .58.41 2.187 2.187 0 0 1 .38.755l.86 2.367a2.259 2.259 0 0 1 .22.943 1.576 1.576 0 0 1-.27.758 2.246 2.246 0 0 1-.76.6l-.42.254a8.122 8.122 0 0 0 3.18 3.182l.25-.424a2.3 2.3 0 0 1 .6-.758 1.475 1.475 0 0 1 .76-.268 2.238 2.238 0 0 1 .94.21l2.37.861a2.139 2.139 0 0 1 .75.379 1.353 1.353 0 0 1 .41.585 2.162 2.162 0 0 1 .1.84v2.079a2.228 2.228 0 0 1-.14 1 1.563 1.563 0 0 1-.6.638 1.994 1.994 0 0 1-.94.217q-.45.031-.9.031ZM2.87 2.22a2.336 2.336 0 0 0-.02.306c-.02.263-.03.53-.03.8a10.712 10.712 0 0 0 10.7 10.7 10.426 10.426 0 0 0 1.1-.056c.01-.075.01-.224.01-.358v-2.079a2.588 2.588 0 0 0-.01-.307 4.324 4.324 0 0 0-.29-.11l-2.36-.86c-.14-.049-.27-.1-.34-.117a2.679 2.679 0 0 0-.19.305l-.61 1.01a.741.741 0 0 1-.94.293 9.693 9.693 0 0 1-2.83-1.964A9.527 9.527 0 0 1 5.1 6.95a.733.733 0 0 1 .29-.937l1.01-.606c.12-.073.24-.148.3-.191a2.2 2.2 0 0 0-.11-.34l-.86-2.367c-.04-.114-.09-.23-.11-.288H3.23a2.878 2.878 0 0 0-.36-.001Zm11.74 11.781Zm.01-.024Zm.01-.014Zm.02-2.728Zm-.03-.043Zm-3.03-1.066ZM6.71 5.247ZM2.84 2.224Zm.02 0Zm2.79 0Zm-2.77-.012Zm10.27 5.134a.743.743 0 0 1-.73-.6 2.957 2.957 0 0 0-2.33-2.332.735.735 0 0 1-.58-.866.743.743 0 0 1 .87-.583 4.416 4.416 0 0 1 3.49 3.5.734.734 0 0 1-.58.866.665.665 0 0 1-.14.012Zm2.95-.007a.735.735 0 0 1-.73-.656 5.914 5.914 0 0 0-5.22-5.209.738.738 0 1 1 .17-1.467 7.383 7.383 0 0 1 6.52 6.511.747.747 0 0 1-.66.817c-.02-.001-.05.001-.08.001ZM6.28 19.55H0v1.216h2.4V27.5h1.48v-6.737h2.4v-1.216Zm6.06 1.177V19.55H7.33v7.95h5.01v-1.183H8.81v-2.249h2.78V22.93H8.81v-2.206h3.53Zm2.79 5.555V19.55h-1.48v7.95h4.66v-1.221h-3.18Z" data-name="TEL"/></svg>') 50% 50%/contain no-repeat;
}

/* COMMON-UCAR-detail-button-container
============================== */
.COMMON-UCAR-detail-button-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 11px;
  margin-top: calc(10px + var(--slope-1px) * 5);
}

/* COMMON-UCAR-detail-compare
============================== */
.COMMON-UCAR-detail-compare {
  cursor: pointer;
}

.COMMON-UCAR-detail-compare input {
  display: none;
}

.COMMON-UCAR-detail-compare span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 3.875em;
  border: 1px solid #ccc;
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--base-color);
  font-weight: bold;
  font-size: calc(11px + var(--slope-1px) * 5);
  transition: all .2s;
}

.COMMON-UCAR-detail-compare:hover span {
  background: var(--bg-color);
}

.COMMON-UCAR-detail-compare span:before {
  content: "";
  display: block;
  width: 1.3125em;
  aspect-ratio: 12 / 9;
  background: var(--icon-checked-compare) 50% 50%/contain no-repeat;
}

.COMMON-UCAR-detail-compare span + span {
  display: none;
  border-color: #ccc;
  background: #f4f4f4;
  color: #888;
}

.COMMON-UCAR-detail-compare span + span:before {
  opacity: .64;
}

.COMMON-UCAR-detail-compare input:checked + span {
  display: none;
}

.COMMON-UCAR-detail-compare input:checked + span + span {
  display: flex;
}

/* COMMON-UCAR-detail-condition
============================== */
.COMMON-UCAR-detail-condition {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 3.875em;
  border: 1px solid #ccc;
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--base-color);
  text-decoration: none;
  font-weight: 500;
  font-size: calc(11px + var(--slope-1px) * 5);
  transition: all .2s;
}

.COMMON-UCAR-detail-condition:hover {
  background: var(--bg-color);
}

/* COMMON-UCAR-detail-compare-status
============================== */
.COMMON-UCAR-detail-compare-status {
  display: none;
  grid-column: span 2;
}

/* COMMON-UCAR-detail-section
=============================== */
.COMMON-UCAR-detail-section:not(:first-child) {
  margin-top: calc(15px + var(--slope-1px) * 45);
}

.COMMON-UCAR-detail-section + .COMMON-UCAR-detail-section {
  margin-top: calc(30px + var(--slope-1px) * 30);
}

.COMMON-UCAR-detail-section .COMMON-UCAR-list {
  margin-top: 0 !important;
}

.COMMON-UCAR-detail-section__head {
  position: relative;
  margin-bottom: 1.33333em;
  padding-left: .88889em;
  font-weight: bold;
  font-size: calc(15px + var(--slope-1px) * 3);
}

.COMMON-UCAR-detail-section__head:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 1.11111em;
  background: currentColor;
  transform: translateY(-50%);
}

.COMMON-UCAR-detail-section .COMMON-UCAR-list :is(
.COMMON-UCAR-list-wrapper,
.COMMON-UCAR-list-pc-header,
.COMMON-UCAR-list-sp-header,
.COMMON-UCAR-list-tab-container) {
  display: contents;
}

.COMMON-UCAR-list-compare {
  margin-top: 30px;
}

/* COMMON-UCAR-detail-data
=============================== */
.COMMON-UCAR-detail-data {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-size: calc(12px + var(--slope-1px) * 3);
}

.COMMON-UCAR-detail-data__item {
  display: flex;
  align-items: center;
  width: 100%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.COMMON-UCAR-detail-data__item:nth-child(-n+9) {
  width: 33.33333%;
}

@media screen and (max-width: 1024px) {
  .COMMON-UCAR-detail-data__item:nth-child(-n+10) {
    width: 50%;
  }
}

.COMMON-UCAR-detail-data__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  width: 10.66667em;
  padding: 1em;
  border-right: 0;
  background: var(--bg-color);
  text-align: left;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-data__head {
    justify-content: center;
    width: 5.75em;
    padding-right: .25em;
    padding-left: .25em;
    text-align: center;
  }
}

.COMMON-UCAR-detail-data__body {
  flex-grow: 1;
  padding: .75em 1em;
  border-left: 0;
  text-align: left;
}

@media screen and (max-width: 560px) {
  .COMMON-UCAR-detail-data__body {
    padding-inline: .5em;
  }
}

.COMMON-UCAR-detail-data__body em {
  color: var(--key-color);
}

/* COMMON-UCAR-detail-cartrim
=============================== */
.COMMON-UCAR-detail-cartrim {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12px + var(--slope-1px) * 3);
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim {
    display: block;
  }
  .COMMON-UCAR-detail-cartrim tbody,
  .COMMON-UCAR-detail-cartrim tr,
  .COMMON-UCAR-detail-cartrim th,
  .COMMON-UCAR-detail-cartrim td {
    display: block !important;
    border: 0 !important;
  }
}

.COMMON-UCAR-detail-cartrim font {
  font-size: inherit !important;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim tr {
    margin-top: 1.66667em;
  }
}

.COMMON-UCAR-detail-cartrim th,
.COMMON-UCAR-detail-cartrim td {
  border: 1px solid #ccc;
  vertical-align: middle;
}

.COMMON-UCAR-detail-cartrim th {
  width: 10.66667em;
  padding: 1em;
  border-right: 0;
  background: var(--bg-color);
  text-align: left;
  white-space: nowrap;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim th {
    width: auto;
    margin-block: var(--leading-trim) calc(.6em + var(--leading-trim));
    padding: 0;
    background: none;
    font-weight: bold;
  }
}

.COMMON-UCAR-detail-cartrim th br {
  display: none;
}

.COMMON-UCAR-detail-cartrim td {
  padding: .75em 1em;
  border-left: 0;
  text-align: left;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim td {
    padding: 0;
    border: 0;
  }
}

.COMMON-UCAR-detail-cartrim td em {
  color: var(--key-color);
}

.COMMON-UCAR-detail-cartrim td > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim td > ul {
    margin: -3px;
  }
}

.COMMON-UCAR-detail-cartrim td > ul > li {
  display: block;
  margin: 3px;
  padding: .48214em 1em;
  border: 1px solid #ccc;
  letter-spacing: .03em;
  font-size: 14px;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-detail-cartrim td > ul > li {
    font-size: inherit;
  }
}

/* COMMON-UCAR-detail-print
=============================== */
.COMMON-UCAR-detail-print {
  text-align: center;
}

.COMMON-UCAR-detail-print:not(:first-child) {
  margin-top: 40px;
}

.COMMON-UCAR-detail-print a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18.66667em;
  height: 3.33333em;
  margin-inline: auto;
  border: 1px solid var(--base-color);
  border-radius: var(--button-radius);
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}

.COMMON-UCAR-detail-print a:hover {
  background: var(--base-color);
  color: #fff;
}

/* COMMON-UCAR-detail-caution
=============================== */
.COMMON-UCAR-detail-caution {
  font-size: calc(11px + var(--slope-1px) * 2);
}

.COMMON-UCAR-detail-caution:not(:first-child) {
  margin-top: calc(28px + var(--slope-1px) * 7);
}

.COMMON-UCAR-detail-caution li {
  padding: 0 0 0 1em;
  list-style-type: none;
  text-indent: -1em;
}

/* COMMON-UCAR-detail-back
=============================== */
.COMMON-UCAR-detail-back {
  text-align: center;
}

.COMMON-UCAR-detail-back:not(:first-child) {
  margin-top: calc(30px + var(--slope-1px) * 10);
}

.COMMON-UCAR-detail-back a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18.66667em;
  height: 3.33333em;
  margin-inline: auto;
  border: 1px solid var(--base-color);
  border-radius: var(--button-radius);
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}

.COMMON-UCAR-detail-back a:hover {
  background: var(--base-color);
  color: #fff;
}

/* COMMON-UCAR-compare-button
============================== */
.COMMON-UCAR-compare-button {
  flex-grow: 1;
  max-width: 270px;
  margin-right: auto;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-compare-button {
    margin-left: auto;
  }
}

.COMMON-UCAR-compare-button a {
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: 100%;
  height: 3.33333em;
  max-width: 18.66667em;
  margin-inline: auto;
  border: 1px solid var(--base-color);
  border-radius: var(--button-radius);
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  font-size: calc(14px + var(--slope-1px) * 1);
  cursor: pointer;
  transition: all .1s ease-out;
}

@container CMN-UCAR (max-width: 767px) {
  .COMMON-UCAR-compare-button a {
    width: 18em;
    margin-left: auto;
  }
}

.COMMON-UCAR-compare-button a:hover {
  background: var(--base-color);
  color: #fff;
}

.COMMON-UCAR-compare-button a:before {
  content: "";
  display: block;
  width: 12px;
  aspect-ratio: 1 / 1;
  background: currentColor;
  mask: var(--icon-list) 50% 50%/contain no-repeat;
}

/* COMMON-UCAR-delete
=============================== */
.COMMON-UCAR-delete {
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}

/* Media Query Setting
====================================== */
.u-tablet-block {
  display: none !important;
}

@container CMN-UCAR (max-width: 767px) {
  .u-tablet-block {
    display: block !important;
  }
}

.u-tablet-inline-block {
  display: none !important;
}

@container CMN-UCAR (max-width: 767px) {
  .u-tablet-inline-block {
    display: inline-block !important;
  }
}

.u-tablet-flex {
  display: none !important;
}

@container CMN-UCAR (max-width: 767px) {
  .u-tablet-flex {
    display: flex !important;
  }
}

@container CMN-UCAR (max-width: 767px) {
  .u-tablet-none {
    display: none !important;
  }
}

.u-mobile-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-block {
    display: block !important;
  }
}

.u-mobile-inline-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-inline-block {
    display: inline-block !important;
  }
}

.u-mobile-flex {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-flex {
    display: flex !important;
  }
}

@media screen and (max-width: 560px) {
  .u-mobile-none {
    display: none !important;
  }
}

/* text align
====================================== */
.u-ta-left {
  text-align: left !important;
}

.u-ta-right {
  text-align: right !important;
}

.u-ta-center {
  text-align: center !important;
}

/* display
====================================== */
.u-d-block {
  display: block !important;
}

.u-d-none {
  display: none !important;
}

.u-d-inline {
  display: inline !important;
}

.u-d-ib {
  display: inline-block !important;
}

/* position
====================================== */
.u-pos-static {
  position: static !important;
}

.u-pos-relative {
  position: relative !important;
}

.u-pos-absolute {
  position: absolute !important;
}

.u-pos-fixed {
  position: fixed !important;
}

/* clear
====================================== */
.u-clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

/* other
====================================== */
.u-strong {
  font-weight: bold !important;
}

.u-pointer {
  cursor: pointer;
}

.u-nowrap {
  white-space: nowrap;
}

.u-color-honda {
  color: #cc0000 !important;
}

.u-color-ciao {
  color: #0068b6 !important;
}

.u-color-mamoru {
  color: #8fc31f !important;
}

.u-rotate-90 {
  transform: rotate(90deg);
}

/* animationn
====================================== */
.u-no-transition {
  transition: none !important;
}