/* ============================================
   components.css
   ボタン・カード・ナビゲーション等のパーツスタイル
   ============================================ */

/* ---------- 基本タイポグラフィ ---------- */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-base);
}

a {
  transition: color var(--transition-base);
}

/* キーボード操作時の視認性を必ず確保する。
   マウスユーザーには出さず、キーボード操作時のみ
   輪郭線を表示する :focus-visible を使用する。 */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* ---------- ヘッダー ---------- */
.site-header {
  background-color: var(--color-base);
  border-bottom: 1px solid var(--color-border);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.site-header__logo img {
  transition: opacity var(--transition-base);
}
.site-header__logo:hover img {
  opacity: 0.7;
}

.site-nav__list a {
  position: relative;
  padding-block: var(--space-1);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
}
/* リンクホバー時、下線が左から右へ伸びる演出。
   height:1pxの要素を用意し、普段はscaleX(0)で幅0に潰しておく。 */
.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.site-nav__list a:hover::after {
  transform: scaleX(1);
}

.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
  background-color: var(--color-main-dark);
}

.site-header__badge {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent-green);
  border-radius: var(--radius-full);
  color: var(--color-accent-green);
  font-size: var(--fs-xs);
}

/* ---------- ヘッダー：透明状態（ヒーロー上） ----------
   背景と下線を透明にし、暗いヒーローの上でも読めるよう
   ナビ文字・ホバー下線・ハンバーガーの線・開催バッジを
   明るい色（--color-text-inverse）に切り替える。
   ロゴの出し分けはlayout.css側が担当する。 */
.site-header.is-transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}
.site-header.is-transparent .site-nav__list a {
  color: var(--color-text-inverse);
}
.site-header.is-transparent .site-nav__list a::after {
  background-color: var(--color-text-inverse);
}
.site-header.is-transparent .site-nav__toggle-bar,
.site-header.is-transparent .site-nav__toggle-bar::before,
.site-header.is-transparent .site-nav__toggle-bar::after {
  background-color: var(--color-text-inverse);
}
.site-header.is-transparent .site-header__badge {
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

/* ---------- ヒーロー ---------- */
.hero__overlay {
  background: linear-gradient(
    180deg,
    var(--color-overlay) 0%,
    rgba(31, 24, 20, 0.75) 100%
  );
}

.hero__eyebrow {
  font-family: var(--font-accent-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-inverse);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--color-text-inverse);
  opacity: 0.9;
}


/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.btn--primary {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-accent-green);
}
.btn--primary:hover {
  background-color: var(--color-text-inverse);
  color: var(--color-accent-green);
}

/* ---------- お知らせ ---------- */
.news__card,
.contact-links__card,
.news-archive__link {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(61, 36, 32, 0.08);
}
.news__item {
  border-bottom: 1px solid var(--color-border);
}
.news__item:last-child {
  border-bottom: none;
}
.news__date {
  font-family: var(--font-accent-en);
  font-size: var(--fs-xs);
  color: var(--color-accent-blue);
  white-space: nowrap;
}
.news__text {
  font-size: var(--fs-sm);
}
/* お知らせのタイトル（記事へのリンク）。ホバー時の演出は
   フッターナビと同じ「薄くする」に統一している（下記グループ）。 */
.news__link {
  transition: opacity var(--transition-base);
}

/* ---------- セクション見出し ---------- */
.section-title,
.menu-category__title,
.system-category__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-main-dark);
}
.section-title__en,
.menu-category__title-en,
.system-category__title-en {
  font-family: var(--font-accent-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent-green);
}

.digest__lead {
  max-width: 640px;
  font-size: var(--fs-base);
  line-height: 1.9;
}

/* セクションを1つおきに背景色を切り替え、縦スクロール時の
   リズムを作る（濃淡だけで区切り線を使わずセクションを分ける） */
.digest:nth-of-type(even),
.menu-category:nth-of-type(even),
.store-gallery:nth-of-type(even),
.cast-gallery:nth-of-type(even),
.system-category:nth-of-type(even) {
  background-color: var(--color-surface-alt);
}

/* ---------- 背景写真オーバーレイ ----------
   配置（position/z-index）はlayout.css側で指定済み。
   ここでは「何の画像を」「どれくらいの薄さで」見せるかを指定する。
   opacityを下げることで、上に重なる文字の可読性を保ったまま
   雰囲気だけを演出する。 */
.concept-digest::before,
.system-digest::before {
  opacity: 0.4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.concept-digest::before {
  background-image: url('../assets/images/bg/bg-concept.jpg');
}
.system-digest::before {
  background-image: url('../assets/images/bg/bg-system.jpg');
}

/* ---------- スクロール出現演出 ----------
   初期状態（非表示）と、JS側がis-visibleクラスを付与した後の
   状態（表示）の2状態だけをCSSで定義する。
   実際に「いつクラスを付けるか」の判定はmain.js側で行う。 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- リンク（もっと見る） ---------- */
.link-more {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-accent-green);
}
.link-more::after {
  content: '→';
  display: inline-block;
  margin-left: var(--space-1);
  transition: transform var(--transition-base);
}
.link-more:hover::after {
  transform: translateX(4px);
}

 /* ---------- ページ本文：中央配置の説明ブロック ---------- */
 .page-intro__lead {
   font-size: var(--fs-base);
   line-height: 1.9;
   color: var(--color-text);
 }

 /* ---------- 参加資格・注意事項 ----------
    各ブロックの区切りは上罫線（border-top）で表現する。
    余白（padding-top）はlayout.css側で既に指定済みのため、
    ここでは色・線種のみを担当する。 */
 .requirements__block {
   border-top: 1px solid var(--color-accent-green);
 }
 .requirements__block-title,
 .contact-links__lead {
   font-family: var(--font-heading);
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--color-main-dark);
 }
 .requirements__block-text,
 .contact-links__note {
   font-size: var(--fs-sm);
   line-height: 1.9;
 }

 /* ---------- アコーディオン：色・装飾・開閉の印 ----------
    配置・サイズはlayout.css側が担当。
    ブラウザ標準の三角マーカーを消し、自作の印（::after）を
    閉じている時は下向き、開いている時は上向きに回転させる。 */
 .accordion__summary {
   list-style: none;
   cursor: pointer;
   font-size: var(--fs-sm);
   color: var(--color-accent-green);
 }
 .accordion__summary::-webkit-details-marker {
   display: none;
 }
 .accordion__summary::after {
   border-right: 1px solid currentColor;
   border-bottom: 1px solid currentColor;
   transform: rotate(45deg);
   transition: transform var(--transition-base);
 }
 .accordion[open] .accordion__summary::after {
   transform: rotate(225deg);
 }
 .accordion__name {
   font-size: var(--fs-sm);
   color: var(--color-main-dark);
 }
 /* URLは長くなりやすいため、画面幅が狭い時にどこでも折り返せるようにする */
 .accordion__link {
   font-size: var(--fs-sm);
   color: var(--color-accent-green);
   text-decoration: underline;
   overflow-wrap: anywhere;
   transition: opacity var(--transition-base);
 }
 .accordion__link:hover {
   opacity: 0.7;
 }

 /* ---------- フィルタートグル：ボタンの色・装飾 ----------
    配置（display/gap）はlayout.css側の.filter-toggleが担当。
    メニュー（フード）・キャスト紹介の両方で共通利用する。 */
 .filter-toggle__btn {
   padding: var(--space-2) var(--space-4);
   border: 1px solid var(--color-accent-green);
   border-radius: var(--radius-full);
   font-size: var(--fs-sm);
   color: var(--color-accent-green);
   transition:
     background-color var(--transition-base),
     color var(--transition-base);
 }
 .filter-toggle__btn.is-active {
   background-color: var(--color-accent-green);
   color: var(--color-text-inverse);
 }

/* ---------- カテゴリー：矢印付きカルーセルの装飾 ----------
   メニューページと独自システムページで共通。
   配置・サイズはlayout.css側のグループセレクタが担当し、
   ここでは角丸・スライド移動のアニメーション・矢印の装飾のみを扱う。 */
.menu-category__carousel,
.system-category__carousel {
  border-radius: var(--radius-md);
}

.menu-category__carousel-track,
.system-category__carousel-track {
  transition: transform var(--transition-base);
}

.menu-category__carousel-arrow,
.system-category__carousel-arrow {
  color: var(--color-text-inverse);
  font-size: var(--fs-lg);
  line-height: 1;
  text-shadow: 0 1px 4px rgba(31, 24, 20, 0.6);
  opacity: 0.85;
  transition: opacity var(--transition-base);
}
.menu-category__carousel-arrow:hover,
.system-category__carousel-arrow:hover {
  opacity: 1;
}


/* ---------- 料理紹介 ---------- */
/* 横方向へ等速で流れ続けるアニメーション。
   .menu-marquee__group を2セット並べているため、
   ちょうど半分（-50%）動いたところで1セット目と2セット目の
   境目が来て、見た目には途切れなくループしているように見える。 */
@keyframes menuMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.menu-marquee__track {
  animation: menuMarquee 60s linear infinite;
}

.menu-digest__item img {
  width: 156px;
  height: 156px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base);
}
.menu-digest__item:hover img {
  transform: scale(1.05);
}
.menu-digest__name {
  font-family: var(--font-accent-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: var(--color-main-dark);
}

/* ---------- キャスト紹介 ---------- */
.cast-digest__item img,
.cast-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(61, 36, 32, 0.12);
}
.cast-digest__name,
.cast-gallery__name {
  font-size: var(--fs-md);
  color: var(--color-main-dark);
}

/* ---------- 店舗紹介 ---------- */
.store-digest__image {
  border-radius: var(--radius-md);
}

/* ---------- フッター ---------- */
.site-footer {
  background-color: var(--color-main-dark);
  color: var(--color-text-inverse);
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-inverse);
  color: var(--color-main-dark);
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.social-icon:hover {
  background-color: var(--color-accent-green);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
}

 /* ---------- フッターナビゲーション ----------
    配置はlayout.css側の.site-footer__nav-listが担当。
    ここでは文字サイズ・ホバー時の演出のみを指定する。
    色は.site-footer側で既に指定済みのcolor-text-inverseを
    aタグのcolor: inherit（reset.css）経由で引き継ぐ。 */
 .site-footer__nav-list a {
   font-size: var(--fs-sm);
   letter-spacing: 0.05em;
   transition: opacity var(--transition-base);
 }
 .site-footer__nav-list a:hover,
 .news__link:hover {
   opacity: 0.7;
 }

.site-footer__copyright {
  font-size: var(--fs-xs);
  opacity: 0.6;
}

 /* ---------- 肉球トレイル：色・フェードアニメーション ----------
    配置（position/size）はlayout.css側の.paw-printが担当。
    ここでは色と、時間経過とともに消えていく演出のみを扱う。 */
 .paw-print__icon {
   width: 70%;
   height: 70%;
   color: var(--color-main-dark);
   animation: pawFade 0.7s ease-out forwards;
 }
 @keyframes pawFade {
   from {
     opacity: 0.3;
     transform: scale(1);
   }
   to {
     opacity: 0;
     transform: scale(0.8);
   }
 }

 /* ---------- ライトボックス（画像拡大表示） ----------
    配置（position/z-index）はlayout.css側で指定済み。
    ここでは色・装飾のみを担当する。 */
 .lightbox,
 .cast-modal {
   opacity: 0;
   transition: opacity var(--transition-base);
 }
 .lightbox.is-open,
 .cast-modal.is-open {
   opacity: 1;
 }

 .lightbox__backdrop,
 .cast-modal__backdrop {
   background-color: var(--color-overlay-strong);
 }
 .lightbox__image {
   border-radius: var(--radius-md);
   transform: scale(0.96);
   transition: transform var(--transition-base);
  }
 .lightbox.is-open .lightbox__image {
   transform: scale(1);
 }
 .lightbox__close,
 .cast-modal__close {
   color: var(--color-text-inverse);
   font-size: 2rem;
   line-height: 1;
   transition: opacity var(--transition-base);
 }
 .lightbox__close:hover,
 .cast-modal__close:hover {
   opacity: 0.7;
 }

 /* 拡大表示トリガー共通のホバー演出。
    .lightbox-triggerで包んだ画像すべてに適用される
    （既存の.menu-digest__item:hover img と同じ「軽く拡大する」
    演出に統一している）。 */
 .lightbox-trigger img {
   transition: transform var(--transition-base);
 }
 .lightbox-trigger:hover img {
   transform: scale(1.02);
 }

/* ---------- モーション低減設定への配慮 ----------
   OS側で「視差効果を減らす」等を設定しているユーザーには、
   装飾アニメーションを止める。 */
@media (prefers-reduced-motion: reduce) {
  /* 全体を0.01msにする指定だけでは、無限ループのアニメーションは
     「一瞬で1周し続ける」状態になり、むしろ視覚的な負担が増してしまう。
     マーキーだけは個別にanimation: noneで完全停止させる。 */
  .menu-marquee__track {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}