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


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


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

.sniff-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（sniff固有）
   ================================================ */
@media (max-width: 768px) {

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

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

}


/* ================================================
   SNIFF SECTION — クリック可能オーバーレイボタン
   ================================================ */
.sniff-section--clickable {
  position: relative;
}

.sniff-section__btn-link {
  position: absolute;
  display: block;
  cursor: pointer;
}

/* UI セクション — VOICE TONE VIDEO ボタン */
.sniff-section__btn-link--ui-voice {
  top: 89.48%;
  left: 3.90%;
  width: 24.96%;
  height: 0.43%;
  min-height: 28px;
}

/* Intro セクション — VOICE TONE VIDEO ボタン */
.sniff-section__btn-link--intro-voice {
  top: 25.75%;
  left: 58.26%;
  width: 30.23%;
  height: 1.27%;
  min-height: 28px;
}

/* Solution セクション — VOICE TONE VIDEO ボタン */
.sniff-section__btn-link--solution-voice {
  top: 52.69%;
  left: 14.32%;
  width: 11.50%;
  height: 0.88%;
  min-height: 28px;
}

/* Research セクション — インタビュー質問を見る ボタン */
.sniff-section__btn-link--research-interview {
  top: 33.56%;
  left: 63.04%;
  width: 16.12%;
  height: 0.31%;
  min-height: 28px;
}