/* Heather 25th x MLB
   デザイン原寸 PC 1510x9936（左495 / 中央520 / 右495）, SP 430x8218
   各要素の位置はHTML側に原寸pxで持たせ、--u 倍して表示する */

:root{
  --bg:        #EBF3F5;
  --ink:       #2F3334;
  --wine:      #A14368;
  --btn-text:  #FFFFFF;
  --side-left-bg:#FFFFFF;

  --jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --en: "Graduate", "Zen Kaku Gothic New", serif;

  /* 1510px時に520pxになる */
  --col: clamp(440px, 34.437vw, 560px);
  --u:   calc(var(--col) / 520);

  --bg-dur: .5s;
  --ease-theme: cubic-bezier(.65,0,.35,1);
  --slide-dur: 1.5s;
  --marquee-gap: 100;
}

html{
  -webkit-text-size-adjust:100%;
  background-color:var(--bg);
  transition:background-color var(--bg-dur) var(--ease-theme);
}
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--jp);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* PC左右の固定パネル */
.side{
  position:fixed; top:0; bottom:0; z-index:3;  /* 中央カラムより手前（1px重ねた部分で写真と背景の端をそろえる） */
  width:calc((100% - var(--col)) / 2 + 1px);  /* 中央カラムと1px重ねて、小数の端数で隙間が出ないように */
  overflow:hidden;
}
.side--left {left:0;  background:var(--side-left-bg)}
.side--right{right:0; background:var(--bg)}
.side--right::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,16,12,.30)}

.side__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.side__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;height:auto}
.side--left  .side__logo{width:calc(262 * var(--u))}
.side--right .side__logo{width:calc(200 * var(--u))}

.side__stitch{position:absolute;z-index:0;height:auto}
.side__stitch--tl{top:0;    left:0;  width:calc(156 * var(--u))}
.side__stitch--br{bottom:0; right:0; width:calc(170 * var(--u)); transform:rotate(180deg)}

/* 中央カラム */
.stage{
  position:relative; z-index:2;
  width:var(--col);
  max-width:100%;
  margin:0 auto;
  background:transparent;
  overflow-x:clip;
}

/* スクロールで切り替わる背景レイヤー（色は各 .row の data-bg） */
.bgfade{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--bg);
  transition:background-color var(--bg-dur) var(--ease-theme);
}
/* 止める場合は下を有効化
@media (prefers-reduced-motion:reduce){
  html,.bgfade{transition:none}
}
*/

/* 行。中身は絶対配置 */
.row{position:relative;width:100%;height:calc(var(--rh) * var(--u))}
.row > *{position:absolute}

.ph,.btn{
  top:calc(var(--t) * var(--u));
  left:calc(var(--l) * var(--u));
  width:calc(var(--w) * var(--u));
  height:calc(var(--h) * var(--u));
}
.ph{overflow:hidden}
.ph picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;object-position:center}

.tx{top:calc(var(--t) * var(--u));left:calc(var(--l) * var(--u))}
.tx.tx--full{left:0;width:100%;text-align:center}


/* typography */
.lead{
  font-size:max(15px, calc(18 * var(--u)));
  line-height:calc(37 * var(--u));
  font-weight:500;
  letter-spacing:.02em;
}
.body{
  font-size:max(12px, calc(14.5 * var(--u)));
  line-height:calc(38 * var(--u));
  font-weight:400;
  letter-spacing:.02em;
}
/* 濃色セクション表示中は文字を白に */
.stage{transition:color var(--bg-dur) var(--ease-theme)}
html.is-dark .stage,
html.is-dark .h2{color:#fff}

.h2{
  font-family:var(--en);
  color:var(--wine);
  font-size:calc(30 * var(--u));
  line-height:calc(34 * var(--u));
  letter-spacing:.09em;
  white-space:nowrap;
}
.prices{
  font-family:var(--en);
  font-size:max(11px, calc(13 * var(--u)));
  line-height:calc(26 * var(--u));
  letter-spacing:.01em;
  white-space:nowrap;
}
.prices a,.prices span{
  text-decoration:underline;
  text-underline-offset:calc(3 * var(--u));
  text-decoration-thickness:1px;
}
.prices.prices--center{left:0;width:100%;text-align:center}

.btn{
  display:flex;align-items:center;justify-content:center;
  background:var(--wine);color:var(--btn-text);
  font-family:var(--en);
  font-size:calc(18 * var(--u));
  letter-spacing:.10em;
  transition:opacity .3s ease;
}
.btn:hover{opacity:.82}

.credit-ttl{
  font-family:var(--en);
  font-size:calc(12 * var(--u));
  line-height:calc(20 * var(--u));
  letter-spacing:.08em;
}
.credit{
  font-family:var(--en);
  font-size:calc(12 * var(--u));
  line-height:calc(38 * var(--u));
  letter-spacing:.08em;
}

/* reveal */
.rv{opacity:0;transform:translateY(24px);
    transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
/* 左右端の横位置画像だけ、その端から横にスライドイン */
.rv.rv--l{transform:translate3d(-12%,0,0)}
.rv.rv--r{transform:translate3d(12%,0,0)}
.rv.rv--l,.rv.rv--r{
  transition:opacity 1.3s cubic-bezier(.4,0,.2,1),
             transform var(--slide-dur) cubic-bezier(.25,.46,.45,.94);
}
.rv.in{opacity:1;transform:none}
.h2.rv{transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.19,1,.22,1),color var(--bg-dur) var(--ease-theme)}

/* 見出しループ */
.marquee{overflow:hidden;text-align:left}
.marquee__track{display:flex;width:max-content;animation:marquee 20s linear infinite}
.marquee__item{flex:none;padding-right:calc(var(--marquee-gap) * var(--u))}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Reduce Motion時も動かす。止める場合は下を有効化
@media (prefers-reduced-motion:reduce){
  .rv,.rv.rv--l,.rv.rv--r{transform:none;transition:opacity .6s linear}
}
*/

/* SP（〜899px）: 430px基準 */
@media (max-width:899px){
  :root{
    --col: min(100vw, 500px);
    --u:   calc(var(--col) / 430);
  }
  .side{display:none}
  .stage{width:var(--col)}

  .row{height:calc(var(--srh) * var(--u))}
  .ph,.btn{
    top:calc(var(--st) * var(--u));
    left:calc(var(--sl) * var(--u));
    width:calc(var(--sw) * var(--u));
    height:calc(var(--sh) * var(--u));
  }
  .tx{top:calc(var(--st) * var(--u));left:calc(var(--sl) * var(--u))}

  .lead  {font-size:max(16px, calc(17 * var(--u)));   line-height:calc(29 * var(--u))}
  .body  {font-size:max(13px, calc(13.5 * var(--u))); line-height:calc(30 * var(--u))}
  .h2    {font-size:calc(24 * var(--u));             line-height:calc(28 * var(--u))}
  .prices{font-size:max(11px, calc(12 * var(--u)));  line-height:calc(38 * var(--u))}
  .btn   {font-size:calc(15 * var(--u))}
  .credit-ttl{font-size:calc(9.5 * var(--u)); line-height:calc(20 * var(--u))}
  .credit    {font-size:calc(9.5 * var(--u)); line-height:calc(29 * var(--u))}

}

/* 〜359pxは下限を外して等比に戻す（はみ出し防止） */
@media (max-width:359px){
  .body  {font-size:calc(13.5 * var(--u))}
  .prices{font-size:calc(12 * var(--u))}
}

/* FV：画面の高さいっぱい（端末に合わせて cover でトリミング） */
:root{--fvh:100vh}
@supports (height:100svh){ :root{--fvh:100svh} }   /* スマホ・タブレットはJSで開いた時の高さ(px)に上書き */
.row.row--fv{height:var(--fvh)}
.row--fv .ph{top:0;left:0;width:100%;height:100%}
.row--fv .ph img{object-position:50% 35%}
/* 3カラムで縦長の画面（iPad Pro縦など）：モデルが切れないよう画像全体を表示（高さを画像比率に合わせる） */
@media (min-width:900px) and (orientation:portrait){
  .row.row--fv{height:min(var(--fvh), var(--col) * 1.5)}
}
.fv-logo{display:none}
@media (max-width:899px){
  /* 右揃え：MLBは右上、Heatherは右下（上下の位置はFVの高さに対する%） */
  .row--fv .fv-logo{display:block;position:absolute;z-index:1;height:auto;right:calc(15 * var(--u))}
  .row--fv .fv-logo--mlb{top:10%;width:calc(149 * var(--u))}
  .row--fv .fv-logo--heather{bottom:7.4%;width:calc(172 * var(--u))}
}

/* 画面幅が500pxを超えるスマホ〜iPad縦（501〜899px。Surface Duo 等を含む）：FVは横幅いっぱい。以降のセクションは中央500px */
@media (min-width:501px) and (max-width:899px){
  .stage{width:100%}
  .row:not(.row--fv){width:var(--col);margin-left:auto;margin-right:auto}
  .row--fv .fv-logo{right:calc(100vw * 50 / 768)}
  .row--fv .fv-logo--mlb{width:calc(100vw * 220 / 768)}
  .row--fv .fv-logo--heather{width:calc(100vw * 300 / 768)}
}

/* 極端に縦長のスマホ（Galaxy Z Fold 折りたたみ時など）：FVは画像全体を表示（高さを画像比率に合わせる） */
@media (max-width:699px) and (max-aspect-ratio:21/50){
  .row.row--fv{height:calc(var(--col) * 1.5)}
}