/*全体打ち消し*/
*{margin:0 auto; padding:0; list-style:none; border:none; text-decoration:none; box-sizing: border-box;}
body { font-family: Arial, sans-serif; color: #000; background-color: #fff; }

/*リンク*/
a:link,a:visited{color:#4A4AFF; }
a:hover{color:#fff; background-color:#215280; border-radius: 1px; opacity:0.7; }

/*大枠*/
#FRAME {
  margin: 2rem auto 5rem;
  text-align: center;
  width: 95%;
  max-width: 800px;
}

h1, h2 {
  font-family: "ＭＳ Ｐ明朝", "平成明朝", serif;
  font-weight: bold;
  text-align: left;
}

h1 {
  font-size: 2.2rem; 
  margin-bottom: 1rem;
  line-height: 2.5rem;
}

h2{font-size: 1.8rem; margin-bottom:0.3rem; 
   padding:0.5rem; }

.TEXT{white-space: pre-line; text-align: left; 
   font-size:0.9rem; line-height: 1.5rem; }

.BOLD{font-weight:bold; }
.WARNING{color:#e60033; font-weight:bold; }

button{
  margin: 2rem 0;
  padding: 0.7rem 1.2rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border-radius: 25px 25px 5px 5px;
  cursor: pointer;
}

button:hover {background-color: #476380;}

/* メニュー */

#MENU {
  position: fixed;
  bottom: 2rem;
  right: 3rem;
  z-index: 1000;
  width: 150px;
  max-height: 500px;
  border: 2px solid #640125;
  border-radius: 10px;
  overflow: auto;
}

#TOC{
  text-align: center;
  padding: 5px;
  cursor: default;
  font-weight: bold;
  background-color: #640125;
  color: #fff;
  font-size: 1.1rem;
  border-bottom: 1px solid #640125; 
}

.TURN a{
  background-color: #640125;
  color: #fff !important;
  font-size: 1.1rem;
  text-align: center;
  border-bottom: 1px solid #640125;
}

/* ドロップダウンメニュー */
#MENU ol {
  display: none;
}

#MENU:hover ol {
  display: block;
}

#MENU ol li {
  font-size: 0.9rem;
  text-align: left;
  background-color: #fff;
  border-bottom: 1px solid #640125;
}

#MENU ol li:hover {
  background-color: #88a5c2;
}

#MENU ol a {
  display: block;
  padding: 0.3rem;
  color: #3e3ede;
}

#MENU ol a:hover {
  color: #fff;
}


/*テーブル*/
table{
   border:#ccc 2px solid; border-collapse:collapse;
   text-align:center; margin-bottom:2rem; 
   width:600px; }
th, td{border:#aaa 1px solid; font-size: 0.9rem; padding:0.5rem; white-space: pre-line; }
th{font-weight:bold; background-color:#333631; color:#f5f5f5; }
td{background-color:#fff; color:#000; }

/*概要*/
.FLEX-FRAME{display: flex; }

.HEIGHT-FRAME{max-height:400px;  
overflow:scroll; margin-bottom: 2rem;}

.FACE{width:300px; }
.ILLUST{text-align:center; margin:1rem ; }
.FACE img{width:250px; border:#ccc 2px solid; margin-bottom:1rem; }

.INFO-BOX{border-radius:10px; padding:1rem; 
  width:400px; margin-bottom:1rem; line-height: 1.5rem; }

/*セリフ*/
.VOICE-BOX{width:600px; padding:0.5rem; font-size:1rem; line-height: 2rem;}

/*技能*/
.SKILL-NAME{width:180px; background-color:#f8fbf8; border-right:solid 2px #ccc; }
.SKILL-RANK{width:80px; padding:0.5rem; vertical-align: middle; border-right:solid 2px #ccc; }
.SKILL-NOTE{width:340px; }

.SSS-RANK{background-color:#e9546b; color:#fff;}
.S-RANK{background-color:#f4b3c2; }
.A-RANK{background-color:#c1e4e9; }
.B-RANK{background-color:#ccffcc; }
.C-RANK{background-color:#ffffe0; }
.D-RANK{background-color:#dcd3b2; }
.E-RANK{background-color:#9ea1a3; color:#fff; }

/*年表*/
.HISTORY-NOTE{width:600px; background: linear-gradient(to bottom, #F2EDDA, #fff 90%); padding:1rem; }
.HISTORY-PAGE{margin-bottom:1rem; border-bottom:1px dashed #96514d; padding:0.5rem 1.5rem 1rem; }
.HISTORY-AGE{font-weight:bold; background-color:#333631; color:#f5f5f5; }
.HISTORY-FACT{background-color:#d3d3d3; color:#000; }
.HISTORY-NAME{color:#e83929; }
.HISTORY-TP{font-weight:bold; text-decoration: wavy underline #d9333f; }
.HISTORY-OP{background-color:#f8e58c; }
.HISTORY-FUTURE{color:#524e4d; }

/*交流*/
.SHIP-BOX{width:600px; } 

.SHIP-NAME{background-color:rgba(216,198,250, 0.85); display: inline-block;
  border:5px solid #d3cfd9;
  border-radius:10px; 
  max-width: 200px;
  padding: 1rem; margin:1rem;}

.SHIP-CALL {
  position: relative;
  display: inline-block;
  margin: 0.5rem;
  margin-right: 1rem;
  padding: 1rem;
  width: 150px;
  border-radius:30px;
}
.P-EMO{background-color:#f8e58c; }
.N-EMO{background-color:#bbbcde; }
.Z-EMO{background-color:#e9e4d4; }

.SHIP-CALL:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
}

.P-EMO:before{border-left: 15px solid #f8e58c; }
.N-EMO:before{border-left: 15px solid #bbbcde; }
.Z-EMO:before{border-left: 15px solid #e9e4d4; }

.SHIP-CALL p {
  margin: 0;
  padding: 0;
}

.SHIP-NOTE {
  position: relative;
  display: inline-block;
  margin: 0.5rem;
  padding: 0.5rem;
  width: 250px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius:20px;
}

.SHIP-NOTE:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.SHIP-NOTE:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.SHIP-NOTE p {
  margin: 0;
  padding: 0;
}

/*小ネタ*/
.TIPS-BOX{padding:1rem; 
  width:600px; margin-bottom:1rem; line-height: 1.5rem; }

.TIPS-BOX li{
border-radius:1.5rem; 
margin-bottom:1.5rem; 
padding:1rem; }

/*NSFW*/
.SECRET{display: none;}
.KEY{cursor:pointer; }

.KEY,
.DOOR {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.DOOR {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.SECRET:checked + .KEY + .DOOR {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.SECRET:checked + .KEY::before {
	transform: rotate(-45deg) !important;
}

/* スマホ用CSS */
@media screen and (max-width: 768px) {


#FRAME{max-width: 95%; }

table, .VOICE-BOX, .HISTORY-NOTE, .SHIP-BOX, .TIPS-BOX{width: 400px; }

.HEIGHT-FRAME{max-height:10000px; }
.FLEX-FRAME{display: block;}

}/* スマホ用CSSここまで */