@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');
/*調整*/
body{
	background-color: hsla(0,0%,0%,1.00);	
}
#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; /* （必要なら）改行させない */
}

.top_menu{
	text-align: center;
	padding-bottom: 50px;
}
.top_menu .menu_box{
	background-color: hsla(0,0%,0%,0.15);
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 5px;
	width: 550px;
	color: hsla(0,0%,100%,1.00);
	font-size: 0.8em;
	/* ★ 背景ロゴ調整ここから ★ */
	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{
	width: 100%;
    background-repeat: no-repeat; 
    background-position: right center; 
    background-size: 25% auto;
}
}
.top_menu .numu{
	font-size: 3em;
	font-weight: 800;
	color: hsla(41,100%,50%,1.00);
}
.top_menu .numu span{
	font-size: 0.4em;
	color: hsla(0,0%,100%,1.00);
}
.top_menu .mini{
	font-size: 0.4em;
	color: hsla(0,0%,71%,1.00);
}
@media screen and (max-width:1024px) {
	.top_menu{
	padding-bottom: 30px;
}
}

.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(../../images/bg/bg02.png?77902),  /* 中央（これが一番下） */

		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 を上回らない */
}

.ranking-header{
	color: hsla(0,0%,100%,1.00);
	font-size: 2em;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 20px;
	font-weight: 700;
}
@media screen and (max-width:1024px) {
	.top_list_bg{
		margin-top: -30px;
			padding-top: 15px;
	}
	.ranking-header{
	font-size: 0.8em;
	margin-top: 0px;
	padding-top: 30px;
	padding-bottom: 30px;
}
}
/* =======================================================
   ローディングスピナー
   ======================================================= */
.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: 5px;
	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: 5px;
	left: 5px;
	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: 10px;
    z-index: 3;

    /* グラデーション背景（下→上） */
    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: -10px;
    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;
		}	
	}
/* =========================================
   モーダル背景（黒フェード）
========================================= */
/*#user-modal-overlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.35s ease;
  z-index:9000;
}*/

/* =========================================
   モーダル本体
========================================= */
/*#user-modal {
  position: fixed;
  top:50%; left:50%;
  transform: translate(-50%,-50%) scale(0.2);
  width: 86%;
  max-width: 360px;
  background:#fff;
  border-radius: 8px;
  padding:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:
      opacity 0.3s ease,
      transform 0.28s cubic-bezier(.2,1.4,.4,1);
  z-index:9001;
}*/

/* ================================
   ★ モーダル用 PREMIUM バッジ（完全コピー版）
================================ */
/*.modal-primium-product {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    background: #ffcc00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    box-shadow: 0 0 4px rgba(0,0,0,0.25);
}
.modal-primium-product i {
    color: #ffffff; 
    font-size: 9px;
    line-height: 1;
}


@media screen and (max-width:1024px) {
    .modal-primium-product {
        top: 5px;
        left: 5px;
        width: 15px;
        height: 15px;
    }
    .modal-primium-product i {
        font-size: 7px;
    }
}*/

/* =========================================
   ポップイン完了時
========================================= */
/* ★このアニメ削除 */
/*#user-modal.popin-finish {
  animation: none;
}

@keyframes pop-bounce { }

#user-modal.show {
  opacity:1;
  pointer-events:auto;
}

#user-modal-overlay.show {
  opacity:1;
  pointer-events:auto;
}*/

/* ================================
   ★ モーダル外側の下中央に閉じる
================================ */
/*#close-modal-bottom {
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	background-color: rgba(0,0,0,0.25);
	padding: 5px 22px;
	border-radius: 30px;
	opacity: 0;
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 80px;
}

#close-modal-bottom.show {
    opacity: 1;
    pointer-events: auto;
}*/

/* スマホでちょい大きく */
/*@media screen and (max-width:768px){
    #close-modal-bottom {
        font-size: 10px;
        padding: 5px 20px;
    }
}
.user-modal-name{
	color: hsla(0,0%,0%,1.00)!important;	
}
.user-modal-text{
	color: hsla(0,0%,17%,1.00);
	font-size: 14px;
}
.user-modal-photo img {
  width:100%;
  border-radius:4px;
  margin-bottom:10px;
}
.user-modal-name {
  margin:0 0 8px 0;
  font-size:20px;
  font-weight:700;
}
.swiper-slide,
.swiper-slide .iq-card {
    cursor: pointer;
    pointer-events: auto !important;
}
.user-modal-btn-wrap {
    text-align: center;
    margin-top: 18px;
}

.user-modal-btn {
	display: inline-block;
	padding: 10px 22px;
	background-color: #FF007D;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	border-radius: 8px;
	transition: background 0.2s ease, transform 0.15s ease;
}

.user-modal-btn:hover {
	background-color: #DA0000;
	transform: translateY(-1px);
}
@media screen and (max-width:768px) {
    .user-modal-btn {
        padding: 12px 26px;
        font-size: 16px;
    }
}*/


.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;

        /* Swiper より下、数字より下 → ちょうど良い */
        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;    /* はみ出しても見えるように */
}

/* 吹き出しスタイル（カード内） */
/* 吹き出しを最前面へ */
.bubble{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    margin: 0 auto;
    transform: translateY(40px);  /* ← Yだけ動かす */
    max-width: 95%;
    background: rgba(0,0,0,0.40);
    border-radius: 6px;
    padding: 10px 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;
}
	@media screen and (max-width:1024px) {
.bubble{
	left: 0;
	right: 0;
	bottom: 30px;
	border-radius: 4px;
	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-image: linear-gradient(180deg,rgba(255,0,113,1.00) 0%,rgba(255,77,0,1.00) 10.85%,rgba(255,93,0,0.48) 59.55%);
	
	/* =============================
	   ★ グラデ ＋ 透明ドット を重ねる
	   ============================= */
	background-image:
		/* ① 透明の 2px ドットパターン */
		radial-gradient(rgba(255,255,255,0.10) 1px, transparent 2px),
		/* ② 元のグラデーション */
		linear-gradient(
			180deg,
			rgba(255,0,113,1.00) 0%,
			rgba(255,77,0,1.00) 10.85%,
			rgba(255,93,0,0.48) 59.55%
		);

	/* ドットのリピートとサイズ */
	background-size:
		10px 10px,   /* ← ドット間隔（調整OK） */
		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: 100px;
	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;
}
.m_pro1{
	color: hsla(0,0%,18%,1.00);
	font-size: 12px;
	margin-bottom: 10px;
}
.m_pro2{
	color: hsla(0,0%,18%,1.00);
	font-size: 12px;
}