/* --- プリセット --- */

*{
	margin: 0;
	padding: 0;
}
html{
	height: 100%;
	font-size: 62.5%;
	scroll-behavior:smooth;
    cursor: unset;
}
li{
	list-style-type: none;
}
a{
	color: #efefef;
}
body{
	color: #efefef;
	background-repeat: repeat, repeat;
	background-size: cover, auto;
	background-position: 75%;
	background-color: rgba(0, 0, 0, 0.15);
    background-blend-mode: multiply;
	background-attachment: fixed;

	font-family: 'BIZ UDGothic', sans-serif;
}
/* Background pattern from Toptal Subtle Patterns */


::-webkit-scrollbar {
    width: 5px;
	height: 5px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}


/* チッピー */
.tippy-tooltip[data-animation=shift-away-subtle][data-placement^=top][data-state=hidden]{transform:translateY(5px)}.tippy-tooltip[data-animation=shift-away-subtle][data-placement^=bottom][data-state=hidden]{transform:translateY(-5px)}.tippy-tooltip[data-animation=shift-away-subtle][data-placement^=left][data-state=hidden]{transform:translateX(5px)}.tippy-tooltip[data-animation=shift-away-subtle][data-placement^=right][data-state=hidden]{transform:translateX(-5px)}.tippy-tooltip[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}

.tippy-tooltip.material-theme{background-color:#505355;font-size:13px;font-weight:600}.tippy-tooltip.material-theme[data-placement^=top]>.tippy-arrow{border-width:8px 8px 0;border-top-color:#505355}.tippy-tooltip.material-theme[data-placement^=bottom]>.tippy-arrow{border-width:0 8px 8px;border-bottom-color:#505355}.tippy-tooltip.material-theme[data-placement^=left]>.tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#505355}.tippy-tooltip.material-theme[data-placement^=right]>.tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#505355}.tippy-tooltip.material-theme>.tippy-content{padding:4px 7px}.tippy-tooltip.material-theme>.tippy-backdrop{background-color:#505355}.tippy-tooltip.material-theme>.tippy-svg-arrow{fill:#505355}

.fas.cap[data-tippy-content],
.far.cap[data-tippy-content]{
	cursor: pointer;
	margin: 0 0.25em;
	z-index: 15;
}
.cap[data-tippy-content]{
	cursor: pointer;
}
.tippy-tooltip{
	max-width: none !important;
}

.visible{
	display: inline !important;
	opacity: 1 !important;
	pointer-events: unset !important;
}
.visible_login{
	opacity: 1 !important;
	pointer-events: unset !important;
}

.hide{
	display: none !important;
	opacity: 0;
	pointer-events: none;
}

/* メニューバー */

header{
	position: fixed;
	top: 10px;
	right: 0;

	width: 98%;
	min-width: 325px;
	height: fit-content;
	min-height: 100px;
	padding: 0 0 0 2em;

	display: flex;
	flex-flow: nowrap;

	border-radius: 30px 0 0 30px;
	background-color: rgba(44, 62, 80, 0.9);
	box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
	z-index: 1000;
	user-select: none;
}

header::after{
	position: absolute;
	top: 0;
	right: -5px;

	width: calc(100% - 0.5em);
	height: calc(100% - 1em);
	margin: 0.5em 0.5em 0.5em 0;

	content: "";
	border-top: 2px solid #efefef55;
	border-left: 2px solid #efefef55;
	border-bottom: 2px solid #efefef55;
	border-radius: 30px 0 0 30px;
	pointer-events: none;
}

header > .charaBanner{
	position: relative;
	width: 60px;
	margin: 0 40px 0 0;
	display: flex;
    flex-flow: column;
    align-self: center;
}
header > .charaBanner > a{
	position: relative;

	width: 60px;
	height: 60px;

	border-radius: 50%;
	background-color: rgba(44, 62, 80, 1);
	overflow: hidden;
	transition: 0.25s;
	z-index: 100;
}
header > .charaBanner > a > img{
	width: 100%;
	height: 100%;
	
	z-index: 100;
}
header > .charaBanner > span{
	position: absolute;
    bottom: -12px;
	right: 50%;
    transform: translateX(50%);
    z-index: 100;
    font-family: 'Jura', sans-serif;
	text-align: center;
}
header > .charaBanner > .hp_guege{
    position: absolute;
    top: -9.5px;
    right: -10px;
    width: 80px;
    height: 80px;
	background-color: rgba(40, 40, 40, 1);
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}
header > .charaBanner > .hp_guege::after{
    content: "";
    display: block;
    position: absolute;
	top: 0;
	left: -40px;
    width: 80px;
    height: 80px;
	background-color: rgba(71, 131, 57, 1);
    transform-origin: right 40px;
    z-index: 2;
}
header > .charaBanner > .hp_guege::before{
    content: "";
    display: block;
    position: absolute;
	top: 0;
	left: 40px;
    width: 80px;
    height: 80px;
	background-color: rgba(71, 131, 57, 1);
    transform-origin: left 40px;
    z-index: 3;
}


header > .state_area{
	margin: 0 1em;
	display: flex;
	flex-flow: column;
	justify-content: center;
}
header > .state_area > div{
	position: relative;
	margin: 7px 0;
	content: "";
	width: 200px;
	height: 13px;
	background-color: rgba(40, 40, 40, 1);

	border-radius: 2px;
}
header > .state_area > div > p.fas{
	display: inline-block;
	width: 22px;

	position: absolute;
	top: -3px;
	left: -33px;
	font-size: 1.8em;
	color: #efefef;
	text-align: center;
}
header > .state_area > div > div{
	height: 100%;
	background-color: rgb(71, 131, 57);
	border-radius: 2px;
}
header > .state_area > div > small{
	position: absolute;
	top: -0.5px;
	left: 0.5em;
    font-family: 'Jura', sans-serif;
}

header .day{
	display: flex;
	margin: 0 1em;
	flex-flow: column;
	flex-wrap: wrap;
    align-items: flex-end;
	justify-content: center;
	color: #efefef;

	font-family: 'Jura', sans-serif;
	font-weight: bold;
}
header .sub_area{
	margin: 0 auto 0 0.5em;
    color: #efefef;
    font-size: 2.5em;
    font-family: 'Jura', sans-serif;
    font-weight: bold;

    display: flex;
    flex-flow: wrap;
    justify-content: center;
	align-items: center;
	align-content: center
}
header .sub_area > p{
	padding: 0.25em 0 0 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
	align-items: center;
}

header > .shortcut{
	position: relative;
	margin: 0 0 0 auto;
	display: flex;
	flex-flow: column;
	justify-content: center;

	font-size: 3em;
	text-align: center;
}
header > .shortcut > a{
	display: inline-block;
	position: relative;
	width: 40px;
	margin: 0.25em 0;
	color: #efefef;
	text-decoration: none;
}
.shortcut.new::before {
    content: "●";
    position: absolute;
    top: 50px;
    right: -5px;
    font-size: 0.25em;
    color: #F55;
}

div.menu_button{
	width: 100px;
	display: inline-block;
	margin: 0 2em 0 0;
	padding: 0 1em;

	cursor: pointer;
	text-align: center;
}
div.menu_button > p.fas{
	display: none;
	font-size: 6em;
	color: #efefef;
	line-height: 95px;
	position: relative;
}

div.menu_button > p.fas::after {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 1em;
    right: 50%;
    transform: translateX(50%);
    font-size: 0.25em;
    font-weight: bold;
    font-family: 'Jura', sans-serif;
    white-space: nowrap;
}
div.menu_button > p.fa-bars::after {
    content: "MENU";
}
div.menu_button > p.fa-times::after {
    content: "CLOSE";
    transform: translateX(40%);
}


div.menu_overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	content: "";
	opacity: 0;
	pointer-events: none;
}

ul.material_bar{
	position: fixed;
    top: 105px;
    left: calc(1.6vw);
	padding: 0 1em 1em 0.75em;
    width: fit-content;
	height: 525px;

	display: flex;
    flex-flow: column;
	justify-content: flex-start;
	align-self: center;
	overflow: hidden;

    border-radius: 0 0 25px 25px;
    background-color: rgba(44, 62, 80, 0.9);
    box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
	transition: 0.2s ease-in-out;
	cursor: pointer;
    user-select: none;
    z-index: 10;
}
ul.material_bar.short{
	height: 65px;
	padding: 1em 1em 1em 0.75em;
}

ul.material_bar::after{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 1em);
	height: calc(100% - 0.5em);
	margin: 0 0.5em 0.5em 0.5em;

	content: "";
	border-left: 2px solid #efefef55;
	border-right: 2px solid #efefef55;
	border-bottom: 2px solid #efefef55;
	border-radius: 0 0 20px 20px;
	pointer-events: none;
}

ul.material_bar > li{
	margin: 0 0.5em;
	padding: 1em 0;

	display: flex;
    flex-flow: column;
	justify-content: center;
	align-items: center;
	transition: 0.2s ease-in-out;
	pointer-events: none;
}
ul.material_bar.short > li{
	padding: 0;
}
ul.material_bar > li.mate_none{
	pointer-events: all;
}
ul.material_bar > li > img{
	margin: 0.25em;
}
ul.material_bar > li > span{
	transition: 0.2s ease-in-out;
	font-size: 1.2em;
	opacity: 1;
}
ul.material_bar.short > li > span{
	opacity: 0;
}

nav{
	position: fixed;
	top: 110px;
	right: -300px;

	width: 300px;
	height: fit-content;
	padding: 1em 2em;

	display: flex;
	flex-flow: column;
	
	border-radius: 0 0 0 5px;
	background-color: rgba(77, 82, 87, 0.9);
	box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
	z-index: 500;
	transition: 0.25s;
}
nav::before{
	position: absolute;
	top: 0;
	right: 10px;

	content: "MENU";
	color: #efefef;
	font-size: 5em;
	font-weight: bold;
	opacity: 0.25;
	pointer-events: none;
}
nav li{
	margin: 1em 0;
}

nav li > a{
	position: relative;
	color: #efefef;
	font-size: 3em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;
	text-decoration: none;
	transition: 0.25s;
}
nav li > a:hover{
	color: #b1b1b1;
}
nav > ul.menu_content .new::before{
    content: "●";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 0.5em;
    color: #F55;
}

div.top_button{
	opacity: 0;
	pointer-events: none;

	position: fixed;
	z-index: 50;
	bottom: 50px;
	right: 20px;
	width: 70px;
	height: 70px;

	border-radius: 15px;
	background-color: rgba(30, 40, 50, 0.9);
	box-shadow: 0 2px 5px rgba(62, 47, 48, 0.4);
	text-align: center;
	cursor: pointer;
	transition: 0.3s;
}
.top_button:hover{
	transform: translate(1.5px,1.5px);
}
div.top_button > a{
	width: 100%;
	font-size: 4em;
	color: #efefef;
	text-decoration: none;
	line-height: 70px;
}
.open{
	right: 0px !important;
}

div.noticearea {
	/*[追加] 親box用*/
   pointer-events: none;
   /* 位置調整 */
   position: fixed;
   bottom: 0;
   right: 0;
   z-index: 1000;

   /* はみ出し非表示 */
   overflow-x: hidden; 
   width: 400px;

   /* 縦に並べる */
   display: flex;
   flex-direction: column;
}
div.notice,
div.incident,
div.advancement{
   position: relative; /* fixedをやめるのでafterの崩れ防止 */
	 
   margin-left: auto; /* rightから変更 */
   margin-right: -450px; /* rightから変更 */
   
   margin-bottom: 10px; /* 追加 */
   
   /* 残りは元のまま */
   width: 400px;
   height: fit-content;
   padding: 1em;
   min-height: 75px;

   display: flex;
   justify-content: center;
   align-items: center;

   background-color: rgba(44, 62, 80, 0.9);
   box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
   border-radius: 5px;

   font-size: 1.5em;
   text-align: center;
   z-index: 1000;
}

/* 下からn番目 */
div.notice:nth-last-child(1) {
   animation: notice ease-in-out forwards 8s 0s;
}

div.notice:nth-last-child(2) {
   animation: notice ease-in-out forwards 7.7s 0.25s;
}

div.notice:nth-last-child(3) {
   animation: notice ease-in-out forwards 7.4s 0.5s;
}

div.notice:nth-last-child(4) {
   animation: notice ease-in-out forwards 7.1s 0.75s;
}

div.notice:nth-last-child(5) {
   animation: notice ease-in-out forwards 6.8s 1s;
}

div.notice:nth-last-child(6) {
   animation: notice ease-in-out forwards 6.5s 1.25s;
}

div.notice:nth-last-child(7) {
   animation: notice ease-in-out forwards 6.2s 1.5s;
}

div.notice:nth-last-child(8) {
   animation: notice ease-in-out forwards 5.9s 1.75s;
}
@keyframes notice {
   0% {
	 margin-right: -450px;
   }

   10% {
	 margin-right: 10px;
   }

   90% {
	 margin-right: 10px;
   }

   100% {
	 margin-right: -450px;
   }
}

div.notice::after,
div.incident::after,
div.advancement::after{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 1em);
	height: calc(100% - 1em);
	margin: 0.5em;

	content: "";
	border: 2px solid #efefef55;
	border-radius: 5px;
	pointer-events: none;
}


img[src*="../../imgs/mate_ic"]{
	margin: 0 0 0.25em 0;
}

img.ic_thumb{
	width: 30px;
	min-width: 30px;
	max-width: 60px;
	background-color: transparent;
}


/* --- メイン --- */



main{
	margin: 135px 0 0 0;
	padding: 0 1em;
	width: 100%;
}

section{
	position: relative;
}

section.top{
	margin: 200px auto 0 auto;
	text-align: center;
}
h1{
	width: 100%;
	user-select: none;
	pointer-events: none;
}
h1 > img{
	display: block;
	width: 35%;
	margin: 0 auto;
	filter: drop-shadow(6px 6px 6px rgb(62 47 48 / 40%));
}
section.top > div{
	margin: 1em 0;
	font-size: 3.25em;
	font-family: 'Jura', sans-serif;
}
section.top > div > p:nth-of-type(2){
	font-size: 0.75em;
}
section.top > div > a{
	font-weight: bold;
	transition: 0.25s;
	text-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
}
section.top > div > p#login{
	display: inline;
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
	transition: 0.25s;
	text-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
}
section.top > div > a:hover,
section.top > div > p#login:hover{
	color: #b2b2b2;
}

section::before{
	position: absolute;
	top: 10px;
	right: 25px;

	font-size: 3em;
	font-weight: bold;
	opacity: 0.25;
	pointer-events: none;
}
section.index::before{
	content: "INDEX";
}
section.charalist::before{
	content: "CHARACTERS";
}
section.islandlist::before{
	content: "ISLANDS";
}
section.information::before{
	content: "INFORMATION";
}
section.prologue::before{
	content: "PROLOGUE";
}
section.world::before{
	content: "WORLD";
}
section.howto::before{
	content: "HOW TO PLAY";
}
section.rule::before{
	content: "RULE";
}
section.loginform::before{
	content: "LOGIN";
}
section.register::before{
	content: "REGISTER";
}
section.confirmation::before{
	content: "CONFORMATION";
}
section.mypage::before{
	content: "MYPAGE";
}
section.settings::before{
	content: "SETTINGS";
}
section.island::before{
	content: "ISLAND";
}
section.character::before{
	content: "CHARACTER";
}
section.home::before{
	content: "HOME";
}
section.profile::before{
	content: "PROFILE";
}
section.chat::before{
	content: "CHAT & ACTION";
}
section.item::before{
	content: "INVENTORY";
}
section.craft::before{
	content: "CRAFT";
}
section.field::before{
	content: "FIELD";
}
section.explore::before{
	content: "EXPLORE";
}
section.record::before{
	content: "RECORD";
}
section.base::before{
	content: "BASE";
}
section.action::before{
	content: "ACTION";
}
section.omake::before{
	content: "ADVANCEMENT";
}

section.admin::before{
	content: "ADMIN";
}
section.close{
	min-height: auto;
	height: 100px;
	overflow-y: hidden;
}

section.container{
	position: relative;
	max-width: 1600px;
	
	margin: 1em auto;
	padding: 1.5em;

	background-color: rgba(44, 62, 80, 0.9);
	box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
	border-radius: 5px;
    transition: 0.25s;

	font-size: 2em;
	word-break: keep-all;
}

section.container::after{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 1em);
	height: calc(100% - 1em);
	margin: 0.5em;

	content: "";
	border: 4px solid #efefef55;
	border-radius: 5px;
	pointer-events: none;
}

section.container.close{
	height: 100px;
	min-height: auto;
    overflow-y: hidden;
	transition: 0.25s;
}
section.close > div{
	display: none !important;
}

section.container.index{
    min-height: auto;
}
section.container.index > ul{
	margin: 0 0 0 1.5em;
}
section.container.index > ul > li{
	list-style-type: unset;
	font-size: 0.9em;
}
section.container.index > ul > li:nth-of-type(1){
	font-size: 1.1em;
	font-weight: bold;
}
section.container.index > ul > li:nth-of-type(n+2){
	margin: 0 0 0 1em;
}
section.container.index > ul > li > a{
	transition: 0.25s;
}
section.container.index > ul > li > a:hover{
	color: #b1b1b1;
}

section.container table{
	margin: 1em 0.5em;
}
section.container td{
	padding: 1em;
	text-align: center;
}
section.container td:nth-child(1){
	border-right: 2px solid #efefef;
}

section.container h2{
	font-family: 'Jura', 'BIZ UDGothic', sans-serif;
	margin: 0 0 0.5em 0;
}
section.container h3{
	border-left: 5px solid #efefef;
	font-family: 'Jura', 'BIZ UDGothic', sans-serif;
	margin: 0 0 0.5em 0;
	padding: 0 0.5em;
	font-size: 1.5em;
}
section.container h3.closable{
	cursor: pointer;	
}
section.container h4{
	padding: 0;
	font-size: 1.25em;
}
section.container > details > summary >h4{
	display: inline;	
}

section.container p{
	font-size: 1em;	
}
section.information p,
section.prologue p,
section.world p,
section.howto p{
	margin: 0 0 0 0.5em;

}
section.container.rule > p{
	margin: 0.5em 0 0.5em 0.5em;
}
section.container a{
	transition: 0.25s;
}
section.container a:hover{
	color: #b1b1b1;
}


section div.serif{
	margin: 0.5em;
	padding: 0.75em 0.5em 0.75em 0.5em !important;

	width: fit-content;
	max-width: 100%;

	display: flex;
	flex-flow: row;	
	align-items: center;
	word-break: break-all;

	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 5px;
}

section div.serif img.ic{
	max-width: 60px;
	max-height: 120px;
	border-radius: 2px;
}
section div.serif p{
	margin: 0 0.5em;
	font-size: 0.9em;
}
section div.serif > img{
	max-width: 60px;
}

.small{
	font-size: 0.7em;
}
.big{
	font-size: 1.3em;
	font-weight: bold;
}
.red{
	color: #ff9191;
}
.blue{
	color: #bebeff;
}
.grean{
	color: #9eff91;
}
.yellow{
	color: #fff491;
}
.orange{
	color: #ffc891;
}
.gray{
	color: #ababab;
}
form label{
	cursor: pointer;
}

form input[type="text"]{
	padding: 0.5em;
	background-color: #ffffff;
}
form input[type="number"]{
	padding: 0.5em;
	background-color: #ffffff;
}
form input[type="submit"],
form button{
    padding: 7px 1em;
    background-color: rgba(0,0,0,0);
    border: 2px solid #efefef;
    border-radius: 3px;

	color: #efefef;
    cursor: pointer;
    transition: 0.25s;
}
form input[type="submit"]:hover,
form button:hover{
    color: #404040;
    background-color: #efefef;
    border: 2px solid #efefef;
}
form input[type="submit"][disabled="disabled"],
form button[disabled="disabled"]{
	opacity: 0.4;
	cursor: not-allowed;
}
form input[type="submit"][disabled="disabled"]:hover,
form button[disabled="disabled"]:hover{
	color: #efefef;
    background-color: rgba(0,0,0,0);
    border: 2px solid #efefef;
}

form input[type="password"]{
	padding: 0.5em;
	background-color: #ffffff;
}
input[type="checkbox"]{
	transform: scale(1.3);
	margin: 0 6px 0 0;
	cursor: pointer;
}

input[type="radio"]{
	transform: scale(1.3);
	margin: 0 0.5em 0 0;
}

select{
	padding: 0.5em;
	background-color: #ffffff;
}

form textarea{
	padding: 0.5em;
	background-color: #ffffff;
	resize: both;
}
details{
	width: 100%;
}
details > summary{
	margin: 0 0 0 1em;
	cursor: pointer;
    word-break: break-all;
}


section.loginform{
	max-width: 800px;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);

	opacity: 0;
	pointer-events: none;

	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
	transition: 0.25s;
}
section.loginform > form{
	margin: 0;
}
section.loginform > form > div{
	margin: 0;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}
section.loginform > form > div > label{
	margin: 1em;
}
section.loginform form input[type="submit"]{
	margin: 2em 0;
}
section.loginform p.close{
	display: block;
	margin: 0 auto;
	padding: 0.5em;

	text-align: center;
	cursor: pointer;
}

section.confirmation,
section.register > form{
	display: flex;
	flex-flow: column;
	align-items: center;

	text-align: center;
}
section.register > form > div{
	margin: auto 0;
}
section.register > form > div > label > p{
	margin: 0;
}
section.register > form > div > label{
	display: block;
	padding: 0.5em 0;
}
section.register > form > input[type="submit"]{
	margin: 1.5em 0;
}
section.register > form > .reg_item_box{
	display: flex;
	flex-flow: wrap;
	align-content: center;
	align-items: center;
}
section.register > form > .reg_item_box > label{
	margin: 0 0.25em;
	padding: 0;
}

section.confirmation h3{
	align-self: flex-start;
}
section.confirmation > ul{
	margin: 2em 0;
	display: flex;
	flex-flow: column;
	align-items: center;
}
section.confirmation > ul > li{
	margin: 1em 0;
}
section.confirmation > form{
	margin: 1em 0;
}


section.admin{
	display: flex;
	flex-flow: column;

	align-items: flex-start;
	text-align: left;
}
section.admin h3{
	align-self: flex-start;
}

section.admin > form{
	margin: 0 2em;
}

section.admin > form > label,
section.admin > form > select{
	display: block;
	margin: 0 0 2em 0;
}


section.mypage,
section.settings,
section.island{
	display: flex;
	flex-flow: column;

	align-items: flex-start;
	text-align: left;
}
section.mypage h3,
section.settings h3,
section.island h3{
	align-self: flex-start;
}

section.mypage > form,
section.settings > form,
section.island > details > form{
	margin: 1em 2em 1em 2em;
}

section.mypage > form > label,
section.mypage > form > select,
section.settings > form > select,
section.island > details > form > div > label,
section.island > details > form  > div > select{
	display: block;
	margin: 0 0 1em 0;
}
section.settings > form > label{
	display: block;
	margin: 0 0 0.5em 0;
}

section.container details > form{
	opacity: 0;
	transition: 0.3s;
}
section.container details[open] > form{
	opacity: 1;
}
section.container div.difficulty,
section.container div.size{
	margin: 0 0 1.75em 0.75em;
}


section.admin > form{
	margin: 0 2em 2em 2em !important;
}


/* --- モーダル --- */

#overlay{
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;

	background-color: rgba(0, 0, 0, 0.5);
	content: "";
	cursor: pointer;
	z-index: 1000;
	transition: 0.25s;
}
.modal{
	position: fixed;
	top: 50%;
	right: 50%;
	transform: translateX(50%) translateY(-50%);
	min-width: 75vw;
	max-width: 90vw;
	min-height: 300px;
	max-height: 75vh;

	margin: 1em auto;
    padding: 1.5em;
    background-color: rgba(44, 62, 80, 0.9);
    box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
    border-radius: 5px;
    transition: 0.25s;
    font-size: 1em;
	z-index: 2000;
}
.modal::after{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 1em);
	height: calc(100% - 1em);
	margin: 0.5em;

	content: "";
	border: 4px solid #efefef55;
	border-radius: 5px;
	pointer-events: none;
}

.modal > ul{
	width: 100%;
	max-height: 500px;
	display: flex;

	flex-flow: wrap;
	overflow-y: scroll;
}
.modal > ul > li{
	margin: 0.25em;
}
.modal > ul > li > img{
	width: 60px;
	max-height: 120px;
	min-height: 60px;
	cursor: pointer;
	transition: 0.2s;
}
.modal > ul > li > img:hover{
	box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 75%);
}
/* --- フォームの一部 --- */


details.koudo > summary{
	margin: 0;
}
details.koudo > summary > b{
	font-size: 1.1em;
}
details.koudo > div{
	margin: 0.5em;
}
details.koudo > div > label{
	display: flex;
	flex-flow: wrap;
	cursor: pointer;

	margin: 0.75em 0;
}
details.koudo > div > label > input{
	margin: 0 1em 0 0;
}
details.koudo > div > label > small{
	width: 100%;
}


/* --- キャラリス --- */


section.charalist > div.list-chara{
	margin: 1.5em auto 0 auto;
	display: flex;
	flex-flow: wrap;
	justify-content: space-evenly;
}
section.charalist > div > ul.charaCard{
	position: relative;
	margin: 1em;
	padding: 0.75em;

	width: calc((100% / 3) - 2em);
	height: auto;
	max-width: 400px;
	min-width: 300px;
	aspect-ratio: 4 / 3;

	display: flex;
	flex-flow: wrap;
	
	align-content: flex-start;
	background-color: rgba(0, 0, 0, 0.5);
	
	border-radius: 5px;
	overflow: hidden;
	transition: 0.25s;
}

section.charalist > div > ul.charaCard::after{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 0.5em);
	height: calc(100% - 0.5em);
	margin: 0.25em;

	content: "";
	border: 2px solid #efefef55;
	border-radius: 5px;
	pointer-events: none;
}

section.charalist > div.list-chara::before{
	margin: 1em;
	width: calc((100% / 3) - 2em);
	max-width: 400px;
	min-width: 300px;

	content: "";
	order: 1;
}
section.charalist > div.list-chara::after{
	margin: 1em;
	width: calc((100% / 3) - 2em);
	max-width: 400px;
	min-width: 300px;

	content: "";
	order: 1;
}

section.charalist > div > ul.charaCard > li{
	position: relative;
	z-index: 100;

	background-color: rgba(0, 0, 0, 0.15);
}

section.charalist > div > ul.charaCard > li.eno{
	position: absolute;
	top: 2px;
	right: 12px;

	font-size: 1.25em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;	
	opacity: 0.5;
}

section.charalist > div > ul.charaCard > li.icon{
	margin: 0 0 0.25em 0;
	width: 60px;
	height: 60px;

	display: inline;
}
section.charalist > div > ul.charaCard > li.icon > img{
	width: 60px;
	height: 60px;
	border-radius: 2px;
}

section.charalist > div > ul.charaCard > li.name{
	width: calc(100% - 60px);
	height: 60px;

	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-content: center;

	font-size: clamp(17px, 1.4vw, 22px);
	text-align: center;
}

section.charalist > div > ul.charaCard > li.name::before{
	position: absolute;
    top: -5px;
    left: 5px;

	content: "Name:";
	font-size: 0.75em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;	
	opacity: 0.5;
}
section.charalist > div > ul.charaCard > li.name > a{
	display: inline-block;
    margin: 5px 0 0 0;

	color: #e0e0e0;
	font-weight: bold;
	text-decoration: none;
	word-break: break-all;
}

section.charalist > div > ul.charaCard > li.island{
	margin: 0.25em 0 5px 0;
	padding: 25px 0 5px 0;

	width: 100%;
	height: 60px;

	font-size: 0.9em;
	text-indent: 0.25em;
}

section.charalist > div > ul.charaCard > li.island::before{
	position: absolute;
	top: 2px;
	left: 0;

	content: "Location:";
	font-size: 0.75em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;	
	opacity: 0.5;
}

section.charalist > div > ul.charaCard > li.island > a{
	text-decoration: none;
	color: #e0e0e0;
}

section.charalist > div > ul.charaCard > li.comment{
	width: 100%;
	padding: 20px 0 0 0;
	height: fit-content;
	min-height: 60px;
	max-height: 120px;

	font-size: clamp(14px, 1.2vw, 20px);
	color: #e0e0e0;
	text-indent: 0.25em;
}
section.charalist > div > ul.charaCard > li.comment::before{
	position: absolute;
	top: 2px;
	left: 0;

	content: "Comment:";
	font-size: 0.75em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;	
	opacity: 0.5;
}


section.charalist > div > ul.charaCard > li.image{
	position: absolute;
	top: calc((0.75em / 2) - 1px);
	right: calc((0.75em / 2) - 1px);

	width: calc((100% - 0.75em) + 2px);
	height: calc((100% - 0.75em) + 2px);

	z-index: 10;
	opacity: 0.3;
	transition: 0.25s;
	border-radius: 5px;
	pointer-events: none;
	user-select: none;
	overflow: hidden;
}
section.charalist > div > ul.charaCard > li.image img{
	position: absolute;
	top: 0px;
	right: 0px;

	width: 100%;
	/* min-height: 300px; */
}

section.charalist > div > ul.charaCard:hover li.image{
	opacity: 0.4;
}


/* --- 島リス --- */


section.islandlist > div{
	margin: 1em auto 0 auto;
	overflow-x: scroll;

	width: 100%;
}
section.islandlist > div.islandlist > div.new_island{
	width: fit-content;
	margin: 1em 0.75em;
	border: 2px solid #efefef;
	border-radius: 3px;
	transition: 0.2s;
}
section.islandlist > div.islandlist > div.new_island > a{
	display: block;
	padding: 0.5em 1em;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: 0.2s;
}
section.islandlist > div.islandlist > div.new_island:hover{
	background-color: #efefef;
}
section.islandlist > div.islandlist > div.new_island > a:hover{
	color: #202020;
}

section.islandlist > div > ul.island_sort{
	margin: 0 0 1em 0.8em;
	display: flex;
	min-height: auto;
	max-height: auto;
}
section.islandlist > div > ul.island_sort > li{
	width: fit-content;
	margin: 0 0.25em;
}
section.islandlist > div > ul.island_sort > li:first-of-type{
	margin: 0 0.25em 0 0;
}
section.islandlist > div > ul.island_sort:hover > li{
	background-color: rgba(0, 0, 0, 0.6);
	transform: translateY(0px);
}
section.islandlist > div > ul.island_sort > li:hover,
section.islandlist > div > ul.island_sort > li.choice{
	background-color: rgba(20, 20, 20, 0.6);
	transform: translateY(2px);
}
section.islandlist > div > ul.island_sort > li > a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.75em;
	text-decoration: none;
}

section.islandlist > div > ul{
	width: 98%;
	min-width: 600px;

	min-height: 150px;
	margin: 0.1em auto;

	display: grid;
	grid-template-columns: 75px 4fr 1fr 1fr 1fr;
	grid-template-rows: 50px 1fr 60px;
}

section.islandlist > div > ul.sample{
	margin: 0.1em auto 1em auto;

	display: grid;
	grid-template-columns: 75px 4fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 55px 60px;
}

section.islandlist > div > ul > li{
	margin: 0.05em;
	padding: 0 0.5em;
	background-color: rgba(0, 0, 0, 0.6);

	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 3px;
	transition: 0.1s;
}
section.islandlist > div > ul:hover > li{
	background-color: rgba(20, 20, 20, 0.6);
	transform: translateY(2px);
}
section.islandlist > div > ul.sample:hover > li{
	background-color: rgba(0, 0, 0, 0.6);
	transform: translateY(0px);
}

section.islandlist > div > ul > li.difficulty > p,
section.islandlist > div > ul > li.size > p,
section.islandlist > div > ul > li.capacity > p{
	font-size: 0.85em;
}

section.islandlist > div > ul > li.ino{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 4;
}

section.islandlist > div > ul > li.name{
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;

	justify-content: flex-start;
	padding: 0.25em 0.5em;
}
section.islandlist > div > ul > li.name > a{
	width: 100%;
	text-decoration: none;
	word-break: break-all;
}
section.islandlist > div > ul > li.name > a:hover{
	color: #ababab !important;
}
section.islandlist > div > ul > li.name small{
	margin: 0 0.5em;
} 

section.islandlist > div > ul > li.comment{
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;

	padding: 0.5em;
	justify-content: flex-start;
	align-content: center;
	overflow-x: auto;
	flex-flow: wrap;
}
section.islandlist > div > ul > li.comment > p.detail{
	width: 100%;
	margin: 0.5em 0 0 0;
	font-size: 0.8em;
	color: #bcbcbc;
}
section.islandlist > div > ul > li.comment > p.tag,
span.tag{
	margin: 0 0.5em 0 0;
	padding: 0.1em 0.3em;
	color: #efefef;
	border-radius: 3px;
	font-size: 0.7em;
}

p.casu, span.casu{
	border: 1.5px solid #3370cc;
}
p.suv, span.suv{
	border: 1.5px solid #33cc70;
}
p.hard, span.hard{
	border: 1.5px solid #cc3370;
}

p.sml, span.sml{
	border: 1.5px solid #1168a6;
}
p.mid, span.mid{
	border: 1.5px solid #11a668;
}
p.lrg, span.lrg{
	border: 1.5px solid #a61168;
}

p.pass, span.pass{
	border: 1.5px solid #902dc5;
}
p.offi, span.offi{
	border: 1.5px solid #e9e9e9;
}
p.prive, span.prive{
	border: 1.5px solid #bc9a45;
}
p.game, span.game{
	border: 1.5px solid #45aabc;
}
p.role, span.role{
	border: 1.5px solid #bc4598;
}
p.sex, span.sex{
	border: 1.5px solid #ce58ba;
}
p.vio, span.vio{
	border: 1.5px solid #802626;
}
p.blind, span.blind{
	border: 1.5px solid #6b6b6b;
}
p.mugon, span.mugon{
	border: 1.5px solid #548026;
}
p.darekan, span.darekan{
	border: 1.5px solid #d2937d;
}

section.islandlist > div > ul > li.member_icon{
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 4;

	display: flex;
	justify-content: flex-start;	
	align-items: center;
	overflow-x: scroll;
}
section.islandlist > div > ul > li.member_icon > p{
	margin: 0 0 0.25em 0;
	justify-content: flex-start;
}
section.islandlist > div > ul > li.member_icon > a > img,
section.islandlist > div > ul > li.member_icon span.noic > img{
	width: calc(50px - 0.75em);
	height: calc(50px - 0.75em);;
	margin: 0 0.25em 0 0;
	border-radius: 2px;
}
section.register > form.island_reg_form{
	display: block;
	margin: 1em 0.5em;
	text-align: left;
}
/* --- ホーム画面 --- */


section.news{
	height: 4.5em;
	min-height: auto;
	font-size: 1.5em;
}
section.news > div{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}
section.news > div > p{
	width: fit-content;
	padding: 0 5%;
	word-break: keep-all;
	white-space: nowrap;
	transform: translateX(100%);
	animation: marquee 25s linear infinite;
	display: block;
    text-align: center;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


section.home,
section.profile{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	align-content: flex-start;
}

section.home h3,
section.profile h3{
	display: block;
	width: 100%;
}

section.home div.info_space,
section.profile div.info_space{
	width: calc(100% - (400px + 4em));
	margin: 0;

	display: flex;
	flex-flow: column;
}

section.home > div > .status,
section.profile > div > .status{
	position: relative;

	width: 100%;
	margin: 0;
    padding: 0.5em;

	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.5);
}
section.profile > div > .status{
	height: fit-content;
}

section.home > div > .status > div,
section.profile > div > .status > div{
	padding: 0 0 1em 0;
}
section.home > div > .status > div.serif,
section.profile > div > .status > div.serif{
	max-width: 100%;
	width: unset;
	margin: 0.5em 0.5em 1em 0.5em;
}
.profile.island > div.info_island > div > div.prof_text > p{
	margin: 1em;
    padding: 0.5em 1em 1em 1em;
    min-height: 100px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
}


section.home > div > .status > div.resource{
	padding: 0.5em 0 1em 0;
	border-bottom: unset;
}

section.home > div > .status > div > h4,
section.profile > div > .status > div > h4{
	margin: 0 0 0 0.25em;
	font-family: 'Jura', sans-serif;
	opacity: 0.75;
}

section.home > div > .status > div > div,
section.profile > div > .status > div > div{
	display: flex;
	flex-flow: wrap;
	justify-content: space-evenly;
	align-items: flex-end;
}
section.home > div > .status > div > div.life_sub{
	font-size: 0.9em;
}

section.home > div > .status > div > div > p,
section.profile > div > .status > div > div > p{
	font-family: 'Jura', sans-serif;
}
section.home > div > .status > div > div > p > b,
section.profile > div > .status > div > div > p >b{
	font-size: 2em;
}
section.home > div > .status > div > div > p > span.fas,
section.profile > div > .status > div > div > p > span.fas{
	margin: 0 0.25em;
	font-size: 1.25em;
}
section.home > div > .status > div > div > p > span.state,
section.profile > div > .status > div > div > p > span.state{
	font-size: 1.75em;
	font-family: 'BIZ UDGothic', sans-serif;
}
section.home > div > .status > div > div.basho > p > span,
section.profile > div > .status > div > div.basho > p > a{
	font-size: 1.3em;
	font-family: 'BIZ UDGothic', sans-serif;
}

section.home > div > .status > div > div > p > span,
section.profile > div > .status > div > div > p > span{
	font-size: 0.75em;
}

section.home > div > .system_log > h4,
section.profile > div > .iconlist > h4{
	margin: 0 0 0 0.25em;
	font-family: 'Jura', sans-serif;
	opacity: 0.75;
}
section.home > div > .system_log,
section.profile > div > .iconlist{
	width: 100%;
	height: 270px;
	min-height: 270px;
	max-height: 600px;
	margin: 0.5em 0;
    padding: 0.5em;

	display: flex;
	flex-flow: column;

    border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.5);
}
section.profile > div > .iconlist{
	height: fit-content;
}


section.home > div > .system_log ul,
section.profile > div > .iconlist ul{
	overflow-y: scroll;
	width: 100%;
}
section.home > div > .system_log ul{
	display: flex;
	flex-flow: column;
}
section.home > div > .system_log li{
	padding: 0.5em 0.5em;
	border-bottom: 2px solid #bcbcbcbc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section.home > div > .system_log li span.small{
	width: 100%;
}
section.home > div > .system_log li p{
	width: 80%;
	font-size: 0.9em;
	word-break: break-all;
}

section.profile > div > .iconlist ul{
	margin: 0.5em auto;
	max-width: calc(900px + 1em);

	display: flex;
	flex-flow: wrap;
}
section.profile > div > .iconlist ul > li > img{
	width: 60px;
	min-height: 60px;
	max-height: 120px;
}

section.home > .image,
section.profile > .image{
	position: relative;

	margin: 0 0.5em;
	width: calc(400px + 2em);
	height: fit-content;

	display: flex;
	align-content: center;

    background-position: 50% 100%;
	background-size: cover, auto;
	background-repeat: repeat;
	background-color: rgba(0, 0, 0, 0.2);
	background-blend-mode: overlay;
    border-radius: 5px;
}
section.profile > .image{
	height: 100%;
}

section.home > div.image > div,
section.profile > div.image > div{
	margin: 0.5em;
    padding: 0.5em;
	width: calc(100% - 1em);
    height: calc(100% - 1em);

    border-radius: 5px;
	background-image: url('../imgs/black-twill.png');
	background-repeat: repeat;
	background-color: rgba(0, 0, 0, 0.5);
}

/* section.profile > .image{
	background-color: rgba(0, 0, 0, 0.5);
}
section.profile > div.image > div{
	background-color: rgba(0, 0, 0, 0);
} */

section.home > .image > div > img,
section.profile > .image > div > img{
	width: 100%;
	min-height: 200px;
}
img.image{
	max-width: 100%;
}
section.profile > div.prof_text,
section.profile > div.diary,
section.profile > div.adv{
	margin: 0.5em 0;
	padding: 0.5em 1em 1em 1em;

	width: 100%;
	height: fit-content;
	min-height: 100px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.5);
}
section.profile > div.prof_text > h4,
section.profile > div.diary > h4,
section.profile > div.adv > h4,
section.omake > div.adv > h4{
	margin: 0 0 0.5em 0;
	font-family: 'Jura', sans-serif;
	opacity: 0.75;
}
section.profile > div.prof_text > div,
section.record > div{
	word-break: break-all;
}
section.profile > div.diary > ul > li,
section.omake > div.diary > ul > li{
	margin: 0 0 0 1em;
	list-style-type: unset;
}

section.profile div.adv ul,
section.omake div.adv ul{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
section.profile div.adv ul > li,
section.omake div.adv ul > li{
	width: 100%;
	margin: 0.5em 0;
	padding: 0.25em 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
}
section.profile div.adv ul > li > img,
section.omake div.adv ul > li > img{
	width: 60px;
	height: 60px;
	margin: 0.5em;
	border-radius: 3px;
}
section.profile div.adv ul > li > div,
section.omake div.adv ul > li > div{
	width: calc(100% - (60px + 0.5em));
}
section.profile div.adv ul > li > div > h5,
section.omake div.adv ul > li > div > h5{
	font-size: 1em;
}
section.profile div.adv ul > li > div > h5 > small,
section.omake div.adv ul > li > div > h5 > small{
	margin: 0 0.25em;
	font-size: 0.7em;
}
section.profile div.adv ul > li > div > p,
section.omake div.adv ul > li > div > p{
	font-size: 0.8em;
}
section.profile div.adv ul > li > div > p > i,
section.omake div.adv ul > li > div > p > i{
	font-size: 0.9em;
	word-break: break-all;
}
section.profile div.adv ul > li > div > p > i > img[src*="mate"],
section.omake div.adv ul > li > div > p > i > img[src*="mate"]{
	padding: 0 0.15em;
	height: 1.25em;
}
.close_adv{
	opacity: 0.6;
}

@media only screen and (max-width:1100px){

	section.home,
	section.profile{
		flex-flow: column-reverse;
		align-content: center;
	}
	main > section.island{
		flex-flow: column;
		justify-content: flex-start;
		align-content: flex-start;
	}

	section.home > h3,
	section.profile > h3{
		order: 3;
	}
	main > section.island > h3{
		order: 0;
	}

	section.home > .image,
	section.profile > .image{
		order: 2;
		margin: 0.5em 0;
		width: 100%;
	}
	section.home > div.image > div,
	section.profile > div.image > div{
		height: auto;
		text-align: center;
	}
	section.home > div.image > div > img,
	section.profile > div.image > div > img{
		width: 400px;
	}
	section.home > div.info_space,
	section.profile > div.info_space{
		order: 1;
		margin: 0;
		width: 100%;
	}	
	main > section.island > div.info_island{
		order: 0;
	}

	section.home > div > .status,
	section.profile > div > .status{
		height: fit-content;
	}

	section.profile > div.prof_text,
	section.profile > div.diary{
		margin: 0.5em 0;
	}
	section.profile > div.prof_text{
		order: -1;
	}
	section.profile > div.diary{
		order: 0;
	}
	section.profile > div.adv{
		order: -3;
	}
}



/* --- 島プロフ --- */



section.island{
	min-height: auto;
}

div.info_island{
	width: 100%;
	margin: 0 auto;
    display: flex;
    flex-flow: column;
}
div.tags{
	width: 100%;
}

ul.facility{
	margin: 1em 0;
	display: flex;
	flex-flow: column;
	transition: height 0.25s;
}

ul.facility > li > ul{
	padding: 0.1em 0.25em;
	display: flex;
	justify-content: space-around;
}
ul.facility > li:first-of-type > ul{
	margin: 0 0 0.5em 0;
}
ul.facility > li.close > ul > li{
	height: 40px;
}
ul.facility > li.close > ul > li > p{
	font-size: 0;
}
ul.facility > li.close > ul > li.fac_dis{
	margin: 0;
}

ul.facility > li > ul > li{
	padding: 0.25em;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	transition: 0.1s;
	border-radius: 3px;

    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
	word-break: break-all;

}
ul.facility > li > ul:hover > li{
	background-color: rgba(100, 100, 100, 0.5);
	transform: translateY(2px);
}
ul.facility > li:first-of-type  > ul:hover > li{
	background-color: rgba(0, 0, 0, 0.5);
	transform: translateY(0px);
}
ul.facility > li > ul > li.fac_name{
	width: 20%;
}
ul.facility > li > ul > li.fac_dis{
	margin: 0 0.15em;
	width: 70%;
}
.base ul.facility > li > ul > li.fac_dis{
	width: 80%;
}
ul.facility > li > ul > li.fac_loc{
	width: 10%;	
}
ul.facility > li > ul > li > p{
	margin: auto 0;
	word-break: break-all;
    font-size: 0.8em;
}

/* --- チャット --- */


.appear{
	height: auto !important;
	opacity: 1 !important;
	pointer-events: unset !important;
}

ul.talk_category{
	margin: 0.5em 0 0 0;
	display: flex;
	justify-content: flex-start;
}
ul.talk_category > li{
	display: flex;
	align-items: center;
	margin: 0 0.5em;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	transition: 0.2s;
}
ul.talk_category > li:first-of-type{
	margin: 0 0.5em 0 0;
}

ul.talk_category > li > a,
ul.talk_category > li span{
	display: block;
	padding: 0.5em 1em;
	font-family: 'Jura', sans-serif;
	font-weight: bold;
	text-decoration: none;
}
ul.talk_category > li > form > span{
	font-weight: normal;
	font-family: 'BIZ UDGothic', sans-serif;
	font-size: 0.8em;

	padding: 0 1.25em 0 0;
}
ul.talk_category > li > form button{
	width: 100%;
	margin: 0;
	padding: 0.25em 0.25em 0.25em 1em;

	border: none;
	font-size: 1.3em;
	font-family: "Font Awesome 5 Free";
}
ul.talk_category > li > form button:hover{
	background-color: rgba(0, 0, 0, 0);
}
ul.talk_category > li > form > label > input{
	width: 4em;
	margin: 0.25em;
	border: 0;
	text-align: right;
}

ul.talk_category > li:hover,
ul.talk_category > li.check{
	background-color: rgba(255, 255, 255, 0.5);
}

ul.talk_category > li:hover > a,
ul.talk_category > li.check > a,
ul.talk_category > li:hover > form button{
	color: #202020;
}
div.view_chats{
	padding: 0.5em 0;
	display: flex;
	justify-content: flex-end;
}


/* @media only screen and (max-width: 800px){
	ul.talk_category{
		flex-wrap: wrap;
	}
	ul.talk_category > li:last-of-type{
		margin: 0 0 0.75em;
	}
	ul.talk_category > .view_chats{
		order: -1;
		width: 100%;
	}
	ul.talk_category > .view_chats > form{
		width: 100%;
		justify-content: space-around;
	}
	ul.talk_category > li > form button{
		width: 50%;
	}
	ul.talk_category > li > form > label > input{
		width: 8em;
	}	
} */

section.chat > .remark_area{
	width: 100%;
	min-height: 235px;
	margin: 0.5em 0;
	padding: 0.5em;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
}

section.chat > .remark_area > ul{
	margin: 0 0 1em 0;
	display: flex;
}
section.chat > .remark_area > ul > li{
	margin: 0 0.25em;
	padding: 0 0.75em;

	font-family: 'Jura', sans-serif;
	font-weight: bold;
	font-size: 1.4em;

	cursor: pointer;
	user-select: none;
	border-radius: 3px;
	border-bottom: 3px solid #efefef00;
	transition: 0.2s;
}
section.chat > .remark_area > ul > li:hover{
	border-bottom: 3px solid #efefefef;
}
section.chat > .remark_area > ul > li.selected{
	border-bottom: 3px solid #efefefef;
}

section.chat > .remark_area > form{
	height: 0;
	margin: 0;

	opacity: 0;
	overflow: hidden;
	pointer-events: none;

	display: flex;
	flex-flow: wrap;
}
section.chat > .remark_area.kakioki{
	margin: 1em 0;
	min-height: auto;
}
section.chat > .remark_area.kakioki > form{
	display: flex;
	flex-flow: wrap;
}

section.chat > .remark_area > form.appear{
	margin: 0 0.5em 0.5em 0.5em;
	padding: 0.1em;
}
section.chat > .remark_area.kakioki > form.appear{
	margin: 0.75em 0.5em 0.5em 0.5em;
	display: flex;
	flex-flow: wrap;
}

section.chat > .remark_area > form > div.name_icon{
	margin: 0 0 0 0.1em;
	width: 100%;
	display: flex;
}

section.chat > .remark_area > form > div.name_icon > label{
	margin: 0 0.5em 0 0;

	display: flex;
	align-items: center;
}

section.chat > .remark_area > form > div > label.hatugen{
	display: flex;
	align-items: center;
}

section.chat > .remark_area > form > div > label.hatugen > div{
	position: relative;
	width: 60px;
	height: 60px;

	border-radius: 2px;
	overflow: hidden;
	transition: 0.25s;
}
.ic_choose{
	width: 100%;
	height: 100%;
	cursor: pointer;
}
section.chat > .remark_area > form > div > label.hatugen > div:hover{
	box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 75%);
}

section.chat > .remark_area > form > div > label.hatugen > div > b{
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	pointer-events: none;

	font-size: 0.75em;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.6);
	z-index: 20;
	transition: 0.25s;
}
section.chat > .remark_area > form > div > label.hatugen > div:hover > b{
	color: #FFFFFF;	
}

section.chat > .remark_area > form > div > .target{
	display: flex;
	align-items: center;
	align-content: flex-end;
}
section.chat > .remark_area > form > div > .target > input{
	width: 6em;
}

section.chat > .remark_area > form > div > label.hatugen > textarea{
	margin: 0 0 0 0.25em;
	width: 32em;
	height: 60px;
	word-break: break-all;
}

section.chat > .remark_area > form > label.say{

	height: fit-content;
	display: flex;
	justify-content: center;
	align-self: flex-end;
}
label.say > input{
	margin: 0;
	padding:7px 2em;
}
section.chat > .remark_area > form > div > label.say > input{
	width: 100%;
}
.chat_tool{
	width: 100%;
	display: flex;
	flex-flow: wrap;
	align-items: baseline;
}

section.chat > .remark_area > form > div > small{
	margin: 0 8em 0 1em;
	display: flex;
	font-size: 0.6em;
	pointer-events: none;
	align-items: center;
}
section.chat > .remark_area > form > div > small .fas{
	margin: 0.25em 0.25em 0 0.25em;
	pointer-events: all;
}

.decoration_area {
	padding: 5px 0 0 60px;
	display: flex;
}
form#diary > .decoration_area,
form#messebottle > .decoration_area,
label > .decoration_area{
	padding: 5px 0 0 0;
}


.kakioki .decoration_area{
	padding: 5px 0 0 0;
}

.decoration_area > .message-control-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	font-size: 16px;
	padding: 5px 5px;
	margin-right: 2px;
	border-radius: 4px;
	background-color: #ffffff00;
	transition: linear 0.1s background-color;
	cursor: pointer;
}

.decoration_area > .message-control-icon:last-child {
	margin-right: 0;
}

.decoration_area > .message-control-icon:hover {
	background-color: #ffffff33;
}

@media screen and (max-width: 800px) {
	.decoration_area {
		padding: 5px 0 0 0;
		align-items: flex-end;
	}
}

@media screen and (max-width: 320px) {
	.decoration_area > .message-control-icon {
		width: 12px;
		height: 12px;
		font-size: 12px;
	}
}


/* --- */



section.chat > .talk > .talk_list{
	margin: 0;

    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-rule: 2px solid #bbbbbb;
    column-fill: balance;
}

section.chat > .talk > .talk_list div.chat_shout{
	width: 100%;
	margin: 0.5em auto;
	padding: 0;
	position: relative;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;

	display: inline-flex;
	flex-flow: wrap;
}
section.chat > .talk > .talk_list div.system{
	background-color: rgba(50, 50, 60, 0.5);
}
section.chat > .talk > .talk_list div.special{
	background-color: rgba(45, 45, 20, 0.5);	
}
section.chat > .talk > .talk_list div.EX{
	background:linear-gradient(217deg, rgba(255, 170, 153, 0.1) 0%, rgba(255, 204, 153, 0.1) 14.28%, rgba(255, 255, 153, 0.1) 28.56%, rgba(153, 255, 153, 0.1) 42.85%, rgba(153, 255, 255, 0.1) 57.14%, rgba(153, 204, 255, 0.1) 71.42%, rgba(255, 153, 255, 0.1) 85.71%, rgba(255, 153, 153, 0.1) 100%),url(../imgs/black.png);
}
section.chat > .talk > .talk_list div.message{
	background-color: rgba(20, 45, 40, 0.5);	
}
section.chat > .talk > .talk_list div.mychat{
	background-color: rgba(45, 20, 24, 0.5);	
}
section.chat > .talk > .talk_list div.kaki{
	background-color: rgba(36, 30, 23, 0.5);
}
section.chat > .talk > .talk_list div.reply{
	animation: show_reply 0.75s ease-out forwards;
	max-height: 0;
}
section.chat > .talk > .talk_list div.preview{
	opacity: 0.7;
}

@keyframes show_reply {
	to {max-height: 999px;}
}

div.icon{
	margin: 0.5em 0 0 0.5em;
	align-self: flex-end;
}
div.icon img{
	width: 60px;
	max-height: 120px;
	min-height: 60px;

	border-radius: 2px;
}
div.system > .chat_nakami > p{
	width: 100%;
}
div.chat_shout > .chat_data{
	margin: 0.5em 0.5em 0 0.5em;
	padding: 0.5em 0 0 0;
	width: calc(100% - (60px + 2em));
	align-self: flex-end;
	
	border-bottom: 2px solid #b1b1b1;
	font-size: 0.65em;
}
div.system > .chat_data,
div.iamge > .chat_data,
div.special > .chat_data,
div.kaki > .chat_data,
div.EX > .chat_data{
	width: 100%;
}

div.chat_shout > .chat_data > span.chat_name{
	margin: 0;
	font-size: 1.5em;
}
div.chat_shout > .chat_data > span.chat_name > a{
	text-decoration: none;
}
div.chat_shout > .chat_data > span.chat_loc,
div.chat_shout > .chat_data > span.chat_time,
div.chat_shout > .chat_data > span#anker{
	margin: 0 0 0 0.25em;
}
div.chat_shout > .chat_data > span.chat_time{
	color: #AAAAAA;
}

div.chat_shout > .chat_nakami{
	margin: 0 auto 0.5em auto;
	padding: 0.75em 0.5em 0.5em 0.5em;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
}
div.iamge > .chat_nakami{
	flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
}

.chat_shout > .chat_nakami > div{
	align-self: flex-start;
}

.chat_shout > .chat_nakami > p{
	width: 32em;
	margin: 0 0.5em;

	font-size: clamp(0.75em, 1.2vw, 0.9em);
	align-self: center;
	word-break: break-all;
}
#anker,
#anker_eno{
	color: #AAAAAA;
	cursor: pointer;
	transition: 0.1s;
}
#anker:hover,
#anker_eno:hover{
	color: #787878;
}
span[id*="res"]{
	color: #95a9ff;
	cursor: pointer;
	transition: 0.2s;
}
span[id*="res"]:hover{
	color: #cdd5f8;
}
span.large{
	font-size: 1.8em;
}
span.small{
	font-size: 0.8em;
}
div.pager{
	display: flex;
	justify-content: space-between;
}
div.pager > .pager_right{
	text-align: right;
}
.rainbow {
	padding: 5% 0 0 0;
	background: linear-gradient(to right, #fa9 0%, #fc9 14.28%, #ff9 28.56%, #9f9 42.85%, #9ff 57.14%, #9cf 71.42%, #f9f 85.71%, #f99 100%)
	 0% center / 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 20s linear infinite;
    text-align: center;
	font-size: 1em;
	font-weight: bold;
	margin: 0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;	
}
div.nakami > p > span.rainbow{
	padding:100% 0;
}
@keyframes rainbow {
	to { background-position-x: 200%; }
		0% {transform: translate(0px, 0px) rotateZ(0deg)}
	  25% {transform: translate(4px, 4px) rotateZ(3deg)}
	  50% {transform: translate(0px, 4px) rotateZ(0deg)}
	  75% {transform: translate(4px, 0px) rotateZ(-3deg)}
	  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.image .chat_nakami > p{
	width: 100%;
	align-self: flex-start;
}
div.photo{
	margin: 1em auto;
	padding: 1em 1em 1em 1em;
	max-width: 90%;

	background-color: #efefef;
	border-radius: 3px;
	overflow: hidden;
}
div.photo > p{
	width: 100%;
	text-align: center;
	margin: 0.5em 0 0 0;
	font-weight: bold;

	color: #404040;
	font-size: 1.25em;
}
div.iamge div.photo > img{
	width: 100%;
	max-width: 400px;
	max-height: 500px;

	margin: 0 auto;
}
div.photo.phone{
	width: 400px;
	max-width: 90%;
	max-height: 280px;
	position: relative;
	padding: 0;

	display: flex;
    align-items: center;
	background-color: transparent;
}
div.photo.phone > p{
	display: none;
}
img.phone{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 15;

	width: 400px;
	max-width: 100%;
	height: auto;
	transition: 0.15s;
}
img.phone:hover{
	opacity: 0;
}
div.photo.phone > img.phone + img{
	aspect-ratio: 16 / 9;
}

span.ellipsis{
	position: absolute;
	top: 0.25em;
	right: 0.5em;

	padding: 0;
	cursor: pointer;
	transition: 0.2s;
	z-index: 200;
}
span.ellipsis:hover{
	color: #b2b2b2;
}
form.chat_menu{
	position: absolute;
	top: 0;
	right: 2em;

	padding: 0;
	border-radius: 5px;
	background-color: rgba(77, 82, 87, 0.9);
    box-shadow: 4px 4px 4px rgb(62 47 48 / 40%);
	opacity: 0;

	pointer-events: none;
	transition: 0.2s;
	z-index: 10;
}
span.ellipsis.show_menu + form.chat_menu{
	opacity: 1;
	pointer-events: all;
}
span#hide_reply{
	position: absolute;
	top: 0.25em;
	right: 0.5em;

	padding: 0;
	cursor: pointer;
	transition: 0.2s;
	z-index: 200;

}


form.chat_menu > .chat_hidden,
form.chat_menu > label > input{
	display: block;
	margin: 0;
	padding: 1em;

	width: 100%;
	text-align: left;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-size: 0.75em;
	font-family: 'BIZ UDGothic', sans-serif;
}

form.chat_menu > .chat_hidden:hover,
form.chat_menu > label > input:hover{
	margin: 0;
	padding: 1em;
	color: #000000;
	background-color: rgba(230, 230, 230, 0.75);
	border: none;
	border-radius: 5px;
}


@media only screen and (max-width:1250px){

	section.chat > .talk > .talk_list{
		column-count: 1;
		-webkit-column-count: 1;
		-moz-column-count: 1;
	}

	.chat_shout > .chat_nakami > p{
		width: 100%;
		font-size: clamp(0.75em, 1.5vw, 1.25em);
	
		margin: 0 0.5em;
		word-break: break-all;
	}

}


/* アクション画面 */


section.chat div#action_form{
	height: 0;
	margin: 0;
	padding: 0 0.5em;

	opacity: 0;
	/* overflow: hidden; */
	pointer-events: none;

	font-size: 0.9em;
}
section.chat div#action_form.appear{
	margin: 0 0.5em 0.5em 0.5em;
}

section.chat div#action_form > select{
	width: 32em;
	max-width: 100%;
	margin: 0.25em 0;
}
section.chat div#action_form > form{
	margin: 1em 0;
}
div#action_form > form > label > input[type="text"]{
	margin: 0.5em 0.5em 0.5em 0;
}
div#action_form > form > label > input[type="submit"]{
	margin: 0.5em 0;
}

input[name="title"]{
	width: 100%;
	max-width: 24em;

}
textarea[name="content"]{
	width: 100%;
	max-width: 600px;
	height: 18em;
}

form#diary > details > summary{
	margin: 0 0 0.5em 0;
}
form#diary > details > .honbun{
	margin: 0 0 0 0.5em;
}


/* --- アイテム欄 --- */


section.item,
section.base{
	min-height: auto;
}
section.item > p,
section.item form,
section.item > div > ul,
section.base > p,
section.base form,
section.base > div > ul{
	padding: 0 1em;
}
section.item > .item_list > p,
section.base > .item_list > p{
	margin: 0.5em 1em;
}
section.item > .item_list > p > img:nth-of-type(2),
section.base > .item_list > p > img:nth-of-type(2){
	margin: 0 0 0 1em;
}
section.item > div ul.item_card,
section.base > div ul.item_card{
	margin: 0 0 0.1em 0;
	padding: 0.5em 0.75em;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	display: flex;
}
section.item > div li:nth-of-type(-n+5) > ul.item_card,
section.base > div li:nth-of-type(-n+5) > ul.item_card{
	padding: 0.5em 0.75em 0.5em calc(0.25em + 29px);
}
section.item > div ul.item_card > details > p,
section.item > div ul.item_card > details > form,
section.base > div ul.item_card > details > p,
section.base > div ul.item_card > details > form{
	margin: 0.25em 0;
	padding: 0 1em;
}
section.item > div ul.item_card > details[open] > p,
section.base > div ul.item_card > details[open] > p{
	height: fit-content;
    animation: fadeinDetail 0.2s ease;
}
section.item > div ul.liquid,
section.base > div ul.liquid{
	background-color: rgba(0, 10, 25, 0.5);
}

section.item ul > details > form,
section.item ul label,
section.base ul > details > form,
section.base ul label{
	display: flex;
	flex-flow: wrap;
	align-items: center;
}
section.item ul label > span,
section.base ul label > span{
	cursor: pointer;
	color: #ababab;	
}
form label input[type="checkbox"]{
	margin: 0 1.5em;
	cursor: pointer;
}
input[type="checkbox"]:checked ~ span{
	color: #efefef;
}

section.item ul > details > form > label > input:checked + span,
section.base ul > details > form > label > input:checked + span{
	color: #efefef;	
}

@keyframes fadeinDetail {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
div.item_list textarea{
    margin: 0 1.5em;
	padding: 0 0.25em;
    width: 20em;
    height: 30px;
    resize: none;

	font-size: 0.7em;
    font-family: 'メイリオ', sans-serif;
    line-height: 28px;
}


section.item input[type="submit"],
section.base input[type="submit"]{
	margin: 0.5em 0;
}
section.item input[name="eno"],
section.base input[name="eno"]{
	width: 8em;
}
section.item label.radios,
section.base label.radios{
	margin: 0 0.5em 0 0;
	cursor: pointer;
}
.send_chara,
.send_base,
.send_drop,
.send_chara_m,
.send_base_m{
	display: none;
}

section.craft > form{
	margin: 0 1em 1em 1em;
}
section.craft > form > div.craft_command{
	margin: 1em 0.5em;
}

button#toggleBaseitems {
	padding: 4px 1em;
	background-color: rgba(0,0,0,0);
	border: 2px solid #efefef;
	border-radius: 3px;color: #efefef;
	cursor: pointer;transition: 0.25s;
  }
button#toggleBaseitems:hover{
	color: #404040;
	background-color: #efefef;
	border: 2px solid #efefef;
}

div.craft_window{
	margin: 1em 0;
	display: flex;
	flex-flow: row;
}
div.craft_window > div.recipe_list > h4,
div.craft_window > div.craftitem_view > h4{
	padding: 0 0.25em;
	width: 100%;
	font-size: 1em;
}
div.craft_window > div.recipe_list > h4{
	cursor: pointer;
}
div.craft_window > div.recipe_list > h4::after{
	content: " - 開放済のみ表示";
	font-size: 0.7em;
	color: #a0a0a0;
}
div.craft_window > div.recipe_list > h4.toggled::after{
	content: " - 全て表示";
}

div.craft_window > div.craftitem_view > h4{
	padding: 0 0.25em 0.5em 0.25em;
	border-bottom: 1px solid #efefef50;
}

div.craft_window > div.recipe_list{
	margin: 0 0.5em 0 0 ;
	padding: 0.5em;
	height: 400px;

	display: flex;
	flex-flow: column;
	flex-basis: 30%;
	justify-content: space-between;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
}
div.craft_window > div.recipe_list > ul.recipe_box{
	margin: 0.5em 0 auto 0;
	height: calc(100% - 80px);
	display: flex;
	flex-flow: column;

	overflow-y: scroll;
}
div.craft_window > div.recipe_list > ul.recipe_box > li{
	font-size: 0.8em;
	padding: 0.5em 0.25em;
	border-top: 1px solid #efefef50;
	cursor: pointer;
	transition: 0.1s;
	color: #a0a0a0;
}
div.craft_window > div.recipe_list > ul.recipe_box > li:last-of-type{
	border-bottom: 1px solid #efefef50;
}
div.craft_window > div.recipe_list > ul.recipe_box > li:hover,
div.craft_window > div.recipe_list > ul.recipe_box > li.checked{
	background-color: #ffffff30;
}
div.craft_window > div.recipe_list > ul.recipe_box > li.craft{
	color: #efefef;
}
div.craft_window > div.recipe_list > ul.recipe_box > li.yellow{
	color: #fff491;
}
div.craft_window > div.recipe_list > ul.recipe_box > li.close{
	display: none;
}
div.craft_window > div.recipe_list > textarea{
	margin: auto 0 0 0;
    padding: 0.25em;

	width: 100%;
    height: 30px;
    resize: none;

	font-size: 0.7em;
    font-family: 'メイリオ', sans-serif;
}
div.craft_window > div.craftitem_view{
	padding: 0.5em;
	height: 400px;

	display: flex;
	flex-flow: column;
	flex-basis: 70%;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
}
div.craft_window > div.craftitem_view > div{
	margin: 0.5em 0 0 0;
	padding: 0.25em;
}
div.craft_window > div.craftitem_view > div.crafting_button{
	margin: auto 0 0 auto;
}
div.craft_window > div.craftitem_view > div.crafting_button > input[type="submit"]{
	padding: 7px 2em;
}

@media only screen and (max-width:1000px){
	div.craft_window{
		flex-flow: column;
	}
	div.craft_window > div.recipe_list{
		height: 300px;
		margin: 0.5em 0;
		flex-basis: auto;
	}
	div.craft_window > div.craftitem_view{
		height: auto;
		min-height: 200px;
		flex-basis: auto;
	}
}


/* --- 拠点 --- */


section.container.base > h3,
h3#item_inv,
h3#island_top,
h3#adv_list{
	cursor: pointer;
}
section.container.base > h3::after,
h3#item_inv::after,
h3#island_top::after,
h3#adv_list::after{
	content: "- クリックでとじる";
	font-size: 0.5em;
	margin: 0.5em;
	font-weight: normal;
}
section.container.base > h3.close::after,
h3#item_inv.close::after,
h3#island_top.close::after,
h3#adv_list.close::after{
	content: "- クリックでひらく";
}

section.container > .base_info{
	position: relative;
    margin: 0.5em 1em 1.5em 1em;
    padding: 0.5em;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
	transition: 0.25s;
}
section.container > .base_info.close{
	height:0px;
	overflow: hidden;
}

.base_info > h4 {
    margin: 0 0 0 0.25em;
    font-family: 'Jura', sans-serif;
    opacity: 0.75;
}
.base_info > p{
	padding: 0.5em 1em;
	font-size: 0.75em;
}
section.base > .item_list.close{
	height: 0px;
	overflow: hidden;
}
section.item > .item_list.close{
	height: 0px;
	overflow: hidden;
}
section.profile > div > .status.close{
	height: 0px;
	overflow: hidden;
}
section.omake > div.adv.close{
	height: 0px;
	overflow: hidden;
}

.base_info > div.body > div.life{
	display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    align-items: flex-end;
	position: relative;
}
.base_info > div.body > div.life > p{
	font-family: 'Jura', sans-serif;
}
.base_info > div.body > div.life > p > b{
	font-size: 2em;
}
.base_info > div.body > div.life > p > span{
	font-size: 0.75em;
}
.base_info > div.body > div.life > p > span.far{
	cursor: pointer;
}
span.tip{
	opacity: 0;
	position: absolute;
	bottom: 3em;
	pointer-events: none;

	padding: 0.5em;
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.5);
	transition: 0.25s;
}
.base_info > div.body > div.life > p > span.far:hover + span.tip{
	display: inline-block;
	opacity: 1;
}

/* --- 移動探索 --- */

section.field > div.map{
	margin: 0 auto;
	padding: 0em;
	width: 80%;
	max-width: 600px;
	position: relative;

	/* border-radius: 5px;
	background-color: #d2cdb9;
	background-image: url("../imgs/natural-paper.png");
	background-repeat: repeat; */
	/* Background pattern from Toptal Subtle Patterns */
}
section.field > div.map > div[class*="map_"]{
	position: absolute;

/* 	content: "";
	width: 5%;
	height: 7%;

	background-color: rgb(198, 181, 181);
	border-radius: 50%;
	transition: 0.1s; */
}
section.field > div.map > div[class*="map_"] > img{
	width: 7.5vw;
	max-width: 60px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;

	box-shadow: 2px 2px 2px rgb(62 47 48 / 40%);
	border: solid 2px rgba(240, 240, 240, 0.4);
	cursor: pointer;
	transition: 0.15s;
}

section.field > div.map > div[class*="map_"] > p{
	position: absolute;
	top: -2.5em;
	left: 50%;
	right: 50%;
	transform: translateX(-50%);

	padding: 0.25em;
	width: 4em;
	font-size: 0.75em;
	text-align: center;

	background-color: #505050;
	border-radius: 3px;
	pointer-events: none;
	opacity: 0;
	transition: 0.15s;
}

section.field > div.map > div[class*="map_"]:hover > img{
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 2px rgb(62 47 48 / 0);
	border: solid 2px rgba(240, 237, 78, 0.918);
}
section.field > div.map > div[class*="map_"]:hover > p{
	opacity: 1;
}

section.field > div.map > div.map_beach{
	top: 70%;
	left: 75%;
}
section.field > div.map > div.map_forest{	
	top: 35%;
	left: 30%;
}
section.field > div.map > div.map_rocky{
	top: 75%;
	left: 17%;
}
section.field > div.map > div.map_home{
	top: 40%;
	left: 65%;
}
section.field > div.map > div.map_ship{
	top: 20%;
	left: 85%;
}
section.field > div.map > div.map_outer{
	top: 5%;
    left: 70%;
}
section.field > div.map > div.map_sea{
	top: 5%;
    left: 5%;
}

section.field > div.map > img{
	width: 100%;
	border: solid 2px #efefef;
	border-radius: 2px;
	user-select: none;
}

section.field > form,
section.explore > form{
	margin: 1em 2em 1.5em 2em;
}

div.move > div.move_command{
	margin:0;

	display:flex;
	flex-flow: wrap;
	align-content: center;
	align-items: center;
}
div.move > div.move_command > img{
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 3px;
}
div.move > div.move_command > p{
	margin:0.5em;
	font-size:0.9em;
}
div.move > div.move_command > p > b{
	font-size:1.2em
}

section.explore{
	min-height: auto;
}
ul[class*="_choice"]{
	margin: 0.5em 0;
	display: flex;
	flex-flow: wrap;
	align-content: flex-start;
}
ul[class*="_choice"] > li{
	width: 60px;
	height: 60px;
	margin: 0 0.5em 0.5em 0;
	border: solid 2px rgba(240, 240, 240, 0.7);
	background-color: rgba(240, 240, 240, 0.75);
	border-radius: 3px;

	cursor: pointer;
	transition: 0.15s;
	box-shadow: 2px 2px 2px rgb(62 47 48 / 40%);
}
ul[class*="_choice"] > li:hover{
	border: solid 2px rgba(240, 237, 78, 1);
	box-shadow: 2px 2px 2px rgb(62 47 48 / 0);
	transform: translate(0px, 2px);
	background-color: rgba(240, 240, 240, 1);
}
ul[class*="_choice"] > li.broken{
	filter: brightness(0.5);
}
ul[class*="_choice"] > li.collect,
ul[class*="_choice"] > li.checked{
	box-shadow: 0px 0px 2px 2px #fae476;
}
ul[class*="_choice"] > li > img{
	width: 100%;
	height: 100%;
}
section.explore div.hunt_command{
	margin: 0.5em 0;
}
section.action > p{
	margin: 1em 2em;
}
section.action > div{
	margin: 0 2em;
}
div.field_action{
	margin: 1em 2em 1.5em 2em;
}

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



footer{
	width: 100%;
	padding: 1em 0;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #efefef;
	font-family: 'Jura', sans-serif;
}
footer p,
footer h1{
	font-family: 'Sansita Swashed', cursive;
	color: #efefef;
}
footer > small{
	display: inline-block;
}






/* --- メディアクエリ --- */







@media only screen and (max-width:830px){

body{
	background-position: 55%;
}
main{
	padding: 0 0.5em;
}
form{
	word-break: break-all;
}

header > .state_area{
	width: 30%;
	margin: 0;
}
header > .state_area > div{
	width: 100%;
	max-width: 300px;
	min-width: 50px;
}
header .day{
	font-size: 2.5em;
	margin: 0;
}
header .day > p > small.max{
	display: none;
}
header .sub_area{
	font-size: 0.75em;
}
header .sub_area > p{
	font-size: 2em;
	padding: 0 0.5em;
}
header > .sub_area > p > small.weather_title{
	display: none;
}
div.menu_button{
	width: 75px;
    margin: 0 0 0 auto;
}
div.menu_button > p.fas{
	font-size: 5em;
}
div.top_button{
	bottom: 1em;
	right: 1em;
}
header > .charaBanner > .hp_guege{
    top: -10px;
    left: -10px;
}

ul.material_bar{
	left: 5vw;
}
ul.material_bar.short{
	height: 45px;
	padding: 0 1em 1em 0.75em;
}

ul.material_bar.short > li{
	padding: 0;
}
ul.material_bar.short > li > span{
	opacity: 0;
}
ul.material_bar > li{
	padding: 1em 0;
}
ul.material_bar > li > span{
	opacity: 1;	
}

.modal > ul > li > img{
	width: 40px;
	max-height: 80px;
	min-height: 40px;
}


form input[type="submit"], form button{
	font-size: 0.75em;
}

/* --- */


section.container{
    padding: 1.5em;
	font-size: 1.3em;
}

h1 > img{
	width: 70%;
}
section.container p{
	word-break: break-all;
}

section.top > div{
	margin: 100px auto;
	/* font-size: 2em; */
}
section::before{
	/* font-size: 2em; */
	top: 15px;
    right: 20px;
}

section.container h3{
	margin: 0.5em 0;
	padding: 0 0 0 0.5em;
}
section.container > p{
	margin: 0 0.75em;
	word-break: break-all;
}
section.container > small{
	font-size: 0.75em;
}
div.serif{
	max-width: 100%;
}
div.serif{
	word-break: break-all;
}

section.container td{
	padding: 0.5em 0.75em;
}
section.container td > p{
	margin: 0;
}

section.container.rule > p{
	margin: 0 0.75em 1em 0.75em;
	word-break: break-all;
}

section.chat > .remark_area{
	min-height: auto;
}

section.chat > .remark_area > form{
	width: 100%;
	margin: 0;

}
section.chat > .remark_area.kakioki > form{
	width: 100%;
	margin: 0;

}

section.chat > .remark_area > form > div.name_icon{
	margin: 0 0 0 0.1em;
	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
}
section.chat > .remark_area > form > div.name_icon> .nickname > span{
	width: 60px;
	text-align: right;
}

section.chat > .remark_area > form > div.name_icon > label{
	margin: 0 0.5em 0 0;

	display: flex;
	align-items: center;
}
section.chat > .remark_area > form > div > label.hatugen > textarea{
	width: calc(100% - (60px + 1em));
}
section.chat > .remark_area > form > div.chat_input{
	width: 100%;
}

section.chat > .remark_area.kakioki > form > div > label.hatugen{
	width: 100%;
	display: flex;
	align-items: center;
}
section.chat > .remark_area.kakioki > form > label.hatugen > textarea{
	margin: 0 0 0 0.5em;
	width: 100%;
	height: 100%;
}
div.chat_tool{
	width: 100%;
}

label.say > input{
	margin: 0;
	padding:7px 1.5em;
}

section.chat > .remark_area > form > div > small{
	margin: 0 1em;
	padding: 0.25em;
	font-size: 0.75em;
}

section.chat > .remark_area > form > div > .target{
	margin: 0 0 0 calc(60px + 0.15em);
}

div.icon img {
    width: 40px;
    max-height: 80px;
    min-height: 40px;
}

.chat_shout > .chat_nakami > p{
	width: 100%;
	font-size: clamp(0.8em, 2vw, 1.5em);

	margin: 0 0.5em;
	word-break: break-all;
}
div.chat_shout > .chat_data > p{
	margin: 0 0.25em;
	font-size: 1.5em;
}
div.chat_shout > .chat_data > span{
	font-size: 1.1em;
}
div.chat_shout > .chat_data > span.chat_time{
	font-size: 1em;
}
section.home > div > .system_log li p{
	width: 75%;
}

section.mypage > form, section.settings > form, section.island > details > form {
	margin: 1em;
}

section.field > form, section.explore > form {
    margin: 1em;
}
.decoration_area {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;

	align-items: flex-start;
}

ul.talk_category > li > a,
ul.talk_category > li span{
    font-size: 0.75em;
}

span.tip{
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}

}

@media only screen and (max-width:500px){

header > .shortcut{
	display: none;
}
section.home > div.image > div > img,
section.profile > div.image > div > img{
	width: 100%;
}

section.charalist > div > ul.charaCard{
	aspect-ratio: 4 / 1.05;
}
section.charalist > div > ul.charaCard:hover{
	aspect-ratio: 4 / 3;
}

ul.facility > li > ul > li{
	font-size: 0.75em;
}

}