@charset "UTF-8";
/* oshinoko.webvcore.com — 旧CSSは触らず、直したい所だけここで上書きする（2026-10-02） */

/* ページトップ（右下の丸ボタン）
   旧は Font Awesome 5 の文字（\f102）で矢印を描いていたが、フォントが読めないと「□」になる。
   線だけで描く山形の矢印に替えた。色は旧サイトのピンク（#fe00a1）とゴールド。 */
#page_top {
  width: 52px;
  height: 52px;
  background: #fe00a1;
  border: 2px solid #daaf08;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  opacity: 1;
  transition: transform .2s ease, background .2s ease;
}
#page_top::before {
  content: '';
  font-family: inherit;
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(3px) rotate(45deg);
}
#page_top:hover {
  background: #d4008a;
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  #page_top, #page_top:hover { transition: none; transform: none; }
}

/* ヘッドライン（2026-10-02）
   旧は <marquee> で文字を流すだけだった。管理画面「ヘッドライン」の
   切り替え効果・間隔・バー背景色・文字色・太字をそのまま使う。
   線と幅は旧 .headline（base.css）のまま。 */
.headline.os-hl {
  height: 35px;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.os-hl-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
.os-hl-item {
  display: inline-block;
  font-size: 16px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
}
.headline a.os-hl-item:hover { opacity: .75; }
.os-hl-inner.os-hl-marquee { display: block; line-height: 35px; }
.os-hl-flow { display: inline-block; white-space: nowrap; animation: osHlFlow 22s linear infinite; }
.os-hl-flow .os-hl-item { margin-right: 40px; }
.os-hl-sep { opacity: .4; margin-right: 40px; }
.os-hl-blink .os-hl-item { animation: osHlBlink 1.4s ease-in-out infinite; }
@keyframes osHlFlow  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes osHlUp    { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes osHlBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media screen and (max-width: 768px) {
  .os-hl-item { font-size: 13px; }
}
