@import url("/assets/js/plugin/swiper/swiper-bundle.min.css") layer(foundation);
@layer component {
  .c-tab-switcher {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: calc(10px / var(--fz-base, 16px) * 1rem);
  }
  .c-tab-switcher .c-button.is-current {
    --button-bgc: #000;
    --button-clr: #fff;
  }
}
@layer project {
  .p-section:has(.c-tab-switcher) {
    --section-content-mt: clamp(1.25rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
  }
  .p-section[data-variant*="bg:"] .p-section__inner, .p-section[data-variant*="border:"] .p-section__inner {
    background: var(--section-bg, #fff);
    padding-block: clamp(3rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
  }
  .p-section[data-variant*="bg:light-gray"] {
    --section-bg: #F5F5F5;
  }
  .p-section[data-variant*="bdc:light-gray"] {
    --section-bdc: #ddd;
  }
  .p-section[data-variant*="border:block"] {
    border-block: 1px solid var(--section-bdc, #000);
  }
  .p-section__inner {
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
    padding-inline: clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    border-radius: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .p-section__header {
    display: grid;
    gap: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .p-section__header[data-variant*="justify:center"] {
    justify-content: center;
  }
  .p-section__heading {
    font-size: clamp(1.5rem, calc(28px / var(--design-width, 1440px) * 100vw), 1.75rem);
    font-weight: bold;
    line-height: 1.1;
    font-family: var(--ff-en);
  }
  .p-section__content:not(:first-child) {
    margin-top: var(--section-content-mt, clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem));
  }
}
@layer page {
  .pg-home {
    --content-min-margin: 10;
    --content-base-margin: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(4rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
    padding-bottom: clamp(4rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
  }
  .pg-hero-slider {
    --content-base-margin: 20;
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
    border-radius: calc(20px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
  }
  .pg-hero-slider:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
  }
  .pg-hero-slider:not(.swiper-initialized) .swiper-slide {
    grid-area: 1/-1;
    position: relative;
    z-index: 2;
  }
  .pg-hero-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
  }
  .pg-hero-slider:not(.swiper-initialized) .swiper-pagination {
    display: none;
  }
  .pg-hero-slider .swiper-slide {
    position: relative;
  }
  .pg-hero-slider .swiper-slide img {
    width: 100%;
  }
  .pg-hero-slider .swiper-pagination {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height: 6px;
    --swiper-pagination-bullet-inactive-opacity: 1;
    padding: clamp(1.25rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
    width: -moz-fit-content;
    width: fit-content;
    left: auto;
    right: 0;
    bottom: 0;
    display: flex;
    gap: clamp(0.625rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
  }
  .pg-hero-slider .swiper-pagination-bullet {
    border: 1px solid color-mix(in srgb, transparent, var(--swiper-pagination-color) 60%);
  }
  .pg-hero-slider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: transparent;
  }
  .pg-hero-slider__content {
    --button-h: 30px;
    --button-fz: clamp(0.75rem, calc(13px / var(--design-width, 1440px) * 100vw), 0.8125rem);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: clamp(1.875rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem) clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    z-index: 10;
    color: #fff;
  }
  .pg-hero-slider__content .c-button {
    margin-top: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .pg-hero-slider__title {
    font-size: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
    font-weight: bold;
    font-family: var(--ff-en);
    line-height: 1.1;
  }
  .pg-hero-slider__text {
    font-weight: bold;
    line-height: 1.5;
  }
  .pg-hero-slider__text:not(:first-child) {
    margin-top: calc(10px / var(--fz-base, 16px) * 1rem);
  }
  .pg-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.625rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
  }
  .pg-categories:not(.is-current) {
    display: none;
  }
  @media (min-width: 36.0625em) {
    .pg-categories {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .pg-category-card__img {
    aspect-ratio: 290/387;
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
  }
  .pg-category-card__img img {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pg-category-card__title {
    font-size: clamp(0.875rem, calc(15px / var(--design-width, 1440px) * 100vw), 0.9375rem);
    margin-top: clamp(0.625rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  .pg-journal {
    --journal-gap-x: clamp(0.625rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    --journal-gap-y: calc(32px / var(--fz-base, 16px) * 1rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "MAIN MAIN" "SUB1 SUB2";
    gap: var(--journal-gap-y) var(--journal-gap-x);
  }
  @media (min-width: 62.0625em) {
    .pg-journal {
      --journal-gap-x: clamp(2rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
      grid-template-columns: 540fr 680fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: "MAIN SUB1" "MAIN SUB2" "MAIN SUB3";
    }
  }
  .pg-journal-card {
    grid-area: var(--journal-card-area);
    line-height: 1.5;
  }
  .pg-journal-card__inner {
    display: flex;
    flex-direction: var(--journal-card-direction, row);
    gap: clamp(1.25rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
  }
  .pg-journal-card__img {
    flex-shrink: 0;
    width: var(--journal-card-img-w);
    height: -moz-fit-content;
    height: fit-content;
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
    margin: 0;
  }
  .pg-journal-card__img img {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
  }
  .pg-journal-card__content {
    display: grid;
    gap: calc(16px / var(--fz-base, 16px) * 1rem);
  }
  .pg-journal-card__texts {
    display: grid;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .pg-journal-card__date {
    color: var(--clr-text-gray);
    font-family: var(--ff-en);
    font-size: clamp(0.6875rem, calc(12px / var(--design-width, 1440px) * 100vw), 0.75rem);
  }
  .pg-journal-card__title {
    font-size: clamp(1rem, calc(18px / var(--design-width, 1440px) * 100vw), 1.125rem);
    font-weight: bold;
  }
  .pg-journal-card__lead {
    font-size: clamp(0.8125rem, calc(14px / var(--design-width, 1440px) * 100vw), 0.875rem);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--journal-line-clamp);
    overflow: hidden;
    word-break: break-all;
  }
  .pg-journal-card .c-svg--bracket-right {
    --svg-w: 5px;
  }
  .pg-journal-card:first-child {
    --journal-card-img-w: min(100%, 480px);
  }
  .pg-journal-card:not(:first-child) {
    --journal-card-img-w: 100%;
  }
  .pg-journal-card:nth-child(1) {
    --journal-card-area: MAIN;
  }
  .pg-journal-card:nth-child(2) {
    --journal-card-area: SUB1;
  }
  .pg-journal-card:nth-child(3) {
    --journal-card-area: SUB2;
  }
  .pg-journal-card:nth-child(4) {
    --journal-card-area: SUB3;
  }
  @media (max-width: 62em) {
    .pg-journal-card {
      --journal-card-direction: column;
      --journal-line-clamp: 3;
    }
    .pg-journal-card:nth-child(4) {
      display: none;
    }
  }
  @media (min-width: 62.0625em) {
    .pg-journal-card {
      --journal-line-clamp: 2;
    }
    .pg-journal-card:first-child {
      --journal-card-direction: column;
      padding-right: var(--journal-gap-x);
      border-right: 1px solid var(--clr-border-gray);
    }
    .pg-journal-card:not(:first-child) {
      --journal-card-img-w: clamp(10rem, calc(200px / var(--design-width, 1440px) * 100vw), 12.5rem);
    }
  }
  .pg-news {
    display: grid;
    gap: clamp(1rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
  }
  @media (min-width: 62.0625em) {
    .pg-news {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .pg-news-card {
    line-height: 1.5;
  }
  .pg-news-card__inner {
    display: grid;
    gap: calc(16px / var(--fz-base, 16px) * 1rem) calc(20px / var(--fz-base, 16px) * 1rem);
  }
  @media (max-width: 62em) {
    .pg-news-card__inner {
      grid-template-columns: auto minmax(0, 1fr);
    }
  }
  .pg-news-card__img {
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
    aspect-ratio: 290/387;
  }
  .pg-news-card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  @media (max-width: 62em) {
    .pg-news-card__img {
      width: 120px;
    }
  }
  .pg-news-card__content {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .pg-news-card__date {
    color: var(--clr-text-gray);
    font-family: var(--ff-en);
    font-size: clamp(0.6875rem, calc(12px / var(--design-width, 1440px) * 100vw), 0.75rem);
  }
  .pg-news-card__title {
    font-size: clamp(0.8125rem, calc(14px / var(--design-width, 1440px) * 100vw), 0.875rem);
  }
  .pg-instafeed__header {
    text-align: center;
  }
  .pg-instafeed__heading {
    font-size: clamp(1.5rem, calc(28px / var(--design-width, 1440px) * 100vw), 1.75rem);
    font-weight: bold;
    font-family: var(--ff-en);
    line-height: 1.1;
  }
  .pg-instafeed__heading small {
    font-size: clamp(0.75rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
  }
  @media (max-width: 36em) {
    .pg-instafeed__heading small {
      display: block;
    }
  }
  .pg-instafeed__content:not(:first-child) {
    margin-top: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .pg-instafeed .c-button {
    --button-h: calc(44px / var(--fz-base, 16px) * 1rem);
    margin-inline: auto;
    margin-top: clamp(2rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
  }
  .pg-instafeed .c-button .c-svg--instagram {
    --svg-w: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .pg-instafeed .c-button .c-svg--blank {
    --svg-w: calc(12px / var(--fz-base, 16px) * 1rem);
  }
  .pg-recommend {
    display: grid;
    gap: calc(10px / var(--fz-base, 16px) * 1rem) calc(20px / var(--fz-base, 16px) * 1rem);
  }
  @media (min-width: 62.0625em) {
    .pg-recommend {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .pg-recommend-slider {
    width: 100%;
    padding: calc(40px / var(--fz-base, 16px) * 1rem) clamp(1.25rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
    background-color: #f5f5f5;
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .pg-recommend-slider__heading {
    text-align: center;
    font-size: clamp(1.25rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
    font-weight: bold;
    font-family: var(--ff-en);
  }
  .pg-recommend-slider .swiper-button {
    width: calc(44px / var(--fz-base, 16px) * 1rem);
    height: calc(44px / var(--fz-base, 16px) * 1rem);
    background-color: color-mix(in srgb, transparent, #000 5%);
    border-radius: 50%;
  }
  .pg-recommend-slider .swiper-button::before {
    content: "";
    width: calc(10px / var(--fz-base, 16px) * 1rem);
    height: calc(8px / var(--fz-base, 16px) * 1rem);
    background: url("../../common/img/arrow-right.svg") center center no-repeat;
    background-size: contain;
  }
  .pg-recommend-slider .swiper-button-prev {
    left: 0;
  }
  .pg-recommend-slider .swiper-button-prev::before {
    transform: rotate(180deg);
  }
  .pg-recommend-slider .swiper-button-next {
    right: 0;
  }
  .pg-recommend-item {
    max-width: 330px;
    margin-inline: auto;
    display: grid;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .pg-recommend-item__content {
    text-align: center;
    line-height: 1.5;
  }
  .pg-recommend-item__title {
    font-size: clamp(0.875rem, calc(15px / var(--design-width, 1440px) * 100vw), 0.9375rem);
    font-weight: 700;
  }
  .pg-recommend-item__price {
    font-size: calc(14px / var(--fz-base, 16px) * 1rem);
    font-family: var(--ff-en), var(--ff-base);
  }
  .pg-recommend-item__price small {
    font-size: calc(10px / var(--fz-base, 16px) * 1rem);
  }
  .pg-look-slider {
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
  }
  .pg-look-slider .swiper,
  .pg-look-slider .swiper-wrapper {
    height: 100%;
  }
  .pg-look-slider .swiper-slide {
    height: auto;
  }
  .pg-look-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .pg-products {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: calc(min(var(--content-min-margin, 24) * -1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * -100vw) - clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem));
    padding-inline: clamp(1.875rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    overflow: hidden;
  }
  .pg-products-slider {
    grid-area: 1/-1;
  }
  .pg-products-slider:not(.is-current) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .pg-products-slider .swiper {
    overflow: visible;
  }
  .pg-products-slider .swiper-controls {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 16px;
    gap: calc(40px / var(--fz-base, 16px) * 1rem);
  }
  .pg-products-slider .swiper-scrollbar,
  .pg-products-slider .swiper-button-prev,
  .pg-products-slider .swiper-button-next {
    position: static;
  }
  .pg-products-slider .swiper-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(10px / var(--fz-base, 16px) * 1rem);
  }
  .pg-products-slider .swiper-scrollbar {
    height: 2px;
    background-color: #F5F5F5;
    flex: 1;
  }
  .pg-products-slider .swiper-scrollbar-drag {
    background: #000;
  }
  .pg-products-slider .swiper-button {
    width: calc(44px / var(--fz-base, 16px) * 1rem);
    height: calc(44px / var(--fz-base, 16px) * 1rem);
    background-color: color-mix(in srgb, transparent, #000 5%);
    border-radius: 50%;
    position: relative;
    inset: 0;
    margin: 0;
  }
  .pg-products-slider .swiper-button::before {
    content: "";
    width: calc(10px / var(--fz-base, 16px) * 1rem);
    height: calc(8px / var(--fz-base, 16px) * 1rem);
    background: url("../../common/img/arrow-right.svg") center center no-repeat;
    background-size: contain;
  }
  .pg-products-slider .swiper-button-prev::before {
    transform: rotate(180deg);
  }
  .pg-products-item__img {
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
  }
  .pg-products-item__content:not(:first-child) {
    margin-top: calc(16px / var(--fz-base, 16px) * 1rem);
  }
  .pg-products-item__title {
    font-size: clamp(0.875rem, calc(15px / var(--design-width, 1440px) * 100vw), 0.9375rem);
  }
  .pg-products-item__price {
    font-size: calc(14px / var(--fz-base, 16px) * 1rem);
    font-family: var(--ff-en), var(--ff-base);
  }
  .pg-products-item__price small {
    font-size: calc(10px / var(--fz-base, 16px) * 1rem);
  }
}