@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #29ce00 #252525;
}




body {
	/* background-color: #000000; */
	/* background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png"); */
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	/* background-image: url(../../../../images/king/dream/dream_bg.png); */
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	color: #eee;
	font-size: 20px;
	line-height: 1.6;
	font-feature-settings: "palt";
	font-family: "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
}

body::before {
	background-image: url("/questions/over/stage/images/stagebg2.png");
	background-image: no-repeat;
	background-position: top center;
	background-size: cover;
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}

.nt {
	font-family: 'Noto Sans JP', 'Roboto', "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial, sans-serif;
}


img {
	vertical-align: bottom;
}

br {
	letter-spacing: 0;
}

@media screen and (min-width: 568px) {
	a:hover {
		opacity: 0.8;
	}

	/* ホバースタイルは横幅が大きなデバイスだけ */
}

a:link {
	text-decoration: none;
	color: #FF2B74;
}

a:visited {
	text-decoration: none;
	color: #FF2B74;
}

a:hover {
	text-decoration: none;
	color: #FF2B74;
}

a:active {
	text-decoration: none;
	color: #FF2B74;
}


/*　head
*********************************************************/

/*　layout
*********************************************************/

#wrapper {
	width: 100%;
	height: auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}

#header2 {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

/*=====================================================
コメント総数自動カウントアップ
=====================================================*/

.comment-counter-wrap {
	text-align: center;
	background-color: #3e0c4b;
	background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png");
	padding: 2%;
}

.comment-counter-title {
	font-size: 20px;
	font-weight: 900;
	color: #A02024;
	margin-bottom: 4px;
	margin-top: 4px;
	opacity: 0.9;
}

.comment-counter-number {
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #ffdf9a;
}

#commentCount {
	display: inline-block;
}

.count-animate {
	animation: countPop 0.8s ease-out;
}

@keyframes countPop {
	from {
		transform: translateY(2px);
		opacity: 0.3;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}


/*=====================================================
ランクゲージ
=====================================================*/
/* ===== セクション全体 ===== */
.rank-section {
	width: 100%;
	padding: 18px 0;
}

/* ===== ランクアイコン列（6分割グリッド） ===== */
.rank-icons {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	align-items: start;
	margin: 8px 0 10px;
	padding: 20px 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.rank-icons::-webkit-scrollbar {
	display: none;
}

/* ===== 各ランクの枠 ===== */
.rank-icon {
	justify-self: stretch;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 0;

	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 14px;

	/* ベースの影 */
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .25),
		0 0 6px rgba(255, 215, 0, 0.12);

	opacity: .75;
	transition: opacity .2s ease, transform .2s ease;

	position: relative;
	overflow: visible;
}

/* ===== 全ランク：ごく弱い常時発光 ===== */
.rank-icon::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 16px;
	pointer-events: none;

	box-shadow:
		0 0 8px rgba(255, 215, 0, 0.18);

	opacity: .6;
}

/* ===== ランク画像 ===== */
.rank-icon img {
	width: clamp(44px, 8vw, 70px);
	height: clamp(44px, 8vw, 70px);
	object-fit: contain;
	display: block;
}

/* ===== 現在ランク：シャドウが鼓動 ===== */
.rank-icon.is-active {
	opacity: 1;
	transform: translateY(-2px);
	animation: rankShadowPulse 1.9s ease-in-out infinite;
}

/* 枠シャドウの鼓動だけ */
@keyframes rankShadowPulse {
	0% {
		box-shadow:
			inset 0 0 0 1px rgba(0, 0, 0, .25),
			0 0 8px rgba(255, 215, 0, 0.35),
			0 0 16px rgba(255, 180, 40, 0.18);
	}

	50% {
		box-shadow:
			inset 0 0 0 1px rgba(0, 0, 0, .25),
			0 0 14px rgba(255, 217, 0, 0.849),
			0 0 28px rgba(255, 180, 40, 0.35);
	}

	100% {
		box-shadow:
			inset 0 0 0 1px rgba(0, 0, 0, .25),
			0 0 8px rgba(255, 215, 0, 0.35),
			0 0 16px rgba(255, 180, 40, 0.18);
	}
}

/* =================================================
   ▼マーカー
   ================================================= */
.rank-markers {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: start;
	margin-top: -2px;
	pointer-events: none;
}

.rank-marker {
	justify-self: center;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid rgba(255, 255, 255, .92);
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25));
}

/* ===== ゲージ ===== */
.rank-gauge {
	width: 100%;
	margin-top: 6px;
}

.rank-gauge-track {
	position: relative;
	height: 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, .14);
	overflow: hidden;
}

.rank-gauge-fill {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgb(185, 130, 26), rgb(207, 66, 66));
	box-shadow: 0 0 16px rgba(255, 180, 40, .55);
	transition: width 1.2s ease;
}

/* ===== スマホ微調整 ===== */
@media (max-width:420px) {
	.rank-icons {
		gap: 8px;
	}

	.rank-marker {
		border-left-width: 9px;
		border-right-width: 9px;
		border-top-width: 14px;
	}

	.rank-gauge-track {
		height: 12px;
	}
}

/*=====================================================
nav
=====================================================*/

#global-nav {
	width: 100%;
	height: 8rem;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	background: #290000;
	background: linear-gradient(0deg, rgb(41, 0, 36) 0%, rgb(170, 42, 209) 100%);
	color: #ffffff;
	z-index: 999999;
	position: fixed;
	border-top: 0.2rem solid #079e02;
	border-bottom: 0.2rem solid #079e02;

}

ul.menu {
	padding: 5px 0;
	margin: 0 auto;
	width: auto;
	height: 100%;
	font-size: 2.0rem;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	list-style: none;
	background: linear-gradient(0deg, rgb(41, 0, 36) 0%, rgb(170, 42, 209) 100%);
}

ul.menu li {
	width: auto;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bold;

}

ul.menu li:first-child {
	border-left: none;
}

ul.menu li:last-child {
	border-right: none;
}

ul.menu li a {
	max-width: 300px;
	padding: 1rem 1.5rem;
	margin-right: 2rem;
	color: #3d3d3d;
	display: block;
	text-align: center;
	vertical-align: middle;
	border: 0.3rem solid #ac00f0;
	background: linear-gradient(360deg, rgb(198, 226, 190) 0%, rgb(255, 255, 255) 100%);
	border-radius: 25px;
}

@media screen and (min-width: 568px) {
	ul.menu li a:hover {
		color: hsl(14, 100%, 50%);
		border: 0.3rem solid #ff4800;
		text-decoration: none;
		transition: 0.2s;
	}
}

ul.menu li a i {
	font-size: 3rem;
	display: inline-block;
}

/**********************************************************/
.titleboxT {
	width: 100%;
	margin: 0 auto;
	max-width: 1300px;
	padding: 10px 2rem;
	background-color: #840cb4;
	background-image: url("https://www.transparenttextures.com/patterns/nice-snow.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	border: 2px solid #0bb419;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 0px 9px 1px #840cb4;
}

.titleboxIN {
	width: 100%;
	margin: 0 auto;
	max-width: 1300px;
	padding: 8px 2rem;
	background-color: #840cb4;
	background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png");
	border: 2px solid #0bb419;
	color: #ffffff;
	box-shadow: 0px 0px 9px 1px #840cb4;
	text-align: center;
	font-size: 50px;
	justify-content: center;

	@media screen and (max-width: 568px) {
		font-size: 23px;
	}

	font-weight: 900;
	text-shadow: 0 0 10px #FBF0D4;
}

.titleboxIN2 {
	width: 100%;
	margin: 0 auto;
	max-width: 1300px;
	padding: 8px 2rem;
	border: 2px solid #a51f1f;
	color: #eedf15;
	box-shadow: 0px 0px 9px 1px #857c2c;
	text-align: center;
	font-size: 50px;
	justify-content: center;

	@media screen and (max-width: 568px) {
		font-size: 23px;
	}

	font-weight: 900;
}


.titleboxU {
	width: 100%;
	margin: 0 auto;
	max-width: 1300px;
	padding: 10px 2rem;
	background-color: #840cb4;
	background-image: url("https://www.transparenttextures.com/patterns/nice-snow.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	border: 2px solid #0bb419;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 0px 9px 1px #840cb4;
}


/**********************************************************/

.content-back0 {
	max-width: 1000px;
	width: 99%;
	margin: 1rem;
	padding: 1px 1px 0;
	border-radius: 4px;
	box-shadow: 0px 0px 9px 1px #0bb419;
	border: 5px double #0bb419;
	position: relative;
	z-index: 3;
	background: #181818af;
}

.content-back02 {
	max-width: 800px;
	width: 25%;
	position: relative;
	z-index: 3;
	box-shadow: 0px 0px 9px 1px #0bb419;
	border: 5px double #0bb419;
	border-radius: 4px;

	@media screen and (min-width: 568px) {
		margin: 1rem;
	}
}

.content-back02-2 {
	max-width: 800px;
	width: 25%;
	position: relative;
	z-index: 3;
	box-shadow: 0px 0px 9px 1px #852c2c;
	border: 5px double #a51f1f;
	border-radius: 4px;
	background-color: #000000;

	@media screen and (min-width: 568px) {
		margin: 1rem;
	}
}

.content-back02-2.is-hide {
	visibility: hidden;
}

.content-back03 {
	max-width: 900px;
	width: 100%;
	margin: 0 auto 40px;
	padding: 1px 1px 0;
	border: 2px solid #a51f1f;
	box-shadow: 0 0 7px 0px #852c2c, 0 0 0px 0px #852c2c;
	position: relative;
	z-index: 3;
	background: #000000;
}

.content-back4 {
	max-width: 1800px;
	width: 100%;
	margin: 1rem 0;
	padding: 1px 1px 10px;
	border-radius: 4px;
	box-shadow: 0px 0px 9px 1px #857c2c;
	border: 5px double #8a008f;
	position: relative;
	z-index: 3;
	background: #fbf0d4af;
	display: flex;
	flex-wrap: wrap;
	/* 画面が狭いとき折り返す */
	gap: 16px;
	/* 余白（任意） */
	align-items: stretch;
}

/* .content-back02 の幅指定は “flex基準” にするのが安定 */
.content-back4>.content-back02-2 {
	flex: 1 1 300px;
	/* 最低300px、余れば均等に伸びる */
	width: auto;
	/* width:25% を殺す（重要） */
	max-width: none;
	/* max-width:800px を殺す（任意） */
	margin: 0;
	/* 余白は gap に任せる */
}

.content-back5 {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* .content-back02 の幅指定は “flex基準” にするのが安定 */
.content-back5>.content-back02-2 {
	flex: 0 0 calc(50% - 8px);
	/* 2分割固定（gap16の半分を引く） */
	margin: 0;
	width: auto;
	max-width: none;
}

@media (max-width: 768px) {
	.content-back4>.content-back02-2 {
		flex: 0 0 100%;
		/* スマホは1列 */
	}
}

/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/
.news_area {
	-webkit-overflow-scrolling: touch;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	display: -webkit-box;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 5em;
	margin: 10px auto;
	padding: 1rem;
	overflow-y: scroll;
	background: #000000c9;
}

.subtitle1 {
	width: 100%;
	background: #FBF0D4AF;
	background: linear-gradient(180deg, rgb(255, 251, 0) 51%, rgb(158, 148, 0) 100%);
	text-align: center;
	border: 2px solid #C3602A;
	margin: 0 auto;
	font-size: 18px;
	color: #521812;
	padding: 1rem;
	line-height: 1;
	font-weight: 900;
	position: relative;
}

@media screen and (max-width: 768px) {
	.subtitle1 {
		max-width: 800px;
		background: #FBF0D4AF;
		background: linear-gradient(180deg, rgb(255, 251, 0) 51%, rgb(158, 148, 0) 100%);
		text-align: center;
		margin: 0 auto;
		font-size: 24px;
		font-weight: 900;
		border: 2px solid #C3602A;
		color: #521812;
		padding: 8px 1%;
		position: relative;
	}
}

.subhead01 {
	width: 100%;
	line-height: 1.3;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 900;
	font-size: 5rem;
	text-align: center;
	padding: 2rem 0;
	color: #202020;
	background: #FBF0D4AF;
	background: linear-gradient(180deg, rgba(251, 240, 212, 1) 51%, rgba(207, 143, 83, 1) 100%);

}

.img-fade-in {
	-webkit-animation: fade-in 1.7s cubic-bezier(.39, .575, .565, 1.000) both;
	animation: fade-in 2.8s cubic-bezier(.39, .575, .565, 1.000) both
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fade-in {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

/*========= 流れるテキスト ===============*/

/*全共通*/

/*左右のアニメーション*/

/*-------------------------------------------*/
.report ul li {
	list-style: none;
}

.mss_bt2404 {
	border: 1px solid #be3c22;
	border-radius: 5px;
	color: #333;
	background:
		url("../../../../image/member/icons/b2_2.png") center right 30px / auto auto no-repeat #EEE;
	padding: 5px 3px;
	display: block;
	margin: 0 auto 20px;
	text-align: center;
	line-height: 1.4;
	box-shadow:
		0px 6px 0px #5C2A20, 0px 3px 6px rgba(0, 0, 0, .4),
		0px 0px 3px rgba(255, 255, 255, .5) inset,
		0px -2px 4px 4px rgba(0, 0, 0, 0.1) inset;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 500;
}


.mss_bt2404:hover {
	opacity: 0.7;
}

/*-------------------------------------------*/

label.display_bt {
	cursor: pointer;
}

label.display_bt:hover {
	opacity: 0.8;
}

.form_every {
	width: 100%;
	border: 2px solid #C3602A;

}

.iframe_container {
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.tg4th_iframe {
	position: relative;
	overflow: hidden;
	padding-bottom: 70%;
	height: 1200px;
}

.tg4th_iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/*-------------------------------------------*/

.area-main {
	max-width: 100rem;
	margin-left: auto;
	margin-right: auto;
}

p {
	padding-top: 8rem;
}

.flash2 {
	animation: flash 1.5s linear infinite;
}

@keyframes flash {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/********************************************
	FVエリア
********************************************/
.fvarea {
	max-width: 1000px;
	margin: 40px auto 0;
	padding: 5px;
	text-align: center;
}

/*********************************************************
	フッター
*********************************************************/


#footer {
	width: 100%;
	margin: 0px auto 0 auto;
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 5px;
	padding-top: 20px;
	padding-bottom: 5px;
	background: #000000;
	box-shadow: 0 0 3px 2px #63fe63, 0 0 20px 1px #FFEFA0;
	position: relative;
	z-index: 1100;
}

#footer p {
	padding-top: 0px;
}

.top a {
	width: 120px;
	margin: 10px 20px 10px 20px;
	color: #ffffff;
	text-align: center;
}

.top a:hover {
	width: 120px;
	color: #ff4500;
	text-align: center;
}

.contents-flex {
	display: flex;
	width: 100%;
	margin: 0 auto;
	max-width: 1300px;
	padding: 1.5px;
	background: #000000af;
	border-left: 2px solid #401047;
	border-right: 2px solid #401047;
}



.iframe_mess_area {
	position: relative;
	margin-inline: auto;
}

.esponsive-box {
	@media (max-width: 768px) {
		width: 100%;
	}

	@media (min-width: 768px) {
		width: 42%;
	}
}

/********************************************
	流れるコメント
********************************************/


.place1_link_com_bg {
	width: 100%;
	border: 1px solid #e7c3f7;
	height: 219px;
	overflow: hidden;
	/* overflow-y: scroll; */
	transform: translateZ(0);
}

.place1_link_com_bg.bigss {
	width: 100%;
	height: auto;
	max-height: 18000px;
	border: 2px solid #281803;
	border-radius: 0 0 4px 4px;
	margin: 0 auto;
}

.place1_link_com_bg.bigss .mx_place1_com_text {
	font-size: 16px;
}

.place1_link_com_bg.bigss .mx_place1_com_name {
	font-size: 12px;
}

.mx_place1_com_list {
	border-bottom: 1px solid #FFFFFF;
	padding: 10px;
	width: 100%;
}

.mx_place1_com_name {
	color: #c4c4c4;
	font-size: 1.5rem;
}

.mx_place1_com_text {
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	text-align-last: left;
}

.heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
	from {
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}

	17% {
		transform: scale(0.98);
		animation-timing-function: ease-out;
	}

	45% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}