/* =========================================================
   home.css — トップページ固有
   並び：ベース → 768px以下 → 480px以下
   ========================================================= */

/* ---------- ファーストビュー ---------- */
.hero {
  height: 100svh; min-height: 620px; max-height: 1100px;
  padding: var(--header-h) var(--gutter) var(--gutter);
}
.hero__media {
  --notch: 28px;   /* 文字パネルの角丸 */
  position: relative; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--c-bg-2);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; }

/* 左下の文字パネル（写真を切り欠いたように見せる） */
.hero__panel {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  max-width: min(680px, 84%);
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.6vw, 56px) 4px 0;
  background: var(--c-bg);
  border-top-right-radius: var(--notch);
}
.hero__panel::before,
.hero__panel::after {   /* 写真側の角を丸める（内側の角丸） */
  content: ""; position: absolute; width: var(--notch); height: var(--notch);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--c-bg) var(--notch));
}
.hero__panel::before { left: 0; top: calc(var(--notch) * -1); }
.hero__panel::after { right: calc(var(--notch) * -1); bottom: 0; }

.hero__label {
  display: flex; align-items: center; gap: 12px; margin-bottom: clamp(10px, 1.4vw, 18px);
  font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .14em; color: var(--c-accent);
}
.hero__label::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.hero__copy {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 7.4vw, 124px); line-height: .98; letter-spacing: -.01em;
}
.hero__copy em { font-style: italic; color: var(--c-accent); }
.hero__title {
  margin-top: clamp(16px, 2vw, 28px);
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.9; letter-spacing: .18em;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }   /* y・g などの下が切れないよう余白 */
.hero__line > span { display: block; }

/* 右下の回転バッジ（コンセプトへ移動） */
.hero__badge {
  position: absolute; right: clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.4vw, 36px); z-index: 2;
  display: grid; place-items: center;
  width: clamp(96px, 9vw, 128px); aspect-ratio: 1;
  border-radius: 50%; background: rgba(244, 241, 234, .92); color: var(--c-ink);
  transition: background-color .4s, color .4s;
}
.hero__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: badgeSpin 24s linear infinite; }
.hero__badge text { font-family: var(--font-display); font-size: 10.5px; fill: currentColor; }
.hero__badge-arrow { position: relative; width: 1px; height: 28px; background: currentColor; }
.hero__badge-arrow::after {
  content: ""; position: absolute; left: -4px; bottom: 0; width: 8px; height: 8px;
  border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg);
}
.hero__badge:hover { background: var(--c-accent); color: var(--c-on-dark); }
@keyframes badgeSpin { to { transform: rotate(360deg); } }

/* 読み込み時の動き：写真が中央から開く → 文字が下から出る（JS有効時のみ） */
.js .hero__media { clip-path: inset(12% 14% round var(--radius)); }
.js .hero__img { transform: scale(1.35); }
.js .hero__label { opacity: 0; }
.js .hero__line > span { transform: translateY(105%); }
.js .hero__badge { opacity: 0; transform: scale(.6); }

.hero.is-ready .hero__media { clip-path: inset(0 round var(--radius)); transition: clip-path 1.6s var(--ease); }
.hero.is-ready .hero__img { animation: heroIn 2.4s var(--ease) both, heroDrift 22s 2.4s ease-in-out infinite alternate; }
.hero.is-ready .hero__label { opacity: 1; transition: opacity 1s .9s; }
.hero.is-ready .hero__line > span { transform: none; transition: transform 1.1s var(--ease-out); }
.hero.is-ready .hero__copy .hero__line:nth-child(1) > span { transition-delay: 1s; }
.hero.is-ready .hero__copy .hero__line:nth-child(2) > span { transition-delay: 1.12s; }
.hero.is-ready .hero__title .hero__line:nth-child(1) > span { transition-delay: 1.35s; }
.hero.is-ready .hero__title .hero__line:nth-child(2) > span { transition-delay: 1.45s; }
.hero.is-ready .hero__badge { opacity: 1; transform: none; transition: opacity .8s 1.6s, transform 1s 1.6s var(--ease-out), background-color .4s, color .4s; }
@keyframes heroIn { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- コンセプト ---------- */
.concept { padding: clamp(96px, 12vw, 180px) 0; overflow: hidden; }
.marquee { overflow: hidden; margin-bottom: clamp(48px, 7vw, 104px); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__track span {
  flex-shrink: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(72px, 13vw, 220px); line-height: 1.1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--c-accent);
}
.marquee__track i { margin-inline: .35em; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.concept__inner { display: grid; grid-template-columns: 5fr 6fr; gap: 40px clamp(40px, 8vw, 120px); }
.concept__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.65; letter-spacing: .1em;
}
.concept__body { padding-top: clamp(0px, 4vw, 56px); }
.concept__body p + p { margin-top: 1.6em; }

/* ---------- こだわり ---------- */
.features { padding: clamp(96px, 12vw, 160px) 0; background: var(--c-bg-2); }
.features__stage { display: none; }   /* JS有効のPCだけ表示 */
.features__list { display: grid; gap: 64px; }
.feature__media { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(56px, 6vw, 96px); line-height: 1; color: var(--c-accent);
}
.feature__title {
  margin: 16px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line);
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.6; letter-spacing: .1em;
}
.feature__title[lang="en"] { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .16em; }

/* PC（769px以上・JS有効）：左に写真を固定して、右の文章に合わせて切り替え */
@media (min-width: 769px) {
  .js .features__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 112px); }
  .js .features__stage {
    position: sticky; top: calc(var(--header-h) + 4vh); align-self: start;
    display: flex; flex-direction: column; gap: 16px;
    height: calc(92vh - var(--header-h));
  }
  .js .features__frame { position: relative; flex: 1; border-radius: var(--radius); overflow: hidden; background: var(--c-bg); }
  .js .features__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    clip-path: inset(100% 0 0 0); transform: scale(1.12);
    transition: clip-path 1.1s var(--ease), transform 1.8s var(--ease-out);
  }
  .js .features__frame img.is-prev { clip-path: inset(0); transform: scale(1); z-index: 0; }
  .js .features__frame img.is-active { clip-path: inset(0); transform: scale(1); z-index: 1; }
  .js .features__counter { font-family: var(--font-display); font-size: 15px; letter-spacing: .2em; color: var(--c-ink-2); }
  .js .features__current { font-size: 26px; color: var(--c-ink); }

  .js .features__list { gap: 0; }
  .js .feature { display: flex; align-items: center; min-height: 78vh; }
  .js .feature__media { display: none; }
  .js .feature__body { opacity: .28; transition: opacity .6s; }
  .js .feature.is-active .feature__body { opacity: 1; }
}

/* ---------- 商品 ---------- */
.products { padding: clamp(96px, 12vw, 160px) 0; }
.products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px clamp(16px, 2vw, 28px); }
.product__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.product:hover .product__media img { transform: scale(1.06); }
.product__badge {
  position: absolute; top: 14px; left: 14px;
  padding: 2px 14px; border-radius: 999px;
  background: var(--c-ink); color: var(--c-on-dark);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; line-height: 1.8;
}
.product__cat { margin-top: 20px; font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .08em; color: var(--c-accent); line-height: 1.4; }
.product__name { margin-top: 4px; font-family: var(--font-serif); font-weight: 500; font-size: 18px; letter-spacing: .08em; line-height: 1.6; }
.product__text { margin-top: 10px; font-size: 13px; line-height: 1.85; color: var(--c-ink-2); }
.product__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-line);
  font-size: 13px; color: var(--c-ink-2);
}
.product__price { font-family: var(--font-display); font-size: 24px; color: var(--c-ink); letter-spacing: .04em; line-height: 1; }
.product__price small { font-family: var(--font-sans); font-size: 11px; color: var(--c-ink-2); }
.js .product[data-reveal]:nth-child(4n + 2) { transition-delay: .12s; }
.js .product[data-reveal]:nth-child(4n + 3) { transition-delay: .24s; }
.js .product[data-reveal]:nth-child(4n + 4) { transition-delay: .36s; }
.products__more { margin-top: clamp(56px, 7vw, 88px); text-align: center; }

/* ---------- ライフスタイル ---------- */
.lifestyle { padding-bottom: clamp(96px, 12vw, 160px); }
.lifestyle__media { height: clamp(380px, 50vw, 720px); overflow: hidden; }
.lifestyle__media img { width: 100%; height: 100%; object-fit: cover; }
/* 対応ブラウザーでは、スクロールに合わせて写真がゆっくり動く（非対応ブラウザーは静止） */
@supports (animation-timeline: view()) {
  .lifestyle__media img { height: 118%; animation: parallax linear both; animation-timeline: view(); }
  @keyframes parallax { from { transform: translateY(-15%); } to { transform: translateY(0); } }
}
.lifestyle__card {
  position: relative; z-index: 1;
  width: min(580px, 100% - var(--gutter) * 2);
  margin: calc(clamp(120px, 14vw, 200px) * -1) max(var(--gutter), (100% - var(--container)) / 2) 0 auto;
  padding: clamp(36px, 4.4vw, 64px);
  border-radius: var(--radius); background: var(--c-bg);
}
.lifestyle__title {
  margin-bottom: 24px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.7; letter-spacing: .1em;
}

/* ---------- 会社概要 ---------- */
.company { padding-bottom: clamp(96px, 12vw, 160px); }
.company__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 32px clamp(40px, 6vw, 96px); }
.info-list__row {
  display: grid; grid-template-columns: 9em 1fr; gap: 8px 24px;
  padding: 22px 4px; border-bottom: 1px solid var(--c-line);
}
.info-list__row:first-child { border-top: 1px solid var(--c-line); }
.info-list dt { color: var(--c-ink-2); font-size: 13px; letter-spacing: .12em; }
.info-list dd { line-height: 1.85; }

/* ---------- お問い合わせ ---------- */
.contact { padding: clamp(96px, 12vw, 160px) 0; background: var(--c-accent-deep); color: var(--c-on-dark); }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(40px, 6vw, 96px); align-items: end; }
.contact__title { margin-bottom: 28px; font-weight: 400; line-height: 1; }
.contact__title span {
  display: block;
  font-family: var(--font-display); font-style: italic; font-size: clamp(72px, 10vw, 160px); letter-spacing: -.01em;
}
.contact__title small { display: block; margin-top: 16px; font-size: 13px; letter-spacing: .2em; opacity: .7; }
.contact__head p { max-width: 26em; opacity: .85; }
.contact__list li { border-top: 1px solid rgba(244, 241, 234, .22); }
.contact__list li:last-child { border-bottom: 1px solid rgba(244, 241, 234, .22); }
.contact__link {
  position: relative; display: grid; gap: 2px;
  padding: 28px 72px 28px 0; text-decoration: none;
}
.contact__link::after {   /* 右の丸い矢印 */
  content: "→"; position: absolute; right: 0; top: 50%;
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px;
  border: 1px solid rgba(244, 241, 234, .4); border-radius: 50%;
  font-size: 16px; transition: background-color .4s, color .4s, transform .4s var(--ease-out);
}
.contact__link:hover::after { background: var(--c-on-dark); color: var(--c-accent-deep); transform: rotate(-45deg); }
.contact__kind { font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .14em; opacity: .7; line-height: 1.4; }
.contact__value {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.3; letter-spacing: .04em;
  overflow-wrap: anywhere; transition: transform .5s var(--ease-out);
}
.contact__link:hover .contact__value { transform: translateX(8px); }
.contact__note { font-size: 12px; opacity: .7; }

/* =========================================================
   768px以下
   ========================================================= */
@media (max-width: 768px) {
  .hero { min-height: 560px; max-height: none; }
  .hero__media { --notch: 20px; }
  .hero__panel { max-width: 92%; padding: 22px 24px 2px 0; }
  .hero__badge { top: 14px; bottom: auto; right: 14px; }

  .concept__inner { grid-template-columns: 1fr; }
  .concept__body { padding-top: 0; }

  .products__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 14px; }
  .js .product[data-reveal]:nth-child(n) { transition-delay: 0s; }
  .js .product[data-reveal]:nth-child(2n) { transition-delay: .12s; }

  .lifestyle__media { height: 56vw; min-height: 260px; }
  .lifestyle__card { margin-top: -48px; margin-right: auto; }

  .company__inner { grid-template-columns: 1fr; }

  .contact__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   480px以下
   ========================================================= */
@media (max-width: 480px) {
  .hero__copy { font-size: 46px; }
  .hero__title { font-size: 14px; letter-spacing: .12em; }
  .hero__label { font-size: 13px; }

  .product__name { font-size: 15px; }
  .product__text { display: none; }
  .product__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .product__price { font-size: 20px; }

  .info-list__row { grid-template-columns: 1fr; gap: 2px; padding: 16px 2px; }

  .contact__link { padding-right: 60px; }
  .contact__link::after { width: 44px; height: 44px; margin-top: -22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__media, .hero.is-ready .hero__media { clip-path: none; }
  .js .hero__img, .hero.is-ready .hero__img { transform: none; animation: none; }
  .js .hero__label, .js .hero__badge { opacity: 1; transform: none; }
  .js .hero__line > span { transform: none; }
  .hero__badge svg, .marquee__track { animation: none; }
  .lifestyle__media img { animation: none; height: 100%; }
  .js .features__frame img { transform: none; }
}