/* ============================================================
   page-top.css — トップページ専用
   下層ページでは読み込まないこと。
   ここにあるものを下層で使いたくなったら layout.css へ移す。
   ============================================================ */

/* --- メインビジュアル ------------------------------------ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
/* z-index:0 で重なりを閉じる。これが無いと中の img（z-index:2）がコピーや脚注の上に来て隠す */
.hero__img{position:absolute;inset:0;z-index:0;background:#0C0A08}
/* スライドショー（3枚）。切り替えの手順は index.html 末尾の <script> にある。
   表示中の1枚（.is-on）が上に重なって現れ、前の1枚（.was-on）はその下で寄り続ける。
   下に残すのは、動きの途中で transform が戻る瞬間を見せないため。
   kv の長さは「見せる時間 3.2s ＋ フェード 0.8s」より長くしておくこと。短いと寄りが途中で止まって見える */
.hero__img img{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--ez);
}
.hero__img img.is-on{opacity:1;z-index:2;animation:kv 5s ease-out forwards}
.hero__img img.was-on{opacity:1;z-index:1;animation:kv 5s ease-out forwards}
@keyframes kv{to{transform:scale(1)}}
.hero__img::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(105deg,rgba(12,10,8,.86) 0%,rgba(12,10,8,.42) 45%,rgba(12,10,8,.74) 100%);
}

/* 縦書きキャッチコピー。
   top:50% + translateY(-50%) にすると高さが 50vh に制限され折り返すため、
   必ず top:0/bottom:0 + flex で垂直中央に置くこと。 */
.hero__copy{
  position:absolute;top:0;bottom:0;right:var(--pad);
  display:flex;align-items:center;
  padding:128px 0 88px;pointer-events:none;   /* 上はヘッダー（104px）を避ける */
}
.vt{
  writing-mode:vertical-rl;
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(30px,min(5.2vw,8.2vh),60px);
  letter-spacing:.16em;line-height:1.78;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  max-height:100%;
}
.vt b{
  display:block;font-weight:inherit;white-space:nowrap;
  opacity:0;animation:rise 1.3s var(--ez) forwards;
}
.vt b:nth-child(2){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

.hero__foot{
  position:absolute;left:var(--pad);bottom:clamp(48px,9vw,88px);
  opacity:0;animation:rise 1.3s .6s var(--ez) forwards;
}
.hero__foot .jp{font-family:var(--mincho);font-size:clamp(15px,2vw,19px);letter-spacing:.2em}
.hero__foot .sub{font-size:11px;letter-spacing:.22em;color:var(--ash);margin-top:16px}

.scroll-cue{position:absolute;left:50%;bottom:0;width:1px;height:74px;background:rgba(240,235,225,.18)}
.scroll-cue::before{content:"";position:absolute;inset:0;background:var(--kohaku);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
/* 1100px以下は下部に固定バー（.bookbar）が出る。
   バーは KV に重なるため、その高さぶん文字を持ち上げないと
   「札幌・すすきの ／ 昭和四十七年創業」がバーの下に潜り込む。
   バー自身がホームインジケータぶんの下駄を履いているので、
   env() も同じだけ足すこと（layout.css の .bookbar と対になっている）。 */
@media(max-width:1100px){
  .hero__foot{bottom:calc(clamp(48px,9vw,88px) + var(--bar-h) + env(safe-area-inset-bottom))}
}
@media(max-width:720px){
  .hero__copy{position:absolute;top:auto;bottom:232px;right:auto;left:var(--pad);display:block;padding:0}
  .vt{writing-mode:horizontal-tb;font-size:clamp(28px,7.6vw,42px);line-height:1.5;max-height:none}
  .vt b{white-space:normal}
}

/* --- お知らせ -------------------------------------------- */
.recommend{background:var(--sumi-2);padding:var(--sec-y-sm) 0}
.recommend__hd{display:flex;align-items:baseline;gap:24px;margin-bottom:32px}
.recommend__hd h2{font-family:var(--mincho);font-size:20px;letter-spacing:.14em;font-weight:600}
.recommend__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.recommend-card{
  display:flex;gap:24px;align-items:center;background:var(--sumi-3);
  transition:transform .4s var(--ez);-webkit-tap-highlight-color:transparent;
}
.recommend-card:hover{transform:translateY(-4px)}
/* 押した反応。作法は layout.css の .course / .scene と揃える */
.recommend-card:active{transform:scale(.985);transition:none}
.recommend-card .ph{width:38%;aspect-ratio:4/3;flex:none}
/* 上下のパディングは必須。これが無いと、文章が画像より高くなったとき
   （スマホの1カラム表示で起きる）タグがカードの上端に貼り付く。
   左は .recommend-card の gap:24px が担うので 0。 */
.recommend-card__tx{padding:24px 24px 24px 0}
/* 形は layout.css の .tag と揃える（下の余白だけ狭い） */
.recommend-card__tag{
  display:inline-block;vertical-align:top;
  font-size:9px;line-height:24px;letter-spacing:.2em;color:var(--kohaku);
  border:1px solid rgba(185,134,60,.5);padding:0 8px;margin-bottom:8px;
}
.recommend-card h3{font-family:var(--mincho);font-size:clamp(14px,1.5vw,18px);letter-spacing:.08em;font-weight:600;line-height:1.7}
.recommend-card p{font-size:11px;color:var(--ash);margin-top:8px;letter-spacing:.06em}
@media(max-width:720px){.recommend__grid{grid-template-columns:1fr}}

/* --- メッセージ ------------------------------------------ */
.msg{position:relative}
.msg__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.msg__copy h2{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(24px,3.2vw,38px);letter-spacing:.12em;line-height:1.9;margin-bottom:32px;
}
.msg__figs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.msg__figs .ph{aspect-ratio:3/4}
.msg__figs .ph:first-child{margin-top:56px}
.since{
  font-family:var(--mincho);font-size:clamp(52px,9vw,116px);
  letter-spacing:.02em;line-height:1;color:rgba(22,18,15,.07);
  position:absolute;top:clamp(40px,6vw,72px);right:var(--pad);pointer-events:none;
}
@media(max-width:860px){.msg__in{grid-template-columns:1fr}.msg__figs .ph:first-child{margin-top:0}}

/* --- えぞ但馬牛 ------------------------------------------ */
.beef{position:relative;background:var(--sumi)}
.beef__hero{position:relative;height:clamp(300px,44vw,520px);background:#0C0A08}
.beef__hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(22,18,15,.15),rgba(22,18,15,.96));
}
.beef__body{margin-top:clamp(-88px,-7vw,-64px);position:relative;z-index:2}
.beef__lede{max-width:32em;margin-bottom:clamp(48px,7vw,80px)}

/* .spec / .pillar / .course / .scene / .info は下層ページでも使うため
   layout.css へ移動した（2026-08 コース・店舗案内ページ追加時） */

/* --- コース見出し ---------------------------------------- */
.course__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,5vw,64px);flex-wrap:wrap}

/* --- ご利用シーン見出し ---------------------------------- */
.scene__hd{margin-bottom:clamp(40px,5vw,64px);max-width:34em}

/* --- Instagram（公式埋め込み） ---------------------------
   embed.js は blockquote.instagram-media にインラインstyleを直接書き込む
   （border-radius:3px / box-shadow / margin:1px / min-width:326px など）。
   インラインstyleに勝つ必要があるものだけ !important を付けている。
   !important を外すと角丸と影が戻り、デザインの決めごとから外れる。 */
.ig-embed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin-top:40px}
.ig-embed .instagram-media{
  border-radius:0 !important;      /* 角丸を使わない */
  box-shadow:none !important;      /* 影を使わない */
  border:0 !important;
  margin:0 !important;
  max-width:100% !important;
  min-width:0 !important;          /* 既定の326pxだと360px幅の端末で横に溢れる */
  width:100% !important;
}
/* 埋め込みの高さは「いいね」行やキャプションの有無で投稿ごとに変わり、
   そのままだと下端が数十pxずつずれて「揃っていない」印象になる。
   カード側で高さを決めて切り落とし、3枚の天地を揃える。
   padding-top の % は自身の幅に対して効くので、列幅が変わっても比率が保たれる。
     125%  … 写真部分（4:5の縦位置投稿を前提）
     57px  … 上のアカウント名バーの高さ（固定）
   ※正方形（1:1）の投稿を入れる場合は 125% → 100% に変える。
     切り落とした先にあるのは Instagram 側のいいね／コメント欄で、
     写真をクリックすれば投稿に飛べるため導線は失われない */
.ig-card{position:relative;height:0;padding-top:calc(125% + 57px);overflow:hidden;border:1px solid var(--line-l)}
.ig-card > .instagram-media{position:absolute;top:0;left:0}
/* embed.js 読み込み前／失敗時の見え方。読み込み後はインラインstyleが上書きする */
.ig-card > .instagram-media{background:var(--washi-2);padding:32px}
.ig-card a{font-size:12px;letter-spacing:.06em;color:var(--ash-lt)}
.ig-more{margin-top:clamp(32px,3vw,40px)}
@media(max-width:1199px){.ig-embed{grid-template-columns:1fr 1fr}}
@media(max-width:779px){.ig-embed{grid-template-columns:1fr;max-width:540px;justify-content:start}}

/* --- 姉妹店 ---------------------------------------------- */
.group{background:var(--sumi-2);padding:clamp(64px,8vw,112px) 0}
.group__list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:40px}
.group__item .ph{aspect-ratio:16/10;margin-bottom:16px}
.group__item h3{font-family:var(--mincho);font-size:15px;letter-spacing:.1em;font-weight:600}
.group__item p{font-size:11px;color:var(--ash);margin-top:8px}
/* 2列に折れたときの縦の間隔は、写真と店名の間隔（16px）より広く取る。
   同じ16pxのままだと、店名がどの写真のものか分からなくなる。
   横の16pxはそのままでよい（列がそろっているので、上下の関係を読み違えない）。 */
@media(max-width:820px){.group__list{grid-template-columns:1fr 1fr;gap:40px 16px}}

/* --- スマホの文字サイズ ----------------------------------
   考え方は base.css の同名ブロックを参照。
   KV の縦書きコピー（.vt）は上の 720px のブロックで別に組んでいるため触らない。 */
@media(max-width:700px){
  .hero__foot .sub{font-size:12px}
  .recommend-card__tag{font-size:11px}
  .recommend-card h3{font-size:16px}
  .recommend-card p{font-size:13px}
  .ig-card a{font-size:13px}
  .group__item h3{font-size:16px}
  .group__item p{font-size:13px}
}

/* --- モーション配慮（トップ専用） ------------------------
   .vt b と .hero__foot は opacity:0 から animation で現れる作りになっている。
   base.css の @media で animation を止めると、現れる処理ごと止まるため、
   キャッチコピーと「札幌・すすきの ／ 昭和四十七年創業」が
   最初から最後まで見えないままになる。ここで見えている状態に戻す。

   ※ base.css より後ろに読み込まれるこのファイルで指定すること。
     base.css 側に書いても、上の .vt b{opacity:0} に負ける。 */
@media(prefers-reduced-motion:reduce){
  .vt b,.hero__foot{opacity:1}
  /* KV のゆっくりした寄り。止めると scale(1.06) のまま拡大表示で固まるので、
     等倍に戻して静止画として見せる。スライドの切り替え自体は opacity だけなので、
     base.css の方針どおりフェードは残る */
  .hero__img img{transform:none}
}