@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;

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

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

.text-style--title-h1::before,
.text-style--title-h1::after {
  content: "";

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

  height: 2px;

  pointer-events: none;
}

.text-style--title-h1::before {
  z-index: 1;

  width: 100%;

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

.text-style--title-h1::after {
  z-index: 2;

  width: calc(50 / 16 * 1rem);

  background: var(--color-secondary);
}


/* h2のスタイル */
.text-style--title-h2 {
  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-h2::before {
  content: "";

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

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

  pointer-events: none;
}


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


/* 見出しのテキスト */
.text-style--mv-primary {
  font-size: calc(16 / 16 * 1rem);
}

.text-style--mv-secondary {
  font-size: calc(10 / 16 * 1rem);
}


/* 説明文のスタイル */
.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;
}


/* ブランドエリアのタイトルテキスト */
.text-style--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 / 16 * 1rem);
}
.text-style--brand > * {
  line-height: 1;
}
.text-style--brand > *:first-of-type {
  font-size: calc(25 / 16 * 1rem);
  letter-spacing: .05em;
  font-style: italic;
  font-weight: bold;
}
.text-style--brand > *:last-of-type {
  font-size: calc(12 / 16 * 1rem);
}
.text-style--brand > *[data-text-language=en] {
  font-family: var(--font-eng);
}
.text-style--brand > *[data-text-language=jp] {
  font-family: var(--font-primary);
}


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

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


/* figcaptionのスタイル */
.text-style--figcaption {
  margin-top: calc(8 / 16 * 1rem);

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


/* Attentionのタイトルテキスト */
.text-style--attention {
  color: var(--color-error);
  font-family: var(--font-eng);
  font-size: calc(18 / 16 * 1rem);
  font-style: italic;
  font-weight: bold;
  text-align: center;
}


/* SHAREのタイトルテキスト */
.text-style--share {
  font-family: var(--font-eng);
  font-size: calc(15 / 16 * 1rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;

  pointer-events: none;
}



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

.main__inner {
  --width-content: 1000px;
  --margin-vertical-large: calc(80 / 16 * 1rem);
  --margin-vertical-medium: calc(50 / 16 * 1rem);
  --margin-vertical-small: calc(40 / 16 * 1rem);
  --margin-vertical-xs: calc(20 / 16 * 1rem);
  --margin-vertical-xxs: calc(18 / 16 * 1rem);
  --margin-vertical-xxxs: calc(13 / 16 * 1rem);
  --padding-vertical: 0;
  --padding-horizontal: 0;

  position: relative;

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


/* 記事エリア */
.article__wrapper {
  width: min(100%, var(--width-content) + var(--padding-horizontal) * 2);
  margin: auto;
  padding: calc(74 / 16 * 1rem) var(--padding-horizontal);
  background: #fff;
}

.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: relative;

  width: calc(100% - ((15 / 16 * 1rem) * 2));
  margin: 0 auto var(--margin-vertical-small);
}

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

.mv-wrapper__text-container {
  position: absolute;
  bottom: calc(100% + (12 / 16 * 1rem));
  right: 0;
  z-index: 2;

  color: #fff;

  pointer-events: none;
}

.mv-wrapper__text-container > * {
  display: block;
  text-align: right;

  font-family: var(--font-eng);
  font-style: italic;
  font-weight: bold;
}


/* 見出し画像の背景 */
.bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 22vh;
}

.bg-wrapper__inner {
  position: relative;

  height: 100%;
}

.bg-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);
}

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


/* セクション */
.section-style {
  --padding-vertical: 0;
  --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 .text-style--title-h1 {
  margin-bottom: var(--margin-vertical-xs);
}
.section-style .text-style--title-h2 {
  margin-bottom: var(--margin-vertical-xxs);
}
.section-style .text-style--title-h2 + * {
  margin-top: 0;
}
.section-style .text-style--title-h3 {
  margin-bottom: var(--margin-vertical-xxxs);
}

#Heading {
  margin: 0;
}
#Heading + section {
  margin-top: calc(40 / 16 * 1rem);
}




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

/* レイアウトに準じたスタイル */
[data-content-layout] {
  display: flex;
  gap: var(--margin-vertical-xs);

  margin: var(--margin-vertical-medium) 0;
}
[data-content-layout] .image-wrapper img {
  width: 100%;
}
[data-content-layout] .movie-wrapper {
  aspect-ratio: 800 / 450;
}
[data-content-layout] .movie-wrapper iframe {
  width: 100%;
  height: 100%;
}

[data-content-layout=single] {
  flex-direction: column;
}

[data-content-layout=double] {
  flex-direction: column-reverse;
}

[data-content-layout=border] {
  --padding-vertical: calc(30 / 16 * 1rem);
  --padding-horizontal: calc(20 / 16 * 1rem);

  flex-direction: column;

  padding: var(--padding-vertical) var(--padding-horizontal);
  border: solid 1px var(--color-font-primary);
}
[data-content-layout=border] .image-wrapper {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

[data-content-layout=pickup] {
  --padding-vertical: calc(30 / 16 * 1rem);
  --padding-horizontal: calc(20 / 16 * 1rem);

  position: relative;

  flex-direction: column;

  margin-top: calc((50 + 20) / 16 * 1rem);
  padding: calc(40 / 16 * 1rem) var(--padding-horizontal) var(--padding-vertical);
  border: solid 1px var(--color-secondary);
}
[data-content-layout=pickup]::before {
  content: "PICK UP !";

  position: absolute;
  top: calc(20 / 16 * -1rem);
  right: 0;
  left: 0;

  display: grid;
  place-content: center;

  width: fit-content;
  margin: auto;
  padding: calc(12 / 16 * 1rem) calc(60 / 16 * 1rem);
  background-color: var(--color-secondary);
  clip-path: polygon(4% 0, 100% 0%, 96% 100%, 0% 100%);

  color: var(--color-font-primary);
  font-size: calc(16 / 16 * 1rem);
  font-family: var(--font-eng);
  font-style: italic;
  font-weight: bold;
  line-height: 1;

  pointer-events: none;
}
[data-content-layout=pickup] .image-wrapper {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

[data-content-layout="figure-double-square"] img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

[data-content-layout="figure-double-rectangle"] img {
  width: 100%;
  aspect-ratio: 800 / 450;
  object-fit: cover;
}


/* Attention */
.attention-container {
  --padding-vertical: calc(35 / 16 * 1rem);
  --padding-horizontal: calc(20 / 16 * 1rem);

  padding: var(--padding-vertical) var(--padding-horizontal);
  border: solid 1px var(--color-error);
}

.attention-container .text-style--attention {
  margin-bottom: var(--margin-vertical-xxs);
}


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

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




/* ===============================================
  * SHAREリンク のスタイル *
=============================================== */

.share-link__container {
  position: sticky;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  gap: calc(20 / 16 * 1rem);

  width: fit-content;
  padding: calc(10 / 16 * 1rem) calc(15 / 16 * 1rem);
  background: rgba(245, 245, 245, .9);
}

.share-link__list {
  display: flex;
  align-items: center;
  gap: calc(15 / 16 * 1rem);
}

.share-link__list-item {
  display: grid;
  place-content: center;

  aspect-ratio: 1;
}

.js-copyTextToast {
  position: fixed;
  right: 0;
  bottom: 5vh;
  left: 0;
  z-index: 100;

  width: fit-content;
  max-width: 90vw;
  margin: auto;
  padding: 0.5ch 1ch;
  backdrop-filter: blur(2px) brightness(0.5);
  -webkit-backdrop-filter: blur(2px) brightness(0.5);
  border-radius: 4px;
  overflow: hidden;

  color: #fff;
  line-height: 1.5;

  opacity: 0;
  transition: opacity var(--transition-default);

  pointer-events: none;
}
.js-copyTextToast[data-state-toast=active] {
  opacity: 1;
}




@media (min-width: 1024px) {

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

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


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

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


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


  /* 見出しのテキスト */
  .text-style--mv-primary,
  .text-style--mv-secondary {
    display: inline;

    font-size: calc(20 / 16 * 1rem);
    line-height: 1;
  }

  .text-style--mv-primary {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
  }


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


  /* SHAREのタイトルテキスト */
  .text-style--share {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
  }




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

  .main__inner {
    --margin-vertical-large: calc(100 / 16 * 1rem);
    --margin-vertical-medium: calc(60 / 16 * 1rem);
    --margin-vertical-xs: calc(30 / 16 * 1rem);
    --margin-vertical-xxs: calc(20 / 16 * 1rem);
    --margin-vertical-xxxxs: calc(14 / 16 * 1rem);
    --padding-vertical: min(8.97vh, 70px);
    --padding-horizontal: 0rem;

    padding: 0;
  }


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


  /* 見出し画像 */
  .mv-wrapper {
    width: 100%;
  }

  .mv-wrapper__text-container {
    --space: 20;

    top: calc((var(--space) * 2) / 16 * -1rem);
    right: calc((var(--space) * 2) / 16 * -1rem);
    bottom: auto;

    display: flex;
    gap: calc(var(--space) / 16 * 1rem);

    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }


  /* 見出し画像の背景 */
  .bg-wrapper {
    height: 40vh;
  }


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

  .section-style .text-style--title-h1 {
    margin-bottom: var(--margin-vertical-xxs);
  }

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

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




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

  /* レイアウトに準じたスタイル */
  [data-content-layout] {
    gap: var(--margin-vertical-xxs);
  }

  [data-content-layout=double] {
    display: grid;
    align-items: center;
    gap: var(--margin-vertical-xs);
    grid-template-columns: 50% 1fr;

    margin: var(--margin-vertical-xs) 0;
  }

  [data-content-layout=border],
  [data-content-layout=pickup] {
    display: grid;
    align-items: center;
    flex-direction: row-reverse;
    gap: var(--margin-vertical-xxs);
    grid-template-areas: "text image";
    grid-template-columns: 1fr 25.7%;
  }
  [data-content-layout=border] .image-wrapper,
  [data-content-layout=pickup] .image-wrapper {
    grid-area: image;
    width: 100%;
  }

  [data-content-layout=border] .text-container,
  [data-content-layout=pickup] .text-container { grid-area: text; }


  /* Attention */
  .attention-container {
    --padding-vertical: calc(40 / 16 * 1rem);
    --padding-horizontal: calc(40 / 16 * 1rem);
  }

  .attention-container .text-style--description {
    line-height: 2;
  }


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




  /* ===============================================
    * SHAREリンク のスタイル *
  =============================================== */

  .share-link__container {
    bottom: calc(30 / 16 * 1rem);
    left: calc(30 / 16 * 1rem);

    flex-direction: column;
  }

  .share-link__list {
    flex-direction: column;
  }

}