/* Utility
========================================================================================
======================================================================================== */
/* Font Color
============================================ */
.mc-fc__main {
  color: #A4D4D6 !important;
}

.mc-fc__sub {
  color: #097689 !important;
}

.mc-fc__base {
  color: #FFFEF1 !important;
}

.mc-fc__black {
  color: #313131 !important;
}

.mc-fc__white {
  color: #fff !important;
}

.mc-fc__gray {
  color: #6e6e6e !important;
}

/* Background color
============================================ */
.mc-bgc__main {
  background-color: #A4D4D6 !important;
}

.mc-bgc__sub {
  background-color: #097689 !important;
}

.mc-bgc__base {
  background-color: #FFFEF1 !important;
}

.mc-bgc__em {
  background-color: #fffbdb !important;
}

.mc-bgc__black {
  background-color: #313131 !important;
}

.mc-bgc__white {
  background-color: #fff !important;
}

.mc-bgc__gray {
  background-color: #d5d5d5 !important;
}

.mc-bgc__none {
  background-color: transparent !important;
}

.l-block:not(.mc-bgc__base)+.l-block.mc-bgc__base,
.l-block.mc-bgc__base+.l-block:not(.mc-bgc__base),
.l-block:not(.mc-bgc__induction)+.l-block.mc-bgc__induction,
.l-block.mc-bgc__induction+.l-block:not(.mc-bgc__induction) {
  padding-top: 30px;
}

.l-block.u-bgc__base+.l-block.mc-bgc__base,
.l-block.mc-bgc__base+.l-block.u-bgc__base,
.l-block.u-bgc__lightgreen+.l-block.mc-bgc__base,
.l-block.mc-bgc__base+.l-block.u-bgc__lightgreen {
  padding-top: 0;
}

.p-productwrap .-large .l-block.mc-bgc__base {
  padding-right: 20px;
  padding-left: 20px;
}

@media screen and (max-width: 1080px) {
  .p-productwrap .-large .l-block.mc-bgc__base {
    width: calc(100% + 60px);
    padding-right: 30px;
    padding-left: 30px;
    margin-left: -30px;
  }
}

@media screen and (max-width: 768px) {
  .p-productwrap .-large .l-block.mc-bgc__base {
    width: calc(100% + 20px);
    padding-right: 10px;
    padding-left: 10px;
    margin-left: -10px;
  }
}

.l-block.u-bgc__lightgreen,
.l-block.u-bgc__base,
.l-block[data-value=MOD_JP_00080] [class*=__arrow],
.l-block[data-value=MOD_JP_00016] [class*=__arrow] {
  background-color: #FFFEF1;
}

.c-accordion__title * {
  cursor: pointer;
}

.c-accordion__title[class*=mc-fc__main]>.c-accordion__icon::before,
.c-accordion__title[class*=mc-fc__main]>.c-accordion__icon::after {
  background-color: #A4D4D6 !important;
}

.c-accordion__title[class*=mc-fc__sub]>.c-accordion__icon::before,
.c-accordion__title[class*=mc-fc__sub]>.c-accordion__icon::after {
  background-color: #097689 !important;
}

.c-accordion__title[class*=mc-fc__white]>.c-accordion__icon::before,
.c-accordion__title[class*=mc-fc__white]>.c-accordion__icon::after {
  background-color: #fff !important;
}

.c-accordion__title[class*=mc-fc__gray]>.c-accordion__icon::before,
.c-accordion__title[class*=mc-fc__gray]>.c-accordion__icon::after {
  background-color: #d5d5d5 !important;
}

/* Border
============================================ */
.mc-border__main {
  border: 1px solid #A4D4D6;
}

.mc-border__sub {
  border: 1px solid #097689;
}

.mc-border__black {
  border: 1px solid #313131;
}

.mc-border__white {
  border: 1px solid #fff;
}

.mc-border__none {
  border: none !important;
}

.mc-berc__main {
  border-color: #A4D4D6 !important;
}

.mc-berc__sub {
  border-color: #097689 !important;
}

.mc-berc__black {
  border-color: #313131 !important;
}

.mc-berc__white {
  border-color: #fff !important;
}

.mc-berr__none {
  border-radius: 0 !important;
}

.mc-berr__corner {
  overflow: hidden;
  border-radius: 6px;
}

.mc-berr__full {
  overflow: hidden;
  border-radius: 50%;
}

.mc-berw__1 {
  border-width: 1px !important;
}

.mc-berw__2 {
  border-width: 2px !important;
}

.mc-berw__3 {
  border-width: 3px !important;
}



/* Button
============================================ */
.mc-designbtn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 470px;
  padding: 25px 16px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  color: #464C4D;
  background-color: #A4D4D6;
  border: 2px solid #A4D4D6;
  border-radius: 6px;
  -webkit-transition: 0.175s;
  transition: 0.175s;
}
.mc-designbtn > span {
  max-width: 100%;
  /* ((12px + 2px) * 1.4142) / 2 */
  padding: 0 9.8994px;
}
.mc-designbtn::after {
  position: absolute;
  top: 50%;
  /* right: calc(16px + 2px); */
  right: 18px;
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border-top: 2px solid #464C4D;
  border-right: 2px solid #464C4D;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}
.mc-designbtn.-reverse {
  color: #313131;
  background-color: #fff;
  border-color: #59A6A9;
}
.mc-designbtn.-reverse::after {
  border-color: #313131;
}
.mc-designbtn.-small {
  padding: 14px;
  font-size: 16px;
}
.mc-designbtn.-small::after {
  /* right: calc(14px + 2px); */
  right: 16px;
}
.mc-designbtn.-noArrow > span {
  padding: 0;
}
.mc-designbtn.-noArrow::after {
  display: none;
}

@media screen and (max-width: 768px) {
  .mc-designbtn {
    padding: 14px;
    font-size: 16px;
  }
  .mc-designbtn::after {
    /* right: calc(16px + 2px); */
    right: 16px;
  }
}


/* ------------------------------------- mv  */
/* mvblock */
.p-mvblock {
  position: relative;
  z-index: 0;
  display: block;
  max-width: 2000px;
  overflow: hidden;
  padding: 30px 0 0;
  margin: 0 auto;
  background-color: #fffbdb ;
}

.p-mvblock__inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.p-mvblock__title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.p-mvblock__title::before,
.p-mvblock__title::after {
  position: absolute;
  z-index: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  top: 50%;
  width: calc((100% - 230px) / 2);
  height: calc(100% + 30px + 24px);
  max-height: 170px;
  content: "";
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
}

.p-mvblock__title::before {
  left: 0;
  background-image: url("/include/shopping/gift/syussaniwai/image/598_mvbg_left_250618_pc.png");
  background-position: left center;
}

.p-mvblock__title::after {
  right: 0;
  background-image: url("/include/shopping/gift/syussaniwai/image/598_mvbg_right_250618_pc.png");
  background-position: right center;
}

.p-mvblock__title .-main,
.p-mvblock__title .-sub {
  z-index: 5;
  display: block;
}

.p-mvblock__title .-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 50px;
  font-weight: bold;
  line-height: 1.3;
  color: #9E6522;
}

.p-mvblock__title .-sub {
  font-size: 20px;
  font-weight: normal;
  line-height: 1.6;
  color: #9E6522;
  text-align: center;
  font-weight: 700;
}

.p-mvblock__title .-sub + .-main {
  margin-top: 5px;
}

.p-mvblock__title {
  z-index: 5;
  display: block;
}

.p-mvblock__slider {
  position: relative;
  z-index: 5;
  margin-top: 48px;
  border-top: 1px solid #9E6522;
}

.p-mvblock__sliderTitle {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0 20px;
  white-space: nowrap;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fffbdb ), color-stop(50%, #FFF8C7));
  background: linear-gradient(180deg, #fffbdb  50%, #FFF8C7 50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  /* add */
  z-index: 1; /* mv-sliderにrelativeがあり順番で負ける */
}

.p-mvblock__sliderTitle .-main,
.p-mvblock__sliderTitle .-sub {
  display: inline-block;
  font-weight: bold;
  line-height: 1.6;
  color: #9E6522;
}

.p-mvblock__sliderTitle .-main {
  font-size: 32px;
}

.p-mvblock__sliderTitle .-sub {
  font-size: 20px;
}


@media screen and (max-width: 768px) {
  .p-mvblock__title::before,
  .p-mvblock__title::after {
    width: calc((100% - 140px - 24px) / 2);
    height: calc(100% + 30px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-position: center;
  }

  .p-mvblock__title .-main {
    font-size: 30px;
  }

  .p-mvblock__title .-sub {
    font-size: 14px;
  }

  .p-mvblock__slider {
    margin-top: 30px;
  }

  .p-mvblock__sliderTitle .-main {
    font-size: 20px;
  }

  .p-mvblock__sliderTitle .-sub {
    font-size: 16px;
  }
}
@media screen and (max-width: 450px) {
  .p-mvblock__title::before,
  .p-mvblock__title::after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .p-mvblock__title::before {
    left: 0;
    background-image: url("/include/shopping/gift/syussaniwai/image/598_mvbg_left_250618_sp.png");
  }

  .p-mvblock__title::after {
    right: 0;
    background-image: url("/include/shopping/gift/syussaniwai/image/598_mvbg_right_250618_sp.png");
  }
}

/* MV Slider
============================================ */
.p-mvslider.is-load {
  visibility: visible;
  opacity: 1;
}

.p-mvslider {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;

  /* add */
  padding: 0 30px;
  background-color: #FFF8C7;
  overflow: hidden;
}
.p-mvslider__inner {
  /* 画面幅1200px時, 高さ30px */
  /* 100vw * (30 / 1200) */
  display: block;
  width: 100%;
  max-width: 1200px;
  padding-top: clamp(0px, 2.5vw, 30px);
  padding-bottom: clamp(0px, 2.5vw, 30px);
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .p-mvslider__inner {
    /* 画面幅750px時, 高さ60px */
    /* 100vw * (60 / 750) */
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
}

/* MV Slider - swiper item
============================================ */
.p-mvslider__swiper {
  /* 画面幅1200px時, 高さ30px */
  /* 100vw * (30 / 1200) */
  position: relative;
  z-index: 1;
  padding: 0;
  margin-top: clamp(0px, 2.5vw, 30px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  list-style: none;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.p-mvslider__swiperWrap {
  position: relative;
  z-index: 1;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.p-mvslider__swiperItem {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: solid 4px #A4D4D6;
  -webkit-transition: scale 0.75s;
  transition: scale 0.75s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.p-mvslider__swiperItemBody {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.p-mvslider__swiperName {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 10px;
  line-height: 1.5;
  color: #464C4D;
  background-color: #A4D4D6;
}
.p-mvslider__swiperName > .-main, .p-mvslider__swiperName > .-sub {
  display: inline-block;
  line-height: 1.3;
}
.p-mvslider__swiperName > .-sub {
  font-size: 14px;
  font-weight: normal;
}
.p-mvslider__swiperName > .-main {
  position: relative;
  font-size: 16px;
  font-weight: bold;
}
.p-mvslider__swiperName > .-main::after {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 1.3539810494px;
  content: "";
  border-top: 2px solid #464C4D;
  border-right: 2px solid #464C4D;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media screen and (min-width: 769px) {
  /* swiper */
  /* .p-mvslider {
    padding: 0 30px;
  } */
  .p-mvslider__swiperWrap {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .p-mvslider__swiperItem img {
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
  }
  .p-mvslider__swiperItem .p-mvslider__swiperName {
    cursor: pointer;
    -webkit-transition: background-color 300ms;
    transition: background-color 300ms;
  }
  .p-mvslider__swiperItem:has(*:hover) img {
    opacity: 0.5;
    background-color: #fff;
  }
  .p-mvslider__swiperItem:has(*:hover) .p-mvslider__swiperName {
    background-color: #9ed8e3;
  }
}
@media screen and (max-width: 768px) {
  .p-mvslider {
    visibility: hidden;
    opacity: 0;
    padding: 0 ;
  }
}


/* MV Slider - pagination pause
============================================ */
.p-mvslider__swiperPagination {
  display: none;
}

.p-mvslider .swiper-pagination-bullets {
  bottom: 0;
  left: 0;
  -webkit-transform: none;
          transform: none;
}
.p-mvslider .swiper-pagination-bullet {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  height: auto;
  margin: 0 8px;
  cursor: pointer;
  background-color: transparent;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-mvslider .swiper-pagination-bullet span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #464C4D;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.p-mvslider .swiper-pagination-bullet svg {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.p-mvslider .swiper-pagination-bullet circle {
  fill: #fff;
  stroke: #A4D4D6;

  stroke-dasharray: 125.664px;
  stroke-dashoffset: 125.664px;
  stroke-linecap: round;
  stroke-width: 2;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/* active */
.p-mvslider .swiper-pagination-bullet-active circle {
  fill: #A4D4D6;
  stroke: #fff;
  -webkit-animation: progress 5s;
          animation: progress 5s;
}
/* pause */
.p-mvslider .swiper-pagination-bullet-active.is-pause circle {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
/* pause off */
.p-mvslider .swiper-pagination-bullet-active.is-animation circle {
  stroke: #fff;
  -webkit-animation: re-progress 5s;
          animation: re-progress 5s;
  stroke-dashoffset: 125.664px;
}

@-webkit-keyframes progress {
  0% {
    stroke-dashoffset: 125.664px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes progress {
  0% {
    stroke-dashoffset: 125.664px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes re-progress {
  0% {
    stroke-dashoffset: 125.664px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes re-progress {
  0% {
    stroke-dashoffset: 125.664px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@media screen and (min-width: 769px) {
  .p-mvslider__swiperBtn {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .p-mvslider__swiperBottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 4vw;
  }
  .p-mvslider__swiperPagination {
    /* 画面幅1200px時, 高さ30px */
    /* 100vw * (30 / 1200) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* margin-top: 2.5vw; */
  }
  .p-mvslider__swiperBtn {
    cursor: pointer;
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    /* margin-top: 30px; */
    margin-left: 8px;
    border-radius: 50%;
    background-color: #A4D4D6;
    border: 2px solid #fff;
    border-radius: 50%;
  }
  .p-mvslider__swiperBtn img {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(15%) saturate(188%) hue-rotate(141deg) brightness(96%) contrast(88%);
            filter: brightness(0) saturate(100%) invert(27%) sepia(15%) saturate(188%) hue-rotate(141deg) brightness(96%) contrast(88%);
  }
}



/* -------------------------------------ナビゲーション */
.p-nav {
  display: block;
  width: 100%;
  overflow: hidden;
}

.p-nav__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(100% + 24px);
  margin-top: -24px;
  margin-left: -24px;
}

@media screen and (max-width: 768px) {
  .p-nav__lists {
    width: calc(100% + 10px);
    margin-top: -10px;
    margin-left: -10px;
  }
}


.c-nav__linkwrap {
  /* overwrite */
  color: #464C4D;
  background-color: #A4D4D6;
  border-color: #A4D4D6;
}
@media screen and (max-width: 768px) {
  .c-nav__linkwrap {
    padding: 15px 10px 28px;
    font-size: 16px
  }
}
@media screen and (max-width: 340px) {
  .c-nav__linkwrap {
    padding: 15px 2px 28px;
    font-size: 15px
  }
}
.c-nav__linkwrap[data-arrow=down] span::after {
  border-color: #464C4D;
}
.c-nav__linkwrap[data-arrow=right] span::after {
  border-color: #464C4D;
}


/* manners
============================================ */
.mc-article__itemlinkwrap {
  display: block;
  width: 100%;
}
.mc-article__itemlinkwrap * {
  cursor: pointer;
}
.mc-article__img {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.mc-article__img:before {
  display: block;
  padding-top: 56%;
  content: "";
}
.mc-article__img>img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 640px) {
  .mc-article__list {
    width: 100%;
    margin: 0;
  }
  .mc-article__cont {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
    -ms-align-items: flex-start;
    -webkit-align-items: flex-start;
  }
  .mc-article__img {
    width: calc((220 / 710) * 100%);
    margin-bottom: 0;
  }
  .mc-article__info {
    width: calc((454 / 710) * 100%);
    margin-top: -2px;
  }
}

/* gift search
============================================ */
.c-giftselectsearch[class] {
  margin-right: auto;
  margin-left: auto;
  padding-top: 60px;
  background-color: inherit;
}
@media screen and (max-width: 768px) {
  .c-giftselectsearch[class] {
    padding-top: 40px;
  }
}

[class].c-giftselectsearch__title::after {
  -webkit-filter: brightness(0) saturate(100%) invert(57%) sepia(54%) saturate(309%) hue-rotate(133deg) brightness(94%) contrast(91%);
  filter: brightness(0) saturate(100%) invert(57%) sepia(54%) saturate(309%) hue-rotate(133deg) brightness(94%) contrast(91%);

}


/* recipient pickup
============================================ */
/* box Title
============================================ */
.mc-boxtitle {
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ebf1f1;
}

.mc-boxtitle,
.mc-boxtitle__inner {
  display: block;
  width: 100%;
  line-height: 1;
  border: #bdd1cf solid 2px;
}

.mc-boxtitle__inner {
  height: 100%;
  padding: 16px 10px;
}

.mc-boxtitle__inner > * {
  line-height: 1.6;
  text-align: center;
}

.mc-boxtitle .-main {
  font-size: 32px;
}

.mc-boxtitle .-cap {
  font-size: 18px;
}

.mc-boxtitle::before,
.mc-boxtitle::after,
.mc-boxtitle__inner::before,
.mc-boxtitle__inner::after {
  position: absolute;
  z-index: 0;
  width: 14.2px;
  height: 1.5px;
  content: "";
  background-color: #bdd1cf;
}

.mc-boxtitle::before,
.mc-boxtitle::after {
  top: 4px;
}

.mc-boxtitle__inner::before,
.mc-boxtitle__inner::after {
  bottom: 4.5px;
}

.mc-boxtitle::before,
.mc-boxtitle__inner::before {
  left: -2px;
}

.mc-boxtitle::after,
.mc-boxtitle__inner::after {
  right: -2px;
}

.mc-boxtitle::before,
.mc-boxtitle__inner::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mc-boxtitle::after,
.mc-boxtitle__inner::before {
  right: -2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* -orange */
/* 背景色 */
.mc-boxtitle.-orange {
  background-color: #FFF9F5;
}
/* ボーダー色 */
.mc-boxtitle.-orange,
.mc-boxtitle.-orange .mc-boxtitle__inner {
  border-color: #F2BD9D;
}
/* 装飾ライン色 */
.mc-boxtitle.-orange::before,
.mc-boxtitle.-orange::after,
.mc-boxtitle.-orange .mc-boxtitle__inner::before,
.mc-boxtitle.-orange .mc-boxtitle__inner::after {
  background-color: #F2BD9D;
}

/* -blue */
/* 背景色 */
.mc-boxtitle.-blue {
  background-color: #F5FBFF;
}
/* ボーダー色 */
.mc-boxtitle.-blue,
.mc-boxtitle.-blue .mc-boxtitle__inner {
  border-color: #A5D2F2;
}
/* 装飾ライン色 */
.mc-boxtitle.-blue::before,
.mc-boxtitle.-blue::after,
.mc-boxtitle.-blue .mc-boxtitle__inner::before,
.mc-boxtitle.-blue .mc-boxtitle__inner::after {
  background-color: #A5D2F2;
}

/* -blue */
/* 背景色 */
.mc-boxtitle.-pink {
  background-color: #FFFAFA;
}
/* ボーダー色 */
.mc-boxtitle.-pink,
.mc-boxtitle.-pink .mc-boxtitle__inner {
  border-color: #F7B2B3;
}
/* 装飾ライン色 */
.mc-boxtitle.-pink::before,
.mc-boxtitle.-pink::after,
.mc-boxtitle.-pink .mc-boxtitle__inner::before,
.mc-boxtitle.-pink .mc-boxtitle__inner::after {
  background-color: #F7B2B3;
}

@media screen and (max-width: 768px) {
  .mc-boxtitle {
    margin-bottom: 10px;
  }
  .mc-boxtitle.-bottom {
    margin-bottom: 0;
    border-bottom: none;
  }
  .mc-boxtitle .-main {
    font-size: 20px;
  }

  .mc-boxtitle .-cap {
    font-size: 15px;
  }

  .mc-boxtitle__inner {
    padding: 18px 10px;
  }
}

/* recommend card
============================================ */
.p-recommendcard {
  display: block;
  width: 100%;
  height: 100%;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #93adaa;
}

.p-recommendcard .p-icontext {
  font-weight: bold;
}

.p-recommendcard .c-link.-arrow {
  color: #616161;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;
}

.p-recommendcard .c-link.-arrow:after {
  border-color: #616161;
}

.p-recommendcard__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-recommendcard__prod > * + * {
  margin-top: 10px;
}

.p-recommendcard__taglist {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.p-recommendcard__tag {
  background: #e7e7e7;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #575757;
  font-weight: bold;
}

.p-recommendcard__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0;
  line-height: 0;
}

.p-recommendcard__title > .-icn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 9px;
  font-weight: bold;
  color: #313131;
  background-color: #00ad99;
  border-radius: 50%;
  line-height: 1.6;
}

.p-recommendcard__title > .-icn > span {
  font-size: 16px;
  line-height: 1;
}

.p-recommendcard__title > .-icn + .-txt {
  max-width: calc(100% - 10px - 50px);
  margin-left: 10px;
}

.p-recommendcard__title > .-txt {
  font-size: 20px;
  line-height: 1.6;
}

.p-recommendcard__img {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.p-recommendcard__img * {
  display: inline-block;
}

/* -orange */
.p-recommendcard.-orange {
  border-color: #F2BD9D;
}
.p-recommendcard.-orange .p-recommendcard__title > .-icn {
  background-color: #F3D2BE;
}
/* -blue */
.p-recommendcard.-blue {
  border-color: #A5D2F2;
}
.p-recommendcard.-blue .p-recommendcard__title > .-icn {
  background-color: #CBE4F6;
}
/* -pink */
.p-recommendcard.-pink {
  border-color: #F7B2B3;
}
.p-recommendcard.-pink .p-recommendcard__title > .-icn {
  background-color: #FFD3D4;
}


.p-recommendcard .mc-designbtn {
  color: #313131;
}
.p-recommendcard .mc-designbtn::after {
  border-color: #313131;
}
/* -orange */
.p-recommendcard.-orange .mc-designbtn {
  border-color: #F2BD9D;
  background-color: #F2BD9D;
}
/* -blue */
.p-recommendcard.-blue .mc-designbtn {
  border-color: #A5D2F2;
  background-color: #A5D2F2;
}
/* -pink */
.p-recommendcard.-pink .mc-designbtn {
  border-color: #F7B2B3;
  background-color: #F7B2B3;
}

a.p-recommendcard * {
  cursor: pointer;
}




/* category
============================================ */
/* overwrite */
.c-categoryNormalbox__body {
  display: flex;
  flex-flow: column;
  justify-content: end;
  min-height: 100%;
}
.c-categoryNormalbox__name {
  color: #464C4D;
  background-color: #A4D4D6;

}
@media screen and (max-width: 768px) {
  .c-categoryNormalbox__name {
    font-size: 16px;
    padding: 2px 10px;
    /* add */
    /* font-size*2*line-height + padding-top+padding-bottom  */
    min-height: calc(2em * 1.3 + 2px * 2); 
  }
}
/* /overwrite */

.mc-categoryLabel {
  position: relative;
  z-index: 0;
}
.mc-categoryLabel__label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  padding: 7px;
  /* 14(768)-24(1200) */
  font-size: clamp(0.875rem, -0.236rem + 2.31vw, 1.5rem);
  line-height: 1em;
  background-color: #A4D4D6;
}
@media screen and (min-width: 769px) {
  /* 前提：PC時3つ並び・上部にラベルがあるものがPC時に3つ横に並んでいる場合 */
  .l-blockcolumn__item:has(.mc-categoryLabel__label):nth-child(-n + 3) .mc-categoryLabel__label {
    position: unset;
  }
}
@media screen and (max-width: 768px) {
  /* 前提：上部にラベルがあるものがSP時に2つ横に並んでいる */
  /* .mc-categoryLabel__label { */
  .l-blockcolumn__item:has(.mc-categoryLabel__label):nth-child(-n + 4) .mc-categoryLabel__label {
    position: unset;
  }
}
.mc-categoryLabel__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  height: 100%;
}

.mc-categoryLabel__img {
  display: block;
  width: auto;
  min-width: 1em;
  height: 1em;
  margin-right: 10px;
}
@media screen and (max-width: 400px) {
  .mc-categoryLabel__img {
    margin-right: 4px;
  }
}
.mc-categoryLabel__text {
  font-size: clamp(16px , 2.4vw , 19px);
  font-weight: bold;
  color: #464C4D;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mc-categoryLabel__text {
    font-size: clamp(0.875rem, 0.7391rem + 0.5435vw, 1rem);
  }
}

.-no1.mc-categoryLabel__label .mc-categoryLabel__img {
  -webkit-filter: invert(85%) sepia(47%) saturate(476%) hue-rotate(357deg) brightness(104%) contrast(105%);
  filter: invert(85%) sepia(47%) saturate(476%) hue-rotate(357deg) brightness(104%) contrast(105%);
  /* アイコンの色 */
}

.-no2.mc-categoryLabel__label .mc-categoryLabel__img {
  -webkit-filter: invert(98%) sepia(1%) saturate(7465%) hue-rotate(195deg) brightness(122%) contrast(76%);
  filter: invert(98%) sepia(1%) saturate(7465%) hue-rotate(195deg) brightness(122%) contrast(76%);
  /* アイコンの色 */
}

.-no3.mc-categoryLabel__label .mc-categoryLabel__img {
  -webkit-filter: invert(76%) sepia(71%) saturate(613%) hue-rotate(304deg) brightness(98%) contrast(94%);
  filter: invert(76%) sepia(71%) saturate(613%) hue-rotate(304deg) brightness(98%) contrast(94%);
  /* アイコンの色 */
}


/* -------------------------------------送料無料バナー */
.freebnr {
  display: block;
  margin: 0 auto;
  transition: 0.175s;
}

@media screen and (min-width: 769px) {
  .l-block a:hover .freebnr {
    opacity: 0.7;
  }
}





/* special buyers recommend */
.p-buyers-flag:has(+ .l-block[data-value="MOD_JP_00016"]) {
  padding-bottom: 0px;
}
.p-buyers-flag:not(:has(+ .l-block[data-value="MOD_JP_00016"])) {
  padding-bottom: 30px;
}
/* overwrite */
.p-buyers-flag + .u-bgc__base.l-block[data-value="MOD_JP_00016"] {
  background-color: unset;
}
.p-buyers-flag + .l-block[data-value="MOD_JP_00016"] h2 {
  display: block;
  width: 100%;
  padding: 7px 0;
  /* margin-bottom: 30px; */
  margin-bottom: 16px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.p-buyers-flag + .l-block[data-value="MOD_JP_00016"] .c-title__global.-underline {
  border-bottom: unset;
}

.p-buyers-flag + .l-block[data-value="MOD_JP_00016"] h2 .-main {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
}
@media screen and (max-width: 768px) {
  .p-buyers-flag + .l-block[data-value="MOD_JP_00016"] h2 .-main {
    font-size: 17px;
  }
}




/* story article */
#story_flag + .l-block.l-block.u-bgc__base {
  background-color: transparent;
}