@charset "utf-8";
/* =========================================================
   SCARRED赤 — hero / story / product / company / contact
   ========================================================= */

/* =============== Hero =============== */
.hero{
  position:relative;
  /* ブランドを 1 行目で中央に、Scroll を 2 行目に置いて重なりを防ぐ */
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  min-height:100svh;
  padding:clamp(6rem,12vw,8rem) var(--gut) clamp(2.25rem,5vh,3.5rem);
  overflow:hidden;
  background:
    radial-gradient(125% 95% at 50% 44%, #34211c 0%, #1d1210 42%, var(--c-black) 76%);
  isolation:isolate;
}

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

/* 傾きは rotate / scale に分離し、transform は視差(JS)専用にしておく */
.hero__art img{
  position:absolute;
  will-change:transform;
  animation:heroDrift 17s ease-in-out infinite alternate;
}

@keyframes heroDrift{
  from{ translate:0 0; }
  to{ translate:0 -1.1rem; }
}

/* --- 筆：画面を大きく横切らせる --- */
.hero__brush--a{                      /* 左から中央へ抜ける赤（奥） */
  width:clamp(26rem,66vw,62rem);
  top:9%; left:-17%;
  rotate:3deg;
  opacity:.95;
  animation-duration:19s;
}
.hero__brush--b{                      /* 右上を斜めに切る金（奥） */
  width:clamp(24rem,58vw,54rem);
  top:-15%; right:-14%;
  rotate:13deg;
  opacity:.92;
  animation-duration:23s;
}
.hero__brush--e{                      /* 右下の金（奥） */
  width:clamp(20rem,52vw,48rem);
  bottom:-9%; right:-19%;
  rotate:174deg;
  opacity:.78;
  animation-duration:25s;
}
.hero__brush--c{                      /* 右肩の赤いアーチ（手前） */
  width:clamp(16rem,41vw,37rem);
  top:3%; right:-13%;
  rotate:-8deg;
  opacity:.95;
  animation-duration:15s;
}
.hero__brush--d{                      /* 下半分を払う赤（手前） */
  width:clamp(24rem,63vw,57rem);
  bottom:15%; left:-21%;
  rotate:-7deg;
  opacity:.93;
  animation-duration:21s;
}
.hero__brush--f{                      /* 足元を横切る細い赤（手前） */
  width:clamp(14rem,35vw,31rem);
  bottom:1%; left:26%;
  rotate:188deg;
  opacity:.75;
  animation-duration:17s;
}

/* --- 花：左右を上下 2 束で埋めて額縁にする --- */
.hero__flower{
  filter:saturate(1.04) drop-shadow(0 1.5rem 3.5rem rgba(0,0,0,.6));
}
.hero__flower--bl{
  width:clamp(10rem,28vw,27rem);
  bottom:-7%; left:-11%;
  rotate:-6deg;
  animation-duration:20s;
}
.hero__flower--tl{
  width:clamp(7.5rem,21vw,21rem);
  top:-9%; left:-13%;
  rotate:171deg;
  opacity:.88;
  animation-duration:26s;
}
.hero__flower--br{
  width:clamp(10rem,29vw,29rem);
  bottom:-8%; right:-11%;
  rotate:-9deg; scale:-1 1;
  animation-duration:22s;
}
.hero__flower--tr{
  width:clamp(6.75rem,19vw,19rem);
  top:-10%; right:-12%;
  rotate:169deg; scale:-1 1;
  opacity:.82;
  animation-duration:28s;
}

.hero__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(11,6,5,.93) 0%, rgba(11,6,5,.72) 40%, transparent 74%),
    linear-gradient(to bottom, rgba(11,6,5,.62) 0%, transparent 20%, transparent 74%, rgba(11,6,5,.9) 100%);
}

/* --- ロゴ --- */
.hero__body{
  position:relative;
  z-index:2;
  align-self:center;
  text-align:center;
  display:grid;
  justify-items:center;
}

.hero__logo{
  width:clamp(5.5rem,min(14vw,22svh),11rem);
  opacity:0;
  animation:heroMark 1.9s var(--ease) .35s forwards;
  filter:drop-shadow(0 .8rem 3rem rgba(210,28,26,.45)) drop-shadow(0 0 2rem rgba(11,6,5,.9));
}

.hero__tagline{
  margin-top:clamp(1.75rem,4.5vw,3rem);
  font-size:clamp(.72rem,.64rem + .3vw,.9rem);
  letter-spacing:.32em;
  text-indent:.32em;
  color:var(--c-gold-lt);
  text-shadow:0 .15rem 1.2rem rgba(11,6,5,.95);
  opacity:0;
  animation:heroFade 1.5s var(--ease) 1.1s forwards;
}

@keyframes heroFade{ from{opacity:0; transform:translateY(1rem);} to{opacity:1; transform:none;} }
@keyframes heroMark{ from{opacity:0; transform:scale(.94) translateY(1.5rem);} to{opacity:1; transform:none;} }

.hero__scroll{
  position:relative;
  z-index:2;
  margin-top:clamp(1.75rem,5vh,3rem);
  display:grid; justify-items:center; gap:.85rem;
  font-family:var(--f-en);
  font-weight:300;
  font-size:.62rem;
  letter-spacing:.4em;
  text-indent:.4em;
  color:var(--c-muted);
  opacity:0;
  animation:heroFade 1.4s var(--ease) 1.5s forwards;
}
.hero__scroll::after{
  content:"";
  width:1px; height:clamp(2.5rem,6vw,4rem);
  background:linear-gradient(to bottom,var(--c-gold),transparent);
  animation:scrollPulse 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollPulse{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

@media (max-width:640px){
  /* タグラインに掛からない高さまで下げる */
  .hero__flower--bl{ width:clamp(8rem,35vw,11.5rem); left:-15%; bottom:-9%; }
  .hero__flower--br{ width:clamp(8rem,36vw,12rem); right:-16%; bottom:-10%; }
  .hero__flower--tl{ width:clamp(6rem,27vw,8.75rem); left:-16%; top:-4%; opacity:.7; }
  .hero__flower--tr{ width:clamp(6rem,25vw,8.75rem); right:-17%; top:-6%; opacity:.66; }
  .hero__brush--d{ bottom:6%; }
  .hero__brush--c{ opacity:.6; }
  .hero__brush--e{ opacity:.5; }
  .hero__brush--f{ opacity:.5; }
}

/* =============== 共通の筆アクセント =============== */
.section__brush{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.section__brush--story{
  width:clamp(20rem,46vw,38rem);
  top:6%; right:-12%;
  opacity:.14;
  transform:rotate(10deg);
}
.section__brush--contact{
  width:clamp(18rem,44vw,34rem);
  bottom:-4%; left:-10%;
  opacity:.16;
  transform:rotate(-172deg);
}
.section > .wrap{ position:relative; z-index:1; }

/* =============== Story =============== */
.section--story{
  background:linear-gradient(to bottom,var(--c-black) 0%,var(--c-ink) 100%);
}

.story{ display:grid; gap:clamp(2.5rem,6vw,4rem); }

.story__body{ max-width:44rem; }

@media (min-width:900px){
  .story{
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    gap:clamp(3rem,7vw,6rem);
    align-items:start;
  }
  .story__head{
    position:sticky;
    top:clamp(7rem,14vw,10rem);
  }
  .story__head .label{
    flex-direction:column;
    align-items:flex-start;
    gap:1.25rem;
    margin-bottom:0;
  }
  .story__head .label__ja{ padding-left:0; padding-top:.35rem; }
  .story__head .label__ja::before{ top:-.25rem; left:0; width:2.5rem; }
}

/* =============== Product =============== */
.section--product{
  background:var(--c-ink);
  padding-block:clamp(9rem,22vw,17rem) clamp(6rem,15vw,13rem);
}

.ghost-type{
  position:absolute;
  top:clamp(3rem,7vw,5rem);
  left:50%;
  transform:translateX(-50%);
  z-index:0;
  font-family:var(--f-en);
  font-weight:200;
  font-size:clamp(3rem,12vw,10rem);
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  color:rgba(236,229,223,.045);
  pointer-events:none;
  user-select:none;
}

.product{ display:grid; gap:clamp(2.5rem,6vw,4.5rem); }

/* 背景が地色と一体化するため、枠は付けず光だけを添える */
.product__visual{
  position:relative;
  margin:0;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.product__visual::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:82%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(210,28,26,.22) 0%, rgba(210,28,26,.07) 42%, transparent 68%);
  filter:blur(6px);
}
.product__visual img{
  /* width で決め打ちして読み込み前も高さを確保する（sticky の可動域も残る） */
  width:min(100%,22rem);
  margin-inline:auto;
}

.product__name{
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(1.6rem,1.05rem + 2.3vw,2.9rem);
  letter-spacing:.22em;
  line-height:1.2;
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.35em;
}
.product__name-kanji{
  font-family:var(--f-ja);
  font-weight:600;
  color:var(--c-red);
  letter-spacing:0;
}

/* spec */
.spec{
  margin-block:clamp(2.5rem,6vw,4rem);
  border-top:1px solid var(--c-faint);
}
.spec__row{
  display:grid;
  gap:.15rem .5rem;
  padding-block:clamp(.8rem,2vw,1.1rem);
  border-bottom:1px solid var(--c-faint);
  font-size:.84em;
  line-height:1.95;
}
.spec dt{
  font-size:.9em;
  letter-spacing:.18em;
  color:var(--c-gold);
}
.spec dd{ margin:0; }

@media (min-width:560px){
  .spec__row{ grid-template-columns:11rem minmax(0,1fr); gap:1.5rem; }
}

@media (min-width:1000px){
  .product{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(3rem,6vw,6rem);
    align-items:start;
  }
  .product__visual{
    position:sticky;
    top:clamp(6.5rem,12vw,8.5rem);
    align-self:start;
  }
}

/* =============== Company =============== */
.section--company{
  background:linear-gradient(to bottom,var(--c-ink) 0%,var(--c-black) 100%);
}

.company{ display:grid; gap:clamp(2.5rem,6vw,4.5rem); align-items:center; }

.profile{ border-top:1px solid var(--c-faint); }
.profile__row{
  display:grid;
  gap:.2rem .5rem;
  padding-block:clamp(.9rem,2.2vw,1.25rem);
  border-bottom:1px solid var(--c-faint);
  font-size:.86em;
  line-height:1.95;
}
.profile dt{
  font-size:.92em;
  letter-spacing:.16em;
  color:var(--c-gold);
}
.profile dd{ margin:0; }

@media (min-width:560px){
  .profile__row{ grid-template-columns:13rem minmax(0,1fr); gap:1.5rem; }
  .profile dt br{ display:none; }
}

.company__visual{
  position:relative;
  margin:0;
}
.company__visual::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px var(--c-faint);
  pointer-events:none;
}

@media (min-width:1000px){
  .company{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(3rem,6vw,6rem);
  }
}

/* =============== Contact =============== */
.section--contact{
  background:var(--c-black);
  border-top:1px solid var(--c-faint);
}

.contact{ max-width:44rem; }

.form{ display:grid; gap:clamp(1.5rem,3.5vw,2.25rem); }

.field{ display:grid; gap:.6rem; }
.field label{
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--c-gold);
  display:flex;
  align-items:center;
  gap:.75rem;
}
.req{
  font-family:var(--f-en);
  font-weight:400;
  font-size:.58rem;
  letter-spacing:.16em;
  padding:.25em .7em;
  background:var(--c-red);
  color:#fff;
}

.field input,
.field textarea{
  width:100%;
  padding:.9rem .25rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--c-faint);
  border-radius:0;
  color:var(--c-text);
  font-family:var(--f-ja);
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.06em;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:9rem; }
.field input:hover,
.field textarea:hover{ border-bottom-color:rgba(236,229,223,.3); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--c-gold);
  background:rgba(236,229,223,.03);
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(236,229,223,.3); }

.form__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:clamp(1rem,2.5vw,1.75rem);
}

@media (max-width:640px){
  /* スマホでは商品写真を半分のサイズで置く */
  .product__visual img{ width:min(50%,11rem); }
  .product__visual::before{ width:46%; }
}

@media (max-width:560px){
  .product .btn{ width:100%; }
  .form__actions{ flex-direction:column; }
  .form__actions .btn{ width:100%; }
}