/* ===============================================
  * 基礎 *
=============================================== */

[data-brand-name=ellips] {
  --color-text: #3B3B3B;

  --padding-horizontal-general: calc(10 * (100vw / 375));

  color: var(--color-text);
  font-family: var(--ff-ellips-base);
}
@media (min-width: 768px) {
  [data-brand-name=ellips] {
    --padding-horizontal-general: 0;
  }
}

[data-brand-name=ellips] svg {
  overflow: visible;
}

.sec-style {
  --padding-vertical: calc(45 * (100vw / 375));

  padding: var(--padding-vertical) var(--padding-horizontal-general);
}
@media (min-width: 768px) {
  .sec-style {
    --padding-vertical: 6rem;
  }
}

.section-bg__container > *:nth-child(odd) {
  background-color: var(--color-ellips-secondary);
}



/*
 * テキスト
 */

.block__ttl {
  display: grid;
  row-gap: calc(4 * (100vw / 375));
  justify-items: center;

  font-family: var(--ff-ellips-base);
  font-size: calc(27 * (100vw / 375));
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
}
@media (min-width: 768px) {
  .block__ttl {
    row-gap: .6rem;

    font-size: 3rem;
  }
}

.block__ttl > span:not(.block__ttl-inner--icon) {
  font-size: .44em;
}

.block__ttl-inner--icon {
  display: flex;
  align-items: center;
  column-gap: calc(11 * (100vw / 375));

  font-size: calc(27 * (100vw / 375));
  letter-spacing: .1em;
  line-height: 1;
}
@media (min-width: 768px) {
  .block__ttl-inner--icon {
    column-gap: 1.8rem;

    font-size: 3rem;
  }
}

.block__ttl-img-wrapper {
  display: flex;

  width: calc(20 * (100vw / 375));
  aspect-ratio: 1;
}
@media (min-width: 768px) {
  .block__ttl-img-wrapper {
    width: 2.4rem;
  }
}

.block__ttl-img-wrapper img {
  width: 100%;
  height: auto;
}


/*
 * ボタン
 */

.c-button--view-more {
  display: grid;
  place-content: center;

  width: min(65.3%, calc(245 * (100vw / 375)));
  margin: auto;
  padding: calc(15 * (100vw / 375));
  border: solid 1px #3B3B3B;

  font-size: calc(13 * (100vw / 375));
  letter-spacing: .1em;
  line-height: 1;
}
@media (min-width: 768px) {
  .c-button--view-more {
    width: min(65%, 24.5rem);

    font-size: 1.5rem;
    padding: 1.2rem;
  }
}

.c-button--view-more[target="_blank"] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: calc(15 * (100vw / 375));
  align-items: center;
}
@media (min-width: 768px) {
  .c-button--view-more[target="_blank"] {
    gap: 1.5rem;
  }
}

.c-button--view-more[target="_blank"]::before,
.c-button--view-more[target="_blank"]::after {
  content: "";
}

#instagramFeed .c-button--view-more {
  background-color: #3B3B3B;

  color: var(--white);
}

#instagramFeed .c-button--view-more::after {
  width: calc(9.8 * (100vw / 375));
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.82%22%20height%3D%229.812%22%20viewBox%3D%220%200%209.82%209.812%22%3E%20%3Cg%20id%3D%22_2%22%20transform%3D%22translate(-0.198)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_9472%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%209472%22%20transform%3D%22translate(0.198)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1165%22%20data-name%3D%22%E3%83%91%E3%82%B9%201165%22%20d%3D%22M96%2C8.131V0h8.131V8.131Zm.6-.6h6.929V.6H96.6Z%22%20transform%3D%22translate(-94.311)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1166%22%20data-name%3D%22%E3%83%91%E3%82%B9%201166%22%20d%3D%22M0%2C104.131V96H.6v7.53h7.53v.6Z%22%20transform%3D%22translate(0%20-94.319)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  #instagramFeed .c-button--view-more::after {
    width: .98rem;
  }
}

@media (min-width: 768px) {
  [data-brand-name=ellips] .open__button--plus {
    width: 7.7rem;
    height: 2.8rem;
    padding-left: .9rem;
    border-radius: .4rem;
    font-size: 1.4rem;
    top: -.4rem;
    right: 2.2rem;
  }

  [data-brand-name=ellips] .open__button--plus::before,
  [data-brand-name=ellips] .open__button--plus::after {
    right: .8rem;

    width: 1.3rem;
    height: .1rem;
  }
}




/* ===============================================
  * 各セクションのスタイル *
=============================================== */

/*
 * 共通
 */

.sec-style .c-button--view-more {
  margin-top: calc(30 * (100vw / 375));
}
@media (min-width: 768px) {
  .sec-style .c-button--view-more {
    margin-top: 3rem;
  }
}

.sec-style .block__ttl {
  margin-bottom: calc(20 * (100vw / 375));
}
@media (min-width: 768px) {
  .sec-style .block__ttl {
    margin-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .u-max-width--desktop {
    width: min(100%, 124rem);
    margin: auto;
    padding: 0 2rem;
  }
}


/*
 * CATEGORY - カテゴリ
 */

.category-list__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.83%;
}

.category-list__link-wrapper {
  display: grid !important;
  row-gap: .8rem;

  margin: 0;
}
@media (min-width: 768px) {
  .category-list__link-wrapper {
    grid-template-columns: 39.8% 1fr;
    align-items: center;
    column-gap: 5%;

    padding: .5rem;
    border: solid 1px #7B7B7B;
  }
}

.category-list__image-wrapper img {
  width: 100%;
  height: auto;
}

.category-list__text {
  font-size: calc(12 * (100vw / 375));
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 2;
  text-align: center;
}
@media (min-width: 768px) {
  .category-list__text {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .categoryTree {
    margin-top: 4rem;
  }
}

@media (min-width: 768px) {
  .categoryTree-ttl {
    font-size: 1.5rem;
  }
}


/*
 * RANKING - ランキング
 * NEW ARRIVALS - 新着商品
 */

.ranking_inner,
.newarrivals_inner {
  margin: 0;
}
@media (min-width: 768px) {
  .ranking_inner,
  .newarrivals_inner {
    margin: auto;
  }
}

.cardUnit-commonRanking,
.cardUnit-commonNewArrivals {
  --column-num: 2;

  display: grid;
  grid-template-columns: repeat(var(--column-num), 1fr);
  row-gap: calc(23.5 * (100vw / 375));
  column-gap: calc(5 * (100vw / 375));

  margin: 0;
}
@media (min-width: 768px) {
  .cardUnit-commonRanking {
    --column-num: 6;

    row-gap: 0;
    column-gap: 1.2rem;
  }
  .cardUnit-commonNewArrivals {
    --column-num: 4;

    row-gap: 0;
    column-gap: 2rem;
  }
}

.cardUnit-commonRanking .cardUnit__card,
.cardUnit-commonNewArrivals .cardUnit__card {
  --rank-width: calc(28 * (100vw / 375));
  --rank-height: var(--rank-width);

  width: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  .cardUnit-commonRanking .cardUnit__card,
  .cardUnit-commonNewArrivals .cardUnit__card {
    --rank-width: 3.4rem;
  }
}

.cardUnit-commonRanking .cardUnit__card .ranking__list-item__img-wrapper {
  padding-top: calc(var(--rank-height, 0rem) / 2);
}

.cardUnit-commonRanking .cardUnit__card .rankNum {
  top: 0;

  width: var(--rank-width);
  height: var(--rank-height);

  font-family: var(--ff-futura), sans-serif;
}

.cardUnit-commonRanking .cardUnit__card .rankNum-round.rankNum_1,
.cardUnit-commonRanking .cardUnit__card .rankNum-round.rankNum_2,
.cardUnit-commonRanking .cardUnit__card .rankNum-round.rankNum_3 {
  background: var(--color-ellips-primary);
  border: var(--color-ellips-primary);
}

.cardUnit-commonRanking .campaign-icon,
.cardUnit-commonNewArrivals .campaign-icon {
  font-family: var(--ff-noto-sans-jp), sans-serif !important;
}

.ranking__list-item__detail,
.newarrivals__list-item__detail {
  font-family: var(--ff-ellips-base) !important;
  letter-spacing: .02em;
}

.ranking__list-item__detail .ranking__list-item__detail--brandname,
.newarrivals__list-item__detail .newarrivals__list-item__detail--brandname {
  font-family: var(--ff-ellips-base) !important;
}

.ranking__list-item__detail--itemname,
.newarrivals__list-item__detail--itemname {
  color: #575757;
  font-size: calc(13 * (100vw / 375));
  font-weight: 400;
  white-space: normal;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 768px) {
  .ranking__list-item__detail--itemname,
  .newarrivals__list-item__detail--itemname {
    font-size: 1.5rem;
  }
}

.ranking__list-item__detail--price-text,
.newarrivals__list-item__detail--price-text {
  font-size: calc(12 * (100vw / 375));
  font-weight: 500;
}
@media (min-width: 768px) {
  .ranking__list-item__detail--price-text,
  .newarrivals__list-item__detail--price-text {
    font-size: 1.4rem;
  }
}

.ranking__list-item__detail--price-text .itemTax,
.newarrivals__list-item__detail--price-text .itemTax {
  font-size: .7em;
}

.ranking__list-item__detail--price-text--sale .price-text--regular,
.newarrivals__list-item__detail--price-text--sale .price-text--regular {
  position: relative;

  width: fit-content;

  text-decoration: none;
  white-space: nowrap;
}

.ranking__list-item__detail--price-text--sale .price-text--regular::before,
.newarrivals__list-item__detail--price-text--sale .price-text--regular::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 1px;
  margin: auto;
  background-color: var(--color-text);
}

.product-tag__list {
  --margin-vertical: calc(6 * (100vw / 375));

  display: grid;
  row-gap: calc(6 * (100vw / 375));

  margin: var(--margin-vertical) 0;
}
@media (min-width: 768px) {
  .product-tag__list {
    --margin-vertical: .8rem;

    row-gap: .5rem;
  }
}

.product-tag__list-item {
  display: flex;
  align-items: center;
  column-gap: calc(4 * (100vw / 375));
}
@media (min-width: 768px) {
  .product-tag__list-item {
    column-gap: .5rem;
  }
}

.product-tag__list-item::before {
  display: grid;
  place-content: center;
  flex-shrink: 0;

  width: calc(42 * (100vw / 375));
  height: calc(19 * (100vw / 375));
  background-color: #585858;
  border-radius: calc(2 * (100vw / 375));

  color: var(--white);
  font-size: .8em;
  font-weight: bold;
  line-height: 1;
  word-break: keep-all;
}
@media (min-width: 768px) {
  .product-tag__list-item::before {
    width: 4.9rem;
    height: 1.8rem;
    border-radius: .2rem;
  }
}

[class*="product-tag__text"] {
  font-size: calc(11 * (100vw / 375));
  letter-spacing: normal;
  line-height: 1.1;
}
@media (min-width: 768px) {
  [class*="product-tag__text"] {
    font-size: 1.2rem;
  }
}

.product-tag__text--series::before {
  content: "シリーズ";
}

.product-tag__text--nayami::before {
  content: "悩み";
}

.product-tag__text--kaori::before {
  content: "香り";
}


/*
 * FEATURE - 特集
 */

.cardUnit-featureList {
  --column-num: 2;

  display: grid;
  grid-template-columns: repeat(var(--column-num), 1fr);
  row-gap: calc(25 * (100vw / 375));
  column-gap: calc(7 * (100vw / 375));
}
@media (min-width: 768px) {
  .cardUnit-featureList {
    --column-num: 4;
    row-gap: 0;
    column-gap: 2rem;
  }
}

.cardUnit-featureList .cardUnit__card {
  width: 100%;
  margin: 0;
}

.cardUnit-featureList .cardUnit__card .feature__image-wrapper {
  aspect-ratio: 1;
}

.cardUnit-featureList .cardUnit__card .feature__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardUnit-featureList .cardUnit__card .feature__information-container {
  display: grid;
  row-gap: calc(3 * (100vw / 375));

  margin-top: calc(6 * (100vw / 375));

  font-family: var(--ff-noto-sans-jp), sans-serif;
  font-size: calc(13 * (100vw / 375));
  letter-spacing: .02em;
}
@media (min-width: 768px) {
  .cardUnit-featureList .cardUnit__card .feature__information-container {
    row-gap: .5rem;

    margin-top: 1.4rem;

    font-size: 1.5rem;
  }
}

.feature__information-container .feature__text--date {
  color: #575757;
  font-size: calc(11 * (100vw / 375));
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 768px) {
  .feature__information-container .feature__text--date {
    font-size: 1.4rem;
  }
}

.feature__information-container .feature__text--title {
  font-size: calc(13 * (100vw / 375));
  font-weight: 500;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .feature__information-container .feature__text--title {
    font-size: 1.5rem;
  }
}


/*
 * LIVE - ライブ
 */

@media (min-width: 768px) {
  .crosslive__inner {
    max-width: 124rem;
    margin: auto;
    padding: 0 2rem;
  }
}


/*
 * Instagram - インスタグラム
 */

.instagram-feed__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3 * (100vw / 375));
}
@media (min-width: 768px) {
  .instagram-feed__items {
    gap: .3rem;

    width: min(100%, 70rem);
    margin: auto;
  }
}

.instagram-feed__item {
  aspect-ratio: 1;
}

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


/*
 * ページ下部コンテンツ
 */

#page-bottom {
  display: grid;
  row-gap: calc(45 * (100vw / 375));
}
@media (min-width: 768px) {
  #page-bottom {
    row-gap: 6rem;
  }
}

@media (min-width: 768px) {
  #brandConcept .mov__wrapper {
    width: min(100%, 70rem);
    margin: auto;
  }
}

#brandConcept iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

#sns .sns-col2__inner {
  column-gap: calc(36 * (100vw / 375));
  justify-content: center;
}
@media (min-width: 768px) {
  #sns .sns-col2__inner {
    column-gap: 3.6rem;
  }
}

#sns .sns-col2__inner .cardUnit__card svg {
  width: calc(34 * (100vw / 375));
  height: auto;
}
@media (min-width: 768px) {
  #sns .sns-col2__inner .cardUnit__card svg {
    width: 3.4rem;
  }
}