@charset "UTF-8";

.top-section{
  color: var(--color-theme-text-default);
}

.top-section img{
  width: 100%;
  height: auto;
  display: block;
}

.top-section__inner{
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .top-section__inner{
    margin-inline: auto;
    padding-inline: 0;
    width: max(1300 * (100vw / 1600), 95%);
    max-width: 1300px;
  }
}

.top-product-section{
  margin: 6rem 0;
}

.top-product-section .top-section__inner{
  padding: 0;
}

.top-product-section .c-heading{
  padding-inline: 1.5rem;
}

.top-product-section .product-slider{
  margin-top: 2.4rem;
}

.top-product-section .swiper-wrapper{
  padding-inline: 1.5rem;
}

.top-product-section .c-product__image{
  position: relative;
  overflow: hidden;
}

.top-product-section .c-product__image :where(img){
  transition: scale var(--transition-default);
}

.top-product-section .c-product__soldout{
  padding-block: 0.5rem 0.3rem;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 1.2rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  background-color: rgb(102 102 102 / 0.3);
  color: var(--color-white);
}

@media (min-width: 768px){
  .top-product-section .c-product__soldout{
    padding-block: 0.6rem 0.4rem;
    font-size: 1.3rem;
  }
}

.top-product-section .c-product__rank{
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 0.2rem;
  width: 4rem;
  height: auto;
  aspect-ratio: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-theme-border-02);
  border-radius: 0.5rem 0 0.5rem 0;
}

.top-product-section .c-product__rank .prefix{
  display: block;
  font-size: 1rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
}

.top-product-section .c-product__rank .numeric{
  font-size: 1.5rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
}

.top-product-section .c-product__name{
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--color-theme-text-default);
}

.top-product-section .c-product__catchcopy{
  margin-top: 0.7rem;
  font-size: 1.2rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 1.375;
  color: var(--color-theme-text-sub-02);
}

.top-product-section .c-product__price{
  margin-top: 0.8rem;
}

.top-product-section .product__price--item{
  display: flex;
  align-items: baseline;
}

.top-product-section .product__price--item[data-price="discount"]{
  color: var(--color-theme-emphasis);
}

.top-product-section .product__price--discountrate{
  padding: 0.15rem 0.27rem;
  margin-right: 0.5rem;
  display: block;
  font-size: 1.1rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1;
  align-self: center;
  background-color: var(--color-theme-emphasis);
  color: var(--color-white);
}

.top-product-section .product__price--item[data-price="discount"] + .product__price--item[data-price="proper"]{
  position: relative;
  width: fit-content;
}

.top-product-section .product__price--item[data-price="discount"] + .product__price--item[data-price="proper"]::after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 100%;
  height: 1px;
  background-color: var(--color-theme-text-sub-01);
}

@media (min-width: 768px){
  .top-product-section .product__price--discountrate{
    padding: 0.3rem 0.27rem 0.1rem;
    font-size: 1.3rem;
    align-self: start;
  }
}

.top-product-section .product__price--numeric{
  font-size: 1.9rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1.1053;
}

.top-product-section .product__price--suffix{
  margin-left: 0.5em;
  font-size: 1.2rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1.75;
}

.top-product-section .c-product__icon--list{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.top-product-section .c-product__icon--item,
.top-product-section .c-product__icon--item img{
  width: 100%;
  height: auto;
}

.top-product-section .product-slider__pagination{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.top-product-section .product-slider__navigation{
  padding: 0;
  width: 1.5rem;
  position: absolute;
  top: 20.5rem;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  z-index: 2;
}

.top-product-section .product-slider__navigation--prev{
  left: 0;
}

.top-product-section .product-slider__navigation--next{
  right: 0;
}

.top-product-section .c-button{
  margin: 2rem auto 0;
  padding: 1.8rem 0 1.5rem;
  display: block;
  width: 24rem;
  font-size: 1.3rem;
  font-weight: var(--fw-m);
  letter-spacing: 0.1em;
  line-height: 1;
  background-color: var(--color-theme-primary);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.813%22%20height%3D%228.707%22%20viewBox%3D%220%200%2024.813%208.707%22%3E%20%3Cg%20transform%3D%22translate(-883.394%20-2474.146)%22%3E%20%3Cpath%20d%3D%22M2869.431%2C2483.473h24%22%20transform%3D%22translate(3776.825%204961.973)%20rotate(180)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M2893.325%2C2474.214l4%2C4-4%2C4%22%20transform%3D%22translate(-1989.825%200.286)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 2.4rem;
  background-position: center right 1.5rem;
  text-align: center;
  border-radius: 0.5rem;
  color: var(--color-white);
  transition: background-color var(--transition-default), background-position var(--transition-default);
}

@media (hover: hover) {
  .top-product-section .c-product__link:hover .c-product__image :where(img){
    scale: 1.03;
  }

  .top-product-section .c-button:hover{
    background-color: var(--color-theme-clickable);
    background-position: center right 1.5rem;
  }
}

@media (max-width: 767px){
  .top-product-section .swiper-slide{
    width: 19.8rem!important;
  }
}

@media (min-width: 768px){
  .top-product-section{
    margin: 10rem auto 0;
  }

  .top-product-section .top-section__inner{
    width: max(calc(min(1300 * (100vw / 1600)) + min(100 * (100vw / 1600))), 95%);
    max-width: calc(1300px + 100px);
  }

  .top-product-section .c-heading{
    padding-inline: 5rem;
  }

  .top-product-section .product-slider{
    margin-top: 3rem;
    padding-inline: 5rem;
    position: relative;
  }

  .top-product-section .swiper-wrapper{
    padding-inline: 0;
  }

  .top-product-section .c-product__rank .prefix{
    font-size: 1.1rem;
  }

  .top-product-section .c-product__rank .numeric{
    font-size: 1.8rem;
  }

  .top-product-section .c-product__name{
    margin-top: 1.7rem;
    font-size: 1.5rem;
    line-height: 1.75;
  }

  .top-product-section .c-product__catchcopy{
    margin-top: 0.6rem;
    font-size: 1.4rem;
    line-height: 1.2857;
  }

  .top-product-section .c-product__price{
    margin-top: 1rem;
  }

  .top-product-section .product__price--numeric{
    font-size: 2rem;
  }

  .top-product-section .c-product__icon--list{
    gap: 0.43rem 0.4rem;
  }

  .top-product-section .product-slider__pagination{
    margin-top: 2.4rem;
    gap: 1rem;
  }

  .top-product-section .c-button{
    margin: 2.6rem auto 0;
    width: 30rem;
    font-size: 1.5rem;
    background-position: center right 2rem;
  }
}

.top-section[data-section="mv"] .mv-slider{
  position: relative;
}

.top-section[data-section="mv"] .mv-slider__navigation{
  padding: 0;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 1.5rem;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
}

.top-section[data-section="mv"] .mv-slider__navigation--prev{
  left: 3rem;
}

.top-section[data-section="mv"] .mv-slider__navigation--next{
  right: 3rem;
}

.top-section[data-section="mv"] .mv-slider__pagination{
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

@media (min-width: 768px) {
  .top-section[data-section="mv"]{
    margin-top: 2rem;
  }

  .top-section[data-section="mv"] .swiper-slide{
    width: calc(1000 * (100vw / 1600));
    max-width: 1000px;
    transition: opacity var(--transition-default);
  }

  .top-section[data-section="mv"] .swiper-slide:not(.swiper-slide-active){
    opacity: 0.3;
  }

  .top-section[data-section="mv"] .mv-slider__pagination{
    gap: 1rem;
  }
}

.top-section[data-section="subbanner"]{
  margin: 3rem 0 0;
  width: 100%;
}

.sub-banner__wrapper{
  width: 100%;
  overflow: auto;
}

.sub-banner__list{
  padding-inline: 1.5rem;
  width: fit-content;
  display: flex;
  gap: 1rem;
}

.sub-banner__item{
  width: 25rem;
  overflow: hidden;
}

.sub-banner__item img{
  transition: scale var(--transition-default);
}

@media (hover: hover) {
  .sub-banner__item--link:hover img{
    scale: 1.03;
  }
}

@media (min-width: 768px) {
  .top-section[data-section="subbanner"]{
    margin: 5rem auto 0;
    width: max(1300 * (100vw / 1600), 95%);
    max-width: 1300px;
  }

  .sub-banner__list{
    padding-inline: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .sub-banner__item{
    width: 100%;
  }
}

.top-section[data-section="category-list"]{
  margin: 4rem 0 0;
}

.top-section[data-section="category-list"] .category__list{
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1rem;
}

.top-section[data-section="category-list"] .category__item--link{
  display: grid;
  gap: 1.2rem;
}

.top-section[data-section="category-list"] .category__item--image{
  margin: auto;
  width: 7.2rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-theme-border-03);
  border-radius: 50%;
  transition: border-color var(--transition-default);
}

.top-section[data-section="category-list"] .category__item--image img{
  transition: scale var(--transition-default);
}

.top-section[data-section="category-list"] .category__item--name{
  font-size: 1.3rem;
  font-weight: var(--fw-m);
  letter-spacing: 0.05em;
  line-height: 1.3846;
  text-align: center;
  color: var(--color-theme-text-default);
  transition: color var(--transition-default);
}

@media (hover: hover) {
  .top-section[data-section="category-list"] .category__item--link:hover .category__item--image{
    border-color: var(--color-theme-clickable);
  }

  .top-section[data-section="category-list"] .category__item--link:hover .category__item--image img{
    scale: 1.03;
  }

  .top-section[data-section="category-list"] .category__item--link:hover .category__item--name{
    font-weight: var(--fw-b);
    color: var(--color-theme-clickable);
  }
}

@media (min-width: 768px) {
  .top-section[data-section="category-list"]{
    margin: 8rem auto 0;
  }

  .top-section[data-section="category-list"] .category__list{
    margin-top: 3.2rem;
    grid-template-columns: repeat(9, 1fr);
    gap: 2.7rem;
  }

  .top-section[data-section="category-list"] .category__item--link{
    gap: 1.5rem;
  }

  .top-section[data-section="category-list"] .category__item--image{
    width: min(11rem, 100%);
  }

  .top-section[data-section="category-list"] .category__item--name{
    font-size: 1.4rem;
    line-height: 1.3929;
  }
}

.top-section[data-section="ranking"]{
  margin: 6rem 0;
  padding: 6rem 0;
  background-color: var(--color-theme-bg-01);
}

.top-section[data-section="ranking"] .product-tab__selector--list{
  margin: 2.3rem auto 0;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 3rem);
  background-color: var(--color-white);
  border-radius: 100vh;
}

.top-section[data-section="ranking"] .product-tab__selector--button{
  padding: 1.3rem 1.5rem;
  font-size: 1.4rem;
  font-weight: var(--fw-m);
  letter-spacing: 0.05em;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 100vh;
  color: var(--color-theme-text-sub-02);
  cursor: pointer;
  transition: background-color var(--transition-default), color var(--transition-default);
}

.top-section[data-section="ranking"] .product-tab__selector--button.active{
  background-color: var(--color-theme-main);
  color: var(--color-white);
}

.top-section[data-section="ranking"] .top-product__wrapper:not(.active){
  display: none;
}

.top-section[data-section="ranking"] .product-slider{
  margin-top: 2rem;
}

@media (hover: hover){
  .top-section[data-section="ranking"] .product-tab__selector--button:hover:not(.active){
    background-color: var(--color-theme-main);
    color: var(--color-white);
  }
}

@media (min-width: 768px){
  .top-section[data-section="ranking"]{
    margin: 9.6rem 0 10rem;
    padding: 10rem 0;
  }

  .top-section[data-section="ranking"] .product-tab__selector--list{
    margin: 3.3rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
    width: calc(100% - 10rem);
  }

  .top-section[data-section="ranking"] .product-tab__selector--button{
    padding: 1.7rem 1.5rem;
    width: 100%;
    font-size: 1.6rem;
  }

  .top-section[data-section="ranking"] .product-slider{
    margin-top: 2.4rem;
  }
}

.top-content--column{
  margin: 6rem 0;
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .top-content--column{
    margin: 10rem auto;
    width: max(1300 * (100vw / 1600), 95%);
    max-width: 1300px;
    grid-template-columns: 1fr 33.0769%;
    gap: 5rem;
  }
}

.top-content[data-content="users-photo"]{
  padding: 0 1.5rem;
}

.top-content[data-content="users-photo"] .c-heading--ja{
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.1em;
  line-height: 2.0769;
  color: var(--color-theme-text-sub-02);
}

.top-content[data-content="users-photo"] .c-heading--en{
  font-size: 2.2rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.1em;
  line-height: 1.4091;
  text-transform: uppercase;
  color: var(--color-theme-text-default);
}

.top-content[data-content="users-photo"] .top-content__inner{
  padding: 3.2rem 1.5rem 4rem;
  border-radius: 1.5rem;
  background-color: #DCE2EB;
}

.top-content[data-content="users-photo"] .users-photo__list{
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.top-content[data-content="users-photo"] .users-photo__item{
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}

.top-content[data-content="users-photo"] .users-photo__item--link{
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
}

.top-content[data-content="users-photo"] .users-photo__item:has(.users-photo__modal) .users-photo__item--link{
  cursor: pointer;
}

.top-content[data-content="users-photo"] .users-photo__item img{
  width: 100%;
  height: auto;
}

.top-content[data-content="users-photo"] .instagram-link{
  margin: 1.5rem 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
}

.top-content[data-content="users-photo"] .instagram-link__icon{
  width: 1.6rem;
  height: 100%;
  aspect-ratio: 1;
}

.top-content[data-content="users-photo"] .instagram-link__icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.top-content[data-content="users-photo"] .instagram-link__text{
  font-size: 1.2rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1.4167;
  text-transform: uppercase;
  color: var(--color-theme-text-sub-01);
}

body:has(.top-content[data-content="users-photo"] .users-photo__modal.show),
body:has(.top-content[data-content="users-photo"] .users-photo__modal[open]){
  overflow: hidden;
}

.top-content[data-content="users-photo"] .users-photo__modal{
  width: 100%;
  height: 100%;
  max-width: unset;
  max-height: unset;
  padding: 0;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: transparent;
}

.top-content[data-content="users-photo"] .users-photo__modal.show{
  display: block;
  z-index: 8;
}

.top-content[data-content="users-photo"] .users-photo__modal::backdrop{
  background-color: transparent;
}

.top-content[data-content="users-photo"] .users-photo__modal--bg{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgb(from var(--color-theme-text-default) r g b / 0.1);
  backdrop-filter: blur(0.5rem);
}

.top-content[data-content="users-photo"] .users-photo__modal--frame{
  padding: 4.3rem 1.5rem 0;
  width: 92%;
  height: 80svh;
  position: absolute;
  left: 50%;
  bottom: 3rem;
  translate: -50% 0;
  background-color: var(--color-white);
  box-shadow: 0 0 1rem rgb(0 0 0 / 0.16);
  overflow: hidden;
}

.top-content[data-content="users-photo"] .users-photo__modal--close{
  padding: 0;
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  color: var(--color-theme-text-default);
}

.top-content[data-content="users-photo"] .users-photo__modal--close .icon{
  width: 1rem;
  height: 100%;
  aspect-ratio: 1;
}

.top-content[data-content="users-photo"] .users-photo__modal--inner{
  padding-bottom: 1.5rem;
  height: 100%;
  overflow: auto;
}

.top-content[data-content="users-photo"] .users-photo__modal--detail{
  margin-top: 2rem;
}

.top-content[data-content="users-photo"] .users-photo__modal .instagram-link{
  margin: 0;
  justify-content: flex-start;
}

.top-content[data-content="users-photo"] .users-photo__modal--text{
  margin-top: 1.5rem;
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 2;
  color: var(--color-theme-text-default);
}

@media (min-width: 768px) {
  .top-content[data-content="users-photo"] .users-photo__modal--frame{
    padding: 6rem;
    width: min(125rem, 1250px);
    height: calc(100svh - 3rem - var(--height-header) - 2rem);
  }

  .top-content[data-content="users-photo"] .users-photo__modal--close{
    top: 1.7rem;
    right: 2rem;
  }

  .top-content[data-content="users-photo"] .users-photo__modal--inner{
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 47.7876% 1fr;
    gap: 4.4247%;
    overflow: hidden;
  }

  .top-content[data-content="users-photo"] .users-photo__modal--detail{
    margin-top: 0;
    height: 100%;
    overflow: auto;
  }

  .top-content[data-content="users-photo"] .users-photo__modal--text{
    margin-top: 2rem;
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .top-content[data-content="users-photo"] .users-photo__item--link{
    position: relative;
  }

  .top-content[data-content="users-photo"] .users-photo__item:has(.users-photo__modal) .users-photo__item--link::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.3);
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M14%2C10.4A3.6%2C3.6%2C0%2C1%2C0%2C17.6%2C14%2C3.6%2C3.6%2C0%2C0%2C0%2C14%2C10.4ZM14%2C8a6%2C6%2C0%2C1%2C1-6%2C6A6%2C6%2C0%2C0%2C1%2C14%2C8Zm7.8-.3a1.5%2C1.5%2C0%2C1%2C1-1.5-1.5A1.5%2C1.5%2C0%2C0%2C1%2C21.8%2C7.7ZM14%2C4.4c-2.969%2C0-3.453.008-4.834.069a6.528%2C6.528%2C0%2C0%2C0-2.158.4%2C3.483%2C3.483%2C0%2C0%2C0-1.3.843%2C3.468%2C3.468%2C0%2C0%2C0-.844%2C1.3%2C6.5%2C6.5%2C0%2C0%2C0-.4%2C2.157C4.408%2C10.49%2C4.4%2C10.953%2C4.4%2C14c0%2C2.969.008%2C3.453.069%2C4.834a6.533%2C6.533%2C0%2C0%2C0%2C.4%2C2.157%2C3.732%2C3.732%2C0%2C0%2C0%2C2.138%2C2.14%2C6.533%2C6.533%2C0%2C0%2C0%2C2.16.4c1.325.062%2C1.788.069%2C4.835.069%2C2.969%2C0%2C3.453-.008%2C4.834-.069a6.552%2C6.552%2C0%2C0%2C0%2C2.157-.4%2C3.732%2C3.732%2C0%2C0%2C0%2C2.14-2.139%2C6.53%2C6.53%2C0%2C0%2C0%2C.4-2.159c.062-1.325.069-1.788.069-4.835%2C0-2.969-.008-3.453-.069-4.834a6.552%2C6.552%2C0%2C0%2C0-.4-2.158%2C3.494%2C3.494%2C0%2C0%2C0-.843-1.3%2C3.46%2C3.46%2C0%2C0%2C0-1.3-.844%2C6.508%2C6.508%2C0%2C0%2C0-2.157-.4C17.511%2C4.407%2C17.048%2C4.4%2C14%2C4.4ZM14%2C2c3.26%2C0%2C3.667.012%2C4.947.072a8.829%2C8.829%2C0%2C0%2C1%2C2.913.558%2C5.847%2C5.847%2C0%2C0%2C1%2C2.126%2C1.384A5.89%2C5.89%2C0%2C0%2C1%2C25.371%2C6.14a8.876%2C8.876%2C0%2C0%2C1%2C.558%2C2.913C25.986%2C10.333%2C26%2C10.74%2C26%2C14s-.012%2C3.667-.072%2C4.947a8.857%2C8.857%2C0%2C0%2C1-.558%2C2.913%2C6.133%2C6.133%2C0%2C0%2C1-3.51%2C3.51%2C8.879%2C8.879%2C0%2C0%2C1-2.913.558C17.668%2C25.985%2C17.261%2C26%2C14%2C26s-3.667-.012-4.947-.072a8.859%2C8.859%2C0%2C0%2C1-2.913-.558%2C6.132%2C6.132%2C0%2C0%2C1-3.51-3.51%2C8.854%2C8.854%2C0%2C0%2C1-.558-2.913C2.016%2C17.667%2C2%2C17.26%2C2%2C14s.012-3.667.072-4.947A8.822%2C8.822%2C0%2C0%2C1%2C2.631%2C6.14%2C5.855%2C5.855%2C0%2C0%2C1%2C4.015%2C4.014%2C5.876%2C5.876%2C0%2C0%2C1%2C6.141%2C2.63a8.848%2C8.848%2C0%2C0%2C1%2C2.913-.558C10.334%2C2.015%2C10.741%2C2%2C14%2C2Z%22%20transform%3D%22translate(0.998%201)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 3rem;
    transition: opacity var(--transition-default);
  }

  .top-content[data-content="users-photo"]  .users-photo__item:has(.users-photo__modal) .users-photo__item--link:hover::after{
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .top-content[data-content="users-photo"]{
    padding-inline: 0;
  }

  .top-content[data-content="users-photo"] .top-content__inner{
    padding: 3.2rem 3.5rem 4.4rem;
    height: 100%;
  }

  .top-content[data-content="users-photo"] .c-heading{
    gap: 0.8rem;
  }

  .top-content[data-content="users-photo"] .c-heading--ja{
    font-size: 1.4rem;
  }

  .top-content[data-content="users-photo"] .c-heading--en{
    font-size: 2.5rem;
  }

  .top-content[data-content="users-photo"] .users-photo__list{
    margin-top: 2.5rem;
  }

  .top-content[data-content="users-photo"] .instagram-link{
    margin-top: 2.5rem;
  }

  .top-content[data-content="users-photo"] .instagram-link__icon{
    width: 1.8rem;
  }

  .top-content[data-content="users-photo"] .instagram-link__text{
    font-size: 1.3rem;
  }
}

.top-content[data-content="users-video"]{
  padding: 0 1.5rem;
}

.top-content[data-content="users-video"] .c-heading--ja{
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.1em;
  line-height: 2.0769;
  color: var(--color-theme-text-sub-02);
}

.top-content[data-content="users-video"] .c-heading--en{
  font-size: 2.2rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.1em;
  line-height: 1.4091;
  text-transform: uppercase;
  color: var(--color-theme-text-default);
}

.top-content[data-content="users-video"] .top-content__inner{
  padding: 3.2rem 1rem 4rem;
  background-color: #E1EAE4;
  border-radius: 1.5rem;
}

.top-content[data-content="users-video"] .c-heading{
  padding: 0 0.5rem;
}

.top-content[data-content="users-video"] .users-video__wrapper{
  margin: 1.5rem auto 0;
  width: 32.5rem;
  position: relative;
}

.top-content[data-content="users-video"] blockquote{
  margin: 0!important;
  min-width: unset!important;
}

.top-content[data-content="users-video"] iframe{
  width: 22.5rem;
}

.top-content[data-content="users-video"] .swiper-navigation-prev{
  left: 0;
  bottom: 0;
}

.top-content[data-content="users-video"] .swiper-navigation-next{
  right: 0;
  bottom: 0;
}

@media (min-width: 768px){
  .top-content[data-content="users-video"]{
    padding: 0;
    grid-column: 2/3;
  }

  .top-content[data-content="users-video"] .top-content__inner{
    padding: 3.2rem 3rem 4rem;
  }

    .top-content[data-content="users-video"] .c-heading{
    gap: 0.8rem;
  }

  .top-content[data-content="users-video"] .c-heading--ja{
    font-size: 1.4rem;
  }

  .top-content[data-content="users-video"] .c-heading--en{
    font-size: 2.5rem;
  }

  .top-content[data-content="users-video"] .users-video__wrapper{
    margin: 2.4rem auto 0;
    width: auto;
  }
  
  .top-content[data-content="users-video"] .user-video__slider{
    height: 100%;
  }

  .top-content[data-content="users-video"] blockquote{
    margin: auto!important;
    width: 32.5rem;
  }

  .top-content[data-content="users-video"] .swiper-navigation{
    top: 45.5%;
    translate: 0 -50%;
  }
}

.top-section[data-section="feature-list"] .top-section__inner{
  padding: 0;
}

.top-section[data-section="feature-list"] .c-heading{
  padding-inline: 1.5rem;
}

.top-section[data-section="feature-list"] .feature__list{
  margin-top: 2.4rem;
}

.top-section[data-section="feature-list"] .feature__item--date{
  margin-top: 2rem;
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--color-theme-text-sub-02);
}

.top-section[data-section="feature-list"] .feature__item--title{
  margin-top: 0.8rem;
  font-size: 1.5rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 1.75;
  color: var(--color-theme-text-default);
}

.top-section[data-section="feature-list"] .swiper-pagination{
  margin-top: 1.2rem;
}

.top-section[data-section="feature-list"] .feature__viewmore{
  margin: 2rem 0 0;
}

.top-section[data-section="feature-list"] .c-button{
  margin: auto;
  padding: 1.6rem 0;
  width: 24rem;
  display: block;
  font-size: 1.3rem;
  font-weight: var(--fw-m);
  letter-spacing: 0.1em;
  line-height: 1;
  background-color: var(--color-theme-primary);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.813%22%20height%3D%228.707%22%20viewBox%3D%220%200%2024.813%208.707%22%3E%20%3Cg%20transform%3D%22translate(-883.394%20-2474.146)%22%3E%20%3Cpath%20d%3D%22M2869.431%2C2483.473h24%22%20transform%3D%22translate(3776.825%204961.973)%20rotate(180)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M2893.325%2C2474.214l4%2C4-4%2C4%22%20transform%3D%22translate(-1989.825%200.286)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 2.4rem;
  background-position: center right 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  color: var(--color-white);
  transition: background-color var(--transition-default), background-position var(--transition-default);
}

@media (hover: hover) {
  .top-section[data-section="feature-list"] .c-button:hover{
    background-color: var(--color-theme-clickable);
    background-position: center right 1.5rem;
  }
}

@media (min-width: 768px){
  .top-section[data-section="feature-list"] .c-heading{
    padding-inline: 0;
  }

  .top-section[data-section="feature-list"] .feature__list{
    margin-top: 3.3rem;
  }

  .top-section[data-section="feature-list"] .swiper-wrapper{
    transform: none!important;
  }

  .top-section[data-section="feature-list"] .feature__item--title{
    font-size: 1.7rem;
  }

  .top-section[data-section="feature-list"] .feature__viewmore{
    margin-top: 3rem;
  }

  .top-section[data-section="feature-list"] .c-button{
    padding: 1.7rem 0;
    width: 30rem;
    font-size: 1.5rem;
    background-position: center right 2rem;
  }
}

.top-content[data-content="about"]{
  margin: 6rem 0;
  position: relative;
}

.top-content[data-content="about"] .about__content{
  padding: 3.2rem 2.5rem 3.6rem;
  width: 86.6666%;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 2.5rem;
  background-color: rgb(255 255 255 / 0.8);
}

.top-content[data-content="about"] .about__heading{
  font-size: 2.4rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  color: var(--color-theme-text-default);
}

.top-content[data-content="about"] .about__text{
  margin-top: 0.5rem;
  font-size: 1.3rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
  color: var(--color-theme-text-default);
}

.top-content[data-content="about"] .about__logo{
  margin: 1.4rem auto 0;
  width: 12rem;
}

@media (min-width: 768px){
  .top-content[data-content="about"]{
    margin: 10rem auto;
  }

  .top-content[data-content="about"] .about__inner{
    margin: auto;
    width: calc(1300 * (100vw / 1600));
    max-width: 1300px;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .top-content[data-content="about"] .about__bg{
    aspect-ratio: 1600 / 650;
    overflow: hidden;
  }

  .top-content[data-content="about"] .about__content{
    padding: min(5rem, calc(50 * (100vw / 1600))) min(5.8rem, calc(58 * (100vw / 1600))) min(6rem, calc(60 * (100vw / 1600)));
    position: static;
    width: min(65rem, calc(650 * (100vw / 1600)));
    translate: none;
  }

  .top-content[data-content="about"] .about__heading{
    font-size: min(3rem, calc(30 * (100vw / 1600)));
  }

  .top-content[data-content="about"] .about__text{
    margin-top: min(2.5rem, calc(25 * (100vw / 1600)));
    font-size: min(1.6rem, calc(16 * (100vw / 1600)));
  }

  .top-content[data-content="about"] .about__logo{
    margin: min(3rem, calc(30 * (100vw / 1600))) auto 0;
    width: min(18rem, calc(180 * (100vw / 1600)));
  }
}

.top-section[data-section="news"] .news__list{
  margin-top: 2.4rem;
}

.top-section[data-section="news"] .news__item{
  border-bottom: 1px solid var(--color-theme-border-03);
}

.top-section[data-section="news"] .news__item:first-of-type{
  border-top: 1px solid var(--color-theme-border-03);
}

.top-section[data-section="news"] .news__item--link{
  padding: 1.5rem 0 1.2rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.top-section[data-section="news"] .news__item--date{
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-book);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--color-theme-text-sub-02);
  text-align: left;
}

.top-section[data-section="news"] .news__item--content{
  margin-top: 0.4rem;
}

.top-section[data-section="news"] .news__item--content span{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.4rem;
  font-weight: var(--fw-l);
  letter-spacing: 0.03em;
  line-height: 1.75;
  text-align: left;
  color: var(--color-theme-text-default);
}

.top-section[data-section="news"] .news__item--content span a{
  text-decoration: underline;
}

.top-section[data-section="news"] .news__viewmore{
  margin: 3rem 0 0;
}

.top-section[data-section="news"] .c-button{
  margin: auto;
  padding: 1.6rem 0;
  width: 24rem;
  display: block;
  font-size: 1.3rem;
  font-weight: var(--fw-m);
  letter-spacing: 0.1em;
  line-height: 1;
  background-color: var(--color-theme-primary);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.813%22%20height%3D%228.707%22%20viewBox%3D%220%200%2024.813%208.707%22%3E%20%3Cg%20transform%3D%22translate(-883.394%20-2474.146)%22%3E%20%3Cpath%20d%3D%22M2869.431%2C2483.473h24%22%20transform%3D%22translate(3776.825%204961.973)%20rotate(180)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M2893.325%2C2474.214l4%2C4-4%2C4%22%20transform%3D%22translate(-1989.825%200.286)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 2.4rem;
  background-position: center right 2rem;
  color: var(--color-white);
  border-radius: 0.5rem;
  text-align: center;
  transition: background-color var(--transition-default), background-position var(--transition-default);
}

@media (hover: hover) {
  .top-section[data-section="news"] .c-button:hover{
    background-color: var(--color-theme-clickable);
    background-position: center right 1.5rem;
  }
}

@media (min-width: 768px){
  .top-section[data-section="news"] .top-section__inner{
    display: grid;
    grid-template-columns: 16.9230% 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 10rem;
  }

  .top-section[data-section="news"] .c-heading{
    grid-area: 1/1/2/2;
  }

  .top-section[data-section="news"] .news__container{
    grid-area: 1/2/3/3;
  }

  .top-section[data-section="news"] .news__list{
    margin-top: 0;
  }

  .top-section[data-section="news"] .news__item--link{
    padding: 2.4rem 3rem 2.2rem;
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
    width: 100%;
    text-align: left;
  }

  .top-section[data-section="news"] .news__item--date{
    font-size: 1.3rem;
  }

  .top-section[data-section="news"] .news__item--content{
    margin-top: 0;
  }

  .top-section[data-section="news"] .news__item--content span{
    font-size: 1.5rem;
  }

  .top-section[data-section="news"] .news__viewmore{
    margin-top: 3rem;
  }

  .top-section[data-section="news"] .c-button{
    padding: 1.7rem 0;
    width: 100%;
    font-size: 1.5rem;
  }
}

@media (min-width: 768px){
  .top-product-section[data-section="new-arrival"] .c-product__icon--list,
  .top-product-section[data-section="hit-item"] .c-product__icon--list{
    grid-template-columns: repeat(4, 1fr);
  }
}