@charset 'utf-8';
/*----------------------------------------------------ページ用CSS*/
/*------------------------------------global*/
html {
	font-size: 75%;
	line-height: 1.4;
}
body {
	color: #222222;
	background: #ffffff;
}
a {
	color: #222222;
}
a:hover {
	color: #CC3333;
}

.more {
	text-align: right;
}
.more a {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.3rem 0.5rem;
	background: #CC3333;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: bold;
}
.more a:hover {
	background: #FF3333;
}

/*------------------------------------header*/
header {
	margin: 1rem auto;
	padding: 0.5rem;
}
header h1 {
	text-align: center;
}
header h1 a,
header h1 a img {
	display: block;
	margin: 0 auto;
}

header nav {
	width: 100%;
	margin: 0 auto;
}
header nav ol {
	display: table;
	margin: 0 auto;
	min-width: 950px;
	text-align: center;
}
header nav li {
	display: table-cell;
}
header nav li a {
	display: block;
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 2.2rem;
	font-family: 'Love Ya Like A Sister', cursive;
}

/*------------------------------------pankz*/
.pankz {
	width: 1000px;
	margin: 1rem auto;
	font-size: 0.8rem;
	text-align: left;
}
.pankz * {
	font-size: 0.8rem;
}

/*------------------------------------slider*/
.slider {
	margin: 0 auto;
}
.slick-slide img {
	margin: 0 auto;
}
/*------------------------------------section*/
section {
	width: 1100px;
	padding: 0 10px;
	margin: 0 auto;
}
section h2 {
	font-size: 3rem;
	font-family: 'Love Ya Like A Sister', cursive;
	padding-left: 0.5rem;
	border-bottom: 0.5rem solid #222222;
	margin-bottom: 1rem;
}

/*------------------------------------article*/
section article {
	display: inline-block;
	vertical-align: top;
	width: 770px;
	padding: 1rem 1rem 120px;
}



/*------------------------------------aside*/
aside {
	display: inline-block;
	vertical-align: top;
	width: 300px;
	padding-bottom: 120px;
}
aside h5 {
	font-size: 2rem;
	font-family: 'Love Ya Like A Sister', cursive;
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 0.3rem solid #ffffff;
}
aside .block {
	margin-bottom: 1rem;
}

aside .sns ul {
	text-align: right;
}
aside .sns li {
	display: inline-block;
	vertical-align: top;
	padding: 0.5rem 0 0.5rem 0.5rem;
}
aside .sns li img {
	width: 40px;
}

aside .twitter {
	height: 800px;
	overflow: auto;
}

aside .blog li {
	border-top: 1px dotted #111111;
}
aside .blog li:last-child {
	border-bottom: 1px dotted #111111;
}

aside .blog li figure a {
	width: 100%;
	display: flex;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	text-decoration: none;
	padding: 1rem;
}
aside .blog li figure a:hover {
	background: rgba(200,200,200,0.1);
	color: #ffffff;
}
aside .blog li figure img {
	width: 100px;
	height: 100px;
	object-fit: cover;
}
aside .blog li figure figcaption {
	padding: 0.5rem;
	font-size: 1.2rem;
	width: 100%;
}
aside .blog li figure figcaption span {
	display: block;
	text-align: right;
	color: #cccccc;
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

aside .link li {
	margin-bottom: 2rem;
}
aside .link li a {
	text-decoration: none;
}
aside .link li a img {
	border: 1px solid #222222;
}
aside .link li b {
	display: block;
}

/*------------------------------------index*/
#index .slider {
	margin-bottom: 2rem;
}


/*------------------------------------news*/
#news .box {
	padding: 1rem;
}
#news .box h3 span {
	display: block;
	color: #cccccc;
}
#news .box h3 b {
	font-weight: normal;
	font-size: 2rem;
}
#news .box figure {
	text-align: center;
	padding: 1rem;
}
#news .box p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
}
#news .box p.link {
	font-size: 0.8rem;
}
#news .box p.link b {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1rem;
	background: #CC3300;
	color: #ffffff;
	padding: 0.3rem 0.5rem;
}


#news h4 {
	font-size: 2rem;
	font-family: 'Love Ya Like A Sister', cursive;
	margin-bottom: 1rem;
	border-bottom: 0.3rem solid #ffffff;
	padding: 0.5rem 0 0.2rem;
}

.news ul {
	border-bottom: 1px solid #191919;
}
.news li {
	border-top: 1px solid #191919;
}
.news li a {
	width: 100%;
	display: flex;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	text-decoration: none;
	padding: 1rem;
}
.news li a:hover {
	background: rgba(100,100,100,0.1);
}
.news li figure span {
	display: block;
	width: 100px;
}
.news li img {
	width: 100px;
	height: 100px;
	object-fit: cover;
}
.news li p {
	padding: 0.5rem;
	font-size: 1.3rem;
}
.news li p span {
	display: block;
	color: #cccccc;
	font-size: 1rem;
}



/*------------------------------------schedule*/
#schedule h3 {
	font-size: 2rem;
	font-family: 'Love Ya Like A Sister', cursive;
	margin-bottom: 1rem;
	border-bottom: 0.3rem solid #222222;
	padding: 0.5rem 0 0.2rem;
}
#schedule p.note {
	margin-bottom: 2rem;
}
#schedule .box {
	margin-bottom: 3rem;
}
#schedule .box p {
	margin-bottom: 0.5rem;
}
#schedule .box .event {
	margin: 0;
}
#schedule .box .event b {
	display: block;
	font-size: 1.5rem;
	color: #CC3333;
}
#schedule h4 ,
#schedule h4 * {
	vertical-align: top;
	font-size: 2rem;
	margin-right: 0.5rem;
}
#schedule h4 b.pref {
	display: inline-block;
	font-size: 1.1rem;
	background: #CC3333;
	color: #ffffff;
	padding: 0.3rem 0.5rem;
}

#schedule .box .button {
	margin-bottom: 1rem;
}
#schedule .box .button li {
	display: inline-block;
	margin-right: 0.5rem;
}
#schedule .box .button li a {
	transition: 0.2s;
	display: block;
	padding: 0.7rem 1rem;
	letter-spacing: 0.3rem;
	text-decoration: none;
	color: #ffffff;
	background: rgba(220,60,60,0.8)
}
#schedule .box .button li.reserve a {
	background: rgba(90,150,60,0.8);
}
#schedule .box .button li a:hover {
	background: rgba(220,60,60,1)
}
#schedule .box .button li.reserve a:hover {
	background: rgba(90,150,60,1);
}


/*------------------------------------biography*/
#biography figure {
	text-align: center;
}
#biography figure img {
	width: auto;
	max-width: 100%;
}
#biography .member {
	text-align: center;
}
#biography .member li {
	padding: 0.4rem;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
}

#biography .profile {
	border: 1px solid #666666;
	margin: 1rem auto;
	padding: 2rem;
	font-size: 1.2rem;
	line-height: 1.8;
}

/*------------------------------------#discography*/
#discography .list {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#discography .list figure {
	width: 245px;
	padding: 0.5rem;
	margin-bottom: 1rem;
}
#discography .list figure.empty {
	padding: 0 0.5rem;
}
#discography .list figure a {
	display: block;
	width: 235px;
	height: 235px;
	overflow: hidden;
	margin-bottom: 0.5rem;
	border: 1px solid #999999;
}
#discography .list figure img {
	transition: 0.2s;
	width: auto;
	max-width: 100%;
}
#discography .list figure img:hover {
	transform: scale(1.02);
}
#discography .list figure figcaption {
	text-align: center;
	line-height: 1;
}
#discography .list figure figcaption .category {
	display: inline-block;
	margin: 0 auto 0.5rem;
	background: #999999;
	color: #ffffff;
	padding: 0.3rem 0.5rem;
	font-size: 1rem;
}
#discography .list figure figcaption b {
	display: inline-block;
	text-align: left;
	margin: 0 auto;
	font-size: 1.2rem;
}

#discography .disc {
	margin-bottom: 1rem;
}
#discography .disc figure {
	text-align: center;
	margin-bottom: 1rem;
}
#discography .disc figure img {
	width: auto;
	max-width: 400px;
}
#discography .disc h3 {
	text-align: center;
	margin-bottom: 1rem;
}
#discography .disc h3 span {
	display: inline-block;
	margin: 0 auto 0.5rem;
	background: #999999;
	color: #ffffff;
	padding: 0.3rem 0.5rem;
	font-size: 1rem;
}
#discography .disc h3 b {
	display: block;
	font-size: 1.4rem;
	line-height: 1;
}
#discography .disc .detail {
	text-align: center;
}
#discography .disc dl {
	display: inline-block;
	text-align: left;
}
#discography .disc dd {
	margin-bottom: 1rem;
}

#discography h4 {
	background: #999999;
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0.3rem 0.5rem;
}

/*------------------------------------contact*/
#contact .result {
	text-align: center;
}
#contact .result h3 {
	font-size: 1.4rem;
}
#contact .result .button {
	margin: 2rem auto;
}

#contact .comment {
	font-size: 1.2rem;
	padding: 0.5rem;
}


#contact button {
	border: none;
	background: none;
	cursor: pointer;
}
#contact form table {
	width: 100%;
	border: none;
}
#contact form table tr {
	border: none;
}
#contact form table th {
	width: 200px;
	border: none;
	border-bottom: 2px solid #ffffff;
	background: #cccccc;
	padding: 1rem;
}
#contact form table th span {
	display: inline-block;
	margin: 0.2rem;
	padding: 0.1rem 0.3rem;
	background: #cc3333;
	color: #ffffff;
}

#contact form table td {
	border: none;
	padding: 2rem;

}
#contact form table td > * {
	font-size: 1.2rem;
}
#contact form table td input[type=email],
#contact form table td input[type=text] {
	padding: 0.3rem;
}
#contact form table td textarea {
	padding: 0.3rem;
	width: 100%;
	height: 200px;
}

#contact form table .submit {
	text-align: center;
}

#contact .note h4 {
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}
#contact .note li {
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

/*------------------------------------sitemap*/
#link .category {
	display: table;
}
#link .category li {
	display: table-cell;
}
#link .category li a {
	display: block;
	border: 1px solid #ffffff;
	padding: 0.5rem 2rem;
	font-family: 'Love Ya Like A Sister', cursive;
	font-size: 2rem;
}
#link .category li a.selected,
#link .category li a:hover {
	background: #CC3300;
	color: #ffffff;
}
#link .category li:first-child a {
	border-radius: 0.5rem 0 0 0;
}
#link .category li:last-child a {
	border-radius: 0 0.5rem 0 0;
}

#link dl {
	margin: 2rem 1rem;
}
#link dt a {
	font-size: 1.4rem;
}
#link dd {
	margin-bottom: 1rem;
}

/*------------------------------------reservation*/
#reservation .box {
	background: rgba(100,100,100,0.3);
	padding: 2rem;
}
#reservation_mail h3 {
	font-size: 1.8rem;
	margin: 1rem 0;
}
#reservation li,
#reservation p {
	line-height: 1.8;
	font-size: 1.2rem;
}
#reservation form dl {
	margin: 2rem 0;
	text-align: center;
}
#reservation form dl dt {
	font-size: 1.2rem;
	margin: 0.5rem auto;
}
#reservation form dl dd input[type=text] {
	font-size: 1.5rem;
	vertical-align: middle;
}
#reservation_note h4 {
	font-weight: bold;
	color: rgba(255,64,0,0.9);
}

/*------------------------------------sitemap*/
#sitemap dt a {
	font-size: 1.2rem;
	letter-spacing: 0.5rem;
}
#sitemap dd {
	margin-bottom: 1rem;
}

/*------------------------------------footer*/
footer {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 0;
	background: rgba(0,0,0,0.8);
}
footer nav {
	margin: 1rem auto;
}
footer nav li {
	display: inline-block;
}
footer nav li a {
	display: block;
	font-size: 1.2rem;
	font-family: 'Love Ya Like A Sister', cursive;
	padding: 0.3rem 0.5rem;
	color: #ffffff;
}
footer address {
	color: #ffffff;
	font-size: 0.5rem;
	padding: 0.5rem;
}
footer address * {
	font-size: 0.5rem;
	color: #ffffff;
}
footer nav .menu_bt {
	display: none;
}
/*---------------------------------------------------responsive*/
@media (max-width: 1000px) {
	h1 img,
	figure img {
		width: auto;
		max-width: 100%;
	}
	header {
		margin: 0 auto;
	}
	header > nav ol {
		display: none;
	}
	section {
		width: auto;
		padding: 0.5rem;
	}
	section article {
		display: block;
		width: auto;
		padding: 0;
	}
	.news li a {
		padding: 0.3rem;
	}
	#schedule .box .button {
		text-align: center;
	}
	#discography .disc figure img {
		max-width: 100%;
	}

	aside {
		width: 100%;
		padding-bottom: 0;
	}
	aside .sns ul {
		text-align: center;
	}
	aside .vision {
		text-align: center;
	}
	aside h5,
	aside .twitter {
		display: none;
	}
	footer {
		position: static;
	}
	footer nav .menu_bt {
		display: block;
		position: fixed;
		z-index: 99;
		width: 40px;
		top: 0;
		left: 0;
	}
	footer nav .menu_bt img {
		width: 100%;
	}
	footer nav.visible {
		position: fixed;
		display: block;
		width: 100vh;
		height: 100vh;
		margin: 0;
		background: none;
		top: 0;
		left: 0;
		z-index: 100;
	}
	footer nav ol {
		transition: 0.5s;
		position: fixed;
		top: 0;
		left: -70vw;
		height: 100vh;
		margin: 0;
		background: rgba(0,0,0,0.8);
		overflow: auto;
		z-index: 103;
	}
	footer nav.visible ol {
		left: 0;

	}
	footer nav ol li {
		display: block;
		text-align: left;
		border-bottom: 1px dotted #cccccc;
	}
	footer nav ol li a {
		display: block;
		padding: 0.5rem;
		font-size: 2rem;
	}





}