@charset "UTF-8";

/* ==========================================================
   トップページ（ecforce）
   すべてのセレクタを .page-top（main）の中に限定し、ecforce のテーマと干渉しないようにする
   サイズはデザイン幅750px基準：min(750px時の値, vw換算値)
   画像は width:%（親要素に対する割合）＋ max-width:画像の実寸px
========================================================== */

/* ==========================================================
   変数
========================================================== */
.page-top {
  --c-text: #473d2e;
  --c-white: #fff;
  --c-concept: #f6e9e2;
  --c-product: #f5f4f2;
  --c-howto: #eadac9;
  --c-story: #f5ece5;
  --c-makuake: #c8004a;

  /* フォントサイズ：最小値 / vw / 最大値（750px時） */
  --fz-lead: clamp(14px, 3.733vw, 28px);
  --fz-body: clamp(13px, 3.467vw, 26px);
}

/* ==========================================================
   ベース・リセット（.page-top 内のみ）
   :where() で詳細度を0にし、各パーツの指定を上書きしない
========================================================== */
.page-top {
  display: block;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--c-white);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fz-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

:where(.page-top) *,
:where(.page-top) *::before,
:where(.page-top) *::after {
  box-sizing: border-box;
}

:where(.page-top) :where(h1, h2, h3, p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ecforce テーマの見出し指定（h1〜h6 { font-family: "游ゴシック", serif; }）を打ち消し、ページのフォントを継承する
   詳細度はクラス1つ分なので、各パーツの font-family 指定（Josefin Sans など）は上書きしない */
.page-top :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

:where(.page-top) :where(img) {
  display: block;
}

:where(.page-top) :where(a) {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

:where(.page-top) :where(a:hover) {
  opacity: 0.7;
}

:where(.page-top) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ==========================================================
   FV
========================================================== */
.page-top .fv img {
  width: 100%;
  max-width: 750px;
}

/* ==========================================================
   コンセプト
========================================================== */
.page-top .concept {
  padding: min(82px, 10.933vw) 0 min(27px, 3.6vw);
  background: var(--c-concept);
}

.page-top .concept__cta {
  display: block;
  width: 89.333vw;
  max-width: 518px;
  margin: 0 auto;
}

/* 画像右側の影の分だけずらし、ボタン本体を中央に揃える */
.page-top .concept__cta img {
  width: 100%;
  max-width: 518px;
  transform: translateX(1.45%);
}

.page-top .concept__movie {
  position: relative;
  width: min(670px, 89.333vw);
  margin: min(95px, 12.667vw) auto 0;
}

/* サムネイル：クリックで非表示にして動画を再生 */
.page-top .concept__thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  transition: opacity 0.4s, visibility 0.4s;
}

.page-top .concept__thumb:hover {
  opacity: 0.85;
}

.page-top .concept__thumb img {
  width: 100%;
  max-width: 670px;
}

.page-top .concept__movie.is-playing .concept__thumb {
  opacity: 0;
  visibility: hidden;
}

.page-top .concept__movie video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 670 / 384;
  object-fit: cover;
}

.page-top .concept__ttl {
  margin: min(140px, 18.667vw) 0 0 min(88px, 11.733vw);
}

/* 親幅662px（750 - 88）に対する割合 */
.page-top .concept__ttl img {
  width: 78.798%;
  max-width: 376px;
}

.page-top .concept__txt {
  margin-top: min(60px, 8vw);
  padding: 0 min(50px, 6.667vw) 0 min(88px, 11.733vw);
  font-size: var(--fz-lead);
  line-height: 2.1;
  letter-spacing: 0.14em;
}

.page-top .concept__photo {
  margin-top: min(80px, 10.667vw);
}

.page-top .concept__photo img {
  width: 100%;
  max-width: 750px;
}

/* ==========================================================
   Makuake
========================================================== */
.page-top .makuake {
  background: var(--c-makuake);
}

.page-top .makuake img {
  width: 100%;
  max-width: 750px;
}

/* ==========================================================
   商品
========================================================== */
.page-top .product {
  padding: min(170px, 22.667vw) 0 min(158px, 21.067vw);
  background: var(--c-product);
}

.page-top .product__list {
  display: flex;
}

.page-top .product__item {
  width: 50%;
  padding-left: min(60px, 8vw);
}

.page-top .product__item + .product__item {
  padding-left: min(43px, 5.733vw);
}

.page-top .product__ttl {
  font-size: var(--fz-lead);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* 左余白を打ち消し、li の全幅（375px）に広げる */
.page-top .product__img {
  margin: min(40px, 5.333vw) 0 0 max(-60px, -8vw);
}

.page-top .product__item + .product__item .product__img {
  margin-left: max(-43px, -5.733vw);
}

.page-top .product__img img {
  width: 100%;
  max-width: 375px;
}

.page-top .product__name,
.page-top .product__vol {
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--fz-body);
  line-height: 1.55;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.page-top .product__name {
  margin-top: min(20px, 2.667vw);
}

/* 親の内幅（左列315px / 右列332px）に対する割合 */
.page-top .product__btn {
  display: block;
  width: 86.349%;
  max-width: 272px;
  margin-top: min(46px, 6.133vw);
}

.page-top .product__item + .product__item .product__btn {
  width: 81.928%;
}

.page-top .product__btn img {
  width: 100%;
  max-width: 272px;
}

/* ==========================================================
   HOW TO USE
========================================================== */
.page-top .howto {
  padding-bottom: min(110px, 14.667vw);
  background: var(--c-howto);
}

.page-top .howto__ttl img,
.page-top .howto__step img {
  width: 100%;
  max-width: 750px;
}

.page-top .howto__step + .howto__step {
  margin-top: min(26px, 3.467vw);
}

.page-top .howto__txt {
  margin-top: min(12px, 1.6vw);
  padding: 0 min(10px, 1.333vw) 0 min(45px, 6vw);
  font-size: var(--fz-body);
  line-height: 2.05;
  letter-spacing: 0.18em;
}

/* ==========================================================
   Brand Story
========================================================== */
.page-top .story {
  background: var(--c-story);
}

.page-top .story__ttl img {
  width: 100%;
  max-width: 750px;
}

.page-top .story__body {
  padding: min(70px, 9.333vw) min(10px, 1.333vw) min(310px, 41.333vw) min(40px, 5.333vw);
}

.page-top .story__body p {
  font-size: var(--fz-body);
  line-height: 1.8;
  letter-spacing: 0.11em;
}

.page-top .story__body p + p {
  margin-top: 1.8em;
}