@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

:root {
	--bg-color: #b9e6f0;
	--dark-color: #222222;
	--accent-color: #fac04c;
	--blue-base: #0b84ff;
	scroll-behavior: smooth;
	color: var(--dark-color);
}

.map-frame[hidden]{ display:none !important; }

main {
	width: 70%;
	height: auto;
	padding: 5% 3.5%;
	margin: 0;
	margin-left: auto;
}
footer {
	z-index: 9!important;
}

a.btn, button.btn {
	border-radius: 50px;
    width: 18.5rem;
	margin: 1.5% auto;
}
.btn-primary {
	background-color: #3377ff;
	color: #ffffff;
	transition: all 0.2s;
}

.btn-primary:hover {
	background-color: #1155dd;
}

.btn-primary:active {
	transform: scale(120%);
}

input, select, textarea {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	width: 17.5rem;
	border-radius: 50px;
	border: solid var(--accent-color) 1px;
	margin-top: .75rem;
	display: inline-flex;
	text-decoration: none;
	margin: 1.5% auto;
}

:is(.top-wrapper, .join-wrapper) {
	width: 70%;
}

:is(.tabs__panel:has(.board-header), .tabs__panel:has(.wiki-header)) {
	height: 60vh;
}

:is(.board-header, .wiki-header) {
	width: 70%;
	margin: 1.5% auto;
	display: flex;
	justify-content: center;
	flex-direction: row;
	border-bottom: var(--dark-color) solid 1px;
}
:is(.board-container, .wiki-container) {
	width: 100%;
	height: 10%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
:is(.board-container .default-msg, .wiki-container .default-msg) {
	width: 90%;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}
:is(.board-post, .wiki-post) {
	text-align: center;
	border-top: var(--dark-color) solid 1px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
	margin: 1.5% auto;
}
:is(.board-post .body, .wiki-post .body) {
	width: 90%;
	height: 15rem;
	border-radius: 16px;
}

.rank-header h3 {
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 50%;
	margin: 0 auto;
}
.rank-header h3 i {
	display: block;
	width: 1rem;
	margin: auto 1%;
	font-size: 2rem;
}
.rank-container {
	display: none;
	text-align: center;
}
.rank-container.active {
	display: block;
}
.rank-container .rank-body div {
	display: flex;
    justify-content: center;
    flex-direction: row;
	margin: 1.5% 0;
	height: 3.5rem;
}
.rank-container .rank-body div :is(h2, h3, h4, p) img {
	width: 3rem;
	height: 3rem;
	aspect-ratio: auto 24 / 24;
	position: relative;
	top: 1rem;
}
.rank-container .rank-body div :is(h2, h3, h4, p) {
	display: block;
	width: 50%;
	margin: 0;
	text-align: left;
	margin-left: 15%;
}
.rank-container .rank-body div p:nth-child(2) {
	display: block;
	width: 20%;
	margin: 0;
	height: 1rem;
    margin: auto 0;
}
.rank-footer {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	height: 2.5rem;
	margin: 0 auto;
	width: 30%;
}
.rank-footer :is(.left-chev, .right-chev) {
	font-size: 3rem;
	display: block;
	margin: auto 0;
	cursor: pointer;
}
.rank-footer .dots-container {
	font-size: 1rem;
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 25%;
}
.rank-footer .dots-container .dot {
	display: block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin: auto 7.5%;
    cursor: pointer;
    background-color: var(--dark-color);
}
.rank-footer .dots-container .dot.active {
	background-color: var(--blue-base);
}

.bbs .tabs__panel {
	height: auto !important;
}

.board-container {
	height: 80vh;
	overflow-y: scroll;
	margin-left: auto;
	margin-left: 1%;
}
a.tag {
	color: var(--blue-base);
}
.bbs *{
	transition: all 0.2s;
}
.bbs .board {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 85%;
	margin: 1% auto;
	border-radius: 16px;
	box-shadow: 0 6px 8px rgba(0,0,0,.1);
	background-color: #ffffff;
	padding: 1.2rem;
	border:1px solid #ccc;
}
.bbs .avatar{
	width: 3rem;
    height: 3rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: cover;
    margin: 5% auto;
}
.bbs .board-owner-name {
	font-weight: 700;
}
.bbs .board-title, .reply-header{
	font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    justify-content: left;
    text-align: left;
    width: 100%;
	line-height: 3.7rem;
}
.bbs .board-content, .reply-body {
	white-space:pre-wrap;
	margin-bottom:8px;
}
.bbs .board-replies {
	border-top:1px dashed #ccc;
	margin-top:8px;
	padding-top:8px;
}
.bbs .board-content div {
	padding: 0.5rem 1.5rem;
}
.bbs .board-footer, .reply-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 10vw;
    justify-content: left;
    text-align: right;
    padding-bottom: 0.5rem;
    margin-left: auto;
}
.reply-actions i {
	font-weight: 500;
    font-size: 1.2rem;
	cursor: pointer;
}
.board-footer i {
    margin: 0;
	margin-left: 0.25rem;
	font-weight: 500;
	font-size: 1.2rem;
	cursor: pointer;
}
.board-footer i:hover, .reply-actions i:hover {
	transform: scale(120%);
	color: var(--dark-color);
}
.board-footer span {
	display: inline-block;
    margin-right: 0.25rem;
	line-height: 0,5rem;
	font-size: 1rem;
	cursor: pointer;
	vertical-align: 0.1rem;
	color: var(--dark-color);
}
.bbs .board-replies{
	width: 95%;
	border-top:1px dashed #ccc;
	margin-top:8px;
	padding-top:8px;
	margin: 0 auto;
}
.bbs .reply-header i {
	width: 1rem;
    margin: auto 0.5rem;
    font-weight: 600;
}
.bbs a.bbs-more {
	display: inline-block;
    margin: 8px auto;
    text-align: center;
    width: 100%;
}
.bbs .tag-suggest {
	position:absolute;
	left:0;
	right:0;
	top:100%;
	background:#fff;
	max-height:180px;
	overflow:auto;
	z-index: 2;
	border-radius: 8px;
	border: solid 1px var(--blue-base);
}
.bbs .tag-suggest button {
	display:block;
	width:100%;
	text-align:left;
	padding:6px 8px;
	background:#fff;
	border:0;
	border-bottom:1px solid #eee;
	cursor:pointer;
}
.bbs .tag-suggest button:hover {
	background-color: #ccc;
}
.bbs .bbs-alert{
	margin-top:6px;
	padding:12px 16px;
	border-radius: 12px;
	border:1px solid #f66;
	color:#900;
	background:#fee;
}
.bbs .bbs-info {
	margin-top:6px;
	padding:12px 16px;
	border-radius: 12px;
	border:1px solid #73EA71;
	color:#006600;
	background:#EBFFEF;
}


.server-status-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 1% 0;
}
.server-status-container {
    width: 95%;
	margin: 0 auto;
}

.map-container {
	width: 100%;
	margin: 0;
}
.map-tabs {
	width: 100%;
	margin: 0;
}

.top-tab {
	display: none;
}
.chat-container {
    width: 20%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 2rem 1.5rem;
    margin-top: 1rem;
    text-align: left;
    box-shadow: 0 0 20px rgba(255, 255, 255, .35);
    height: 93%;
}
.chat-body {
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 12px;
}
.chat-line {
	font-size: 1rem;
	padding: 0.25rem 0;
}

.map-frame iframe{
  display:block;
  width: 65vw;
  aspect-ratio:5/3;
  border:2px solid var(--accent-color);
  border-radius:10px;
  margin:10px auto;
  background:#fff;
}


.avatar-lg{
	width:64px;
	height:64px;
	border-radius:50%;
	object-fit:cover;
	vertical-align:middle;
}
.hint{
	font-size:.9em;opacity:.8;margin-left:8px;
}
.settings {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.setting  p {
	margin: auto 0;
}
.setting {
    width: 30vw;
	margin: 1% auto;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.setting:has(#avatar_img) {
	display: flex;
    justify-content: center;
    flex-direction: column;
}
.setting:has(#avatar_img) * {
	text-align: center;
	margin: 1% auto;
}
.setting:has(#avatar_img) :is(input, button) {
	margin-bottom: 5%;
}
.setting input[type="checkbox"] {
	width: 1rem;
	margin: 0;
}
.setting input[type="text"] {
	margin: 1.5% 0;
}
.setting:has(a) {
	justify-content: center;
}
.setting-group {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 0.5rem 1.5rem;
    width: 25vw;
    margin: 0 auto;
}
.setting-group .setting {
	width: 100%;
	height: 2rem;
}

/*@media screen and (max-width:540px) {*/
@media screen and (max-width:1280px) {
	main {
		width: 100%;
		padding: 5% 2.5%;
		margin: 0 auto;
		margin-top: 55px;
		box-sizing: border-box;
	}
	.btn-login-s {
		display: block!important;
		width: 2rem!important;
		height: 2rem!important;
	}
	.btn-login {
		display: none!important;
	}
	.btn-register {
		display: none!important;
	}
	.header-btn-container.login {
		position: absolute!important;
		top: 0!important;
		right: 0!important;
	}
	.header-btn-container.login :is(strong, p) {
		display: none;
	}
	.btn.btn-logout {
		width: 1.5rem!important;
	    height: 1.5rem!important;
	    border-radius: 10px!important;
	}
	.btn.btn-logout i {
		line-height: 1.5rem;
		font-size: 1.2rem;
		font-weight: 500;
	}

	.tabs__panel,
	ol {
		padding: 1rem 0.5rem !important;
	}
	.rules-secction .rules-list {
		padding: 1rem!important;
		padding-left: 1.5rem !important;
	}

	#title {
		width: 40%;
		font-size: 150%;
	}

	#sidebar {
		width: 60vw;
	}

	:is(.top-wrapper, .join-wrapper) {
		width: 90%;
		padding: 2% auto;
	}

	.float-announce {
		padding: 0.6rem 1.2rem;
		right: 12px;
		bottom: 12px;
	}

	.float-announce__title {
		font-size: 16px;
	}

	.float-announce__headline {
		font-size: 18px;
		white-space: normal;
	}

	.join-wrapper a.btn {
		font-size: 100%;
	}

	h2 {
		font-size: 1.7rem;
		margin-bottom: 0.5rem;
	}

	#hebisaba-bg-image {
		height: 200vh;
		top: -80%;
		left: -20%;
	}

	.reward-list {
		width: 100%;
		height: auto;
		margin: 0;
		margin-left: auto;
		font-size: 150%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.reward-list div {
		display: flex;
		align-items: center;
		justify-content: left;
		margin: 0;
		padding: 0.5rem 0;
		font-size: 1.1vw;
	}

	.reward-list div img {
		width: calc(3vw + 0.2rem);
	}

	.reward-list div i {
		font-size: calc(3vw + 0.3rem);
	}

	.reward-list div :is(h4, p) {
		font-size: calc(1vw + 0.6rem);
	}

	h1 {
		font-size: calc(1vw + 1rem);
	}

	h2 {
		font-size: calc(1vw + 0.8rem);
	}

	h3 {
		font-size: calc(1vw + 0.7rem);
	}

	h4 {
		font-size: calc(1vw + 0.6rem);
	}

	p,
	a,
	li,
	span,
	time,
	strong {
		font-size: calc(1vw + 0.6rem);
	}
	:is(.notice__title, .notice__body, .notice__date) {
		font-size: calc(1vw + 0.5rem);
	}
	.notice__header {
		padding: 0.9rem 0.5rem;
		gap: 0.2rem;
	}
	.map-container {
		width: 100%;
	}
	.map-tabs{
		width:100%;
	}
	.map-frames {
		height: 70vh;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 5%;
	}
	.map-tabs__list button {
		font-size: calc(1vw + 0.4rem);
	}
	.map-frame {
		height: 100%;
	    width: 100%;
	}
	.map-frame iframe{
		width: 100%;
		height: 100%;
	}
	.server-status-container {
		width: auto;
		height: 100%;
		flex-direction: column;
	}
	.server-status-wrapper {
		width: 90%;
		padding: 1.5% 2.5%;
		margin: 0 auto;
	}
	.top-tab {
		display: flex;
        justify-content: center;
        width: 7rem;
        margin: 0 auto;
        position: relative;
        bottom: 2rem;
        background-color: #ffffff;
        height: 2.5rem;
        border-radius: 10px;
        z-index: 9999;
        color: var(--dark-color);
        font-size: 1.5rem;
        cursor: pointer;
	}
	.tab-bg {
	}
	.chat-container {
		display: block;
		width: 90%;
		margin: 0 auto;
		position: fixed;
        bottom: -93%;
		padding: 0 5%;
		left: 0;
		right: 0;
		z-index: 999;
		transition: all 0.5s ease-in-out;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
		top: initial;
		border-radius: 10px;
	}
	.chat-container.extend {
		bottom: -20%;
	}
	.chat-header p {
		font-size: 0.8rem;
	}
	.chat-body {
	}
	.chat-line {
		font-size: 0.8rem;
	}
	

	.rank-header h3 i {
	    display: block;
	    width: 1rem;
	    margin: auto 1%;
	    font-size: 1.5rem;
	}
	.rank-container .rank-body div :is(h2, h3, h4, p) img {
		width: 1.5rem;
	    height: 1.5rem;
	    aspect-ratio: auto 24 / 24;
	    position: relative;
	    top: 0.4rem;
	}
	.rank-container .rank-body div :is(h2, h3, h4, p) {
	    display: block;
	    width: 70%;
	    margin: 0;
	    text-align: left;
	}
	.rank-footer {
	    display: flex;
	    justify-content: space-around;
	    flex-direction: row;
	    height: 2.5rem;
	    margin: 0 auto;
	    width: 70%;
	}
	.rank-footer .dots-container {
	    font-size: 1rem;
	    display: flex;
	    justify-content: center;
	    flex-direction: row;
	    width: 40%;
	}

	
	.board-container {
		padding-top: 2.5%;
	}
	.bbs .board {
		width: 80%;
	}
	.board-title {
		flex-direction: column;
	}
	.board-title span {
	    margin: 0.25rem 0;
	    height: 1rem;
		line-height: 1rem;
	}
	.bbs .board-content div {
		padding: 0.25rem;
    	font-size: calc(0.5rem + 1.5vw);
	}
	.bbs .board-footer, .reply-actions {
		width: auto;
	}
	.bbs .board-header, .wiki-header {
		width: 95%;
		margin: 0 auto;
	}
	.bbs .board-header :is(input, select), .wiki-header :is(input, select) {
		width: 45%;
		margin: 0.5rem 1.5%;
		font-size: calc(0.5rem + 0.5vw);
	}
	.bbs .board-post {
		width: 95%;
		margin: 0 2.5%;
		padding-top: 5%;
	}
	.bbs .board-post div {
		width: 95%;
		margin: 1.5% 2.5%;
	}
	.bbs .board-post div :is(input, textarea, button) {
		width: 95%;
		margin: 1.5% auto;
	}
	.setting {
		width: 95%;
		padding: 0 2.5%;
		margin: 0 auto;
		font-size: calc(0.5rem + 0.5vw);
	}
	#settings_status, #email_meta {
		font-size: calc(0.5rem + 0.7vw);
		margin: 1.5% 0;
	}
	.setting-group {
		width: 80%;
		padding: 0 2.5%;
		margin: 2.5% auto;
	}
}
@media screen and (min-width:541px) and (max-width:760px) {
}
@media screen and (min-width:761px) and (max-width:1024px) {
}