@charset "utf-8";


#top .bg-slider {
	margin-top: 70px;
	width: 100%;
	height: 800px;
	background-position: center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
#top .bg-slider__title{
	color: #fff;
	font-size: 48px;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}
@media screen and (max-width: 1100px) {
	#top .bg-slider {margin-top: 40px; height: 400px; width: 100%;}
}


#top-news { height: 400px; width: 1100px; margin: 80px auto;}
#top-news h2 { height: 36px; font-size: 36px; font-weight: 500; text-align: center;}
#top-news ul { height: 320px; margin-top: 80px;}
#top-news li { display: block; float: left; width: 340px; text-align: center; font-size: 14px; margin-right: 40px;}
#top-news li img {width: 340px; height: auto; margin-bottom: 10px;}
#top-news a { display: block; color: #333;}
#top-news .date { font-size: 10px;}

@media screen and (max-width: 1100px) {
	#top-news { height: auto; width: 100%; margin: 50px auto;}
	#top-news h2 { font-size: 28px; font-weight: 500; text-align: center;}
	#top-news ul { width: 90%; height: auto; margin: 20px auto;}
	#top-news li { display: block; width: 100%; text-align: center; font-size: 14px; margin: 0 auto;}
	#top-news li img { width: 100%; height: auto; margin-bottom: 1px;}
	#top-news a { display: block; color: #333;}
	#top-news .date { text-align: center; font-size: 10px; margin-bottom: 20px;}
	#top-news .news_txt { display: none;}
}


#top-disc { margin: 140px auto;}
#top-disc #hd_bg { height: 160px; width: 100%;
	background-image: url("../images/top_bg_01.png");
	background-size: cover;
	background-repeat: no-repeat;
}
#top-disc h2 { width: 180px; height: 180px; margin: -100px auto;}
#top-disc ul { width: 1100px; height: 732px; margin: 150px auto 0;}
#top-disc li { display: block; float: left; background-color: #333; height: 732px; width: 366px; text-align: center; font-size: 14px;}
#top-disc li img {width: 366px; height: auto; margin-bottom: 10px;}
#top-disc li .txt_box { color: #fff; height: 366px; padding: 60px 40px;}
#top-disc .title { font-size: 20px; margin-bottom: 30px; line-height: 150%;}
#top-disc .txt { line-height: 160%;}
#top-disc a { display: block; color: #333;}
#top-disc .flex { display: flex;
flex-direction: column;}

@media screen and (max-width: 1100px) {
	#top-disc #hd_bg { height: 30px; width: 100%;
		background-image: url("../images/top_bg_01.png");
		background-size: cover;
		background-repeat: no-repeat;}
	#top-disc h2 { width: 20%; height: auto; margin: -60px auto 10px;}
	
	#top-disc ul { width: 90%; height: auto; margin: 50px auto 0;}
#top-disc li { display: block; float: none; background-color: #333; height: auto; width: 100%; text-align: center; font-size: 14px; margin-bottom: 20px;}
#top-disc li img {width: 100%; height: auto; margin-bottom: 0;}
#top-disc li .txt_box { color: #fff; height: auto; padding: 5%;}
#top-disc .title { font-size: 14px; margin-bottom: 10px; line-height: 120%;}
#top-disc .txt { line-height: 120%; font-size: 10px;}
#top-disc a { display: block; color: #333;}
#top-disc .flex { display: flex;
flex-direction: column-reverse;}

}

#top-banner {display: block; width: 810px; margin: 40px auto;}
#top-banner li {float: left; width: 262px; margin-right:8px; }
#top-banner li img { width: 262px; height: auto;}
@media screen and (max-width: 1100px) {
	#top-banner { display: block;
	width: 95%; height: auto; margin: 40px auto;}
	#top-banner li {float: left; width: 48%; margin-right:2%; margin-bottom: 8px; }
	#top-banner li img { width: 100%; height: auto;}
}


#contact { display: block;
	width: 300px; height: auto; margin: 100px auto 70px;}
@media screen and (max-width: 1100px) {
	#contact { display: block;
	width: 50%; height: auto; margin: 40px auto 40px;}
}



#profile {
	width: 960px;
	margin: 70px auto;
}
#profile h2 { margin: 100px 0 80px;}
#profile #photo { width: 300px; margin: 0 auto 50px;}
#profile .box { border-bottom: solid 1px #ccc; margin-bottom: 40px;}
#profile .box h3 { font-size: 20px; margin-bottom: 15px;}
#profile .box h4 { font-size: 20px; margin-bottom: 12px; font-weight: normal;}
#profile .box p { margin-bottom: 30px;}
#profile table { margin-bottom: 50px;}
#profile th { width: 10%; vertical-align: top; font-weight: normal;}
#profile td { padding-bottom: 8px;}

@media screen and (max-width: 1100px) {
	#profile {
	width: 95%;
	margin: 50px auto;
}
#profile h2 { width: 100%; height: auto; margin: 20px auto;}
#profile #photo { width: 50%; height: auto; margin: 0 auto 50px;}
#profile th { width: 15%;}
}




#news {
	width: 960px;
	margin: 70px auto;
}
#news h2 { margin: 100px 0;}
#news .box {
	display: block;
	width: 960px;
	height: auto;
	padding: 30px;
	border: solid 1px #ccc;
	margin-bottom: 40px;
	}
#news .box .img-box { display: block; float: left; height: 240px; width: 348px; margin-right: 50px;}
#news .box img { height: 240px; width: 348px; }
#news .box .txt-box { display: block; float: left; height: auto; width: 500px;}
#news .box .txt-box .title { font-size: 24px; line-height: 120%; margin-bottom: 10px;}
#news .box .txt-box .date { font-size: 9px; margin-bottom: 10px;}
#news .box .txt-box .content { font-size: 14px;}
#news .box .txt-box a { color: #5d0e07; text-decoration: underline;}

@media screen and (max-width: 1100px) {
	#news {
	width: 95%;
	margin: 50px auto;
}
#news h2 { width: 100%; height: auto; margin: 20px auto;}
#news .box {
	display: block;
	width: 100%;
	height: auto;
	padding: 15px;
	border: solid 1px #ccc;
	margin-bottom: 40px;
	}
#news .box .img-box { display: none; float: left; height: 240px; width: 348px; margin-right: 50px;}
#news .box img { height: 240px; width: 348px; }
#news .box .txt-box { display: block; float: left; height: auto; width: 100%;}
#news .box .txt-box .title { font-size: 18px; line-height: 120%; margin-bottom: 10px;}
#news .box .txt-box .date { font-size: 9px; margin-bottom: 10px;}
#news .box .txt-box .content { font-size: 14px;}
	
}





#concert {	width: 960px;	margin: 70px auto 50px;}
#concert h2 { margin: 100px 0;}
#concert .box {	width: 960px; margin: 30px auto;}

#concert details {
	display: block;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 10px 10px 10px 20px;
}
#concert details:hover {
	color: #9E1104;
}

#concert summary {
	font-size: 17px;
	letter-spacing: -0.05em;
    font-weight: bold;
    margin: -5px -5px -5px;
    padding: 10px;
}
#concert details[open] {
    padding: 10px 20px;
}

#concert details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
    padding: 10px;
}

#concert a { color: #5d0e07;}

#concert .cl {color: #780800;}

#concert .br {display: none;}

@media screen and (max-width: 1100px) {
	#concert {	width: 95%;	margin: 50px auto;}
	#concert h2 { width: 100%; height: auto; margin: 20px auto;}
	#concert .box {	width: 100%; margin: 20px auto;}
	#concert summary {	line-height: 120%;}
	#concert .br {display: block;}
}


#disc {
	width: 1100px;
	margin: 70px auto;
}
#disc h2 { width: 960px; margin: 100px auto;}
#disc ul { display: block; width: 590px; height: 50px; margin: 0 auto 50px;}
#disc li { float: left; margin-left: 12px;}
#disc li a { color: #5d0e07; font-size: 16px; font-weight: normal;}
#disc h3 { color: #5d0e07; font-size: 20px; letter-spacing: 0.2em; font-weight: normal; margin-bottom: 40px; border-left: 3px #5d0e07 solid; padding: 4px 15px; height: 32px;}
#disc .box {
	display: block;
	float: left;
	width: 360px;
	height: 180px;
	padding: 10px;
	border: solid 1px #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
	}
#disc .box .jacket { width: 180px; float: left;} 
#disc .box .jacket img { height: 160px; width: auto;} 
#disc .txt .title {font-size: 17px; margin-bottom: 10px; padding-top: 10px; letter-spacing: -0.05em; line-height: 105%;}
#disc .txt .detail { font-size: 10px; line-height: 140%; margin-bottom: 6px;}

@media screen and (max-width: 1100px) {
	#disc {	width: 95%;	margin: 50px auto;}
	#disc h2 { width: 100%; height: auto; margin: 20px auto;}
	#disc ul { display: block; width: 100%; height: 50px; margin: 0 auto 50px;}
	#disc li { margin-bottom: 6px;}
	#disc .box {	width: 100%; margin: 10px auto;}
	#disc .txt .link img { width: 100px; height: auto;}
}




#sns .fixed_twitter {
	width: 45px;
	height: 54px;
    position: fixed;
    z-index: 10;
    top: 100px;
    right: 0px;
    padding: 1px 5px;
}
#sns .fixed_facebook {
	width: 45px;
	height: 54px;
    position: fixed;
    z-index: 10;
    top: 150px;
    right: 0px;
    padding: 1px 5px;
}
#sns .fixed_instagram {
	width: 45px;
	height: 54px;
    position: fixed;
    z-index: 10;
    top: 200px;
    right: 0px;
    padding: 1px 5px;
}





.btn-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 12px 5px 8px;
  text-decoration: none;
  color: #5d0e07;
  transition: .4s;
}

.btn-horizontal-border:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#5d0e07;
  transition: .2s;
}

.btn-horizontal-border:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  top:0;
  left: 0;
  border-radius: 3px;
  background:#5d0e07;
  transition: .2s;
}

.btn-horizontal-border:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}

.btn-horizontal-border:hover:after {
  top: 3px;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #5d0e07;
  opacity: 0.9;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}