@charset "utf-8";
	@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

	@font-face {
		font-family: 'icomoon';
		src: url('./icomoon/fonts/icomoon.ttf?8ic91e') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	*,
	: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;
	}

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	#footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-style: normal;
		font-weight: 400;
		vertical-align: baseline;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
		font-size: 18px;
	}

	@media (max-width: 500px) {

		html,
		body,
		div,
		span,
		applet,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		a,
		abbr,
		acronym,
		address,
		big,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		s,
		samp,
		small,
		strike,
		strong,
		sub,
		sup,
		tt,
		var,
		b,
		u,
		i,
		center,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		fieldset,
		form,
		label,
		legend,
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		embed,
		figure,
		figcaption,
		#footer,
		header,
		hgroup,
		menu,
		nav,
		output,
		ruby,
		section,
		summary,
		time,
		mark,
		audio,
		video {
			font-size: 4vw;
		}
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	#footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	html {
		/* 	overflow-y: scroll; */
	}

	body {
		background: #fff;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	input,
	textarea {
		margin: 0;
		padding: 0;
	}

	ol,
	ul {
		list-style: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	caption,
	th {
		text-align: left;
	}

	a {
		text-decoration: none;
	}

	a:focus {
		outline: none;
	}

	a:hover {
		cursor: pointer;
	}

	.clearfix:after {
		content: " ";
		display: block;
		visibility: hidden;
		clear: both;
		height: 0;
		line-height: 0;
	}

	.clearfix {
		min-height: 1px;
	}

	input,
	input[type="submit"],
	input[type="text"],
	input[type="file"],
	input[type="search"],
	input[type="email"],
	input[type="number"],
	textarea,
	select,
	button {
		margin: 0;
		padding: 0;
		border: 0;
		margin: 0;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		border-radius: 0;
		vertical-align: middle;
		font-size: inherit;
		color: inherit;
		background: none transparent;
	}

	:focus {
		outline: none;
	}

	* html .clearfix {
		height: 1px;
		/*¥*/
		/*/
	height: auto;
	overflow: hidden;
	/**/
	}

	.both {
		clear: both;
	}

	object,
	embed {
		vertical-align: top;
		margin: 0;
		padding: 0;
	}

	.icon:before,
	.icon:after,
	.help-content li:before {
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: 400;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	@keyframes Bound1 {
		0% {
			transform: scale(0.95, 0.95);
		}

		5% {
			transform: scale(1.1, 1.1);
		}

		10% {
			transform: scale(1, 1);
		}

		100% {
			transform: scale(1, 1);
		}
	}

	@keyframes Bound3 {
		0% {
			transform: scale(0.9, 0.9);
		}

		5% {
			transform: scale(1.1, 1.1);
		}

		10% {
			transform: scale(1, 1);
		}

		15% {
			transform: scale(1.1, 1.1);
		}

		20% {
			transform: scale(1, 1);
		}

		100% {
			transform: scale(1, 1);
		}
	}

	@keyframes rotation {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.fade-in {
		opacity: 0;
		transition: all 1s ease;
	}

	.from-left {
		transform: translateX(-50px);
	}

	.from-right {
		transform: translateX(50px);
	}

	.from-top {
		transform: translateY(-50px);
	}

	.from-bottom {
		transform: translateY(50px);
	}

	.fadeDisp {
		transform: translateY(0px);
		transform: translateY(-0px);
	}

	html,
	body {
		height: 100%;
	}

	/* ===============================================
	General
=============================================== */
	html,
	body {}

	body>footer {
		margin-top: auto;
	}

	.wrap {
		display: flex;
		min-height: 100vh;
	}

	.navArea {
		width: 260px;
		background: #222;
		color: white;
		padding: 20px;
	}

	.mainArea {
		flex: 1;
	}

	.mainAreaInner {
		padding: 0 30px 30px 30px;
	}

	/* ===============================================
header
=============================================== */
	header {
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px 0;
	}

	header h1 {
		text-align: center;
	}

	header h1 img {
		height: 300px;
		width: auto;
	}

	header a {
		color: #fff;
		letter-spacing: 3px;
	}

	.hamburger {
		cursor: pointer;
		background-color: rgba(0,0,0,0.8);
		z-index: 2000;
		display: none;
		padding: 10px;
		border-radius: 5px;
	}

	.hamburger span {
		display: block;
		height: 3px;
		width: 25px;
		background-color: white;
		margin-bottom: 5px;
		transition: 0.2s;
	}

	.hamburger span:last-child {
		margin-bottom: 0;
	}

	.hamburger-menu {
		position: fixed;
		top: 0%;
		left: -100%;
		width:100%;
		background-color: black;
		transition: 0.2s;
		z-index: 1000;
		text-align: center;
		padding-top: 50px;
	}

	.hamburger-menu ul {
		list-style-type: none;
		display: inline-block;
		width: 100%;
	}

	.hamburger-menu li {
		text-align: left;
		width: 100%;
	}

	.hamburger-menu a {
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 15px 30px;
		color: white;
		font-family: 'Titillium Web', sans-serif;
		font-size: 24px;
		border-top: 1px solid #111;
		border-bottom: 1px solid #111;
	}

	.hamburger-menu-mask {
		opacity: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background: #000;
		left: 0;
		z-index: 100;
		transition: .3s;
		display: none;
	}

	.hamburger-menu-mask.show {
		opacity: .95;
		display: block;
	}

	.hamburger-menu a:after {
		content: "\e917";
	}

	.hamburger-menu a:hover {
		background: #8b14c8;
		transition: 0.2s;
	}

	.hamburger-menu.show {
		top: 0px;
		left: 0px;
	}

	.hamburger.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.menu-open .navArea .nav-list {
		opacity: 0;
		transition: .3s;
	}

	@media (max-width: 500px) {
		.hamburger {
			left: 10px;
		}

		.hamburger-menu a {
			font-size: 6vw;
			padding: 20px 15px;
		}
	}

	/* ===============================================
nav
=============================================== */
	.navAreaWrap {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.navArea {
		background: #111;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2000;
	}

	.navArea .nav-list {
		width: 100%;
	}

	.navArea .nav-list li {
		margin: 12px 0;
		width: 100%;
	}

	.navArea .nav-list li a {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		color: #eee;
		border-radius: 8px;
		transition: 0.2s;
	}

	.nav-list li a:hover {
		background-color: #222;
		color: #fff;
	}

	.navArea .nav-list li a::before {
		font-size: 1.4rem;
		margin-right: 10px;
	}

	.navArea .nav-list li a span {
		font-size: 0.9rem;
		letter-spacing: 0.5px;
	}

	.navArea .nav-list li a.active {
		background-color: #8c14c7;
		color: white;
	}

	.navArea .nav-list li a {
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.navArea .mainnav .nav-list li a span,
	.mainnav .nav-list li a {
		font-size: .8rem;
	}

	/* nav-about */
	.nav-about::before {
		content: "\e918";
	}

	/* nav-プロフィール */
	.nav-prof::before {
		content: "\e903";
	}

	/* nav-アカウント情報 */
	.nav-account::before {
		content: "\e911";
	}

	/* nav-ログイン */
	.nav-login::before {
		content: "\e90c";
	}

	/* nav-ログアウト */
	.nav-logout::before {
		content: "\e90b";
	}

	/* nav-会員登録 */
	.nav-regist::before {
		content: "\e90f";
	}

	/* nav-メンバー一覧 */
	.nav-member::before {
		content: "\e91a";
	}

	.nav-fan::before {
		content: "\e906";
	}

	.nav-club::before {
		content: "\e93b";
	}

	.nav-gene::before {
		content: "\e912";
	}

	.nav-map::before {
		content: "\e920";
	}

	/* ===============================================
prof
=============================================== */
	.um-field {
		margin-bottom: 20px;
	}

	.um-directory .um-member-directory-header .um-member-directory-header-row.um-member-directory-search-row {
		justify-content: center !important;
	}

	.um-do-search.um-button {
		background: #8c15c6;
		padding: 11px 10px !important;
	}

	.sort-selector {
		margin: 1em 0;
		text-align: left;

	}
.sort-selector select {
		cursor: pointer; /* こっちが正解！ */
	}
	.sort-dropdown {
		padding: 6px 12px;
		border-radius: 6px;
		background-color: #111;
		color: #fff;
		border: 1px solid #666;
		font-family: "メイリオ", sans-serif;
	}

	.sort-dropdown option {
		background-color: #222;
		color: #fff;
	}

	/* ===============================================
card
=============================================== */
	.section-heading {
		text-align: center;
		font-size: 1.4rem;
		font-weight: 700;
		margin: 40px 0 20px;
		color: #434344;
		font-family: 'Titillium Web', sans-serif;
		letter-spacing: 1px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section-heading::before {
		content: "\e906";
		margin-right: 10px;
	}

	.card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 24px;
		padding: 20px;
	}

	.devil-card {
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		position: relative;
		text-align: center;
		padding-bottom: 20px;
	}

	.devil-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
		transition: 0.3s ease;
	}

	.devil-card-header {
		height: 80px;
		background-size: cover;
		background-position: center;
	}

	.devil-card-avatar {
		margin-top: -40px;
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
		border: 4px solid #fff;
	}

	.devil-card-avatar img {
		border-radius: 50%;
		width: 80px;
		height: 80px;
	}

	.devil-card-body {
		padding: 10px 15px;
	}

	.devil-card-username {
		margin: 8px 0 4px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
	}

	.maouArmy .devil-card-username {
		color: #8c15c6;
	}

	.devil-card-username::before {
		content: "\e906";
		font-size: 80%;
		margin-right: 8px;
	}

	.devil-card-name {
		font-size: 14px;
		color: #555;
	}

	.devil-card-title {
		font-size: 13px;
		color: #888;
	}

	.devil-card-username .icon-official {
		color: #8c15c5;
		margin-left: 6px;
		font-size: 0.9em;
	}

	.icon-official::before {
		content: "\e91b";
	}

	/* ===============================================
固定ページ
=============================================== */
	.maou-page-content {
		max-width: 800px;
		margin: 40px auto;
		padding: 20px;

	}

	.maou-page-content p {
		margin-bottom: 1em;
		letter-spacing: 1px;
		line-height: 2;
	}

	.maou-page-content p:last-of-type {
		margin-bottom: 0;
	}

	.maou-page-content img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.page-title {
		font-size: 2rem;
		margin-bottom: 20px;
		color: #8c14c7;
		text-align: center;
		letter-spacing: 1px;
	}

	.page-body {
		font-size: 1rem;
		line-height: 1.8;
		color: #333;
	}

	.maou-page-content strong {
		color: #8c14c7;
		/* 魔王魂パープル */
		font-weight: 700;
		background: linear-gradient(transparent 60%, rgba(140, 20, 199, 0.15) 60%);
		padding: 0 2px;
	}

	.maou-note {
		font-size: 0.8rem;
		color: #666;
		margin-top: 1.5em;
		line-height: 1.6;
		background: #f6f6f6;
		padding: 12px 16px;
		border-left: 5px solid #8c14c7;
		border-radius: 4px;
		font-style: italic;
	}

	.maou-page-content ul {
		list-style: square;
		margin-left: 30px;
	}

	.maou-page-content ul li {
		font-size: 80%;
		margin: 15px 0;
	}

	.page h2 {
		padding-left: 30px;
		color: #8c14c7;
		font-size: 2.6rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page h2::before {
		content: "\e906";
		font-family: 'icomoon';
		color: #8c14c7;
		font-size: 2.4rem;
		margin-right: 20px;
	}

	.maou-page-content img {
		margin-bottom: 50px;
	}

	.maou-page-content h3 {
		font-family: 'Titillium Web', sans-serif;
		font-size: 1.2rem;
		color: #8c14c7;
		position: relative;
		font-weight: bold;
		padding-left: 24px;
		margin: 0px 0 16px;
		letter-spacing: 1px;
	}

	.maou-page-content h3:not(:first-of-type) {
		margin-top: 40px;
	}

	.maou-page-content h3::before {
		content: "\e906";
		/* icomoonのアイコンコードをここに */
		font-family: 'icomoon';
		/* 使用中の魔王フォント */
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #8c14c7;
		font-size: 1.2rem;
	}

	.maouArmyClub {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		max-width: 600px;
		margin: 40px auto;
		padding: 0;
		list-style: none;
		font-family: 'Titillium Web', sans-serif;
	}

	.maouArmyClub li {
		background: #f8f3fc;
		border-left: 6px solid #8c14c7;
		border-radius: 8px;
		transition: background 0.2s, transform 0.2s;
		overflow: hidden;
	}

	.maouArmyClub li a {
		display: block;
		padding: 12px 16px;
		color: #8c14c7;
		font-weight: bold;
		font-size: 1rem;
		width: 100%;
		height: 100%;
		letter-spacing: 0.5px;
	}

	.maouArmyClub li:hover {
		background: #f1e8fb;
		transform: translateY(-2px);
	}

	.registArea .um-right {
		display: none;
	}

	.registArea .um-half {
		width: 100%;
	}

	/* ===============================================
footer
=============================================== */
.user-count-banner {
  background: linear-gradient(90deg, #7e2ff2 0%, #4b0082 100%);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 10px 0 20px;
  font-size: 1.1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 10px rgba(126, 47, 242, 0.4);
}

.user-count-banner .count-icon {
  font-size: 1.5em;
}
.count-icon{

}
.count-icon::before{
	content: "\e906";
	font-size: 80%;
	margin-right: 5px;
}

.user-count-banner .count-text strong {
  color: #ffd700;
}
	footer {
		background: #111;
		width: 100%;
		padding: 30px 0;
		color: #fff;
	}

	.credit {
		font-size: 12px;
		text-align: center;
		letter-spacing: 1px;
		font-family: 'Titillium Web', sans-serif;
	}
	#um_field_9_fanhistory{
		display: none;
	}
	.um-editing #um_field_9_fanhistory{
		display: block;
	}
	.um-editing .um-fanhistoryshortcode{
		display: none;
	}
	.um-profile-edit-notice{
		display: none;
	}
	.um-editing .um-profile-edit-notice{
		display: block;
	}
	.mobile-bottom-nav{
		display: none;
	}

	/* ===============================================
	iphone
	=============================================== */


	@media screen and (max-width: 768px) {
		.wrap{
			position: relative;
		}

		.hamburger{
			position: fixed;
			top: 5px;
			left: 5px;
		}

		header {
			height: auto;
			margin: 60px 0 40px;
		}

		header h1 img {
			width: 90%;
			height: auto;
		}

		.mainnav .nav-list li a {
			font-size: 1.5rem;
		}

		.mainnav .nav-list li a:before {
			margin: 0 10px;
			;
		}

		.mainnav .nav-list li a span {
			display: none;
		}

		.maouArmyClub {
			grid-template-columns: 1fr;
			padding: 0 10px;
		}

		.wrap {
			flex-direction: row;
		}

		.card-grid {
			padding: 5px;
		}

		.navArea {
			width: 60px;
			padding: 10px;
		}

		.hamburger {
			display: block;
		}
		.navArea{
			display: none;
		}

		.navArea .nav-list li a span {
			display: none;
		}

		.navArea .nav-list li a {
			justify-content: center;
		}

		.section-heading {
			font-size: 1rem;
			margin: 0px 0 20px;
		}

		.mainAreaInner {
			padding: 15px;
		}

		.maou-page-content {
			margin: 20px 0px;
			padding: 10px;
			font-size: 0.95rem;
		}

		.page-title {
			font-size: 1.5rem;
		}

		.maou-note {
			font-size: 0.75rem;
			padding: 10px 12px;
		}

		.maou-page-content p {
			font-size: 0.95rem;
		}

		.navArea ul {
			display: none;
		}

		.navArea {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			transition: top 0.3s ease;
		}
		.credit {
			font-size: 8px;
		}

		.mobile-bottom-nav {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  background: #111;
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  border-top: 1px solid #333;
		  z-index: 9999;
		}

		.mobile-bottom-nav .nav-item {
		  flex: 1;
		  text-align: center;
		  padding: 10px 0;
		  font-size: 12px;
		  color: #ccc;
		  text-decoration: none;
		  font-family: 'Titillium Web', sans-serif;
		}

		.mobile-bottom-nav .nav-item::before {
		  font-family: 'icomoon';
		  display: block;
		  font-size: 1.4rem;
		  margin-bottom: 2px;
		}

		.nav-member::before { content: "\e91a"; }
		.nav-prof::before { content: "\e903"; }
		.nav-map::before { content: "\e920"; }
		.nav-club::before { content: "\e93b"; }
		.nav-gene::before { content: "\e912"; }
		.nav-regist::before { content: "\e90f"; }
		.nav-login::before { content: "\e90c"; }

		@media screen and (min-width: 768px) {
		  .mobile-bottom-nav {
			display: none;
		  }
		}
		body {
		//	padding-top: 60px;
			/* ナビの高さに応じて余白調整 */
		}
	}