/* ------------------------------------------------
  .main-area.top
------------------------------------------------ */
/* ----- common -----*/
@media screen and (min-width: 768px){
  .global-contents__inner{
    width: 100%;
  }
  .top__section--inner{
    width: min(90%, 120rem);
    margin: 0 auto;
  }
}

#home{
  letter-spacing: 0.08em;
}

.global-contents{
  min-width: 0;
}

.top__section--wrapper {
  padding: 6rem 1.5rem 0;
}
.p-top-section__title {
  justify-content: left;
  flex-direction: row-reverse;
  margin: 0 auto 2rem 0;
  gap: 1rem;
  padding-bottom: 1rem;
  position: relative;
  width: 100%;
}
.p-top-section__title::after {
  content: "";
  width: 43%;
  border: 1px solid var(--color-secondary);
  position: absolute;
  bottom: 0rem;
}
.p-top-section__title::before {
  content: "";
  width: 100%;
  border: 1px solid var(--color-border);
  position: absolute;
  bottom: 0rem;
}
.c-page-title--ja {
  margin-bottom: -0.3rem;
}
.c-page-title__link {
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  padding-right: 2.7rem;
  position: absolute;
  right: 0;
  bottom: 1.5rem;
}
.c-page-title__link::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3LjQ2NyIgaGVpZ2h0PSIxMi4xMDUiIHZpZXdCb3g9IjAgMCA3LjQ2NyAxMi4xMDUiPiA8ZyBpZD0i44Kw44Or44O844OXXzExIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NTMuMDg2IDQ5Mi45NDgpIHJvdGF0ZSgtOTApIj4gPGxpbmUgaWQ9Iue3ml80OSIgZGF0YS1uYW1lPSLnt5ogNDkiIHkyPSI2LjU1OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgyLjI1NyAyNTU0LjUpIHJvdGF0ZSgtNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMyOTVkYjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIvPiA8bGluZSBpZD0i57eaXzUwIiBkYXRhLW5hbWU9Iue3miA1MCIgeTI9IjYuNTU5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OTEuNTMzIDI1NTQuNSkgcm90YXRlKDQ1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjk1ZGI1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.top-product__list a {
  text-decoration-line: none;
  color: var(--color-black);
}
.product__item--image img {
  margin-bottom: 1.5rem;
}
.product__item--icon {
  position: relative;
  gap: 0.3rem;
}
.product__item--name {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 768px){
  .top__section--wrapper {
    padding: 10rem 0 0;
  }
  .p-top-section__title {
    margin-bottom: 3rem;
    padding-bottom: 1.2rem;
  }
  .p-top-section__title::after {
    width: 19%;
  }
  [data-section-name="information"] .p-top-section__title::after {
    width: 25%;
  }
  .c-page-title--ja {
    font-size: 1.4rem;
    margin-bottom: -0.5rem;
  }
  .c-page-title--en {
    font-size: 3rem;
  }
  .c-page-title__link {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 767px){
  .rainking-swiper-button-prev, 
  .rainking-swiper-button-next {
    display: none;
  }
}

@media screen and (min-width: 768px){
  div:has(>.js-rainkingSlider) {
    position: relative;
  }
  .rainking-swiper-button-prev, 
  .rainking-swiper-button-next {
    display: block;
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 8rem;
    z-index: 2;
  }
  .rainking-swiper-button-prev {
    left: -3rem;
  }
  .rainking-swiper-button-next {
    right: -3rem;
  }
}

/* ----- top-mv -----*/
.top-mv {
  /* margin: 0 calc(50% - 50vw); */
}
.top-mv__inner {
  /* margin: 0 calc(50% - 50vw); */
  /* width: 100vw; */
  position: relative;
}

.top-mv__inner picture{
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.top-mv__contents {
  position: absolute;
  width: 100%;
  padding: 3rem 2.5rem;
}
.top-mv__logo {
  width: 15.5rem;
}
.top-mv__title {
  margin-top: 1.5rem;
}
.top-mv__title--1 {
  display: flex;
  gap: 0.4rem;
}
.top-mv__title--1 span {
  display: grid;
  font-size: 2.3rem;
  line-height: 2.3rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  width: 3.6rem;
  height: 3.6rem;
  text-align: center;
  align-items: center;
  font-weight: bold;
}
.top-mv__title--1 span.bkc-secondary {
  color: var(--color-white);
  background: var(--color-secondary);
}
.top-mv__title--1 span.bkc-primary {
  color: var(--color-white);
  background: var(--color-primary);
}
.top-mv__title--2 {
  font-weight: bold;
  font-size: 2.7rem;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
  margin-top: 0.5rem;
}
.top-mv__desc {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #1a1311;
  margin-top: 1rem;
}
.top-mv__note {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #1a1311;
  margin-top: 1.5rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) and (max-width: 1700px) {
  .top-mv__contents {
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% - 50rem);
    z-index: 2;
    padding: 0;
    width: auto;
  }
  .top-mv__logo {
    width: 18.8rem;
  }
  .top-mv__title {
    display: flex;
    gap: 0.8rem;
  }
  .top-mv__title--1 span {
    font-size: 3.4rem;
    line-height: 3.4rem;
    width: 5rem;
    height: 5rem;
  }
  .top-mv__title--2 {
    font-size: 3.4rem;
    margin-top: 0.5rem;
  }
  
  .top-mv__inner picture img {
    width: 100%;
    height: 38rem;
    /* left: calc(50% + 13rem);
    position: relative;
    transform: translateX(-50%);
    z-index: 1; */
    object-fit: cover;
    object-position: 40% center;
  }
  .top-mv__desc {
    font-size: 2.0rem;
    margin-top: 1.9rem;
  }
  .top-mv__note {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
}
@media screen and (min-width: 1700px){
  .top-mv__contents {
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% - 50rem);
    z-index: 2;
    padding: 0;
    width: auto;
  }
  .top-mv__title {
    display: flex;
    gap: 0.8rem;
  }
  .top-mv__title--1 span {
    font-size: 3.4rem;
    width: 5rem;
    height: 5rem;
  }
  .top-mv__title--2 {
    font-size: 3.4rem;
    margin-top: 0.5rem;
  }
  .top-mv__inner picture img {
    width: 100%;
    height: auto;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    z-index: 1;
  }
  .top-mv__desc {
    font-size: 2.0rem;
    margin-top: 1.9rem;
  }
  .top-mv__note {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
}

/* ----- top_banner -----*/
.top_banner {
  background-color: var(--color-bg-form);
  /* margin: 0 calc(50% - 50vw); */
  padding-block: 1.5rem;
}
.top_banner__inner {
  width: var(--container-default);
  margin: auto;
  padding-inline: 1.5rem;
}
.top_banner__item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
}
.top_banner__item--title {
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-right: 2rem;
}
top_banner__item--text {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

/* ----- top-information -----*/
.top__section--wrapper[data-section-name="information"] {
  padding-block: 5rem 6rem;
}
.p-top-information__list {
  display: grid;
  row-gap: 1.5rem;
}
.p-top-information__list--item {
  border-bottom: 1px solid #eee;
  padding-bottom: 1.5rem;
}
.p-top-information__list--date {
  font-weight: var(--fw-medium);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 2.25rem;
  color: var(--color-secondary);
}
.p-top-information__list--text {
  margin-top: 0.3rem;
}
.p-top-information__list--text , 
.p-top-information__list--text a {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 2.25rem;
  color: var(--color-black);
}
@media screen and (min-width: 768px){
  .top__section--wrapper[data-section-name="information"] {
    padding-block: 8rem 10rem;
  }
  .top__section--wrapper[data-section-name="information"] .top__section--inner {
    max-width: 90rem;
    margin-inline: auto;
  }
  .p-top-information__contents {
    padding-top: 1rem;
  }
  .p-top-information__list {
    row-gap: 2rem;
  }
  .p-top-information__list--item {
    display: flex;
    gap: 3rem;
    padding-bottom: 2rem;
  }
  .p-top-information__list--text,
  .p-top-information__list--text a {
    margin-top: 0;
  }
}

/* ----- top-category -----*/
.top__section--wrapper[data-section-name="category"] {
  background-color: var(--color-bg-form);
  background-image: ;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE2MCAxNjAiPiA8ZGVmcz4gPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPiA8cmVjdCBpZD0i6ZW35pa55b2iXzI1NjkiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDI1NjkiIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQwIDEyMDMpIiBmaWxsPSIjZmZmIi8+IDwvY2xpcFBhdGg+IDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoLTIiPiA8cmVjdCBpZD0i6ZW35pa55b2iXzI1NDIiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDI1NDIiIHdpZHRoPSI4NjIiIGhlaWdodD0iMjQyIiBmaWxsPSIjZjJmMmYyIi8+IDwvY2xpcFBhdGg+IDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoLTMiPiA8cmVjdCBpZD0i6ZW35pa55b2iXzI1MzkiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDI1MzkiIHdpZHRoPSIyMDIiIGhlaWdodD0iMjAzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSIjZjJmMmYyIi8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPGcgaWQ9IuODnuOCueOCr+OCsOODq+ODvOODl18xMCIgZGF0YS1uYW1lPSLjg57jgrnjgq/jgrDjg6vjg7zjg5cgMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTQwIC0xMjAzKSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtcGF0aCkiPiA8ZyBpZD0i44Oe44K544Kv44Kw44Or44O844OXXzciIGRhdGEtbmFtZT0i44Oe44K544Kv44Kw44Or44O844OXIDciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQzOCAxMTIxKSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtcGF0aC0yKSI+IDxnIGlkPSLjg6zjgqTjg6Tjg7xfMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzAyIDc1Ljk5OSkiPiA8ZyBpZD0i44Kw44Or44O844OXXzIzMjQiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDIzMjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPiA8ZyBpZD0i44Kw44Or44O844OXXzIzMjMiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDIzMjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPiA8ZyBpZD0i44Kw44Or44O844OXXzIzMjIiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDIzMjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzE5IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzE5IiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoLTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yNTMxNiIgZGF0YS1uYW1lPSLjg5HjgrkgMjUzMTYiIGQ9Ik0xODUuNjU0LDE0OC4xMDhhNTEuNzI3LDUxLjcyNywwLDAsMSwyMy41LTI5LjYxOGwtLjAxNy0uMDE2YTQ1LjksNDUuOSwwLDAsMCwyMi4zNzgtMzkuNDUzaC0zMy4ybC4wMTctLjAxNmExMC42MDcsMTAuNjA3LDAsMCwxLDIuNTk1LDE3LjFsLS41MzcuNDhhMjIuOTg0LDIyLjk4NCwwLDEsMSw0Ljk1My0yOS4yNzZ2LS4wMTdsMTkuODQtMTEuNTU5LjAzMi4wMTdhNDUuOTYsNDUuOTYsMCwxLDAtNjMuMDM0LDYyLjgzMWguMDMzYTUxLjYsNTEuNiwwLDAsMSwyMy40NDQsMjkuNDM4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODQuNjY0IC0xOS4wNDcpIiBmaWxsPSIjZjJmMmYyIi8+IDwvZz4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzIwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzIwIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoLTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yNTMxNyIgZGF0YS1uYW1lPSLjg5HjgrkgMjUzMTciIGQ9Ik0xNC41NDIsMjU3LjQzNGE0NS45NTEsNDUuOTUxLDAsMSwwLDY4LjkxNS0zOS44MjZsLjEzLjA3M2E1MS42NzgsNTEuNjc4LDAsMCwxLTIyLjkxNC0yOS4wNjRsLS4wNDkuMDE2Yy0zLjY2LDEyLjQxMy0xMS44NiwyMi4xNTktMjIuNjU0LDI4Ljc2NGwtLjI1My4xMTNhNDUuNzYyLDQ1Ljc2MiwwLDAsMC04Ljk4LDYuN2wuMDMyLS4wMzIuMDY1LjA0OSwxNi4xNTUsMTYuMjM2YTIyLjE4OSwyMi4xODksMCwwLDEsNC4yMTQtMy4wNDJ2LS4wMTdzNy41NDEtNC40LDExLjI1OC04LjY3MWwuMDMyLjAzMmMzLjc1LDQuMjcxLDExLjI2Niw4LjYzOSwxMS4yNjYsOC42MzlsLjAxNy4wMTdhMjIuOTgxLDIyLjk4MSwwLDEsMS0zNC4yNzEsMjAuMDFIMTQuNTQyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTguODYzIC0xMTMuMzE2KSIgZmlsbD0iI2YyZjJmMiIvPiA8L2c+IDxnIGlkPSLjgrDjg6vjg7zjg5dfMjMyMSIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjMyMSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtcGF0aC0zKSI+IDxwYXRoIGlkPSLjg5HjgrlfMjUzMTgiIGRhdGEtbmFtZT0i44OR44K5IDI1MzE4IiBkPSJNMzM0LjA1NCwyMTcuMzkyaC0uMDE2YTUxLjYzOCw1MS42MzgsMCwwLDEtMjIuNzg1LTI5LjAyMyw1MS42OTQsNTEuNjk0LDAsMCwxLTIzLjQ4NCwyOS4zNDlsLjA4MS0uMDMyYTQ1Ljk3Niw0NS45NzYsMCwwLDAsNS4wNDQsODEuNzY3bC4wMzItLjAwOGEyNy41NTYsMjcuNTU2LDAsMCwxLDM2Ljg2Ni0uMTU0bC0uMDE2LjAzM2E0Niw0NiwwLDAsMCw0LjI3OC04MS45M20tNi4xMDksNTUuNTkxLS4wMTYuMDE2YTM0LjUsMzQuNSwwLDAsMC0xNi41LTQuMiwzNC4xMzUsMzQuMTM1LDAsMCwwLTE2LjgxNCw0LjM5M2wtLjAyNC0uMDA4YTIyLjk3OCwyMi45NzgsMCwxLDEsMzMuMzUxLS4yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYwLjc5IC0xMTMuMTY2KSIgZmlsbD0iI2YyZjJmMiIvPiA8L2c+IDwvZz4gPC9nPiA8L2c+IDwvZz4gPC9nPiA8L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: bottom 0 right 0;
  padding-block: 5rem;
}

.top__section--wrapper[data-section-name="category"] .top__section--inner{
  width: 100%;
}

.top-category__content-list {
  display: grid;
  gap: 0.5rem;
}
.top-category__text--link {
  display: grid;
  align-items: center;
  /* column-gap: var(--megamenu-spacer, 2ch); */
  grid-template-columns: 1fr 0.56rem;
  width: fit-content;
  color: var(--color-text-default);
  font-size: 1.4rem;
  line-height: 1.5;
  text-decoration: none;
  position: relative;
}
.top-category__content-list[data-structure=parent] > li summary, 
.top-category__content-list[data-structure=parent] > li > a {
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  height: 5.1rem;
  width: 100%;
  background-color: #fff;
  padding-inline: 2rem;
  border-radius: 4px;
}
.top-category__content-list-item .accordion__details {
  background-color: var(--color-white);
}
.top-category__content-list[data-structure="child"] {
  display: grid;
  gap: 1.5rem 6rem;
  padding: 2rem 3rem 3rem;
}
.top-category__content-list[data-structure="child"] > li > * {
  padding-left: 3rem;
}
.top-category__text--link::after {
  content: "";
  width: 2rem;
  height: auto;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI1IDI1Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzA1IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzA1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU1IC0yNTI3KSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfMTIiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDEyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTkuMTY3IDI1MzEuMTY3KSI+IDxyZWN0IGlkPSLplbfmlrnlvaJfNDgiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDQ4IiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHJ4PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4xNjcgLTQuMTY3KSIgZmlsbD0iIzI5NWRiNSIvPiA8ZyBpZD0i44Kw44Or44O844OXXzExIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi44MzMgMTIuNTY0KSByb3RhdGUoLTkwKSI+IDxsaW5lIGlkPSLnt5pfNDkiIGRhdGEtbmFtZT0i57eaIDQ5IiB5Mj0iNS40NjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIHJvdGF0ZSgtNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIvPiA8bGluZSBpZD0i57eaXzUwIiBkYXRhLW5hbWU9Iue3miA1MCIgeTI9IjUuNDY2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjczKSByb3RhdGUoNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIvPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==");
  background-position-y: calc(50% + var(--link-arrow-offset));
  background-repeat: no-repeat;
  background-size: contain;
  transition: translate var(--animation-hover), scale var(--animation-hover);
  transform-origin: left center;
  transition-timing-function: linear;
  pointer-events: none;
  position: absolute;
  right: 2rem;
}
.top-category__content-list-item:has([data-structure="child"]) .top-category__text--link::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI1IDI1Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzA1IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzA1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDU2IC0yNTI3KSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfMTIiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDEyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NzYuODMzIDI1MzEuMTY3KSByb3RhdGUoOTApIj4gPHJlY3QgaWQ9IumVt+aWueW9ol80OCIgZGF0YS1uYW1lPSLplbfmlrnlvaIgNDgiIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgcng9IjEyLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjE2NyAtNC4xNjcpIiBmaWxsPSIjMjk1ZGI1Ii8+IDxnIGlkPSLjgrDjg6vjg7zjg5dfMTEiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjgzMyAxMi41NjQpIHJvdGF0ZSgtOTApIj4gPGxpbmUgaWQ9Iue3ml80OSIgZGF0YS1uYW1lPSLnt5ogNDkiIHkyPSI1LjQ2NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkgcm90YXRlKC00NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIi8+IDxsaW5lIGlkPSLnt5pfNTAiIGRhdGEtbmFtZT0i57eaIDUwIiB5Mj0iNS40NjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuNzMpIHJvdGF0ZSg0NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIi8+IDwvZz4gPC9nPiA8L2c+PC9zdmc+");
  transform: rotate(0);
  transition-duration: 300ms;
  top: unset;
  transform-origin:center center;
}
.top-category__content-list-item:has([data-structure="child"]) [data-state-accordion="opened"] > .top-category__text--link::after {
  transform: rotate(180deg);
  transform-origin:center center;
}
.top-category__content-list .top-category__content-list .top-category__text--link::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3LjQ2NyIgaGVpZ2h0PSIxMi4xMDUiIHZpZXdCb3g9IjAgMCA3LjQ2NyAxMi4xMDUiPiA8ZyBpZD0i44Kw44Or44O844OXXzExIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1NTMuMDg2IDQ5Mi45NDgpIHJvdGF0ZSgtOTApIj4gPGxpbmUgaWQ9Iue3ml80OSIgZGF0YS1uYW1lPSLnt5ogNDkiIHkyPSI2LjU1OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgyLjI1NyAyNTU0LjUpIHJvdGF0ZSgtNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMyOTVkYjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIvPiA8bGluZSBpZD0i57eaXzUwIiBkYXRhLW5hbWU9Iue3miA1MCIgeTI9IjYuNTU5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OTEuNTMzIDI1NTQuNSkgcm90YXRlKDQ1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjk1ZGI1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg==");
  width: 1.3rem;
  height: 1.3rem;
  right: 0;
  left: 1rem;
}
@media screen and (min-width: 768px){

  .top-category__content-list[data-structure=parent] > li summary, 
  .top-category__content-list[data-structure=parent] > li > a {
    padding-inline: 1.5rem;
    padding-right: 3rem;
  }

  .top-category__text--link::after {
    right: 1.5rem;
  }
  
  .top__section--wrapper[data-section-name="category"] {
    /* margin: 0 calc(50% - 50vw); */
    padding: calc((100vw - min(100vw * 0.9, 120rem)) / 2);
    padding-block: 8rem;
  }
  .top-category__content-list {
     grid-template-columns: repeat(4, 1fr);
     gap: 1.2rem 1rem;
  }
  .top-category__content-list[data-structure=parent] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem 1.2rem;
  }
  .top-category__content-list[data-structure=child] {
    position: relative;
    margin-inline: calc(50% - 50vw);
    width: calc(100% * 4 + 1.2rem * 3);
    left: calc(((50% - 50vw) * -1));
    background-color: var(--color-white);
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1rem;
    padding: 3rem 5.5rem;
  }
  .top-category__content-list-item:nth-of-type(4n - 2) .top-category__content-list[data-structure=child] {
    left: calc(((50% - 50vw) * -1) - 100% - 1rem);
  }
  .top-category__content-list-item:nth-of-type(4n - 1) .top-category__content-list[data-structure=child] {
    left: calc(((50% - 50vw) * -1) - 200% - 2rem);
  }
  .top-category__content-list-item:nth-of-type(4n) .top-category__content-list[data-structure=child] {
    left: calc(((50% - 50vw) * -1) - 300% - 3rem);
  }
  .top-category__content-list[data-structure=parent] > li summary, 
  .top-category__content-list[data-structure=parent] > li > a {
    height: 7rem;
  }

  .top-category__text--link::after{
    width: 2.5rem;
  }

}

/* ----- top-recommend -----*/

.top-product__list::-webkit-scrollbar {
  width: 1rem;
  height: 0.5rem;
}
.top-product__list::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: var(--color-gray-600);
}
.top-product__list::-webkit-scrollbar-track {
  background: var(--color-gray-300);
  border-radius: 50px;
}

.product__item {
  position: relative;
}
.product__item .rank {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzM0IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzM0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41KSI+IDxwYXRoIGlkPSLjg5HjgrlfMjUzMjciIGRhdGEtbmFtZT0i44OR44K5IDI1MzI3IiBkPSJNNDQuNSw0NC41SDQuNVY0LjVoNDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNCAtNC41KSIgZmlsbD0iIzZmNmY2ZiIvPiA8L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  z-index: 2;
}
.product__item .rank1_,
.product__item .rank2_,
.product__item .rank3_{
  width: 3rem;
  height: 3.8rem;
}

.product__item .rank1_ {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDQwIDUwIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yMzMzIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAyMzMzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS4zNjQgLTEuMzY0KSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfMjMzNCIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjMzNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4zNjQgMS4zNjQpIj4gPHBhdGggaWQ9IuODkeOCuV8yNTMyNyIgZGF0YS1uYW1lPSLjg5HjgrkgMjUzMjciIGQ9Ik00NC41LDU0LjVsLTIwLTkuMDExTDQuNSw1NC41VjQuNWg0MFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjUgLTQuNSkiIGZpbGw9IiNkYmEzMDAiLz4gPC9nPiA8L2c+PC9zdmc+");
}
.product__item .rank2_ {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDQwIDUwIj4gPHBhdGggaWQ9IuODkeOCuV8yNTMyNyIgZGF0YS1uYW1lPSLjg5HjgrkgMjUzMjciIGQ9Ik00NC41LDU0LjVsLTIwLTkuMDExTDQuNSw1NC41VjQuNWg0MFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjUgLTQuNSkiIGZpbGw9IiM3YjhkOWYiLz48L3N2Zz4=");
}
.product__item .rank3_ {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDQwIDUwIj4gPHBhdGggaWQ9IuODkeOCuV8yNTMyNyIgZGF0YS1uYW1lPSLjg5HjgrkgMjUzMjciIGQ9Ik00NC41LDU0LjVsLTIwLTkuMDExTDQuNSw1NC41VjQuNWg0MFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjUgLTQuNSkiIGZpbGw9IiM5YTVjMmYiLz48L3N2Zz4=");
}
@media screen and (max-width: 767px){
  .p-top-recommend__contents .top-product__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 3rem;
  }

  .p-top-product__contents .top-product__list:not(:has(.swiper-wrapper)), 
  .p-top-product__contents .top-product__list .swiper-wrapper {
    display: flex;
    gap: 0.9rem;
    overflow: auto;
    padding-bottom: 2em;
  }

  .p-top-product__contents .top-product__list .product__item {
    min-width: calc((100% - (0.9rem * 1)) / 2); 
    width: calc((100vw - 1.5rem * 2 - 0.9rem) / 2);
  }

  .p-top-product__contents .top-product__list.top-product__list--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 0.9rem;
  }

}
@media screen and (min-width: 768px){
  .p-top-recommend__contents .top-product__list, 
  .p-top-ranking__contents .top-product__list, 
  .p-top-product__contents .top-product__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem 2.8rem;
  }

  .product__item .rank {
    width: 4rem;
    height: 4rem;
  }
  .product__item .rank1_,
  .product__item .rank2_,
  .product__item .rank3_ {
    width: 4rem;
    height: 5rem;
  }
}