/* ##############################################################################

    DEFAULT

############################################################################## */
  html {
    font-size: clamp(14px, 0.8333333333vw, 1rem);
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-padding-top: calc(6.5rem + 2.4rem);
  }  
  body {
    font-family: 'Zen Kaku Gothic New', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
    color: var(--clr-text-primary);
    background-color:  var(--clr-bg-01);
    font-weight: 400;
    line-height: 1.7;
    font-feature-settings: "palt";
    word-break: break-word;
    padding-top: calc(7.4rem + 2.4rem);
  }
  * { letter-spacing: .01em; }
  *,
  *:after,
  *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  ul,
  ol { list-style: none; }
  a {
    color: var(--clr-text-primary);
    text-decoration: none;
    transition: all .4s ease-out;
    outline : none;
  }
  a[href]:hover {
    opacity: .7;
    text-decoration: none;
  }
  img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transition: all .4s ease-out;
  }
  iframe { vertical-align: bottom; }
  input,
  select {
    -webkit-appearance: none;
    appearance: none;
    color: var(--clr-text-primary);
  }

  @media screen and (min-width: 768px) and (max-width: 1080px) {
    html {
      font-size: 0.875rem;
      overflow-y: auto;
      overflow-x: auto;
    }
    body {
      min-width: 1080px;
    }
  }
  @media screen and (max-width: 1080px) {
    html {
      scroll-padding-top: 6.5rem;
    }
    body {
      padding-top: 9.05rem;
    }
  }
  @media screen and (min-width: 768px) {
    body {
      font-size: clamp(14.1666666667px, 0.8333333333vw, 1rem);
    }
    a { 
      -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 
    }
    a[href^="tel:"] {
      pointer-events: none;
    }
  }
  @media screen and (max-width: 767px) {
    html {
      font-size: min(3.3816425121vw, 0.875rem);
    }
    body {
      background-color:  var(--clr-bg-01);
      -webkit-text-size-adjust: none;
    }
  }


/* ##############################################################################

    COMMON

############################################################################## */

/* inner
**************************************** */
.inner {
  width: 90%;
  max-width: 95rem; /* 1520px */
  margin-left: auto;
  margin-right: auto;
}
.inner-sm {
  max-width: 87.5rem; /* 1400px */
}
.inner-lg {
  max-width: 98rem; /* 1586px */
}
.section_inner {
  max-width: 52.5rem; /* 840px */
  margin-left: auto;
  margin-right: auto;
}
.section_line:not(:last-child) {
  border-bottom: 1px solid var(--clr-mono-02);
}
@media screen and (max-width: 1440px) {
  .inner {
    width: 96%;
  }
}
@media screen and (max-width: 767px) {
  .inner {
    width: 92%;
  }
}

/* section_pdg
**************************************** */
.section_pdg {
  padding-block: 2.5rem; /* 40px */
}
.section_pdg-top {
  padding-top: 2.5rem;
}
.section_pdg-btm {
  padding-bottom: 2.5rem;
}
@media screen and (max-width: 767px) {
  .section_pdg {
    padding-block: 2rem;
  }
  .section_pdg-top {
    padding-top: 2rem;
  }
  .section_pdg-btm {
    padding-bottom: 2rem;
  }
}

/* -- lg -- */
.section_pdg-lg {
  padding-block: 4.25rem; /* 68px */
}
.section_pdg-lg-top {
  padding-top: 4.25rem;
}
.section_pdg-lg-btm {
  padding-bottom: 4.25rem;
}
@media screen and (max-width: 767px) {
  .section_pdg-lg {
    padding-block: 3rem;
  }
  .section_pdg-lg-top {
    padding-top: 3rem;
  }
  .section_pdg-lg-btm {
    padding-bottom: 3rem;
  }
}

/* -- xl -- */
.section_pdg-xl {
  padding-block: 6.25rem; /* 100px */
}
.section_pdg-xl-top {
  padding-top: 6.25rem;
}
.section_pdg-xl-btm {
  padding-bottom: 6.25rem;
}
@media screen and (max-width: 767px) {
  .section_pdg-xl {
    padding-block: 4rem;
  }
  .section_pdg-xl-top {
    padding-top: 4rem;
  }
  .section_pdg-xl-btm {
    padding-bottom: 4rem;
  }
}

/* ttl
**************************************** */
.ttl-01:not([class*=mgn-btm]):not(:last-child),
.ttl-03:not([class*=mgn-btm]):not(:last-child),
.ttl-06:not([class*=mgn-btm]):not(:last-child) {
  margin-bottom: 1em;
}

.ttl-01 {
  font-size: 2rem; /* 32px */
  line-height: 1.7;
  letter-spacing: .03em;
}
@media screen and (max-width: 767px) {
  .ttl-01 {
    font-size: 1.5rem;
  }
}

.ttl-02 {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 3px;
    background: var(--clr-text-placeholder);
  }
  span {
    position: relative;
    z-index: 10;
    display: inline-block;
    padding: 0 3rem;
    font-size: 1.5rem; /* 24px */
    line-height: 1.7;
    letter-spacing: .03em;
    background-color:  var(--clr-bg-01);
  }
}
.ttl-02:not([class*=mgn-btm]):not(:last-child) {
  margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
  .ttl-02 {
    &::before {
      height: 2px;
    }
    span {
      font-size: 1.25rem;
      padding: 0 1.25rem;
      line-height: 1.5;
    }
  }
  .ttl-02:not([class*=mgn-btm]):not(:last-child) {
    margin-bottom: 1em;
  }
}

.ttl-03,
.post--content h3 {
  position: relative;
  font-size: 1.5rem; /* 24px */
  line-height: 1.7;
  letter-spacing: .0075em;
  &:not(.no_icn) {
    padding-left: 2rem;
  }
  &:not(.no_icn)::before {
    content: "";
    position: absolute;
    top: .85rem;
    left: 0;
    display: block;
    width: 1.25rem;
    aspect-ratio: 20 / 13;
    min-width: 0;
    margin-right: .75rem;
    background-image: url(../images/common/ttl-03.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.ttl-03.font-jp,
.post--content h3 {
  font-size: 1.375rem; /* 22px */
}
.ttl-03.txt-ctr:not(.no_icn) {
  padding-left: 0;
  &::before {
    position: static;
    inset: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
  }
}
@media screen and (max-width: 767px) {
  .ttl-03,
  .post--content h3 {
    font-size: 1.25rem; /* 20px */
    &:not(.no_icn) {
      padding-left: 1.75rem;
    }
    &:not(.no_icn)::before {
      top: .7rem;
      width: 1.125rem;
      margin-right: .25rem;
    }
  }
  .ttl-03.font-jp,
  .post--content h3 {
    font-size: 1.25rem; /* 20px */
  }
}

.ttl-04 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.7;
  letter-spacing: .03em;
  .icn {
    margin-right: .25rem;
    transform: translateY(-.125rem);
  }
}
.ttl-04:not([class*=mgn-btm]):not(:last-child) {
  margin-bottom: .8em;
}
@media screen and (max-width: 767px) {
  .ttl-04 {
    font-size: 1.125rem;
  }
}

.ttl-05 {
  padding: .125rem;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  letter-spacing: .03em;
  font-weight: 700;
  color: var(--clr-wht);
  background-color: var(--clr-text-primary);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ttl-05 {
    font-size: 1rem;
  }
}

.ttl-06 {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .03em;
  font-weight: 500;
}
.ttl-06-bg {
  display: inline-block;
  padding: 0 .5em;
  background-color: var(--clr-bg-03);
}
@media screen and (max-width: 767px) {
  .ttl-06 {
    font-size: 1rem;
  }
}

/* breadcrumbs
**************************************** */
.breadcrumbs {
  margin-bottom: 2rem;
  font-size: .813rem; /* 13px */
}
.breadcrumbs a {
  text-decoration: underline;
  &:hover {
    color: var(--clr-sub-01);
    opacity: 1;
  }
}
.breadcrumbs a:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.3125rem;
  height: 0.4375rem;
  clip-path: polygon(0 100%, 0 0, 100% 50%);
  background-color: var(--clr-text-placeholder);
  margin: 0.15em 0.5em 0.15em 1em;
}
@media screen and (max-width: 767px) {
  .breadcrumbs {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
  }
}

/* .color
*************************************************** */
:root {
  --clr-primary-default: #1780B8;
  --clr-primary-dark: #3B5091;
  --clr-primary-light: #2E9AD4;

  --clr-secondary-default: #CB4C17;
  --clr-secondary-dark: #D03030;
  --clr-secondary-light: #FF7E67;

  --clr-tertiary-dark: #37844E;

  --clr-bg-01: #F7F7F4;
  --clr-bg-02: #F0EFEC;
  --clr-bg-03: #E7E5DD;

  --clr-sub-01: #7B726C;
  --clr-sub-02: #DBC49F;
  --clr-sub-03: #B4955D;
  --clr-sub-04: #CF727C;
  --clr-sub-05: #A2689B;
  --clr-sub-06: #6790B7;

  --clr-mono-01: #EFECEC;
  --clr-mono-02: #DFDFE0;
  --clr-mono-03: #BABDC4;
  --clr-mono-04: #9599A3;
  --clr-mono-05: #646B7A;
  --clr-mono-06: #333841;

  --clr-text-primary: #404044;
  --clr-text-secondary: #7A7A81;
  --clr-text-placeholder: #CCC;
  --clr-text-light: #F7F7F7;

  --clr-wht: #fff;
  --clr-blk: #000;
}
  
.clr-primary-default,
.clr-primary-default * { color: var(--clr-primary-default); }  
.clr-primary-dark,
.clr-primary-dark * { color: var(--clr-primary-dark); }
.clr-primary-light,
.clr-primary-light * { color: var(--clr-primary-light); }
.clr-secondary-default,
.clr-secondary-default * { color: var(--clr-secondary-default); }
.clr-secondary-dark,
.clr-secondary-dark * { color: var(--clr-secondary-dark); }
.clr-secondary-light,
.clr-secondary-light * { color: var(--clr-secondary-light); }  
.clr-tertiary-dark,
.clr-tertiary-dark * { color: var(--clr-tertiary-dark); }
.clr-bg-01,
.clr-bg-01 * { color: var(--clr-bg-01); }  
.clr-bg-02,
.clr-bg-02 * { color: var(--clr-bg-02); }  
.clr-sub-01,
.clr-sub-01 * { color: var(--clr-sub-01); }  
.clr-sub-02,
.clr-sub-02 * { color: var(--clr-sub-02); }  
.clr-sub-03,
.clr-sub-03 * { color: var(--clr-sub-03); }  
.clr-sub-04,
.clr-sub-04 * { color: var(--clr-sub-04); }  
.clr-sub-05,
.clr-sub-05 * { color: var(--clr-sub-05); }  
.clr-sub-06,
.clr-sub-06 * { color: var(--clr-sub-06); }  
.clr-mono-01,
.clr-mono-01 * { color: var(--clr-mono-01); }  
.clr-mono-02,
.clr-mono-02 * { color: var(--clr-mono-02); }  
.clr-mono-03,
.clr-mono-03 * { color: var(--clr-mono-03); }  
.clr-mono-04,
.clr-mono-04 * { color: var(--clr-mono-04); }  
.clr-mono-05,
.clr-mono-05 * { color: var(--clr-mono-05); }  
.clr-mono-06,
.clr-mono-06 * { color: var(--clr-mono-06); }  
.clr-text-primary,
.clr-text-primary * { color: var(--clr-text-primary); }  
.clr-text-secondary,
.clr-text-secondary * { color: var(--clr-text-secondary); }  
.clr-text-placeholder,
.clr-text-placeholder * { color: var(--clr-text-placeholder); }  
.clr-text-light,
.clr-text-light * { color: var(--clr-text-light); }  
.clr-wht,
.clr-wht * { color: var(--clr-wht); }  
.clr-blk,
.clr-blk * { color: var(--clr-blk); }

.bg-primary-default { background-color: var(--clr-primary-default); }
.bg-primary-dark { background-color: var(--clr-primary-dark); }
.bg-primary-light { background-color: var(--clr-primary-light); }
.bg-secondary-default { background-color: var(--clr-secondary-default); }
.bg-secondary-dark { background-color: var(--clr-secondary-dark); }
.bg-secondary-light { background-color: var(--clr-secondary-light); }
.bg-tertiary-dark { background-color: var(--clr-tertiary-dark); }
.bg-bg-01 { background-color: var(--clr-bg-01); }
.bg-bg-02 { background-color: var(--clr-bg-02); }
.bg-sub-01 { background-color: var(--clr-sub-01); }
.bg-sub-02 { background-color: var(--clr-sub-02); }
.bg-sub-03 { background-color: var(--clr-sub-03); }
.bg-sub-04 { background-color: var(--clr-sub-04); }
.bg-sub-05 { background-color: var(--clr-sub-05); }
.bg-sub-06 { background-color: var(--clr-sub-06); }
.bg-mono-01 { background-color: var(--clr-mono-01); }
.bg-mono-02 { background-color: var(--clr-mono-02); }
.bg-mono-03 { background-color: var(--clr-mono-03); }
.bg-mono-04 { background-color: var(--clr-mono-04); }
.bg-mono-05 { background-color: var(--clr-mono-05); }
.bg-mono-06 { background-color: var(--clr-mono-06); }
.bg-text-primary { background-color: var(--clr-text-primary); }
.bg-text-secondary { background-color: var(--clr-text-secondary); }
.bg-text-placeholder { background-color: var(--clr-text-placeholder); }
.bg-text-light { background-color: var(--clr-text-light); }
.bg-wht { background-color: var(--clr-wht); }
.bg-blk { background-color: var(--clr-blk); }
.bg-01 { background-color: var(--clr-bg-01); }
.bg-02 { background-color: var(--clr-bg-02); }
.bg-03 { background-color: var(--clr-bg-03); }

/* font
**************************************** */
.semi_bold {
  font-weight: 500;
}
.bold {
  font-weight: 700;
}
.font-jp {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}
.font-en,
.font-en-semi_bold,
.font-en-bold {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.font-en-semi_bold {
  font-weight: 500;
}
.font-en-bold {
  font-weight: 600;
}

/* btn
********************************************** */
.btn a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-items: center;
  gap: .5rem;
  padding: .6rem 4rem .6rem 2rem;
  width: fit-content;
  min-width: 15rem;
  max-width: 100%;
  color: var(--clr-wht);
  background-color: var(--clr-text-primary);
  text-decoration: none;
  letter-spacing: .03em;
  font-weight: 500;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .btn a {
    min-width: 100%;
    padding: .8rem 4rem .8rem 2rem;
    font-size: 1.071rem; /* 15px */
  }
}
.btn a:hover {
  opacity: 1;
  background-color: var(--clr-sub-01);
}
.btn a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
  transition: all .4s ease-out;
}
.btn a:where([href^="#"]):not([href^="#makeshop"])::before {
  transform: rotate(90deg);
}
.btn a:where(:not([rel*=nofollow]):not([href$=".pdf"]):not([href$=".jpg"]):not([href$=".png"]))::before {
  right: 2rem;
  width: .5rem;
  border-top: 2px solid;
  border-right: 2px solid;
  rotate: 45deg;
}
.btn a:where([rel*=nofollow])::before {
  right: 2rem;
  width: 1rem;
  background-image: url(../images/common/icn-tab.svg);
  background-size: contain;
}
.btn.btn-ctr a {
  margin-left: auto;
  margin-right: auto;
}
.grid .btn a { width: 100%; }

/* --- btn-lg --- */
.btn-lg a {
  min-width: 25rem;
  font-size: 1.25rem; /* 20px */
}
@media screen and (max-width: 767px) {
  .btn-lg a {
    min-width: 100%;
    font-size: 1.143rem; /* 16px */
  }
}
/* --- btn-wht --- */
.btn-wht a {
  color: var(--clr-sub-01);
  background-color: var(--clr-wht);
}
.btn-wht a:hover {
  background-color: var(--clr-bg-02);
}

/* --- btn-ble --- */
.btn-ble a {
  background-color: #052F71;
}
.btn-ble a:hover {
  background-color: var(--clr-primary-dark);
}

/* --- btn-cta --- */
.btn-cta a {
  background-color: var(--clr-sub-03);
}
.btn-cta a:hover {
  background-color: var(--clr-sub-01);
}

/* --- btn-cta2 --- */
.btn-cta2 a {
  background-color: var(--clr-secondary-default);
}
.btn-cta2 a:hover {
  background-color: var(--clr-sub-04);
}
@media screen and (max-width: 1340px) {
  .btn-cta2:not(.btn-lg) a:where([href^="#makeshop-item-cart-entry"], [href^="#makeshop-common-cart-entry-url:"]) {
    padding-left: .75rem;
    padding-right: 2rem;
    font-size: .875rem; /* 14px */
  }
  .btn-cta2:not(.btn-lg) a:where([href^="#makeshop-item-cart-entry"], [href^="#makeshop-common-cart-entry-url:"])::before {
    right: 1rem;
  }
}

/* list
**************************************** */
.list {
  margin-inline-start: 2rem;
  li {
    position: relative;
    line-height: 1.5;
    &::before {
      content: "";
      float: inline-start;
      inline-size: .5rem;
      aspect-ratio: 1;
      margin-block: calc((1lh - 0.5rem) / 2);
      margin-inline-start: calc(1.5rem* -1);
      color: var(--clr-sub-01);
      border: 1px solid;
      background-color: currentColor;
      border-radius: 50%;
    }
    &:not(:last-child) {
      margin-bottom: .5em;
      ul {
        margin-bottom: 1rem;
      }
    }
    .txt-attention {
      margin-top: .5rem;
    }
  }
  ul {
    margin-top: .5rem;
    margin-left: 1.5rem;
    li::before {
      opacity: .5;
    }
  }
}

/* --- toggle_list --- */
.toggle_list {
  padding: 0 1rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
  &:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }
  dt {
    position: relative;
    padding: 1rem 0;
    padding-right: 2.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .4s ease-out;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 1rem;
      width: .5rem;
      min-width: 0;
      aspect-ratio: 1 / 1;
      border-top: 2px solid;
      border-right: 2px solid;
      color: var(--clr-text-secondary);
      rotate: 135deg;
      pointer-events: none;
      transition: all .4s ease-out;
    }
    &.active::before {
      rotate: -45deg;
    }
    &:hover {
      color: var(--clr-sub-01);
    }
  }
  dd {
    display: none;
    margin-bottom: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--clr-wht);
  }
}
@media screen and (max-width: 767px) {
  .toggle_list {
    padding: 0;
  }
}

/* --- flow_list --- */
.flow_list {
  position: relative;
  counter-increment: number;
  margin-inline-start: 3.5rem;
  > .ttl {
    position: relative;
    margin-bottom: 1rem;
    font-size: 1.25rem; /* 20px */
    line-height: 1.7;
    letter-spacing: .03em;
  }
  > .ttl::before {
    content: counter(number);
    position: absolute;
    top: 0;
    left: -3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 2.75em;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    font-size: 70%;
    color: var(--clr-wht);
    background-color: var(--clr-sub-01);
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }
  &:not(:last-child) {
    padding-bottom: 2.5rem;
  }
  &:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3rem;
    left: -2.3rem;
    bottom: .5rem;
    display: block;
    border-right: 1px solid var(--clr-mono-03);
  }
}

/* box
**************************************** */
.box {
  padding: 1.5rem;
  &:not([class*=bg-]) {
    background-color: var(--clr-wht);
  }
}
.box-02 {
  padding: 1rem 1.5rem;
  &:not([class*=bg-]) {
    background-color: var(--clr-bg-01);
  }
}
.box-03 {
  padding: 2rem 1.5rem;
  &:not([class*=bg-]) {
    background-color: var(--clr-bg-03);
  }
}
.box:not([class*=mgn-btm]):not(:last-child) {
  margin-bottom: 1rem;
}


/* anchor
**************************************** */
.anchor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.anchor#sizes_cutpack {
  top: 0;
}
@media screen and (max-width: 1080px) {
  .anchor {
    top: -1rem;
  }
}

/* ##############################################################################

    HEADER

############################################################################## */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8rem; /* 128px */
  background-color: var(--clr-wht);
  border-top: solid .25rem var(--clr-sub-01);
  box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, .08);
  z-index: 9999;
  transition: all .4s ease-out;
  display: flex;
  flex-direction: column;
}
.header-sm {
  height: 5.5rem;
}
@media screen and (max-width: 1080px) {
  .header {
    height: 5.55rem;
  }
  .header-sm {
    height: 4rem;
  }
}

/* header_top
********************************************** */
.header_top {
  padding: .3rem 2rem .3rem 1rem;
  border-bottom: 1px solid var(--clr-mono-01);
  transition: all .4s ease-out;
}
.header--copy {
  font-size: .813rem; /* 13px */
  letter-spacing: .03em;
}
.header-sm .header_top {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
@media screen and (max-width: 1080px) {
  .header_top {
    padding: .2rem .75rem;
  }
  .header--copy {
    font-size: .714rem; /* 10px */
  }
}

/* --- subnav --- */
.subnav--link {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem; /* 12px */
  letter-spacing: .03em;
  color: var(--clr-text-secondary);
}
@media screen and (max-width: 1080px) {
  .subnav {
    display: none;
  }
}

/* header_btm
********************************************** */
.header_btm {
  flex: 1;
  padding: 0 2rem;
}
@media screen and (max-width: 1700px) {
  .header_btm {
    padding: 0 .75rem;
  }
}
@media screen and (max-width: 1080px) {
  .header_btm {
    padding: 0 .75rem;
    padding-right: calc(4rem + .25rem);
  }
  .header_btm > .flex:not(.gnav_btn) {
    flex: 1;
    justify-content: space-between;
  }
}

/* --- logo -- */
.header--logo a,
.footer--logo a {
  display: inline-flex;
}
.header--logo a:hover,
.footer--logo a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 1160px) {
  .header--logo img {
    width: 8.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .footer--logo img {
    width: 8.5rem !important;
  }
}

/* --- header--shipping --- */
.header--shipping {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 1px;
  width: 100%;
  padding: .2rem;
  color: var(--clr-wht);
  background-color: var(--clr-secondary-default);
  font-size: .75rem; /* 12px */
  line-height: 1.4;
  text-align: center;
  transform: translateY(100%);
  span {
    font-size: 127%;
    color: #FFF6D7;
  }
}
@media screen and (min-width: 768px) {
  .header--shipping {
    &::first-line {
      font-size: 118%;
    }
  }
}

/* --- header--delivery --- */
.header--delivery {
  padding: .4rem .6rem;
  border-radius: 3px;
  color: var(--clr-wht);
  background-color: var(--clr-text-primary);
  font-size: .813rem; /* 13px */
  line-height: 1.275;
  text-align: center;
  span {
    color: #FFF6D7;
    font-size: 123%; /* 16px */
  }
}
@media screen and (max-width: 1240px) {
  .header--delivery {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .header--delivery {
    display: block;
    font-size: .714rem; /* 10px */
    span {
      font-size: 120%; /* 12px */
    }
  }
}

/* --- header--payment --- */
@media screen and (max-width: 1420px) {
  .header--payment {
    display: none;
  }
}

/* --- header--deliverys --- */
@media screen and (min-width: 1081px) {
  .header--deliverys {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .header--deliverys.side--deliverys {
    display: block;
  }
  .header--deliverys {
    position: absolute;
    width: 100%;
    top: 6.85rem;
    left: 0;
    transition: all .4s ease-out;
  }
  .header--deliverys .side--ttl-02 {
    height: 2rem;
    &::before {
      content: none;
    }
    &::after {
      content: "";
      width: .5rem;
      min-width: 0;
      aspect-ratio: 1 / 1;
      border-top: 2px solid;
      border-right: 2px solid;
      color: var(--clr-wht);
      rotate: 135deg;
      pointer-events: none;
      transition: all .4s ease-out;
    }
    &.active::after {
      rotate: -45deg;
    }
  }
  
  .header-sm .header--deliverys {
    top: 5.3rem;
  }
}

/* --- header--cta --- */
@media print, screen and (min-width: 1081px) {
  .header--cta {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .header--cta {
    margin-left: auto;
    margin-right: 0;
  }
}

/* gnav
********************************************** */
@media print, screen and (min-width: 1081px) {
  .gnav {
    display: flex;
    align-items: center;
  }
  .gnav,
  .gnav--menu,
  .gnav--menu li {
    height: 100%;
  }
  .gnav--menu li {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 1080px) {
  .gnav {
    display: none;
  }
}

.gnav--item,
.side--ttl {
  font-size: 1.125rem; /* 18px */
  letter-spacing: .03375em;
  text-align: center;
}
.gnav--item .en,
.side--ttl .en {
  display: block;
  font-size: .625rem; /* 10px */
  letter-spacing: .04em;
  color: var(--clr-text-placeholder);
}
@media print, screen and (min-width: 1081px) {
  .gnav--menu > li:hover > .gnav--item:not([href="javascript:void(0);"]),
  .gnav--menu > li.current-menu-item > .gnav--item {
    color: var(--clr-sub-01);
    opacity: 1;
  }
}

/* ---gnav--menu-child --- */
.gnav--menu li {
  position: relative;
  &:hover .gnav--menu-child {
    opacity: 1;
    pointer-events: auto;
  }
}
.ipad .gnav--menu li.click .gnav--menu-child {
  opacity: 1;
  pointer-events: auto;
}
.gnav--menu-child {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  transform: translateX(-30%);
  width: 15rem;
  padding: 1rem 1.5rem 1.5rem;
  background: var(--clr-wht);
  box-shadow: 0 .25rem .25rem 0 rgba(0, 0, 0, .04) inset;
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease-out;
  a {
    width: 100%;
  }
}
.gnav--menu-child-lg {
  width: 30.25rem;
}

/* ---btn --- */
@media print, screen and (min-width: 1081px) {
  .gnav_btn {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .gnav_btn {
    position: fixed;
    top: 1.8rem;
    right: 0;
    width: calc(4rem - 5px);
    height: calc(4rem - 5px);
    border-left: 1px solid var(--clr-mono-01);
    cursor: pointer;
    z-index: 9998;
    transition: all .4s ease-out;;
  }
  .header-sm .gnav_btn {
    top: 3px;
  }
  .gnav_btn--lines {
    position: relative;
    width: 1.7142857143rem;
    height: 1.1428571429rem;
  }
  .gnav_btn--lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #404044;
    transition: all .4s ease-out;;
  }
  .gnav_btn--lines span:nth-of-type(1) {
    top: 0;
  }
  .gnav_btn--lines span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  .gnav_btn--lines span:nth-of-type(3) {
    bottom: 0;
  }
  .active .gnav_btn--lines span:nth-of-type(1) {
    transform: translateY(0.5rem) rotate(-45deg);
  }
  .active .gnav_btn--lines span:nth-of-type(2) {
    opacity: 0;
  }
  .active .gnav_btn--lines span:nth-of-type(3) {
    transform: translateY(-0.5rem) rotate(45deg);
  }
}

/* --- cta --- */
.cta_cart {
  .link {
    position: relative;
  }
  .num {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: .875rem; /* 14px */
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: 99px;
    background: var(--clr-secondary-default);
    color: var(--clr-wht);
    white-space: nowrap;
    font-size: .625rem; /* 10px */
    letter-spacing: normal;
    line-height: 1;
  }
}
.gnav--login {
  margin-top: .9rem;
  .txt {
    letter-spacing: -.01em;
  }
}
.cta_login {
  .link_newmember {
    display: block;
    font-size: .6875rem; /* 11px */
    color: var(--clr-text-secondary);
    letter-spacing: .02em;
  }
}
.cta_fax_dl a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 0 .125rem .125rem;
  font-size: .875rem; /* 14px */
  border-bottom: solid 1px;
}
.cta_fax {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-size: 2rem; /* 32px */
  line-height: 1.4;
}
.cta_tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-size: 2.25rem; /* 36px */
  line-height: 1.4;
}

/* search_form
********************************************** */
.header--search_form {
  margin-left: 2.5rem;
  margin-right: 1.5rem;
}
.search_form {
  position: relative;
  display: flex;
}
.search_form--txtarea {
  width: 15rem;
  padding: .75rem 1rem;
  padding-right: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--clr-mono-03);
  background: var(--clr-bg-01);
  &::placeholder {
    color: var(--clr-text-placeholder);
  }
}
.search_form--btn {
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  margin: auto;
  width: 1.5rem;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background-image: url(../images/common/navi-icn-search.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 1660px) {
  .header--search_form {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .search_form--txtarea {
    width: 13.5rem;
  }
}
@media screen and (max-width: 1080px) {
  .search_form--txtarea {
    width: 100%;
    padding: 1rem;
    background-color: var(--clr-wht);
  }
}


/* ##############################################################################

    FOOTER

############################################################################## */

/* .fixed_bnr
*************************************************** */
.fixed_bnr {
  position: fixed;
  right: -22rem;
  bottom: 0;
  background-image: url(../images/common/fixed-bnr-bg.jpg);
  padding: 1rem;
  z-index: 999;
  transition: all .8s ease-out;
}
.fixed_bnr .ttl {
  color: var(--clr-wht);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: .25rem;
}
.fixed_bnr .btnarea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}
.fixed_bnr .btnarea a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.625rem;
  height: 4.875rem;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  position: relative;
  padding: .3125rem .5rem 1rem;
}
.fixed_bnr .btnarea .txt {
  height: 1.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.fixed_bnr a .arrow {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  aspect-ratio: 1 / 1;
  min-width: 0;
  &::before {
    content: "";
    display: block;
    width: .3rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    transition: all .4s ease-out;
  }
}
.fixed_bnr .nomal a {
  background-color: #F4E4CA;
  .arrow::before {
    border-color: var(--clr-secondary-default);
  }
}
.fixed_bnr .cutpack a {
  background-color: #C9DFD7;
  .arrow::before {
    border-color: var(--clr-tertiary-dark);
  }
}
@media screen and (min-width: 768px) {
  .fixed_bnr.show {
    transform: translateX(-22rem);
    transition: all .8s ease-out;
  }
  .fixed_bnr.hide {
    transform: translateX(0);
    transition: all .8s ease-out;
  }
  .fixed_bnr .close_btn {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--clr-wht);
    position: absolute;
    left: -.5rem;
    top: -.5rem;
    border-radius: 50%;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.30);
    transition: all .4s ease-out;
    &:hover {
      background-color: var(--clr-text-primary);
    }
  }
  .fixed_bnr .btnarea-sp {
    display: none;
  }
  .fixed_bnr .close_btn span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: .75rem;
    height: 2px;
    background-color: var(--clr-text-primary);
    transition: all .4s ease-out;
    &:nth-of-type(1) {
      top: 0;
      transform: translateY(.5625rem) rotate(-45deg);
    }
    &:nth-of-type(2) {
      bottom: 0;
      transform: translateY(-.5625rem) rotate(45deg);
    }
  }
  .fixed_bnr .close_btn:hover span {
    background-color: var(--clr-wht);
  }
}
@media screen and (max-width: 767px) {
  .fixed_bnr {
    width: 100%;
    padding: 0;
    right: 0;
  }
  .fixed_bnr .close_btn {
    display: none;
  }
  .fixed_bnr .ttl {
    font-size: 1.07rem;
    height: 1.75rem;
  }
  .fixed_bnr .btnarea {
    display: none;
  }
  .fixed_bnr .btnarea-sp {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr;
  }
  .fixed_bnr .btnarea-sp a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    height: 3.15rem;
    font-size: 1.07rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0 1.5rem 0 1rem;
    text-decoration: none;
    position: relative;
  }
  .fixed_bnr a .arrow {
    right: .3rem;
    top: 0;
    margin: auto;
    &::before {
      width: .4rem;
      transform: rotate(-45deg);
    }
  }
}

/* .footer_mokuzaikako
*************************************************** */
.footer_mokuzaikako {
  position: relative;
  background-color: var(--clr-bg-02);
  .inner {
    padding-block: 6rem;
  }
  .txtarea {
    max-width: 40rem;
  }
}

/* --- mokuzaikako_list --- */
.mokuzaikako_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    text-align: center;
    line-height: 1.4;
    letter-spacing: .03em;
    color: var(--clr-sub-01);
    background-color: var(--clr-wht);
    box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, .08);
  }
}
@media screen and (min-width: 768px) {
  .footer_mokuzaikako {
    .imgarea {
      position: absolute;
      top: 0;
      right: 5rem;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1740px) {
  .footer_mokuzaikako {
    .imgarea {
      right: 0;
    }
  }
}
@media screen and (min-width: 1201px) and (max-width: 1440px) {
  .footer_mokuzaikako {
    .imgarea {
      max-width: 50vw;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .footer_mokuzaikako {
    .imgarea {
      max-width: 35rem;
    }
  }
}
@media screen and (max-width: 767px) {
  .footer_mokuzaikako {
    .inner {
      padding-block: 2.5rem;
    }
  }
  
  /* --- mokuzaikako_list --- */
  .mokuzaikako_list {
    gap: .25rem;
    justify-content: center;
    li {
      width: 5rem;
      font-size: .857rem; /* 12px */
    }
  }
}

/* .footer_cta
*************************************************** */
.footer_cta {
  padding-block: 4rem 5rem;
  background-color: var(--clr-bg-03);
}

/* --- cta_list --- */
.cta_list {
  .cta {
    width: 25rem;
    padding-block: 1.5rem 2rem;
    box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, .1);
    backdrop-filter: blur(.25rem);
  }
  .cta:not([class*=bg-]) {
    background: var(--clr-bg-01);
  }
  .ttl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.7;
    color: var(--clr-sub-01);
  }
  .txt {
    font-size: .875rem; /* 14px */
    margin-bottom: .75em;
  }
  .btn a {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .footer_cta {
    padding-block: 2.5rem 3.5rem;
  }
  
  /* --- cta_list --- */
  .cta_list {
    .cta {
      padding-block: 1.25rem 1.5rem;
    }
    .ttl {
      margin-bottom: .75em;
    }
    .btn a {
      min-width: 84%;
    }
  }
}

/* .footer_guide
*************************************************** */
.footer_guide {
  padding-block: 3rem;
  background-color: var(--clr-wht);
}

/* --- guide_list --- */
.guide_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  .cont {
    border: solid 1px var(--clr-mono-02);
    border-top: none;
  }
  .ttlarea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 1rem;
    background-color: var(--clr-bg-03);
  }
  .ttl {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: .03em;
  }
  .txtarea {
    padding: 1.25rem;
    > .txt {
      line-height: 1.7;
      letter-spacing: -.01em;
      &:not([class*=mgn-btm]):not(:last-child) {
        margin-bottom: .5em;
      }
    }
  }
  .txtarea.flex div:first-child {
    padding-right: 3.5rem;
    margin-right: 2rem;
    border-right: solid 1px var(--clr-mono-02);
    white-space: nowrap;
  }
  .txt-link {
    margin-left: auto;
  }
}
.guide_list--shipping {
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
  .ttl {
    padding: .25rem;
    border-radius: 3px;
    background-color: var(--clr-bg-02);
    font-size: .75rem; /* 12px */
    line-height: 1.2;
    letter-spacing: normal;
  }
  .txt {
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
    letter-spacing: normal;
    .txt-sm {
      font-size: .75rem; /* 12px */
      font-weight: 400;
      letter-spacing: normal;
    }
  }
}
.guide_list--hour {
  display: flex;
  align-items: center;
  gap: .75rem;
  .ttl {
    padding: 0 .25rem;
    border-radius: 3px;
    background-color: var(--clr-bg-02);
    letter-spacing: normal;
    font-weight: 400;
    font-size: .875rem; /* 14px */
  }
  .txt {
    font-size: .875rem; /* 14px */
    letter-spacing: normal;
  }
}
@media screen and (min-width: 768px) {
  .guide_list {
    .cont {
      &:nth-last-child(2) { grid-column: 1 / 3; }
      &:nth-last-child(1) { grid-column: 3 / 5; }
    }
  }
}
@media screen and (max-width: 1200px) {
  .guide_list {
    .txtarea.flex {
      flex-direction: column;
    }
    .txtarea.flex div:first-child {
      padding-bottom: 1.5rem;
      margin-bottom: 1.5rem;
      border-bottom: solid 1px var(--clr-mono-02);
      padding-right: 0;
      margin-right: 0;
      border-right: none;
    }
  }
}
@media screen and (max-width: 767px) {
  .footer_guide {
    padding-block: 2rem;
  }
  
  /* --- guide_list --- */
  .guide_list {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    .txtarea {
      padding: .75rem 1rem;
    }
    .txt {
      font-size: .929rem; /* 13px */
    }
  }
}

/* .footer
*************************************************** */
.footer {
  padding-block: 5rem 4rem;
  background-color: var(--clr-text-primary);
  font-size: .875rem; /* 14px */
}
@media screen and (max-width: 767px) {
  .footer {
    padding-block: 2.5rem 7rem;
    font-size: .929rem; /* 13px */
  }
}

/* ---fnav --- */
.fnav--menu {
  max-width: 60rem;
  gap: 1rem 2rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .fnav--menu {
    gap: .5rem 1.5rem;
    font-size: .857rem; /* 12px */
  }
}

/* ---fnav_cats --- */
.fnav_cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem 3.5vw;
  margin-block: 2.5rem 2rem;
  padding: 2.5rem 6rem 3rem;
  border-top: 1px solid var(--clr-mono-05);
  border-bottom: 1px solid var(--clr-mono-05);
}
.fnav_cats--ttl {
  font-size: .875rem; /* 14px */
  font-weight: 400;
}
.fnav_cat--ttl {
  margin-bottom: 1rem;
  font-size: 1.125rem; /* 18px */
  letter-spacing: .03em;
}
@media screen and (min-width: 768px) {
  .fnav_cats--ttl {
    grid-column: 1 / 6;
  }
}
@media screen and (max-width: 767px) {
  .footer a {
    text-decoration: underline;
  }
  .fnav_cats--ttl {
    display: none;
  }
  .fnav_cats {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem 1rem;
    margin-block: 2rem 1.5rem;
    padding: 2rem 0 2.5rem;
  }
  .fnav_cat:nth-of-type(1) {
    grid-column: span 3 / span 3;
  }
  .fnav_cat:nth-of-type(2) {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
  }
  .fnav_cat:nth-of-type(3) {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
  }
  .fnav_cat:nth-of-type(4) {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
  }
  .fnav_cat:nth-of-type(5) {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
  }
  .page_top a {
    position: fixed;
    bottom: 6rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--clr-text-primary);
    border-radius: 50%;
    color: var(--clr-wht);
    z-index: 998;
    display: flex;
    justify-content: center;
    align-items: center;
    &::before {
      content: "";
      display: block;
      width: .55rem;
      min-width: 0;
      aspect-ratio: 1 / 1;
      border-top: 2px solid;
      border-right: 2px solid;
      margin-left: .25rem;
      transform: translateX(-.125rem) rotate(-45deg);
      transition: all .4s ease-out;
    }
  }
}

/* --- copyright --- */
.copyright {
  gap: 2em;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .copyright {
    gap: 1em;
  }
}


/* ##############################################################################

    SIDE

############################################################################## */

.container {
  padding-top: 4rem; /* 64px */
  padding-bottom: 5.5rem; /* 88px */
  background-color:  var(--clr-bg-01);
}
.main_side {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 4rem;
}
@media screen and (min-width: 1081px) {
  .main_side {
    .main_column {
      order: 2;
    }
    .side_column {
      order: 1;
    }
  }
}
@media screen and (max-width: 1440px) {
  .main_side {
    gap: 2rem;
  }
}
@media screen and (max-width: 1080px) {
  .container {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
    overflow: hidden;
  }
  .main_side {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.8571428571rem;
  }
  .side_column {
    position: fixed;
    top: 8.55rem;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: calc(100% - 8.35rem);
    margin: 0;
    padding: 1.5rem 7%;
    opacity: 0;
    pointer-events: none;
    overflow: auto;
    background-color: var(--clr-bg-01);
    -webkit-overflow-scrolling: touch;
    transition: all .4s ease-out;;
  }
  .side_column.active {
    opacity: 1;
    pointer-events: auto;
  }
  .side_column.side_column-sm {
    top: 7.5rem;
    height: calc(100% - 7.5rem);
  }
}

.side_section:not(:last-child) {
  margin-bottom: 1.5rem;
}
.side_box {
  padding: 1rem 1.25rem 1.5rem;
  background-color: var(--clr-wht);
}

/* side--ttl
**************************************** */
.side--ttl {
  margin-bottom: .25rem;
}
.side--ttl:not(:has(.en)) {
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--clr-text-placeholder);
}
.side--ttl-02 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1.063rem; /* 17px */
  letter-spacing: .03em;
  color: var(--clr-wht);
  background: var(--clr-text-primary);
}

/* side--delivery
**************************************** */
.side--delivery:not(:last-child) {
  margin-bottom: .75rem;
}
.side--delivery-wrap {
  padding: 1.25rem 0;
  background: var(--clr-bg-03);
}
.side--delivery--inner {
  text-align: center;
}
/* .side--delivery--inner {
  position: relative;
  padding-bottom: 43%;
  height: 0;
  overflow: hidden;
}
.side--delivery--inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.side--delivery--inner body > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  width: 150px !important;
}
.side--delivery--inner img {
  width: 100% !important;
  height: 100% !important;
} */
.side--delivery .ttl {
  margin-bottom: .5rem;
  font-size: .813rem; /* 13px */
  letter-spacing: .03em;
  line-height: 1.4;
  padding-left: 1.25rem;
}
@media screen and (max-width: 1080px) {
  .side--deliverys {
    display: none;
  }
  .side--delivery {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    .ttl {
      height: 28px;
      display: flex;
      align-items: center;
      margin-bottom: .2rem;
    }
  }
  .side--calendar {
    display: none;
  }
  .side--deliverys-sp {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .7rem;
  }
}

/* side--links
**************************************** */
.side--links {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
.side--link {
  position: relative;
  border: 1px solid var(--clr-sub-01);
  background: var(--clr-bg-02);  
  padding: .6rem .875rem;
  padding-right: 1.5rem;
  transition: all .4s ease-out;
  &:hover {
    opacity: .7;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    right: .5rem;
    width: .45rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-top: 2px solid;
    border-right: 2px solid;
    color: #fff;
    rotate: 45deg;
    pointer-events: none;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 1.25rem; /* 20px */
    background: #B5B0AC;
    pointer-events: none;
  }
  .ttl {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .25rem;
    font-size: 1.125rem; /* 18px */
    .icn {
      display: block;
      width: 1.375rem; /* 22px */
      aspect-ratio: 1 / 1;
      min-width: 0;
    }
  }
  .txt {
    font-size: .813rem; /* 13px */
    line-height: 1.7;
  }
}
.side--link-weight {
  background-image: url(../images/common/weight-bnr-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1080px) {
  .side--links {
    grid-template-columns: repeat(2, 1fr);
  }
  .side--links {
    br {
      display: none;
    }
  }
}

/* side--list
**************************************** */
.side--cat:not(:last-child) {
  margin-bottom: .75rem;
}
.side--list li {
  position: relative;
}
.side--list a {
  position: relative;
  display: block;
  padding-top: .6em;
  padding-bottom: .6em;
  font-size: .813rem; /* 13px */
  letter-spacing: .01em;
}
.side--list-img a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .625rem; /* 10px */
  padding-top: .4em;
  padding-bottom: .4em;
}
.side--list:not(.side--list-img) a {
  padding-left: 2rem;
  border-bottom: 1px solid var(--clr-mono-01);
}
.side--list a:hover {
  opacity: 1;
  color: var(--clr-sub-01);
}
.side--list:not(.side--list-img) a::before {
  content: "";
  position: absolute;
  top: 1.25em;
  left: .75rem;
  margin: auto;
  width: .5em;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 99px;
  background-color: var(--clr-sub-01);
}

@media screen and (min-width: 768px) {
  .side--other,
  .side--search_form {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .side--list a {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 1.071rem; /* 15px */
  }
  .side--list.accordion > li > a {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .side--list a::before {
    top: 1.25rem;
  }
  .side--list .arrow {
    width: 3rem;
    height: 3rem;
  }
}

/* side--bnr
**************************************** */
.side--bnr {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 1080px) {
  .side--bnr {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* side--cta
**************************************** */
@media screen and (min-width: 1081px) {
  .side--cta {
    display: none;
  }
  .side--calendar-sp {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .side--cta {
    display: block;
    background-color: var(--clr-wht);
    padding: .714rem;
    margin-bottom: 1rem;
  }
  .side--calendar-sp {
    display: block;
    margin-bottom: 1rem;
  }
}

/* ##############################################################################

    INDEX

############################################################################## */

/* hero
********************************************** */
.hero,
.hero .slick-slide {
  height: 35rem; /* 560px */
}
.hero--cont {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14.895%; /* 286px */
  margin: auto;
  height: fit-content;
}
.hero--txt {
  margin-bottom: .5em;
  font-size: 1.5rem; /* 24px */
  letter-spacing: .03em;
}
.hero--catch {
  font-size: 2.5rem; /* 40px */
  letter-spacing: .03em;
  line-height: 1.6;
}
@media screen and (max-width: 1080px) {
  .hero--cont {
    left: 2rem;
    padding-top: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .hero,
  .hero .slick-slide {
    height: 20rem;
  }
  .hero--txt {
    font-size: .929rem; /* 13px */
  }
  .hero--catch {
    font-size: 1.5rem;
  }
}

/* .home_bnr
*************************************************** */
.home_bnr {
  width: calc(100% + 20vw);
  padding-bottom: 6rem;
}
@media screen and (max-width: 1440px) {
  .home_bnr {
    width: calc(100% + 2vw);
    padding-bottom: 5.5rem;
  }
}
@media screen and (max-width: 767px) {
  .home_bnr {
    width: 100%;
    img {
      width: 100% !important;
    }
  }
}

/* --- bnr_slider --- */
.bnr_slider {
  position: relative;
}
.slick-dots {
  display: flex;
  gap: .625rem; /* 10px */
  li:only-child {
    display: none;
  }
  button {
    width: .5rem;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: 50%;
    background-color: #D9D9D9;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    font-size: 0;
    cursor: pointer;
  }
  .slick-active button { background-color: var(--clr-text-secondary); }
}
.bnr_slider .slick-dots {
  position: absolute;
  bottom: -2.5rem;
}
.slick-prev,
.slick-next {
  position: absolute;
  z-index: 10;
  bottom: -3.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 50%;
  background: var(--clr-wht);
  box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, .10);
  backdrop-filter: blur(.25rem);
  &::before {
    content: "";
    display: block;
    width: .5rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: translateX(-.125rem) rotate(45deg);
    transition: all .4s ease-out;
  }
}
.slick-prev {
  transform: rotate(180deg);
}
@media screen and (min-width: 1631px) {
  .bnr_slider .slick-dots {
    right: 17rem;
    transform: translateX(-100%);
  }
  .slick-prev {
    right: 16.75rem;
  }
  .slick-next {
    right: 13.5rem;
  }
}
@media screen and (min-width: 1081px) and (max-width: 1630px) {
  .bnr_slider .slick-dots {
    right: 22rem;
    transform: translateX(-100%);
  }
  .slick-prev {
    right: 21.75rem;
  }
  .slick-next {
    right: 18.5rem;
  }
}
@media screen and (max-width: 1080px) {
  .bnr_slider .slick-dots {
    left: 0;
    bottom: -2.5rem;
  }
  .slick-prev,
  .slick-next {
    bottom: -3.55rem;
  }
  .slick-prev {
    right: 3.25rem;
  }
  .slick-next {
    right: 0;
  }
}
@media screen and (min-width: 768px) {
  .bnr_slider {
    .slick-track {
      margin-left: 0 !important;
    }
    .slick-slide {
      width: 26rem !important;
      padding-right: 1rem;
    }
  }
}
@media screen and (max-width: 768px) {
  .bnr_slider {
    width: 160%;
    .slick-slide {
      margin: 0 .25rem;
    }
  }
}

/* .home_about
*************************************************** */
.home_about {
  .catch {
    font-size: .875rem; /* 14px */
    letter-spacing: .03em;
    color: var(--clr-text-secondary);
  }
  .about_list .ttl {
    font-size: .875rem; /* 14px */
  }
}
.main_txt {
  line-height: 2;
}

/* --- about_list --- */
.about_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--clr-mono-02, #DFDFE0);
  .cont {
    position: relative;
    padding: .5rem 1.25rem;
    text-align: center;
    border-right: 1px solid var(--clr-mono-02, #DFDFE0);
  }
  .cont:has(.icn) {
    padding: 2rem 1.25rem;
  }
  .cont:has(.post--link):hover .ttl {
    color: var(--clr-sub-01);
  }
  .num {
    counter-increment: number;
    &::before {
      content: counter(number);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3em;
      min-width: 0;
      aspect-ratio: 1 / 1;
      margin-bottom: .75rem;
      border-radius: 50%;
      background-color: var(--clr-sub-01);
      color: var(--clr-wht);
      font-family: "Open Sans", serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-variation-settings: "wdth" 100;
    }
  }
  .icn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.75rem; /* 140px */
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background-color: var(--clr-sub-01);
  }
  .img {
    display: block;
    margin-bottom: 1rem;
  }
  .ttl {
    margin-bottom: .75rem;
    font-size: 1.125rem; /* 18px */
    letter-spacing: .02em;
    line-height: 1.6;
    transition: all .4s ease-out;
  }
  .txt,
  .list {
    font-size: .875rem; /* 14px */
    text-align: left;
  }
}
.about_list-col3 {
  grid-template-columns: repeat(3, 1fr);
}
.about_list-no_line {
  border: none !important;
  .cont {
    border: none !important;
  }
}
@media screen and (max-width: 767px) {
  .home_about {
    .about_list .ttl {
      font-size: 1.0714285714rem;
    }
  }

  .about_list {
    grid-template-columns: repeat(2, 1fr);
    border-left: none;
    .cont {
      padding: 1.25rem 1rem 1.5rem;
      &:nth-child(odd) {
        padding-left: 0;
      }
      &:nth-child(even) {
        padding-right: 0;
        border-right: none;
      }
      &:nth-child(1),
      &:nth-child(2) {
        border-bottom: 1px solid var(--clr-mono-02, #DFDFE0);
      }
    }
    .cont:has(.icn) {
      padding: 1.25rem .57rem 1.5rem;
    }
    .num {
      &::before {
        width: 2.5em;
        margin-bottom: .5rem;
        font-size: .857rem; /* 12px */
      }
    }
    .icn {
      width: 7rem;
    }
    .img {
      margin-bottom: .75rem;
    }
    .ttl {
      line-height: 1.5;
    }
  }
  .about_list-col3 {
    grid-template-columns: repeat(1, 1fr);
    .cont {
      padding-right: 0;
      border-right: none;
    }
  }
  .about_list-no_line {
    gap: .5rem 1rem;
    .cont {
      padding: .75rem 0;
    }
  }
}

/* .home_now / home_news
*************************************************** */
.home_now,
.home_news {
  padding: 2rem 2.25rem 2rem;
  background-color: var(--clr-bg-03);
}
@media screen and (max-width: 767px) {
  .home_now,
  .home_news {
    padding: 1.5rem 1.75rem 1.5rem;
  }
}

/* --- scroll_wrap --- */
.scroll_wrap {
  height: 13rem;
  padding-right: 1rem;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: .25rem;
  }
  &::-webkit-scrollbar-track {
    background-color: var(--clr-bg-01);
    border-radius: .25rem;
    border: none;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--clr-sub-01);
    border-radius: .25rem;
    box-shadow: none;
  }
}
@media screen and (max-width: 767px) {
  .scroll_wrap {
    height: 11rem;
  }
}

/* --- news_list --- */
.news_list {
  .post {
    position: relative;
    padding-block: .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
  }
  .post--ttl {
    font-size: .875rem; /* 14px */
    font-weight: 400;
    line-height: 1.7;
    padding-right: 4rem;
    &::first-line {
      font-weight: 500;
    }
  }
  .post--link::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 2rem;
    width: .5rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-top: 2px solid;
    border-right: 2px solid;
    color: var(--clr-text-secondary);
    rotate: 45deg;
    transition: all .4s ease-out;
  }
  .post--link:hover::after {
    color: var(--clr-sub-01);
  }
}
.news_list-lg {
  .post {
    display: flex;
    gap: 1.25rem;
    padding-block: 1rem;
  }
  .post--date {
    margin-top: .35rem;
    white-space: nowrap;
  }
  .post--ttl {
    font-size: 1rem; /* 16px */
    line-height: 2;
  }
}
@media screen and (max-width: 767px) {
  .news_list {
    .post--ttl {
      font-size: 1rem; /* 14px */
      padding-right: 2rem;
    }
    .post--link::after {
      right: 1rem;
    }
  }
  .news_list-lg {
    .post {
      flex-direction: column;
      gap: .25rem;
    }
    .post--date {
      margin-top: 0;
    }
    .post--ttl {
      line-height: 1.6;
    }
  }
}

/* .home_ranking
*************************************************** */
/* --- product_list --- */
.product_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem 1.5rem;
  .btn a {
    min-width: 0;
    width: 100%;
  }
}
.product_list-col3 {
  grid-template-columns: repeat(3, 1fr);
}
.product {
  position: relative;
  counter-increment: number;
}
.product_list .product--img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product_list .product--img img {
  transition: all .4s ease-out;
}
.product_list .product:hover .product--img img {
  transform: scale(1.05);
}
.product--num {
  display: flex;
  place-content: center;
  gap: .5rem;
  margin-bottom: .75rem;
  &::after {
    content: 'No.'counter(number);
    font-family: "Open Sans";
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .05em;
    color: var(--clr-text-secondary);
  }
}
.product:nth-child(1) .product--num {
  &::after  { color: #B4955D; }
}
.product:nth-child(2) .product--num {
  &::after  { color: #8A93A5; }
}
.product:nth-child(3) .product--num {
  &::after  { color: #AC7F70; }
}
.product--icn {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 3rem;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--clr-secondary-default);
  color: var(--clr-wht);
  font-weight: bold;
  font-size: .5625rem; /* 9px */
  letter-spacing: -.06em;
  &::before {
    content: "";
    display: block;
    width: 1.375rem; /* 22px */
    min-width: 0;
    aspect-ratio: 1 / 1;
    background-image: url(../images/home/wood-icn-ichioshi.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
.product--name {
  margin-bottom: .4rem;
  font-size: .938rem; /* 15px */
  letter-spacing: .05em;
  line-height: 1.6;
}
.product--link::before,
.post--link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.product--link:hover,
.post--link:hover {
  opacity: 1;
  color: var(--clr-sub-01);
}
.product--price {
  font-size: .875rem; /* 14px */
  color: var(--clr-secondary-default);
  font-weight: 500;
}
.product--price-lg {
  font-size: 1.75rem; /* 28px */
  color: var(--clr-secondary-default);
  .txt-sm {
    font-size: 50%;
  }
}
.product--price-xl {
  font-size: 1.75rem; /* 28px */
  color: var(--clr-secondary-default);
  .txt-sm {
    font-size: 50%;
  }
}
.product--txtarea {
  padding: 1rem;
  background-color: var(--clr-wht);
  .txt-link {
    margin-top: .5rem;
    margin-left: auto;
  }
}
.product--txt,
.post--date {
  font-size: .75rem; /* 12px */
  letter-spacing: .03em;
  line-height: 1.7;
}
.post--date {
  color: var(--clr-text-secondary);
}
.post--ttl {
  font-size: 1.5rem; /* 24px */
  line-height: 1.5;
}
.post--content {
  p,
  img,
  table {
    margin-bottom: 2rem;
  }
  h1, h2, h3, h4, h5 {
    margin-bottom: .5em;
    font-family: "Zen Antique", serif;
    font-weight: 400;
    font-style: normal;
  }
  .midashi {
    display: none;
  }
}
.post--table {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .5rem;
  align-items: flex-start;
  :not(:last-child) {
    margin-bottom: .5rem;
  }
  dt {
    background-color: var(--clr-bg-03);
    border-radius: 99px;
    font-size: .875rem; /* 14px */
    text-align: center;
    font-weight: 500;
    transform: translateY(.125em);
  }
}
.post--icn li {
  display: flex;
}
@media screen and (max-width: 767px) {
  .product_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .product_list-col3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .product_list-viewed .product:last-child {
    display: none;
  }
  .product--img {
    width: 100% !important;
  }
  .product--name {
    font-size: .929rem; /* 13px */
  }
  .product--price {
    font-size: 1.0715rem;
  }
  .post--ttl {
    font-size: 1.429rem; /* 20px */
  }
  .post--icn img {
    width: 2.286rem; /* 32px */
  }
}

/* .home_deliveries
*************************************************** */
/* --- deliveries_list ---*/
.deliveries_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  .delivery {
    display: flex;
    flex-direction: column;
  }
  .ttl {
    display: flex;
    align-items: center;
    padding: .25rem 1.5rem;
    font-size: .813rem; /* 13px */
    color: var(--clr-wht);
    background-color: var(--clr-sub-01);
    letter-spacing: .03em;
    font-weight: 500;
    .txt-lg {
      font-size: 1.125rem; /* 18px */
      letter-spacing: .03em;
      padding-right: 1rem;
      white-space: nowrap;
    }
  }
  .cont {
    display: grid;
    grid-template-rows: auto 1fr;
    flex: 1;
    padding: 1.25rem 1.5rem;
    background-color: var(--clr-wht);
  }
  .cont:not([class*=flex-j-]) {
    justify-content: center;
  }
  .txtarea {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: .5rem .75rem;
    border-radius: 3px;
    border: 1px solid var(--clr-mono-02);
    background: var(--clr-bg-white);
    .txt-attention {
      font-size: .75rem; /* 12px */
    }
    a {
      text-decoration: underline;
    }
  }
}
.deliveries_section_line {
  border-top: 1px solid var(--clr-mono-02);
  padding-block: 1.25rem 2.5rem;
  &:last-child {
    padding-bottom: 0;
  }
}
.home_deliveries .deliveries_list .cont {
  padding: 1.25rem .75rem;
}
@media screen and (max-width: 767px) {
  .deliveries_list {
    grid-template-columns: repeat(1, 1fr);
    .txtarea {
      .txt-attention {
        font-size: .857rem; /* 12px */
      }
    }
  }
}

/* .home_sizes
*************************************************** */
/* --- box-attention --- */
.box-attention {
  max-width: 49.35rem;
  border-radius: .25rem;
  border: 2px solid var(--clr-text-placeholder);
  background: var(--clr-wht);
  .ttl {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem 1.5rem;
    color: var(--clr-wht);
    background: var(--clr-secondary-default);
    font-size: 1.125rem; /* 18px */
    letter-spacing: .03em;
    .icn {
      transform: translateY(.125em);
    }
    .txt-sm {
      font-size: 77%; /* 14px */
    }
  }
  .cont {
    display: flex;
    align-items: center;
  }
  .txtarea {
    flex: 1;
    padding: 1rem 1.5rem;
  }
  .imgarea {
    width: 14.75rem;
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  }
}
@media screen and (max-width: 767px) {
  /* --- box-attention --- */
  .box-attention {
    .ttl {
      flex-wrap: wrap;
      padding: .5rem .75rem;
      font-size: .857rem; /* 12px */
      line-height: 1.3;
      white-space: nowrap;
      letter-spacing: -.01em;
      .icn {
        transform: translateY(.0625em);
        display: none;
      }
    }
    .txtarea {
      padding: .75rem 1rem;
    }
    .imgarea {
      display: none;
    }
  }
}

/* --- sizes --- */
.sizes--ttl {
  width: 5.375rem; /* 86px */
  font-size: .875rem; /* 14px */
  font-weight: 500;
  border: solid 1px var(--clr-mono-04);
  text-align: center;
}
.sizes--ttl + .sizes--list { margin-top: .5rem; }
.sizes--list + .sizes--ttl { margin-top: .75rem; }
.sizes--list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .125rem;
  line-height: 1.5;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    border-top: solid 1px var(--clr-mono-03);
  }
  .item {
    position: relative;
    padding-right: .75rem;
    font-size: .75rem; /* 12px */
    letter-spacing: normal;
    background-color: var(--clr-bg-03);
  }
  .delivery {
    position: relative;
    padding-left: .75rem;
    background-color: var(--clr-bg-03);
  }
}

/* --- table-wrap --- */
.table-wrap {
  display: grid;
  grid-template-columns: 49.26rem 1fr;
  gap: 2rem;
  align-items: flex-start;
  .txtarea {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    section {
      padding: 1.5rem;
      border-radius: 3px;
      background: var(--clr-bg-03);
      font-size: .813rem; /* 13px */
      line-height: 1.7;
      letter-spacing: .03em;
    }
    .box {
      padding: .75rem 1rem;
    }
  }
  .txtarea--cont {
    margin-top: 1rem;
  }
}
.table-01,
.post--content table,
.table-02 {
  width: 100%;
  th, td {
    padding: 1em;
    vertical-align: middle;
    border: solid 1px var(--clr-mono-04);
    background-color: var(--clr-wht);
  }
  th {
    line-height: 1.3;
  }
}
.table-01,
.post--content table {
  th {
    background-color: var(--clr-sub-01);
    color: var(--clr-wht);
    a {
      color: var(--clr-wht);
    }
  }
}
.table-02 {
  th {
    background-color: #C9DFD7 !important;
    color: var(--clr-text-primary) !important;
  }
}
.th-20 th,
.post--content table th {
  width: 10.5rem;
}
.charge_table {
  th, td {
    padding: 0 !important;
    font-size: .813rem; /* 13px */
    text-align: center;
    a {
      text-decoration: underline;
    }
  }
  td a{
    letter-spacing: -.01em;
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }
  td a::before {
    content: "¥";
  }
  th.width {
    text-align: right;
    padding-left: 1px !important;
    padding-right: .5rem !important;
    width: 2rem;
  }
  th.length {
    width: 2rem;
  }
  thead {
    position: sticky;
    top: 7.3rem;
    left: 0;
    z-index: 10;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      bottom: -1px;
      z-index: -1;
      background-color: var(--clr-mono-04);
    }
  }
  thead tr:nth-child(1) th:nth-child(1) {
    width: 15%;
  }
  tbody td {
    text-align: right;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}
.weight_table {
  td a::before {
    content: "\7D04"; /* 約 */
  }
  td a::after {
    content: "kg";
  }
}
.haisou2 { background-color: #FFF1B4 !important; }
.haisou3 { background-color: #FFCD9C !important; }
.haisou4 { background-color: #D5E3FC !important; }
.cutsize td { background-color: #EEF2EE !important; }

.sizes-ct9,
.sizes-gomu {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(2)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(2)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(1)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct16,
.sizes-tamo {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(3)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(3)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(2)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct19,
.sizes-merkushipine {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(4)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(4)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(3)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct18,
.sizes-akamatsu {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(5)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(5)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(4)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct20,
.sizes-beitsuga {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(6)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(6)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(5)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct17,
.sizes-nara {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(7)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(7)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(6)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct148,
.sizes-walnut {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(8)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(8)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(7)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct22,
.sizes-kabazakura {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(9)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(9)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(8)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct7,
.sizes-hinoki-mufushi {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(10)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(10)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(9)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct151,
.sizes-hinoki-fushi {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(11)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(11)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(10)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct8,
.sizes-sugi-mufushi {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(12)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(12)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(11)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.sizes-ct152,
.sizes-sugi-fushi {
  .table-01 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(13)) {
    background-color: #564D48;
  }
  .table-02 thead tr:first-child th:not(:nth-of-type(1)):not(:nth-of-type(13)) {
    background-color: #A3B5AE !important;
  }
  tbody td:not(:nth-of-type(12)){
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #000;
      opacity: .2;
    }
  }
}
.ipad {
  .charge_table thead {
    position: relative;
    top: 0;
  }
}

@media screen and (max-width: 1400px) {
  .table-wrap {
    grid-template-columns: repeat(1, 1fr);
    .txtarea {
      grid-template-columns: 2fr 1fr;
    }
  }
  .charge_table {
    th, td {
      font-size: 1rem;
    }
  }
}
@media screen and (max-width: 1080px) {
  .charge_table thead {
    top: 5.75rem;
  }
}
@media screen and (max-width: 767px) {
  .table-wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
    .txtarea {
      grid-template-columns: repeat(1, 1fr);
      order: 1;
    }
  }
  .tablearea-wrap {
    order: 2;
    position: relative;
    display: inline-grid;
  }
  .scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
  }
  .scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: auto;
    border-radius: 5px;
    transition: opacity 0.3s;
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 20px 10px 10px 10px;
    &::before {
      display: inline-block;
      width: 40px;
      height: 40px;
      color: #fff;
      vertical-align: middle;
      text-align: center;
      content: "";
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url(../images/home/sp/scroll-icn.svg);
    }
  }
  .is-active .scroll-hint-icon {
    opacity: 1;
  }
  .scroll-hint-text {
    font-size: 10px;
    color: #fff;
    margin-top: 5px;
  }
  .toggle_ttl,
  .sizes--toggle_ttl {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 1rem;
      width: .5rem;
      min-width: 0;
      aspect-ratio: 1 / 1;
      border-top: 2px solid;
      border-right: 2px solid;
      color: var(--clr-text-secondary);
      rotate: 135deg;
      pointer-events: none;
      transition: all .4s ease-out;
    }
    &.active::before {
      rotate: -45deg;
    }
  }
  .toggle_cont,
  .sizes--toggle_cont {
    display: none;
  }
  .table-01,
  .post--content table,
  .table-02 {
    th, td {
      padding: .75em 1em;
    }
  }
  .th-20 th,
  .post--content table th {
    width: 30%;
  }
  .table-sp-md.table-01,
  .table-sp-md.table-02 {
    th, td {
      padding: .75em 0;
      font-size: .929rem; /* 13px */
    }
  }
  .table-sp-sm.table-01,
  .table-sp-sm.table-02 {
    th, td {
      padding: .25em;
      font-size: .857rem; /* 12px */
    }
  }

  .table-wrap .tablearea {
    overflow-y: auto;
    width: 100%;
    height: 80vh;
    margin: 0 auto;
  }
  .tablearea--ttl {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5rem;
    z-index: 990;
    background-color: var(--clr-bg-01);
    font-size: .95rem;
  }
  .tablearea--ttl .scroll--cap {
    font-size: .7rem;
    position: absolute;
    right: 0;
    top: 1.2rem;
  }
  .charge_table {
    width: 60rem;
    thead {
      top: 0;
      z-index: 999;
      position: relative;
    }
    thead tr:nth-child(1) th:nth-child(1) {
      height: 1.85rem;
      z-index: 15;
    }
    .sp-sticky1,
    .sp-sticky2,
    .sp-sticky3,
    .sp-sticky4,
    .sp-top-sticky {
      position: sticky;
      top: 2.4rem;
      left: 0;
      z-index: 10;
      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: -1px;
        border: 1px solid var(--clr-mono-04);
      }
    }
    &.table-01 {
      position: relative;
      z-index: 888;
      .sp-sticky2 { left: 1.85rem; }
      .sp-sticky3 { left: 5.25rem; }
      .sp-sticky4 { left: 7.25rem; }
    }
    &.table-02 {
      position: relative;
      z-index: 888;
      .sp-sticky2 { left: 1.5rem; }
      .sp-sticky3 { left: 4.3rem; }
      .sp-sticky4 { left: 7.4rem; }
    }
    .sp-top-sticky,
    .sp-top-sticky1 {
      top: 2.4rem;
      left: auto;
    }
    .sp-top-sticky2 {
      top: 4.25rem;
      z-index: 15;
    }
  }

  /* --- table-sp-block --- */
  .table-sp-block,
  .table-sp-block th,
  .table-sp-block td {
    width: 100% !important;
  }
  .table-sp-block th,
  .table-sp-block td {
    display: block;
  }
  .table-sp-block th {
    text-align: left;
  }
  .table-sp-block th,
  .table-sp-block tr:not(:last-child) td {
    border-bottom: none;
  }
}


/* .home_work
*************************************************** */
.work_list {
  display: grid;
  gap: 2.5rem 1.5rem;
}
@media screen and (max-width: 767px) {
  .work_list {
    gap: 2rem 1rem;
  }
}

/* .home_type
*************************************************** */
.type_list {
  display: grid;
  gap: 2.5rem 1.5rem;
}
@media screen and (max-width: 767px) {
  .type_list {
    gap: 2rem 1rem;
  }
}

/* .home_company
*************************************************** */
.home_company {
  padding-block: 4.45rem;
  background-color: var(--clr-blk);
  background-image: url(../images/home/company-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  .ttl-01,
  .ttl-04,
  .txt {
    text-shadow: 0 0 .25rem rgba(0, 0, 0, .8);
  }
  .txtarea > .txt {
    line-height: 2;
  }
}
.txtarea > .txt {
  letter-spacing: .05em;
  &:not([class*=mgn-btm]):not(:last-child) {
    margin-bottom: 2em;
  }
}
@media screen and (max-width: 767px) {
  .home_company {
    padding-block: 4rem;
  }
}


/* ##############################################################################

    SUBPAGE

############################################################################## */

/* .list-head-sort
*************************************************** */
.list-head-sort {
  line-height: 1;
  .list-head-sort--select {
    position: relative;
  }
  .list-head-sort--select::before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .5rem;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--clr-text-secondary);
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  select {
    padding: .25rem 1.15rem .25rem .5rem;
    border: none;
    background-color: var(--clr-wht);
    cursor: pointer;
  }
}

/* .pager
*************************************************** */
.pager {
  margin-top: 4rem;
}
.pager .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}
.pager .pagination a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 50%;
  background: var(--clr-wht);
  box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, .10);
  backdrop-filter: blur(.25rem);
}
.pager .pagination a:hover,
.pager .pagination a.active {
  opacity: 1;
  color: var(--clr-wht);
  background: var(--clr-text-primary);
}
.pager .pagination .pre a::before,
.pager .pagination .next a::before {
  content: "";
  width: .5rem;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-top: 2px solid;
  border-right: 2px solid;
  rotate: 45deg;
  transition: all .4s ease-out;
}
.pager .pagination .pre a::before { rotate: -135deg; }
.pager .pagination .all a {
  width: 8rem;
  height: 2.5rem;
  aspect-ratio: auto;
  border-radius: 999px;
}
@media screen and (max-width: 767px) {
  .pager {
    margin-top: 2rem;
  }
}

/* .img_txt
*************************************************** */
.img_txt {
  display: flex;
  gap: 2.5rem;
  &:not([class*=flex-a-]) {
    align-items: center;
  }
  > * {
    width: 50%;
  }
}
.img_txt-img_sm {
  gap: 1.5rem;
  > *:first-child {
    width: 20%;
  }
  > *:last-child {
    width: calc(80% - 1.5rem);
  }
}
@media screen and (max-width: 767px) {
  .img_txt {
    flex-direction: column;
    gap: 1.5rem;
    > * {
      width: 100%;
    }
  }
  .img_txt-img_sm {
    gap: 1rem;
    flex-direction: row;
    > *:first-child {
      width: 45%;
    }
    > *:last-child {
      width: calc(55% - 1rem);
    }
  }
}

/* product/detail
*************************************************** */
/* --- img_slider-dots --- */
.img_slider-dots .slick-dots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .5rem;
  margin-top: 1rem;
}
.img_slider-dots .pager-img {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .4s ease-out;
}
.img_slider-dots .pager-img:hover,
.img_slider-dots li.slick-active .pager-img {
  border-color: var(--clr-secondary-default);
  &::before { opacity: 1; }
}
@media screen and (max-width: 767px) {
  .img_slider-dots .slick-dots {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --- quantity-wrap --- */
.makeshop-option:not(:last-child) {
  margin-bottom: .5rem;
}
.makeshop-option-label {
  font-weight: 500;
}
.makeshop-quantity {
  padding: .65rem .75rem;
  border: none;
  background-color: var(--clr-wht);
  border: 1px solid var(--clr-mono-02);
  cursor: pointer;
}

/* --- option-wrap --- */
.makeshop-option:not(:last-child) {
  margin-bottom: .5rem;
}
.makeshop-option-label {
  font-weight: 500;
}
.makeshop-option-select {
  width: 100%;
  padding: .75rem;
  border: none;
  background-color: var(--clr-wht);
  border: 1px solid var(--clr-mono-02);
  cursor: pointer;
}

/* --- cat_link --- */
.cat_link {
  padding: 0 .75em;
  color: var(--clr-wht);
  background: var(--clr-sub-01);
  border-radius: .1em;
}
@media screen and (max-width: 767px) {
  .cat_link {
    padding: 0 .5em;
    font-size: .714rem; /* 10px */
  }
}

/* --- cat_link --- */
.favorite .hide {
  display: none;
}
.favorite a {
  display: inline-block;
  border: 1px solid var(--clr-sub-01);
  font-size: 1rem;
  border-radius: .5rem;
  padding: .4rem 2rem;
  min-width: auto;
}
.favorite a::before {
  content: none;
}
.favorite .favorite-off {
  color: var(--clr-sub-01);
  background-color: var(--clr-bg-02);
}
.favorite a:hover {
  color: var(--clr-wht);
  opacity: .8;
}
.favorite .favorite-on {
  color: var(--clr-wht);
  background-color:var(--clr-sub-01);
}

/* --- add-images --- */
.add-images li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--clr-mono-02);
  &:first-child {
    border-top: 1px solid var(--clr-mono-02);
  }
}

/* /basket/
*************************************************** */
.cart-text-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25em;
  font-size: .875rem; /* 14px */
  font-weight: 500;
  text-align: center;
  background: var(--clr-bg-03);
  border-bottom: 1px solid var(--clr-mono-02);
  > div:not(:last-child) {
    border-right: solid 1px var(--clr-bg-01);
  }
}
.cart-product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--clr-mono-02);
  align-items: center;
}

/* --- img name --- */
.cart-table .name-head {
  flex: 1;
}
.cart-table .img {
  width: 10rem;
  padding-right: 2rem;
}
.cart-table .name {
  flex: 1;
  a {
    font-weight: 700;
    text-decoration: underline;
  }
}
.cart-option-area {
  margin-top: .5rem;
  li {
    display: block;
    margin-top: .5rem;
    font-size: .875rem; /* 14px */
  }
}

/* --- qty --- */
.cart-table .qty-head,
.cart-table .qty {
  width: 13rem;
}
.cart-table .qty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.quantity-notification {
  width: 4rem;
  padding: .65rem .75rem;
  background-color: var(--clr-wht);
  border: 1px solid var(--clr-mono-02);
  cursor: pointer;
}
.quantity-btn a {
  min-width: 0;
  padding: .525rem .75rem;
  font-size: .75rem; /* 12px */
  &::before {
    display: none;
  }
}

/* --- price --- */
.cart-table .price-head,
.cart-table .price {
  width: 9rem;
  text-align: center;
  font-weight: 500;
}
.cart-table .price {
  color: var(--clr-secondary-default);
}

/* --- remove --- */
.cart-table .remove-head,
.cart-table .remove {
  width: 5rem;
  text-align: center;
}
.cart-table .remove-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .cart-text-head {
    display: none;
  }
  .cart-product {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1rem 0;
    &:nth-child(2) {
      border-top: 1px solid var(--clr-mono-02);
    }
  }
  
  /* --- img name --- */
  .cart-table .img {
    width: 7rem;
    padding-right: 1.5rem;
  }
  
  /* --- qty --- */
  .cart-table .qty {
    width: 100%;
    margin-top: .75rem;
    order: 4;
  }
  .cart-table .qty {
    justify-content: flex-end;
  }
  .quantity-btn a {
    padding: .6125rem .75rem;
  }
  
  /* --- price --- */
  .cart-table .price {
    order: 3;
    width: 100%;
    margin-top: .25rem;
    text-align: right;
    font-size: 1.286rem; /* 18px */
  }
  
  /* --- remove --- */
  .cart-table .remove-sp {
    width: 100%;
    margin-top: .5rem;
  }
  .cart-table .remove {
    display: none;
  }
  .cart-table .remove-sp {
    display: block;
    text-align: right;
    text-decoration: underline;
    order: 5;
  }
}