@charset "UTF-8";
/* CSS Document */

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body { 
	font-size:13px;
	line-height:1.5;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;
	color: #0C0C0C;
}

li{ list-style:none;}
/**img{ max-width:100%; height:auto;}**/

a{text-decoration:none; transition:0.2s; color:#333;}
a:hover{ opacity:0.5;}
.clearfix { clear: both;}
.mr0 { margin-right: 0px;}



body { background-color: #FCFCFC;}

header { height: 150px; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background:rgba(252,252,252,0.8) }
#hd_inner { width: 1200px; margin: 0 auto;}
h1 {float: left; margin: 55px 0 30px 0;}

#pcnav { float: right; margin-top: 100px;}
#pcnav li { font-size: 20px; float: left; margin-right: 50px; list-style: none;}

main { width: 1200px; margin: 250px auto 0;}

#kv { width: 1200px; height: 650px; margin: 100px auto 0;}

#slide-show {
  position: relative; }
#slide-show img { position: absolute; display: none; left: 0; top: 0; width: 600px; height: 650px; object-fit: cover; }

#kv1{ float: left; width: 600px;}
#kv2{ float: right; width: 600px;}
#kv2 img { width: 100%; height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;}
	
#profile { clear: both; margin-top: 80px; border-left: solid 3px #C7C7C7; padding-left: 30px;}
#profile h2 { font-weight: 300; font-size: 30px; line-height: 20px; padding-top: 10px;}
#profile .fs12 {font-size: 12px; padding-left: 4px;}
#profile p { font-size: 16px; }

#sns { clear: both; margin-top: 100px; width: 1200px; height: 550px; }
#insta { float: left; width: 580px;}
#x { float: right; width: 580px;}

footer { clear: both; margin-top: 150px; height: 100px; background-color: #C7C7C7;}
footer p { color: #FFFFFF; text-align: center; font-size: 12px; padding-top: 20px;}


#bio { clear: both; width: 800px; margin: 160px auto;}
#bio .pic { width: 600px; margin: 0 auto 60px;}
#bio h3 { font-weight: 300; font-size: 30px; line-height: 20px; padding-top: 10px;}
#bio .fs12 {font-size: 12px; padding-left: 4px;}
#bio p { font-size: 16px; border-left: solid 3px #C7C7C7; padding-left: 30px; margin-bottom: 100px;}

#concert { clear: both; width: 1000px; margin: 160px auto;}
#concert a {color: #610608;}
#concert h3 { font-weight: 300; font-size: 24px; line-height: 20px; padding-top: 10px;
  padding: 1em;/*上下の余白*/  border-top: solid 1px #3c3c3c;/*上線*/  border-bottom: solid 1px #3C3C3C;/*下線*/
}
#concert .fs12 {font-size: 12px; padding-left: 4px;}
#concert p { font-size: 16px; border-left: solid 1px #C7C7C7; padding-left: 30px; padding-bottom: 15px; margin-bottom: 100px;}

#concert .box { font-size: 16px; margin-bottom: 100px;}
#concert .box th { text-align: left; width: 140px; padding: 14px 0 14px 30px; border-bottom: solid 1px #3C3C3C; font-weight: 300;}
#concert .box td { padding: 14px 0 14px 20px; border-bottom: solid 1px #3C3C3C; border-left: solid 3px #c7c7c7;}
#concert .box img { width: 460px; height: auto;}
#concert .box h3 { margin-bottom: 0;}

#archive { clear: both; width: 1000px; margin: 160px auto;}
#archive a {color: #610608;}
#archive h3 { font-weight: 300; font-size: 24px; line-height: 20px; padding-top: 10px;
  padding: 1em;/*上下の余白*/  border-top: solid 1px #3c3c3c;/*上線*/  border-bottom: solid 1px #3C3C3C;/*下線*/
}
#archive h4 { font-size: 18px; padding-left: 30px; font-weight: 300;}
#archive .fs12 {font-size: 12px; padding-left: 4px;}
#archive p { font-size: 16px; border-left: solid 1px #C7C7C7; padding-left: 30px; padding-bottom: 15px; margin-bottom: 100px;}

#movie { width: 1200px; margin: 160px auto; }
#movie .box { float: left; display: inline-block; width: 560px; height: 315px; margin: 20px;}


#sub h2 { position: relative; margin-top: 100px;  margin-bottom: 1em; font-size: 60px; font-weight: 300; text-align: center;}
#sub h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

#navArea { display: none;}
#sp_sns { display: none;}



@media screen and (max-width: 599px) {
	header { height: 7em; width: 100%;}
	#hd_inner { width: 95%; margin: 0 auto;}
	h1 { float: left; margin: 3% auto;}
	#hd_inner h1 img { height: 2.5em;}

	#pcnav { display: none;}

	main { width: 100%; margin: 0 auto;}
	#kv1{ clear: both; width: 100%; margin-top: 8em;}
	#kv2{ clear: both; width: 100%; margin-top: 30em;}
	#kv2 img {width: 100%; margin: 0 auto;
		backface-visibility: hidden;
-webkit-backface-visibility: hidden;}
	#kv { width: 100%; height: auto; margin: 0 auto; overflow: hidden;}

	#slide-show {
	  position: relative; }
	#slide-show img { position: absolute; display: none; left: 0; top: 0; width: 100%; height: 30em; object-fit: cover; object-position: top; }



	#profile { clear: both; margin-top: 3em; border-left: solid 3px #C7C7C7; padding-left: 10px;}
	#profile h2 { font-weight: 300; font-size: 30px; line-height: 20px; padding-top: 10px;}
	#profile .fs12 {font-size: 12px; padding-left: 4px;}
	#profile p { font-size: 1em;}

	#sns { display: none;}

	footer { clear: both; margin-top: 5em; height: 100px; background-color: #C7C7C7;}
	footer p { color: #FFFFFF; text-align: center; font-size: 12px; padding-top: 20px;}


	#bio { clear: both; width: 100%; margin: 6em auto;}
	#bio .pic { width: 80%; margin: 0 auto 60px;}
	#bio .pic img { width: 100%;}
	#bio h3 { font-weight: 300; font-size: 30px; line-height: 20px; padding-top: 10px;}
	#bio .fs12 {font-size: 12px; padding-left: 4px;}
	#bio p { font-size: 16px; border-left: solid 3px #C7C7C7; padding-left: 30px; margin-bottom: 100px;}

	#concert { clear: both; width: 100%; margin: 10em auto;}
	#concert a {color: #610608;}
	#concert h3 { font-weight: 300; font-size: 24px; line-height: 1.5em; padding-top: 10px;
	  padding: 1em;/*上下の余白*/  border-top: solid 1px #3c3c3c;/*上線*/  border-bottom: solid 1px #3C3C3C;/*下線*/
	}
	#concert .fs12 {font-size: 12px; padding-left: 4px;}
	#concert p { font-size: 16px; border-left: solid 1px #C7C7C7; padding-left: 30px; padding-bottom: 15px; margin-bottom: 100px;}
	
	
	#concert .box { width: 95%; font-size: 16px; margin-bottom: 100px;}
	#concert .box th { font-size: 0.7em; width: 16%; padding: 1%; border-bottom: solid 1px #3C3C3C; font-weight: 300;}
	#concert .box td { font-size: 0.7em; padding: 1% 1% 1% 2%; border-bottom: solid 1px #3C3C3C; border-left: solid 3px #c7c7c7;}
	#concert .box img { width: 46%; height: auto;}
	#concert .box h3 { font-size: 1em; margin-bottom: 0;}
	
	

	#archive { clear: both; width: 100%; margin: 10em auto;}
	#archive a {color: #610608;}
	#archive h3 { font-weight: 300; font-size: 24px; line-height: 1.5em; padding-top: 10px;
	  padding: 1em;/*上下の余白*/  border-top: solid 1px #3c3c3c;/*上線*/  border-bottom: solid 1px #3C3C3C;/*下線*/
	}
	#archive h4 { font-size: 18px; padding-left: 30px; font-weight: 300;}
	#archive .fs12 {font-size: 12px; padding-left: 4px;}
	#archive p { font-size: 16px; border-left: solid 1px #C7C7C7; padding-left: 30px; padding-bottom: 15px; margin-bottom: 100px;}

	#movie { width: 100%; margin: 10em auto; }
	#movie .box { float: none; display: inline-block; width: 95%; height: auto; margin: 1em;}
	#movie .box iframe { width: 100%; height: auto;}

	#sub h2 { position: relative; margin-top: 100px;  margin-bottom: 1em; font-size: 60px; font-weight: 300; text-align: center;}
	#sub h2:before {
	  content: '';
	  position: absolute;
	  bottom: -15px;
	  display: inline-block;
	  width: 60px;
	  height: 5px;
	  left: 50%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  background-color: black;
	  border-radius: 2px;
	}
	#sp_sns { display: block; margin-top: 6em;}
	#sp_sns p { text-align: center;}
	
	
	
	
	
	
	
	
	
	
	/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
height: 45%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 0.9;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #A1A1A1;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/*============
body
=============*/
	#navArea{display: block;}
	
	
	
}