/* Google Fonts 読み込み
------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Serif+JP:wght@200..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");

/* 設定
------------------------------------------*/
:root {
  /* サイトカラー */
  /* カラーコード変換ツール | https://tech-unlimited.com/color.html */
  --bg-color: 255 255 255; /* 全体の背景カラー */
  --text-color: 17 17 17; /* 全体のテキストカラー */
  --subheader-bg-color: 17 17 17; /* サブヘッダーの背景カラー(一部ボタンにも適用) */
  --subheader-text-color: 255 255 255; /* サブヘッダーのテキストカラー(一部ボタンにも適用) */
  --footer-bg-color: 250 250 250; /* フッターの背景カラー */
  --footer-text-color: 17 17 17; /* フッターのテキストカラー */

  --image-title-color: 17 17 17; /* カテゴリページ/商品一覧ページタイトルのテキストカラー */
  --sub-bg-color: 250 250 250; /* サブ背景カラー */
  --sub-text-color: 153 153 153; /* サブテキストカラー */
  --notice-color: 179 15 13; /* 注意書きなどのカラー */

  /* 各コンテンツカラー */
  --promo-block-text-color: 17 17 17; /* メガメニュー内のプロモブロックのテキストカラー */
  --mv-text-color: 17 17 17; /* メインイメージのテキストカラー(画像の上に乗る時のみ適用) */
  --bgimage-text-color: 17 17 17; /* 画像背景バナーのテキストカラー */
  --youtube-text-color: 255 255 255; /* youtube動画のテキストカラー */

  /* サイト全体の最大横幅 */
  --max-width: 1680px;

  /* マージン */
  --margin-desktop: 90px;
  --margin-1200: 78px;
  --margin-tablet: 66px;
  --margin-mobile: 54px;

  /* パディング */
  --padding-desktop: 50px;
  --padding-1200: 40px;
  --padding-tablet: 30px;
  --padding-mobile: 22px;

  /* 画像の間隔(基準値) */
  --image-gap-hor-desktop: 30px; /* 横の間隔 */
  --image-gap-ver-desktop: 40px; /* 縦の間隔 商品一覧などで使用 */

  /* 本文 */
  --body-font-family: "Cormorant Infant", "Noto Serif JP", serif;
  --body-font-weight-normal: 300;
  --body-font-weight-bold: 600;
  --body-line-height: 1.8;
  --body-letter-spacing: 0.1em;

  /* 見出し */
  --head-font-family: "Cormorant Infant", "Zen Old Mincho", serif;
  --head-font-weight: 300;

  --head-font-size-desktop: 2.6rem;
  --head-font-size-1200: 2.5rem;
  --head-font-size-tablet: 2.4rem;
  --head-font-size-mobile: 2.2rem;

  --head-line-height-desktop: 1.4;
  --head-line-height-1200: 1.36;
  --head-line-height-tablet: 1.32;
  --head-line-height-mobile: 1.28;

  --head-letter-spacing: 0.2em;

  /* ロゴ */
  --logo-height: 30px;
  --logo-height-mobile: 22px;

  /* 一部パーツの透明度 */
  --border-opacity: 0.08; /* 罫線の透明度 */
  --input-border-opacity: 0.12; /* inputの罫線の透明度 */
  --input-border-focus-opacity: 0.4; /* inputの罫線の透明度(focus) */
  --overlay-opacity: 0.3; /* モーダル背景などの透明度 */

  /* その他 */
  --icon-stroke-width: 1.2; /* アイコンの線の太さ */
  --image-border-radius: 4px; /* 画像の角丸 */
  --input-border-radius: 4px; /* inputの角丸 */
  --item-list-image-ratio: 1 / 1; /* アイテムリストの画像の縦横比率 1/1 2/3 3/4 など  */
  --page-title-scale: 1.2; /* ページタイトルの倍率 見出しフォントサイズ基準 */
  --category-page-title-scale: 1.5; /* カテゴリページ/商品一覧ページタイトルの倍率 見出しフォントサイズ基準 */

  /* 以下変更しないでください */
  --vw: 1vw;
  --header-height: 0px;
  --header-group-height: 0px;
  --breadcrumbs-height: 0px;
  --looptext-duration: 500s;
}

html {
  --margin: var(--margin-desktop);
  --padding: var(--padding-desktop);
  --image-gap-hor: calc(var(--image-gap-hor-desktop) * 1);
  --image-gap-ver: calc(var(--image-gap-ver-desktop) * 1);
  --head-font-size: var(--head-font-size-desktop);
  --head-line-height: var(--head-line-height-desktop);
  --item-list-num: 4;

  @media screen and (max-width: 1200px) {
    --margin: var(--margin-1200);
    --padding: var(--padding-1200);
    --image-gap-hor: calc(var(--image-gap-hor-desktop) * 0.85);
    --image-gap-ver: calc(var(--image-gap-ver-desktop) * 0.85);
    --head-font-size: var(--head-font-size-1200);
    --head-line-height: var(--head-line-height-1200);
    --item-list-num: 3;
  }

  @media screen and (max-width: 992px) {
    --margin: var(--margin-tablet);
    --padding: var(--padding-tablet);
    --image-gap-hor: calc(var(--image-gap-hor-desktop) * 0.7);
    --image-gap-ver: calc(var(--image-gap-ver-desktop) * 0.7);
    --head-font-size: var(--head-font-size-tablet);
    --head-line-height: var(--head-line-height-tablet);
    --item-list-num: 3;
  }

  @media screen and (max-width: 768px) {
    --margin: var(--margin-mobile);
    --padding: var(--padding-mobile);
    --image-gap-hor: calc(var(--image-gap-hor-desktop) * 0.55);
    --image-gap-ver: calc(var(--image-gap-ver-desktop) * 0.55);
    --head-font-size: var(--head-font-size-mobile);
    --head-line-height: var(--head-line-height-mobile);
    --item-list-num: 3;
  }

  @media screen and (max-width: 600px) {
    --image-gap-hor: calc(var(--image-gap-hor-desktop) * 0.4);
    --image-gap-ver: calc(var(--image-gap-ver-desktop) * 0.4);
    --item-list-num: 2;
  }

  scroll-behavior: inherit !important;
  font-size: 62.5%;
  scroll-padding-top: var(--header-group-height);
  background: rgb(var(--bg-color));
}

/* base
------------------------------------------*/
body {
  overflow-x: clip;
  min-height: 100vh;
  color: rgb(var(--text-color));
  font-size: 1.4rem;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight-normal);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-break: anywhere;
  background: none;
}

h1,
h2,
h3,
.mv2 .title,
.looptext p,
.bgimage .title,
.youtube .title {
  font-size: var(--head-font-size);
  font-weight: var(--head-font-weight);
  font-family: var(--head-font-family);
  line-height: var(--head-line-height);
  letter-spacing: var(--head-letter-spacing);
}

.information h2,
.bgimage .title,
.youtube .title {
  text-indent: var(--head-letter-spacing);
}

@media screen and (min-width: 993px) {
  .type-center .mv2 .title {
    text-indent: var(--head-letter-spacing);
  }
}

@media screen and (max-width: 992px) {
  .type-sp-center .mv2 .title,
  .type-sp-center2 .mv2 .title {
    text-indent: var(--head-letter-spacing);
  }
}

a {
  color: currentColor;
  transition: all 0.3s ease;
}

strong {
  font-weight: var(--body-font-weight-bold);
}

img,
svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  stroke-width: var(--icon-stroke-width);

  color: currentColor;
  fill: currentColor;
}

label,
label.ec-label {
  margin: 0;
  font-size: 1.4rem !important;
  font-weight: var(--body-font-weight-normal) !important;
}

label[for] {
  cursor: default;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  font-family: var(--body-font-family), sans-serif;
  font-weight: var(--body-font-weight-normal);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-indent: var(--body-letter-spacing);
  transition: all 0.3s ease;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
.ec-input input,
.ec-birth input,
.ec-select input,
.ec-telInput input,
.ec-zipInput input,
.ec-numberInput input,
.ec-halfInput input,
.ec-input select,
.ec-birth select,
.ec-select select,
.ec-telInput select,
.ec-zipInput select,
.ec-numberInput select,
.ec-halfInput select,
.ec-input textarea,
.ec-birth textarea,
.ec-select textarea,
.ec-telInput textarea,
.ec-zipInput textarea,
.ec-numberInput textarea,
.ec-halfInput textarea {
  outline: none;
  display: block;
  margin: 0;
  padding: 10px;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: auto !important;
  color: rgb(var(--text-color)) !important;
  font-size: 1.4rem !important;
  font-weight: var(--body-font-weight-normal) !important;
  font-family: var(--body-font-family), sans-serif !important;
  line-height: 1.5 !important;
  letter-spacing: var(--body-letter-spacing) !important;
  background: rgb(var(--bg-color)) !important;
  border: rgb(var(--text-color) / var(--input-border-opacity)) 1px solid !important;
  border-radius: var(--input-border-radius) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  appearance: none;

  &:focus {
    border: rgb(var(--text-color) / var(--input-border-focus-opacity)) 1px solid;
  }

  &::placeholder {
    opacity: 0.3;
    color: rgb(var(--text-color));
  }

  .error & {
    border: rgb(var(--notice-color) / 0.5) 1px solid !important;
  }
}

.ec-halfInput {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;

  input {
    width: 40% !important;
    margin: 0 0 5px 0 !important;
  }

  .ec-errorMessage {
    width: 40% !important;
  }
}

select,
.ec-select select,
.ec-birth select {
  padding: 10px 32px 10px 10px !important;
  width: auto !important;
  background: linear-gradient(45deg, transparent 50%, rgb(var(--bg-color)) 50%) no-repeat top calc(50% - 1.5px) right 17px / 5px 5px, linear-gradient(-45deg, transparent 50%, rgb(var(--bg-color)) 50%) no-repeat top calc(50% - 1.5px) right 12px / 5px 5px,
    linear-gradient(45deg, transparent 50%, rgb(var(--text-color)) 50%) no-repeat top 50% right 17px / 5px 5px, linear-gradient(-45deg, transparent 50%, rgb(var(--text-color)) 50%) no-repeat top 50% right 12px / 5px 5px !important;
  background-color: rgb(var(--bg-color)) !important;

  @supports (-moz-appearance: none) {
    letter-spacing: 0 !important;
  }
}

.ec-select {
  margin: 0;
}

.ec-birth {
  display: flex;
  align-items: center;
  gap: 12px;

  span {
    margin: 0;
  }
}

.ec-radio {
  & > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .error & {
      border: none;
      background: none;
    }

    input {
      margin: 0 6px 0 0;
    }

    span {
      font-weight: var(--body-font-weight-normal);
    }

    label {
      .error & {
        border: none;
        background: none;
      }
    }
  }

  #product_review_recommend_level {
    flex-direction: row;

    label {
      inset: auto;
    }
  }
}

.ec-checkbox {
  label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;

    .error & {
      border: none;
      background: none;
    }
  }

  input {
    margin: 0 6px 0 0;
  }

  .form-check {
    display: flex;
    justify-content: center;
    align-items: center;

    input {
      float: none;
      margin: 0 6px 0 0;
    }
  }
}

.ec-zipInput {
  display: flex;
  align-items: center;
  gap: 1rem;

  span {
    margin: 0;
    padding: 0;
  }

  input {
    max-width: 15rem !important;
  }

  .ec-zipInputHelp {
    display: flex;
    margin: 0;
    line-height: var(--body-line-height);

    .ec-zipInputHelp__icon {
      display: none;
    }

    a {
      margin: 0 0 0 1rem;
      font-size: 1.2rem;

      span {
        color: rgb(var(--text-color));
        text-decoration: underline;
      }
    }
  }
}

.ec-reportHeading {
  margin: 0 0 3rem 0;
  border: none;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    font-size: 2rem;
    font-weight: var(--head-font-weight);

    @media screen and (max-width: 768px) {
      font-size: 1.6rem;
    }
  }
}

.ec-reportDescription {
  margin: 0 0 3rem 0;
  font-size: 1.4rem;
  line-height: var(--body-line-height);
}

.ec-errorMessage {
  margin: 0 !important;
  color: rgb(var(--notice-color)) !important;
  font-size: 1.1rem !important;
  font-weight: var(--body-font-weight-normal) !important;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
}

.is-keyboard {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  input[type="checkbox"]:focus-visible,
  input[type="radio"]:focus-visible,
  select:focus-visible {
    outline: #fff 1px solid !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgb(0 123 255 / 0.5) !important;
    border-radius: 4px;
  }

  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination-bullet {
    &:focus {
      outline: #fff 1px solid !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 0 2px rgb(0 123 255 / 0.5) !important;
      border-radius: 4px;
    }
  }
}

.hidden {
  display: none;
}

.fancybox-bg {
  background: #000;
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.8;
}

.ec-link {
  color: rgb(var(--text-color));
  text-decoration: underline;
}

.text-danger {
  color: rgb(var(--notice-color));
}

.ec-para-normal,
.ec-para-nomal {
  margin: 0 auto 2rem auto !important;
  width: 100%;
  max-width: 700px;
  font-size: 1.4rem;
  font-weight: var(--body-font-weight-normal);
  text-align: center;
}

.ec-borderedDefs {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 5rem auto 0 auto;
  width: 100%;
  /* max-width: 700px; */
  border: none;

  dl {
    display: block;
    align-items: flex-start;
    padding: 0;
    border: none;

    dt {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 0 0 1rem 0;
      padding: 0;
      font-weight: var(--body-font-weight-normal);
      width: 100%;

      .ec-label {
        font-weight: var(--body-font-weight-bold) !important;
      }

      .ec-required {
        margin: 0;
        color: rgb(var(--notice-color));
        font-size: 1rem;
      }
    }

    dd {
      margin: 0;
      width: 100%;
      line-height: var(--body-line-height);

      p {
        margin: 1rem 0 0 0;
        font-size: 1.1rem;
      }

      &:has(.ec-zipInput),
      &:has(#entry_email_second),
      &:has(#entry_plain_password_second) {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
    }
  }
}

.ec-registerRole__actions,
.ec-RegisterRole__actions {
  margin: 5rem 0 0 0;
  padding: 0;

  .ec-checkbox {
    margin: 0 0 2rem 0;

    label {
      font-size: 1.2rem !important;
    }
  }
}

.ec-layoutRole {
  display: block;
  background: none;

  .ec-debugModeAlert + & {
    margin: 0;
  }

  .ec-layoutRole__contents {
    opacity: 0;
    display: block;
    margin: 0 auto var(--margin) auto;
    padding: 0 var(--padding);
    max-width: var(--max-width);
    transition: opacity 0.6s ease;

    &.viewed {
      opacity: 1;
    }

    .front_page & {
      margin: 0;
      padding: 0;
      max-width: 100%;
    }

    .ec-layoutRole__main {
      .front_page & {
        & > * {
          &.bm0:last-child {
            margin-block-end: 0 !important;
          }
        }
      }

      .ec-role,
      .ec-searchnavRole,
      .ec-shelfRole,
      .ec-productRole,
      .ec-contactRole,
      .ec-contactConfirmRole,
      .ec-contactCompleteRole,
      .ec-cartRole,
      .ec-cartCompleteRole,
      .ec-orderRole,
      .ec-registerRole,
      .ec-registerCompleteRole,
      .ec-forgotRole,
      .ec-forgetCompleteRole,
      .ec-mypageRole,
      .ec-navlistRole,
      .ec-withdrawRole,
      .ec-withdrawConfirmRole,
      .ec-withdrawCompleteRole {
        margin: 0;
        padding: 0;
        max-width: 100%;
        color: rgb(var(--text-color));
        font-size: 1.4rem;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight-normal);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);

        .ec-off3Grid {
          display: block;
        }

        .ec-off1Grid__cell,
        .ec-off2Grid__cell,
        .ec-off3Grid__cell {
          margin: 0 auto;
          width: 100%;
          max-width: 700px;
        }

        .ec-off4Grid__cell {
          display: flex;
          flex-direction: row-reverse;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          margin: 0 auto;
          width: 100%;
          max-width: 700px;

          & > * {
            margin: 0 !important;
          }
        }
      }
    }
  }
}

.ec-pageHeader,
.ec-categoryHeader {
  margin: calc(var(--breadcrumbs-height) * -1) 0 0 0;
  padding: var(--breadcrumbs-height) 0 0 0;

  @media screen and (max-width: 992px) {
    margin: 0;
    padding: 0;
  }

  h1 {
    margin: 0 !important;
    padding: var(--margin) 0 !important;
    font-size: calc(var(--head-font-size) * var(--page-title-scale));
    font-weight: var(--head-font-weight);
    font-family: var(--head-font-family);
    line-height: var(--head-line-height);
    letter-spacing: var(--head-letter-spacing);
    text-indent: var(--head-letter-spacing);
    text-align: center;
    border: none;
  }
}

.ec-categoryHeader {
  margin: calc(var(--breadcrumbs-height) * -1) calc(50% - var(--vw) * 50) 2rem calc(50% - var(--vw) * 50);
  width: calc(var(--vw) * 100);

  @media screen and (max-width: 992px) {
    margin: 0 calc(50% - var(--vw) * 50) 2rem calc(50% - var(--vw) * 50);
  }

  &.title-image-0 {
    background: none !important;
  }

  &.title-image-1 {
    background: no-repeat center center / cover;
  }

  .ec-categoryHeader-inner {
    padding: calc(var(--margin) * 1.5) var(--padding);

    @media screen and (max-width: 992px) {
      padding: calc(var(--margin) * 1) var(--padding);
    }
  }

  h1 {
    padding: 0 !important;
    color: rgb(var(--image-title-color));
    font-size: calc(var(--head-font-size) * var(--category-page-title-scale));
  }

  p {
    margin: 2rem 0 0 0;
    color: rgb(var(--image-title-color));
    font-size: 1.3rem;
    text-align: center;
  }
}

.ec-shelfGrid {
  display: grid;
  grid-template-columns: repeat(var(--item-list-num), 1fr);
  gap: var(--image-gap-ver) var(--image-gap-hor);
  margin: 0;

  .ec-shelfGrid__item {
    position: relative;
    margin: 0;
    padding: 0 !important;
    width: 100%;

    a {
      display: block;

      @media (hover: hover) {
        &:hover {
          img {
            scale: 1.05;
          }
        }
      }
    }

    .ec-shelfGrid__item-image {
      overflow: clip;
      margin: 0 0 1.2rem 0;
      border-radius: var(--image-border-radius);

      img {
        aspect-ratio: var(--item-list-image-ratio);
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
      }
    }

    .soldout {
      position: absolute;
      inset: 6px 6px auto auto;
      padding: 5px 8px;
      color: #fff;
      font-size: 0.9rem;
      line-height: 1;
      background: rgb(var(--notice-color));
      border-radius: 2px;
      z-index: 1;
    }

    p {
      line-height: 1.5;
    }

    .price02-default {
      margin: 0.4rem 0 0 0;
    }

    form,
    .ec-productRole__btn {
      display: none;
    }
  }
}

.ec-debugModeAlert {
  position: fixed;
  inset: 10px 10px auto auto;
  width: auto;
  height: auto;
  background: none !important;
  transition: all 0.3s 2s ease;
  z-index: 99999;

  .loaded & {
    opacity: 0;
    translate: 100% 0;
    visibility: hidden;
  }

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    color: #fff;
    font-size: 1.2rem;
    background: rgb(var(--notice-color));
    border-radius: 10px;

    img {
      width: 16px;
    }
  }
}

/* btn
------------------------------------------*/
.btn-arrow {
  position: relative;
  margin-block-start: 3rem;

  a {
    position: relative;
    margin-inline: 0;
    padding: 0 32px 0 0;
    font-size: 1.2rem;

    &:before {
      content: "";
      position: absolute;
      inset: 50% 0 auto auto;
      width: 22px;
      height: 22px;
      border: rgb(var(--text-color)) 1px solid;
      border-radius: 50%;
      translate: 0 -50%;
      transition: all 0.2s ease;
    }

    &:after {
      content: "";
      position: absolute;
      inset: 50% 3px auto auto;
      width: 16px;
      height: 16px;
      mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-right%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
        no-repeat right center / 16px;
      -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-right%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
        no-repeat right center / 16px;
      background: rgb(var(--text-color));
      translate: 0 -50%;
      transition: all 0.3s ease;
    }

    @media (hover: hover) {
      &:hover {
        &:before {
          inset: 50% -2px auto auto;
          width: 26px;
          height: 26px;
        }
      }
    }
  }
}

.btn-image {
  position: relative;
  margin-block-start: 3rem;
  margin-inline: auto;
  z-index: 1;

  a {
    overflow: hidden;
    display: flex;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 12px 20px 12px 24px;
    min-width: 180px;
    color: rgb(var(--subheader-text-color));
    font-size: 1.2rem;
    border-radius: 100px;
    transition: all 0.3s ease;

    &:before {
      content: "";
      opacity: 1;
      position: absolute;
      inset: 0;
      background: rgb(var(--subheader-bg-color));
      border-radius: 100px;
      box-shadow: rgb(0 0 0 / var(--border-opacity)) 0px 20px 25px -5px, rgb(0 0 0 / 0.04) 0px 10px 10px -5px;
      transition: all 0.3s ease;
      z-index: -1;
    }

    &:after {
      content: "";
      width: 18px;
      height: 18px;
      mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-right%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
        no-repeat right center / 18px;
      -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-right%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
        no-repeat right center / 18px;
      background: rgb(var(--subheader-text-color));
      transition: all 0.2s ease;
    }

    @media (hover: hover) {
      &:hover {
        &:before {
          opacity: 0.75;
        }
        &:after {
          translate: 5px 0;
        }
      }
    }

    @media screen and (max-width: 768px) {
      gap: 4px;
      padding: 10px 16px 10px 20px;
      min-width: 140px;

      &:after {
        translate: 3px 0;
      }
    }
  }
}

.btn-normal {
  position: relative;
  margin-block-start: 3rem;
  text-align: center;
  z-index: 1;
}

.btn-normal a,
.btn-normal span,
.ec-blockBtn,
.ec-blockBtn--action,
.ec-blockBtn--cancel,
.ec-inlineBtn,
.ec-inlineBtn--action,
.ec-inlineBtn--cancel {
  &,
  &:hover,
  &:focus,
  &:active,
  &:disabled {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    position: relative;
    margin: 0 auto !important;
    padding: 12px 5px;
    min-width: 180px;
    width: auto;
    height: auto;
    color: rgb(var(--text-color));
    font-size: 1.2rem;
    font-weight: var(--body-font-weight);
    text-align: center;
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    text-indent: var(--body-letter-spacing);
    background: none;
    border: rgb(var(--text-color)) 1px solid;
    border-radius: 100px;
    transition: all 0.3s ease;

    &.ec-blockBtn--cancel,
    &.ec-inlineBtn--cancel {
      color: rgb(var(--bg-color));
      background: rgb(var(--text-color));
    }

    &:disabled {
      opacity: 0.5;
    }

    @media (hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }
}

/* breadcrumbs
------------------------------------------*/
.breadcrumbs {
  opacity: 0;
  position: relative;
  transition: opacity 0.6s ease;
  z-index: 1;

  .loaded & {
    opacity: 1;
  }

  @media screen and (max-width: 992px) {
    display: none;
  }

  .breadcrumbs-inner {
    margin: 0 auto;
    padding: 1.5rem var(--padding);
    max-width: var(--max-width);

    ul {
      display: flex;
      flex-wrap: wrap;
      font-size: 1rem;

      li {
        display: flex;

        &:not(:last-child) {
          &:after {
            content: "/";
            margin: 0 8px;
          }
        }

        #page_product_list & {
          color: rgb(var(--image-title-color));
        }
      }
    }
  }
}

/* drawer
------------------------------------------*/
.drawer-bg {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--text-color) / var(--overlay-opacity));
  transition: all 0.3s ease;
  z-index: 10002;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
  }
}

.drawer {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 90%;
  max-width: 440px;
  height: 100dvh;
  background: rgb(var(--bg-color));
  border-radius: 0 20px 20px 0;
  box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;
  translate: -100% 0;
  transition: all 0.3s ease, height 0s;
  z-index: 10003;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    translate: 0;
  }

  .drawer-close {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 70px;

    a {
      display: grid;
      place-items: center start;
      position: relative;
      width: 100%;
      height: 44px;

      svg {
        width: 24px;
        height: 24px;
      }
    }
  }

  .drawer-main {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: calc(100% - 70px);

    @media (hover: hover) {
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-track {
        width: 100%;
        background: rgb(var(--text-color) / var(--border-opacity));
      }
      &::-webkit-scrollbar-thumb {
        width: 100%;
        background: rgb(var(--text-color) / var(--overlay-opacity));
      }
    }

    &:has(+ .drawer-bottom .drawer-sns) {
      height: calc(100% - 140px);
    }

    .drawer-menu {
      overflow: hidden;
      position: absolute;
      inset: 0 0 auto 0;
      padding: 0 24px 32px 24px;
      transition: all 0.2s ease, height 0s;

      &[aria-hidden="false"] {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
      }

      &[aria-hidden="true"] {
        visibility: hidden;
        opacity: 0;
        translate: 50px 0;
        height: 0 !important;
        transition: none;
      }

      .drawer-back {
        a {
          display: block;
          position: relative;
          padding: 16px 0 16px 32px;

          svg {
            position: absolute;
            inset: 50% auto 0 -3px;
            width: 20px;
            height: 20px;
            translate: 0 -50%;
            rotate: 180deg;
          }
        }
      }

      .menu {
        li {
          position: relative;
          border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

          a:first-child {
            display: block;
            padding-block: 16px;

            &:has(+ a.arrow) {
              padding-inline-end: 44px;
            }
          }

          a.arrow {
            display: grid;
            place-items: center;
            position: absolute;
            inset: 50% -12px 0 auto;
            width: 44px;
            height: 44px;
            translate: 0 -50%;

            svg {
              width: 20px;
              height: 20px;
            }
          }
        }
      }

      .submenu {
        margin: 3rem 0 0 0;
        font-size: 1.2rem;

        .submenu + & {
          margin: 1.5rem 0 0 0;
        }

        a,
        span {
          display: block;
          padding-block: 5px;
        }

        ul {
          position: relative;
          margin-block: 12px;
          padding-inline-start: 20px;
          font-size: 1.2rem;
          border-inline-start: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

          a {
            padding-block: 3px;
          }
        }
      }

      .drawer-search {
        form {
          display: flex;
          position: relative;
          margin-block-start: 24px;
          padding-inline: 3px;
          border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
          border-radius: 100px;

          input {
            padding: 12px !important;
            margin: 0 !important;
            width: calc(100% - 44px);
            background: none !important;
            border: none !important;
          }

          button {
            display: grid;
            place-items: center;
            position: relative;
            width: 44px;
            height: 44px;

            svg {
              width: 22px;
              height: 22px;
            }
          }
        }
      }
    }
  }

  .drawer-bottom {
    display: none;
    margin-block-start: auto;

    &:has(*) {
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 24px;
      height: 70px;

      &:before {
        content: "";
        opacity: 0.1;
        position: absolute;
        inset: 0 0 auto 0;
        width: 100%;
        height: 1px;
        background: rgb(var(--text-color));
      }
    }

    .drawer-sns {
      display: flex;
      align-items: center;
      gap: 10px;

      a {
        display: block;

        svg {
          width: 18px;
          height: 18px;
        }
      }
    }

    .gtranslate {
      display: flex;
      margin: 0 0 0 auto;
      font-size: 1.3rem;

      .gtranslate_wrapper {
        display: flex;
        align-items: center;
        gap: 12px;

        a {
          opacity: 0.5;
          position: relative;

          &.gt-current-lang {
            opacity: 1;
            font-weight: var(--bodyFontWeightNormal);
          }

          &:before {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            width: 100%;
            height: 1px;
            background: rgb(var(--subheader-text-color));
            scale: 0 1;
            transform-origin: right top;
            transition: scale 0.3s ease;
          }

          @media (hover: hover) {
            &:hover:before {
              scale: 1 1;
              transform-origin: left top;
            }
          }
        }
      }
    }

    #i18 {
      margin-inline-start: auto;
    }
  }
}

/* cartdrawer
------------------------------------------*/
.cartdrawer-bg {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--text-color) / var(--overlay-opacity));
  transition: all 0.3s ease;
  z-index: 10002;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
  }
}

.cartdrawer {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  width: 90%;
  max-width: 440px;
  height: 100dvh;
  background: rgb(var(--bg-color));
  border-radius: 20px 0 0 20px;
  box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;
  translate: 100% 0;
  transition: all 0.3s ease, height 0s;
  z-index: 10003;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    translate: 0;
  }

  .cartdrawer-close {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 70px;

    a {
      display: grid;
      place-items: center start;
      position: relative;
      width: 100%;
      height: 44px;

      svg {
        width: 24px;
        height: 24px;
      }
    }
  }

  .cartdrawer-main {
    padding: 0 24px 32px 24px;

    .cartdrawer-header {
      display: flex;
      justify-content: space-between;
      padding: 16px 0;
      border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

      .quantity {
        font-size: 1.3rem;

        span.suffix {
          margin: 0 0 0 3px;
          font-size: 1.1rem;
        }
      }

      .price {
        font-size: 1.3rem;
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 32px 0;

      li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.2rem;

        .image {
          width: 80px;
        }

        .text {
          .name {
            font-size: 1.3rem;
          }

          .price {
            .tax {
              margin: 0 0 0 3px;
              font-size: 0.9rem;
            }
          }

          .quantity {
            margin: 4px 0 0 0;
          }
        }
      }
    }

    p {
      margin: 32px 0;
      font-size: 1.3rem;
      text-align: center;
    }
  }
}

/* subheader
------------------------------------------*/
.subheader {
  opacity: 0;
  color: rgb(var(--subheader-text-color));
  font-size: 1.1rem;
  line-height: 1.2;
  background: rgb(var(--subheader-bg-color));
  transition: opacity 0.6s ease;

  --subheader-height: 48px;

  @media screen and (max-width: 1200px) {
    --subheader-height: 44px;
  }
  @media screen and (max-width: 992px) {
    --subheader-height: 40px;
  }

  .loaded & {
    opacity: 1;
  }

  .subheader-inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    margin-inline: auto;
    padding: 0 var(--padding);
    max-width: var(--max-width);
    height: var(--subheader-height);

    @media screen and (max-width: 992px) {
      grid-template-columns: 1fr;
    }

    .subheader-left {
      display: flex;

      @media screen and (max-width: 992px) {
        display: none;
      }
    }

    .subheader-right {
      display: flex;
      justify-content: flex-end;

      @media screen and (max-width: 992px) {
        display: none;
      }
    }

    .subheader-sns {
      display: flex;
      align-items: center;
      gap: 18px;

      a {
        display: block;
        line-height: 1;

        svg {
          width: 18px;
          height: 18px;
        }

        @media (hover: hover) {
          &:hover {
            opacity: 0.6;
          }
        }
      }
    }

    .subheader-menu {
      display: flex;
      align-items: center;
      gap: 12px;

      a {
        display: block;
        position: relative;

        &:before {
          content: "";
          position: absolute;
          inset: auto 0 0 0;
          width: 100%;
          height: 1px;
          background: rgb(var(--subheader-text-color));
          scale: 0 1;
          transform-origin: right top;
          transition: scale 0.3s ease;
        }

        @media (hover: hover) {
          &:hover:before {
            scale: 1 1;
            transform-origin: left top;
          }
        }
      }
    }

    .gtranslate {
      display: flex;

      .subheader-menu + & {
        position: relative;
        margin: 0 0 0 20px;
        padding: 0 0 0 20px;

        &:before {
          content: "";
          position: absolute;
          inset: 50% auto auto 0;
          width: 1px;
          height: 12px;
          background: currentColor;
          translate: 0 -50%;
        }
      }

      .gtranslate_wrapper {
        display: flex;
        align-items: center;
        gap: 12px;

        a {
          opacity: 0.5;
          position: relative;

          &.gt-current-lang {
            opacity: 1;
            font-weight: var(--bodyFontWeightNormal);
          }

          &:before {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            width: 100%;
            height: 1px;
            background: rgb(var(--subheader-text-color));
            scale: 0 1;
            transform-origin: right top;
            transition: scale 0.3s ease;
          }

          @media (hover: hover) {
            &:hover:before {
              scale: 1 1;
              transform-origin: left top;
            }
          }
        }
      }
    }

    .subheader-swiper-wrap {
      overflow: hidden;
      width: 100%;
      height: var(--subheader-height);

      .swiper-slide {
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--subheader-height);

        &.swiper-slide-active {
          visibility: visible;
        }
      }

      p {
        opacity: 0;
        width: 100%;
        text-align: center;
        translate: 0 10px;
        transition: all 0.6s ease;

        .swiper-slide-active & {
          opacity: 1;
          translate: 0;
          transition: all 0.6s 0.2s ease;
        }
      }

      a {
        color: rgb(var(--subheader-text-color));
      }

      .swiper-button-prev,
      .swiper-button-next {
        left: 0;
        color: rgb(var(--subheader-text-color));

        &.swiper-button-next {
          left: auto;
          right: 0;
        }

        &:after {
          font-size: 0.5lh;
        }
      }
    }
  }
}

/* header-search
------------------------------------------*/
.header-search-bg {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--text-color) / var(--overlay-opacity));
  transition: all 0.3s ease;
  z-index: 10002;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
  }
}

.header-search {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0 0 auto 0;
  padding: var(--padding);
  width: 100%;
  background: rgb(var(--bg-color));
  translate: 0 -100%;
  transition: all 0.3s ease;
  z-index: 10003;

  &[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;
    translate: 0 0;
  }

  .header-search-form {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 90%;
    max-width: 600px;

    form {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 5px 10px 5px 16px;
      width: calc(100% - 50px);
      border: rgb(var(--text-color)) 1px solid;
      border-radius: 100px;

      input {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
      }

      button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;

        svg {
          width: 24px;
          height: 24px;
        }
      }
    }

    .close {
      margin: 0 0 0 auto;

      a {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;

        svg {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

/* header
------------------------------------------*/
.mega-bg {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--text-color) / var(--overlay-opacity));
  transition: all 0.3s ease;
  z-index: 99;

  &.open {
    visibility: visible;
    opacity: 1;
  }
}

.header {
  &.height-s {
    --header-height: 70px;

    @media screen and (max-width: 992px) {
      --header-height: 62px;
    }
    @media screen and (max-width: 768px) {
      --header-height: 54px;
    }
  }
  &.height-m {
    --header-height: 90px;

    @media screen and (max-width: 992px) {
      --header-height: 80px;
    }
    @media screen and (max-width: 768px) {
      --header-height: 70px;
    }
  }
  &.height-l {
    --header-height: 110px;

    @media screen and (max-width: 992px) {
      --header-height: 95px;
    }
    @media screen and (max-width: 768px) {
      --header-height: 80px;
    }
  }

  opacity: 0;
  position: relative;
  transition: all 0.6s ease, top 0.3s ease, height 0.2s ease;
  z-index: 100;

  .loaded & {
    opacity: 1;
  }

  .header-bg {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--bg-color) / 0.75);
    border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
    z-index: -1;

    #page_homepage &,
    #page_product_list:has(.ec-categoryHeader.title-image-1) & {
      border-block-end: none;
    }

    &:after {
      content: "";
      opacity: 0;
      position: absolute;
      inset: auto 0 0 0;
      width: 100%;
      height: 1px;
      background: rgb(var(--text-color));
      transition: all 0.5s ease;
      z-index: -1;
    }
  }

  &.mega-open {
    .header-bg {
      opacity: 1;
      background: rgb(var(--bg-color) / 1);
      border-radius: 0 0 20px 20px;
      box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;
    }
  }

  &.is-header-sticky {
    &.sticky-always {
      position: sticky;
      inset: 0 0 auto 0;
    }

    .header-bg {
      border-block-end: rgb(var(--text-color) / 0) 1px solid;
    }

    &.sticky-scroll {
      position: sticky;

      &.is-header-sticky {
        top: 0;

        .header-bg {
          box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;
        }
      }

      &.is-header-hidden {
        top: calc(var(--header-height) * -1);
      }
    }
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
    padding: 0 var(--padding);
    max-width: var(--max-width);
    height: var(--header-height);
    transition: all 0.3s ease, height 0.2s ease;

    .is-header-sticky & {
      height: calc(var(--header-height) * 0.85);

      .logo {
        scale: 0.95;
      }
    }

    .drawer-open {
      margin-inline-start: -0.5lh;
      width: 60px;

      .menu-none & {
        width: 240px;
      }

      @media screen and (max-width: 992px) {
        width: 60px !important;
      }

      a {
        position: relative;
        display: block;
        width: 44px;
        height: 44px;

        &:after {
          content: "";
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-menu%22%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
            no-repeat center center / 24px;
          -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-menu%22%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
            no-repeat center center / 24px;
          background-color: currentColor;
          transition: all 0.3s ease;
        }
      }
    }

    .logo {
      display: flex;
      margin-inline-end: auto;
      width: 180px;
      font-size: 2.4rem;
      transition: all 0.2s ease;

      .menu-none & {
        flex: 1;
        justify-content: center;
        text-align: center;
      }

      @media screen and (max-width: 992px) {
        flex: 1;
        justify-content: center;
        text-align: center;
      }

      a {
        display: block;

        img {
          width: auto;
          height: var(--logo-height);

          @media screen and (max-width: 992px) {
            height: calc(var(--logo-height) * 0.9);
          }
          @media screen and (max-width: 768px) {
            height: var(--logo-height-mobile);
          }
        }
      }
    }

    .header-menu {
      flex: 1;
      display: flex;
      align-self: stretch;
      justify-content: center;
      font-size: 1.3rem;

      .menu-none & {
        display: none;
      }

      @media screen and (max-width: 992px) {
        display: none;
      }

      & > li {
        display: flex;
        align-items: center;
        padding-inline: 16px;

        & > a {
          position: relative;

          &:before {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            width: 100%;
            height: 1px;
            background: rgb(var(--text-color));
            scale: 0 1;
            transform-origin: right top;
            transition: scale 0.3s ease;
          }

          @media (hover: hover) {
            &[aria-expanded="true"]:before,
            &:hover:before {
              scale: 1 1;
              transform-origin: left top;
            }
          }

          .mega-menu & {
            padding-inline-end: 20px;

            &:after {
              content: "";
              position: absolute;
              inset: 50% -3px auto auto;
              width: 16px;
              height: 16px;
              mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-down%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
                no-repeat right center / 16px;
              -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-down%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")
                no-repeat right center / 16px;
              background: rgb(var(--text-color));
              translate: 0 -50%;
              transition: all 0.3s ease;
            }

            &[aria-expanded="true"]:after {
              rotate: 180deg;
            }
          }
        }

        .mega-menu-content {
          visibility: hidden;
          opacity: 0;
          display: flex;
          gap: calc(var(--padding) * 0.8);
          position: absolute;
          inset: 100% 0 auto 0;
          margin-inline: auto;
          padding: calc(var(--padding) * 0.5) var(--padding) var(--padding) var(--padding);
          max-width: var(--max-width);
          max-height: calc(100vh - var(--header-group-height));
          width: 100%;
          transition: all 0.3s ease;

          &[aria-hidden="false"] {
            visibility: visible;
            opacity: 1;
          }

          & > ul {
            overflow-x: hidden;
            overflow-y: auto;
            opacity: 0;
            flex: 2;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 32px 16px;
            translate: 0 -10px;
            transition: opacity 0.3s ease, translate 0.6s ease;

            [aria-hidden="false"] & {
              opacity: 1;
              translate: 0;
              transition: opacity 0.3s 0.1s ease, translate 0.6s 0.1s ease;
            }

            @media (hover: hover) {
              &::-webkit-scrollbar {
                width: 4px;
              }
              &::-webkit-scrollbar-track {
                width: 100%;
                background: rgb(var(--text-color) / var(--border-opacity));
                border-radius: 4px;
              }
              &::-webkit-scrollbar-thumb {
                width: 100%;
                background: rgb(var(--text-color) / var(--overlay-opacity));
                border-radius: 4px;
              }
            }

            @media screen and (max-width: 1200px) {
              grid-template-columns: repeat(5, 1fr);
            }

            &:has(+ .promo-block) {
              grid-template-columns: repeat(4, 1fr);

              @media screen and (max-width: 1200px) {
                grid-template-columns: repeat(3, 1fr);
              }
            }

            a {
              display: block;
              padding-block: 4px;
            }

            & > li > a {
              opacity: 0.5;
            }

            ul {
              margin: 8px 0 0 0;
              font-size: 1.2rem;
            }
          }

          .promo-block {
            overflow: hidden;
            opacity: 0;
            flex: 1;
            display: flex;
            position: relative;
            color: var(--promo-block-text-color);
            border-radius: var(--image-border-radius);
            translate: 0 -10px;
            transition: opacity 0.3s ease, translate 1s ease;

            [aria-hidden="false"] & {
              opacity: 1;
              translate: 0;
              transition: opacity 0.3s 0.2s ease, translate 1s 0.2s ease;
            }

            a {
              display: block;
              color: var(--promo-block-text-color);

              @media (hover: hover) {
                &:hover,
                .is-keyboard &:focus-visible {
                  img {
                    scale: 1.05;
                  }
                }
              }
            }

            img {
              object-fit: cover;
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              transition: all 0.3s ease;
            }

            .text {
              position: absolute;
              inset: auto auto 0 0;
              padding: 24px 28px;
              width: 100%;

              div {
                color: var(--promo-block-text-color);
                font-size: 1.6rem;
              }

              p {
                opacity: 0.8;
                margin: 1rem 0 0 0;
                font-size: 1.2rem;
              }
            }
          }
        }
      }
    }

    .header-btn {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-inline-end: -0.5lh;
      width: 240px;

      @media screen and (max-width: 992px) {
        width: 60px;

        .search {
          display: none;
        }
      }

      & > div {
        a {
          display: grid;
          place-items: center;
          position: relative;
          width: 44px;
          height: 44px;

          svg {
            width: 22px;
            height: 22px;
          }

          @media (hover: hover) {
            &:hover {
              opacity: 0.6;
            }
          }
        }
      }

      .cart {
        span {
          display: grid;
          place-items: center;
          position: absolute;
          inset: 2px 2px auto auto;
          width: 18px;
          height: 18px;
          color: rgb(var(--bg-color));
          font-size: 10px;
          letter-spacing: 0;
          background: rgb(var(--text-color));
          border-radius: 100px;
          transition: all 0.3s ease;

          &.empty {
            opacity: 0;
            scale: 0;
          }
        }
      }
    }
  }
}

/* footer
------------------------------------------*/
.footer {
  opacity: 0;
  font-size: 1.2rem;
  transition: opacity 0.6s ease;

  .loaded & {
    opacity: 1;
  }

  .footer-top {
    color: rgb(var(--footer-text-color));
    background: rgb(var(--footer-bg-color));

    .footer-top-inner {
      display: flex;
      gap: var(--padding);
      margin: 0 auto;
      padding: var(--margin) var(--padding);
      max-width: var(--max-width);

      .title {
        margin: 3rem 0 1.5rem 0;
        font-weight: var(--body-font-weight-bold);

        &:first-child {
          margin-block-start: 0;
        }
      }

      .logo {
        display: flex;
        margin: 6rem 0 3rem 0;

        a {
          img {
            width: auto;
            height: var(--logo-height);

            .logo.white & {
              filter: brightness(0) invert(1);
            }

            @media screen and (max-width: 992px) {
              height: calc(var(--logo-height) * 0.9);
            }
            @media screen and (max-width: 768px) {
              height: var(--logo-height-mobile);
            }
          }
        }
      }

      .footer-sns {
        display: flex;
        align-items: center;
        gap: 12px;

        a {
          display: block;
          line-height: 1;

          svg {
            width: 20px;
            height: 20px;
          }

          @media (hover: hover) {
            &:hover {
              opacity: 0.6;
            }
          }
        }
      }

      .about {
        width: 46%;

        .text {
          margin: 0 0 3rem 0;
        }
      }

      .category,
      .menu,
      .contact {
        width: 18%;

        ul {
          li {
            a {
              display: inline-flex;
              padding: 2px 0;
            }

            .contact & {
              padding: 2px;
            }
          }

          &.submenu {
            margin: 2rem 0 0 0;
            font-size: 1rem;
          }
        }
      }
    }

    @media screen and (max-width: 992px) {
      .footer-top-inner {
        display: block;

        .title {
          margin: 3rem 0 1.5rem 0 !important;

          .about & {
            margin-block-start: 0 !important;
          }
        }

        .logo {
          a {
            margin: 0 auto;
          }
        }

        .footer-sns {
          justify-content: center;
        }

        .about,
        .category,
        .menu,
        .contact {
          width: 100%;
        }
      }
    }
  }

  .footer-bottom {
    position: relative;

    .footer-bottom-inner {
      margin: 0 auto;
      padding: 20px var(--padding);
      max-width: var(--max-width);

      @media screen and (max-width: 992px) {
        padding: var(--padding);
        text-align: center;
      }

      .copyright {
        font-size: 1.1rem;
      }
    }
  }
}

.pagetop-btn {
  opacity: 0;
  position: fixed;
  inset: auto 20px 20px auto;
  translate: 0 20px;
  transition: all 0.3s ease;

  .is-scrolled & {
    opacity: 1;
    translate: 0 0;
  }

  a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgb(var(--bg-color));
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / var(--border-opacity)) 0px 20px 25px -5px, rgb(0 0 0 / 0.04) 0px 10px 10px -5px;

    svg {
      width: 22px;
      height: 22px;
      rotate: -90deg;
    }
  }
}

/* mv
------------------------------------------*/
.mv-wrap {
  overflow: hidden;
  opacity: 0;
  position: relative;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  .viewed & {
    opacity: 1;
  }

  .mv2 {
    .swiper-slide {
      visibility: hidden;
      display: grid;
      place-items: center;
      padding: var(--padding);
      color: rgb(var(--mv-text-color));
      text-align: center;

      &.swiper-slide-active {
        visibility: visible;
      }

      .text {
        .title {
          opacity: 0;
          font-size: calc(var(--head-font-size) * var(--mv-font-size-scale));
          translate: 0 20px;
          transition: all 0.6s ease;

          .swiper-slide-active & {
            opacity: 1;
            translate: 0;
            transition: all 0.6s 1s ease;
          }
        }

        p {
          opacity: 0;
          margin-block-start: 1.5rem;
          translate: 0 20px;
          transition: all 0.6s ease;

          .swiper-slide-active & {
            opacity: 0.8;
            translate: 0;
            transition: all 0.6s 1.1s ease;
          }
        }

        .btn-image,
        .btn-arrow {
          opacity: 0;
          margin-inline: auto 0;
          translate: 0 20px;
          transition: all 0.6s ease;

          .swiper-slide-active & {
            opacity: 1;
            translate: 0;
            transition: all 0.6s 1.2s ease;
          }
        }
      }
    }
  }

  @media screen and (min-width: 993px) {
    &.height-s {
      height: 500px;
    }

    &.height-m {
      height: 650px;
    }

    &.height-l {
      height: 800px;
    }

    &.height-full {
      padding: 0;
      max-width: 100%;
      height: calc(100svh - var(--header-group-height));
    }

    &.height-image {
      height: auto;
    }

    &.type-left {
      --mv-text-color: var(--text-color);
    }

    &.type-right {
      --mv-text-color: var(--text-color);
      display: flex;
    }

    .mv {
      height: 100%;

      .type-left & {
        margin: 0 0 0 auto;
        width: 70%;
      }

      .type-right & {
        width: 65%;
      }

      .bg {
        overflow: hidden;
        height: 100%;
        border-radius: var(--image-border-radius);

        .height-full & {
          border-radius: 0;

          .type-left & {
            border-radius: var(--image-border-radius) 0 0 var(--image-border-radius);
          }

          .type-right & {
            border-radius: 0 var(--image-border-radius) var(--image-border-radius) 0;
          }
        }

        img {
          object-fit: cover;
          height: 100%;
          width: 100%;
          scale: 1.1;
          transition: all 2s ease;

          .height-image & {
            scale: 1;
          }

          .swiper-slide-active & {
            scale: 1;
          }

          &.sp {
            display: none;
          }
        }
      }
    }

    .mv2 {
      .type-center & {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: var(--padding);
      }

      .type-bottom & {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0 var(--padding);

        .height-full & {
          padding: 0;
        }

        .swiper-slide {
          place-items: end center;
          padding: var(--padding) var(--padding) 60px var(--padding);

          .text {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: 100%;

            .left {
              width: calc(100% - 320px);
              text-align: left;
            }

            .btn {
              display: flex;
              justify-content: flex-end;
              width: 280px;
            }
          }
        }
      }

      .type-left & {
        position: absolute;
        inset: 0 auto 0 0;
        width: 50%;
        height: 100%;
        padding: var(--padding);

        .swiper-slide {
          place-items: center start;
          padding: 0;
          color: rgb(var(--text-color));
          text-align: left;
        }
      }

      .type-right & {
        width: 35%;

        .swiper-slide {
          place-items: end start;
          padding: var(--padding) 0 calc(var(--padding) * 1.5) var(--padding);
          color: rgb(var(--text-color));
          text-align: left;
        }
      }
    }
  }

  @media screen and (max-width: 992px) {
    &.height-sp-s {
      --height-tablet: 350px;
      --height-mobile: 200px;
    }

    &.height-sp-m {
      --height-tablet: 500px;
      --height-mobile: 350px;
    }

    &.height-sp-l {
      --height-tablet: 650px;
      --height-mobile: 500px;
    }

    &.height-sp-full {
      --height-tablet: calc(100svh - var(--header-group-height));
      --height-mobile: calc(100svh - var(--header-group-height));

      padding: 0;
      max-width: 100%;
    }

    &.height-sp-image {
      --height-tablet: auto;
      --height-mobile: auto;
    }

    height: var(--height-tablet);

    @media screen and (max-width: 768px) {
      height: var(--height-mobile);
    }

    &.type-sp-bottom,
    &.type-sp-bottom2 {
      --mv-text-color: var(--text-color);

      height: auto;

      .mv {
        height: var(--height-tablet);

        @media screen and (max-width: 768px) {
          height: var(--height-mobile);
        }
      }
    }

    .mv {
      height: 100%;

      .bg {
        overflow: hidden;
        height: 100%;
        border-radius: var(--image-border-radius);

        .height-sp-full & {
          border-radius: 0;
        }

        img {
          object-fit: cover;
          height: 100%;
          width: 100%;
          scale: 1.1;
          transition: all 2s ease;

          .swiper-slide-active & {
            scale: 1;
          }

          .height-sp-image & {
            scale: 1;
          }

          &.pc {
            display: none;
          }
        }
      }
    }

    .mv2 {
      .type-sp-center & {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: var(--padding);
      }

      .type-sp-center2 & {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: var(--padding);

        .text {
          .left {
            p {
              display: none;
            }
          }
        }
      }

      .type-sp-bottom &,
      .type-sp-bottom2 & {
        .swiper-slide {
          place-items: end start;
          color: rgb(var(--text-color));
          padding: var(--padding) 0 calc(var(--padding) * 1.5) 0;
          text-align: left;
        }

        .type-sp-bottom2 & {
          overflow: visible;
          margin: 0 0 var(--margin) 0;

          &:after {
            content: "";
            position: absolute;
            inset: auto 0 calc(var(--margin) * -1) 0;
            margin: 0 calc(50% - var(--vw) * 50);
            width: calc(var(--vw) * 100);
            height: 1px;
            background: rgb(var(--text-color) / var(--border-opacity));
          }
        }
      }
    }
  }

  .swiper-pagination {
    inset: auto 0 10px 0;
    line-height: 1;

    @media screen and (min-width: 993px) {
      .type-left & {
        inset: auto auto -10px calc(var(--padding) - 6px);
        text-align: left;

        .height-full & {
          inset: auto auto calc(var(--padding) - 10px) calc(var(--padding) - 6px);
        }
      }

      .type-right & {
        inset: auto -6px -10px auto;
        text-align: right;

        .height-full & {
          inset: auto 0 1rem auto;
          padding-inline-end: 1rem;
        }
      }
    }

    @media screen and (max-width: 992px) {
      .type-sp-bottom &,
      .type-sp-bottom2 & {
        inset: auto -6px -10px auto;
        text-align: right;
      }
    }

    .swiper-pagination-bullet {
      opacity: 1;
      position: relative;
      margin: 0;
      width: 26px;
      height: 30px;
      background: none;
      border: none;

      &:after {
        content: "";
        position: absolute;
        inset: 50% 0 0 50%;
        width: 10px;
        height: 10px;
        background: rgb(var(--mv-text-color));
        border: rgb(var(--mv-text-color)) 1.5px solid;
        border-radius: 50%;
        translate: -50% -50%;
        scale: 0.6;
        transition: all 0.3s ease;
      }

      &.swiper-pagination-bullet-active {
        &:after {
          background: none;
          border: rgb(var(--mv-text-color)) 1.5px solid;
          scale: 1;
        }
      }
    }
  }
}

/* banner */
.banner-wrap {
  --banner-pagination-length: 0;
  --banner-pagination-active: 1;

  opacity: 0;
  overflow: clip;
  position: relative;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .banner {
    overflow: visible;

    .swiper-slide {
      text-align: center;

      img {
        margin: 0 auto;
        max-width: 100%;
        width: var(--banner-width);

        .swiper-slide:has(p) & {
          margin: 0 auto 1.8rem auto;
        }
      }

      div {
        font-size: 1.5rem;
      }

      p {
        opacity: 0.8;
        margin: 1rem 0 0 0;
        font-size: 1.1rem;
      }

      a {
        display: block;

        @media (hover: hover) {
          &:hover {
            opacity: 0.6;
          }
        }
      }
    }
  }

  .swiper-pagination {
    position: relative;
    inset: auto;
    margin: calc(var(--margin) * 0.8) auto 0 auto;
    width: calc(50px * var(--banner-pagination-length));
    height: 1px;
    line-height: 1;

    &:before {
      content: "";
      opacity: 0.12;
      position: absolute;
      inset: 0 0 auto 0;
      width: 100%;
      height: 1px;
      background: rgb(var(--text-color));
    }

    &:after {
      content: "";
      opacity: 1;
      position: absolute;
      inset: 0 0 auto calc(50px * (var(--banner-pagination-active) - 1));
      width: 50px;
      height: 1px;
      background: rgb(var(--text-color));
      transition: all 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    }

    .swiper-pagination-bullet {
      display: none;
    }
  }
}

/* information */
.information {
  opacity: 0;
  position: relative;
  margin: 0 auto var(--margin) auto;
  background: rgb(var(--sub-bg-color));
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .information-inner {
    margin-inline: auto;
    padding: var(--margin) var(--padding);
    max-width: var(--max-width);
    text-align: center;

    h2 {
      margin-block-end: 3rem;
    }

    p {
      opacity: 0.8;
    }
  }
}

/* sec-title */
.sec-title {
  opacity: 0;
  position: relative;
  margin: 0 0 3rem 0;
  transition: all 0.6s ease;

  .viewed & {
    opacity: 1;
  }

  &:before {
    content: "";
    position: absolute;
  }
}

/* title-area */
.title-area {
  position: relative;

  .btn-arrow {
    position: absolute;
    inset: auto 0 0 auto;
    margin-block-start: 0;
  }
}

/* slideitem */
.slideitem-wrap {
  opacity: 0;
  overflow: clip;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .home & {
    margin: 0 auto var(--margin) auto;
    padding: 0 var(--padding);
    max-width: var(--max-width);
  }

  .slideitem-slide {
    position: relative;
    max-width: 100%;

    @media screen and (max-width: 992px) {
      .swiper {
        overflow: visible;
      }
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    inset: 50% auto auto calc(var(--padding) * -1);
    width: var(--padding);
    height: var(--padding);
    color: rgb(var(--text-color));
    transition: all 0.3s ease;

    &.swiper-button-next {
      inset: 50% calc(var(--padding) * -1) auto auto;
    }

    &:after {
      font-size: 2rem;
    }

    @media screen and (max-width: 992px) {
      display: none;
    }
  }
}

/* item-list-item */
.item-list-item {
  a {
    display: block;
    position: relative;

    @media (hover: hover) {
      &:hover {
        img {
          scale: 1.05;
        }
      }
    }
  }

  .soldout {
    position: absolute;
    inset: 6px 6px auto auto;
    padding: 5px 8px;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    background: rgb(var(--notice-color));
    border-radius: 2px;
    z-index: 1;
  }

  .image {
    overflow: clip;
    margin: 0 0 1.2rem 0;
    border-radius: var(--image-border-radius);

    img {
      aspect-ratio: var(--item-list-image-ratio);
      object-fit: cover;
      width: 100%;
      height: 100%;
      transition: all 0.3s ease;
    }
  }

  .text {
    line-height: 1.5;

    .name {
      margin: 0 0 0.4rem 0;
    }

    .comment {
      margin: 1rem 0 0 0;
      font-size: 1.2rem;
    }
  }
}

/* looptext */
.looptext {
  --looptext-speed: 1;
  --looptext-duration: calc(500s / var(--looptext-speed));

  opacity: 0;
  overflow: hidden;
  margin: 0 0 var(--margin) 0;
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  ul {
    overflow: hidden;
    display: flex;
    gap: 50px;

    li {
      display: flex;
      gap: var(--padding);
      flex-shrink: 0;
      white-space: nowrap;
      transform: translate3d(0, 0, 0);

      &:nth-child(odd) {
        animation: looptext var(--looptext-duration) calc((var(--looptext-duration) / 2) * -1) linear infinite;
      }
      &:nth-child(even) {
        animation: looptext2 var(--looptext-duration) linear infinite;
      }

      &:has(a:hover) {
        animation-play-state: paused;
      }

      p {
        display: flex;
        gap: max(calc(var(--padding) * 0.5), 20px);

        a {
          transition: all 0.1s ease;

          @media (hover: hover) {
            &:hover {
              scale: 1.05;
            }
          }
        }

        &:nth-child(even) {
          opacity: 0.5;
        }
      }
    }
  }
}

@keyframes looptext {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes looptext2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

/* concept */
.concept {
  opacity: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--image-gap-hor);
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  height: 50vh;
  transition: opacity 0.6s ease;

  &:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }

  &.viewed {
    opacity: 1;
  }

  .image {
    position: relative;

    img {
      object-fit: cover;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--image-border-radius);
    }
  }

  .text {
    order: -1;
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--padding) - var(--image-gap-hor)) 0 0;

    .title {
      margin: 0 0 3rem 0;
      font-size: 1.4rem;

      span {
        display: block;
      }
    }

    h3 {
      margin: auto 0 0 0;
    }

    p {
      opacity: 0.8;
      margin: 1.5rem 0 0 0;
    }
  }

  @media screen and (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
    height: auto;

    &:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(1, 1fr);
    }

    .image {
      height: 35vw;
    }

    .text {
      order: 1;
      grid-column: 1 / -1;
      padding: var(--padding) 0 0 0;

      .title {
        margin: 0 0 var(--padding) 0;
      }
    }
  }
}

/* bgimage */
.bgimage {
  overflow: hidden;
  opacity: 0;
  position: relative;
  margin-block-end: var(--margin);
  padding: var(--padding);
  height: 50vh;
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

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

  .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    padding: var(--padding);
    color: rgb(var(--bgimage-text-color));
    text-align: center;

    .title {
      opacity: 0;
      display: flex;
      flex-direction: column;
      translate: 0 20px;

      .viewed & {
        opacity: 1;
        translate: 0;
        transition: all 0.6s ease;
      }
    }

    p {
      opacity: 0;
      margin-block-start: 1.5rem;
      translate: 0 20px;

      .viewed & {
        opacity: 0.8;
        translate: 0;
        transition: all 0.6s 0.1s ease;
      }
    }

    .btn-image {
      opacity: 0;
      translate: 0 20px;

      .viewed & {
        opacity: 1;
        translate: 0;
        transition: all 0.6s 0.2s ease;
      }
    }
  }
}

/* pickup */
.pickup {
  opacity: 0;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .pickup-content {
    display: flex;
    gap: var(--padding);

    @media screen and (max-width: 768px) {
      flex-direction: column;
    }

    .pickup-slide {
      width: 70%;

      .image {
        overflow: hidden;
        position: absolute;
        inset: 0;
        border-radius: var(--image-border-radius);

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          scale: 1.1;
          transition: all 2s ease;

          .swiper-slide-active & {
            scale: 1;
          }
        }
      }

      @media screen and (max-width: 768px) {
        width: 100%;
        height: 300px;
      }
    }

    .pickup-items {
      padding: 0 0 calc(var(--padding) * 2) 0;
      width: 30%;

      .swiper-slide-inner {
        opacity: 0;
        position: relative;
        translate: 2rem 0;
        transition: all 0.6s ease;

        .swiper-slide-active & {
          opacity: 1;
          translate: 0 0;
        }

        .image {
          position: relative;
          margin: 0 auto 2.5rem auto;

          .num {
            display: grid;
            place-items: center;
            position: absolute;
            inset: 6px 6px auto auto;
            width: 38px;
            height: 38px;
            color: rgb(var(--bg-color));
            font-size: 1.2rem;
            background: rgb(var(--text-color));
            border-radius: 4px;
            z-index: 1;
          }

          a {
            overflow: hidden;
            display: block;
            border-radius: var(--image-border-radius);

            img {
              aspect-ratio: var(--item-list-image-ratio);
              object-fit: cover;
              width: 100%;
              height: 100%;
              transition: all 0.3s ease;
            }

            @media (hover: hover) {
              &:hover {
                img {
                  scale: 1.05;
                }
              }
            }
          }
        }

        .text {
          div {
            font-size: 1.8rem;
          }

          p {
            opacity: 0.8;
            margin: 1rem 0 0 0;
            font-size: 1.2rem;
          }
        }
      }

      @media screen and (max-width: 768px) {
        padding: 0 0 30px 0;
        width: 100%;

        .swiper-slide-inner {
          display: flex;
          align-items: center;
          gap: 12px;

          .image {
            margin: 0;
            width: 150px;

            .num {
              inset: 3px auto auto 3px;
              width: 24px;
              height: 24px;
              font-size: 1rem;
            }
          }

          .text {
            width: calc(100% - 20px);

            p {
              margin: 0;
            }
          }
        }
      }
    }

    .swiper-pagination {
      inset: auto -6px -10px auto;
      line-height: 1;
      text-align: right;

      @media screen and (max-width: 768px) {
        inset: auto auto -10px auto;
        text-align: center;
      }

      .swiper-pagination-bullet {
        opacity: 1;
        position: relative;
        margin: 0;
        width: 26px;
        height: 30px;
        background: none;
        border: none;

        &:after {
          content: "";
          position: absolute;
          inset: 50% 0 0 50%;
          width: 10px;
          height: 10px;
          background: rgb(var(--text-color));
          border: rgb(var(--text-color)) 1.5px solid;
          border-radius: 50%;
          translate: -50% -50%;
          scale: 0.6;
          transition: all 0.3s ease;
        }

        &.swiper-pagination-bullet-active {
          &:after {
            background: none;
            border: rgb(var(--text-color)) 1.5px solid;
            scale: 1;
          }
        }
      }
    }
  }
}

/* news */
.news {
  opacity: 0;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .news-content {
    padding: var(--padding);
    background: rgb(var(--sub-bg-color));
    border-radius: var(--image-border-radius);

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--image-gap-hor);

      li {
        display: flex;

        &[aria-hidden="true"] {
          display: none;
        }

        .date {
          width: 120px;
        }

        .text {
          width: calc(100% - 120px);

          p {
            opacity: 0.8;
            margin: 1rem 0 0 0;
            font-size: 1.1rem;
          }

          .btn-arrow {
            margin: 2rem 0 0 0;
          }
        }

        @media screen and (max-width: 992px) {
          display: block;

          .date {
            opacity: 0.8;
            margin: 0 0 1rem 0;
            width: 100%;
            font-size: 1.2rem;
          }

          .text {
            width: 100%;
          }
        }
      }
    }

    .news-load-more {
      margin: var(--padding) 0 0 0;
    }
  }
}

/* instagram */
.instagram {
  opacity: 0;
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
  max-width: var(--max-width);
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }
}

/* youtube */
.youtube {
  overflow: hidden;
  opacity: 0;
  position: relative;
  margin-block-end: var(--margin);
  padding: var(--padding);
  height: 50vh;
  transition: opacity 0.6s ease;

  &.viewed {
    opacity: 1;
  }

  .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    padding: var(--padding);
    color: rgb(var(--youtube-text-color));
    text-align: center;

    .title {
      opacity: 0;
      display: flex;
      flex-direction: column;
      translate: 0 20px;

      .viewed & {
        opacity: 1;
        translate: 0;
        transition: all 0.6s ease;
      }
    }

    p {
      opacity: 0;
      margin-block-start: 1.5rem;
      translate: 0 20px;

      .viewed & {
        opacity: 0.8;
        translate: 0;
        transition: all 0.6s 0.1s ease;
      }
    }

    .btn-image {
      opacity: 0;
      translate: 0 20px;

      .viewed & {
        opacity: 1;
        translate: 0;
        transition: all 0.6s 0.2s ease;
      }
    }
  }
}

/* list page
------------------------------------------*/
.ec-searchResult {
  margin: 0 0 2rem 0;
  padding: 1rem;
  background: rgb(var(--sub-bg-color));
  border-radius: var(--input-border-radius);
}

.ec-searchnavRole {
  .ec-searchnavRole__infos {
    margin: 0 0 var(--image-gap-ver) 0;
    padding: 0;
    max-width: 100%;
    color: rgb(var(--text-color));
    font-size: 1.2rem;
    line-height: var(--body-line-height);
    border: none;

    .ec-searchnavRole__actions {
      .ec-select {
        display: flex;
        justify-content: flex-end;
        gap: 2rem;

        select {
          padding: 0 20px 0 0 !important;
          width: auto !important;
          font-size: 1.2rem !important;
          background: linear-gradient(45deg, transparent 50%, rgb(var(--bg-color)) 50%) no-repeat top calc(50% - 1.5px) right 5px / 5px 5px, linear-gradient(-45deg, transparent 50%, rgb(var(--bg-color)) 50%) no-repeat top calc(50% - 1.5px) right 0 / 5px 5px,
            linear-gradient(45deg, transparent 50%, rgb(var(--text-color)) 50%) no-repeat top 50% right 5px / 5px 5px, linear-gradient(-45deg, transparent 50%, rgb(var(--text-color)) 50%) no-repeat top 50% right 0 / 5px 5px !important;
          background-color: rgb(var(--bg-color)) !important;
          border: none !important;
        }
      }
    }
  }
}

.ec-noItems {
  display: grid;
  place-items: center;
  height: 200px;
}

/* detail page
------------------------------------------*/
.ec-modal {
  .ec-modal-overlay {
    background: rgb(var(--text-color) / var(--overlay-opacity));
  }

  .ec-modal-wrap {
    margin: 0 auto;
    padding: var(--padding);
    color: rgb(var(--text-color));
    width: 600px;
    max-width: 80%;
    background: rgb(var(--bg-color));
    border: none;
    border-radius: var(--image-border-radius);
    box-shadow: rgb(0 0 0 / 0.06) 0px 20px 25px -5px, rgb(0 0 0 / 0.02) 0px 10px 10px -5px;

    @media screen and (max-width: 768px) {
      width: 400px;
    }

    .ec-modal-close {
      display: grid;
      place-items: center;
      position: absolute;
      inset: 0 0 auto auto;
      width: 44px;
      height: 44px;
      z-index: 1;

      svg {
        width: 20px;
        height: 20px;
      }
    }

    .ec-modal-box {
      margin: 1rem 0 0 0;

      .ec-role {
        display: flex;
        justify-content: center;
        gap: 1rem;

        @media screen and (max-width: 768px) {
          flex-direction: column;
        }

        .ec-inlineBtn--action,
        .ec-inlineBtn--cancel {
          margin: 0 !important;
        }
      }
    }
  }
}

.ec-productRole {
  .item-description {
    font-size: 1.3rem;

    .tab-content-item:has(.ec-productRole__code-category) & {
      margin: 0 0 3rem 0;
    }

    & > * {
      margin: 2rem 0;

      &:first-child {
        margin-block-start: 0;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-block-start: 3rem;
      font-size: 1.6rem;
      font-weight: var(--body-font-weight-bold);

      &:first-child {
        margin-block-start: 0;
      }
    }

    h4,
    h5,
    h6 {
      font-size: 1.4rem;
    }

    h5,
    h6 {
      opacity: 0.5;
    }

    a {
      text-decoration: underline;
    }

    ul {
      list-style: inside;

      li {
        padding: 2px 0;
      }
    }

    ol {
      list-style: inside decimal;

      li {
        padding: 2px 0;
      }
    }

    table {
      width: 100%;
      table-layout: fixed;

      th {
        padding: 10px 2px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: var(--body-font-weight-bold);
        background: rgb(var(--sub-bg-color));
        border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
      }

      td {
        padding: 10px 2px;
        font-size: 1.2rem;
        text-align: center;
        border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
      }
    }
  }

  .freearea {
    margin: var(--margin) 0 0 0;
  }

  .ec-grid2 {
    display: flex;
    gap: var(--padding);

    @media screen and (max-width: 992px) {
      display: block;
    }

    .ec-grid2__cell:nth-child(1) {
      width: calc(60% - (var(--padding) / 2));

      @media screen and (max-width: 992px) {
        margin: var(--padding) 0 var(--margin) 0;
        width: 100%;
      }

      @media screen and (max-width: 768px) {
        margin: 0 calc(50% - var(--vw) * 50) var(--margin) calc(50% - var(--vw) * 50);
        width: calc(var(--vw) * 100);
      }
    }

    .ec-grid2__cell:nth-child(2) {
      width: calc(40% - (var(--padding) / 2));

      @media screen and (max-width: 992px) {
        width: 100%;
      }
    }

    .ec-sliderItemRole {
      position: sticky;
      top: calc(var(--header-height) + 1rem);
      margin: 0;
      padding: 0;
      max-width: 100%;
      color: rgb(var(--text-color));
      font-size: 1.4rem;
      font-family: var(--body-font-family);
      font-weight: var(--body-font-weight-normal);
      line-height: var(--body-line-height);
      letter-spacing: var(--body-letter-spacing);

      body:has(.sticky-scroll) & {
        top: var(--padding);
      }

      .pv {
        margin: 0 0 10px 0;
        border-radius: var(--image-border-radius);

        @media screen and (max-width: 768px) {
          overflow: visible;
          margin: 0;
        }

        .swiper-pagination {
          display: none;

          @media screen and (max-width: 768px) {
            display: flex;
            justify-content: center;
            position: relative;
            inset: 0;
            margin: 2rem 0 0 0;
            height: 4px;
            line-height: 1;

            .swiper-pagination-bullet {
              opacity: 0.2;
              width: 4px;
              height: 4px;
              background: rgb(var(--text-color));

              &.swiper-pagination-bullet-active {
                opacity: 0.8;
                background: rgb(var(--text-color));
              }
            }
          }
        }
      }

      .pv-thumbnail {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 5px;

        @media screen and (max-width: 992px) {
          grid-template-columns: repeat(12, 1fr);
        }

        @media screen and (max-width: 768px) {
          display: none;
        }

        div {
          cursor: pointer;
          overflow: hidden;
          position: relative;
          border-radius: var(--image-border-radius);

          img {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }

          &:before {
            content: "";
            opacity: 0;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: var(--image-border-radius);
            box-shadow: inset 0 0 0 1px rgb(var(--text-color) / var(--overlay-opacity));
            transition: all 0.3s ease;
          }

          &.active {
            &:before {
              opacity: 1;
            }
          }
        }
      }
    }

    .ec-productRole__profile {
      position: sticky;
      top: calc(var(--header-height) + 1rem);
      margin: 0;

      body:has(.sticky-scroll) & {
        top: var(--padding);
      }

      .ec-productRole__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 2rem 0;
        padding: 0;
        border: none;

        li.ec-productRole__tag {
          padding: 4px 8px;
          color: rgb(var(--bg-color));
          font-size: 1rem;
          background: rgb(var(--text-color));
          border: none;
          border-radius: 2px;
        }
      }

      .ec-productRole__title {
        margin: 0 0 2rem 0;

        h2.ec-headingTitle {
          margin: 0;
          color: rgb(var(--text-color));
          font-size: var(--head-font-size);
          font-weight: var(--head-font-weight);
        }
      }

      .ec-productRole__priceRegular {
        padding: 0;
        font-size: 1.1rem;

        &:not(:has(*)) {
          display: none;
        }

        .ec-productRole__priceRegularTax {
          margin: 0 0 0 4px;
          font-size: 1.1rem;
        }
      }

      .ec-productRole__price {
        margin: 0 0 2rem 0;
        padding: 0;
        border: none;

        .ec-price {
          display: flex;
          align-items: baseline;

          .ec-price__price {
            padding: 0;
            color: rgb(var(--text-color));
            font-size: calc(var(--head-font-size) * 0.8);
            font-weight: var(--head-font-weight);
          }

          .ec-price__tax {
            margin: 0 0 0 3px;
            color: rgb(var(--text-color));
            font-size: 1.2rem;
          }
        }
      }

      form {
        .ec-productRole__actions {
          padding: 0;

          .mb-3 {
            margin: 0 0 1rem 0;

            .form-label {
              margin: 0 0 0.5rem 0;
              font-size: 1.3rem !important;
            }

            select {
              width: 100% !important;
              max-width: 100% !important;
              min-width: 100% !important;
            }
          }
        }

        .ec-productRole__btn {
          display: flex;
          gap: 5px;
          width: 100%;
          min-width: none;

          #form1 & {
            margin: 2.5rem 0 0 0;
          }

          .quantity-area {
            display: flex;
            width: 126px;
            border: rgb(var(--text-color)) 1px solid;
            border-radius: var(--input-border-radius);

            input {
              padding: 0;
              width: 38px;
              height: 52px;
              text-align: center;
              border: none !important;
            }

            input,
            input::-webkit-inner-spin-button,
            input::-webkit-inner-spin-button {
              appearance: none;
              -webkit-appearance: none;
              -moz-appearance: textfield;
            }

            .quantity-btn {
              a {
                display: grid;
                place-items: center;
                width: 44px;
                height: 52px;

                svg {
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }

          .add-cart {
            flex: 1;
            padding: 0;
            color: rgb(var(--bg-color));
            line-height: 52px;
            background: rgb(var(--text-color));
            border-radius: var(--input-border-radius);

            @media (hover: hover) {
              &:not(:disabled) {
                &:hover {
                  opacity: 0.6;
                }
              }
            }
          }

          #favorite {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin: 2rem auto 0 auto;
            padding: 0;
            color: rgb(var(--text-color));
            font-size: 1.2rem;
            background: none;
            border: none;

            svg {
              width: 18px;
              height: 18px;
            }

            @media (hover: hover) {
              &:not(:disabled) {
                &:hover {
                  opacity: 0.6;
                }
              }
            }

            &:disabled {
              opacity: 0.5;

              svg {
                fill: currentColor;
              }
            }
          }
        }
      }

      .ec-productRole__tab {
        display: flex;
        margin-block: 3.5rem 2.5rem;
        border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

        li {
          flex: 1;
          display: flex;
          text-align: center;

          a {
            opacity: 0.3;
            display: block;
            position: relative;
            margin-block-end: -1px;
            padding: 8px 0;
            width: 100%;
            font-size: 1.2rem;
            font-weight: var(--body-font-weight-bold);

            &:after {
              content: "";
              opacity: 0;
              position: absolute;
              inset: auto 0 0 0;
              width: 100%;
              height: 1px;
              background: rgb(var(--text-color));
            }

            &[aria-expanded="true"] {
              opacity: 1;

              &:after {
                opacity: 1;
              }
            }
          }
        }
      }

      .ec-productRole__tab-content {
        .tab-content-item {
          visibility: hidden;
          opacity: 0;
          height: 0;

          &[aria-hidden="false"] {
            visibility: visible;
            opacity: 1;
            height: auto;
          }

          .ec-productRole__code-category {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 22px;
            background: rgb(var(--sub-bg-color));
            border-radius: var(--image-border-radius);

            .ec-productRole__code {
              padding: 0;
              font-size: 1.2rem;
              border: none;
            }

            .ec-productRole__category {
              padding: 0;
              font-size: 1.2rem;
              border: none;

              div {
                margin: 0 0 0.5rem 0;
              }

              ul {
                padding: 0 0 0 1rem;

                a {
                  color: currentColor;
                  text-decoration: underline;
                }
              }
            }
          }

          .item-review {
            .review-wrapper {
              font-size: 1.3rem;

              .review-header {
                padding: 8px;
                text-align: center;
                background: rgb(var(--sub-bg-color));
                border-radius: var(--input-border-radius);
              }

              & > p {
                margin: 2rem 0 0 0;
                font-size: 1.2rem;
                text-align: center;
              }

              ul {
                overflow-y: auto;
                margin: 2rem 0 0 0;
                padding: 2rem;
                max-height: 500px;
                border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
                border-radius: var(--input-border-radius);

                @media (hover: hover) {
                  &::-webkit-scrollbar {
                    width: 4px;
                  }
                  &::-webkit-scrollbar-track {
                    width: 100%;
                    background: rgb(var(--text-color) / var(--border-opacity));
                  }
                  &::-webkit-scrollbar-thumb {
                    width: 100%;
                    background: rgb(var(--text-color) / var(--overlay-opacity));
                  }
                }

                li {
                  &:not(:first-child) {
                    margin: 2rem 0 0 0;
                    padding: 2rem 0 0 0;
                    border-block-start: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
                  }

                  .review-item-header {
                    display: flex;
                    justify-content: space-between;

                    .date {
                      font-size: 1.1rem;
                    }
                  }

                  .user {
                    display: flex;
                    font-size: 1rem;
                  }

                  .title {
                    margin: 1rem 0;
                    font-size: 1.2rem;
                    font-weight: var(--body-font-weight-bold);
                  }

                  p {
                    font-size: 1.2rem;
                  }
                }
              }
            }
          }
        }
      }

      .relateditemsslide {
        position: relative;
        margin: 3rem 0 0 0;

        .title {
          position: relative;
          margin: 0 0 1.2rem 0;

          h2 {
            font-size: 1.6rem !important;
          }
        }

        .swiper {
          border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
          border-radius: 4px;

          .swiper-slide {
            a {
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 8px;

              @media (hover: hover) {
                &:hover {
                  img {
                    scale: 1.05;
                  }
                }
              }

              .image {
                overflow: hidden;
                display: block;
                width: 80px;
                border-radius: var(--image-border-radius);

                img {
                  aspect-ratio: var(--item-list-image-ratio);
                  object-fit: cover;
                  width: 100%;
                  height: 100%;
                  transition: all 0.3s ease;
                }
              }

              .text {
                width: calc(100% - 100px);
                font-size: 1.3rem;
              }
            }
          }
        }

        .swiper-button-prev,
        .swiper-button-next {
          inset: 50% -6px auto auto;
          margin: 0;
          width: 24px;
          height: 24px;
          border: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
          border-radius: 50%;
          translate: 0 -50%;
          transition: all 0.3s ease;

          &:after {
            padding-inline-start: 1px;
            color: rgb(var(--text-color));
            font-size: 0.35lh;
          }

          &.swiper-button-prev {
            inset: 50% 22px auto auto;

            &:after {
              padding-inline-end: 1px;
              color: rgb(var(--text-color));
              font-size: 0.35lh;
            }
          }

          &.swiper-button-disabled {
            opacity: 1;

            &:after {
              opacity: 0.3;
            }
          }
        }
      }

      .ec-productRole__sns {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin: 2.5rem 0 0 0;

        .title {
          margin: 0 6px 0 0;
          font-size: 1.2rem;
        }

        a {
          display: flex;
          align-items: center;
          gap: 1rem;
          font-size: 1.1rem;
          line-height: 1;

          svg {
            width: 20px;
            height: 20px;
          }

          @media (hover: hover) {
            &:hover {
              opacity: 0.6;
            }
          }
        }
      }
    }
  }
}

.ec-productRole-bottom {
  &:has(*) {
    margin: var(--margin) calc(50% - var(--vw) * 50) 0 calc(50% - var(--vw) * 50);
    width: calc(var(--vw) * 100);
  }
}

/* other page
------------------------------------------*/

/* ec-login */
.ec-login {
  margin: 0;
  padding: var(--padding);
  background: rgb(var(--sub-bg-color));
  border-radius: var(--image-border-radius);

  .ec-login__icon {
    display: none;
  }

  .ec-login__input {
    margin: 0 0 3rem 0;

    .ec-input {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .ec-checkbox {
      margin: 1rem 0 0 0;

      label {
        justify-content: flex-start;

        .form-check {
          margin: 0;
          padding: 0;

          .form-check-label {
            font-size: 1.2rem !important;
          }
        }
      }
    }
  }

  .ec-grid2 {
    display: flex;
    gap: var(--padding);

    .ec-grid2__cell {
      .ec-login__actions {
        button {
          width: 100%;
        }
      }

      .ec-login__link {
        margin: 0;
        font-size: 1.3rem;

        a {
          &:hover,
          &:focus,
          &:active {
            color: currentColor;
          }
        }
      }
    }

    @media screen and (max-width: 768px) {
      display: block;

      .ec-grid2__cell {
        .ec-login__actions {
          text-align: center;

          button {
            margin: 0 auto 2rem auto !important;
            width: auto;
          }
        }

        .ec-login__link {
          text-align: center;
        }
      }
    }
  }
}

.ec-forgotRole__form {
  margin: 0 0 3rem 0 !important;
}

.ec-navlistRole {
  .ec-navlistRole__navlist {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 5rem 0;
    border: none;

    .ec-navlistRole__item {
      flex: 1;
      width: auto;
      border: none;
      border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

      @media screen and (max-width: 768px) {
        flex: auto;
        width: 33.3%;
      }

      &:hover {
        background: none !important;
      }

      a {
        position: relative;
        margin-block-end: -1px;
        padding: 16px 0;
        color: currentColor;
        font-weight: var(--body-font-weight-normal);

        &:after {
          content: "";
          opacity: 0;
          position: absolute;
          inset: auto 0 0 0;
          width: 100%;
          height: 1px;
          background: rgb(var(--text-color));
        }
      }

      &.active a {
        font-weight: var(--body-font-weight-bold);

        &:after {
          opacity: 1;
        }
      }
    }
  }
}

.ec-welcomeMsg {
  margin: 0 0 3rem 0;
  padding: 0;
  color: rgb(var(--text-color));
  font-size: 1.4rem;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight-normal);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  border: none;
}

.ec-favoriteRole {
  .ec-favoriteRole__header {
    margin: 0 0 2rem 0;
  }

  .ec-favoriteRole__itemList {
    display: grid;
    grid-template-columns: repeat(var(--item-list-num), 1fr);
    gap: var(--image-gap-ver) var(--image-gap-hor);

    .ec-favoriteRole__item {
      margin: 0;
      padding: 0;
      width: auto;

      .ec-favoriteRole__item-image {
        overflow: clip;
        margin: 0 0 1.2rem 0;
        border-radius: var(--image-border-radius);

        img {
          aspect-ratio: var(--item-list-image-ratio);
          object-fit: cover;
          width: 100%;
          height: 100%;
          transition: all 0.3s ease;
        }
      }

      .ec-favoriteRole__itemTitle {
        margin: 0 0 0.4rem 0;
        line-height: 1.5;
      }

      .ec-favoriteRole__itemPrice {
        margin: 0;
        font-weight: var(--body-font-weight-normal);
        line-height: 1.5;
      }

      .ec-closeBtn--circle {
        background: rgb(var(--text-color) / var(--overlay-opacity));

        .ec-icon {
          img {
            display: none;
          }

          &:after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
              no-repeat center center / 20px;
            -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
              no-repeat center center / 20px;
            background-color: rgb(var(--bg-color));
          }
        }
      }
    }
  }
}

.ec-addressRole {
  .ec-addressRole__actions {
    margin: 3rem 0;
    padding: 0;
    border: none;
  }
}

.ec-addressList {
  .ec-addressList__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px 0;
    padding: 0;
    border: none;

    .ec-addressList__remove {
      position: relative;

      .ec-icon {
        img {
          display: none;
        }

        &:after {
          content: "";
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
            no-repeat center center / 20px;
          -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
            no-repeat center center / 20px;
          background-color: rgb(var(--text-color));
        }
      }
    }

    .ec-addressList__address {
      margin: 0;
      padding: 0;
    }

    .ec-addressList__action {
      top: auto;
      margin: 0 0 0 auto;
      padding: 0;

      .ec-inlineBtn {
        width: 80px;
        min-width: 80px;
      }
    }
  }
}

.ec-withdrawRole,
.ec-withdrawConfirmRole {
  .ec-icon {
    display: none;
  }

  .ec-withdrawRole__title,
  .ec-withdrawConfirmRole__title {
    margin: 0 0 3rem 0;
    font-size: 2rem;
    font-weight: var(--body-font-weight-bold);
    text-align: center;
  }

  .ec-withdrawRole__description,
  .ec-withdrawConfirmRole__description {
    margin: 0 0 3rem 0;
    font-size: 1.4rem;
    text-align: center;
  }
}

.ec-cartRole__progress {
  .ec-progress {
    margin: 0 auto 3rem auto;

    .ec-progress__item {
      font-weight: var(--body-font-weight-normal);

      &:after {
        top: 19px;
        height: 2px;
        background: rgb(var(--text-color));
      }

      .ec-progress__number {
        margin: 0 0 0.5rem 0;
        width: 40px;
        height: 40px;
        color: rgb(var(--bg-color));
        font-size: 2rem;
        line-height: 40px;
        background: rgb(var(--text-color));

        .is-complete & {
          background: rgb(var(--notice-color));
        }
      }

      .ec-progress__label {
        color: rgb(var(--text-color));

        .is-complete & {
          color: rgb(var(--notice-color));
        }
      }
    }
  }
}

.ec-cartRole {
  .ec-cartRole__cart {
    margin: 0 auto;

    .ec-cartTable {
      .ec-cartHeader {
        background: rgb(var(--sub-bg-color));
        border-radius: var(--input-border-radius);

        .ec-cartHeader__label {
          padding: 12px;
          font-weight: var(--body-font-weight-bold);
          background: none;
        }
      }

      .ec-cartRow {
        .ec-cartRow__delColumn {
          border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

          a {
            display: block;
            position: relative;
            width: 30px;
            height: 30px;

            img {
              display: none;
            }

            &:after {
              content: "";
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 20px;
              -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 20px;
              background-color: rgb(var(--text-color));
            }
          }
        }

        .ec-cartRow__contentColumn {
          border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

          .ec-cartRow__summary {
            font-weight: var(--body-font-weight-normal);
          }
        }

        .ec-cartRow__amountColumn {
          border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

          .ec-cartRow__amountDownButton,
          .ec-cartRow__amountDownButtonDisabled {
            border: rgb(var(--text-color)) 1px solid;

            span {
              display: none;
            }

            &:after {
              content: "";
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-minus%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 16px;
              -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-minus%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 16px;
              background-color: rgb(var(--text-color));
            }
          }

          .ec-cartRow__amountUpButton,
          .ec-cartRow__amountUpButtonDisabled {
            border: rgb(var(--text-color)) 1px solid;

            span {
              display: none;
            }

            &:after {
              content: "";
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-plus%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%3E%3C%2Fline%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 16px;
              -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-plus%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%3E%3C%2Fline%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")
                no-repeat center center / 16px;
              background-color: rgb(var(--text-color));
            }
          }
        }

        .ec-cartRow__subtotalColumn {
          border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;
        }
      }
    }
  }

  .ec-cartRole__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin: 0;

    .ec-cartRole__total {
      width: 100%;
      text-align: end;

      .ec-cartRole__totalAmount {
        color: rgb(var(--notice-color));
      }
    }

    .ec-blockBtn--action,
    .ec-blockBtn--cancel {
      margin: 0 !important;
    }

    .ec-blockBtn--action {
      order: 3;
    }
  }
}

.ec-orderRole {
  display: flex;
  gap: var(--padding);

  &:after {
    display: none;
  }

  .ec-orderRole__detail {
    padding: 0;
    width: 65%;

    .ec-rectHeading {
      margin: 3rem 0 1.5rem 0;

      .ec-orderAccount & {
        margin-block-start: 0;
      }

      .h1,
      .h2,
      .h3,
      .h4,
      .h5,
      .h6,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 0;
        padding: 8px 12px;
        font-size: 1.6rem;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight-bold);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        background: rgb(var(--sub-bg-color));
        border-radius: var(--input-border-radius);
      }
    }

    .ec-orderDelivery {
      .ec-orderDelivery__title {
        display: flex;
        justify-content: space-between;
        padding: 0;
        font-size: 1.6rem;
        font-weight: var(--body-font-weight-bold);

        .ec-orderDelivery__change {
          position: relative;
          inset: auto;

          .ec-inlineBtn {
            padding: 0;
            min-width: auto;
            font-size: 1.4rem;
            border: none;
            text-decoration: underline;
          }
        }
      }

      .ec-orderDelivery__item {
        .ec-borderedList {
          border: none;

          li {
            border-block-end: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

            .ec-imageGrid {
              border: none;
            }
          }
        }
      }

      .ec-selects {
        border: none;
      }
    }
  }

  .ec-orderRole__summary {
    padding: 0;
    width: 35%;

    .ec-totalBox {
      padding: var(--padding);
      text-align: center;
      background: rgb(var(--sub-bg-color));
      border-radius: var(--input-border-radius);

      .ec-totalBox__total,
      .ec-totalBox__paymentTotal {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-end;
        font-size: 1.2rem;
        font-weight: var(--body-font-weight-bold);
        border-block-start: rgb(var(--text-color) / var(--border-opacity)) 1px solid;

        .ec-totalBox__price,
        .ec-totalBox__taxLabel {
          font-size: 2rem;
          font-weight: var(--body-font-weight-bold);
        }
        .ec-totalBox__taxLabel {
          font-size: 1.2rem;
        }
      }

      .ec-totalBox__taxRate {
        display: flex;
        flex-wrap: wrap;
      }

      .ec-totalBox__pointBlock {
        padding: 0;
        background: none;

        .ec-totalBox__spec {
          font-size: 1.2rem;

          .ec-font-bold {
            font-weight: var(--body-font-weight-normal);
          }
        }
      }

      .ec-totalBox__btn {
        display: flex;
        flex-direction: row-reverse;
        gap: 1rem;
        margin: 2rem 0 0 0;

        .ec-blockBtn--action,
        .ec-blockBtn--cancel {
          width: 50%;
          min-width: auto;
          font-size: 1.2rem;
          font-weight: var(--body-font-weight-normal);
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;

    .ec-orderRole__detail {
      width: 100%;
    }

    .ec-orderRole__summary {
      width: 100%;
    }
  }

  .ec-orderOrder {
    .ec-definitions {
      dt {
        font-weight: var(--body-font-weight-normal);
      }
    }
  }

  .ec-orderMails {
    .ec-orderMail {
      .ec-orderMail__link {
        a {
          color: currentColor;
          text-decoration: underline;
        }
      }

      .ec-orderMail__close {
        a {
          color: currentColor;
          text-decoration: underline;
        }
      }
    }
  }
}

.ec-historyRole {
  .ec-historyRole__contents {
    color: rgb(var(--text-color));

    .ec-historyListHeader {
      .ec-historyListHeader__date {
        font-size: 1.4rem;
        font-weight: var(--body-font-weight-normal);
      }

      .ec-definitions {
        dt {
          font-weight: var(--body-font-weight-normal);
        }
      }

      .ec-historyListHeader__action {
        .ec-inlineBtn {
          font-size: 1.2rem;
        }
      }
    }

    .ec-historyRole__detail {
      .ec-imageGrid {
        .ec-imageGrid__content {
          .ec-historyRole__detailTitle {
            font-size: 1.4rem;
            font-weight: var(--body-font-weight-normal);
          }

          .ec-historyRole__detailPrice {
            font-size: 1.4rem;
            font-weight: var(--body-font-weight-normal);
          }
        }
      }
    }
  }
}