/* ===== AISIS.TV / style.css =====
   デザイントークン → ヒーロー（PC＝階段配置 / スマホ＝縦積み）
   2026-06 hero v2 : tv-unit 方式（PC・スマホで同じ素材を使い回し） */

:root{
  --c-bg:#f9f4f0;
  --c-bg-soft:#f1e8e0;
  --c-ink:#2a2520;
  --c-ink-soft:#6f665b;
  --c-clay:#c2764a;
  --c-leaf:#5f7a4e;
  --c-sun:#e8a23a;
  --c-line:#e7ddd4;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--c-bg);
  font-family:'Noto Sans JP',sans-serif;
  color:var(--c-ink);
  line-height:1.7;
}
img{display:block}

/* ---------- HERO 共通 ---------- */
.hero{
  position:relative;
  width:100%;
  margin-inline:auto;
  background:var(--c-bg);
  overflow:hidden;
}
.layer{position:absolute}

/* TVユニット（画面穴つきTV＋後ろの動画） */
.tv-unit{
  z-index:3;
  aspect-ratio:1116/1032;
  animation:fadeIn .7s ease-out .15s both;
}
.tv-unit .tv-img{
  position:relative;z-index:2;
  width:100%;height:100%;
  pointer-events:none;            /* 前面のTV枠がクリックを邪魔しない＝後ろの動画/操作バーを使える */
}
.screen-video{
  position:absolute;z-index:1;
  left:35.22%;top:36.43%;width:53.94%;height:38.95%;
  object-fit:cover;background:#21302e;
  border-radius:.6vw;cursor:pointer;
}

/* 茎（下から生える） */
.stem{
  z-index:1;transform-origin:bottom center;
  animation:growStem .75s cubic-bezier(.22,1,.36,1) .35s both;
}
.stem img{width:100%;height:auto}

/* エコロジン（咲く） */
.badge{
  z-index:4;transform-origin:center bottom;
  animation:bloom .55s ease-out 1s both;
}
.badge img{width:100%;height:auto}

/* コピー共通 */
.copy{position:absolute;inset:0;z-index:5;pointer-events:none}
.eyebrow{
  position:absolute;color:var(--c-clay);
  font-family:'Zen Maru Gothic',sans-serif;font-weight:500;letter-spacing:.03em;
  animation:fadeUp .6s ease-out 1.2s both;
}
.headline{
  position:absolute;
  font-family:'Zen Maru Gothic',sans-serif;font-weight:700;
  line-height:1.24;color:var(--c-ink);
}
.headline .line{display:block}
.headline .ch{
  display:inline-block;
  animation:charIn .5s ease-out both;
  animation-delay:calc(1.35s + var(--i) * .05s);
}
.sub{
  position:absolute;color:var(--c-ink-soft);
  animation:fadeUp .6s ease-out 2s both;
}
.cta-row{
  display:flex;gap:clamp(10px,1vw,18px);
  pointer-events:auto;
  animation:fadeUp .6s ease-out 2.2s both;
}
/* スマホ用ボタン専用セクション（PCでは非表示） */
.hero-actions{background:var(--c-bg)}
.btn{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:'Zen Maru Gothic',sans-serif;font-weight:500;
  border-radius:999px;padding:.62em 1.5em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease;
}
.btn-primary{background:var(--c-clay);color:#fff}
.btn-secondary{background:transparent;color:var(--c-clay);border:2px solid var(--c-clay)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--c-sun);outline-offset:3px}

/* ---------- PC（≥641px）: デザイン見本の階段配置 ---------- */
@media (min-width:641px){
  .hero{max-width:1920px;aspect-ratio:16/9;max-height:100svh}
  .tv-unit{left:40.26%;top:1.76%;width:58.13%}
  .eyebrow{left:5.3%;top:25.5%;font-size:clamp(13px,1.5vw,24px)}
  .headline{left:13.6%;top:35.3%;font-size:clamp(30px,4.7vw,92px)}
  .sub{left:19.2%;top:61.8%;font-size:clamp(13px,1.7vw,27px)}
  .cta-pc{position:absolute;left:26.6%;top:70%;flex-direction:column;align-items:flex-start}
  .hero-actions{display:none}
  .btn{font-size:clamp(13px,1.4vw,22px)}
  .badge{left:2.3%;bottom:15%;width:13%}
  .stem{left:5%;bottom:0;width:6.5%}
}

/* ---------- スマホ（≤640px）: 縦積み ---------- */
@media (max-width:640px){
  .hero{aspect-ratio:750/1100}
  .eyebrow{left:0;right:0;top:2.9%;text-align:center;font-size:clamp(13px,3.6vw,20px)}
  .headline{left:0;right:0;top:7.5%;text-align:center;font-size:clamp(30px,9vw,60px)}
  .sub{right:4%;top:27.5%;text-align:right;font-size:clamp(13px,3.8vw,22px)}
  .tv-unit{left:2%;top:30%;width:96%}
  .badge{left:1%;bottom:15%;width:22%}
  .stem{left:4.5%;bottom:0;width:13%}
  .cta-pc{display:none}
  .hero-actions{display:flex;justify-content:center;padding:6vw 6vw 9vw}
  .cta-m{flex-direction:column;align-items:stretch;gap:3.5vw;width:100%;max-width:340px}
  .cta-m .btn{justify-content:center;font-size:clamp(15px,4.4vw,20px);padding:.85em 1.5em}
}

/* ---------- keyframes ---------- */
@keyframes growStem{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bloom{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes charIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .tv-unit,.screen-video,.stem,.badge,.eyebrow,.headline .ch,.sub,.cta-row{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}