/**
 * Startups Theme（INFOティッカー）
 *
 * ハンバーガーメニューのモーダル上部、.as-modal-header 直下に入るバー。
 * クラス名はすべて info-ticker__ 接頭辞で閉じているため既存CSSと衝突しない。
 * article-search.css の後に読み込む前提（enqueue の依存指定済み）。
 */

.info-ticker{
  /* 既存テーマの変数に合わせて上書きしてください */
  --it-ink:#14212B;
  --it-ink-2:#5B6B75;
  --it-paper:#FFFFFF;
  --it-rule:#E2E7E9;
  --it-link:#12507F;
  --it-font-num:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  --bar-h:60px;              /* バーの高さ */
  --gap:40px;                /* 記事どうしの間隔 */
  position:relative;
  display:flex;align-items:stretch;
  height:var(--bar-h);
  background:var(--it-paper);
  border-bottom:1px solid #ddd;
  overflow:hidden;
  flex:0 0 auto;
  z-index:2;
}
.info-ticker__label{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  background:var(--it-paper);
  border-right:1px solid var(--it-rule);
  color:var(--it-ink);
  z-index:3;
}
.info-ticker__label svg{width:21px;height:21px;display:block;fill:currentColor}
.info-ticker__view{
  position:relative;flex:1 1 auto;min-width:0;overflow:hidden;
  touch-action:pan-y;              /* 横フリックはティッカー、縦スワイプはページに渡す */
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.info-ticker.is-dragging .info-ticker__view{cursor:grabbing}
.info-ticker.is-dragging .info-ticker__item{pointer-events:none}
.info-ticker__view::before,
.info-ticker__view::after{content:"";position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.info-ticker__view::before{left:0;background:linear-gradient(90deg,var(--it-paper),rgba(255,255,255,0))}
.info-ticker__view::after{right:0;background:linear-gradient(270deg,var(--it-paper),rgba(255,255,255,0))}

.info-ticker__track{
  display:flex;align-items:center;height:100%;width:max-content;
  will-change:transform;
}
.info-ticker__group{display:flex;align-items:center;flex:0 0 auto}

.info-ticker__item{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:0 calc(var(--gap)/2);height:var(--bar-h);
  text-decoration:none;color:inherit;white-space:nowrap;
}

a.info-ticker__item.-unlink.-undash span:hover {
    color: var(--clb-link-hover-color);
}

.info-ticker__item:hover .info-ticker__text{color:var(--clb-link-hover-color);text-decoration:underline;text-underline-offset:3px}
.info-ticker__item:focus-visible{outline:2px solid var(--it-link);outline-offset:-4px;border-radius:3px}

.info-ticker__logos{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.info-ticker__logo{height:30px;display:flex;align-items:center}   /* 標準 */
.info-ticker__logo img{height:100%;width:auto;max-width:120px;object-fit:contain;display:block}
.info-ticker__logo.is-tall{height:40px}          /* 縦長ロゴ（ARUYO など） */
.info-ticker__logo.is-tall img{max-width:52px}
.info-ticker__logo.is-lg{height:44px}            /* 情報量の多いロゴ（GLiS など） */
/* GLiS は 260x180 の縦横比が近いロゴのため、高さ38pxだと横幅が約55pxまでしか
   伸びず文字が潰れる。バー高さ60pxの範囲で高さを稼いで可読性を確保する。 */
.info-ticker__logo.is-lg img{max-width:120px}
.info-ticker__logo.is-sm{height:22px}            /* やや小さく（AGORA Hon-atsugi） */
.info-ticker__logo.is-sm img{max-width:120px}
.info-ticker__logo.is-xs{height:14px}            /* 横長・線の太いロゴ（BAK・YAK） */
.info-ticker__logo.is-xs img{max-width:88px}

.info-ticker__text{font-size:16px;font-weight:500;letter-spacing:.01em}

.info-ticker__sep{flex:0 0 auto;width:1px;height:22px;background:var(--it-rule)}

.info-ticker__ctl{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--it-rule);background:var(--it-paper);z-index:3}
.info-ticker__btn{
  width:48px;height:100%;border:0;background:transparent;cursor:pointer;color:var(--it-ink);
  display:flex;align-items:center;justify-content:center;
}
.info-ticker__btn:hover{background:#F4F6F6}
.info-ticker__btn:focus-visible{outline:2px solid var(--it-link);outline-offset:-3px}
.info-ticker__btn svg{width:13px;height:13px;fill:currentColor}
.info-ticker__btn .ico-play{display:none}
.info-ticker.is-paused .ico-play{display:block}
.info-ticker.is-paused .ico-pause{display:none}

@media (max-width:768px){
  .info-ticker{--bar-h:52px;--gap:28px}
  .info-ticker__label{padding:0 12px}
  .info-ticker__label svg{width:19px;height:19px}
  .info-ticker__text{font-size:16px}
  .info-ticker__logo{height:26px}
  .info-ticker__logo img{max-width:96px}
  .info-ticker__logo.is-tall{height:34px}
  .info-ticker__logo.is-lg{height:38px}
  .info-ticker__logo.is-sm{height:19px}
  .info-ticker__logo.is-xs{height:13px}
}
@media (prefers-reduced-motion:reduce){
  /* 自動送りはJS側で停止。フリック／ドラッグでの手動送りは有効のまま */
}

/* -----------------------------------------------------------------
   テーマ側スタイルとの調整
   .slide-in-overlay.menu-slide-in-overlay.visible * { max-width:100% }
   が効くと、横に長いトラックが折り返されて流れなくなるため打ち消す。
   ----------------------------------------------------------------- */
.info-ticker,
.info-ticker__view,
.info-ticker__track,
.info-ticker__group,
.info-ticker__item,
.info-ticker__logos,
.info-ticker__logo,
.info-ticker__text{max-width:none !important}

.info-ticker__logo img{max-width:120px !important}
.info-ticker__logo.is-tall img{max-width:52px !important}
.info-ticker__logo.is-xs img{max-width:88px !important}

/* テーマ共通の a 装飾（下線アニメーション）を持ち込まない */
.info-ticker__item,
.info-ticker__item:hover{background-image:none}

/* 読み上げ専用テキスト */
.info-ticker__sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}