/* ============================================================
   広島っ子 — 上品なスクロールモーション（麻辣王豆腐 top-anim.css の技術を踏襲・黒×金トーンに調整）
   ・スクロールリビール（下からフェードアップ） ・ヒーローの微ズーム ・SCROLLインジケーター（中央）
   ・カード/ボタンのホバーリッチ化
   派手な演出（背景巨大英字マーキー・提灯など）は麻辣特有の意匠のため移植しない＝広島っ子には合わせない。
   prefers-reduced-motion: reduce では全アニメーションを停止する。
   ============================================================ */

/* ---- スクロールリビール：JS(top-anim.js)が対象要素へ .anim-reveal を付与し、
        画面内に入ったら .in を付与してフェードアップさせる ---- */
.anim-reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,.75,.2,1),transform .6s cubic-bezier(.16,.75,.2,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.anim-reveal.in{opacity:1;transform:none}

/* ---- 見出し用の小さな飾り（英字ラベル／金の短い罫線）：新設セクションで使用 ---- */
.lead-en{
  display:block;font-family:'Noto Sans JP',sans-serif;font-style:italic;font-weight:600;
  font-size:13px;letter-spacing:.22em;color:var(--ck-gold);margin-bottom:8px;
}
.divider{width:46px;height:2px;background:var(--ck-gold);margin:16px auto 0}
.divider.left{margin-left:0}

/* ---- ヒーロー：ごくゆるやかな微ズーム（ケンバーンズ風・控えめ） ---- */
@media (prefers-reduced-motion: no-preference){
  .hero-slide{
    animation-name:heroFade,heroKen;
    animation-duration:16s,16s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
  }
  .hero-slide:nth-child(1){animation-delay:0s,0s}
  .hero-slide:nth-child(2){animation-delay:4s,4s}
  .hero-slide:nth-child(3){animation-delay:8s,8s}
  .hero-slide:nth-child(4){animation-delay:12s,12s}
  @keyframes heroKen{0%{transform:scale(1.02)}50%{transform:scale(1.08)}100%{transform:scale(1.02)}}
}

/* ---- SCROLL インジケーター：ヒーロー下部・中央固定 ---- */
.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'Noto Sans JP',sans-serif;font-size:11px;letter-spacing:.32em;color:rgba(255,255,255,.75);
  pointer-events:none;
}
.scrollcue .ln{width:1px;height:26px;background:linear-gradient(180deg,rgba(235,170,33,.9),rgba(235,170,33,0))}
@media (prefers-reduced-motion: no-preference){
  .scrollcue{animation:cueBob 2.4s ease-in-out infinite alternate}
}
@keyframes cueBob{from{transform:translate(-50%,-6px)}to{transform:translate(-50%,6px)}}
@media (max-width:1023px){
  .scrollcue{bottom:16px;font-size:10px}
  .scrollcue .ln{height:20px}
}

/* ---- カード/ボタン類のホバーをわずかにリッチに（既存の見た目は壊さない範囲） ---- */
.gallery-preview .thumbs li,.col-cards li a,.faq-item,.news-list li{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s,background .3s;
}
.col-cards li a:hover{transform:translateY(-5px)}
.gallery-preview .thumbs li:hover{transform:translateY(-4px) scale(1.03)}
.btn,.rc-actions .tel-big,.rc-actions .rc-btn{transition:transform .25s ease,background .3s ease,opacity .25s ease}
.btn:hover,.rc-actions .tel-big:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .anim-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-slide{animation-name:heroFade!important}
  .scrollcue{animation:none!important}
  .gallery-preview .thumbs li,.col-cards li a,.faq-item,.news-list li,.btn,.rc-actions .tel-big{transition:none!important}
}

/* ============================================================
   ヒーロー：1枚目を即表示（読み込み中の黒余白/黒フラッシュ防止）2026-07-25
   index.htmlの基本ルール(:first-child{opacity:1;animation-name:heroFadeFirst})に対し、
   本ファイル（prefers-reduced-motion:no-preference時のKenBurns付きanimation-name）側にも同様の差し替えを適用。
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .hero-slide:first-child{animation-name:heroFadeFirst,heroKen}
}

/* ============================================================
   コラムカード：抜粋文の長短で縦幅が揃わない問題を解消（TOP・お知らせ/コラムHUB 共通）2026-07-25
   ============================================================ */
.col-cards{align-items:stretch}
.col-cards li{display:flex}
.col-cards li a{display:flex!important;flex-direction:column;width:100%}
.col-cards .cc-body{display:flex;flex-direction:column;flex:1}
.col-cards .ct{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.col-cards .cc-excerpt{flex:1 0 auto}
.col-cards .cc-more{margin-top:auto;padding-top:6px}
.col-cards figure{flex:0 0 auto}

/* ============================================================
   アクセスページ：マップ直下に木目がわずかに見える問題を解消 2026-07-25
   （iframeがinline要素として扱われベースライン分の隙間ができていたためdisplay:blockを強制）
   ============================================================ */
.access-body .map iframe{display:block}

/* ============================================================
   背景装飾：ヘラ（お好み焼きのコテ）の浮遊 ＋ 英字ゴーストマーキー 2026-07-25
   社長指示：お好み焼きの温かみに合う上品な演出。TOP・下層ページ共通。
   JS(top-anim.js)が対象セクションへ注入する。派手さは避け低opacityで背景に留める。
   prefers-reduced-motion:reduce では動きを止める（要素自体は静止表示のまま残す）。
   ============================================================ */
.gallery-preview,.news,.col-preview,.reviews,.title-band,footer{position:relative;overflow:hidden}
.gallery-preview .inner,.news .inner,.col-preview .inner,.reviews .inner,
footer .inner,footer .copy,.title-band .en,.title-band h1{position:relative;z-index:2}

.deco-spatula{position:absolute;z-index:1;opacity:.14;pointer-events:none;will-change:transform}
.deco-spatula.on-light{opacity:.1}
.deco-spatula svg{display:block;width:100%;height:100%;fill:var(--ck-gold)}
.deco-spatula.on-light svg{fill:var(--ck-maroon)}
@media (prefers-reduced-motion: no-preference){
  .deco-spatula{animation:decoFloat var(--fdur,9s) ease-in-out infinite;animation-delay:var(--fdelay,0s)}
}
@keyframes decoFloat{
  0%{transform:translateY(0) rotate(var(--frot,-8deg))}
  50%{transform:translateY(-16px) rotate(calc(var(--frot,-8deg) * -1))}
  100%{transform:translateY(0) rotate(var(--frot,-8deg))}
}

.deco-ghost{
  position:absolute;z-index:1;top:14%;white-space:nowrap;pointer-events:none;
  font-family:'Noto Sans JP',sans-serif;font-weight:900;letter-spacing:.08em;
  font-size:clamp(48px,11vw,150px);color:rgba(235,170,33,.055);
}
@media (prefers-reduced-motion: no-preference){
  .deco-ghost.gd-right{animation:ghostR 30s linear infinite}
  .deco-ghost.gd-left{animation:ghostL 34s linear infinite}
}
@keyframes ghostR{from{transform:translateX(-105%)}to{transform:translateX(105vw)}}
@keyframes ghostL{from{transform:translateX(105vw)}to{transform:translateX(-105%)}}

@media (prefers-reduced-motion: reduce){
  .deco-spatula,.deco-ghost{animation:none!important;transform:none!important}
}

@media (max-width:1023px){
  .deco-ghost{font-size:56px;top:8%}
  .deco-spatula{transform:scale(.82)}
}