@charset "UTF-8";

:root {
  --font-en-other: 'Chillax', sans-serif;
  --color-theme-single: #933939;
  --color-theme-couple: #464064;
  --color-theme-colors: #E0833D;
}

/******** Wordpress wp-pagenavi ********/
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 60px;

  a,
  .current {
    font-size: 1.5rem;
    border: 1px solid #DCDCDC;
    border-radius: 6px;
    color: var(--color-base);
    background-color: #F8F8F8;
    margin: 0 3px;
    width: 3em;
    height: 3em;
    line-height: 3;
    display: block;
    text-decoration: none;
    padding: 0;
    font-family: var(--font-en);
    font-weight: 600;
    color: #C6C6C6;
  }
  .current {
    border-color: var(--color-base) !important;
    color: var(--color-white) !important;
    background: var(--color-base);
  }
}

.previouspostslink,
.nextpostslink{
  position: relative;
  border-color: var(--color-base);
  background-color: #EEF3EA;
}

.wp-pagenavi-prev,
.wp-pagenavi-next {
  display: block;

  &::before{
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--color-base);
    border-bottom: 1px solid var(--color-base);
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    left: 40%;
    bottom: 0;
    margin: auto;
  }
}

.wp-pagenavi-prev::before{
  transform: rotate(-225deg);
  left: 48%;
}

@media screen and (min-width: 48.063em) {
  .wp-pagenavi a:hover {
    color: var(--color-base);
    border-color: var(--color-base);
    background-color: #EEF3EA;
  }
}

/******** Wordpress pager ********/
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  padding: 30px 0 0;
  position: relative;

  a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    gap: 10px;
  }
  .pager-arrow{
    position: relative;

    &::before{
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 5px;
      height: 5px;
      border-right: 2px solid var(--color-base);
      border-bottom: 2px solid var(--color-base);
      transform: rotate(-45deg);
    }
  }
  .back{
    margin: auto;
    width: min(100%, clamp(200px, 30vw, 240px));
  }
  .previous, .next{
    a{
      color: var(--color-base);
    }
  }
  .previous .pager-arrow{
    padding-left: 15px;

    &::before{
      left: 2px;
      transform: rotate(-225deg);
    }
  }
  .next .pager-arrow{
    text-align: right;
    padding-right: 15px;

    &::before{
      right: 2px;
    }
  }
}

@media screen and (max-width: 36.667em) {
  .pager-inner-txt {
    display: none;
  }
}

/******** Wordpress breadcrumbs ********/
.breadcrumbs {
  font-size: 1rem;

  ul, ol {
    list-style: none;
    padding: 0;
  }

  li {
    display: inline;

    &:before {
      content: ">";
      margin: 0 10px;
    }
    &:first-child:before {
      display: none;
    }
  }

  a, a:hover {
    color: var(--color-base);
  }
  a {
    text-decoration: underline;
  }
}

@media screen and (max-width: 36.667em) {
  .breadcrumbs {
    li:before {
      margin: 0 1px;
    }
    li:last-of-type span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 70px;
      display: inline-block;
      vertical-align: bottom;
    }
  }
}

/******** Swiper ********/
.swiper-pagination {
  position: relative;
  bottom: 0;
  margin: 20px 0 0;
}

.swiper-pagination-bullet {
  background: #706C54;
  opacity: 0.2;
  width: 10px;
  height: 10px;
  opacity: 0.2;
  vertical-align: middle;
  transition: .3s;
  margin: 0 7px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-base);
}

.swiper-button-prev,
.swiper-button-next{
  width: 40px;
  height: 40px;
  background-size: contain;
}

.swiper-button-prev{
  left: 0;
  background-image: url("images/common/slide_arrow_prev.svg");
}

.swiper-button-next{
  right: 0;
  background-image: url("images/common/slide_arrow_next.svg");
}

/******** Grid System width Flex ********/
.flexbox {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-dir-reverse {
  flex-direction: row-reverse;
}

.flex-shrink-0{
  flex-shrink: 0;
}

@media screen and (max-width: 48em) {
  .flexbox {
    &.-is-tab-block{
      flex-wrap: wrap;
    }
  }
}

/******** margin ********/
.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: clamp(60px, 10vw, 100px);
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: clamp(60px, 10vw, 100px);
}

/************ common parts ************/
body{
  letter-spacing: 0.02px;
}

[class*="container_"] {
  width: 100%;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

.container_l {
  max-width: 1500px;
}

.container_ml {
  max-width: 1330px;
}

.container_m {
  max-width: 1290px;
}

.container_sm {
  max-width: 1230px;
}

.container_s {
  max-width: 1110px;

  &.-is-slider{
    max-width: 1230px;
  }
}

.container_xs {
  max-width: 1030px;
}

.t-highlight {
  background: linear-gradient(transparent 60%, #FFED99 60%);
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.t-underline {
  text-decoration: underline;
}

.f-en {
  font-family: var(--font-en);
  font-weight: 400;
}

.f-en-other{
  font-family: var(--font-en-other);
  font-weight: 500;
}

.fw-med {
  font-weight: 500;
}

.fw-semib {
  font-weight: 600;
}

.fw-bold {
  font-weight: bold !important;
}

.fw-normal {
  font-weight: normal !important;
}

.f-green {
  color: var(--color-base);
}

.f-red {
  color: var(--color-red);
}

.f-darkred {
  color: var(--color-dark_red);
}

.f-orange {
  color: var(--color-accent);
}

.f-dark_gray{
  color: #4B5049;
}

.f-gray{
  color: #7D7D7D;
}

.f-light_gray{
  color: #BABABA;
}

.pc,
.block {
  display: block;
}

.sp,
.sp-550,
.sp-1024 {
  display: none !important;
}

.inline {
  display: inline !important;
}

.align-top {
  vertical-align: top;
}

.align-baseline {
  vertical-align: baseline;
}

.wd-100 {
  width: 100%;
}

.l-height-14 {
  line-height: 1.4;
}

.l-height-18 {
  line-height: 1.8;
}

.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.bkg-lightgray{
  background-color: #FAFAFA;
}

.bkg-beige{
  background-color: #FFF8F2;
}

.bkg-lightgreen {
  background-color: #EEF3E9;
  padding: 80px 0;
}

.flex-half-item {
  width: calc(95% / 2);
}

.flex-triple-list::after,
.flex-triple-item {
  width: calc(95% / 3);
}

.flex-four-list::before,
.flex-four-list::after,
.flex-four-item {
  width: calc(95% / 4);
}

.flex-four-list::before,
.flex-four-list::after,
.flex-triple-list::after {
  content: '';
  display: inline-block;
}

.flex-four-list::before {
  order: 1;
}

.grid{
  display: grid;
}

.grid-repeat{
  display: grid;
  --grid_column_repeat: 2;
  grid-template-columns: repeat(var(--grid_column_repeat), 1fr);

  &.-is-repeat-three{
  --grid_column_repeat: 3;
  }
  &.-is-repeat-four{
  --grid_column_repeat: 4;
  }
  &.-is-repeat-five{
  --grid_column_repeat: 5;
  }
  &.-is-repeat-six{
  --grid_column_repeat: 6;
  }
}

.gap-5{
  gap: 5px;
}

.gap-10{
  gap: 10px;
}

.gap-15{
  gap: 15px;
}

.gap-20{
  gap: 20px;
}

.gap-25{
  gap: 25px;
}

.gap-30{
  gap: 30px;
}

.f-10 {
  font-size: 1.0rem;
}

.f-11 {
  font-size: 1.1rem;
}

.f-12 {
  font-size: 1.2rem;
}

.f-13 {
  font-size: 1.3rem;
}

.f-14 {
  font-size: 1.4rem;
}

.f-15 {
  font-size: 1.5rem;
}

.f-16 {
  font-size: 1.6rem;
}

.f-18 {
  font-size: 1.8rem;

  .list-bullet-circle::before,
  &.list-bullet-circle::before{
    top: 0.3em;
  }
}

.f-20 {
  font-size: 2rem;
}

.f-30 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.hdg-size24 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.4;
}

.hdg-size26 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.4;
}

.hdg-size28{
  font-size: clamp(2.4rem, 3vw, 2.8rem);
  line-height: 1.4;
}

.hdg-size34{
  font-size: clamp(2.8rem, 3vw, 3.4rem);
  line-height: 1.4;
}

.hdg-section{
  display: flex;
  align-items: center;
  gap: 5px 20px;
}

.hdg-section_en {
  color: var(--color-base);
  font-family: var(--font-en-other);
  font-weight: 500;
  font-size: clamp(3rem, 10vw, 5.8rem);
  letter-spacing: 2px;
  line-height: 1;
}

.hdg-section_jp {
  line-height: 1.4;
  font-size: 1.4rem;
}

.article-detail:not(.-is-news) .article-editor-block h2,
.hdg-bottom_line{
  line-height: 1.4;
  font-size: clamp(2.4rem, 5vw, 3rem);
  padding-bottom: 15px;
  border-bottom: 3px solid #EFEFEF;
  position: relative;

  &::after{
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--color-base);
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 1;
  }
}

.hdg-dotted_bottom_line{
  font-size: 2.8rem;
  color: var(--color-base);
  font-weight: 500;
}

.hdg-dotted_bottom_line_inner{
  border-bottom: 2px dotted var(--color-base);
}

.article-detail:not(.-is-news) .article-editor-block h3,
.hdg-triangle{
  color: var(--color-base);
  font-size: clamp(1.8rem, 5vw, 2.2rem);
  position: relative;
  padding-left: 15px;
  line-height: 1.3;

  &::before{
    display: block;
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent var(--color-base);
    transform: rotate(0deg);
    position: absolute;
    left: 0;
    top: 0.45em;
  }
}

.article-detail:not(.-is-news) .article-editor-block h4,
.hdg-sideline{
  font-size: clamp(1.6rem, 5vw, 1.8rem);
  position: relative;
  padding-left: 15px;
  line-height: 1.4;
  color: var(--color-base);

  &::before{
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    width: 5px;
    height: 100%;
    background-color: var(--color-base);
    border-radius: 50px;
  }
  &.-is-white{
    color: var(--color-white);

    &::before{
      background-color: var(--color-white);
    }
  }
}

.btn-radius{
  display: block;
  border-radius: 50px;
  background-color: var(--color-base);
  border: 1px solid var(--color-base);
  text-align: center;
  color: var(--color-white);
  line-height: 1.2;
  position: relative;
  padding: 20px clamp(10px, 3vw, 20px);
  font-size: 1.6rem;
  font-weight: bold;
  transition: .3s;
  cursor: pointer;

  &.-is-fixed{
    width: min(100%, 340px);
  }
  &::before{
    width: 18px;
    height: 18px;
  }
  &:hover{
    text-decoration: none;
    background-color: var(--color-white);
    color: var(--color-base);

    .circle-arrow-right,
    .circle-arrow-left{
      &::before{
        background-color: var(--color-base);
      }
      &::after{
        border-color: var(--color-white);
      }
    }
  }
  .circle-arrow-right{
    padding: 0 15px;
    display: block;
  }
  &.-is-white{
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-white);

    .circle-arrow-right{
      &::before{
        background-color: var(--color-black);
      }
      &::after{
        border-color: var(--color-white);
      }
    }
    &:hover{
      background-color: transparent;
      color: var(--color-white);

      .circle-arrow-right{
        &::before{
          background-color: var(--color-white);
        }
        &::after{
          border-color: var(--color-black);
        }
      }
    }
  }
  &.-is-small{
    padding: 10px;
    min-width: 126px;
    font-size: 1.2rem;

    .circle-arrow-right{
      &::before{
        width: 11px;
        height: 11px;
      }
      &::after{
        width: 2px;
        height: 2px;
        top: 0;
        right: 5px;
      }
    }
  }
}

.btn-rectangle{
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
  background-color: var(--color-white);
  box-shadow: 2px 2px 3px #0000000F;
  border: 1px solid #EBEBEB;
  border-radius: 5px;
  padding: 15px 5px;
  overflow: hidden;

  &:hover{
    color: var(--color-base);
    text-decoration: none;
    transform: translate(2px,2px);
    box-shadow: none;
    border-color: var(--color-base);
  }
  &.-is-icn{
    display: flex;
    align-items: center;
    gap: 0 clamp(5px, 3vw, 15px);
    padding: 0 5px 0 0;
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    line-height: 1.3;
  }
}

.btn-rectangle_icn{
  padding: 3px;
  width: 57px;
  height: 57px;
  background-color: #F7F7F7;
  display: flex;
  justify-content: center;
  align-items: center;

  img{
    max-height: 100%;
  }
}

[class*="circle-arrow-"] {
  display: inline-block;
  position: relative;
  padding: 0 25px;

  &::before,
  &::after {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .3s;
  }
  &::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: var(--color-white);
    border-radius: 50px;
  }
  &::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    right: 5px;
    top: -2px;
    border-bottom: 1px solid var(--color-base);
    border-right: 1px solid var(--color-base);
  }
}

.circle-arrow-down::after {
  transform: rotate(45deg);
}

.circle-arrow-right::after {
  transform: rotate(-45deg);
  top: 0;
  right: 6.5px;
}

.circle-arrow-left {
  position: relative;
  padding-left: 25px;
  padding-right: 0;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  &::after {
    transform: rotate(-220deg);
    left: 7px;
  }
}

.article-list-item{
  a {
    padding: 20px 0;
    border-bottom: 1px solid#ddd;
    font-weight: bold;
    gap: 10px 15px;
  }
  &:first-child a{
    padding-top: 0;
  }
  &:last-child a{
    border-bottom: none;
    padding-bottom: 0;
  }
  a:hover {
    text-decoration: none;
  }
}

.article-cate {
  white-space: nowrap;
  color: var(--color-base);
  font-size: 1.1rem;
  position: relative;
  width: 105px;
  text-align: center;
  flex-shrink: 0;

  &::before, &::after{
    content: '(';
      position: absolute;
      left: 0;
      top: 0;
  }
  &::after{
    content: ')';
    left: auto;
    right: 0;
  }
}

.article-date {
  font-family: var(--font-en);
  font-weight: 600;
  color: #9FA09E;
  font-size: 1.2rem;
  transition: .3s;
}

.article-list-ttl {
  font-size: 1.4rem;
  color: #4B5049;
  line-height: 1.4;
  width: 100%;
  transition: .3s;
}

.article-list-excerpt{
  font-size: 1.2rem;
  color: #7D7D7D;
}

.itemname{
  margin: 10px 0 5px;
  max-height: 100% !important;
  transition: .3s;
  font-size: 1.4rem;
  font-weight: bold;
  color: #4B5049;

  a{
    color: #4B5049;
  }
}

.itemprice {
  font-weight: bold;
  height: auto !important;
  font-size: 1.7rem;
  text-align: left !important;
  color: #4B5049;
  transition: .3s;
}

.itemprice-label{
  background: #F2F2F2;
  border-radius: 3px;
  color: #585858;
  font-size: 1rem;
  display: inline-block;
  line-height: 1.2;
  padding: 5px;
  margin-right: 3px;
  vertical-align: text-bottom;
}

.itemsoldout{
  font-size: 1.2rem !important;
  color: #F00 !important; 
}

.product-list-item{
  .itemimg {
    border-radius: 8px;
    height: 190px;
    background-color: #F5F7F9;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 0 !important;
    text-align: center;
    transition: .3s;
    position: relative;

    .itemimg-inner {
      display: inline-block;
      margin: auto;
      width: 100%;
      height: 100%;

      img{
        width: auto;
        height: auto;
        max-height: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  a:hover{
    opacity: 1;
    color: var(--color-base);
    text-decoration: none;

    .itemname, .itemprice{
      color: var(--color-base);
    }
    .itemimg{
      border-color: var(--color-base);
    }
  }
}

.front-il.cf{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 45px clamp(15px, 3vw, 35px);
  margin: 0;

  &:has(.no-date){
    display: block;
  }
  &::before{
    content: none;
  }
  .product-list-item{
    width: auto;
    margin: 0;
    padding: 0;

    a{
      display: block;
    }
  }
}

.product-item-excerpt {
  line-height: 1.8;
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 3vw, 1.6rem);
}

.product-ranking-list{
  .product-list-item .itemimg::before{
    counter-increment: list;
    content: counter(list);
    display: block;
    position: absolute;
    left: -1px;
    top: -0.7px;
    z-index: 1;
    font-family: var(--font-en-other);
    background-color: var(--color-white);
    border: 1px solid #C1C1C1;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 8px 2px;
    color: #C1C1C1;
  }
  .product-list-item:nth-of-type(1) .itemimg::before{
    background-color: #E2AE37;
    border-color: #E2AE37;
    color: var(--color-white);
  }
  .product-list-item:nth-of-type(2) .itemimg::before{
    background-color: #A6A9B8;
    border-color: #A6A9B8;
    color: var(--color-white);
  }
  .product-list-item:nth-of-type(3) .itemimg::before{
    background-color: #978168;
    border-color: #978168;
    color: var(--color-white);
  }
}

[class*='category-set_item_']{
  .itemimg::before{
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
  }
}

[class*='category-set_item_two'] .itemimg::before{
  content: url('images/common/icn_set_two.svg');
}

[class*='category-set_item_three'] .itemimg::before{
  content: url('images/common/icn_set_three.svg');
}

[class*='category-set_item_four'] .itemimg::before{
  content: url('images/common/icn_set_four.svg');
}

[class*='category-set_item_five'] .itemimg::before{
  content: url('images/common/icn_set_five.svg');
}

[class*='category-set_item_six'] .itemimg::before{
  content: url('images/common/icn_set_six.svg');
}

#customer-info .to_deliveryinfo_button,
.customkey_user_message {
  display: none !important;
}

.js-accordion-ttl {
  cursor: pointer;
  background-color: #EEF3E9;
  padding: 20px 65px 20px 25px;
  font-size: 2rem;
  position: relative;
  font-weight: 500;
  transition: .3s;

  &::before,
  &::after {
    content: '';
    background-color: var(--color-base);
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .3s;
  }

  &::before {
    width: 26px;
    height: 2px;
  }

  &::after {
    height: 26px;
    width: 2px;
    right: 42px;
  }
}

.open .js-accordion-ttl::after {
  transform: rotate(270deg);
}

.js-accordion-detail {
  display: none;
  padding: 20px 0;
  line-height: 1.8;

  p {
    line-height: 1.8;
  }
}

.list-radius-item{
  border: 1.5px solid var(--color-white);
  border-radius: 50px;
  padding: 5px 15px;
  text-align: center;
  min-width: min(100%, clamp(80px, 30vw, 180px));

  .icn-check{
    display: block;
    background-size: 9px auto;
    background-position: left center;
    padding: 0 12px;
  }
}

.list-line-item {
  padding: 23px 0;
  border-bottom: 1px solid #ddd;
  position: relative;

  &:first-child {
    padding-top: 0;
  }
}

.list-line-hdg {
  font-weight: bold;
  font-size: 1.8rem;
}

.list-counter{
  counter-reset: list;

  &.-is-circle .list-counter-item{
    padding-left: 32px;

    &::before{
      content: counter(list);
      text-align: center;
      background-color: var(--color-base);
      color: var(--color-white);
      border-radius: 50px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 1.4rem;
      top: 2px;
    }
  }
}

.list-counter-item{
  padding-left: 20px;
  position: relative;

  &::before{
    counter-increment: list;
    content: counter(list)".";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    font-family: var(--font-en);
  }
}

.list-bullet-circle {
  position: relative;
  padding-left: 20px;

  &::before {
    content: '●';
    font-size: 1.4rem;
    color: var(--color-base);
    position: absolute;
    top: 0.2em;
    left: 0;
    display: inline-block;
  }
  &:not(:last-child) {
    margin-bottom: 5px;
  }
}

.box-filled {
  padding: clamp(25px, 5vw, 45px) 5%;
  border-radius: 25px;
  background-color: #EEF3E9;

  &.-is-gray{
    background-color: #FAFAFA;
  }
  &.-is-beige{
    background-color: #FFF8F2;
  }
  &.-is-white{
    background-color: var(--color-white);
  }
}

.box-border {
  border: 4px solid #AFCDC4;
  border-radius: 37px;
  padding: clamp(20px, 5vw, 50px) 7%;
}

.index-child-list {
  padding-left: 20px;
}

.img-radius{
  overflow: hidden;
  border-radius: 12px;
}

.img-cover {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.img-hover-wrapper {
  overflow: hidden;
  display: block;
}

a:hover .img-hover-item {
  transform: scale(1.1);
}

.is-hidden {
  display: none !important;
}

.icn-sort{
  display: inline-block;
  padding-left: 18px;
  background: url("images/common/icn_sort.svg") no-repeat left center;
}

.icn-user{
  display: inline-block;
  padding-left: 18px;
  background: url("images/common/icn_user_gray.svg") no-repeat left center;
}

.icn-cart{
  display: inline-block;
  padding-left: 21px;
  background-image: url("images/common/icn_cart.svg");
  background-position: left 2px;
  background-repeat: no-repeat;
}

.icn-check{
  display: inline-block;
  padding-left: 23px;
  background: url('images/common/icn_check_white.svg') no-repeat left 3px;
}

.icn-question{
  display: inline-block;
  padding-left: 14px;
  background: url("images/common/icn_question.svg") no-repeat left center;
}

.icn-new-user{
  display: inline-block;
  padding-left: 16px;
  background: url("images/common/icn_new_user.svg") no-repeat left center;
}

.icn-info{
  display: inline-block;
  padding-left: 25px;
  background: url("images/common/icn_info.svg") no-repeat left center;
}

.usces_login_a{
  padding-left: 18px;
  background: url("images/common/icn_login.svg") no-repeat left center;
}

.arrow-right{
  padding-right: 18px;
  background: url("images/common/arrow_right.svg") no-repeat right center;
}

.arrow-triangle-down{
  padding-right: 12px;
  background: url("images/common/arrow_triangle_down.svg") no-repeat right center / 9px auto;
}

.arrow-triangle-right{
  padding-left: 13px;
  position: relative;

  &::before{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3.5px 0 3.5px 6.1px;
    border-color: transparent transparent transparent var(--color-base);
    transform: rotate(0deg);
    position: absolute;
    top: 8px;
    left: 0;
  }
  &.-is-white{
    &::before{
      border-color: transparent transparent transparent var(--color-white);
    }
  }
  &.-is-important{
    &::before{
      border-color: transparent transparent transparent #FB5F5F;
    }
  }
}

.mv-upper-block{
  background-color: #F7F7F7;
  border-top: 1px solid #EAE9E9;
  border-bottom: 1px solid #EAE9E9;
  color: #B5B7B8;
  padding: 7px 0;

  .article-block{
    grid-template-columns: 90px 1fr;

    .icn-info{
      font-size: 1.2rem;
      font-weight: bold;
      border-right: 1px solid #B3B3B3;
      padding-right: 10px;
    }
  }
  .article-list-item a{
    align-items: baseline;
    padding: 0;
    color: #B5B7B8;
    border: none;
    gap: 0 10px;

    .arrow-right{
      background: none;
    }
  }
  .article-date{
    font-size: 0.8rem;
  }
  .article-cate{
    display: none;
  }
  .article-list-ttl{
    font-size: 1.1rem;
    font-weight: 500;
    color: #B5B7B8;
  }
}

.tab-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-menu-item {
  width: min(100%, 130px);
  padding: 8px 3px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-base);
  color: var(--color-base);
  border-radius: 5px;
  cursor: pointer;
  transition: all .3s;
  font-weight: bold;

  &:hover,
  &.-is-active {
    background-color: var(--color-base);
    color: var(--color-white);
    opacity: 1;
  }
  &:has(a) {
    padding: 0;

    a{
      display: block;
      padding: 8px 5px;
      color: var(--color-base);
    }
    a:hover,
    &.-is-active a{
      color: var(--color-white);
    }
  }
}

.tab-panel-box {
  display: none;

  &.-is-active {
    display: block;
  }
}

@media (any-hover: hover) {
  .article-list-item {
    a:hover .article-list-ttl,
    a:hover .article-date{
      color: var(--color-base);
    }
  }
  a:hover.link-text{
    text-decoration: underline !important;
  }
  .js-accordion-ttl:hover {
    background-color: #B9CDA5;
  }
}

@media screen and (min-width: 48.063em) {
  .pc-float-right {
    float: right;
    margin: 0 0 5% 40px;
  }
  .pc-float {
    clear: none;
  }
}

@media screen and (max-width: 48em) {
  a:hover {
    opacity: 0.65;
  }
  .sp{
    display: block !important;
  }
  .pc {
    display: none;
  }
  [data-tab-grid="1"]{
    grid-template-columns: 1fr !important;
  }
  [data-tab-grid="2"]{
    grid-template-columns: 2fr !important;
  }
  [data-tab-grid-repeat="1"]{
    --grid_column_repeat: 1 !important;
  }
  [data-tab-grid-repeat="2"]{
    --grid_column_repeat: 2 !important;
  }
  [data-tab-grid-repeat="3"]{
    --grid_column_repeat: 3 !important;
  }
  .front-il.cf{
    grid-template-columns: repeat(2, 1fr);
  }
  .mv-upper-block{
    .article-list-item a{
      flex-wrap: wrap;
    }
  }
  .hdg-section{
    flex-wrap: wrap;
  }
  .hdg-section_jp{
    width: 100%;
  }
}

@media screen and (min-width: 43.4em) {
  a[href^="tel:"] {
    pointer-events: none;
  }
  .list-line-hdg {
    max-width: 250px;
    width: 100%;
  }
  .list-line-detail {
    width: calc(100% - 250px);
  }
}

@media screen and (max-width: 43.333em) {
  a[href^="tel:"] {
    text-decoration: underline;
    display: inline-block;
  }
  .flex-four-item {
    width: calc(95% / 2);
  }
  .list-line-item {
    display: block;
  }
  .list-line-hdg {
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 36.667em) {
  .pc-550 {
    display: none;
  }
  .sp-550 {
    display: block !important;
  }
  [data-sp-grid="1"]{
    grid-template-columns: 1 !important;
  }
  [data-sp-grid="2"]{
    grid-template-columns: 2 !important;
  }
  [data-sp-grid-repeat="1"]{
    --grid_column_repeat: 1 !important;
  }
  [data-sp-grid-repeat="2"]{
    --grid_column_repeat: 2 !important;
  }
  .article-list-item a{
    flex-wrap: wrap;

    .article-list-ttl{
      width: 100%;
    }
  }
}

/************* Header ***************/
.site-header {
  padding: 10px 0 clamp(10px, 2vw, 25px);
  background-color: var(--color-white);

  .header-nav-container {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
  }
}

.site-description {
  padding: 0;
  font-size: 10px;
  margin-bottom: 10px;
}

.site-description,
.header__logo_block .site-title {
  float: none;
}

.header__logo_block .site-title {
  padding: 0;
}

.main-navigation {
  flex: 1;
  position: relative;

  .snav {
    display: none;
  }
  &.open-menu .snav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  &.open-menu .header__sp_logo {
    display: block;
  }
}

.nav__main_list{
  gap: 0 20px;

  &.-is-tab {
    display: flex;

    .nav__main_parent_item {
      border-bottom: none;
      padding: 0;
    }
  }
}

.nav__main_list_item {
  position: relative;

  a {
    color: var(--color-black) !important;
  }
}

.nav__main_parent_item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0 7px;
  justify-content: space-between;
  font-size: 16px;
}

.nav__main_child_list {
  float: none !important;
  font-size: 1.4rem;
  text-align: left;
  border: none !important;
  display: none;
  top: 100%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

  &.open {
    display: block;
  }
  a {
    padding: 10px 15px !important;
  }
}

.nav__sub_list {
  flex-wrap: wrap;
  gap: 5px 0;
  padding: 0 !important;
}

.nav__sub_list_item {
  line-height: 1;
  font-size: 1rem;

  a{
    padding: 0 10px;
  }
  &:not(:last-child) a {
    border-right: 1px dotted #C7C7C7;
  }
  &:first-child a {
    padding-left: 0;
  }
}

.header__nav__btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  width: 9px;
  height: 7px;
}

.incart-btn{
  .total-quant{
    font-size: 1.1rem !important;
  }
}

@media screen and (min-width: 62.563em) {
  .header__logo_block{
    width: min(25%, 316px);
  }
  #site-navigation {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #ECECEC;

    ul ul{
      top: 100%;
    }
  }
  .nav__main_parent_item>a {
    padding: 0 !important;
  }
  .nav__main_child_list {
    position: absolute;
    width: max-content !important;
  }
  .site-description {
    padding-right: 30px;
  }
  .main-navigation.open-menu{
    .header__sp_logo,
    .snav {
      display: none;
    }
  }
  .header__tab_icn,
  .nav__main_list.-is-tab {
    display: none !important;
  }
  .nav__sub_list_item {
    a{
      color: #C7C7C7 !important;
    }
  }
}

@media screen and (max-width: 62.5em) {
  body:has(.main-navigation.open-menu)::before {
    display: block;
  }
  body::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.25);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 600;
    display: none;
  }
  .site-header {
    .header-nav-container {
      height: 100vh !important;
      z-index: 990 !important;
      position: fixed !important;
      width: 0;
      top: 0;
      right: -100% !important;
      padding: 60px 0;
      transition: .4s;
    }
  }
  .open-menu .header-nav-container {
    width: 100%;
    right: 0 !important;
    overflow-y: scroll !important;
  }
  .incart-btn .total-quant {
    display: block !important;
    top: -5px;
    left: -5px;
  }
  .snav {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0 10px;

    .membership {
      float: left;

      li:first-child {
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
      }
    }
    i {
      padding: 5px !important;
    }
  }
  .site-description {
    line-height: 1.3;
  }
  .nav__main_list {
    display: block;
  }
  .nav__main_list .nav__main_list_item {
    padding: 0;

    &:not(:last-child) {
      margin-right: 0;
    }
    &.-is-active .nav__main_child_list{
      position: absolute;
      left: 0;
      background-color: #fff;
      z-index: 10;
      display: block;
      width: 300px;

      .cat-item a {
        display: block;
        padding: 10px;
      }
      .nav__main_child_list{
        box-shadow: none;

        li a{
          border: none;
        }
      }
    }
  }
  .nav__main_list.-is-pc .nav__main_list_item {
    &.-is-active .nav__main_child_list{
      position: relative;
      width: auto;
      padding: 15px !important;

      a{
        padding: 0 !important;
      }
    }
  }
  .nav__sub_list {
    display: block;
    margin-bottom: 30px;
  }
  .nav__sub_list_item {
    border-top: 1px solid #eee;
    padding: 20px 10px;

    &:not(:last-child) a,
    &:not(:first-child) a {
      padding: 0;
      border: none;
    }
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &:last-of-type {
      border-bottom: 1px solid #eee;
    }
    &:not(:last-child) {
      margin-bottom: 0;
    }
  }
  .nav__main_child_list {
    font-size: 1.5rem;
    font-weight: bold;
  }
  .nav__main_list.-is-tab {
    position: relative;
    margin: 20px 0 0;

    .nav__main_child_list a {
      border-bottom: none;
      padding: 20px;
    }
  }
  .nav__sub_list {
    margin-bottom: 0;
  }
  #site-navigation li li {
    margin-left: 0;
  }
  .nav__main_parent_item {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
  }
  .nav__sub_list_item {
    font-size: 1.5rem;
    font-weight: bold;
  }
  .header__sp_upper_block{
    display: block;

    .snav{
      float: unset;
    }
  }
  .header__sp_logo {
    padding: 10px;
    margin: 0;
  }
}

@media screen and (min-width: 36.733em) {
  .header__sp_logo {
    display: none;
  }
}

@media screen and (max-width: 36.667em) {
  #site-navigation {
    padding: 0;
  }
  .nav__main_list.-is-tab{
    display: none !important;
  }
}

/************* Footer ***************/
.footer{
  padding: 0;

  .js-accordion-ttl{
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    display: block;
    padding: 0;

    &::before{
      width: 7px;
      right: 6.5px;
    }
    &::after{
      height: 7px;
      right: 9px;
    }
  }
}

.ft__bkg_block{
  background-color: #313131;
  padding: clamp(40px, 10vw, 80px) 0;
}

.ft__upper_block{
  gap: 35px;
  border-bottom: 1px solid #4F4E4E;
  margin-bottom: 40px;
  padding-bottom: 25px;

  .f-12{
    color: #7F7F7F;
    width: 55%;
  }
}

.ft__sns_link_item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;

  &:not(:last-child) {
    margin-right: 10px;
  }

  a {
    display: block;
    border-radius: 100%;
    background-color: var(--color-white);
    color: #000;
    font-size: clamp(2.2rem, 3vw, 2.6rem);
  }
}

.fa-facebook-f:before {
  content: "\f39e" !important;
}

.ft__nav_item {
  font-weight: bold;
  font-size: 1.5rem;

  &:not(:last-child) {
    margin-bottom: 12px;
  }
  &::before {
    border-color: var(--color-white);
  }
}

.ft__nav_item a:hover,
.ft__sub_nav_item a:hover {
  text-decoration: underline;
}

.ft__nav_block{
  gap: 10px clamp(20px, 5vw, 60px);
}

.ft__nav_list {
  font-weight: 500;
}

.ft__nav_child_list{
  padding-top: 0;
  padding-left: 15px;

  a{
    color: #A2A2A2;
    font-size: 1.2rem;
  }
}

.ft__bottom_block{
  background-color: #3D3A3A;
  padding: 30px 0;
}

.ft__sub_nav_item{
  font-size: 1.2rem;

  a{
    color: #605F5F;
  }
  &:not(:last-child) a{
    border-right: 1px solid #605F5F;
    padding-right: 10px;
    margin-right: 10px;
  }
}

.copyright {
  font-size: 0.9rem;
  color: #605F5F;
  padding: 0;
  text-align: center;

  a{
    color: #605F5F;
  }
}

@media screen and (max-width: 64em) {
  .copyright{
    width: 100%;
  }
}

@media screen and (min-width: 48.063em) {
  .footer{
    .js-accordion-ttl{
      display: none;
      pointer-events: none;
    }
    .js-accordion-detail{
      display:  block !important;
    }
  }
}

@media screen and (max-width: 48em) {
  .ft__upper_block{
    flex-wrap: wrap;

    .f-12{
      width: 100%;
    }
  }
  .ft__nav_list{
    width: 100%;
  }
}

/************* Top page ***************/
.top-mv {
  overflow: hidden;

  .swiper-container{
    overflow: visible;
  }
  .swiper-slide{
    width: min(100%, clamp(250px, 30vw, 400px));
    box-shadow: 0px 2px 8px #00000024;
    border-radius: 10px;

    img {
      width: 100%;
    }
    a:hover,
    img:hover {
      opacity: 1 !important;
    }
  }
}

.top__mv_wrapper{
  padding: 30px 0;
  position: relative;
}

.top-mv-button-wrapper{
  width: min(100%, clamp(290px, 33vw, 440px));
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.top__mv_intro_block{
  padding: 5px 0;
  position: relative;
  border-top: 1px solid #EAE9E9;
  border-bottom: 1px solid #EAE9E9;
  background-color: #F7F7F7;
}

.top__mv_intro_inner{
  padding: 30px 0 15px;
  background-color: var(--color-white);
  border-top: 1px solid #EAE9E9;
  border-bottom: 1px solid #EAE9E9;

  h1{
    line-height: 1.4;
  }
}

.feature-list{
  gap: 20px 0;
}

.feature-list-item{
  text-align: center;
  width: min(100%, 180px);

  &:not(:last-child){
    border-right: 1px solid #ECECEC;
  }
}

.top-pickup,
.top-ranking{
  padding: clamp(60px, 5vw, 80px) 0;
}

.slide-products{
  padding: 0 15px;
  width: min(100%, 1195px);
  margin: auto;

  &:not(:last-of-type){
    margin-bottom: 80px;
  }
  .swiper-container{
    margin: auto;
    width: min(100%, 1080px);
  }
  .swiper-slide{
    width: min(100%, 190px) !important;
  }
}

.top-category{
  padding: clamp(70px, 7vw, 120px) 0 100px;
  border-radius: 50px 50px 0px 0px;

  .tab-menu-list{
    margin-left: auto;
    justify-content: unset;
  }
  .tab-menu-item {
    width: clamp(80px, 15vw, 130px);
  }
}

.top-style{
  padding: 0 0 80px;

  .theme-single{
    &.style-banner-block{
      background-color: var(--color-theme-single);
    }
    .btn-radius{
      &:not(:hover){
        color: var(--color-theme-single);

        .circle-arrow-right::before{
          background-color: var(--color-theme-single);
        }

      }
      &:hover .circle-arrow-right::after{
        border-color: var(--color-theme-single);
      }
    }
    .swiper-button-prev{
      background-image: url("images/common/slide_arrow_prev_theme_single.svg");
    }
    .swiper-button-next{
      background-image: url("images/common/slide_arrow_next_theme_single.svg");
    }
    .product-list-item a:hover{
      .itemimg{
        border-color: var(--color-theme-single);
      }
      .itemname, .itemprice{
        color: var(--color-theme-single);
      }
    }
  }
  .theme-couple{
    &.style-banner-block{
      background-color: var(--color-theme-couple);
    }
    .btn-radius{
      &:not(:hover){
        color: var(--color-theme-couple);

        .circle-arrow-right::before{
          background-color: var(--color-theme-couple);
        }
      }
      &:hover .circle-arrow-right::after{
        border-color: var(--color-theme-couple);
      }
    }
    .swiper-button-prev{
      background-image: url("images/common/slide_arrow_prev_theme_couple.svg");
    }
    .swiper-button-next{
      background-image: url("images/common/slide_arrow_next_theme_couple.svg");
    }
    .product-list-item a:hover{
      .itemimg{
        border-color: var(--color-theme-couple);
      }
      .itemname, .itemprice{
        color: var(--color-theme-couple);
      }
    }
  }
  .theme-colors{
    &.style-banner-block{
      background-color: var(--color-theme-colors);
    }
    .btn-radius{
      &:not(:hover){
        color: var(--color-theme-colors);

        .circle-arrow-right::before{
          background-color: var(--color-theme-colors);
        }
      }
      &:hover .circle-arrow-right::after{
        border-color: var(--color-theme-colors);
      }
    }
    .swiper-button-prev{
      background-image: url("images/common/slide_arrow_prev_theme_colors.svg");
    }
    .swiper-button-next{
      background-image: url("images/common/slide_arrow_next_theme_colors.svg");
    }
    .product-list-item a:hover{
      .itemimg{
        border-color: var(--color-theme-colors);
      }
      .itemname, .itemprice{
        color: var(--color-theme-colors);
      }
    }
  }
}

.style-banner-block{
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  align-items: center;
  grid-template-columns: min(40%, 357px) 1fr;

  .hdg-size34{
    line-height: 1.4;
  }
}

.style-banner-text{
  padding: 30px clamp(20px, 5vw, 50px);
  color: var(--color-white);
}

.style-banner-img{
  height: 350px;
}

.service-block{
  padding: clamp(60px, 5vw, 80px) 0;

  .box-filled{
    padding: 20px 35px;
  }
  .hdg-size26{
    &::after{
      content: '';
      display: block;
      background: var(--color-base);
      border-radius: 100px;
      width: 30px;
      height: 5px;
      margin: 15px auto 20px;
    }
  }
}

.service-list{
  gap: 45px;
}

.service-list-item{
  width: min(100%, 195px);
  position: relative;

  &:not(:last-child){
    &::after{
      content: '';
      position: absolute;
      right: -15px;
      top: 25%;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 8.5px 0 8.5px 14.7px;
      border-color: transparent transparent transparent var(--color-base);
      transform: rotate(0deg);
    }
  }
}

.service-link-block{
  gap: 20px;
}

.service-link-hdg{
  width: 120px;
  background-color: #E6F4EA;
  border: 2px solid var(--color-base);
  color: var(--color-base);
  text-align: center;
  border-radius: 10px;
  padding: 15px 5px;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.3;

  &.-is-important{
    background-color: #FFF2F2;
    border-color: #FB5F5F;
    color: #FB5F5F;
  }
}

.service-link-list{
  width: calc(100% - 140px);
}

.service-link-list.flexbox{
  gap: 5px 40px;

  .service-link-item{
    width: min(100%, 185px);
  }
}

.service-link-item:not(:last-child){
  margin-bottom: 5px;
}

.top-about{
  background-image: url("images/top/about_bkg_img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
  position: relative;
  color: var(--color-white);

  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
  }
}

.top__about_contents_block{
  position: relative;
  z-index: 1;
  gap: 60px clamp(20px, 3vw, 60px);

  .container_s{
    width: min(70%, 555px);
    margin: 0;
  }
}

.slide-vertical{
  overflow: none;

  .swiper-slide{
    width: min(100%, 260px);
    height: min(100%, 280px);
  }
  .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.vision-link-block{
  padding: 60px 0;
  background-color: #3C845A;
  background-image: url("images/top/vision_bkg_img.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-white);

  .list-counter{
    gap: 10px clamp(20px, 5vw, 65px);
  }
  .list-counter-item{
    a{
      text-decoration: none;
      color: var(--color-white);
    }
    &::before{
      background-color: var(--color-white) !important;
      color: var(--color-base) !important;
    }
  }
}

.top-articles{
  padding: clamp(60px, 5vw, 90px) 0 clamp(20px, 5vw, 70px);
}

.top-tips-block{
  .grid{
    grid-template-columns: 1fr 0.75fr;
    gap: 35px clamp(15px, 3vw, 40px);
  }
  .article-list-item{
    a{
      border: none;
      padding: 0;
    }
    .article-list-ttl{
      width: 100%;
      font-size: 1.6rem;
      color: #4B5049;
    }
    &:not(:first-of-type){
      a{
        display: grid;
        align-items: center;
        gap: 20px;
        grid-template-columns: min(45%, 195px) 1fr;
      }
      .article-list-img{
        margin: 0;
        width: 100%;
      }
    }
  }
}

.top-news-block{
  margin-top: 80px;

  .btn-radius{
    padding: 15px 10px;
  }
  .grid{
    grid-template-columns: 150px 1fr;
    gap: 0 clamp(20px, 5vw, 65px);
  }
}

.top-faq{
  margin-bottom: 80px;
}

@media screen and (min-width: 67.563em) {
  .service-link-block:not(:last-of-type){
    border-right: 2px dotted #E6E6E6;
    padding-right: 30px;
    margin-right: 30px;
  }
  .slide-vertical{
    height: 730px;
  }
}

@media screen and (max-width: 67.5em) {
  .slide-products{
    padding: 0;

    &.product-ranking-list .product-list-item:nth-of-type(1){
      margin-left: 15px;
    }
  }
  .service-block {
    .box-filled{
      flex-wrap: wrap;
    }
  }
  .service-link-block{
    width: 100%;

    &:not(:last-of-type){
      border-bottom: 2px dotted #E6E6E6;
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
  }
  .top-about{
    padding: 60px 0;
  }
  .top__about_contents_block{
    flex-wrap: wrap;

    .container_s{
      width: 100%;
    }
  }
  .slide-vertical{
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 48.063em) {
  .style-banner-block{
    &.-is-reverse{
      grid-template-columns: 1fr min(40%, 357px);

      .style-banner-text{
        order: 2;
      }
    }
  }
  .top-tips-block{
    .grid{
      grid-template-rows: 0.4fr 0.4fr;
    }
    .article-list-item{
      &:first-of-type{
        grid-row: span 2 / span 2;

        .article-list-img{
          height: min(25vw, 280px);
          width: 100%;
        }
      }
      &:last-of-type{
        grid-column-start: 2;
        grid-row-start: 2;
      }
      &:not(:first-of-type){
        .article-list-img{
          height: min(20vw, 140px);
        }
      }
    }
  }
  .top-news-block{
    margin-top: 160px;
  }
}

@media screen and (max-width: 48em) {
  .style-banner-block{
    grid-template-columns: 1fr;
  }
  .style-banner-img{
    order: 1;
    height: 200px;
  }
  .style-banner-text{
    order: 2;
  }
  .slide-vertical .swiper-slide{
    width: min(100%, 160px);
  }
}

@media screen and (max-width: 36.667em){
  .service-link-block{
    flex-wrap: wrap;
  }
  .service-link-hdg{
    margin: auto;
  }
  .service-link-list{
    width: 100%;
  }
  .service-list-item{
    width: 100%;

    &:not(:last-child)::after {
      top: auto;
      bottom: -25px;
      left: 0;
      right: 0;
      margin: auto;
      transform: rotate(90deg);
    }
  }
  .feature-list{
    justify-content: unset;
  }
  .feature-list-item{
    width: calc(100% / 2);
    border: none !important;

    &:nth-of-type(odd){
      border-right: 1px solid #ECECEC !important;
    }
  }
}

/************* Child page common ***************/
.childpage__main_hdg_block {
  background-color: var(--color-base);
  margin-bottom: clamp(40px, 10vw, 65px);
  height: 180px;
  color: var(--color-white);

  .container_m {
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    &:has(.childpage__main_sub_text):not(:has(.childpage__main_img)){
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    &:has(.childpage__main_img){
      display: grid;
      justify-content: space-between;
      align-items: center;
      gap: 40px clamp(30px, 5vw, 70px);
      grid-template-columns: 1fr min(60%, 740px);
    }
  }
  &:has(.childpage__main_img){
    height: 360px;
  }
}

.childpage__main_hdg {
  color: var(--color-white);
  font-size: clamp(2.6rem, 3vw, 3.6rem);
  line-height: 1.2;

  .f-20{
    font-size: clamp(1.6rem, 5vw, 2rem);
    vertical-align: middle;
    display: inline-block;
    margin-right: 15px;
  }
}

.childpage__main_sub_text{
  margin-top: 20px;
  font-size: clamp(1.2rem, 3vw, 1.3rem);
}

.childpage{
  &:not(:has(.vision-link-block)):not(:has(.service-block)){
    margin-bottom: 100px;
  }
  .hdg-bottom_line:not(:first-of-type){
    margin-top: clamp(60px, 5vw, 100px);
  }
  .vision-link-block{
    margin-top: 100px;
  }
}

@media screen and (max-width: 48em) {
  .childpage__main_hdg_block {
    .container_m {
      &:has(.childpage__main_img){
        top: 0;
        transform: translateX(0);
        grid-template-columns: 1fr;
      }
    }
    &:has(.childpage__main_img){
      height: auto;
      padding: 30px 0;
    }
  }
}

@media screen and (max-width: 36.667em) {
}

/************* Check ***************/
.childpage.-is-check{
  .list-line-hdg {
    font-weight: 500;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 48.063em) {
  .check__flex_leftblock {
    max-width: 600px;
    width: 100%;
    margin-right: 40px;
  }
}

@media screen and (max-width: 48em) {
  .check__flex_rightblock {
    text-align: center;
    margin: 30px 0 0;
  }
}

/************* Faq ***************/
.faq__item:not(:last-of-type) {
  margin-bottom: 10px;
}

.faq__ans {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0px;
  line-height: 1.6;
}

@media screen and (max-width: 36.25em) {
  .faq__ques {
    padding: 10px 45px 10px 15px;
    font-size: 1.4rem;

    &::before {
      width: 15px;
      right: 20px;
    }
    &::after {
      height: 15px;
      right: 26px;
    }
  }
  .faq__item:not(:last-of-type) {
    margin-bottom: 5px;
  }
}

/************ Vision ***************/
@media screen and (max-width: 48em) {
  .childpage.-is-vision .box-filled.mt-100 {
    margin-top: 0;
  }
}

/************* Form ***************/
.form span.f-darkred {
  font-size: 1.4rem;
}

.table__form,
.table__form textarea {
  width: 100%;
  max-width: 100%;
}

.table__form{
  input, textarea, select {
    border: 1px solid #ddd;
    padding: 10px;
    font-family: var(--font-base);
    margin: 0;
  }
  select {
    width: 100%;
    max-width: 420px;
  }
  textarea {
    height: auto;
  }
  input {
    width: 100%;
  }
  textarea::placeholder,
  input::placeholder {
    color: #BABABA;
  }
  textarea:focus,
  input[type=text]:focus,
  input[type=email]:focus,
  input[type=tel]:focus,
  input[type=url]:focus,
  input[type=password]:focus,
  input[type=number]:focus,
  select:focus {
    outline: none;
    border: 1px solid #555;
  }
}

.table__form_hdg,
.table__form_detail {
  padding: 10px 20px;
  border: 1px solid #ddd;
}

.table__form_hdg {
  font-size: 1.8rem;
  width: 320px;
  background-color: #F6F6F6;
}

.table__form_detail {
  padding: 20px;
}

.wd-s {
  max-width: 210px;
  width: 100%;
}

.wd-m {
  max-width: 380px;
  width: 100%;
}

.form__privacy_block {
  margin: 15px 0 0;
  padding: 15px 20px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #F6F6F6;
}

.form{
  .form__input_half:not(:last-of-type) {
    margin-right: 25px;
  }
  &.-is-confirm .form__input_txt,
  &.-is-confirm .form__member_note_list,
  &.-is-confirm .form__privacy_block,
  &.-is-confirm .form__question_note_hdg,
  &.-is-confirm .form__question_note{
    display: none;
  }
}

.mwform-checkbox-field{
  [type="checkbox"] {
    display: none;
  }
  label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding-left: 25px;

    &::before {
      width: 33px;
      height: 33px;
      content: '';
      position: absolute;
      left: 0;
      top: -3px;
      background: var(--color-white);
      border: 1px solid #ddd;
    }
  }
  input:checked+.mwform-checkbox-field-text::after {
    opacity: 1;
  }
}

.mwform-checkbox-field-text::after {
  width: 15px;
  height: 7px;
  border: 3px solid var(--color-black);
  content: '';
  position: absolute;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 8px;
  top: 7px;
  border-top: none;
  border-right: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.2;
}

.mwform-radio-field [type="radio"] {
  display: none;
}

.product-type-row .mwform-checkbox-field label,
.mwform-radio-field label {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 25px;
  cursor: pointer;
}

.product-type-row .mwform-checkbox-field-text,
.mwform-radio-field-text {
  padding-left: 10px;
  display: block;
  line-height: 1.5;
}

.product-type-row .mwform-checkbox-field-text::before,
.product-type-row .mwform-checkbox-field-text::after,
.mwform-radio-field-text::before,
.mwform-radio-field-text::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100%;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.product-type-row .mwform-checkbox-field-text::before,
.mwform-radio-field-text::before {
  left: 0;
  width: 26px;
  height: 26px;
  background: var(--color-white);
  border: 1px solid #D4D4D4;
}

.product-type-row .mwform-checkbox-field-text::after,
.mwform-radio-field-text::after {
  opacity: 0;
  left: 6px;
  width: 16px;
  height: 16px;
  background: var(--color-base);
}

.product-type-row .mwform-checkbox-field [type=checkbox]:checked+span::after,
.mwform-radio-field [type="radio"]:checked+span::after {
  opacity: 1;
}

.product-type-row{
  .mwform-checkbox-field label::before {
    content: none;
  }
  .mwform-checkbox-field-text::after {
    border: none;
  }
}

.form.-is-question {
  .product-type-row .mwform-checkbox-field:not(:last-of-type),
  .mwform-radio-field:not(:last-of-type) {
    margin-right: 10px;
  }
  .form__privacy_block .mwform-checkbox-field-text::before {
    content: '＊';
    display: inline-block;
    color: var(--color-dark_red);
    font-weight: bold;
    font-size: 1.4rem;
  }
  .form__privacy_block .mwform-checkbox-field label {
    padding-left: 40px;
    font-weight: bold !important;
  }
}

.refrigerator_recycle_radio_row .mwform-radio-field:first-of-type {
  display: block;
  margin-bottom: 5px;
}

.floor_radio_row .mwform-radio-field,
.tv_recycle_radio_row .mwform-radio-field {
  display: block;
}

.floor_radio_row .mwform-radio-field:not(:last-of-type),
.tv_recycle_radio_row .mwform-radio-field:not(:last-of-type) {
  margin-bottom: 5px;
}

.form__question_note {
  border: 1px solid #ddd;
  border-bottom: none;
  padding: 10px 15px;
}

.stair__type_list::after,
.stair-type-row .mwform-radio-field {
  display: block;
  width: calc(95% / 3);
}

.stair__type_list::after {
  content: '';
}

.stair-type-row{
  .mwform-radio-field {
    margin-bottom: 20px;
    margin-right: 0 !important;

    &::after {
      content: '';
      display: block;
      max-width: 230px;
      width: 100%;
      max-height: 230px;
      height: 35vw;
      margin: 5px 0 0;
    }
    &:nth-of-type(1)::after {
      background: url(images/question/stair_img01.jpg) no-repeat top left / contain;
    }
    &:nth-of-type(2)::after {
      background: url(images/question/stair_img02.jpg) no-repeat top left / contain;
    }
    &:nth-of-type(3)::after {
      background: url(images/question/stair_img03.jpg) no-repeat top left / contain;
    }
    &:nth-of-type(4)::after {
      background: url(images/question/stair_img04.jpg) no-repeat top left / contain;
    }
    &:nth-of-type(5)::after {
      background: url(images/question/stair_img05.jpg) no-repeat top left / contain;
    }
  }
}

.customer_form#time tr:first-of-type,
.customer_form#time tr:nth-of-type(2),
.customer_form#time tr:nth-of-type(3),
#fax_row {
  display: none;
}

.mw_wp_form {
  .error {
    width: 100%;
  }
  .horizontal-item+.horizontal-item {
    margin-left: 0;
  }
}

@media screen and (max-width: 67.5em) {
  .form{
    .form__input_half {
      display: block;

      &:not(:last-of-type) {
        margin: 0 0 10px 0;
      }
    }
    input[name*=name],
    input[name*=kana] {
      max-width: 85%;
    }
  }
}

@media screen and (max-width: 61.25em) {
  .form.-is-question{
    .table__form_hdg,
    .table__form_detail {
      display: block;
    }
    .table__form_hdg,
    .table__form_row:not(:last-of-type) .table__form_detail {
      border-bottom: none;
    }
    .table__form_hdg {
      width: 100%;
    }
  }
}

@media screen and (min-width: 61.313em) {
  .form.-is-question .table__form_hdg {
    width: 485px;
  }
}

@media screen and (max-width: 48em) {
  .table__form_hdg,
  .table__form_detail {
    display: block;
  }
  .table__form_hdg {
    width: 100%;
    border-bottom: none;
  }
  .table__form_row:not(:last-of-type) .table__form_detail {
    border-bottom: none;
  }
  .form{
    .wd-s {
      max-width: 85%;
    }
    .form__input_half {
      white-space: nowrap;
    }
  }
  .scroll-block {
    overflow-x: scroll;

    &::-webkit-scrollbar {
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      margin: 0 2px;
      background: #ccc;
      border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #666;
    }
  }
  .scroll-item {
    max-width: 700px;
    width: 700px;
  }
  .stair__type_list::after,
  .stair-type-row .mwform-radio-field {
    width: calc(95% / 2);
  }
}

/************* Service ***************/
.childpage.-is-service .hdg-bottom_line {
  font-size: clamp(2.5rem, 3vw, 3.2rem);
}

.service__point_item:not(:last-child),
.service__recommend_block_item:not(:last-of-type) {
  margin-bottom: 50px;
}

.service__point_txt {
  width: min(100%, 600px);
  margin-right: 50px;
}

.service__recommend_block_txt {
  width: min(100%, 800px);
  margin-left: 50px;
}

.service__options_item:not(:last-child) {
  margin-bottom: 40px;
}

@media screen and (max-width: 48em) {
  .service__point_block,
  .service__recommend_block_item {
    display: block;
  }
  .service__point_txt {
    margin: 0 0 50px 0;
  }
  .service__recommend_block_txt {
    margin: 0 0 20px 0;
  }
  .service__recommend_block_img {
    text-align: center;
  }
}

@media screen and (max-width: 36.667em) {
  .service__intro_block {
    padding: 30px 20px;
  }
}

/************* Guide ***************/
.childpage.-is-guide{
  .box-filled.-is-gray{
    padding: 15px 25px;
  }
}

/************* Tips ***************/
.article-tag-list {
  gap: 7px;
}

.article-tag-item{
  background-color: #EDF1EE;
  font-size: 1.2rem;
  border-radius: 3px;
  color: var(--color-base);

  &:not(:has(a)){
    padding: 3px 10px;
  }
  a {
    display: block;
    color: var(--color-base);
    padding: 3px 10px;
  }
  &.-is-current {
    background-color: var(--color-base);
    color: var(--color-white);

    a {
      color: var(--color-white);
    }
  }
}

.article-list{
  &.-is-tips{
    &:has(.article-list-item) {
      gap: clamp(30px, 5vw, 50px) clamp(15px, 5vw, 45px);
    }
    &:not(:has(.article-list-item)){
      grid-template-columns: 1fr;
    })
    .article-list-ttl {
      width: 100%;
    }
    .article-list-item a {
      padding: 0;
      border: none;

      .article-tag-item{
        font-size: 1rem;
      }
    }
  }
}

.article-list-img {
  text-align: center;
  margin: 0 auto 15px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(252, 182, 209, 0.4);
    opacity: 0;
    transition: 0.3s;
  }
}

a:hover .article-list-img::before {
  opacity: 1;
}

.archive-articles.-is-tips{
  .article-list-excerpt{
    display: none;
  }
  .article-list-ttl{
    font-size: clamp(1.4rem, 3vw, 1.8rem);
  }
}

/************* Article detail ***************/
.article-detail .article-date {
  margin-right: 30px;
}

.article-detail-ttl {
  margin: 0 0 30px;
  color: var(--color-base);
  font-size: clamp(2.6rem, 3vw, 3.4rem);
  line-height: 1.4;
}

.article-editor-block {
  line-height: 1.8;
  padding: 0 0 50px;
  border-bottom: 1px solid #ddd;

  ul, ol {
    padding-left: 20px;
  }
  ul li {
    list-style: disc;
  }
  ol li {
    list-style: number;
  }
  h2{
    margin-bottom: 30px;
  }
  h3, h4{
    margin-bottom: 15px;
  }
}

.article__tag_list {
  font-size: 1.4rem;
  font-weight: bold;
  color: #888;
  gap: 0 15px;
  line-height: 1.4;
}

.article-detail-thumb{
  text-align: center;
  margin: 0 0 30px;

  img{
    height: auto;
  }
}

.article-detail:not(.-is-news){
  .article-editor-block{
    strong {
      background: linear-gradient(transparent 60%, #FFED99 60%);
    }
  }
}

/************* Main category top ***************/
.main-category-top{
  margin-bottom: 0 !important;

  .pickup-block{
    margin-bottom: 80px;
  }
  .bkg-lightgray{
    padding: 80px 0;
  }
}

.theme-single{
  .box-filled:not(.-is-white),
  .childpage__main_hdg_block{
    background-color: var(--color-theme-single);
  }
  .box-filled .btn-radius{
    &:not(:hover){
      color: var(--color-theme-single);

      .circle-arrow-right::before{
        background-color: var(--color-theme-single);
      }
    }
    &:hover .circle-arrow-right::after{
      border-color: var(--color-theme-single);
    }
  }
}

.theme-couple{
  .box-filled:not(.-is-white),
  .childpage__main_hdg_block{
    background-color: var(--color-theme-couple);
  }
  .box-filled .btn-radius{
    &:not(:hover){
      color: var(--color-theme-couple);

      .circle-arrow-right::before{
        background-color: var(--color-theme-couple);
      }
    }
    &:hover .circle-arrow-right::after{
      border-color: var(--color-theme-couple);
    }
  }
}

.theme-colors{
  .box-filled:not(.-is-white),
  .childpage__main_hdg_block{
    background-color: var(--color-theme-colors);
  }
  .box-filled .btn-radius{
    &:not(:hover){
      color: var(--color-theme-colors);

      .circle-arrow-right::before{
        background-color: var(--color-theme-colors);
      }
    }
    &:hover .circle-arrow-right::after{
      border-color: var(--color-theme-colors);
    }
  }   
}

.category-thumb-link{
  border: 1px solid #EBE3E3;
  border-radius: 6px;
  box-shadow: 2px 2px 3px #0000000D;
  overflow: hidden;
  display: block;
  background-color: var(--color-white);
  text-align: center;

  &:hover{
    text-decoration: none;
    border-color: var(--color-base);
    opacity: 1;
  }
}

.category-thumb-link-img{
  height: 90px;
  display: block;
  background-color: #F7F7F7;
  padding: 10px;

  img{
    margin: auto;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100%;
  }
}

.category-thumb-link-txt{
  padding: 15px;
  display: block;
}

/************* Category Archive ***************/
.archive-product-category{
  .service-block{
    margin: 60px 0 0;
  }
  .hdg-bottom_line{
    font-size: 100%;

    .f-14{
      color: #B6B4B2;
      font-weight: 500;
    }
  }
  .box-filled{
    color: var(--color-white);
    margin-top: clamp(60px, 5vw, 80px);
    border-radius: 8px;
    grid-template-columns: min(30%, 235px) 1fr;
  }
}

.line-seperator{
  display: block;
  background-color: #F7F7F7;
  border-top: 1px solid #EAE9E9;
  border-bottom: 1px solid #EAE9E9;
  height: 5.5px;
  margin: 30px 0 60px;
}

.category-filter-item{
  display: block;
  border: 1px solid #EBEBEB;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 1.4rem;
  overflow: hidden;
  position: relative;

  &.-is-active,
  &:hover{
    border: 1.5px solid var(--color-base);
    opacity: 1;
    text-decoration: none;
    color: var(--color-base);

    &::before,
    &::after{
      position: absolute;
      right: 0;
      top: 0;
    }    
    &::before{
      content: '';
      width: 8px;
      height: 6px;
      background: url('images/common/icn_check_white.svg') no-repeat center / contain;
      z-index: 2;
      top: 6px;
      right: 5px;
    }
    &::after{
      content: '';
      display: block;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 28px 28px 0;
      border-color: transparent var(--color-base) transparent transparent;
      transform: rotate(0deg);
      z-index: 1;
    }
  }
}

.category-filter-list{
  grid-template-columns: repeat(10, 1fr);

  .category-filter-item{
    line-height: 1.3;
  }
}

.category-filter-item-img{
  height: 60px;
  display: block;
  margin-bottom: 3px;

  img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100%;
  }
}

.sub-category-filter-item{
  display: block;
  background-color: #EDF1EE;
  border-radius: 3px;
  color: var(--color-base);
  text-align: center;
  padding: 3px 15px;
  font-size: 1.2rem;
  min-width: 90px;

  &.-is-active,
  &:hover{
    color: var(--color-white);
    opacity: 1;
    text-decoration: none;
    background-color: var(--color-base);
  }
}

.archive-product-sortarea{
  font-size: 1.4rem;

  select{
    padding: 0 25px 0 0;
    border: none;
    cursor: pointer;
    background: url('images/common/icn_select_arrow.svg') no-repeat right 2px;
  }
}

@media screen and (max-width: 61.25em) {
  .category-filter-list{
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 36em) {
  .category-filter-list{
    grid-template-columns: repeat(3, 1fr);
  }
}

/************* Product detail ***************/
.article-detail.-is-product{
  #content{
    margin-bottom: 80px;
  }
  .article-editor-block{
    border-bottom: none;
  }
  .slide-products{
    margin-bottom: 100px;
  }
}

.product-editor-block {
  margin-top: 60px;
}

.product-item-tax,
.product-item-tax em{
  font-size: 1rem !important;
  color: var(--color-black);
}

.item_page_title{
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.detail-box{
  width: 40%;
}

#itempage{
  gap: 50px clamp(20px, 5vw, 50px);

  #img-box{
    width: 60%;
    margin: 0;
  }
  .itemimg{
    position: relative;
    border-radius: 3px;
    border: 1px solid #E2DDDD;
    height: min(90vw, 620px);

    a{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    img{
      max-width: 100%;
      width: auto !important;
    }
  }
  .itemsubimg{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 20px 0 0;

    a{
      margin: 0;
      border-radius: 3px;
      border: 1px solid #E2DDDD;
      height: min(20vw, 95px);
      width: auto;
    }
    img{
      max-width: 100%;
      max-height: 100%;
      width: auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.item-option select {
  width: 100%;
}

.item-info{
  .skuname{
    font-size: 1.6rem;
    background-color: #F3F2F2;
    border-radius: 2px;
    padding: 5px 15px;
  }
  .field_price{
    font-size: 2rem;
  }
  .skubutton{
    background-color: #DF553F;
  }
}

@media screen and (min-width: 67.563em) {
  .article-detail.-is-product{
    .swiper-pagination,
    .swiper-button-prev,
    .swiper-button-next{
      display: none;
    }
    .swiper-wrapper:not(:has(.wd-100)){
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 45px clamp(15px, 3vw, 35px);
    }
  }
}

@media screen and (max-width: 48em) {
  #itempage {
    flex-wrap: wrap;

    #img-box{
      width: 100%;
    }
  }
  .detail-box{
    width: 100%;
  }
}

@media (min-width: 36.733em) {
  .article-detail.-is-product{
    .feature-list-item{
      width: min(100%, 154px);
    }
  }
}

@media screen and (max-width: 36.667em) {
  #itempage {
    .itemsubimg{
      grid-template-columns: repeat(3, 1fr);
    }
  }
}



/*
*
* ここからSEO会社のスタイル? ---------------------------------------------------
*
*/
.seotextarea {
  margin: 60px auto;
  max-width: 1000px;
  padding: 20px;
}

.seotext {
  font-size: 2.4rem;
  color: var(--color-base);
  font-weight: 500;
  margin-bottom: 20px;
  border-bottom: 2px dotted var(--color-base);
  line-height: 1.4;
}

.c-nap h3 {
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--color-base);
  border-bottom: 1px solid var(--color-base);
  margin-bottom: 20px;
}

.c-table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  text-align: left;
  width: 100%;
}

.c-table a {
  font-weight: 700;
  text-decoration: underline;
}

.c-table th {
  background: #f7f7f7;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
  width: 25%;
  padding: 15px
}

.c-table td {
  border: 1px solid #ddd;
  vertical-align: middle;
  padding: 15px
}

@media (max-width: 48em) {
  .c-pagelink {
    padding: 20px 5px;
  }
  /*リンク一覧 スマホのみ*/
  .c-table th {
    padding: 15px 5px
  }
  .c-table td {
    padding: 15px 5px
  }
}

/*** column archive ***/
.font02 {
  color: var(--color-base);
  padding-left: 30px
}

.font01 {
  font-weight: 700;
}

/*メインバナー画像*/
.c-head-mv {
  background-color: #333;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  color: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  height: 300px;
  line-height: 1.4;
  padding: 1em;
  position: relative;
  width: 100%;
}

.childpage{
  &.-is-column-archive .c-head-mv {
    background-image: url(images/column/mv00.jpg);
  }
  &.-is-c-merit-appliance .c-head-mv {
    background-image: url(images/column/mv01.jpg);
  }
  &.-is-c-rental .c-head-mv {
    background-image: url(images/column/mv02.jpg);
  }
  &.-is-c-kitchen .c-head-mv {
    background-image: url(images/column/mv03.jpg);
  }
  &.-is-c-choose-appliance .c-head-mv {
    background-image: url(images/column/mv04.jpg);
  }
  &.-is-c-point .c-head-mv {
    background-image: url(images/column/mv05.jpg);
  }
  &.-is-c-choose-furniture .c-head-mv {
    background-image: url(images/column/mv06.jpg);
  }
  &.-is-c-merit-furniture .c-head-mv {
    background-image: url(images/column/mv07.jpg);
  }
  &.-is-c-uses .c-head-mv {
    background-image: url(images/column/mv08.jpg);
  }
}

.c-head-mv h2 {
  background: rgba(000, 000, 000, .5);
  font-size: clamp(18px, 2.5vw, 20px);
  padding: 1em;
  position: relative;
  margin: 0;
}

@media screen and (max-width: 48em) {
  .c-head-mv {
    height: auto;
  }
  .c-head-mv h2 {
    height: auto;
  }
}

/*間隔 共通*/
.u-m0 {
  margin: 0 !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mt15 {
  margin-top: 15px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mt40 {
  margin-top: 40px !important;
}

.u-mt50 {
  margin-top: 50px !important;
}

.u-mt60 {
  margin-top: 60px !important;
}

.u-mt1em {
  margin-top: 1em !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-mb15 {
  margin-bottom: 15px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

.u-mb50 {
  margin-bottom: 50px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

.u-mb1em {
  margin-bottom: 1em !important;
}

.u-p0 {
  padding: 0 !important;
}

.u-p10 {
  padding: 10px !important;
}

.u-p15 {
  padding: 15px !important;
}

.u-p20 {
  padding: 20px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

.u-pt1em {
  padding-top: 1em !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-pb60 {
  padding-bottom: 60px !important;
}

.u-pb1em {
  padding-bottom: 1em !important;
}

.l-container {
  word-break: break-all;
}

/*タイトル 共通*/
.l-container .l-heading-secondary {
  font-size: 2.8rem;
  color: var(--color-base);
  font-weight: 500;
  margin-bottom: 40px;
  border-bottom: 2px dotted var(--color-base);
  line-height: 1.4;
}

.l-container .l-tertiary {
  position: relative;
  padding-left: 25px;
  clear: none;
  font-size: 2rem;
}

.l-container .l-tertiary::before {
  content: '';
  width: 15px;
  height: 1px;
  background-color: var(--color-base);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 17px;
}

/*テキストブロック 共通*/
.c-block {
  overflow: hidden;
}

/*リスト 共通*/
.c-block ul,
.c-block ol {
  padding: 1em 1em 1em 30px;
  vertical-align: top;
}

.c-block li {
  list-style: disc;
}

/*画像 共通*/
.img-left-s {
  float: left;
  margin: 0 4% 4% 0;
  width: 35%;
}

.img-right-s {
  float: right;
  margin: 0 0 4% 4%;
  width: 35%;
}

.img-right-s img {
  vertical-align: middle;
  width: 100%;
}

/*リンク一覧 共通*/
.c-linkblock h3 {
  font-size: 2.4rem;
  color: var(--color-base)
}

.c-pagelink {
  background: #EEF3E9;
  padding: 20px;
  border-radius: 10px;
}

.c-pagelink li {
  margin: 0 10px 20px 30px;
  list-style: decimal;
}

@media (min-width: 36.733em) {
  .childpage.-is-column-archive .childpage__main_hdg,
  .childpage.-is-column .childpage__main_hdg {
    font-size: 4rem;
  }
}

@media (max-width: 48em) {
  .c-pagelink {
    padding: 20px 5px;
  }
  /*画像 スマホのみ*/
  .img-left-s,
  .img-right-s {
    float: none;
    width: 100%;
    margin: 0 0 4%;
  }
}

@media (max-width: 36.667em) {
  .childpage.-is-column .childpage__main_hdg {
    font-size: 7vw;
  }
}
/*********************** END ここからSEO会社のスタイル? ***********************/