@charset "UTF-8";

@font-face {
	font-family: 'MyYuGothicM';
	font-weight: normal;
	src: local('YuGothic-Medium'), /* PostScript Name = localの正式な指定方法 */
	local('Yu Gothic Medium'),     /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
}

@font-face {
	font-family: 'MyYuGothicM';
	font-weight: bold;
	src: local('YuGothic-Bold'), /* PostScript Name = localの正式な指定方法 */
	local('Yu Gothic');          /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
}

:root {
  --usr-scrollbar-width: 0;

  /* color */
  --color-white: #fff;
  --color-primary: #D81625; /* brand color */
  --color-primary2: #AF8E60;
  --color-primary3: #846a43;
  --color-tert: #f5f5f5;
  --color-danger: #555;
  --color-default: #222;
  --color-alert: #D81625;

  /* transition */
  --transition-all: all .3s ease;
  --transition-opacity: opacity .3s ease;
}

body {
  font-family: "Zen Kaku Gothic New", "MyYuGothicM", "YuGothic", BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #222;
  line-height: 1.5;
}

a {
  color: #333;
  font-weight: 500;
  text-decoration: none;
}

a:where(:hover, :focus) {
  text-decoration: underline;
}

a, button, input {
  outline: none;
}

a:is(:hover, :focus, :active),
button:is(:hover, :focus, :active),
input:is(:hover, :focus, :active),
select:is(:hover, :focus, :active) {
  outline: none;
}

h1,
.h1 {
  margin: 0 0 12px;
  padding: 0;
  font-size: 22px;
  font-weight: bold;
  color: #222;
  border: 0;
  background: none;
}
@media screen and (max-width: 768px) {
h2,
.h2 {
  margin: 0 0 8px;
  padding: 0 0 0 16px;
  font-size: 20px;
  font-weight: bold;
  color: #222;
  background: url(../../img/usr/common/icon/icon_ttl_dot_sp.svg) no-repeat 0 5px;
  background-size: 6px 22px;
}
}

h3,
.h3 {
  margin: 0 0 8px;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: #222;
  background: none;
}

h4,
.h4 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: #222;
  border-bottom: 0;
  background: none;
}

h5,
.h5 {
  font-size: 14px;
  font-weight: bold;
  background: none;
}

h6,
.h6 {
  font-size: 14px;
  font-weight: 500;
  background: none;
}

.price {
  color: #081f2c;
}

.price::after,
.default-price::after {
  content: "（税込）";
}

.price.pickup-parent-price::after {
  content: "（税込）～";
}

.net::after,
.price.net::after,
.net-price::after,
.default-net::after {
  content: "（税抜）";
}

.pager-count span {
  font-weight: normal;
}

.action .btn {
  border-bottom-width: 1px;
}

.btn-default {
  border: 1px solid var(--color-default);
  color: var(--color-white);
  background: var(--color-default);
}

.btn-primary {
  border: 1px solid var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}

.btn-secondary {
  border: 1px solid #9d9896;
  color: #fff;
  background: #9d9896;
}

.btn-danger {
  border: 1px solid var(--color-danger);
  color: var(--color-white);
  background: var(--color-danger);;
}

/* new button color */
.btn-primary2 {
  border: 1px solid var(--color-primary2);
  color: var(--color-white);
  background-color: var(--color-primary2);
}

.btn-tert {
  border: 1px solid transparent;
  color: var(--color-default);
  background-color: transparent;
}

.btn-tert2 {
  border: 1px solid var(--color-tert);
  color: var(--color-default);
  background-color: var(--color-tert);
}

.btn-shadow {
  border: 1px solid transparent;
  box-shadow: 0px 1px 6px #0000001A;;
  color: var(--color-default);
  background-color: var(--color-white);
}

.btn-border-primary {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-white);
}

.btn-border-primary2 {
  border: 1px solid var(--color-primary3);
  color: var(--color-primary3);
  background-color: var(--color-white);
}

.btn-border-default {
  border: 1px solid var(--color-default);
  color: var(--color-default);
  background-color: var(--color-white);
}

/* new button height - bold */
.btn-h-primary-64 {
  height: 64px;
  font-size: 18px;
  font-weight: bold;
  line-height: 64px;
}

.btn-h-primary-52 {
  height: 52px;
  font-size: 16px;
  font-weight: bold;
  line-height: 52px;
}

.btn-h-primary-44 {
  height: 44px;
  width: fit-content;
  font-size: 14px;
  font-weight: bold;
  line-height: 44px;
}

.btn-h-primary-40 {
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
}

.btn-h-primary-93 {
  height: 93px;
  font-size: 14px;
  font-weight: bold;
  line-height: 93px;
}

/* new button height - medium */
.btn-h-secondary-48 {
  height: 48px;
  font-size: 14px;
  font-weight: 500;
  line-height: 48px;
}

.btn-h-secondary-36 {
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
}

.btn-h-secondary-32 {
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
}

/* new button height - regular */
.btn-h-tert-52 {
  height: 52px;
  font-size: 16px;
  font-weight: 400;
}

.btn-h-tert-44 {
  height: 44px;
  font-size: 16px;
  font-weight: 400;
  line-height: 44px;
}

.btn-h-tert-36 {
  height: 36px;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
}

.btn-h-primary-93 {
  height: 93px;
  font-size: 14px;
  font-weight: 400;
  line-height: 93px;
}

/* new text link */
.link-text {
  display: flex;
  align-items: center;
  width: fit-content;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

.link-text--icon {
  line-height: 1;
}

.icon-svg-link-arrow {
  transform-origin: center;
  transform-box: fill-box;
  transform: translateY(-3px);
  transition: transform .3s ease;
}

.icon-svg-link-arrow-bdr {
  transform-origin: center bottom;
  transform-box: fill-box;
  transform: scale(0);
  transition: transform .3s ease;
}

.link-text-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 500;
}

.link-text-back::before {
  display: block;
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 14px;
  background: url(../../img/usr/common/icon/icon_arrow_back.svg) no-repeat 0 1px;
  background-size: 5px 14px;
}

/* tag */
.link-search-tag {
  display: block;
  padding: 5px 12px 3px;
  width: fit-content;
  height: 30px;
  background-color: #fff;
  color: #2A2725;
  font-size: 14px;
  border: 1px solid #D6D6D6;
  border-radius: 50vh;
  line-height: 1;
  font-weight: normal;
}

/* tag icon */
.icon-tag-label {
  display: inline-block;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1;
  background-color: #f5f5f5;
  font-weight: normal;
}

.icon-tag-label.-type02 {
  background-color: #eee;
}

.icon-tag-label2 {
  display: inline-block;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background-color: #9A9A9A;
  font-weight: normal;
}



/**/
.pane-contents .swiper-button-next:after,
.pane-contents .swiper-button-prev:after,
.pane-contents .swiper-rtl .swiper-button-next:after,
.pane-contents .swiper-rtl .swiper-button-prev:after {
  content: "";
}

/* --- 初回表示時に未初期化スライダーの矢印が露出する対策 --- */

/* MV: Swiper初期化完了まで矢印・ページネーションを隠す */
.block-top-mv:not(.swiper-initialized) .block-top-mv--button,
.block-top-mv:not(.swiper-initialized) .block-top-mv--pagenation,
.block-top-sp-mv:not(.swiper-initialized) .block-top-mv--button,
.block-top-sp-mv:not(.swiper-initialized) .block-top-mv--pagenation {
  display: none !important;
}

/* カート残リマインド枠: スライダー初期化完了まで矢印を隠す */
#cart_remind_pc_contents:not(:has(.swiper-initialized)) .parts-swiper-arrow,
#cart_remind_sp_contents:not(:has(.swiper-initialized)) .parts-swiper-arrow,
#cart_remind_pc_contents:not(:has(.swiper-initialized)) .swiper-button-prev,
#cart_remind_pc_contents:not(:has(.swiper-initialized)) .swiper-button-next,
#cart_remind_sp_contents:not(:has(.swiper-initialized)) .swiper-button-prev,
#cart_remind_sp_contents:not(:has(.swiper-initialized)) .swiper-button-next {
  display: none !important;
}