/* ============================================================
   あまた音楽堂 トップページ (amata_top.css)
   index.twig の {% block stylesheet %} から読み込み。
   デザイントークンは amata_common.css の :root を参照する。
   ------------------------------------------------------------
   このファイル内の !important は 0 件です。
   slick標準CSSの上書きも「後読み＋詳細度」で解決しています。
   ============================================================ */

/* ------------------------------------------------------------
   1. パララックス背景
   本文を邪魔しない極薄グラデーション＋ブランド色のにじみ(blob)。
   blobは amata_top.js がスクロール量に応じて別速度で動かす。
   ------------------------------------------------------------ */
.amata-bg {
  position: fixed;
  inset: 0;
  z-index: -1;              /* body.front_page{background:transparent}
                               とセットで機能する（common.css参照） */
  pointer-events: none;
  overflow: hidden;
  /* 上半分はほぼ白を保ち、画面下部に向かってだけ淡く色づける。
     「一面が青い」印象を避けるため、色の総量を意図的に絞る */
  background: linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 38%,
      var(--amata-bg-tint-1) 68%,
      var(--amata-bg-tint-2) 100%);
}
.amata-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);      /* 控えめなブラーは維持 */
  will-change: transform;
}
.amata-bg__blob--1 {
  top: -12%;
  right: -8%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle,
      rgba(153, 209, 186, 0.20) 0%, rgba(153, 209, 186, 0) 70%);
}
.amata-bg__blob--2 {
  top: 48%;
  left: -14%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle,
      rgba(26, 156, 166, 0.10) 0%, rgba(26, 156, 166, 0) 70%);
}
/* キーカラー2色に加える親和色:
   基本配色画像の右上コーナーに現れる黄緑寄りのトーンを
   ごく淡くして採用（ブランドのグラデーション終端と地続きの色） */
.amata-bg__blob--3 {
  bottom: -18%;
  right: 2%;
  width: 36vw;
  height: 36vw;
  background: radial-gradient(circle,
      rgba(200, 224, 168, 0.22) 0%, rgba(200, 224, 168, 0) 70%);
}
/* ------------------------------------------------------------
   2. スクロール連動リビール（Framerライク）
   opacity + translate + わずかなscaleを、行き足の長い
   ease-out（--amata-ease-out）で。JSが .is-inview を付与。
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   2. スクロール連動リビール（Framerライク）
   ■ 設計（重要）: 「最初から隠す」のではなく「最初は全部見えている」
   ・CSSの初期状態では何も隠さない
     → JSの実行タイミングに関係なく、ファーストビューの要素が
       消える瞬間が原理的に発生しない
   ・JSがファーストビュー外と判定した要素にだけ .is-pre を付与して
     隠し、スクロールで見えたら .is-inview に差し替えて出現させる
   ・JS無効環境・reduced-motion環境では全要素がそのまま見える
   ------------------------------------------------------------ */
.amata-reveal.is-pre {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: none;           /* 隠す瞬間はアニメーションさせない */
  will-change: opacity, transform;
}
.amata-reveal.is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--amata-dur) var(--amata-ease-out),
    transform var(--amata-dur) var(--amata-ease-out);
  transition-delay: var(--reveal-delay, 0s); /* JSがstagger値を注入 */
}

/* ------------------------------------------------------------
   3. レイアウト共通
   ------------------------------------------------------------ */
.amata-container {
  max-width: var(--amata-container);
  margin-inline: auto;
  padding-inline: 20px;
}
.amata-section { padding: 48px 0 88px; }

.amata-section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.amata-section-head__en {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.amata-section-head__jp {
  display: block;
  margin-top: 6px;
  color: var(--amata-ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* CTAボタン（ピル型・グラデーション）
   -------------------------------------------------------------
   .ec-blockBtn--top / .ec-inlineBtn--top:
   コンテンツ下部ブロック（Concept等）は管理画面のブロック管理で
   編集されるHTMLのため、旧クラス名のまま残っている。ブロック側を
   一斉に書き換えるより事故が少ないので、旧クラスを .amata-btn の
   エイリアスとしてここで受ける（このCSSはトップページのみ読込）。
   ※ EC-CUBE標準の .ec-blockBtn--top (display:block; width:100%)
     より後に読み込まれるため、同名プロパティは上書きできる */
.amata-btn,
.ec-blockBtn--top,
.ec-inlineBtn--top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;              /* 標準の width:100% を打ち消す */
  min-height: 60px;
  height: auto;             /* 標準の固定height を打ち消す */
  padding: 0 60px;
  border: none;
  border-radius: var(--amata-radius-pill);
  background: var(--amata-grad);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: var(--amata-shadow-1);
  transition:
    transform var(--amata-dur-fast) var(--amata-ease-out),
    box-shadow var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-btn:hover,
.amata-btn:focus-visible,
.ec-blockBtn--top:hover,
.ec-blockBtn--top:focus-visible,
.ec-inlineBtn--top:hover,
.ec-inlineBtn--top:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--amata-shadow-2);
  color: #fff;
  text-decoration: none;
}
.amata-btn:active,
.ec-blockBtn--top:active,
.ec-inlineBtn--top:active { transform: translateY(-1px) scale(0.98); }

.amata-btn-area {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* ------------------------------------------------------------
   4. メインビジュアル（カルーセル）
   ------------------------------------------------------------ */
.amata-mv-wrapper {
  position: relative;
  width: 100%;              /* 100vwハック廃止。レイアウト側の幅制限を
                               common.cssで解除済みなので不要 */
  padding: 40px 0 60px;
  overflow: hidden;         /* centerModeのはみ出しをここで制御 */
  background: #fff;         /* MVエリアは白で確保し、下に続くセクションの
                               淡いグラデーションとの間に境目をつくる
                               （当初デザインの構造を踏襲） */
}

/* slick初期化前のCLS対策:
   初期化前も1枚目と同じ高さを確保し、レイアウトシフトを防ぐ */
.amata-mv {
  min-height: min(80vw, 560px);
}
/* 初期化後はslick自身が高さを確定させるため、
   CLS対策用のmin-heightを解除する */
.amata-mv.slick-initialized {
  min-height: 0;
}
.amata-mv:not(.slick-initialized) .amata-mv__item { display: none; }
.amata-mv:not(.slick-initialized) .amata-mv__item:first-child {
  display: block;
  max-width: min(80vw, 560px);
  margin-inline: auto;
}

.amata-mv__item {
  padding: 0 10px;
  outline: none;
}
.amata-mv__item a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--amata-radius);
  box-shadow: var(--amata-shadow-1);
  transition: box-shadow var(--amata-dur-fast) ease;
}
.amata-mv__item a:hover { box-shadow: var(--amata-shadow-2); }
.amata-mv__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 中央強調（現行の意匠を踏襲しつつイージングをブランド共通に） */
.amata-mv .slick-slide {
  opacity: 0.4;
  transform: scale(0.85);
  transition:
    opacity var(--amata-dur) var(--amata-ease-out),
    transform var(--amata-dur) var(--amata-ease-out);
}
.amata-mv .slick-center {
  opacity: 1;
  transform: scale(1.08);
  z-index: 2;
}
/* 左右の余白(=隣接スライドの見せ方)はJS側の centerPadding で指定。
   slickがインラインstyleで書き込むため、CSSからは制御しない */
.amata-mv .slick-list {
  overflow: visible;
}

/* カルーセルUI（ドット＋再生停止）
   DOM上はボタン→ドットの順（slickのappendDotsが末尾に追加するため）。
   当初デザイン（ドットが左・ボタンが右）に合わせ、
   表示順はflexのorderで明示的に入れ替える。 */
.amata-mv-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}
.amata-mv-ui .slick-dots { order: 1; }
.amata-mv-ui .amata-play-btn { order: 2; }

.amata-mv-ui .slick-dots {
  position: static;
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-mv-ui .slick-dots li {
  width: 18px;
  height: 18px;
  margin: 0 8px;
}
.amata-mv-ui .slick-dots li button {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0; /* slick既定の数字テキストを消す */
}
.amata-mv-ui .slick-dots li button::before { content: none; }
.amata-mv-ui .slick-dots li button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--amata-grad);
  opacity: 0.2;
  transition:
    opacity var(--amata-dur-fast) ease,
    transform var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-mv-ui .slick-dots li.slick-active button::after {
  opacity: 1;
  transform: scale(1.2);
}

.amata-play-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--amata-teal);
  border-radius: 50%;
  background: #fff;
  color: var(--amata-teal);
  cursor: pointer;
  box-shadow: var(--amata-shadow-1);
  transition: transform var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-play-btn:hover { transform: scale(1.1); }
.amata-play-btn .amata-icon { width: 14px; height: 14px; }
/* aria-pressed（＝停止中）状態でアイコンを切替 */
.amata-play-btn .amata-icon--play  { display: none; }
.amata-play-btn[aria-pressed="true"] .amata-icon--play  { display: block; }
.amata-play-btn[aria-pressed="true"] .amata-icon--pause { display: none; }

/* ------------------------------------------------------------
   5. Lineup（商品カード）
   ------------------------------------------------------------ */
.amata-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
}

.amata-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--amata-radius);
  background: #fff;
  box-shadow: var(--amata-shadow-1);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--amata-dur-fast) var(--amata-ease-out),
    box-shadow var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-card:hover,
.amata-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--amata-shadow-2);
  color: inherit;
  text-decoration: none;
}

.amata-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--amata-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.amata-card__img {
  position: relative;
  aspect-ratio: 3 / 4;      /* padding-topハックをaspect-ratioへ */
  overflow: hidden;
  background: #eef4f3;
}
.amata-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--amata-dur) var(--amata-ease-out);
}
.amata-card:hover .amata-card__img img { transform: scale(1.05); }

.amata-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.2rem;
}
.amata-card__cat {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
}
.amata-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3em;
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}
.amata-card__price {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #eef2f1;
  font-size: 1.1rem;
  font-weight: 700;
}
.amata-card__price small { font-size: 0.7em; font-weight: 400; }

/* ------------------------------------------------------------
   5.5 コンテンツ下部ブロック（NEWS）の視認性調整
   NEWSブロック(EC-CUBE標準 .ec-newsRole)は、標準CSSが
   グレーの太枠(border: 16px solid #F8F8F8)を持ち、これが
   「背景色が付いている」ように見えて視認性を下げていたため、
   枠を外し白カード＋淡い影の表現に統一する。
   ※ もしブロック管理側のHTMLに独自のstyle属性やクラスが
     残っている場合は、そちらの指定が優先されることがあるので
     ブロック側も確認すること。
   ------------------------------------------------------------ */
body.front_page .ec-newsRole {
  /* グレー枠は不要だが、セクションとしての上下余白は必要。
     上は他セクション(.amata-section)と揃え、下はフッター直前の
     ため詰め気味にする（88pxでは空きすぎるとの指摘により調整） */
  padding: 48px 0 56px;
  background: transparent;
}

/* EC-CUBE標準CSSはフッターに margin-top: 30px を持たせており、
   NEWSの下パディングと合算されて空きが過大になるため打ち消す。
   フッターまでの距離は上の padding-bottom(56px) の1箇所で管理する */
body.front_page .ec-layoutRole__footer .ec-footerRole,
body.front_page .ec-footerRole {
  margin-top: 0;
}
body.front_page .ec-newsRole .ec-newsRole__news {
  border: none;
  padding: 10px 30px;
  background: #fff;
  border-radius: var(--amata-radius);
  box-shadow: var(--amata-shadow-1);
}

/* NEWSのリンク行（URL登録済み・実際にクリックできる行）のホバー色。
   何も指定しないとEC-CUBE標準の既定色（ブランドと無関係な色）が
   出てしまうため、他の要素（.amata-underline等）と同じティールに
   明示的に揃える。is-plain（リンクなし）には影響しない */
.ec-newsRole__newsTitle a:hover {
  color: var(--amata-teal);
}

/* URL未登録のお知らせ（new_item.twigでaタグを持たない行）向け。
   標準CSSは「NEWSの行は必ずリンク」という前提でカーソルや
   ホバー時の下線・色変化を定義しているため、リンクが無い行にも
   その装飾が残り「押せそうに見えるのに押せない」状態になる。
   is-plain はリンクを持たない行にのみ付与されるので、ここで
   明示的に打ち消す（クリックできる行の見た目には影響しない） */
.ec-newsRole__newsHeading.is-plain,
.ec-newsRole__newsHeading.is-plain * {
  cursor: default;
}
.ec-newsRole__newsHeading.is-plain:hover .ec-newsRole__newsTitle,
.ec-newsRole__newsHeading.is-plain .ec-newsRole__newsTitle:hover {
  text-decoration: none;
  color: inherit;
}

/* ------------------------------------------------------------
   6. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* スマホ時の左右余白は amata_top.js の
     responsive[breakpoint:768].centerPadding で指定する
     （ここに書いてもインラインstyleに負けるため無効） */
  .amata-section-head__en { font-size: 1.8rem; }

  /* カード横スクロール（現行仕様踏襲） */
  .amata-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .amata-card {
    min-width: 40%;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .amata-card__body { padding: 1rem; }
  .amata-card__title { font-size: 0.85rem; }

  .amata-btn,
  .ec-blockBtn--top,
  .ec-inlineBtn--top {
    /* スマホではボタン自身をブロック化して中央寄せする。
       トップ本体の .amata-btn は中央寄せの親(.amata-btn-area)を
       持つが、ブロック管理側のボタンはラッパーなしで置かれるため、
       ボタン自身が中央寄せできる必要がある */
    display: flex;
    margin-inline: auto;
    width: min(80%, 320px);
    padding: 0 20px;
  }
}

/* ------------------------------------------------------------
   7. モーション低減設定への配慮
   リビール/パララックスは装飾なので完全に無効化する
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* JS側でも判定しているが、CSSでも保険をかける。
     .is-pre（2クラス分の詳細度）に勝つ必要があるため同型で書く */
  .amata-reveal.is-pre {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .amata-bg__blob { display: none; }
  .amata-mv .slick-slide,
  .amata-card,
  .amata-card__img img,
  .amata-btn {
    transition: none;
  }
}