/* ================================================
   SPOON — spoon.css
   spoon.html 専用スタイル
   ※ Design Tokens は style.css の :root に定義済み
   ================================================ */


/* ================================================
   THEME — spoon
   ================================================ */
body.theme--spoon {
  background-color: #FFFFFF;
}


/* ================================================
   SPOON SECTION — 画像セクション
   ================================================ */
.spoon-section {
  width: 100%;
  display: block;
  line-height: 0;  /* 画像下の余白を除去 */
}

.spoon-section__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ================================================
   NAV BOTTOM — SP推奨テキスト（PC: 非表示）
   ================================================ */
.nav-bottom__notice {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 48px;
  background-color: var(--color-bg-dark);
  border-radius: 999px;
  pointer-events: auto;
  font-family: var(--font-helvetica);
  font-size: var(--size-sp-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-text-white);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}


/* ================================================
   Responsive — Nav Bottom SP（spoon固有）
   ================================================ */
@media (max-width: 768px) {

  /* セクションボタングループを非表示 */
  .theme--spoon .nav-bottom__group {
    display: none;
  }

  /* PC推奨テキストを表示 */
  .theme--spoon .nav-bottom__notice {
    display: flex;
  }

}


/* ================================================
   NAV BOTTOM — Dark テーマ 背景色オーバーライド
   ================================================ */
.theme--spoon .nav-bottom__group {
  background-color: rgba(255, 255, 255, 0.2);
}

.theme--spoon .nav-bottom__home {
  background-color: rgba(255, 255, 255, 0.2);
}

.theme--spoon .nav-bottom__home:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.theme--spoon .nav-bottom__gradient--right {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.theme--spoon .nav-bottom__gradient--left {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}