/* ===== Reset / Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; }

:root{
  --bg: #ef5a22;
  --fg: #fff;
  --orbit-r-min: 120px;
  --orbit-r-max: 280px;
  --item-size: clamp(28px, 4vw, 48px);  /* ★大きめに修正 */
  --hover-scale: 1.06;
}

body{
  font-family: "Oswald", sans-serif;
  background: var(--bg); /* 画像読み込み前の色 */
  color: var(--fg);
  min-height: 100dvh;
}

/* ===== Hero（背景画像は擬似要素で敷く） ===== */
.orbit-hero{
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* isolation: isolate; ← ここ外すと背景も素直に見える */
  overflow: hidden; /* はみ出し防止ならこっちでOK */
}
/* 背景は最背面に固定 */
.orbit-hero::before{
  content:"";
  position:absolute; 
  inset:0;
  z-index:-1;                             /* 背景レイヤー */
  background:url("../img/ushiro.png") center/cover no-repeat;
}
.orbit-hero::after{
  content:"";
  position:absolute; 
  inset:0;
  z-index:-1;                             /* 背景の上・前景の下 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

/* ロゴは前景に独立レイヤーで重ねる */
.logo-wrap{
  position:relative;
  z-index:1;                             /* ← 背景より前 */
  width:min(64vmin,560px);
  aspect-ratio:1/1;
  display:grid; place-items:center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
}
.logo-wrap img{
  width:100%; height:100%; object-fit:contain;
  user-select:none; pointer-events:none;

  /* フェードイン（初期は透明） */
  opacity:0; transform:scale(.96);
  transition:opacity 1s ease, transform 1.2s ease;
}
.logo-wrap img.fadein{ opacity:1; transform:scale(1); }

/* メニューはロゴの“上”に置くなら z=3（下に置きたいなら 1 に） */
.orbit-nav{
  position:absolute; inset:0;
  z-index:3;                             /* ← ロゴより上にしたい場合 */
  pointer-events:none;                   /* 子要素のみ反応 */
}
.orbit-item{ pointer-events:auto; }      /* 既存どおり */

/* ===== 浮遊メニュー（土台） ===== */
.orbit-nav{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;  /* 子要素のみ反応 */
}

/* ===== 各ラベル（transformは変数で一元管理） ===== */
.orbit-item{
  position: absolute;
  left: 0; top: 0;                /* JSが絶対座標で配置 */
  --tx: 0px; --ty: 0px;           /* JSが更新する座標 */
  --scale: 1;
  transform: translate(var(--tx), var(--ty)) translate(-50%,-50%) scale(var(--scale));
  transform-origin: 0 0;

  font: 700 var(--item-size)/1.2 "Oswald", sans-serif; /* ← Oswald に統一 */
  letter-spacing: .08em; /* Oswaldは少し詰まってるので広めに */
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .2s ease, text-shadow .2s ease, opacity .2s ease;
  will-change: transform;
}
}
.orbit-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
/* ホバーは scale だけ変更（transformを上書きしない） */
.orbit-item:hover{
  --scale: var(--hover-scale);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* ===== Footer ===== */
footer{
  background: #000;
  color: #fff;
  text-align: center;
  padding: 1rem 3rem calc(env(safe-area-inset-bottom, 0px) + 16px);
  font-size: 0.9rem;
}
footer .sns-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  margin-top:10px;
}
footer .sns-icons img{
  height:28px;
  width:auto;
  display:block;
}

/* ===== Responsive ===== */
@media (max-width: 720px){
  :root{
    --orbit-r-min: 90px;
    --orbit-r-max: 170px;
    --item-size: clamp(16px, 5vw, 22px);
  }
}
@media (max-width: 600px){
  footer .sns-icons{ gap:24px; }
  footer .sns-icons img{ height:26px; }
}
/* さらに狭い端末は縦並びフォールバック */
@media (max-width: 420px){
  .orbit-nav{
    position: static;
    display: grid;
    gap: 14px;
    margin-top: -12vmin;
    width: min(88%, 440px);
    place-items: center;
  }
  .orbit-item{
    position: static;
    transform: none !important;
    translate: 0 0 !important;
    animation: none;
    background: rgba(255,255,255,.08);
    padding: 8px 14px;
    border-radius: 999px;
    width: 100%;
    text-align: center;
  }
}
/* ===== Top News Ticker ===== */
:root{
  /* ページ上部の帯の高さ（必要ならお好みで） */
  --ticker-h: 36px;
}

/* このクラスを <body> に付けたページだけ、ヒーローの上に余白を確保 */
.has-ticker .orbit-hero{
  padding-top: var(--ticker-h);
}

/* 固定の帯 */
.news-ticker{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ticker-h);
  z-index: 9999;                   /* ぜったい最前面 */
  background: rgba(0,0,0,.55);     /* うっすら透ける黒 */
  backdrop-filter: blur(4px);      /* 対応ブラウザで軽くぼかす */
  color: #fff;
  pointer-events: auto;
  overflow: hidden;
  /* Oswald に揃える（未読み込みでも安全） */
  font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: var(--ticker-h);
}

/* 左右のフェード（切れ目を目立たなくする） */
.news-ticker::before,
.news-ticker::after{
  content: "";
  position: absolute; top: 0; width: 48px; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.news-ticker::before{
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.news-ticker::after{
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* 中身のトラック（横長に並べて無限スクロール） */
.news-track{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  gap: 48px;                       /* 記事どうしの間隔 */
  padding: 0 56px;                 /* 端のフェード分＋ちょい余裕 */
  width: max-content;              /* 中身の幅に合わせて伸びる */
  will-change: transform;
  animation: ticker-scroll 28s linear infinite;
}

/* マウスオーバーで一時停止 */
.news-ticker:hover .news-track{ animation-play-state: paused; }

/* 各ニュース項目 */
.news-item{
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
  font-weight: 600;                /* Oswaldの骨格に合う太さ */
  font-size: 14px;
}
.news-item time{
  opacity: .85; font-weight: 400; letter-spacing: .04em;
}
.news-item a{
  color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35);
}
.news-item a:hover{ border-bottom-color: #fff; }

/* キーフレーム：同じ内容を2回並べる前提で -50% まで流すと継ぎ目が消える */
@keyframes ticker-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 省モーション指定なら停止 */
@media (prefers-reduced-motion: reduce){
  .news-track{ animation: none; transform: none; }
}

/* 小さめ端末でちょいコンパクトに */
@media (max-width: 600px){
  :root{ --ticker-h: 30px; }
  .news-ticker{ line-height: var(--ticker-h); }
  .news-track{ gap: 32px; padding: 0 40px; }
  .news-item{ font-size: 12px; gap: 10px; }
}