@charset "UTF-8";
iframe {
  width: 80vw;
  max-width: 900px;
  height: 80vw;
  min-height: 600px;
	text-align: center
}
@media screen and (max-width: 500px) {
  iframe {
    max-width: 600px;
    height: calc(80vw * 3 / 4);
    max-height: 700px;
  }
}
/*iframe {
	
  width: 80vw;
max-width: 900px;
  height: calc(80vw * 9 / 16);
}
@media screen and (max-width:1300px) {
	iframe {
	
  width: 80vw;
		max-width:none;
 height: calc(80vw * 9 / 16);
}
}
@media screen and (max-width:1100px) {
	iframe {
	
  width: 80vw;
  max-width: 900px;
  height: 70vw;
}
}
@media screen and (max-width:850px) {
	iframe {
	
  width: 80vw;
  max-width: 900px;
  height: 120vw;
}
}
@media screen and (max-width:650px) {
	iframe {
	
  width: 40vw;
 
}
}*/
/*@media screen and (max-width:449px) {
	iframe {
	
  width: 80vw;
  max-width: 900px;
  height: 150vw;
}
}*/
@media screen and (max-width:349px) {
	iframe {
	
  width: 80vw;
  max-width: 900px;
  height: 180vw;
}
}
.sp{
	display: none
}

body{
	width:100%;
	background-color:#e5e5e5;
}
header,h1,h2,h3,h5,h6,footer{
	font-family:"Quicksand", sans-serif, "Copperplate Gothic Bold", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}
h2{
	font-size:24px;
}
p,h4{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}
.kv img{
	width:100%;
	height: auto;
}
.pFix{
	width:100%;
	position:fixed;
	z-index: 999
}
.hWrap{
	height:100px
}
header .title{
	width:100%;
	text-align: center;
	padding:1% 0;
	background-color: #566274;
	color:#cccccc;
	font-size:32px;
	
}
header h1 a{
	color:#cccccc;
}
header .navi{
	background-color:#cccccc;
	padding:1% 0;
	width:100%;
	
}
header ul{
	display: flex;
	max-width:900px;
	width:100%;
	margin:0 auto;
	color:#566274;
	font-size:20px;
	justify-content: space-between
}
header ul li a{
	color:#566274;
}
@media screen and (max-width:499px) {
	.pc{
		display: none;
	}
	.sp{
		display: block
	}
	.pFix{
		display: none
	}
	header {
  padding:10px;
  background:#566274;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 100px;/*最大幅（調整してください）*/
  height: 100%;
  background: #e5e5e5;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
	.spNavi{
		display: block
	}
	.spNavi li{
		padding:5%
	}
}


header ul li a:hover,.iconZone ul li a i:hover,.footNavi li a:hover{
	color:#fff;
}
.pad{
	padding-top:12%;
}
.mainContents{
	max-width: 1000px;
	width:99%;
	margin:0 auto;
	padding-top:2%;
	background-color:#e5e5e5;
	
	
}

#kvArea{
	width:80%;
	max-width:700px;
	margin:0 auto 0;
	
}
#iconZone ul{
	width:27%;
	margin:1% auto;
	display: flex;
	justify-content: space-between
}
#iconZone ul li{
	
}
.iconColor{
	color:#000;
}
.iconColor a{
	color:#000;
}
.iconColor a :hover{
	color:#fff;
} 

/*myworks*/
.worksWidth{
	width:90%;
	max-width: 900px;
	margin:5% auto;
}

.worksWidth h2{
	padding:1% 0;
	color:#e5e5e5;
	background-color: #566274;
	text-align: center;
}
.worksWidth h2 a{
	color:#e5e5e5;
}
.audiojs {
    margin: 0 auto;
	width: 500px;
}
.track-details { 
	clear: both; height: 20px; width: 280px; padding: 1px 6px; background: #eee; color: #222;  font-size: 11px; line-height: 20px;
}

.work01{
	margin:2% auto;
}
.work01 li{
	display: block;
	
}
.work01 li:first-child{
	padding-left:10%;
	padding-bottom:2%
}
@media screen and (max-width:700px) {
	.worksWidth{
	width:95%;
	max-width: 400px;
	margin:5% auto;
}
.audiojs {
    margin: 0 auto;
	width: 300px;
}	
}
/*live*/
.tableZone{
	width:90%;
	margin:5% auto;
}
.tableZone h2{
	padding:1% 0;
	color:#e5e5e5;
	background-color: #566274;
	text-align: center;
}
.tableZone h2 a{
	color:#e5e5e5;
}
.liveList,.newsList,.worksList{
	background-color: #fff;
	padding:2% 0 0.5%;
}
.liveList table{
	width:95%;
	margin:0 auto;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
table{
	width:90%;
	margin:0 auto;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.t01{
	padding:2% 1%;
	font-size:23px;
}
.iconNew{
	background-color: #7d0022;
	padding:2% 5%;
	border:1px solid #7d0022;
	border-radius: 10%;
	color:#fff;
	font-family: 'Quicksand', sans-serif,"Copperplate Gothic Bold", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}
.seeMore{
	padding:1% 0;
	text-align: right;
	background-color: #566274;
	color:#fff;
}
.seeMore:hover{
	background-color: #CCCCCC;
	color:#566274;
}
.seeMore_p{
	padding:1% 0;
	text-align: right;
	background-color: #CCCCCC;
	color:#566274;
}
.seeMore_p:hover{
	background-color:#fff;
	color:#566274;
}
table a h6{
	text-align: center;
	margin-left:10%;
}
@media screen and (max-width:700px) {
	
	.t01{
	padding:5% 1%;
	font-size:16px;
}
	.liveSp{
		margin:0 auto;
		text-align: center
	}	
	.iconNew {
    background-color: #7d0022;
    padding: 1% 3%;
    border: 1px solid #7d0022;
    border-radius: 10%;
    color: #fff;
    font-family: 'Quicksand', sans-serif,"Copperplate Gothic Bold", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
	table a h5, table a h6 {
    font-size: 20px;
    color: #000;
}
	.liveList, .newsList, .worksList {
    background-color: #fff;
    padding: 2% 0 4.5%;
}
}


/*underline*/
.tUndLine{
  position: relative;
  display: inline-block;
}
.tUndLine:before{
  position: absolute;
  top: 1.3em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #566274;
  transition: 0.2s;
}
.tUndLine:hover:before{
  width: 100%;
}

.tUndLine_d{
  position: relative;
  display: inline-block;
  text-align: center;
  margin-left:10%;
}
.tUndLine_d:before{
  position: absolute;
  top: 1.3em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #7d0022;
  transition: 0.2s;
}
.tUndLine_d:hover:before{
  width: 100%;
}

.fa-caret-right{
	font-size:24px
}
table a h5,table a h6{
	font-size:24px;
	color:#000;
}
/*reserve*/
.calender{
	margin:0 auto;
}
.btnJump h3{
	width: 60%;
    margin: 6% auto;
    /* border: 5px solid #566274; */
    padding: 1.5%;
    font-size: 26px;
    color: #566274;
    text-align: center;
    background: #fff;
}
.btnJump h3:hover{
	background-color: #cccccc;
	color:#fff;
}
.newsList .t01{
	line-height: 1.5
} 
@media screen and (max-width:700px) {
table a h5, table a h6 {
    font-size: 20px;
    color: #000;
}
}
 /*profile*/

.prof{
	margin:0 auto;
	padding:3% 0;
	background-color:#566274;
}
.profIn{
	width:70%;
	margin:2% auto;
	
}
.profImg img{
	width:100%;
	height:auto
	
}
.prof h2{
	color:#fff;
	text-align: center;
	margin:0 auto 2%;	
}

.profInner{
	color:#fff;
	line-height:1.9
}
.profInner h4{
	text-align: center;
	font-size:24px;
	margin-bottom:7%
	
}
.profInner p{
	
	text-align: left;
	width: 90%;
    margin: 0 auto;
}

@media screen and (max-width:700px) {
.profIn{
	width:100%;
	margin:2% auto;
	
	
}

.profInner{
	
	color:#fff;
	line-height:1.7
}
.profInner h4{
	text-align: center;
	font-size:20px;
	margin-bottom:7%
	
}
}
/*CONTACT*/
.request{
	background-color:#e5e5e5;
	padding:1% 0
}
.request h3{
	width:40%;
	margin:2% auto;
	padding:4%;
	text-align: center;
	background-color: #566274;	
	color:#fff;
	font-size:30px
}
.reqKome{
	font-size:20px;
	
}
@media screen and (max-width:700px) {
	.request h3{
	width:63%;
	margin:20% auto;
	padding:4%;
	text-align: center;
	background-color: #566274;	
	color:#fff;
	font-size:24px
}
}




.of_h{
	width:98%;
	overflow: hidden;
}
.clickToTop{
	width:60px;
	height: 50px;
	background-color:#b0b9b8;
	border-radius: 10px 10px 0 0;
	float: right;
	position: relative;
}
.clkTTpInr{
	position: absolute;
	left:33%;
	top:14%;
	color:#fff;
	
}


.fNavi{
	background-color:#485466;
	display: none;
}
.footNavi
{
	max-width:900px;
	width:100%;
	margin:0 auto;
	color:#cccccc;
	font-size:20px;
	 display: flex;
	justify-content: space-between;
	padding:1% 0;
	
}
footAtt li a{
	color: #cccccc;
}
footer ul li :hover{
	color:#fff;
}
footer .footerSign{
	width:100%;
	text-align: center;
	padding:2% 0;
	background-color: #566274;
	color:#cccccc;
	font-size:32px;
}
.footNavi li a{
	color:#cccccc;
}
.footerSign .iconZone ul{
	max-width: 90px;
	width:50%;
	margin:0 auto 10px;
	text-align: center;
	background-color: #566274;
	display: flex;
	justify-content: space-between
}
.copyright{
	line-height: 1.5;
	font-size:10px
}
.footAtt{
	width:20%;
	margin:10px auto 0;
	display: flex;
	justify-content: space-around;
	display:none;
}
.footAtt li{
	font-size:12px
}
.footAtt li a{
	color: #ccc;
}
.bx-wrapper {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow: none;
    border:none; 
    background: #e5e5e5;
}
.bx-prev,.bx-next{
	display: none;
}
.sp{
	display: none
}
@media screen and (max-width:499px) {
.sp{display:block;}
.pc{display:none}
}