@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) {
	width: 100%;
	height: 70%;
	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) {
	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) {
	width: 90%;
	height: 15rem;
	border-radius: 16px;
}
.wiki-footer:has(#create_wiki_btn) {
	width: 70%;
	margin: 1.5% auto;
	padding-top: 2.5%;
	border-top: var(--dark-color) solid 1px;
	display: flex;
	justify-content: center;
}

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

/* --- bugfix 最小パッチ --- */
.bbs .board-footer span { line-height: 0.5rem; }
/* 意図に合わせてどちらかに統一。ここでは 1% を採用 */
.board-container { margin-left: 1%; }

/* --- scope forum-specific overrides --- */
.page-forum main {
  width: 70%;
  height: auto;
  padding: 5% 3.5%;
  margin: 0;
  margin-left: auto;
}
.page-forum .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%;
}
.page-forum .map-frame iframe {
  width: 65vw;
  aspect-ratio: 5 / 3;
}

/* --- button unification (naming bridge) --- */
.btn--primary,
.btn-primary {
  background-color: #3377ff;
  color: #ffffff;
  transition: all 0.2s;
}
.btn--primary:hover,
.btn-primary:hover { background-color: #1155dd; }
/* 既存仕様を尊重（forum の :active を踏襲） */
.btn--primary:active,
.btn-primary:active { transform: scale(120%); }

/* グローバルの固定幅を撤回し、必要箇所だけ固定幅にする */
a.btn, button.btn { width: auto; }
.bbs a.btn, .bbs button.btn,
.wiki-header a.btn, .wiki-header button.btn {
  width: 18.5rem;
}

/* --- layer order --- */
/* heibsaba の footer が前景化する設計なら、!important を外すか値を合わせる */
footer { z-index: 99; } /* ← 既存仕様に整合 */


/*@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;
	}
	
	/*wikiセクション*/
	#wiki .hidden {
	  display: none;
	}
	/* 投稿 */
	#wiki .wiki-row {
	  display: flex;
	  gap: 0.5rem;
	  margin: 8px 0;
	}
	#wiki .wiki-title {
	  flex: 1;
	  padding: 0.5rem;
	}
	#wiki .wiki-toolbar {
	  display: flex;
	  gap: 0.25rem;
	  margin: 0.5rem 0;
	  flex-wrap: wrap;
	}
	#wiki .wiki-toolbar button {
	  padding: 0.4rem 0.6rem;
	  border: 1px solid var(--border, #444);
	
	  cursor: pointer;
	  font-size: 0.85rem;
	}
	#wiki .wiki-editor {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 0.75rem;
	  align-items: stretch;
	}
	#wiki .wiki-editor .wiki-md {
	  width: 100%;
	  padding: 0.6rem;
	  resize: vertical;
	  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}
	#wiki .wiki-preview {
	  border: 1px solid var(--border, #444);
	  padding: 0.6rem;
	  overflow: auto;
	
	  min-height: 12rem;
	}
	#wiki .wiki-actions {
	  margin-top: 0.75rem;
	  display: flex;
	  gap: 0.5rem;
	  align-items: center;
	  flex-wrap: wrap;
	}
	#wiki .wiki-hint {
	  opacity: 0.75;
	  font-size: 0.85rem;
	}
	#wiki .wiki-preview table {
	  border-collapse: collapse;
	}
	#wiki .wiki-preview th,
	#wiki .wiki-preview td {
	  border: 1px solid #555;
	  padding: 0.25rem 0.4rem;
	}
	#wiki .wiki-alert,
	#wiki .wiki-info {
	  margin-top: 0.5rem;
	  padding: 0.4rem 0.6rem;
	  border-radius: 0.4rem;
	  font-size: 0.85rem;
	}
	#wiki .wiki-alert {
	  border: 1px solid #c44;
	  background: rgba(192, 64, 64, 0.12);
	}
	#wiki .wiki-info {
	  border: 1px solid #4c8;
	  background: rgba(64, 192, 128, 0.12);
	}
	
	/* 検索 */
	#wiki .wiki-searchbar {
	  display: flex;
	  gap: 0.5rem;
	  align-items: center;
	  margin: 0.75rem 0 1rem;
	  flex-wrap: wrap;
	}
	#wiki .wiki-searchbar .wiki-q {
	  flex: 1;
	  min-width: 8rem;
	  padding: 0.5rem;
	}
	#wiki .wiki-searchbar .wiki-sort {
	  width: 14rem;
	  padding: 0.5rem;
	}
	#wiki .btn {
	  padding: 0.45rem 0.75rem;
	  border: 1px solid var(--border, #444);
	
	  cursor: pointer;
	}
	#wiki .btn[disabled] {
	  opacity: 0.5;
	  cursor: not-allowed;
	}
	#wiki .btn-ghost {
	  background: transparent;
	}
	#wiki .wiki-result {
	  display: flex;
	  flex-direction: column;
	  gap: 0.5rem;
	}
	#wiki .wiki-meta {
	  display: flex;
	  gap: 0.75rem;
	  align-items: center;
	  opacity: 0.8;
	  font-size: 0.9rem;
	  flex-wrap: wrap;
	}
	#wiki .wiki-list {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  display: flex;
	  flex-direction: column;
	  gap: 0.5rem;
	}
	#wiki .wiki-item {
	  border: 1px solid var(--border, #444);
	  padding: 0.6rem;
	  border-radius: 0.5rem;
	
	  display: flex;
	  flex-direction: column;
	  gap: 0.25rem;
	  cursor: pointer;
	}
	#wiki .wiki-item-header {
	  display: flex;
	  justify-content: space-between;
	  gap: 0.5rem;
	  align-items: center;
	  flex-wrap: wrap;
	}
	#wiki .wiki-item-title {
	  font-weight: 600;
	  font-size: 1rem;
	}
	#wiki .wiki-item-author {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.35rem;
	  font-size: 0.85rem;
	  opacity: 0.9;
	}
	#wiki .wiki-author-avatar {
	  width: 24px;
	  height: 24px;
	  border-radius: 999px;
	  object-fit: cover;
	  border: 1px solid rgba(255, 255, 255, 0.15);
	}
	#wiki .wiki-item-meta {
	  opacity: 0.8;
	  font-size: 0.85rem;
	}
	#wiki .wiki-pager {
	  display: flex;
	  gap: 0.5rem;
	  justify-content: flex-end;
	  margin-top: 0.5rem;
	}
}
@media (max-width: 640px) {
  #wiki .wiki-editor {
    grid-template-columns: 1fr;
  }
  #wiki .wiki-searchbar .wiki-sort {
    flex: 1;
  }
  #wiki .wiki-item-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*設定セクション*/
.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;
}
#settings[hidden] {
	display: none !important;
}
@media screen and (min-width:541px) and (max-width:760px) {
}
@media screen and (min-width:761px) and (max-width:1024px) {
}