/* ＆rich トップページ
   トークンは tokens.css、共通部品は base.css。ここにはトップページ固有のものだけ。
   ファーストビューの寸法はデザイン確定版の実測値。 */

/* Transparent navigation, with no filled header band in any scroll state. */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:94px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--pad-x);color:#fff;background:none;border:0;transition:transform 350ms var(--ease-exhale),height 250ms;pointer-events:none}
.hd>*{pointer-events:auto}
.hd.is-away:not(.is-open):not(:focus-within){transform:translateY(-110%)}
.hd__logo{display:flex;align-items:center;gap:8px;filter:brightness(0) invert(1)}
.hd__logo img{display:block}.hd__logo .m{width:15px}.hd__logo .t{width:58px}
.hd__nav{display:flex;gap:17px;margin-right:auto;margin-left:34px;font-size:var(--fs-ui);font-weight:500;letter-spacing:var(--ls-ui);white-space:nowrap}
.hd__nav a{text-decoration:none}.hd__nav a:hover{color:inherit}
.hd__cta{display:flex;align-items:center;gap:8px}
.hd .btn--line,.hd.is-past .btn--line{background:#fff;border:1px solid #06a747;color:#087b37;box-shadow:none}
.hd .btn--line:hover,.hd .btn--line:focus-visible{background:#f2faf5;border-color:#087b37}
.hd.is-past{color:var(--c-text);height:74px}
.hd.is-past .hd__logo{filter:brightness(0)}
.hd.is-on-dark{color:#fff}.hd.is-on-dark .hd__logo{filter:brightness(0) invert(1)}
.hd__menu{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;color:inherit}
.hd__menu i{display:block;height:1.5px;background:currentColor;border-radius:1px;transition:transform 250ms,opacity 250ms}

/* ---------- ファーストビュー ---------- */
.fv{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--c-text)}
.fv__slides{position:absolute;inset:0;overflow:hidden;z-index:0;isolation:isolate}
.fv__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:58% 46%;display:block;opacity:0}
/* 1枚目だけを不透明の下地にする（JSなしの表示）。切り替えは js/hero.js の全面クロスフェードで、
   進行中は前の写真を不透明のまま残し、次を上に重ねて透過させる。CSSアニメーションは持たない */
.fv__slides>:first-child img,.fv__slides>img:first-child{opacity:1;z-index:1}
/* 左のスクリム。黒ではなくブランドのローズのノイズグラデーションで覆う */
.fv__scrim{position:absolute;inset:0;z-index:1;
  background:url(../assets/grad-rose.jpg) left bottom / 165% 165% no-repeat;
  -webkit-mask-image:linear-gradient(95deg,#000 0%,#000 17%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.44) 45%,rgba(0,0,0,.1) 58%,rgba(0,0,0,0) 68%);
          mask-image:linear-gradient(95deg,#000 0%,#000 17%,rgba(0,0,0,.88) 30%,rgba(0,0,0,.44) 45%,rgba(0,0,0,.1) 58%,rgba(0,0,0,0) 68%)}
.fv__scrim::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:150px 150px;opacity:.3;mix-blend-mode:overlay}
/* 巨大ロゴタイプの足元だけごく薄く沈める */
.fv__foot{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(46,32,27,.34) 0%,rgba(46,32,27,0) 26%)}
/* 巨大ロゴタイプを画面の下端で断ち切る */
.fv__word{position:absolute;z-index:2;left:-2%;bottom:-11%;width:78%;opacity:.95;pointer-events:none}
.fv__word img{width:100%;height:auto;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(28,24,22,.35))}
.fv__vt{position:absolute;z-index:3;left:6%;top:17%;color:#fff}
/* リードとメタは1つの塊にして流す。別々に%で置くと画面が低いときに重なる */
.fv__txt{position:absolute;z-index:3;left:6%;top:52%;width:28%;max-width:400px}
.fv__lead{color:#fff;word-break:normal}
.fv__meta{margin-top:clamp(20px,4.5vh,48px);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 13px;
  font-size:15px;font-weight:500;letter-spacing:.06em}
.fv__meta span+span{padding-left:13px;position:relative}
.fv__meta span+span::before{content:"";position:absolute;left:0;top:50%;width:1px;height:13px;
  transform:translateY(-50%);background:currentColor;opacity:.45}
.fv__promo{position:absolute;z-index:6;right:5%;bottom:8%;width:300px}
.fv__promo .promo{width:100%}

/* ---------- 最終CTA ---------- */
.final{position:relative;text-align:center;color:#fff;
  padding-block:var(--sec-loose);
  background:url(../assets/grad-shade.jpg) center/cover no-repeat}
.final h2{color:#fff}
.final p{margin-top:16px;color:#fff}
.final__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--sp-xl)}

/* ---------- フッター ---------- */
.ft{background:var(--c-text);color:#fff;padding-block:var(--sec-tight)}
.ft__main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px)}
.ft__logo{filter:brightness(0) invert(1);display:flex;align-items:center;gap:9px}
.ft__logo .m{width:18px}
.ft__logo .t{width:72px}
/* 住所と営業時間は読ませる文字。キャプション扱いにして小さく薄くしない */
.ft__addr{margin-top:16px;font-size:var(--fs-body-small);line-height:2;
  letter-spacing:var(--ls-body-small);color:#fff}
.ft h3{font-size:var(--fs-caption);font-family:var(--ff-label);
  letter-spacing:var(--ls-label);color:var(--c-brand);margin-bottom:14px}
.ft li{margin-top:9px}
.ft a{text-decoration:none;font-size:var(--fs-body-small);letter-spacing:var(--ls-body-small)}
.ft a:hover{color:var(--c-brand)}
.ft__bottom{margin-top:var(--sec-tight);padding-top:var(--sp-lg);
  border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;
  gap:var(--sp-md);flex-wrap:wrap;font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);color:#fff}
.ft__legal{display:flex;gap:var(--sp-lg);flex-wrap:wrap}

/* ---------- スマートフォンの追従CTA ---------- */
.float{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:1px;background:var(--c-line)}
.float a{flex:1;display:flex;align-items:center;justify-content:center;height:56px;
  text-decoration:none;font-size:var(--fs-ui);font-weight:500;letter-spacing:var(--ls-ui)}
.float .l{background:var(--c-line-green);color:var(--c-text)}
.float .r{background-image:var(--grad-btn);color:#fff}

/* ---------- 画面幅ごとの調整 ---------- */
/* 幅28%のままだとリードが3〜4行に伸びる */
@media(max-width:1365px){
  .fv__txt{width:46%;max-width:420px}
}
@media(max-width:1023px){
  .hd__nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;background:rgba(252,251,248,.98);
    border-block:1px solid var(--c-line);padding:var(--sp-sm) var(--pad-x) var(--sp-lg)}
  .hd.is-open .hd__nav{display:flex}
  .hd.is-open .hd__nav a{color:var(--c-text);padding:14px 0;
    border-bottom:1px solid var(--c-line);font-size:var(--fs-body-small)}
  .hd__menu{display:flex}
}
@media(max-width:767px){
  .hd{height:64px}
  .ft__main{grid-template-columns:minmax(0,1fr)}
  .fv{height:100svh;min-height:560px}
  /* リードとメタは右寄せ、ロゴタイプは札の上に置く */
  .fv__vt{left:6%;top:11%}
  .fv__txt{left:auto;right:6%;top:46%;bottom:auto;width:84%;max-width:none}
  .fv__lead{text-align:right}
  .fv__meta{margin-top:clamp(14px,2.6vh,26px);font-size:13px;justify-content:flex-end}
  .fv__word{width:108%;left:-4%;bottom:auto;top:65%}
  .fv__foot{background:linear-gradient(0deg,rgba(46,32,27,.42) 0%,rgba(46,32,27,0) 34%)}
  .fv__scrim{-webkit-mask-image:linear-gradient(160deg,#000 0%,#000 34%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.2) 78%,rgba(0,0,0,0) 92%);
             mask-image:linear-gradient(160deg,#000 0%,#000 34%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.2) 78%,rgba(0,0,0,0) 92%)}
  .fv__promo{left:16px;right:16px;bottom:72px;width:auto}
  .promo{min-width:0}
  .float{display:flex}
  body{padding-bottom:56px}
  .ft__bottom{margin-top:var(--sp-xxl)}
}