@charset "UTF-8";
/* ===================================================================
   page-index.scss — トップページ専用（正規ソース）
   ─────────────────────────────────────────────
   これを唯一のソースとし、dart-sassでコンパイルしたものを
   page-index.css として配置する（手書きCSSとの二重管理を終了）。

   現行 page-index.css を1:1でSCSS化し、v2調整（hero全幅化＋高さ確保）を
   マージ済み。変更箇所には【v2】マーカーを付けてあるので、
   気に入らなければその行だけ戻せば現行と完全一致に戻る。
=================================================================== */
.page-index {
  /* =================================================================
     ヒーロー
  ================================================================= */
}
.page-index .hero {
  position: relative;
  overflow: clip; /* 右ブリードの外は切る */
  /* ---- 調整用変数（Firefox devtoolsでここだけいじる） ---- */
  --hero-visual-w: min(52vw, 980px); /* 【v2】56vw/900px → 52vw/980px */
  --blob-shift-x: 1%;
  --blob-shift-y: 3%;
  --blob-scale: 1.04;
  /* 【v2】写真が切れないよう最小高さ＝写真ブロック実高さに連動 */
  min-block-size: calc(var(--hero-visual-w) * 0.9403638569);
  padding-bottom: 3rem;
}
.page-index .hero__inner {
  position: relative;
  z-index: 4; /* テキストは常に最前 */
  max-width: 1180px; /* 【v2】container縛り解除・全幅化 */
  padding-inline: clamp(1.5rem, 4vw, 4rem); /* 【v2】 */
  min-block-size: inherit; /* 【v2】 */
  align-content: center; /* 【v2】縦センター（Flex不使用） */
}
.page-index .hero__body {
  max-width: 34em;
  padding-block: 4rem; /* 【v2】5rem 6rem → 4rem */
}
.page-index .hero__catch {
  margin-block: 0 0.8em;
  font-family: var(--f-jp-serif);
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-wrap: balance;
  color: var(--c-text-strong);
}
.page-index .hero__lead {
  margin-block: 0 2em;
  font-size: 1.0625em;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: var(--c-text-strong);
}
.page-index .hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.page-index {
  /* ---- 写真ブロック（右端フルブリード） ---- */
}
.page-index .hero__visual-wrap {
  position: absolute;
  inset-block-start: 5%;
  inset-inline-end: 0;
  inline-size: var(--hero-visual-w);
  z-index: 1;
}
.page-index .hero__visual {
  position: relative;
  aspect-ratio: 824.5/775.33;
  --photo-size: auto 135%;
  --photo-pos: 80% 50%;
  /* ブロブ（マスク外・従来どおり動く） */
}
.page-index .hero__visual::before {
  content: "";
  position: absolute;
  inset-block-start: var(--blob-shift-y);
  inset-inline-end: calc(-1 * var(--blob-shift-x));
  inline-size: calc(100% * var(--blob-scale));
  block-size: var(--blob-h, auto); /* auto = aspect-ratio任せ */
  aspect-ratio: 888/740;
  background: url("/assets/images/top/back-hero-01.webp") no-repeat var(--blob-bg-pos, 0 0)/var(--blob-bg-size, 100% 100%);
  opacity: var(--blob-opacity, 1);
  z-index: 1;
}
.page-index .hero__visual {
  /* 写真（マスク内・background方式） */
}
.page-index .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* deco(2)より前・従来のz構造維持 */
  background-image: var(--hero-photo); /* テンプレのstyle属性から */
  background-repeat: no-repeat;
  background-size: var(--photo-size, cover);
  background-position: var(--photo-pos, 100% 50%); /* 右スライス表示を既定に */
  mask-image: url("/assets/images/top/hero-path.svg");
  mask-size: var(--mask-size, 100% 100%);
  mask-position: var(--mask-pos, 0 0);
  mask-repeat: no-repeat;
}
.page-index {
  /* ---- 装飾（金の曲線＋きらめき・左側全域） ---- */
}
.page-index .hero__deco {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-start: -5%;
  block-size: 92%;
  aspect-ratio: 774/740; /* back-hero-02.webp 実寸比 */
  background: url("/assets/images/top/back-hero-02.webp") no-repeat 0 0/contain;
  z-index: 2;
  pointer-events: none;
}
.page-index {
  /* ---- 手書きスクリプト ---- */
}
.page-index .hero__script {
  position: absolute;
  inset-block-end: 6%;
  inset-inline-end: calc(var(--hero-visual-w) * 0.58);
  z-index: 4;
  margin: 0;
  font-family: var(--f-script, "Dancing Script", cursive);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 3rem);
  line-height: 1;
  color: var(--c-blue);
  opacity: 0.8;
  rotate: -3deg;
  pointer-events: none;
}
.page-index {
  /* ---- SP: 縦積み ---- */
}
@media (max-width: 767px) {
  .page-index .hero {
    min-block-size: 0;
  }
  .page-index { /* 【v2】高さ連動を解除 */ }
  .page-index .hero__body {
    padding-block: 3rem 1rem;
    max-width: none;
  }
  .page-index .hero__visual-wrap {
    position: static;
    inline-size: 100%;
    margin-block-start: 1rem;
  }
  .page-index .hero__deco {
    display: none;
  }
  .page-index { /* 狭幅では曲線がテキストと衝突するため */ }
  .page-index .hero__script {
    position: static;
    display: block;
    text-align: end;
    padding-inline-end: 1.5rem;
    rotate: 0deg;
    margin-block-start: -1.6em;
    font-size: 3rem;
  }
  .page-index .hero__script > br {
    display: none;
  }
}
.page-index .news {
  background-color: var(--c-bg-cream);
}
.page-index .news .news__more {
  text-align: center;
}
.page-index .news {
  /* 一覧の下に添える注記（空なら出さない） */
}
.page-index .news .news__notice {
  margin-block: -0.5em 2em;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.8125em;
  text-align: center;
}
.page-index .news .news__notice:empty {
  display: none;
}
.page-index {
  /* =================================================================
     当院の特徴（3カラム・アイコン）
  ================================================================= */
}
.page-index .features {
  background: var(--c-bg);
}
.page-index .feature {
  text-align: center;
  padding-inline: 3rem;
  /* 【v2.4】PC時のみカード間に区切り罫線 */
}
@media (min-width: 768px) {
  .page-index .feature:not(:first-child) {
    border-inline-start: 1px solid var(--c-line);
  }
}
.page-index .feature__icon {
  width: 5em;
  height: 5em;
  margin: 0 auto 1.2em;
  color: var(--c-blue);
}
.page-index .feature__icon img, .page-index .feature__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-index .feature__title {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-lg);
  color: var(--c-text-strong);
  margin-bottom: 0.8em;
  text-wrap: balance;
}
.page-index .feature__text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.page-index {
  /* =================================================================
     診療内容（4カラム・カード）
  ================================================================= */
}
.page-index .services {
  background: var(--c-bg-cream);
  /* 640px以下でも2列を維持（layout.css既定の1列を上書き）
     列数はlayout.cssの --cols 方式に乗せる（直指定するとMQ制御が死ぬ） */
}
@media (max-width: 640px) {
  .page-index .services .grid-auto.cols-4 {
    --cols: 2;
  }
}
.page-index .services__more {
  margin-block: 2.5rem 0;
  text-align: center;
}
.page-index .service-card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 2em 1em;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.page-index .service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.page-index .service-card__icon {
  width: 5em;
  height: 5em;
  margin: 0 auto 1em;
  color: var(--c-blue);
}
.page-index .service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-index .service-card__title {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-md); /* 【変更】lg → md */
  color: var(--c-text-strong);
  margin-bottom: 0.7em;
}
.page-index .service-card__text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-align: left;
}
.page-index {
  /* =================================================================
     お悩み（チェックリスト）
  ================================================================= */
}
.page-index .worries {
  background: var(--c-bg);
}
.page-index .worries__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.page-index .worries__title {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-xl);
  color: var(--c-text-strong);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.page-index .worry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em 1.5em;
}
.page-index .worry-list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-sm);
  /* チェックマーク（CSSのみ） */
}
.page-index .worry-list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--c-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}
.page-index .worries__cta {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-lg);
  color: var(--c-blue);
  margin-top: 2rem;
}
.page-index .worries__visual {
  position: relative;
  aspect-ratio: 537.07/487.06;
  --photo-size: auto 100%;
  --photo-pos: 20% 50%;
}
.page-index .worries__visual::before { /* ブロブ（マスク外・従来どおり） */
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/top/back-service-01.webp") no-repeat 0 0/100% 100%;
  z-index: 1;
}
.page-index .worries__visual::after { /* 写真（マスク内・background方式） */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--worry-photo);
  background-repeat: no-repeat;
  background-size: var(--photo-size, cover); /* 引き=数値指定 例: 115% auto */
  background-position: var(--photo-pos, 50% 50%);
  mask-image: url("/assets/images/top/path-service.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.page-index {
  /* =================================================================
     診療時間 & 予約（2カラム）
  ================================================================= */
}
.page-index .info {
  background: var(--c-bg-cream);
}
.page-index .info__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.page-index {
  /* 診療時間テーブル */
}
.page-index .hours-box {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 2em;
  box-shadow: var(--shadow-sm);
}
.page-index .hours-box__title {
  text-align: center;
  font-family: var(--f-jp-serif);
  font-size: var(--fs-lg);
  color: var(--c-text-strong);
  margin-bottom: 1.2em;
}
.page-index {
  /* 8列テーブルが狭幅で溢れた時の保険 */
}
.page-index .hours-scroll {
  overflow-x: auto;
}
@media (max-width: 767px) {
  .page-index .hours-scroll {
    overflow-x: visible;
  }
}
.page-index .hours-scroll { /* 縦組みでは不要 */ }
.page-index .hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: center;
}
.page-index .hours-table th, .page-index .hours-table td {
  border: 1px solid var(--c-line);
  padding: 0.7em 0.4em;
}
.page-index .hours-table thead th {
  background: var(--c-blue-pale);
  color: var(--c-text-strong);
}
.page-index .hours-table tbody th {
  background: var(--c-bg-soft);
  white-space: nowrap;
}
.page-index {
  /* 出し分け */
}
.page-index .hours-table--sp {
  display: none;
}
@media (max-width: 767px) {
  .page-index .hours-scroll {
    display: none;
  }
  .page-index { /* PC版テーブルごと隠す */ }
  .page-index .hours-table--sp {
    display: table;
  }
}
.page-index {
  /* --- SP: 縦組み（曜日が行） --- */
}
.page-index .hours-table--sp {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: center;
}
.page-index .hours-table--sp th, .page-index .hours-table--sp td {
  border: 1px solid var(--c-line);
  padding: 0.8em 0.4em;
  vertical-align: middle;
}
.page-index .hours-table--sp {
  /* ヘッダー行（午前・午後＋時間） */
}
.page-index .hours-table--sp thead th {
  background: var(--c-bg-soft);
  font-weight: 600;
  line-height: 1.4;
}
.page-index .hours-table--sp .hours-table__slot {
  display: block;
  font-size: 1em;
  color: var(--c-text-strong);
}
.page-index .hours-table--sp .hours-table__time {
  display: block;
  margin-block-start: 0.2em;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-text-mute);
  white-space: nowrap;
}
.page-index .hours-table--sp {
  /* 曜日列 */
}
.page-index .hours-table--sp tbody th {
  inline-size: 4em;
  background: var(--c-bg-soft);
  font-weight: 600;
  white-space: nowrap;
}
.page-index .hours-table--sp tbody th.is-sat {
  background: var(--c-blue-pale);
}
.page-index .hours-table--sp tbody th.is-sun {
  background: color-mix(in srgb, var(--c-gold) 18%, var(--c-white));
}
.page-index .hours-table--sp tbody td {
  color: var(--c-text-strong);
}
.page-index .hours-note {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  margin-top: 1em;
}
.page-index {
  /* 予約ブロック */
}
.page-index .reserve-box__title {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-lg);
  color: var(--c-text-strong);
  margin-bottom: 0.8em;
}
.page-index .reserve-box__tel {
  font-family: var(--f-jp);
  font-size: var(--fs-2xl);
  color: var(--c-blue);
  font-weight: 600;
  margin-block: 0.3em 1em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.page-index .reserve-box .tel-icon {
  display: inline-block;
  inline-size: 40px;
  block-size: 40px;
  background-color: var(--c-blue); /* ← 色はここ。CSSで自由 */
  mask: url("/assets/images/icon/icon-phone.svg") no-repeat center/contain;
}
.page-index .reserve-box .btn {
  width: 100%;
  margin-bottom: 1rem;
}
.page-index {
  /* =================================================================
     クリニック紹介（about抜粋）
  ================================================================= */
}
.page-index .about-intro {
  background: var(--c-bg);
}
.page-index .about-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: center;
}
.page-index .about-intro__title {
  font-family: var(--f-jp-serif);
  font-size: var(--fs-xl);
  color: var(--c-text-strong);
  margin-bottom: 1.2rem;
}
.page-index .about-intro__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  margin-bottom: 1.8rem;
}
.page-index .about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.page-index .about-gallery figure {
  margin: 0;
  text-align: center;
}
.page-index .about-gallery img {
  border-radius: var(--radius);
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 0.6em;
}
.page-index .about-gallery figcaption {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.page-index {
  /* SP専用：トップのアンカーナビ（ヘッダー下にsticky） */
}
.page-index .sp-anchor-nav {
  display: none;
}
@media (max-width: 920px) {
  .page-index .sp-anchor-nav {
    display: block;
    position: sticky;
    inset-block-start: var(--header-h, 4.5rem); /* ヘッダーの実高さ分だけ下げる */
    z-index: 90; /* header(100)より下・drawer(96)より下 */
    border-block-end: 1px solid var(--c-line-light);
    background: var(--c-white);
  }
}
.page-index .sp-anchor-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-line-light);
}
.page-index .sp-anchor-nav a {
  display: grid;
  place-content: center;
  min-block-size: 3.2em;
  padding: 0.5em 0.3em;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  color: var(--c-white); /* 【変更】白抜き */
  background: var(--c-gold); /* 【変更】背景を金に */
}
.page-index .sp-anchor-nav a:active {
  background: color-mix(in srgb, var(--c-gold-deep) 85%, #000);
}
.page-index {
  /* =================================================================
     レスポンシブ
  ================================================================= */
}
@media (max-width: 992px) {
  .page-index .hero__inner,
  .page-index .worries__inner,
  .page-index .info__inner,
  .page-index .about-intro__inner {
    grid-template-columns: 1fr;
  }
  .page-index .hero__catch {
    font-size: var(--fs-2xl);
  }
  .page-index .about-intro__inner {
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .page-index .hero {
    position: relative;
    isolation: isolate;
    min-block-size: 78svh;
    display: grid;
    align-content: center;
  }
  .page-index {
    /* ビジュアルを背面に回して全面化 */
  }
  .page-index .hero__visual-wrap {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .page-index .hero__visual {
    block-size: 100%;
    aspect-ratio: auto; /* PC用の比率固定を解除 */
    /* 写真（::after） */
    --photo-size: cover;
    --photo-pos: 73% 30%; /* 写真のトリミング位置 */
    --mask-size: 150% 150%; /* マスクを拡大して画面を覆う */
    --mask-pos: 0% 50%; /* マスクの位置 */
    /* ブロブ（::before）— 値はPCと同じ。ここを動かすとSPだけ変わる */
    --blob-shift-x: 5%; /* 右へのはみ出し量 */
    --blob-shift-y: 30%; /* 上からの下げ量 */
    --blob-scale: 1.04; /* 横幅の倍率 */
    --blob-h: auto; /* 縦を明示（例 100%）。autoで比率任せ */
    --blob-bg-size: 100% 100%; /* 画像の伸ばし方（例 cover） */
    --blob-bg-pos: 0 0; /* 画像の位置（例 50% 50%） */
    --blob-opacity: 0.8; /* 0で消える */
  }
  .page-index {
    /* 白ベール（文字の可読性確保） */
  }
  .page-index .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--c-bg-cream) 88%, transparent) 30%, color-mix(in srgb, var(--c-bg-cream) 62%, transparent));
  }
  .page-index .hero__inner {
    padding-block: 2.5rem;
  }
  .page-index .hero__catch {
    line-height: 1.5;
  }
  .page-index {
    /* 次セクションを覗かせる（スクロール誘導） */
  }
  .page-index .hero + .news {
    padding-block-start: 1.5rem;
  }
  .page-index {
    /* ---- 診療時間テーブル ---- */
  }
  .page-index .hours-box {
    padding: 1.5em 1.2em;
  }
  .page-index {
    /* ---- 院内写真を非表示 ---- */
  }
  .page-index .about-gallery {
    display: none;
  }
  .page-index {
    /* ---- 行間を詰める ---- */
  }
  .page-index .hero__lead,
  .page-index .worries__title {
    line-height: 1.75;
    text-wrap: none;
  }
}
@media (max-width: 640px) {
  .page-index .worry-list {
    grid-template-columns: 1fr;
  }
  .page-index .about-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .page-index .hero__btns .btn {
    min-width: 100%;
  }
  .page-index .reserve-box__tel {
    font-size: var(--fs-xl);
  }
  .page-index .about-intro__title {
    font-size: var(--fs-md);
  }
}

/* ===================================================================
   言語別の微調整（en）
   和文セリフ体と欧文で字面の大きさ・字間の見え方が異なるため、
   英語ページでのみサイズと字間を詰める。判定は <html lang="en">
=================================================================== */
html[lang=en] .page-index .hero__catch {
  font-size: 2.5rem;
  letter-spacing: 0.02em;
}

/* ===================================================================
   アンカー位置の補正
   トップはヘッダー下にアンカーナビ（.sp-anchor-nav）がstickyするので、
   style.scss の 920px 指定にその分を上乗せする。
   scroll-padding はルートスクローラー（html）に効くため、
   body のクラスを :has() で拾う形にしている。
=================================================================== */
@media (max-width: 920px) {
  html:has(.page-index) {
    scroll-padding-top: calc(var(--header-h) + 3.2em + 1rem);
  }
}
/* ============================================================
   告知バー（ヒーロー下部に重ねて表示）
   トップの「本文」に文字が入っているときだけ出力される
============================================================ */
.notice-bar {
  --nb-accent: #d9bb86;
  --nb-surface: var(--c-blue);
  position: relative;
  z-index: 2;
  margin-block: -2.75em 3em;
  transition: opacity 0.7s ease, translate 0.7s ease;
}
@starting-style {
  .notice-bar {
    opacity: 0;
    translate: 0 0.75em;
  }
}

.notice-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  inline-size: 100%;
  padding: 1.15em 2em;
  border: 1px solid color-mix(in srgb, var(--nb-accent) 45%, transparent);
  background: color-mix(in srgb, var(--nb-surface) 80%, transparent);
  color: var(--c-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0.5em 1.75em -0.9em rgba(0, 0, 0, 0.2);
}

.notice-bar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2.4em;
  block-size: 2.4em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nb-accent) 20%, #fff);
  color: color-mix(in srgb, var(--nb-accent) 75%, #000);
}

.notice-bar__icon svg {
  inline-size: 1.2em;
  block-size: 1.2em;
}

.notice-bar__text {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em 0.9em;
  text-wrap: balance;
}

.notice-bar__main {
  font-size: var(--fs-2xl);
  letter-spacing: 0.04em;
}

.notice-bar__sub {
  font-size: 0.8125em;
  color: color-mix(in srgb, currentColor 85%, transparent);
}

/* --- SP --- */
@media (max-width: 767px) {
  .notice-bar {
    margin-block: 0 2em;
  }
  .notice-bar__inner {
    gap: 0.75em;
    padding: 1em 1.15em;
  }
  .notice-bar__text {
    flex-direction: column;
    gap: 0.25em;
  }
  .notice-bar__main {
    font-size: var(--fs-lg);
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notice-bar {
    transition: none;
  }
  @starting-style {
    .notice-bar {
      opacity: 1;
      translate: none;
    }
  }
}