@charset "UTF-8";


/* ===============================================
  * 共通スタイル *
=============================================== */

[class^="text-style"] {
  font-family: var(--font-primary);
  letter-spacing: .08em;
  line-height: 1.5;
}




/* ===============================================
  * ボタンのスタイル *
=============================================== */

.c-button {
  --color-bg: var(--color-font-primary);
  --color-font: #fff;
  --padding-vertical: calc(15 / 16 * 1rem);
  --padding-horizontal: calc(45 / 16 * 1rem);

  display: grid;
  place-content: center;

  width: fit-content;
  max-width: 100%;
  margin: auto;
  padding: var(--padding-vertical) var(--padding-horizontal);
  background: var(--color-bg);
  border-radius: calc(4 / 16 * 1rem);

  color: var(--color-font);
  font-size: calc(15 / 16 * 1rem);
  font-weight: bold;
  line-height: 1;

  transition:
    background var(--transition-default),
    color var(--transition-default);
}




/* ===============================================
  * テキストの共通スタイル *
=============================================== */

/* h1のスタイル */
.text-style--title-h1 {
  position: relative;

  color: #fff;
  font-family: var(--font-eng);
  font-size: calc(38 / 16 * 1rem);
  font-style: italic;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1;
  text-align: center;
}


/* h2のスタイル */
.text-style--title-h2 {
  position: relative;

  padding-bottom: calc(22 / 16 * 1rem);

  color: var(--color-primary);
  font-size: calc(18 / 16 * 1rem);
  letter-spacing: .2em;
  font-weight: bold;
  text-align: center;
}

.text-style--title-h2::after {
  content: "";

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

  width: calc(50 / 16 * 1rem);
  height: 3px;
  margin: auto;
  background: var(--color-primary);
}


/* h3のスタイル */
.text-style--title-h3 {
  position: relative;

  padding: calc(12 / 16 * 1rem) calc(15 / 16 * 1rem);
  background: var(--color-bg-primary);

  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
}

.text-style--title-h3::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 2px;
  height: 100%;
  background: var(--color-primary);

  pointer-events: none;
}


/* 説明文のスタイル */
.text-style--description {
  font-size: calc(13 / 16 * 1rem);
  line-height: 2;
}


/* 画像下テキストのスタイル */
.text-style--caption {
  display: block;
  font-size: calc(12 / 16 * 1rem);
  text-align: center;
}


/* ブランドエリアのタイトルテキスト */
.c-page-title-text {
  margin-bottom: calc(20 / 16 * 1rem);
}


/* 商品一覧を見るエリアのタイトルテキスト */
.text-style--viewall {
  display: block;
  text-align: center;

  font-size: calc(15 / 16 * 1rem);
  font-weight: bold;
}




/* ===============================================
  * 構造に関するスタイル *
=============================================== */

.main__inner {
  --width-content: 1200px;
  --margin-vertical-large: calc(100 / 16 * 1rem);
  --margin-vertical-medium: calc(60 / 16 * 1rem);
  --margin-vertical-small: calc(40 / 16 * 1rem);
  --margin-vertical-xs: calc(20 / 16 * 1rem);
  --padding-vertical: 0;
  --padding-horizontal: 0;

  position: relative;

  padding-bottom: var(--margin-vertical-medium);

  background: var(--color-bg-primary);
}


/* 記事エリア */
.article__wrapper {
  width: min(100%, var(--width-content) + var(--padding-horizontal) * 2);
  margin: auto;
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.article__wrapper .text-style--title-h1 {
  padding: calc(50 / 16 * 1rem) 0;
}

.article__wrapper .text-style--title-h2 {
  margin-bottom: var(--margin-vertical-small);
}

.article__wrapper .text-style--title-h3 {
  margin-bottom: var(--margin-vertical-xs);
}


/* 見出し画像 */
.mv-wrapper {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 22vh;
}

.mv-wrapper__inner {
  position: relative;

  height: 100%;
}

.mv-wrapper__inner::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  backdrop-filter: blur(6px) brightness(.8);
  -webkit-backdrop-filter: blur(6px) brightness(.8);
}

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


/* ブランド毎セクション */
.section-style {
  --padding-vertical: calc(40 / 16 * 1rem);
  --padding-horizontal: calc(15 / 16 * 1rem);

  position: relative;

  margin: var(--margin-vertical-large) 0;
  padding: var(--padding-vertical) var(--padding-horizontal);
  background: #fff;
}

.article__wrapper > section:first-of-type {
  margin-top: 0;
}

.article__wrapper > section:last-of-type {
  margin-bottom: 0;
}


/* ブランド毎セクション内のエリア */
.section-style--child {
  margin: var(--margin-vertical-small) 0;
}




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

/* ブランド一覧 */
#BrandList {
  width: calc(100% - (var(--padding-horizontal) * 2));
  margin: auto;
}

#BrandList .text-style--brand {
  margin-bottom: calc(20 / 16 * 1rem);
}

#BrandList .brand__list {
  --grid-cols: 3;
  --gap-vertical: calc(15 / 16 * 1rem);
  --gap-horizontal: calc(7 / 16 * 1rem);

  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--gap-vertical) var(--gap-horizontal);
}

#BrandList .brand__list .text-style--description {
  text-align: center;
}

#BrandList .c-button {
  margin-top: var(--margin-vertical-small);
}


/* ブランド毎セクション */
[id^="BrandDetail_"] .item__list {
  --grid-cols: 3;
  --gap-vertical: calc(20 / 16 * 1rem);
  --gap-horizontal: calc(7 / 16 * 1rem);

  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--gap-vertical) var(--gap-horizontal);
}

[id^="BrandDetail_"] .item__detail-container {
  margin-bottom: calc(10 / 16 * 1rem);
}


/* 商品一覧を見るボタン */
.viewall-button__container {
  margin-top: var(--margin-vertical-medium);
}

.viewall-button__container .c-button {
  margin-top: var(--margin-vertical-xs);
}





@media (min-width: 1024px) {

  /* ===============================================
    * テキストの共通スタイル *
  =============================================== */

  /* h1のスタイル */
  .text-style--title-h1 {
    font-size: calc(100 / 16 * 1rem);
  }


  /* h2のスタイル */
  .text-style--title-h2 {
    padding-bottom: calc(18 / 16 * 1rem);

    font-size: calc(25 / 16 * 1rem);
  }

  .text-style--title-h2::after {
    width: calc(100 / 16 * 1rem);
  }


  /* h3のスタイル */
  .text-style--title-h3 {
    padding: calc(10 / 16 * 1rem) calc(15 / 16 * 1rem);

    font-size: calc(18 / 16 * 1rem);
  }


  /* 画像下テキストのスタイル */
  .text-style--description {
    font-size: calc(13 / 16 * 1rem);
  }


  /* ブランドエリアのタイトルテキスト */
  .c-page-title-text {
    margin-bottom: calc(40 / 16 * 1rem);
  }




  /* ===============================================
    * 構造に関するスタイル *
  =============================================== */

  .main__inner {
    --margin-vertical-xs: calc(30 / 16 * 1rem);
    --padding-vertical: min(8.97vh, 70px);
    --padding-horizontal: min(7.14%, 100px);

    padding: 0;
  }


  /* 記事エリア */
  .article__wrapper {
    padding-bottom: var(--margin-vertical-large);
  }

  .article__wrapper .text-style--title-h1 {
    padding: 0;
    translate: 0 15%;
  }

  .article__wrapper .text-style--title-h2 {
    margin-bottom: var(--margin-vertical-medium);
  }


  /* 見出し画像 */
  .mv-wrapper {
    height: min(500px, 50vh);
  }


  /* ブランド毎セクション */
  .section-style {
    --padding-vertical: calc(60 / 16 * 1rem);
    --padding-horizontal: calc(100 / 16 * 1rem);
  }


  /* ブランド毎セクション内のエリア */
  .section-style--child {
    margin: var(--margin-vertical-medium) 0;
  }




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

  /* ブランド一覧 */
  #BrandList {
    width: 100%;
  }

  #BrandList .brand__list {
    --grid-cols: 5;
    --gap-vertical: calc(25 / 16 * 1rem);
    --gap-horizontal: calc(40 / 16 * 1rem);
  }

  #BrandList .c-button {
    margin-top: var(--margin-vertical-medium);
  }


  /* ブランド毎セクション */
  [id^="BrandDetail_"] .item__list {
    --grid-cols: 4;
    --gap-horizontal: calc(30 / 16 * 1rem);
  }


  /* 商品一覧を見るボタン */
  .viewall-button__container {
    margin-top: var(--margin-vertical-large);
  }

}