main_gen2.css

*{ box-sizing: border-box; }
a {color: #936;}
a:hover {color: #f03;}

/* ■見出しとセクション */
body {
	color: #333;
	position: relative;
	font-family: sans-serif;
}
main {
	max-width: 1022px;
	margin: auto;
	background-color: white;
	border: solid 1px #ccc;
}

section {
	margin: 30px 10px 50px 10px;
}
footer {
	margin: auto 10px;
}

section p {
	margin-left: 10px;
}
h1 {
	font-size: 200%;
	margin: 20px;
}
.title-debug:after {
	content: "- ラブライブ！ストレージ CSS Gen2対応";
	font-size: medium;
	color: #888;
	padding-left: 10px;
	font-weight: normal;
}

h2 {
	border-left: solid 8px #e50080;
	border-bottom: solid 1px #978;
	padding: 2px 0 4px 15px;
}

h3 {
	padding: 4px 10px;
	margin: 10px;
	border: solid 1px #ccc;
}

h3:before {
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border: solid 3px #e50080;
	border-radius: 50%;
	margin: 0 8px;
}

/* ■右メニュー */
.right-menu {
	display: inline-block;
	width: 225px;
	margin-left: 10px;
	padding: 10px 20px;
	border: solid 1px #978;
	z-index: 9;
	background: linear-gradient(90deg, #fde 0%, white 50%);
}
.right-menu strong {
	font-size: large;
	display: block;
	margin: 2px;
}
.right-menu hr {
	border: none;
	border-bottom: 2px solid #cbc;
	margin: 8px auto;
}
.right-menu ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.right-menu ul ul {
	font-size: 90%;
	padding-left: 20px;
}
.right-menu li {
	margin-bottom: 3px;
}
.right-menu a {
	display: block;
	padding: 2px 0px;
}
/* ■スマートフォン向けレイアウト */
@media screen and (max-width: 599px) {
	.pc-only {
		display: none !important;
	}
	.pc-exclusive-link {
		text-decoration: none;
		color: inherit;
		cursor: default;
		pointer-events: none;
	}
	body {
		margin: 0;
	}
	main {
		border-width: 0;
	}
}

/* ■PC向けレイアウト */
@media screen and (min-width: 600px) {
	.sp-only {
		display: none !important;
	}
}

/* ■幅広環境向けレイアウト */
@media screen and (min-width: 1280px) {
	body {
		background: url('img/bg.png');
	}
	body.left {
		margin-right: 233px;
	}
	.right-menu {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		border-width: 0 0 0 1px;
	}
	.right-menu li {
		margin-bottom: 6px;
	}
}
/* ■出力関連 */
.output-box {
	position: relative;
	width: 100%;
	height: calc(100vh - 130px);
	border: solid 3px #79c;
	background-color: white;
	overflow-y: scroll;
}
.output-box-default {
	padding: 10px;
	background-color: #ddd;
	font-size: 120%;
	color: #666;
}

.output-box-border {
	border: solid 3px #79c
}


/* ■ボタン */
.button-round, .button-square, .button-hexa, .button-flat {
	position: relative;
	display: inline-block;
    vertical-align: middle;
	word-break: keep-all;
	margin: 1px 5px 1px 0;
	height: 26px;
}

.button-round, .button-square {
	padding: 0px 6px;
	line-height: 22px;
	border-width: 2px;
	border-style: solid;
}

.button-flat {
	padding: 0px 4px;
	line-height: 26px;
	border: none;
}

.button-hexa {
	padding: 0px 10px;
	line-height: 26px;
	border: none;
	clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

.button-hexa::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	border-style: solid;
	border-color: inherit;
	border-width: 13px 0px 13px 0px;
	clip-path: polygon(0 50%, 2.3px 50%, 9.1px 1.9px, calc(100% - 9.1px) 1.9px, calc(100% - 2.3px) 50%,
	calc(100% - 9.1px) calc(100% - 1.9px), 9.1px calc(100% - 1.9px), 2.3px 50%,
	0 50%, 0 100%, 100% 100%, 100% 50%, 100% 0, 0 0);
}

.button-round {
	border-radius: 50vh;
}

/* ■読み込み中 */
#Loading {
	position: absolute;
	width: 100%;
	background-color: #ddd;
	text-align:center;
	z-index: 98;
	padding: 10px;
}
#Loading span {
	display: block;
	margin: 5px 0;
	font-size: 150%;
	font-weight: bold;
}


/* ■更新履歴 */
.history-container {
	width: 100%;
	max-width: 1000px;
	max-height: calc(80vh - 30px);
	overflow-y: scroll;
	border: solid 3px #da6;
}
.history-container details {
	border-right: solid 1px #da6;
}

.history-container details:not(:last-child) {
	border-bottom: solid 2px #da6;
}
.history-container summary {
	padding: 2px 7px;
	font-size: 110%;
	background: #f0e8e0;
}
.history-container summary:not(.important){ background-color: #fdc;}
.history-container summary.important { background-color: #ffb;}
.history-container div{
	background: white;
	padding: 5px 12px;
	line-height: 170%;
}
.history-container details[open] summary {
	border-bottom: solid 2px #db7;
}
.history-container details[open] span.date {
	font-weight: bold;
}

.history-container li:before {
	content:"▶ "; color:#b95;
}


/* ボタン */
.icon-fix {
	display: inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAACzUlEQVR42rVUS09TURDGsGHpP3DlQuNCaYlFkVpFjY+oMXFPXGI04hMF5CXgg/iI0ZSAxpAYNfEVDRLSF20pGlEEbAJSRUDEqiAVgUu5bT9nDufiLVRZ2WQ6QznzfWe+mTNJAJLWFzctYi9jE5mVrJNsnAwL2Lg8yzkmHY7AnA3Ip8hD/wS0lCxIyBgpGgl/JUtwuzwQJRCVjH2MAS0yObPIhYxC11zAGOeQqdJDYjFmslZOtfxHmD2DrClwwpTvEMaxuagJW854sOu8b6EqwtJXaxIZ5Q+qWUrg9H9D4Msv9H+fwMDwBF73/kDqCTuuPAuAP9sqvcg87UJWmRtahRtL3XpiVXojE9ToCczFLowpKt72h1DxqAtXGwIof9glqtp78TmO1nUIMP7bQKQsG+dxzL9JEo2ghgn8mvZmqXNoYho19l4szn6MpQcbsPxwI9ILHDhw8w3uvxjEOrr9/httsHd+xc5zPlGJrTOII0S++pQDG0rcWi/8TKBo+pmlHxpVMDgyKQCau4dR6/yIZbmNsNo+CIm2VniRRVVMTUfR2B7EvZZPiMZi2HG2WZDrpFISEgRDU3gfHMdd3wCevBrCpfoerKAqLpOPRGeAVh23Iae2DWokJsAP3WqHIc8u5NM1XEko0U+SqM7dhyU59aK5JirbkGcTBDGqYHtlM9LzneS9UKYjgpSna22hU7t9nERxTWaCsUkVD0hrI91oM43mpjIPEdloinqERFzBymM2vAyMoIemrfvzGNr7RpFG50n/eU02ziUIhhTc9vYjlWTgktkMRFD19B0mwxFRfi5Jwjffd70V2ddaRZx/x4+0k0RS6v4zpoke2u4LPjHr/Lhm+8MPrdyDPVUtIubp4XPcVDaOWSa64LyHNm9V0Dyr9JCicg3MkuhXBYPKued1InIyZnLiV0WiZaffP39bdpY5i0+XY7Xol93/Xte/AcGI5WjNdwFAAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	vertical-align: middle;
	width: 24px;
	height: 16px;
	margin-right: 4px;
}

.icon-new {
	display: inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAC0klEQVR42rWUy0tbURDGU9z4h3ThSsSkRmMT8ywJRcVFX1DBYkWE+upOUReuWrpyp60LhS6kiHHbEmihoKRKKz4QFVyoK59VAqlerr+eueNNpBtLoReGO+cxM998c2Y8gIdw+JbzV73ayKiRZSM5I9wguau7o45t0Y/j00Msps5fviw1+mjBMBKBaJS/CPCniI9SN4iHQKCEhw9LqarKUF0tjm1zYBEM2mbvkrq6mxxeGlEb/ctexgkSDpdoOoHAGM+eQXv7OXfvQigEDQ3Q0wOJhK4lI1euZ3ld1/X5lT6mFN2/78Png2zWQr4nT6C8HAYGnCUPHkBtrRrX1GDAFKkTMG6GwWARSChkOetIxOchHn9nqIDPnzXAly9QVgb9/WDbGPrgzh01bGmBR4+4olKzjMc1SH09pFIaJJWyDHDZfydFXnUczM3Z/PypqNvaoKtL9aYmNd7agqMjyOVgakozOTiAyUlIJuH0FH78wAG7vW2TTkNFxarHpJunshKWlhT9p0+wuQnd3Rrg3j2YnYWzM6VoaEj3BWE2C8vL0NmpewLw6VPVX73C+M0XA0j0+XlNU6j5+hUuLqCxERYW4OQEVlYEnTpobYU3b+DwED58gN1d2NuDiQn49QseP5Ys80qR1wuLizbfv8Pt2/D+vTrJ5xXpt2+wswPNzfD8uaKUQsvLE8qOj9WxABQaNzdtp8jh8KoWWTLY2LBYXxfelFO56FIxPKz627cwOKh/93nu7+vZixcwPa16Om05oBMJU+Rk0ue8ivFxyzGU4vn90Nen9ZACy/r1a63T2hrMzOgrEruREfj4Uant7VW9o8NyzlIpnzaaNIU48fvPCw0jBZX+kCcoa9EFlfwlY7e5xM69J/3i9WqzFhotFisxqGUOZa4aSNs+GrXN3mWBilhMeXfF3Y9GL82Z2siY0XsZx2c8XlKcpDo7Rv9huN0w7P7zuP4NgNoQId37mFkAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	vertical-align: middle;
	width: 24px;
	height: 16px;
	margin-right: 4px;
}

a.exlink:after { 
	content: "";
	display: inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUUlEQVR42s3RsQ0AIQwEweu/A1drUoL/1VoQEDhASKM7O90dmqpqmhwD9GnAEYAJJlX2twK+Umngr5ICzD5iFkb1QvEIVgDVQsBc5EFgOteABfFA5DjO4xMWAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	vertical-align: middle;
	width: 16px;
	height: 20px;
	margin-left: 6px;
}
/* 転入生アイコン */
.icon-n-face{
	width: 64px;
	height: 64px;
	background-image: url(img/students.png);
	background-repeat: no-repeat;
}


/* 色指定 */
.color-muse {
	border-color: #e50080;
	background-color: #ffcce9;
}

.color-aqours {
	border-color: #19b1f6;
	background-color: #ceeefd;
}

.color-niji {
	border-color: #f8b656;
	background-color: #fdeace;
}

.color-liella {
	border-color: #da57d8;
	background-color: #f6d5f5;
}

.color-linklike {
	border-color: #89c;
	background: linear-gradient(90deg, #bef 0%, #bcf 100%);
}

.spoiler {
	color: #333;
	background-color: #333;
	border: solid 1px #666;
	padding: 0 4px;
	margin: 0 2px;
}

.spoiler-revealed {
	color: inherit;
	background-color: inherit;
}