@charset "UTF-8";

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

.main-area {
  --color-text-primary: #222222;

  --font-hiragino-mincho: "hiragino-mincho-pron";
  --font-gilda-display: "Gilda Display";
  --font-barlow: "Barlow";

  --font-ja: var(--font-hiragino-mincho), serif;
  --font-en: var(--font-gilda-display), serif;

  --max-container-width: 740px;

  --zoom-out-from: scale(1.1);
  --zoom-out-to: scale(1);

  overflow-x: clip;
  font-family: var(--font-ja);
  color: var(--color-text-primary);
  font-weight: 300;
  line-height: 2;
  font-feature-settings: normal;
}
.main-area picture {
  display: block;
}
.main-area img {
  width: 100%;
  height: auto;
}
/* テーマカラー設定 */
.section-body:nth-of-type(1) {
  --color-section-accent: var(--color-section-1-accent, var(--color-page-common));
  --color-section-background: var(--color-section-1-background, var(--color-section-common-background));
}
.section-body:nth-of-type(2) {
  --color-section-accent: var(--color-section-2-accent, var(--color-page-common));
  --color-section-background: var(--color-section-2-background, var(--color-section-common-background));
}
.section-body:nth-of-type(3) {
  --color-section-accent: var(--color-section-3-accent, var(--color-page-common));
  --color-section-background: var(--color-section-3-background, var(--color-section-common-background));
}
.section-body:nth-of-type(4) {
  --color-section-accent: var(--color-section-4-accent, var(--color-page-common));
  --color-section-background: var(--color-section-4-background, var(--color-section-common-background));
}
.section-body:nth-of-type(5) {
  --color-section-accent: var(--color-section-5-accent, var(--color-page-common));
  --color-section-background: var(--color-section-5-background, var(--color-section-common-background));
}
.section-body:nth-of-type(6) {
  --color-section-accent: var(--color-section-6-accent, var(--color-page-common));
  --color-section-background: var(--color-section-6-background, var(--color-section-common-background));
}
/* アニメーション設定 */
@keyframes zoomOut {
  0% {
    transform: var(--zoom-out-from);
  }
  100% {
    transform: var(--zoom-out-to);
  }
}
/* アニメーション：スライダー&ズームアウト */
[data-image-pattern="a"] > .js-imageTarget {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease;
}
[data-image-pattern="a"] > .js-imageTarget.slick-initialized {
  opacity: 1;
  visibility: visible;
}
.js-addAnimation {
  animation: zoomOut 3.5s linear 0s forwards;
}
/* アニメーション：ズームアウト */
[data-image-pattern="b"] > .js-imageTarget figure:nth-of-type(1),
[data-image-pattern="d"] > .js-imageTarget figure:nth-of-type(1),
[data-image-pattern="e"] > .js-imageTarget figure:nth-of-type(1) {
  overflow: hidden;
}
[data-image-pattern="b"] > .js-imageTarget figure:nth-of-type(1) img,
[data-image-pattern="d"] > .js-imageTarget figure:nth-of-type(1) img,
[data-image-pattern="e"] > .js-imageTarget figure:nth-of-type(1) img {
  transform: var(--zoom-out-from);
}
[data-image-pattern="b"] > .js-imageTarget.active figure:nth-of-type(1) img,
[data-image-pattern="d"] > .js-imageTarget.active figure:nth-of-type(1) img,
[data-image-pattern="e"] > .js-imageTarget.active figure:nth-of-type(1) img {
  animation: zoomOut 2s ease-out 0s forwards;
}
/* アニメーション：スライドイン(右から) */
[data-image-pattern="b"] > .js-imageTarget figure:nth-of-type(2),
[data-image-pattern="c"] > .js-imageTarget figure,
[data-image-pattern="d"] > .js-imageTarget figure:nth-of-type(2) {
  transform: translateX(10%);
  opacity: 0;
  transition: 2s ease-out;
  transition-property: transform, opacity;
}
[data-image-pattern="b"] > .js-imageTarget.active figure:nth-of-type(2),
[data-image-pattern="c"] > .js-imageTarget.active figure,
[data-image-pattern="d"] > .js-imageTarget.active figure:nth-of-type(2) {
  transform: translateX(0);
  opacity: 1;
}
/* アニメーション：スライドイン(左から) */
[data-image-pattern="e"] > .js-imageTarget figure:nth-of-type(2) {
  transform: translateX(-10%);
  opacity: 0;
  transition: 2s ease-out;
  transition-property: transform, opacity;
}
[data-image-pattern="e"] > .js-imageTarget.active figure:nth-of-type(2) {
  transform: translateX(0);
  opacity: 1;
}

/* 上部コンテンツ */
.upper-area .upper-area__first-view {
  width: min(100%, 1400px);
  margin: 0 auto;
}
.upper-area .upper-area__lead-text {
  text-align: center;
}
.upper-area .upper-area__heading-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  line-height: 1.1;
}
.upper-area .upper-area__heading {
  font-family: var(--font-en);
  font-weight: 400;
  color: var(--color-upper-heading-accent, var(--color-page-common));
  letter-spacing: 0.03em;
}
.upper-area .upper-area__sub-heading {
  letter-spacing: 0.07em;
}

/* コンテンツ */
.section-wrapper {
  counter-reset: sectionNum;
  width: min(100%, var(--max-container-width));
  margin: 0 auto;
}
.section-body {
  counter-increment: sectionNum;
}
.section-body__heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  line-height: 1.2;
}
.section-body__heading-en {
  font-family: var(--font-en);
  color: var(--color-section-accent);
  font-weight: 400;
  letter-spacing: 0.07em;
}
.section-body__heading-en[data-use-counter]::after {
  content: counter(sectionNum);
  display: inline-block;
  letter-spacing: 0.03em;
}
.section-body__heading-ja {
  letter-spacing: 0.07em;
}

.section-body__images {
  margin: 0 auto;
}

.section-body__lead {
  text-align: center;
  letter-spacing: 0.07em;
}
.section-body__lead-heading {
  font-weight: 600;
  line-height: 1.75;
}
.section-body__lead-text {
  line-height: 2;
}
.section-body__products {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.section-body__product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  letter-spacing: 0.07em;
  text-align: center;
}
.section-body__product-name {
  line-height: 1.4;
}
.section-body__product-price,
.section-body__product-cta {
  font-family: var(--font-en);
  font-weight: 400;
}
.section-body__product-price {
  line-height: 1.2;
}
.section-body__product-cta {
  display: grid;
  justify-items: center;
  align-items: end;
  padding: 5px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
  background-color: var(--color-section-accent);
}

/* モデル画像(パターンB) */
.section-body__images[data-image-pattern="b"] .section-body__images-inner {
  display: grid;
  grid-template-columns: 100%;
}
.section-body__images[data-image-pattern="b"] figure:nth-of-type(2) {
  margin: 0 auto;
}
/* モデル画像(パターンC) */
.section-body__images[data-image-pattern="c"] .section-body__images-inner {
  display: grid;
}
.section-body__images[data-image-pattern="c"] .section-body__images-inner::before {
  content: "";
  z-index: 1;
  display: block;
  place-self: center;
  grid-area: 1 / 1 / 2 / 2;
  aspect-ratio: 1;
  background-color: var(--color-section-background);
}
.section-body__images[data-image-pattern="c"] figure {
  z-index: 2;
  grid-area: 1 / 1 / 2 / 2;
}
.section-body__images[data-image-pattern="c"] figure:nth-of-type(1) {
  justify-self: start;
  align-self: start;
}
.section-body__images[data-image-pattern="c"] figure:nth-of-type(2) {
  justify-self: end;
  align-self: end;
}
.section-body__images[data-image-pattern="c"][data-image-reverse] figure:nth-of-type(1) {
  justify-self: end;
  align-self: start;
}
.section-body__images[data-image-pattern="c"][data-image-reverse] figure:nth-of-type(2) {
  justify-self: start;
  align-self: end;
}
/* モデル画像(パターンE) */
.section-body__images[data-image-pattern="e"] .section-body__images-inner {
  display: grid;
  grid-template-columns: 100%;
}
.section-body__images[data-image-pattern="e"] figure:nth-of-type(1) {
  margin: 0 auto;
}

/* 下部コンテンツ */
.bottom-area {
  width: min(100%, 1000px);
  margin: 0 auto;
}
.bottom-area__buttons {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.bottom-area__button {
  display: grid;
  place-content: center;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.bottom-area__button--fill {
  color: var(--color-button-accent-foreground, var(--color-page-common-foreground, #fff));
  background-color: var(--color-button-accent, var(--color-page-common));
}
.bottom-area__button--outline {
  color: var(--color-button-accent, var(--color-page-common));
  background-color: var(--color-button-accent-foreground, var(--color-page-common-foreground, #fff));
  border: 1px solid currentColor;
}
.bottom-area__feature-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  line-height: 1.2;
}
.bottom-area__feature-heading-ja,
.bottom-area__feature-heading-en {
  letter-spacing: 0.07em;
}
.bottom-area__feature-heading-en {
  font-family: var(--font-barlow), sans-serif;
  font-weight: 500;
}
.bottom-area__feature-list {
  display: grid;
}
.bottom-area__annotation {
  font-family: var(--hirakaku);
  line-height: 1.63;
  letter-spacing: 0.07em;
}
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .main-area {
    --container-default: 100%;

    padding-bottom: calc(80 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
  /* 上部コンテンツ */
  .upper-area .upper-area__lead-text {
    margin-top: calc(73 *(100vw / 375));
  }
  .upper-area .upper-area__heading-wrap {
    margin-top: calc(54 *(100vw / 375));
    gap: calc(10 *(100vw / 375));
  }
  .upper-area .upper-area__heading {
    font-size: calc(30 *(100vw / 375));
  }
  .upper-area .upper-area__sub-heading {
    font-size: calc(15 *(100vw / 375));
  }
  .upper-area__anchor-list {
    --gap-x: calc(3 *(100vw / 375));
    --gap-y: calc(20 *(100vw / 375));
  }
  .upper-area__anchor-item {
    gap: calc(8 *(100vw / 375));
  }
  .upper-area__anchor-item-heading {
    gap: calc(7 *(100vw / 375));
  }
  .upper-area__anchor-item-heading::before {
    font-size: calc(14 *(100vw / 375));
  }
  .upper-area__anchor-item-heading::after {
    width: calc(18 *(100vw / 375));
  }
  .upper-area__anchor-item-heading-en {
    font-size: calc(13 *(100vw / 375));
  }
  .upper-area__anchor-item-heading-ja {
    font-size: calc(10 *(100vw / 375));
  }

  /* コンテンツ */
  .section-wrapper {
    margin-top: calc(20 *(100vw / 375));
  }
  .section-body {
    padding: calc(40 *(100vw / 375)) 0;
  }
  .section-body__heading {
    gap: calc(10 *(100vw / 375));
  }
  .section-body__heading-en {
    font-size: calc(18 *(100vw / 375));
  }
  .section-body__heading-en[data-use-counter]::after {
    margin-left: calc(8 *(100vw / 375));
    font-size: calc(20 *(100vw / 375));
  }
  .section-body__heading-ja {
    font-size: calc(18 *(100vw / 375));
  }
  .section-body__images {
    margin-top: calc(30 *(100vw / 375));
  }
  .section-body__detail {
    margin-top: calc(40 *(100vw / 375));
  }
  .section-body__lead-heading {
    font-size: calc(16 *(100vw / 375));
  }
  .section-body__lead-text {
    margin-top: calc(20 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
  .section-body__products {
    justify-content: space-between;
    gap: calc(20 *(100vw / 375)) calc(15 *(100vw / 375));
    margin-top: calc(40 *(100vw / 375));
    padding: 0 calc(30 *(100vw / 375));
  }
  .section-body__product {
    flex: 0 0 calc(150 *(100vw / 375));
    row-gap: calc(15 *(100vw / 375));
  }
  .section-body__product-name {
    margin-top: calc(20 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
  .section-body__product-price {
    margin-top: calc(8 *(100vw / 375));
    font-size: calc(13 *(100vw / 375));
  }
  .section-body__product-price-tax {
    font-size: calc(11 *(100vw / 375));
  }
  .section-body__product-cta {
    font-size: calc(15 *(100vw / 375));
  }

  /* モデル画像(パターンB) */
  .section-body__images[data-image-pattern="b"] .section-body__images-inner {
    gap: calc(20 *(100vw / 375));
  }
  .section-body__images[data-image-pattern="b"] figure:nth-of-type(2) {
    width: calc(315 *(100vw / 375));
  }
  /* モデル画像(パターンC) */
  .section-body__images[data-image-pattern="c"] .section-body__images-inner {
    width: 100vw;
    height: calc(652 *(100vw / 375));
  }
  .section-body__images[data-image-pattern="c"] .section-body__images-inner::before {
    width: calc(345 *(100vw / 375));
  }
  .section-body__images[data-image-pattern="c"] figure:nth-of-type(1) {
    width: calc(280 *(100vw / 375));
  }
  .section-body__images[data-image-pattern="c"] figure:nth-of-type(2) {
    width: calc(230 *(100vw / 375));
  }
  /* モデル画像(パターンD) */
  .section-body__images[data-image-pattern="d"] .section-body__images-inner {
    width: calc(345 *(100vw / 375));
    margin: 0 auto;
  }
  .section-body__images[data-image-pattern="d"] figure:nth-of-type(2) {
    width: calc(315 *(100vw / 375));
    margin: calc(20 *(100vw / 375)) auto 0;
  }
  /* モデル画像(パターンE) */
  .section-body__images[data-image-pattern="e"] .section-body__images-inner {
    gap: calc(20 *(100vw / 375));
  }
  .section-body__images[data-image-pattern="e"] figure:nth-of-type(1) {
    width: calc(315 *(100vw / 375));
  }

  /* 下部コンテンツ */
  .bottom-area {
    margin-top: calc(40 *(100vw / 375));
    padding: 0 calc(15 *(100vw / 375));
  }
  .bottom-area__buttons {
    gap: calc(20 *(100vw / 375));
  }
  .bottom-area__button {
    width: calc(280 *(100vw / 375));
    height: calc(50 *(100vw / 375));
    font-size: calc(14 *(100vw / 375));
  }
  .bottom-area__feature {
    margin-top: calc(78 *(100vw / 375));
  }
  .bottom-area__feature-heading {
    gap: calc(8 *(100vw / 375));
  }
  .bottom-area__feature-heading::before {
    font-size: calc(24 *(100vw / 375));
  }
  .bottom-area__feature-heading-ja {
    font-size: calc(14 *(100vw / 375));
  }
  .bottom-area__feature-heading-en {
    font-size: calc(31 *(100vw / 375));
  }
  .bottom-area__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(9 *(100vw / 375));
    margin-top: calc(30 *(100vw / 375));
  }
  .bottom-area__annotation {
    margin-top: calc(38 *(100vw / 375));
    font-size: calc(11 *(100vw / 375));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .main-area {
    --container-default: 100rem;

    padding-bottom: 10rem;
    font-size: 1.4rem;
  }
  /* 上部コンテンツ */
  .upper-area .upper-area__lead-text {
    margin-top: 9.2rem;
  }
  .upper-area .upper-area__heading-wrap {
    margin-top: 7.5rem;
    gap: 1rem;
  }
  .upper-area .upper-area__heading {
    font-size: 4rem;
  }
  .upper-area .upper-area__sub-heading {
    font-size: 1.6rem;
  }
  .upper-area__anchor-list {
    --gap-x: 5rem;
    --gap-y: 3rem;
  }
  .upper-area__anchor-item {
    gap: 1.5rem;
  }
  .upper-area__anchor-item-heading {
    gap: 0.7rem;
  }
  .upper-area__anchor-item-heading::before {
    font-size: 2rem;
  }
  .upper-area__anchor-item-heading::after {
    width: 1.8rem;
  }
  .upper-area__anchor-item-heading-en {
    font-size: 2.4rem;
  }
  .upper-area__anchor-item-heading-ja {
    font-size: 1.2rem;
  }

  /* コンテンツ */
  .section-body {
    padding: 6rem 0;
  }
  .section-body__heading {
    gap: 1.5rem;
  }
  .section-body__heading-en {
    font-size: 2.2rem;
  }
  .section-body__heading-en[data-use-counter]::after {
    margin-left: 0.5rem;
    font-size: 2.5rem;
  }
  .section-body__heading-ja {
    font-size: 2.4rem;
  }
  .section-body__images {
    margin-top: 3rem;
  }
  .section-body__detail {
    margin-top: 4rem;
  }
  .section-body__lead-heading {
    font-size: 1.6rem;
  }
  .section-body__lead-text {
    margin-right: 2rem;
    font-size: 1.4rem;
  }
  .section-body__products {
    gap: 2rem;
    margin-top: 6rem;
  }
  .section-body__product {
    flex: 0 0 17rem;
    row-gap: 1.5rem;
  }
  .section-body__product-name {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
  .section-body__product-price {
    margin-top: 0.8rem;
    font-size: 1.3rem;
  }
  .section-body__product-price-tax {
    font-size: 1.1rem;
  }
  .section-body__product-cta {
    font-size: 1.5rem;
  }

  /* モデル画像(パターンA) */
  .section-body__images[data-image-pattern="a"] {
    width: 55rem;
  }
  /* モデル画像(パターンB) */
  .section-body__images[data-image-pattern="b"] .section-body__images-inner {
    gap: 4rem;
  }
  .section-body__images[data-image-pattern="b"] figure:nth-of-type(2) {
    width: 36rem;
  }
  /* モデル画像(パターンC) */
  .section-body__images[data-image-pattern="c"] .section-body__images-inner {
    width: 100%;
    height: 71rem;
  }
  .section-body__images[data-image-pattern="c"] .section-body__images-inner::before {
    width: 55rem;
  }
  .section-body__images[data-image-pattern="c"] figure:nth-of-type(1) {
    width: 42.5rem;
  }
  .section-body__images[data-image-pattern="c"] figure:nth-of-type(2) {
    width: 31.5rem;
  }
  /* モデル画像(パターンD) */
  .section-body__images[data-image-pattern="d"] .section-body__images-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  /* モデル画像(パターンE) */
  .section-body__images[data-image-pattern="e"] .section-body__images-inner {
    gap: 4rem;
  }
  .section-body__images[data-image-pattern="e"] figure:nth-of-type(1) {
    width: 47rem;
  }

  /* 下部コンテンツ */
  .bottom-area {
    margin-top: 3rem;
  }
  .bottom-area__buttons {
    gap: 2rem;
  }
  .bottom-area__button {
    width: 28rem;
    height: 5rem;
  }
  .bottom-area__feature-heading {
    margin-top: 8rem;
    gap: 0.8rem;
  }
  .bottom-area__feature-heading-ja {
    font-size: 1.4rem;
  }
  .bottom-area__feature-heading-en {
    font-size: 3.1rem;
  }
  .bottom-area__feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 4rem;
  }
  .bottom-area__annotation {
    margin-top: 5.6rem;
    font-size: 1.1rem;
  }
}