@charset "UTF-8";
/* BOTANIST風 フルスクリーン動画ヒーロー + スクロール演出（試作） */

.cine-hero{ position:relative; height:100vh; min-height:560px; overflow:hidden; background:#efe9e0; }
.cine-hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cine-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(249,246,239,.62) 0%, rgba(249,246,239,.22) 45%, rgba(249,246,239,0) 72%); }
.cine-hero__inner{ position:relative; z-index:2; max-width:1120px; margin:0 auto; height:100%;
  display:flex; align-items:center; padding:0 40px; }
.cine-hero__copy{ max-width:560px; color:#2c2620; }
.cine-hero__eyebrow{ font-size:11px; letter-spacing:.3em; color:#8a7d63; margin:0 0 22px; }
.cine-hero__title{ font-family:var(--font-serif); font-weight:500; font-size:58px; line-height:1.6; letter-spacing:.05em; margin:0 0 26px; }
.cine-hero__lead{ font-size:14px; line-height:2.15; color:#4a443c; max-width:430px; margin:0; }
.cine-hero__scroll{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3;
  font-size:10px; letter-spacing:.32em; color:#6f685d; display:flex; flex-direction:column; align-items:center; gap:12px; }
.cine-hero__scroll::after{ content:""; width:1px; height:46px; background:#6f685d; animation:cine-line 2.2s infinite; }
@keyframes cine-line{ 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top}
  60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* 動画下のイントロ帯 */
.cine-intro{ padding:110px 0; text-align:center; }
.cine-intro__lead{ font-family:var(--font-serif); font-size:30px; line-height:2; letter-spacing:.06em; color:var(--ink); margin:0; }
.cine-intro__sub{ font-size:13.5px; line-height:2.2; color:#5a554c; margin:24px auto 0; max-width:560px; }

/* スクロール演出 */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s ease, transform 1s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s } .reveal.d3{ transition-delay:.3s }

/* コンセプト試作（デザイン画像をスクロール出現）+ 切替バー */
.concept-body{ max-width:1100px; margin:0 auto; padding:0 0 90px; background:#fff; }
.concept-body .reveal{ overflow:hidden; }
.concept-body .reveal img{ width:100%; display:block; }
.concept-switch{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.96);
  border-top:1px solid #e5e0d6; display:flex; gap:3px; align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 10px; }
.concept-switch__label{ font-size:11px; color:#8a857a; margin-right:8px; }
.concept-switch a{ font-size:11px; padding:5px 9px; border-radius:4px; color:#555; text-decoration:none; border:1px solid transparent; }
.concept-switch a:hover{ border-color:#cbb; }
.concept-switch a.active{ background:#2c2620; color:#fff; }

@media (max-width:767px){
  .cine-hero__title{ font-size:36px; }
  .cine-hero__inner{ padding:0 24px; }
  .cine-hero__scrim{ background:linear-gradient(180deg, rgba(249,246,239,.3) 0%, rgba(249,246,239,.55) 100%); }
  .cine-intro{ padding:70px 0; } .cine-intro__lead{ font-size:22px; }
}