/* 森の音トグル（Masami指示 2026-07-13）。ヒーロー右下の静かな丸ボタン。
 * 自己完結（既存CSS不変・本ファイル撤去で完全復元）。 */
.oto {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 9px 16px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .18em;
  color: #F4F1E8;
  background: rgba(18, 24, 19, .45);
  border: 1px solid rgba(244, 241, 232, .4);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .3s ease, border-color .3s ease;
}
.oto:hover { background: rgba(18, 24, 19, .65); }
.oto.is-on { border-color: rgba(244, 241, 232, .85); }

/* アイコン＝インラインSVG（絵文字不使用・Masami指示2026-07-13）。
 * オフ＝スピーカー＋斜線／オン＝斜線が消え、音の波紋2本がふわっと現れる */
.oto__ico { width: 16px; height: 16px; }
.oto__ico .oto__w1,
.oto__ico .oto__w2 { opacity: 0; transition: opacity .35s ease; }
.oto__ico .oto__x { opacity: 1; transition: opacity .25s ease; }
.oto.is-on .oto__ico .oto__w1 { opacity: 1; }
.oto.is-on .oto__ico .oto__w2 { opacity: .7; transition-delay: .12s; }
.oto.is-on .oto__ico .oto__x { opacity: 0; }