/*まず全環境に共通のデザインを記述し，そのあとスマホ用のデザインを付け足しています。前半と後半で記述が異なる場合は，後半の設定が上書きされます。PC用サイトとスマホ用サイトを同じhtmlで記述するためのcssです。*/

/*--------------------*/
/*全環境に共通のデザイン*/
/*--------------------*/

body {
	background-color: #e8e8e8;
}

/*メニューボタン1（カーソルを合わせると青いラインで挟まれる，小さい方）*/
.LoginMenu {
	text-align: right;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	padding: 0;
	background-color: black;
	font-size: 10px;
	font-family: sans-serif;
	width: 618px;
	height: 10px;
}

.LoginMenu * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	font-size: 10px;
	font-family: sans-serif;
}

.LoginMenu li {
	display: inline-block;
	list-style: outside none none;
	margin: 0.5em 0.5em;
	padding: 0.0ex 0.0ex 1.3ex;
	font-size: 10px;
	font-family: sans-serif;
}

.LoginMenu a {
	padding: 0.4em 0;
	color: rgba(255, 255, 255, 0.5);
	position: relative;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	font-family: sans-serif;
}

.LoginMenu a:before {
	position: absolute;
	content: '';
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	opacity: 0;
	top: 25%;
	bottom: 25%;
	left: 0;
	right: 0;
	border-top: 3px solid #34495e;
	border-bottom: 3px solid #34495e;
	font-size: 10px;
	font-family: sans-serif;
}

.LoginMenu a:hover,
.snip1211 .active a {
	color: #ffffff;
	font-size: 10px;
	font-family: sans-serif;
}

.LoginMenu a:hover:before,
.loginMenu .active a:before {
	opacity: 1;
	top: 0;
	bottom: 0;
	font-size: 10px;
	font-family: sans-serif;
}

/*メニューボタン2（カーソルを合わせると青いラインで挟まれる，大きい方）*/
.NaviMenu {
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	padding: 0;
	background-color: black;
	font-family: sans-serif;
}

.NaviMenu * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	font-family: sans-serif;
}

.NaviMenu li {
	display: inline-block;
	list-style: outside none none;
	margin: 0.5em 0.5em;
	padding: 0.0ex 0.0ex 1.3ex;
	font-family: sans-serif;
}

.NaviMenu a {
	padding: 0.4em 0;
	color: rgba(255, 255, 255, 0.5);
	position: relative;
	text-decoration: none;
	display: inline-block;
	font-family: sans-serif;
}

.NaviMenu a:before {
	position: absolute;
	content: '';
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	opacity: 0;
	top: 25%;
	bottom: 25%;
	left: 0;
	right: 0;
	border-top: 3px solid #34495e;
	border-bottom: 3px solid #34495e;
	font-family: sans-serif;
}

.NaviMenu a:hover,
.snip1211 .active a {
	color: #ffffff;
	font-family: sans-serif;
}

.NaviMenu a:hover:before,
.NaviMenu .active a:before {
	opacity: 1;
	top: 0;
	bottom: 0;
	font-family: sans-serif;
}

/*タイトル関係*/
#title a{
	text-decoration: none;
	padding: 20px 0 0 0;
	font-size: xx-large;
	font-family: sans-serif;
	color: #a1cbe6;
	background-color: black;
	filter: alpha(opacity=50);
	width: 618px;
}

#subtitle {
	font-size: small;
	font-family: sans-serif;
	color: white;
	background-color: black;
	filter: alpha(opacity=50);
	width: 618px;
}

.colorone {
	color: #e6b8a1;
}

.colortwo {
	color: #e6daa1;
}

.colorthree {
	color: #c3e6a1;
}

.colorfour {
	color: #aca1e6;
}

#titleback{
	background: black;
	width: 618px;
	height: 100px;
}

#headback{
	background: black;
	width: 618px;
}

#head {
	background-image: url("back.JPG");
	background-size: 618px 250px;
	background-repeat: no-repeat;
	background-color: black;
}

/*一般的な記述*/
.box{
	background: #ffffff;
	text-align: left;
	width: 528px;
	padding: 25px;
	word-wrap: break-all;
	margin: 25px 5px;
}

.title {
	font-size: 20px;
	text-align: center;
	border-bottom: 1px dotted #99ccff;
}

.center {
	text-align: center;
}

/*フォント指定*/
.bolder{
	font-weight: bolder;
}

.small{
	font-size: small;
}

.colorred{
	color: red;
}

.colorgray{
	color: #cccccc;
}

/*index.htmlのtwitter用および更新履歴用の枠を作成*/
.box-back{
	display: table;
	border-spacing: 10px;
   	margin: 0;
   	padding: 0;
	width: 638px;
}

.a-box{
	display: table-cell;
	background: #C3F9A0;
	width: 266.7px;
	height: 400px;
	padding: 20px;
}

.b-box{
	display: table-cell;
	background: #C3F9A0;
	width: 266.7px;
	height: 400px;
	padding: 20px;
}

.c-box{
	font-size: 0;
	width: 0;
	height: 0;
	padding: 0;
}

.c-box .title{
	font-size: 0;
	border-bottom: 0;
}

/*index.htmlの更新履歴*/
table#rireki {
	border: 0;
	padding: 2px;
	table-layout: fixed;
}

table#rireki td.r1{
	text-align: right;
	vertical-align: top;
	width: 40px;
}

/*info.htmlのなごまる画像*/
.nagomaru{
	float: right;
	margin: 10px;
}

/*info.htmlの年間行事予定*/
table#nenkanyotei {
	border: 0;
	padding: 1px;
	table-layout: fixed;
}

table#nenkanyotei td.r1{
	text-align: right;
	vertical-align: top;
	width: 40px;
}

table#nenkanyotei td.r2{
	width: 3px;
}

/*info.htmlの地図*/
.map{
	background-size: 450px;
}

/*index.htmlの新勧用LINEQRコード*/
.LINE{
	width: 50%;
}

/*record-xxxx.html中の，演奏会名およびその日付*/
.sub{
	font-size: 25px;
	text-align: center;
}

.date{
	font-size: 2ex;
	text-align: center;
}

/*recoed-xxxx.htmlの，「第一部」や「アンコール」などのインデックス*/
.subsub{
	text-align: center;
}

/*part.htmlの写真*/
.partimage{
	width: 527.4px;



}

/*ボトム*/
#bottom{
	color: white;
	background-image: url("back2.jpg");
	background-repeat: no-repeat;
	background-color: black;
	text-decoration: none;
}

#bottomback{
	background: #212121;
	width: 618px;
}

#copyright{
	font-size: small;
}



/*ハンバーガーボタンの制御*/
#gnav {
	font-size: 0;
	list-style: none;
	height: 0;
	width: 0;
}

#nav-btn {
	height: 0;
	width: 0;
}

#nav-toggle {
	height: 0;
	width: 0;
}


/*-------------------------------*/
/*スマホ用デザインとして付け足すデザイン*/
/*-------------------------------*/

@media all and (max-width: 920px) {
	/*メニューボタン1（カーソルを合わせると青いラインで挟まれる，小さい方）*/
	.LoginMenu {
		width: 95%;
	}

	/*メニューボタン2（カーソルを合わせると青いラインで挟まれる，大きい方）*/
	.NaviMenu {
		font-size: 0;
		list-style: none;
		height: 0;
	}

	.NaviMenu a:before{
		border-top: 0;
		border-bottom: 0;
	}

	/*タイトル関係*/
	#title a{
		width: 95%;
	}

	#subtitle {
		width: 95%;
	}

	#titleback{
		width: 95%;
	}

	#headback{
		padding: 25px 25px 10px 25px;
		background-color: black;
		width: 95%;
	}

	#head {
		background-size: contain;
	}

	/*一般的な記述*/
	.box{
		width: 80%;
		width: -webkit-calc(100% - 90px);
		width: calc(100% - 90px);
		padding: 45px;
		text-align: left;
	}

	/*index.htmlのtwitter用および更新履歴用の枠を作成*/
	.box-back{
		display: none;
		border-spacing: 0;
		width: 0;
	}

	.a-box{
		font-size: 0;
		width: 0;
		height: 0;
		padding: 0;
	}

	.b-box{
		font-size: 0;
		width: 0;
		height: 0;
		padding: 0;
	}

	.c-box{
		font-size: 15px;
		width: 95%;
		height: 460px;
		background: #C3F9A0;
		padding: 25px;
		text-align: center;
	}

	.a-box .title{
		font-size: 0;
		border-bottom: 0;
	}

	.b-box .title{
		font-size: 0;
		border-bottom: 0;
	}

	.c-box .title{
		font-size: 20px;
		text-align: center;
		border-bottom: 1px dotted #99ccff;
	}

	/*index.htmlの更新履歴の消去*/
	table#rireki {
		width: 0;
	}

	table#rireki td.r1{
		width: 0;
	}

	/*info.htmlの地図*/
	.map{
		width: 90%;
	}

	/*index.htmlの新勧用LINEQRコード消去*/
	.LINE{
		width: 0;
	}

	/*part.htmlの写真*/
	.partimage{
		width: 90%;

		margin: auto 5%;
	}

	/*ボトム*/
	#bottomback{
		padding: 25px;
		background-color: black;
		width: 95%;
	}



	/*ハンバーガーボタンの制御*/
	/*グローバルナビ*/
	.open #gnav {
		background: #f5b199;
		z-index: 1000; /*階層*/
		visibility: visible; /*表示する*/
		transition: .3s;
	}

	#gnav {
		visibility: hidden; /*非表示にする*/
		position: fixed;
		display: table;
		vertical-align: middle;
		color: #fff;
		top: 0;
		height: 100%;
		width: 100%;
		text-align: center;
		font-size: 16px;
		transition: .3s;
	}

	#gnav ul {
		padding: 0;
		display: table-cell;
		vertical-align: middle;
		list-style: none;
	}

	#gnav a {
		border-radius: 25px;
		margin: 5px auto;
		color: #fff;
		text-decoration: none;
		display: block;
		padding: 15px 0;
		width: 30%;
	}

	#gnav a:hover {
		background-color: #fff;
		color: #696969;
		transition: .5s;
	}

	/*メニューのリスト*/
	#gnav ul li {
		opacity: 0;
		transform: scaleX(0) translateX(-260px);
		transition: none;
	}

	.open #gnav ul li {
		opacity: 1;
		transform: scaleX(1) translateX(0);

		transition: all .3s ease-out;

		transition-delay: .1s;
	}

	.open #gnav ul li:nth-child(2) {
		transition-delay: .2s;
	}

	.open #gnav ul li:nth-child(3) {
		transition-delay: .3s;
	}

	.open #gnav ul li:nth-child(4) {
		transition-delay: .4s;
	}

	.open #gnav ul li:nth-child(5) {
		transition-delay: .5s;
	}
	.open #gnav ul li:nth-child(6) {
		transition-delay: .6s;
	}


	/*メニューボタン*/
	#nav-btn {
		z-index: 1000;
		content: "";
		margin: 0 auto;
		width: 80px;
		height: 80px;
		bottom: 10px;
		text-align: center;
		left: 12px;
		bottom: 10px;
		position: fixed;
		background: #f5b199;
		border-radius: 50%;
		transition: all .3s ease-out;
		backface-visibility: hidden;
	}

	.open #nav-btn {
		z-index: 1001;
		background: #fff;
		transition: all .6s ease-out;
	}

	/*ハンバーガー（3本のライン）*/
	#nav-toggle {
		margin: 0 auto;
		display: block;
		position: fixed;
		bottom: 10px;
		left: 13px;
		width: 40px;
		height: 30px;
		cursor: pointer;
		padding: 20px;
		z-index: 1001;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	#nav-toggle div {
		position: relative;
	}

	#nav-toggle span {
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #fff;
		left: 0;
		zoom: 1;
		transition: .35s ease-in-out;
	}

	#nav-toggle span:nth-child(1) {
		top: -5px;
	}

	#nav-toggle span:nth-child(2) {
		top: 8px;
	}

	#nav-toggle span:nth-child(3) {
		top: 21px;
	}

	/*クリック後*/
	.open #nav-toggle {
		z-index: 1002;
		background: transparent;
	}

	.open #nav-toggle span {
		background: #696969;
	}

	.open #nav-toggle span:nth-child(1) {
		top: 9px;
		transform: rotate(-135deg);
		zoom: 1;
	}

	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}

	.open #nav-toggle span:nth-child(3) {
		top: 9px;
		transform: rotate(135deg);
		zoom: 1;
	}


}