@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');
/*調整*/
body {
  background-color: rgb(255, 255, 255);
  font-family: 'M PLUS 1p', sans-serif;
}
#particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 魔法陣よりも後ろにするなら -2 */
  pointer-events: none;
}
.rank-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 100;
  color: #fff; /* 文字色は白の想定 */
  text-shadow:
    0 0 4px rgba(255, 120, 30, 0.6), 0 0 8px rgba(255, 120, 30, 0.6), 0 0 12px rgba(255, 120, 30, 0.35);
}
.fade-rotation {
  position: relative; /* これ必須！ */
}
.fade-rotation .rank-title {
  opacity: 0;
  position: absolute;
  /* ★ 横ど真ん中に配置 */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 4s linear;
  white-space: nowrap; /* （必要なら）改行させない */
}

.swiper-slide .iq-card img {
  border-radius: 0px;
}
.top_list_bg {
  background-image:
    url(../../images/bg/bg01_right.png?77902), /* 右1：最前面 */ url(../../images/bg/bg01_left.png?77902), /* 左1 */ url(""), /* 中央（これが一番下） */ url(../../images/bg/bg01_right.png?77902), /* 右2 */ url(../../images/bg/bg01_right.png?77902), /* 右3 */ url(../../images/bg/bg01_right.png?77902), /* 右4 */ url(../../images/bg/bg01_left.png?77902), /* 左2 */ url(../../images/bg/bg01_left.png?77902), /* 左3 */ url(../../images/bg/bg01_left.png?77902); /* 左4 */
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    700px auto, 700px auto, 100% auto, 700px auto, 700px auto, 700px auto, 700px auto, 700px auto, 700px auto;
  background-position:
    right 500px, /* 右1 */ left 1500px, /* 左1 */ top center, /* 中央 */ right 2800px, /* 右2 */ right 5500px, /* 右3 */ right 99999px, /* 右4 */ left 4200px, /* 左2 */ left 7000px, /* 左3 */ left 99999px; /* 左4 */
  margin-top: -60px;
  padding-top: 15px;
}
@media screen and (max-width:1024px) {
  .top_list_bg {
    background-size:
      300px auto, 300px auto, 100% auto, 300px auto, 300px auto, 300px auto, 300px auto, 300px auto, 300px auto;
    background-position:
      right 200px, /* 右1 */ left 850px, /* 左1 */ top center, /* 中央 */ right 1650px, /* 右2 */ right 3200px, /* 右3 */ right 4600px, /* 右4 */ left 2450px, /* 左2 */ left 4000px, /* 左3 */ left 99999px; /* 左4 */
    margin-top: -60px;
    padding-top: 15px;
  }
}
/* 中央に固定（位置は動かさない） */
.magic-circle {
  position: absolute;
  top: -170px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}
@media screen and (max-width:1024px) {
  .magic-circle {
    top: -50px;
    width: 210px;
  }
}
/* 回転専用レイヤー（←これが神器） */
.magic-rotate {
  animation: spin 60s linear infinite; /* 時計回り */
  transform-origin: center center; /* 中心軸で回す */
}
/* 画像は普通のまま */
.magic-rotate img {
  width: 100%;
  display: block;
}
/* 時計回り回転アニメーション */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* top_list_bg は普通に position:relative */
.top_list_bg {
	position: relative;
	z-index: 0; /* main_god を上回らない */
	margin-top: -100px;
	padding-top: 0px;
}
.ranking-header {
  color: hsla(0, 0%, 100%, 1.00);
  font-size: 2em;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 130px;
  font-weight: 700;
}
@media screen and (max-width:1024px) {
  .top_list_bg {
    margin-top: -70px;
    padding-top: 15px;
  }
  .ranking-header {
    font-size: 0.8em;
    margin-top: 0px;
    padding-top: 25px;
    padding-bottom: 40px;
  }
}
/* =======================================================
   ローディングスピナー
   ======================================================= */
.loading-wrap {
  position: relative;
  width: 100%;
  padding-top: 140%; /* アスペクト比維持用 */
  background: #222;
  border-radius: 6px;
  overflow: hidden;
}
.loading-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* 読み込み中は非表示 */
  transition: opacity 0.4s ease;
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================
   ★ 1行目だけのランキング数字（画像の上・裏レイヤー）
   ============================================ */
.rank-label-outside {
  position: absolute;
  top: -75px; /* PCの基準位置：画像の外・上 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 0; /* 画像より「後ろ」に沈める */
  font-size: 96px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
  pointer-events: none;
  line-height: 1;
}
/* 1行目だけ overflow visible にして数字を出す */
.users-row[data-row="0"], .users-row[data-row="0"] .swiper-users-row, .users-row[data-row="0"] .swiper-slide {
  overflow: visible !important;
}
/* 1行目だけ、上に数字ぶんの余白 */
.users-row[data-row="0"] {
  margin-top: 150px;
}
/* 金・銀・銅（裏レイヤーでも色は維持） */
.rank-1 {
  -webkit-text-stroke: 4px #f5c842;
  text-stroke: 4px #f5c842;
}
.rank-2 {
  -webkit-text-stroke: 4px #cfd3d4;
  text-stroke: 4px #cfd3d4;
}
.rank-3 {
  -webkit-text-stroke: 4px #cd7f32;
  text-stroke: 4px #cd7f32;
}
/* 4位以下（白アウトライン） */
.rank-4, .rank-5, .rank-6, .rank-7, .rank-8, .rank-9, .rank-10 {
  -webkit-text-stroke: 4px #fff;
  text-stroke: 4px #fff;
}
/* ===== スマホ専用調整（ここだけ残す・1個だけ） ===== */
@media screen and (max-width:768px) {
  .users-row[data-row="0"] {
    margin-top: 60px; /* 上の余白を増やす */
  }
  .rank-label-outside {
    top: -55px; /* 上にグッと持ち上げる */
    font-size: 72px;
    -webkit-text-stroke: 3px #fff;
    text-stroke: 3px #fff;
  }
}
/* ===========================================
   PREMIUM バッジ（左上の小さい黄色円）
   =========================================== */
.primium-product {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.primium-product i {
  font-size: 16px;
  line-height: 1;
}
@media screen and (max-width:1024px) {
  .primium-product {
    top: 7px;
    left: 13px;
    width: 10px;
    height: 10px;
  }
  .primium-product i {
    font-size: 12px;
  }
}
.swiper-wrapper {
  list-style-type: none;
  margin-bottom: 20px;
}
/* ===========================================
   写真下の黒グラデーション
   =========================================== */
.iq-card {
  /*position: relative;*/
  /*overflow: hidden;*/ /* ← これが最強の抑え込み */
  /*border-radius: 6px;*/
}
.card-description {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	z-index: 3;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	overflow: hidden;
	/* グラデーション背景（下→上） */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.0) 100%);
}
/* 文字をしっかり読みやすく */
.card-description .iq-title {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: 0;
  margin-left: 0px;
  padding: 0;
  /* ← ここが追加ポイント */
  white-space: nowrap; /* 1行固定 */
  overflow: hidden; /* はみ出し隠す */
  text-overflow: ellipsis; /* "..." 省略 */
}


@media screen and (max-width:1024px) {
  /* 名前を1行で省略する */
  .card-description .iq-title {
    font-size: 12px;
  }
}
.sp_non {
  display: block;
}
.sp_on {
  display: none;
}
.sp_navi {}
@media screen and (max-width:1024px) {
  .sp_non {
    display: none;
  }
  .sp_on {
    display: block;
  }
  .banner_box {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .banner_box img {
    width: 100%;
  }
  .sp_navi {
    height: 50px;
  }
}
/* ==========================================
   透明クリックレイヤー
========================================== */
/* PC → 今まで通り、広い透明レイヤー */
/*.click-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  z-index: 50;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  pointer-events: auto;
}*/
/* ============================================
   ★ スマホでは「上 90px だけ」クリック可能
      → モーダル開く
      → 下はスワイプ優先
============================================ */
/*@media screen and (max-width: 768px) {
  .click-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    pointer-events: auto;
    z-index: 5;
  }
}*/
.list-unstyled li {
  padding: 0 !important;
  margin: 0 !important;
}
.ending_txt, .list-unstyled .text-capitalize {
  font-size: 0.6em;
}
/*ナイトモード（逆）*/
.dark {
  background-color: hsla(0, 0%, 100%, 1.00);
  color: hsla(0, 0%, 0%, 1.00);
}
.dark .text-capitalize, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: hsla(0, 0%, 0%, 1.00);
}
.dark .personality-card .cast-title {
  color: hsla(0, 0%, 0%, 1.00);
}
.dark .non_dark {}
.dark .footer-default {
  background-color: hsla(0, 0%, 18%, 1.00);
}
.dark .footer-default .footer-link-title {
  color: hsla(0, 0%, 100%, 1.00);
}
.dark .footer-default .text-capitalize {
  color: hsla(0, 0%, 100%, 1.00);
}
.dark .parallax-window-detail h2, .dark .parallax-window-detail h4, .dark .parallax-window-detail p {
  color: hsla(0, 0%, 100%, 1.00);
}
.dark .ending_txt {
  color: hsla(0, 0%, 84%, 1.00);
}
/* 4位以下（白アウトライン） */
.dark .rank-4, .dark .rank-5, .dark .rank-6, .dark .rank-7, .dark .rank-8, .dark .rank-9, .dark .rank-10 {
  -webkit-text-stroke: 4px #000;
  text-stroke: 4px #000;
}
.copy_foot {
  text-align: center;
  font-size: 0.6em;
  color: hsla(0, 0%, 53%, 1.00);
  padding-top: 50px;
  padding-bottom: 100px;
}
.foot_logo img {
  width: 50px;
  margin-bottom: 10px;
}
/*NAVI*/
.toolbar {
  padding-top: 10px;
  padding-bottom: 10px;
}
.toolbar a {
  color: hsla(0, 0%, 100%, 1.00);
}
.toolbar {
  display: flex;
  justify-content: center; /* 全体を中央寄せ */
  align-items: center;
}
.toolbar .tab-link {
  flex: 1; /* 均等幅にする */
  text-align: center; /* アイコン＋文字を中央 */
  white-space: nowrap; /* 折り返ししない */
}
.toolbar .tab-link .icon, .toolbar .tab-link .tabbar-label {
  display: block; /* 上下に配置 */
}
.icon {
  font-size: 22px;
  margin-bottom: 5px;
}
.tabbar-label {
  font-size: 10px;
  font-weight: 100;
}
/*プッシュ通知*/
.push_st {
  display: none;
}
@media screen and (max-width:1024px) {
  .push_st {
    display: block;
  }
}
.link-banner {
  border-radius: 4px;
  padding: 4px;
  width: 100%;
  /* ★ 横並びにする */
  display: flex;
  align-items: center;
  gap: 15px; /* アイコンと文字の間 */
  text-decoration: none;
  color: #FFFFFF;
  background-image: -webkit-linear-gradient(0deg, rgba(255, 142, 0, 1.00) 0%, rgba(255, 74, 0, 1.00) 100%);
  background-image: -moz-linear-gradient(0deg, rgba(255, 142, 0, 1.00) 0%, rgba(255, 74, 0, 1.00) 100%);
  background-image: -o-linear-gradient(0deg, rgba(255, 142, 0, 1.00) 0%, rgba(255, 74, 0, 1.00) 100%);
  background-image: linear-gradient(90deg, rgba(255, 142, 0, 1.00) 0%, rgba(255, 74, 0, 1.00) 100%);
}
.link-banner i {
  font-size: 35px; /* アイコンサイズ */
  flex-shrink: 0; /* アイコンが縮まず固定 */
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
}
.link-banner-text {
  display: flex;
  flex-direction: column; /* ★ 縦に2行へ */
  line-height: 1.2;
  text-align: center;
  padding-right: 10px;
}
.link-banner-title {
  font-size: 14px;
  font-weight: bold;
}
.link-banner-subtitle {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}
/* ----------------------------------------------
   ★ プッシュ通知 左 / 文 右 の横並び
------------------------------------------------ */
.detailed-list {
  width: 700px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  padding-bottom: 40px;
}
@media screen and (max-width:1024px) {
  .detailed-list {
    width: 100%;
    padding-bottom: 0px;
  }
}
/* -----------------------------------------
   ★ PUSHニュース：タイトル左 / もっと見る右
----------------------------------------- */
.detailed-list .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.detailed-list .section-title .m_link {
  font-size: 14px;
  font-weight: normal;
  color: #007aff;
  text-decoration: none;
}
.detailed-list .section-title .m_link:hover {
  text-decoration: underline;
}
.detailed-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detailed-list li {
  padding: 10px 0;
  border-bottom: 1px solid hsla(0, 0%, 87%, 0.24);
}
.detailed-list .item-link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  gap: 12px;
}
/* ----------------------------------------------
   ★ 左画像：絶対縮ませへん！
------------------------------------------------ */
.detailed-list .item-media {
  flex-shrink: 0; /* ←画像を守る最重要ポイント！ */
}
.detailed-list .item-media img.event-thumbnail {
  width: 90px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
/* ----------------------------------------------
   ★ 右側テキスト部分（切り詰め担当）
------------------------------------------------ */
.detailed-list .item-inner {
  flex: 1;
  min-width: 0; /* ←テキストが省略されるために必須！ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* タイトル（1行） */
.detailed-list .item-name {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 本文（2行で省略） */
.detailed-list .item-footer {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ----------------------------------------------
   ★ 右端の NEW バッジ
------------------------------------------------ */
.detailed-list .item-after {
  margin-left: auto;
  padding-left: 5px;
}
.badge.new_bg {
  background-color: #ff0000;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
}
/*ログイン*/
.login {
  color: hsla(0, 0%, 100%, 1.00);
  border-radius: 3px;
  border: 1px solid hsla(0, 0%, 100%, 1.00);
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  font-size: 0.9em;
}
@media screen and (max-width:1024px) {
  .login {
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    font-size: 0.7em;
  }
}
/* カードを基準にバブルを置く */
.iq-card {
	/*position: relative;*/
	overflow: visible;
	position: relative;
	display: block;
}
.bubble {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 43px;
	margin: 0 auto;
	transform: translateY(40px); /* ← Yだけ動かす */
	max-width: 90%;
	background: rgba(0, 0, 0, 0.40);
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 9px;
	color: white;
	line-height: 1.8;
	pointer-events: none;
	white-space: normal;
	word-break: break-word;
	z-index: 10;
	opacity: 0;
	text-align: left;
}
@media screen and (max-width:1024px) {
  .bubble {
    left: 0;
    right: 0;
    bottom: 43px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: 8px;
    line-height: 1.3;
  }
}
/* バネアニメ（位置が変わったのでそのままでOK） */
.bubble.show {
  animation: popSpring 0.55s cubic-bezier(.25, 1.35, .45, 1.0) forwards;
}
/* 修正後（Yだけ） */
@keyframes popSpring {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  35% {
    opacity: 1;
    transform: translateY(-11px);
  }
  60% {
    transform: translateY(4px);
  }
  80% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* -----------------------------------
   モーダル背景
----------------------------------- */
/* ============================
   モーダルの最前面強制レイヤー
=============================== */
.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  z-index: 1000;
  overflow: auto;
  /* ベースの黒紺・透明寄り */
  background-color: rgba(5, 10, 25, 0.4);
  /* 1：白ドット（星）
   2：黒→紺のグラデーション */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px), linear-gradient(180deg, rgba(5, 8, 20, 1.0) 0%, /* ← 上：黒に近い紺 */ rgba(10, 20, 50, 0.9) 40%, /* ← 中：深い紺 */ rgba(20, 35, 70, 0.8) 100% /* ← 下：少し明るい紺 */
    );
  /* ドット間隔 */
  background-size:
    12px 12px, /* ← ドットの間隔 */ 100% 100%;
  /* 配置 */
  background-position:
    0 0, 0 0;
}
/* -----------------------------------
   モーダル本体
----------------------------------- */
.modal-box {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* X も Y も中央に */
  width: 90%; /* ← 100% は絶対アカン */
  max-width: 500px;
}
.icon_main_box {
  text-align: center;
  background-color: hsla(359, 100%, 49%, 1.00);
  width: 100%;
  height: 50px;
}
/* -----------------------------------
   戻るボタン（×）
----------------------------------- */
.back_btn {
  text-align: left;
  position: fixed;
  z-index: 9999999 !important;
  top: 10px;
  left: 10px;
  right: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: hsla(0, 0%, 100%, 1.00);
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
}
/* -----------------------------------
   名前
----------------------------------- */
.modal-box .user_name {
  text-align: center;
}
.modal-box .user_name h3 {
  color: hsla(0, 0%, 100%, 0.63);
  margin: 0;
  padding-top: 15px;
  font-size: 0.7em;
  font-weight: 200;
}
.modal-box .user_name h2 {
  color: hsla(0, 0%, 100%, 1.00);
  margin: 0;
  padding: 0;
  font-size: 1.5em;
}
/* -----------------------------------
   アイコン周り
----------------------------------- */
.modal-box .icon-wrap {
  margin-top: 90px;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.modal-box .icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.modal-box .icon-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  animation: breathe 4s ease-in-out infinite;
  transform-origin: center center;
  z-index: 2;
  overflow: visible;
}
/* -----------------------------------
   バッチ（左上）
----------------------------------- */
.modal-box .icon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央基準へ */
  width: 120px;
  height: 120px;
  pointer-events: none;
}
.modal-box .icon-badge .f7-icons {
  width: 10px;
  height: 10px;
  font-size: 18px;
}
/* -----------------------------------
   メッセージ枠
----------------------------------- */
.modal-box .message-box {
  background: white;
  width: 90%;
  box-sizing: border-box;
  padding: 22px 5%;
  margin-top: 20px;
  border-radius: 16px;
  text-align: left;
  line-height: 1.7;
  font-size: 15px;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
}
.modal-box .name {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
}
.modal-box .more {
  color: #555555;
  font-size: 14px;
}
/* -----------------------------------
   アイコン呼吸アニメ
----------------------------------- */
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.03);
  }
  50% {
    transform: scale(0.98);
  }
  75% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
/* -----------------------------------
   粒子
----------------------------------- */
.modal-box .particle-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.modal-box .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.87);
  opacity: 1;
}
/* -----------------------------------
   マスク回転
----------------------------------- */
#mask-rotator {
  transform-origin: center;
  transform-box: fill-box;
  animation: maskSpin 14s linear infinite;
}
@keyframes maskSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@supports (-webkit-touch-callout: none) {
  /* iphone・iPad Safariだけ適用 */
  .icon-circle {
    -webkit-mask: none !important;
    mask: none !important;
  }
  .icon-circle img {
    -webkit-mask: none !important;
    mask: none !important;
    border-radius: 50%; /* 丸だけ維持するなら */
  }
}
/* -----------------------------------
   応援ボタン（アイコン下）
----------------------------------- */
.modal-box .support-btn {
  margin-top: 18px;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 0;
  background-color: #FF8E00;
  color: #FFFFFF;
  text-align: center;
  border-radius: 26px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
/* 応援ボタン：無効時 */
.support-btn.disabled {
  background: #999;
  color: #fff;
  opacity: 0.7;
  pointer-events: none;
}
/* ぼよよんアニメ */
@keyframes boyoyon {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  60% {
    transform: scale(0.90);
  }
  100% {
    transform: scale(1);
  }
}
.heart {
  position: fixed;
  font-size: 20px;
  color: #ff3366;
  pointer-events: none;
  z-index: 999999;
}
/* -----------------------------------
   固定フッターボタン
----------------------------------- */
/* モーダル時にボタンを最前面に */
.modal-footer-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 400px;
  background-color: #FF0079;
  padding: 18px 0;
  text-align: center;
  font-size: 14px;
  border-radius: 6px;
  color: #FFFFFF;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  z-index: 999999; /* モーダル内で最強 */
}
.modal-footer-btn i {
  font-size: 20px;
}
.jacket-full-wrap {
  width: 90%;
  max-width: 480px;
  margin: 20px auto 120px auto; /* ここを大きく！100〜140px */
}
.jacket-full-wrap img {
  width: 100%;
  border-radius: 14px;
  display: block;
}
/* -------------------------------
   ★ モーダル本体の位置調整
   完全に中央固定ではなく “上から自然に配置” に直す
-------------------------------- */
.modal-bg .modal-box {
  position: relative !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 40px !important; /* ← これが大事！中央固定だとズレる */
  width: 90% !important;
  max-width: 500px !important;
}
/* -------------------------------
   ★ アイコン周りの正しい中心合わせ
-------------------------------- */
.modal-box .icon-wrap {
  position: relative !important;
  width: 120px !important;
  height: 120px !important;
  margin: 70px auto 0 auto !important;
  display: block !important;
}
/* PNGマスク＆粒子＆バッジを
   “アイコン円の中心” に完全揃え直し */
/* ← アイコン本体はアニメさせるので !important 使わない */
.modal-box .icon-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  animation: breathe 4s ease-in-out infinite;
  overflow: visible;
}
/* 粒子とバッジだけ !important でガチ固定 */
.modal-box .particle-layer, .modal-box .icon-badge {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
@keyframes breathe {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.03);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
/* アイコン本体（マスク） */
.modal-box .icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* -------------------------------
   ★ バッジの位置だけ個別補正
-------------------------------- */
.modal-box .icon-badge i {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 11000;
}
/* -------------------------------
   ★ モーダル背景の余白が足りずに
     グラデが潰れる問題の修正
-------------------------------- */
.modal-bg {
  padding-bottom: 120px; /* 下のボタンが埋もれないように余白追加 */
}
.m_come {
	color: hsla(0, 0%, 0%, 1.00);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 10px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
@media screen and (max-width:1024px) {
.m_come {
	width: 85%;
}
}
.m_pro1 {
  color: hsla(0, 0%, 100%, 0.95);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 16px;
  line-height: 1.7;
  white-space: pre-line;
  word-break: break-word;
  text-align: left;
}
.m_pro2 {
  display: none !important;
}

/* ==================================================
   Unispi Netflix Style Rows（完全IDスコープ）
================================================== */
#unispi-netflix{
	padding:40px 0;
}

/* 行 */
#unispi-netflix .unispi-row{
	margin-bottom:50px;
}
@media screen and (max-width:1024px) {
#unispi-netflix .unispi-row{
	margin-bottom:15px;
}
}

/* Splide */
#unispi-netflix .unispi-splide .splide__slide{
	width:220px;
}

/* カード */
#unispi-netflix .unispi-card{
	position:relative;
	width:100%;
	aspect-ratio:1/1.45;
	border-radius:6px;
	overflow:hidden;
	background:#333;
	cursor:pointer;
}

/* 画像 */
#unispi-netflix .unispi-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
}

/* 名前 */
#unispi-netflix .unispi-name-box{
	position:absolute;
	left:10px;
	bottom:6px;
	z-index:2;
	color:#fff;
	text-align:left;
}

#unispi-netflix .unispi-name-box .name-sub{
	display:none;
}

#unispi-netflix .unispi-name-box .name{
	font-size:12px;
	font-weight:500;
	color:#fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 768px) {
  #unispi-netflix .unispi-name-box .name{
    font-size:13px;
  }
}

/* グラデーション */
#unispi-netflix .unispi-card::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:65%;
	background:linear-gradient(
		to top,
		rgba(0,0,0,.75) 0%,
		rgba(0,0,0,.55) 30%,
		rgba(0,0,0,.25) 55%,
		rgba(0,0,0,0) 80%
	);
	z-index:1;
	pointer-events:none;
}

/* ==================================================
   Unispi Modal（画面上下固定・完成形）
================================================== */
#unispi-netflix .unispi-modal{
	position:fixed;
	inset:0;
	z-index:99999;

	background:rgba(0,0,0,.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	opacity:0;
	pointer-events:none;
	transition: opacity .45s cubic-bezier(.22,1,.36,1);
}

/* ドット背景 */
#unispi-netflix .unispi-modal::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background-image:
		radial-gradient(
			rgba(255,255,255,0.08) 1px,
			transparent 1px
		);
	background-size:8px 8px;
	pointer-events:none;
}

/* 表示 */
#unispi-netflix .unispi-modal.show{
	opacity:1;
	pointer-events:auto;
}

/* ==================================================
   モーダル構造
================================================== */
#unispi-netflix .unispi-modal-shell{
	position:relative;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

/* ヘッダー */
#unispi-netflix .unispi-modal-header{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:12px 16px;
	color:#fff;
	background:rgba(0,0,0,.65);
}

#unispi-netflix .unispi-modal-title{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

#unispi-netflix .unispi-modal-close{
	width: 50px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-align: left;
}

/* ==================================================
   中央スクロール領域
================================================== */
#unispi-netflix .unispi-modal-scroll{
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	height:100vh;
	padding:0 20px;
}

/* PC */
@media (min-width:769px){
	#unispi-netflix .unispi-modal-scroll{
		max-height:100%;
		padding-bottom:200px;
	}
}

/* SP */
@media (max-width:768px){
	#unispi-netflix .unispi-modal-scroll{
		max-height:100%;
		padding-bottom:270px;
	}
}

/* ==================================================
   フッター固定
================================================== */
#unispi-netflix .unispi-modal-footer{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 14px 16px;
	width: 100%;
}

/*iphoneのみ*/
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	#unispi-netflix .unispi-modal-footer{
		bottom: 100px;
	}
}
/*ホームアイコンのみ*/
@media (display-mode: standalone) {
	#unispi-netflix .unispi-modal-footer{
		bottom: env(safe-area-inset-bottom);
		bottom: 160px;
	}
}

#unispi-netflix .unispi-modal-inner{
/*	transform: translate(-50%,-50%);*/
}
#unispi-netflix .unispi-modal-btn{
	display:block;
	width:100%;
	max-width:400px;
	margin:0 auto;
	padding:14px 0;

	border-radius:8px;
	background:linear-gradient(135deg,#ff8a00,#ffb347);
	color:#000;
	font-weight:700;
	text-align:center;
	text-decoration:none;
}

@media (max-width:768px){
	#unispi-netflix .unispi-modal-btn{
		max-width:100%;
	}
}

/* ==================================================
   Modal Mock UI
================================================== */
#unispi-netflix .unispi-modal-icon-wrap{
	text-align:center;
	position: relative;
	width: 120px;
	height: 120px;
	margin: -26px auto 12px;
}


#unispi-netflix .unispi-modal-icon{
	position:absolute;
	left:50%;
	top:50%;
	width:100px;
	height:100px;
	border-radius:50%;
	transform: translate(-50%, -50%) scale(1);
    margin:0 auto;
	overflow:hidden;
	background:#222;
	/* ★ これが足りてなかった */
	transition: transform 620ms cubic-bezier(.22,1,.36,1);

	will-change: transform;
	backface-visibility: hidden;
	transform-origin: center center;
	z-index: 2;
}

#unispi-netflix .unispi-modal-icon img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius: 50%;
}

#unispi-netflix .unispi-modal-info{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	text-align:center;
	margin-top: 8px;
}
#unispi-netflix .unispi-modal-prefecture{
	border:1px solid rgba(255,255,255,0.8);
	padding:2px 10px;
	border-radius: 999px;
	color:#fff;
	font-size: 10px;
	background: rgba(0,0,0,0.45);
	letter-spacing:0.4px;
	display:none;
}
#unispi-netflix .unispi-modal-role{
	margin-top: 9px;
	text-align: center;
	font-size: 10px;
	color: hsla(0,0%,100%,0.79);
}

#unispi-netflix .unispi-modal-user-name{
	margin-top: -4px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: hsla(0,0%,100%,1.00);
}

#unispi-netflix .icon-badge{
	position:absolute;
	left:20px;
	top:10px;
	z-index: 999;
	width: 52px;
	height: 52px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgba(255,255,255,0.18);
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
#unispi-netflix .icon-badge i{
	font-size: 20px;	
}

#unispi-netflix .icon-badge .primium-product,
#unispi-netflix .icon-badge img,
#unispi-netflix .icon-badge svg{
	width: 30px;
	height: 30px;
	display:block;
}
/* リスペクト */
#unispi-netflix .unispi-modal-respect{
	margin: 10px auto 0;
	width: 150px;
	padding-top: 8px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 8px;
	border-radius: 20px;
	background: #ff6b81;
	color: #fff;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	font-size: 12px;
}
#unispi-netflix .unispi-modal-respect i{
	font-size: 12px;
}
/* リスペクト済み */
#unispi-netflix .unispi-modal-respect.done{
	background:#999;
	color:#eee;
	cursor:default;
	pointer-events:none;
	box-shadow:none;
	opacity:.8;
}
@media screen and (max-width:1024px) {
	/* リスペクト */
#unispi-netflix .unispi-modal-respect{
	width: 120px;
	padding-top: 6px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 6px;
	font-size: 11px;
}
#unispi-netflix .unispi-modal-respect i{
	font-size: 11px;
}
}

#unispi-netflix .unispi-modal-text{
	font-size: 16px;
	text-align: center;
	font-weight: 700;
	margin-top: 30px;
	margin-bottom: 50px;
	color: hsla(0,0%,100%,1.00);
}

#unispi-netflix .m_come{font-size: 16px;
	text-align: center;
	font-weight: 700;
	margin-top: 50px;
	margin-bottom: 50px;
	color: hsla(0,0%,100%,1.00);}
#unispi-netflix .m_pr{
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	font-weight: 500;
	margin: 20px auto;
	width: 500px;
	max-width: 85%;
	color: hsla(0,0%,100%,1.00);
	background: rgba(0,0,0,0.6);
	padding: 36px 34px;
	border-radius: 8px;
	box-sizing: border-box;
}
@media (max-width: 768px) {
  #unispi-netflix .m_pr{
    width: 85%;
  }
}
#unispi-netflix .m_pro1{
	margin: 20px auto;
	max-width: 420px;
	font-size: 12px;
	opacity: .9;
	color: hsla(0,0%,100%,1.00);
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.74);
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	border-radius: 4px;
	text-align: left;
}
#unispi-netflix .m_pro2{
	margin: 20px auto;
	max-width: 420px;
	font-size: 12px;
	opacity: .9;
	color: hsla(0,0%,100%,1.00);
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.74);
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	border-radius: 4px;
	text-align: left;
}
*#unispi-netflix .unispi-modal-profile{
	margin: 20px auto;
	max-width: 420px;
	font-size: 12px;
	opacity: .9;
	color: hsla(0,0%,100%,1.00);
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.74);
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	border-radius: 4px;
}
#unispi-netflix .unispi-modal-profile a{
	color: hsla(334,100%,50%,1.00);
}


#unispi-netflix .unispi-modal-jacket{
	margin-top:24px;
	text-align:center;
}

#unispi-netflix .unispi-modal-jacket img{
	width:100%;
	max-width:420px;
	border-radius:8px;
}
/* ==================================================
   Unispi Modal ぽよよん確定版
================================================== */

/* 背景フェード */
#unispi-netflix .unispi-modal{
	position:fixed;
	inset:0;
	z-index:99999;
	background:rgba(0,0,0,.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	opacity:0;
	pointer-events:none;
	transition: opacity 260ms ease;
}

/* 表示 */
#unispi-netflix .unispi-modal.show{
	opacity:1;
	pointer-events:auto;
}

/* ==================================================
   シェル（主役のぽよよん）
================================================== */
#unispi-netflix .unispi-modal-shell{
	position:relative;
	min-height:100vh;
	display:flex;
	flex-direction:column;

	/* 初期（閉じ） */
	transform: translateY(40px) scale(0.86);
	opacity:0;

	transition:
		transform 680ms cubic-bezier(.16, 1.4, .3, 1),
		opacity 260ms ease;

	will-change: transform, opacity;
}

/* 開くとき */
#unispi-netflix .unispi-modal.show .unispi-modal-shell{
	transform: translateY(0) scale(1);
	opacity:1;
}

/* ==================================================
   中身（遅れて付いてくる）
================================================== */
#unispi-netflix .unispi-modal-scroll{
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(24px) scale(0.96);
	opacity: 0;
	transition: transform 760ms cubic-bezier(.16, 1.4, .3, 1),
		opacity 360ms ease;
	will-change: transform, opacity;
	padding-top: 100px;
}

/* 表示時 */
#unispi-netflix .unispi-modal.show .unispi-modal-scroll{
	transform: translateY(0) scale(1);
	opacity:1;
}

/* ===============================
   パーティクルレイヤー
================================ */
.unispi-modal-particle-layer{
	position:absolute;
	left:0;
	top:0;
	width:120px;
	height:120px;
	pointer-events:none;
	z-index:1;
}

.unispi-particle{
	position:absolute;
	border-radius:50%;
	background: rgba(255,255,255,0.85);
	box-shadow: 0 0 8px rgba(255,255,255,0.9);
}

/* ===========================================
   Slide Menu (Fixed Style)
   =========================================== */
.ul-menu-wrap {
  position: relative;
  padding: 10px 0;
  background: linear-gradient(135deg, #e6fbfb 0%, #d2f7f3 100%);
  overflow: hidden;
  z-index: 5;
}
.ul-menu-rail {
  position: relative;
  overflow: hidden;
}
.ul-menu-list {
  display: flex;
  gap: 10px;
  padding: 0 24px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
}
.ul-menu-list.is-dragging {
  cursor: grabbing;
}
.ul-menu-list::-webkit-scrollbar {
  display: none;
}
.ul-menu-item {
  display: flex;
  align-items: center;
  padding: 0px 0;
}
.ul-menu-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 123, 126, 0.25);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #f5fffe;
  color: #0a6d70;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.ul-menu-btn.is-active {
  background: #10b7b2;
  color: #fff;
  border-color: #10b7b2;
  box-shadow: 0 10px 20px rgba(16, 183, 178, 0.3);
}
@media (max-width: 768px) {
  .ul-menu-btn {
    font-size: 12px;
    padding: 9px 14px;
  }
}


@media (min-width: 1024px) {
  #header-menu {
    display: none !important;
  }
}

.user-cate-wrap {
  margin: 0px 0 0px;
}
.user-cate-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.user-cate-scroll::-webkit-scrollbar {
  display: none;
}
.user-cate-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.25s ease;
}
.user-cate-pill.is-active {
  background: linear-gradient(135deg, #0dd5cf, #10b7b2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 20px rgba(16, 183, 178, 0.35);
}
.user-cate-pill:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.user-zero-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.user-list-banner {
  justify-content: center;
  margin-top: -30px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}

.japan_map_box,
.japan-map-box {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 12px 30px;
  overflow: hidden;
  width: 600px;
  margin: 0 auto 50px;
}
.japan_map_box .kaigai,
.japan-map-box .kaigai {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
}
.japan_map_box .kaigai a,
.japan-map-box .kaigai a {
  background: #6e6cd8;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}
ul.jp_map {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding-top: 84%;
}
ul.jp_map a {
  color: #ffffff;
  text-decoration: none;
}
.jp_map li a {
  box-sizing: border-box;
  width: 7%;
  height: 10%;
  border: solid #ffffff 2px;
  padding: 7px 0;
  float: none;
  font-size: 0.7em;
  margin: 0;
  border-radius: 6px;
  text-align: center;
  position: absolute;
}
@media screen and (max-width: 1024px) {
  .jp_map li a {
    font-size: 0.3em;
  }
}
@media screen and (max-width: 768px) {
  .japan_map_box,
  .japan-map-box {
    width: 100%;
    margin-bottom: 50px;
  }
}
.jp_map li:nth-child(1) a { top: 0; left: 85%; width: 15%; background-color: #7f7eda; }
.jp_map li:nth-child(2) a { top: 11%; left: 85%; width: 14%; height: 5.5%; background-color: #759ef4; }
.jp_map li:nth-child(3) a { top: 16.5%; left: 92%; background-color: #759ef4; }
.jp_map li:nth-child(4) a { top: 26.5%; left: 92%; background-color: #759ef4; }
.jp_map li:nth-child(5) a { top: 16.5%; left: 85%; background-color: #759ef4; }
.jp_map li:nth-child(6) a { top: 26.5%; left: 85%; background-color: #759ef4; }
.jp_map li:nth-child(7) a { top: 36.5%; left: 92%; background-color: #759ef4; }
.jp_map li:nth-child(8) a { top: 36.5%; left: 85%; background-color: #759ef4; }
.jp_map li:nth-child(9) a { top: 46.5%; left: 92%; background-color: #759ef4; }
.jp_map li:nth-child(10) a { top: 46.5%; left: 85%; background-color: #759ef4; }
.jp_map li:nth-child(11) a { top: 36.5%; left: 78%; background-color: #5ad1d1; }
.jp_map li:nth-child(12) a { top: 46.5%; left: 78%; background-color: #5ad1d1; }
.jp_map li:nth-child(13) a { top: 56.5%; left: 78%; background-color: #5ad1d1; }
.jp_map li:nth-child(14) a { top: 56.5%; left: 71%; background-color: #5ad1d1; }
.jp_map li:nth-child(15) a { top: 46.5%; left: 71%; background-color: #5ad1d1; }
.jp_map li:nth-child(16) a { top: 46.5%; left: 64%; background-color: #5ad1d1; }
.jp_map li:nth-child(17) a { top: 56.5%; left: 64%; background-color: #5ad1d1; }
.jp_map li:nth-child(18) a { top: 56.5%; left: 57%; background-color: #5ad1d1; }
.jp_map li:nth-child(19) a { top: 66.5%; left: 57%; background-color: #5ad1d1; }
.jp_map li:nth-child(20) a { top: 66.5%; left: 50%; background-color: #5ad1d1; }
.jp_map li:nth-child(21) a { top: 56.5%; left: 50%; background-color: #5ad1d1; }
.jp_map li:nth-child(22) a { top: 66.5%; left: 43%; background-color: #5ad1d1; }
.jp_map li:nth-child(23) a { top: 56.5%; left: 43%; background-color: #5ad1d1; }
.jp_map li:nth-child(24) a { top: 56.5%; left: 36%; background-color: #5ad1d1; }
.jp_map li:nth-child(25) a { top: 66.5%; left: 36%; background-color: #20b9b9; }
.jp_map li:nth-child(26) a { top: 66.5%; left: 29%; background-color: #20b9b9; }
.jp_map li:nth-child(27) a { top: 66.5%; left: 22%; background-color: #20b9b9; }
.jp_map li:nth-child(28) a { top: 66.5%; left: 15%; background-color: #20b9b9; }
.jp_map li:nth-child(29) a { top: 76.5%; left: 29%; background-color: #20b9b9; }
.jp_map li:nth-child(30) a { top: 76.5%; left: 22%; background-color: #20b9b9; }
.jp_map li:nth-child(31) a { top: 86.5%; left: 29%; background-color: #20b9b9; }
.jp_map li:nth-child(32) a { top: 86.5%; left: 22%; background-color: #20b9b9; }
.jp_map li:nth-child(33) a { top: 86.5%; left: 15%; background-color: #20b9b9; }
.jp_map li:nth-child(34) a { top: 86.5%; left: 8%; background-color: #20b9b9; }
.jp_map li:nth-child(35) a { top: 86.5%; left: 1%; background-color: #20b9b9; }
.jp_map li:nth-child(36) a { top: 66.5%; left: 8%; background-color: #20b9b9; }
.jp_map li:nth-child(37) a { top: 76.5%; left: 8%; background-color: #20b9b9; }
.jp_map li:nth-child(38) a { top: 76.5%; left: 1%; background-color: #20b9b9; }
.jp_map li:nth-child(39) a { top: 86.5%; left: 1%; background-color: #20b9b9; }
.jp_map li:nth-child(40) a { top: 66.5%; left: 1%; background-color: #0aa3a3; }
.jp_map li:nth-child(41) a { top: 76.5%; left: 1%; background-color: #0aa3a3; }
.jp_map li:nth-child(42) a { top: 86.5%; left: 1%; background-color: #0aa3a3; }
.jp_map li:nth-child(43) a { top: 76.5%; left: 8%; background-color: #0aa3a3; }
.jp_map li:nth-child(44) a { top: 76.5%; left: 15%; background-color: #0aa3a3; }
.jp_map li:nth-child(45) a { top: 86.5%; left: 15%; background-color: #0aa3a3; }
.jp_map li:nth-child(46) a { top: 86.5%; left: 22%; background-color: #0aa3a3; }
.jp_map li:nth-child(47) a { top: 96.5%; left: 22%; background-color: #0aa3a3; }

.user-list-banner .top_img_pbox {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 4px;
}
.user-list-banner .bana_card {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.05);
}
.user-list-banner .bana_card .img_bana img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
@media (min-width: 769px) {
  .user-list-banner .top_img_pbox {
    max-width: 450px;
  }
}
@media (max-width: 768px) {
  .user-list-banner .top_img_pbox {
    max-width: 100%;
    padding-top: 40px;
  }
}

@media screen and (max-width:1024px){
  .user-list-banner {
    padding: 10px;
  margin-top: -40px!important;
  margin-bottom: 15px;
}
}

/* ===========================================
   News List (Yahoo-like)
   =========================================== */
.news-list {
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  width: min(820px, calc(100% - 24px));
  margin: 0 auto;
}
.news-item {
  border-bottom: 1px solid #eee;
  padding: 14px 16px;
}
.news-item:last-child {
  border-bottom: 0;
}
.news-item-compact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.news-thumb {
  width: 78px;
  height: 78px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.news-body {
  flex: 1 1 auto;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.news-title {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  margin: 0 0 3px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.news-source {
  font-size: 12px;
  color: #666;
}
.news-date {
  font-size: 10px;
  color: #c9c9c9;
  text-align: right;
  white-space: nowrap;
}
.news-item-wide {
  padding: 0 0 16px 0;
}
.news-wide-image {
  width: 100%;
  height: 190px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
}
.news-wide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.news-wide-body {
  padding: 0 16px;
}
.news-wide-body .news-title {
  font-size: 18px;
  margin-bottom: 8px;
}
.news-wide-body .news-meta {
  justify-content: flex-start;
  gap: 12px;
}

/* ===========================================
   News Article (Detail)
   =========================================== */
.news-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  background: #fff;
}
.news-article-title {
  font-size: 40px;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  margin: 6px 0 8px;
  color: #222;
}
.news-article-source {
  font-size: 12px;
  color: #8c8c8c;
}
.news-article-meta {
  font-size: 11px;
  color: #b9b9b9;
  text-align: left;
}
.news-article-hero,
.news-article-figure {
  margin: 16px 0;
}
.news-article-hero img,
.news-article-figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.news-article-hero figcaption,
.news-article-figure figcaption {
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 6px;
}
.news-article-body {
  font-size: 17px;
  line-height: 1.9;
  color: #3c3c3c;
}
.news-article-body p {
  margin: 0 0 50px;
}
.news-article-heading {
  font-size: 30px;
  font-weight: 700;
  margin: 18px 0 10px;
  padding-left: 10px;
  border-left: 4px solid #d6d6d6;
  color: #222;
  font-family: 'M PLUS 1p', sans-serif;
}
@media (max-width: 768px) {
  .news-article-title {
    font-size: 25px;
    line-height: 1.3;
  }
  .news-article-body {
    font-size: 16px;
  }
  .news-article-heading {
    font-size: 23px;
  }
}

/* マスク適用 */
.unispi-modal-icon.is-masked{
	mask: url(#unispiMask);
	-webkit-mask: url(#unispiMask);
	mask-type: luminance;
	-webkit-mask-type: luminance;
}

/* マスク回転（CSSだけ） */
#unispi-mask-rotator{
	transform-origin: center;
	transform-box: fill-box;
	animation: unispiMaskSpin 18s linear infinite;
}
@supports (-webkit-touch-callout: none) {
  /* iphone・iPad Safariだけ適用 */
  .unispi-modal-icon.is-masked {
    -webkit-mask: none !important;
    mask: none !important;
  }
  #unispi-mask-rotator{
    -webkit-mask: none !important;
    mask: none !important;
    border-radius: 50%; /* 丸だけ維持するなら */
  }
}
@keyframes unispiMaskSpin{
	from{ transform: rotate(0deg); }
	to  { transform: rotate(360deg); }
}
.unispi-heart{
  position: fixed;
  z-index: 200000;
  pointer-events: none;
}
.unispi-modal-bg{
	position:absolute;
	inset:0;
	z-index:0;
}
.unispi-modal-shell{
	position:relative;
	z-index:1;
}
/* ===============================
   ぽよよん OPEN
=============================== */
.unispi-modal.poyon-open .unispi-modal-shell{
	animation: unispiPoyonOpen 0.42s cubic-bezier(.34,1.56,.64,1);
}

@keyframes unispiPoyonOpen{
	0%{
		transform: scale(0.86);
	}
	60%{
		transform: scale(1.06);
	}
	100%{
		transform: scale(1);
	}
}
/* ===============================
   ぽよよん CLOSE
=============================== */
.unispi-modal.poyon-close .unispi-modal-shell{
	animation: unispiPoyonClose 0.32s cubic-bezier(.4,0,.6,1);
}

@keyframes unispiPoyonClose{
	0%{
		transform: scale(1);
		opacity:1;
	}
	100%{
		transform: scale(0.88);
		opacity:0;
	}
}
.unispi-modal-btn.poyon-jump{
	animation: unispiTripleBounce 0.28s cubic-bezier(.25,1.2,.4,1);
	will-change: transform;
}

@keyframes unispiTripleBounce{
	0%   { transform: scale(1); }

	30%  { transform: scale(1.12); }
	45%  { transform: scale(0.98); }

	65%  { transform: scale(1.07); }
	78%  { transform: scale(0.99); }

	90%  { transform: scale(1.03); }
	100% { transform: scale(1); }
}
/* ハート（既にあれば不要） */
.unispi-heart{
	position: fixed;
	z-index: 999999;
	font-size: 22px;
	color: #FF008E;
	pointer-events: none;
	user-select: none;
}

.unispi-card{
  position: relative;
}

.rank-no{
	position: absolute;
	top: 1%;
	left: 3%;
	transform: translateX(-50%);
	z-index: 100;
	font-size: 60px;
	font-weight: 900;
	color: rgba(162,162,162,0.92);
	/* ★ 薄くて立体感のある影 */
	text-shadow: 0 2px 6px rgba(0,0,0,0.45),
		0 0 12px rgba(0,0,0,0.35);
	padding: 6px 12px;
	pointer-events: none;
}
.rank-gold{
	color: #ffd700;
	text-shadow:
		0 2px 6px rgba(0,0,0,0.6),
		0 0 18px rgba(255,215,0,0.9);
}
.rank-silver{
	color: #e5e5e5;
	text-shadow:
		0 2px 6px rgba(0,0,0,0.6),
		0 0 16px rgba(220,220,220,0.8);
}
.rank-bronze{
	color: #cd7f32;
	text-shadow:
		0 2px 6px rgba(0,0,0,0.6),
		0 0 16px rgba(205,127,50,0.8);
}
.unispi-name-box{
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.unispi-name-meta{
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-start;
  text-align: left;
}
.unispi-ken-chip{
  background: #000;
  color: #fff;
  padding: 2px 6px;
  font-size: 5px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  box-sizing: border-box;
  margin-right: 2px;
}
.unispi-role-text{
  font-size: 9px;
  color: #d4d4d4;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.top_menu {
	text-align: center;
	margin-bottom: 0px;
	margin-top: 40px;
}
.top_menu .menu_box {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  width: 550px;
  color: rgb(0, 0, 0);
  font-size: 1em;
  /* ★ 背景ロゴ調整ここから ★ */
  background-image: url(../../images/bg/logo_bg.svg);
  background-repeat: no-repeat; /* 繰り返さん */
  background-position: right center; /* 右端に配置 */
  background-size: 25% auto; /* 横方向を2倍に拡大 */
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width:1024px) {
  .top_menu .menu_box {
	  font-size: 0.8em;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 25% auto;
  }
}
.top_menu .numu {
  font-size: 3em;
  font-weight: 800;
  color: rgb(0, 162, 255);
}
.top_menu .numu span {
  font-size: 0.4em;
  color: rgb(0, 50, 79);
}
.top_menu .mini {
  font-size: 0.6em;
  color: rgb(57, 57, 57);
}
.top_chosetu{
  margin-top: 100px;
}
@media screen and (max-width:1024px) {
  .top_chosetu{
  margin-top: 40px;
}
  .top_menu {
  margin-bottom: 0px;
	margin-top: 10px;
  }
  .top_menu .mini {
  font-size: 0.5em;
}
}

/* header sticky 共通 */
header.header-sticky,
header .header-sticky {
  /* 透明＋右から青寄りターコイズ */
  background: linear-gradient(
    to left,
    rgba(70, 200, 235, 0.6),  /* 明るい青寄りターコイズ */
        rgba(0, 140, 190, 0.6)   /* 青強めターコイズ */
  );

  /* 下の要素をぼかす */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* ほんのり青グロー */
  box-shadow: 0 4px 24px rgba(70, 200, 235, 0.45);
}
.non_user_title h2{
margin-bottom: 50px;
font-size: 22px;
margin-bottom: 50px;
color: hsl(0, 0%, 28%);
font-weight: 700;
}

.non_user_title h3{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 40px;
  color: hsl(0, 0%, 44%);margin-bottom: 50px;
}

.non_user_title a{
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3em;
  color: hsl(0, 0%, 100%);
    margin-top: 50px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-color: #e79a00;
    border-radius: 369px;
}

.tesu{
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3em;
  color: hsla(359,100%,50%,0.62);
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background-color: #FF0004;
    border-radius: 10px;
    border: 1px solid #ACACAC;
    background-image: -webkit-linear-gradient(0deg,rgba(255,80,0,1.00) 0%,rgba(171,5,0,1.00) 100%);
    background-image: -moz-linear-gradient(0deg,rgba(255,80,0,1.00) 0%,rgba(171,5,0,1.00) 100%);
    background-image: -o-linear-gradient(0deg,rgba(255,80,0,1.00) 0%,rgba(171,5,0,1.00) 100%);
    background-image: linear-gradient(90deg,rgba(255,80,0,1.00) 0%,rgba(171,5,0,1.00) 100%);
}