/* =========================================================
   MAKE A MAGIC — PC版(デザイン基準幅 1440px)
   すべての寸法を画面幅に比例させるため、--px(=1デザインpx)で指定
   ========================================================= */

:root {
  --px: calc(100cqw / 1440);

  --c-bg: #202020;
  --c-white: #ffffff;
  --c-title: #fff8f8;
  --c-accent: #be0000;
  --c-menu-text: #111111;

  --f-deco: "Cinzel Decorative", serif;
  --f-cinzel: "Cinzel", serif;
  --f-body: "Cormorant Garamond", serif;
  --f-crimson: "Crimson Text", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--c-bg);
  color: var(--c-white);
}

/* 背景テクスチャ(不透明度45%)をページ全体で1枚に固定し、セクション間を繋げる */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../assets/bg-texture.png") center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.page {
  container-type: inline-size;
}

/* ---------- セクション共通 ---------- */
.section {
  position: relative;
  height: calc(960 * var(--px));
  overflow: hidden;
}

/* セクション同士の間隔(FV以外の上に余白) */
.section:not(.fv) {
  margin-top: calc(160 * var(--px));
}

/* ---------- メニューボタン ---------- */
/* 固定表示の要素は .page(コンテナ)の外に置き、画面幅から寸法を計算 */
.menu-toggle,
.menu {
  --px: calc(100vw / 1440);
}

.menu-toggle {
  position: fixed;
  z-index: 100;
  top: calc(74 * var(--px));
  right: calc(100 * var(--px));
  width: calc(108 * var(--px));
  height: calc(30 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  opacity: 0.6;
}

.menu-toggle img {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  transition: opacity 0.3s ease;
}

.menu-toggle__open {
  width: calc(108 * var(--px));
}

.menu-toggle__close {
  width: calc(100.914 * var(--px));
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  opacity: 1;
}

/* ---------- メニュー(右側パネル) ---------- */
.menu {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  width: calc(400 * var(--px));
  height: 100vh;
  height: 100dvh;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s ease, visibility 0s linear 0.5s;
}

.menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.5s ease;
}

.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/menu-bg-pc.png") center / cover no-repeat;
}

/* メニュー内の位置はパネル左端(デザインx=1040)からの距離 */
.menu__list {
  position: absolute;
  top: calc(216 * var(--px));
  left: calc(52 * var(--px));
  width: calc(123 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--px));
  font-family: var(--f-cinzel);
  font-size: calc(24 * var(--px));
  line-height: normal;
  color: var(--c-menu-text);
}

.menu__list a,
.menu__sns-link {
  transition: opacity 0.3s ease;
}

.menu__list a:hover,
.menu__list a:focus-visible,
.menu__sns-link:hover,
.menu__sns-link:focus-visible {
  opacity: 0.6;
}

.menu__sns-link {
  position: absolute;
}

.menu__sns-link--instagram {
  top: calc(378 * var(--px));
  left: calc(44 * var(--px));
  width: calc(68 * var(--px));
  height: calc(68 * var(--px));
}

.menu__sns-link--cart {
  top: calc(374 * var(--px));
  left: calc(118 * var(--px));
  width: calc(72 * var(--px));
  height: calc(72 * var(--px));
}

.menu__sns-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- FV ---------- */
.fv__text {
  position: absolute;
  top: calc(388.5 * var(--px));
  left: calc(329 * var(--px));
  width: calc(788 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(49 * var(--px));
  text-align: center;
}

.fv__title {
  width: 100%;
  font-family: var(--f-deco);
  font-weight: 400;
  font-size: calc(96 * var(--px));
  line-height: normal;
  color: var(--c-title);
}

.fv__title-line {
  display: block;
  white-space: nowrap;
}

.fv__title-line + .fv__title-line {
  margin-top: calc(-15 * var(--px));
}

.accent {
  color: var(--c-accent);
}

.fv__lead {
  width: calc(695 * var(--px));
  font-family: var(--f-cinzel);
  font-size: calc(24 * var(--px));
  line-height: normal;
}

/* ---------- 浮かび上がり(共通) ---------- */
.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(calc(30 * var(--px)));
  transition:
    opacity 2s ease,
    filter 2s ease,
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible,
.fv.is-switched .fv__brand {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---------- FV:文字が消えて MAKE A MAGIC が浮かび上がる ---------- */
.fv__text {
  transition: opacity 1.2s ease, filter 1.2s ease, visibility 0s linear 1.2s;
}

.fv.is-switched .fv__text {
  opacity: 0;
  filter: blur(10px);
  visibility: hidden;
}

.fv__brand {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fv.is-switched .fv__brand {
  transition-delay: 0.9s;
}

.brand__title {
  position: absolute;
  top: calc(50% - 0.5 * var(--px));
  left: 50%;
  font-family: var(--f-deco);
  font-size: calc(100 * var(--px));
  line-height: normal;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* ---------- about_pc ---------- */
.about__map {
  position: absolute;
  top: calc(232 * var(--px));
  left: calc(172 * var(--px));
  width: calc(1041 * var(--px));
  height: calc(626 * var(--px));
  overflow: hidden;
  pointer-events: none;
}

.about__map img {
  position: absolute;
  top: -15.34%;
  left: -18.53%;
  width: 133.97%;
  height: 124.76%;
  max-width: none;
  opacity: 0.6;
}

.about__dot {
  position: absolute;
  top: calc(var(--dot-y) * var(--px));
  left: calc(var(--dot-x) * var(--px));
  width: calc(var(--dot-size) * var(--px));
  height: calc(var(--dot-size) * var(--px));
}

.about__dot--tokyo { --dot-x: 706; --dot-y: 575; --dot-size: 14; }
.about__dot--osaka { --dot-x: 631; --dot-y: 626; --dot-size: 8; }
.about__dot--tohoku { --dot-x: 752; --dot-y: 465; --dot-size: 8; }

.about__title {
  position: absolute;
  top: calc(124 * var(--px));
  left: calc(280 * var(--px));
  width: calc(880 * var(--px));
  font-family: var(--f-deco);
  font-weight: 400;
  font-size: calc(48 * var(--px));
  line-height: normal;
  text-align: center;
}

.about__text {
  position: absolute;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: calc(24 * var(--px));
  line-height: normal;
}

.about__text--left {
  top: calc(364 * var(--px));
  left: calc(199 * var(--px));
  width: calc(494 * var(--px));
  --fade-delay: 0.6s;
}

/* デザインでは1行目が空行 */
.about__text--right {
  top: calc(587 * var(--px));
  left: calc(804 * var(--px));
  width: calc(454 * var(--px));
  padding-top: 1.21em;
  --fade-delay: 0.8s;
}

.about__city--newyork { top: calc(228 * var(--px)); left: calc(1190 * var(--px)); }
.about__city--paris { top: calc(521 * var(--px)); left: calc(1246 * var(--px)); }
.about__city--la { top: calc(681 * var(--px)); left: calc(173 * var(--px)); }

.about__plane {
  top: calc(520 * var(--px));
  left: calc(553 * var(--px));
  width: calc(85.645 * var(--px));
  height: calc(66.508 * var(--px));
}

.about__plane-body {
  width: calc(76 * var(--px));
  height: calc(50 * var(--px));
  transform: rotate(-166.36deg) scaleY(-1);
}

/* ---- about のアニメーション ----
   JS が .is-animated を付けたときだけ初期状態を隠す(JSなし・動きを減らす設定では完成形を表示) */
.about__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about__city {
  position: absolute;
  font-family: "Homemade Apple", cursive;
  font-size: calc(24 * var(--px));
  line-height: normal;
  white-space: nowrap;
  transition: opacity 1s ease, filter 1s ease;
}

.about__plane {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease;
}

.about__plane-body {
  position: relative;
  flex: none;
  overflow: hidden;
}

.about__plane-body img {
  position: absolute;
  top: -107.17%;
  left: -56.4%;
  width: 208.88%;
  height: 318.73%;
  max-width: none;
}

.about__fade {
  transition:
    opacity 1.4s ease,
    filter 1.4s ease,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fade-delay, 0s);
}

.about.is-animated .about__fade {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(calc(20 * var(--px)));
}

.about.is-animated.is-visible .about__fade {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.about.is-animated .about__city {
  opacity: 0;
  filter: blur(6px);
}

.about.is-animated .about__city.is-shown {
  opacity: 1;
  filter: blur(0);
}

.about.is-animated .about__plane {
  opacity: 0;
}

.about.is-animated.is-landed .about__plane {
  opacity: 1;
}

.about__map { --fade-delay: 0.3s; }
.about__dot { --fade-delay: 1s; }

/* ---------- product_pc / product_pc2 ---------- */
/* product_pc の筆あと(Figma の外枠 480,93 / 1248.656×1037.429、中身を15.52°回転) */
.product__brush {
  position: absolute;
  top: calc(93 * var(--px));
  left: calc(480 * var(--px));
  width: calc(1248.656 * var(--px));
  height: calc(1037.429 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* デザインではテクスチャ(45%)の下にあるため少し薄く */
.product__brush img {
  flex: none;
  width: calc(1080.233 * var(--px));
  height: calc(776.769 * var(--px));
  object-fit: cover;
  opacity: 0.55;
  transform: rotate(15.52deg);
}

/* 商品カード:タイトル → 写真(480×480)+赤いライン+コピー */
.product-card {
  position: absolute;
  top: calc(var(--card-y) * var(--px));
  left: calc(var(--card-x) * var(--px));
  width: calc(480 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--px));
  text-align: center;
}

.product-card__title {
  font-family: var(--f-deco);
  font-weight: 400;
  font-size: calc(48 * var(--px));
  line-height: normal;
  white-space: nowrap;
}

.product-card__category {
  height: calc(36 * var(--px));
  font-family: var(--f-crimson);
  font-size: calc(24 * var(--px));
  line-height: normal;
}

.product-card__visual {
  position: relative;
  width: 100%;
  height: calc(590 * var(--px));
}

.product-card__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(480 * var(--px));
  height: calc(480 * var(--px));
  overflow: hidden;
}

.product-card__img {
  position: absolute;
  top: var(--img-top, 0);
  left: var(--img-left, 0);
  width: var(--img-w, 100%);
  height: var(--img-h, 100%);
  max-width: none;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

/* 2枚目はホバーで表示 */
.product-card__img--alt {
  opacity: 0;
}

.product-card__line {
  position: absolute;
  top: calc(var(--line-y) * var(--px));
  left: calc(var(--line-x) * var(--px));
  width: calc(461 * var(--px));
  height: calc(159 * var(--px));
  overflow: hidden;
  pointer-events: none;
}

.product-card__line img {
  position: absolute;
  top: -119.63%;
  left: -7.07%;
  width: 115.76%;
  height: 336.45%;
  max-width: none;
}

/* コピー:手書き風フォントを少し傾けて赤いラインの上に */
.product-card__quote {
  position: absolute;
  top: calc(var(--quote-y) * var(--px));
  left: calc(var(--quote-x) * var(--px));
  width: calc(var(--quote-box-w) * var(--px));
  height: calc(var(--quote-box-h) * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-card__quote p {
  flex: none;
  width: calc(var(--quote-w) * var(--px));
  font-family: "Homemade Apple", cursive;
  font-size: calc(var(--quote-size) * var(--px));
  line-height: var(--quote-lh, normal);
  transform: rotate(var(--quote-rotate));
}

.product-card--revolution {
  --card-x: 480;
  --card-y: 139;
  --line-x: 29;
  --line-y: 425;
  --quote-x: 81;
  --quote-y: 466;
  --quote-box-w: 292.397;
  --quote-box-h: 49.98;
  --quote-w: 291;
  --quote-size: 32;
  --quote-rotate: -2.76deg;
}

.product-card--scale {
  --card-x: 100;
  --card-y: 135;
  --line-x: 18.75;
  --line-y: 425;
  --quote-x: 14;
  --quote-y: 457;
  --quote-box-w: 422.866;
  --quote-box-h: 122.228;
  --quote-w: 418;
  --quote-size: 24;
  --quote-lh: calc(35 * var(--px));
  --quote-rotate: -3.19deg;
}

.product-card--echo {
  --card-x: 860;
  --card-y: 135;
  --card-delay: 0.4s;
  --line-x: 20;
  --line-y: 431;
  --quote-x: 68.78;
  --quote-y: 458.91;
  --quote-box-w: 304.372;
  --quote-box-h: 119.356;
  --quote-w: 297;
  --quote-size: 24;
  --quote-lh: calc(35 * var(--px));
  --quote-rotate: -5.48deg;
}

/* THE SCALE(tototo)は Coming soon:写真を暗くして手書き文字を重ねる */
.product-card--scale .product-card__img--main {
  opacity: 0.18;
}

.product-card__soon {
  position: absolute;
  top: calc(225 * var(--px));
  left: calc(29 * var(--px));
  width: calc(422.866 * var(--px));
  height: calc(122.228 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.product-card__soon p {
  flex: none;
  width: calc(418 * var(--px));
  font-family: "Homemade Apple", cursive;
  font-size: calc(36 * var(--px));
  line-height: calc(35 * var(--px));
  transform: rotate(-3.19deg);
}

/* 出現の順番:タイトル → 写真 → 赤いライン(左から描く)→ コピー */
.product-card__heading,
.product-card__photo,
.product-card__quote {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(calc(30 * var(--px)));
  transition:
    opacity 1.6s ease,
    filter 1.6s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--card-delay, 0s) + var(--step-delay, 0s));
}

.product-card__photo {
  --step-delay: 0.3s;
  transition:
    opacity 1.6s ease,
    filter 1.6s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* 出現は順番どおり遅らせ、ホバーの反応はすぐに */
  transition-delay:
    calc(var(--card-delay, 0s) + var(--step-delay)),
    calc(var(--card-delay, 0s) + var(--step-delay)),
    calc(var(--card-delay, 0s) + var(--step-delay)),
    0s,
    0s;
}

.product-card__quote {
  --step-delay: 2.3s;
  transform: translateY(calc(10 * var(--px)));
}

.product-card__line {
  --step-delay: 1.5s;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--card-delay, 0s) + var(--step-delay));
}

.product-card.is-visible .product-card__heading,
.product-card.is-visible .product-card__photo,
.product-card.is-visible .product-card__quote {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.product-card.is-visible .product-card__line {
  clip-path: inset(0 0 0 0);
}

/* カーソルを合わせると写真が入れ替わり、少し傾く(マウス操作できる端末のみ) */
@media (hover: hover) {
  .product-card__photo:hover {
    rotate: -3deg;
    scale: 1.03;
  }

  .product-card__photo:hover .product-card__img--alt {
    opacity: 1;
  }

  .product-card__photo:hover .product-card__img--main,
  .product-card__photo:hover .product-card__soon {
    opacity: 0;
  }
}

/* ---------- story ---------- */
.story__panel {
  position: absolute;
  top: calc(81 * var(--px));
  left: calc(100 * var(--px));
  width: calc(1240 * var(--px));
  height: calc(798 * var(--px));
  background: rgba(167, 54, 44, 0.8);
}

.story__title {
  position: absolute;
  top: calc(154 * var(--px));
  left: calc(187 * var(--px));
  width: calc(1068 * var(--px));
  font-family: var(--f-deco);
  font-weight: 400;
  font-size: calc(48 * var(--px));
  line-height: normal;
}

/* デザインでは本文の1行目が空行 */
.story__text {
  position: absolute;
  top: calc(348 * var(--px));
  left: calc(187 * var(--px));
  width: calc(470 * var(--px));
  padding-top: 1.21em;
  font-family: var(--f-body);
  font-size: calc(24 * var(--px));
  line-height: normal;
}

.story__text p + p {
  margin-top: 1.21em;
}

.story__photo {
  position: absolute;
  top: calc(164 * var(--px));
  left: calc(657 * var(--px));
  width: calc(655 * var(--px));
  height: calc(715 * var(--px));
  overflow: hidden;
}

.story__photo img {
  position: absolute;
  top: 0;
  left: -15.4%;
  width: 194.93%;
  height: 100%;
  max-width: none;
}

/* 出現の順番:赤いパネル → 見出し → 本文 → 写真 */
.story__title { transition-delay: 0.4s; }
.story__text { transition-delay: 0.8s; }
.story__photo { transition-delay: 1.1s; }

/* ---------- hu_pc(フッター) ---------- */
.footer__link {
  position: absolute;
  top: calc(413 * var(--px));
  left: calc(var(--link-x) * var(--px));
  width: calc(134 * var(--px));
  height: calc(110 * var(--px));
  font-family: var(--f-body);
  font-size: calc(24 * var(--px));
  line-height: normal;
  text-align: center;
  transition: opacity 0.3s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  opacity: 0.6;
}

.footer__label {
  display: block;
}

.footer__icon {
  position: absolute;
  top: calc(24 * var(--px));
  left: 50%;
  width: calc(86 * var(--px));
  height: calc(86 * var(--px));
  transform: translateX(-50%);
  object-fit: cover;
}

.footer__link--instagram {
  --link-x: 539;
}

.footer__link--shop {
  --link-x: 724;
}

.footer__logo {
  position: absolute;
  top: calc(50% + 140 * var(--px));
  left: calc(50% - 0.5 * var(--px));
  font-family: var(--f-deco);
  font-size: calc(64 * var(--px));
  line-height: normal;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.footer__copy {
  position: absolute;
  top: calc(837 * var(--px));
  left: calc(515 * var(--px));
  width: calc(410 * var(--px));
  font-family: var(--f-body);
  font-weight: 300;
  font-size: calc(24 * var(--px));
  line-height: normal;
  text-align: center;
}

.footer__copy small {
  font-size: inherit;
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .fv__text,
  .about__fade,
  .about__city,
  .about__plane,
  .product-card__heading,
  .product-card__photo,
  .product-card__line,
  .product-card__quote,
  .menu,
  .menu.is-open {
    transition: none;
  }
}