@charset "utf-8";

html { scroll-behavior: smooth; }
body {
	font-size: 14px;
	font-family: serif;
	line-height: 1.75;
	color: #000;
	background: #fff;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
}

* {
	font-size: 1em;
	box-sizing: border-box;
	background-size: contain;
	word-break: break-all;
	overflow-wrap: break-word;
}

html, body, p, h1, h2, h3, h4, h5, ul, ol, li, dd, dl, dt, div {
	padding: 0;
	margin: 0;
	font-weight: 500;
}

img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	vertical-align:top;
	max-width: 100%;
}

html { height: 100%; }
li { list-style-type: none; }

.none { display: none; }
.sp { display: none; }
.pc { display: block; }

/* 選択色 */
::selection {
	background: #06f;
	color: #fff;
}

::-moz-selection {
	background: #06f;
	color: #fff;
}

body {

}

.contents {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 200px 1fr;
	padding: 0;
	width: 100%;
	min-height: 100vh;
}

/* menu */
#menu {
	padding: 2em 0;
	background: #cff url(../images/bg-side.gif) repeat-y top right;
}
#menu li { padding: 1em; }
#menu li span { font-size: 0.75em; }
#menu li:nth-child(1) span { color: #f00; }
#menu li:nth-child(2) span { color: #f09; }
#menu li:nth-child(3) span { color: #90f; }
#menu li:nth-child(4) span { color: #30f; }
#menu li:nth-child(5) span { color: #06f; }
#menu li:nth-child(6) span { color: #0f6; }
#menu li:nth-child(7) span { color: #ff0; }
#menu li:nth-child(8) span { color: #f60; }

/* main */
main { background: url(../images/bg.gif) center top repeat; }
#schedule main { background: url(../images/bg-schedule.gif) center top repeat; }
#profile main { background: url(../images/bg-profile.gif) center top repeat; }
#discography main { background: url(../images/bg-discography.gif) center top repeat; }
#links main { background: url(../images/bg-links.gif) center top repeat; }
#contact main { background: url(../images/bg-contact.gif) center top repeat; }

main h1 {
	padding: 1em 1em 0;
	font-size: 2.5em;
	font-weight: bold;
	width: 100%;
	text-align: center;
}
.main {
	padding: 2em;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 35% 1fr;
}
.main.schedule { grid-template-columns: 1fr; }

/* PROFILE */
.profile p {
	padding: 0 0 1em;
}
.profile small { font-size: 0.75em; }
.profile li {
	display: inline-block;
	padding: 0 0.5em 0 0;
}
.profile li img { width: 1.5em; }

/* news */
.news h2 {
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
}
.news li {
	padding: 1.5em;
	border-bottom: #000 solid 1px;
}
.news li:nth-child(n+2) {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 6em 1fr;
	font-weight: bold;
}
.news li:last-child {
	grid-template-columns: 1fr;
	font-weight: normal;
	border: 0;
}
.red {
	color: #f00;
	padding-left: 0.5em;
	text-decoration: none;
}

/* footer */
footer {
	font-size: 0.75em;
	text-align: center;	
}

/* SCHEDULE */
.scheduleBox {
	width: 90%;
	margin: 1em auto;
}
.scheduleBox li {
	border-top: #000 solid 1px;
	border-left: #000 solid 1px;
	border-right: #000 solid 1px;
	padding: 1em;
}
.scheduleBox li:last-child { border-bottom: #000 solid 1px; }
.scheduleBox h2 {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

/* PROFILE */
.profileBox {
	width: 90%;
	margin: 1em auto;
}

/* DISCOGRAPHY */
.discographyBox {
	width: 90%;
	margin: 1em auto;
	border-top: #000 solid 1px;
}
.discographyBox li {
	padding: 1em;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 250px 1fr;
	border-bottom: #000 solid 1px;
}
.discographyBox li h2 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

/* LINKS */
.linksBox {
	width: 90%;
	margin: 1em auto;
	border-top: #000 solid 1px;
}
.linksBox li {
	padding: 1em;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr;
	border-bottom: #000 solid 1px;
}

@media all and (max-width: 736px) {
	.sp { display: block; }
	.pc { display: none; }
	body { font-size: 3vw; }

	main,
	#schedule main,
	#profile main,
	#discography main,
	#links main,
	#contact main {
		background-size: 45% auto;
		min-height: 95vh;
	}

	.contents { grid-template-columns: 1fr; }

	#menu {
		padding: 0.25em 0 0.75em;
		background: #cff url(../images/bg-side-bt.gif) repeat-x bottom right;
		text-align: center;
	}
	#menu li {
		display: inline-block;
		padding: 0 0.5em;
	}
	#menu li span { display: none; }

	.main { grid-template-columns: 1fr; }
	main h1 { font-size: 1.9em; }
	.discographyBox li { grid-template-columns: 1fr; }
}
::-webkit-full-page-media, :future, :root main { height: auto; }