/*

＊＊＊全共通の部分＊＊＊
	ベース色になるピンクは「#F2DBD8」
	フォントサイズは基本75%
	フォントカラーは基本「#676767」
	リンク箇所のマウスオーバー色は基本「#bebebe」



＊＊＊ヘッダーのグローバルメニューについて＊＊＊
	最初のスタイルシートは以下の「ヘッダー的な部分(メニュー・トップ画)」に入っている「ここからグローバルメニュー」～「ここまでry」の通り。
	但しトップ画が見えなくなった時点で

	・文字色 ( nav a{color:***;} ) が「#000」から「#676767」へ変更される(javascript参照)
	・背景色 ( nav{bacground-color: ***;}  )が無色から「rgba(255,255,255,0.7)」へ変更される(javascrirpt参照)
	・ポジション ( nav{position: ***;} ) が無指定 ( 無指定時の値は position: static; ) から「fixed」へ変更される(javascript参照)

	その他のスタイル変更は無し

	作家一覧ページの方はトップ画がないので、最初からこの変更後のスタイルで入れると良いかも知れない
	ややこしければヘッダーの実装のみ私がやっても良いし、全く別のヘッダーを作ってもらっても良いと思う




可能な限りコメントを入れてあるけれど、それでも人が書いたコードって分かりにくいと思うので、ここはどうなってんの？みたいな部分はいつでも聞いてもらえると嬉しい！
今回javascriptも使っているがこれは私の自己満に過ぎないので無いものと考えてくれて良いです

ひとまずindexはこんな感じ！作家一覧頼みました！
間に合わないとかの場合は5月7日までに言ってもらえると嬉しいです！

*/





/*以下PC*/


/*--------------------------------------------------------全共通--------------------------------------------------------*/
body,ul,li,h1,p{
	margin: 0;
	padding: 0;
}

body{
	letter-spacing: 3px;
	font-size: 90%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #676767;
	background-color: #F2DBD8;
	width: 100%;
	overflow-x: hidden;
	transition: all 3s;
}

a{
	text-decoration: none;
	color: #676767;
}

a:hover{
	color: #BEBEBE;
	transition: 1s all;
}
/*--------------------------------------------------------全共通--------------------------------------------------------*/


/*--------------------------------------------------------ヘッダー的な部分(メニュー・トップ画)--------------------------------------------------------*/
header{
	width: 100%;
	background-image: url(images/main.jpg);
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.mask{
	position: relative;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
}



/*--ここからグローバルメニュー*/
.menu_btn{
	display: none;
}

nav{
	box-sizing: border-box;
	width: 100%;
	font-size: 85%;
	transition: 1s all;
	padding-top: 2%;
	padding-left: 12%;
	z-index: 100;
	color: black;
}

nav a{
	color: black;
}

nav li{
	float: left;
	width: 20%;
	text-align: center;
	list-style-type: none;
}

nav li:last-child{
	padding-right: 0;
}
/*--ここまでグローバルメニュー*/




h1{
	width: 120%;
	position: absolute;
	top: 23%;
	left: 11%;
}


.snsTop_sp{
	display: none;
}

.snsTop{
	width: 20%;
	position: absolute;
	bottom: 10%;
	left: 40%;
}

.snsTop li{
	float: left;
	padding-right: 20%;
	width: 45px;
	list-style: none;
}

.snsTop li:last-child{
	padding-right: 0;
}
/*--------------------------------------------------------ヘッダー的な部分(メニュー・トップ画)--------------------------------------------------------*/




/*--------------------------------------------------------出展作家--------------------------------------------------------*/

.artist_sp{
	display: none;
}

h2{
	font-size: 150%;
	font-weight: bolder;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.left{
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	width: 30%;
	margin-left: -50%;
	transition: 1s all;
}

.right{
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	background-color: #fff;
	width: 70%;
}

span{
	font-size: 50%;
}


table{
	border: none;
}

td{
	padding: 30px;
}
/*--------------------------------------------------------出展作家--------------------------------------------------------*/




/*--------------------------------------------------------展示会説明--------------------------------------------------------*/
.aboutText_sp{
	display: none;
}

.about{
	box-sizing: border-box;
	padding: 10%;
	background-color: rgba(0,0,0,0.73);
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 50px;
	color:#AEAEAE;
	transition: 1s all;
}

.aboutText{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10%;
	transition: 1s all;
}

.about h2{
	color: #C4C4C4;
	font-size: 300%;
	letter-spacing: 15px;
	font-weight: lighter;
}

#about{
	width: 100%;
	background-image: url(images/02.jpg);	/*cssでぼかしを試みたが上手くいかなかった(´・ω・｀)*/
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}
/*--------------------------------------------------------展示会説明--------------------------------------------------------*/



/*--------------------------------------------------------アクセス--------------------------------------------------------*/

.box_sp{
	display: none;
}

.box{
	background-color: #fff;
	margin-left: 100%;
	margin-top: 10%;
	margin-bottom: 10%;
	padding: 10%;
	transition: 1s all;
}

.box h2{
	margin-bottom: 10%;
}

.map{
	float: left;
	width: 40%;
}

.massage{
	float: right;
	padding-top: 20%;
}

.timetable{		/*一応画像で入れてあるけれど出来ればtableタグか何かで入れたい時刻表*/
	clear: both;
	margin-top: 50%;
	width: 100%;
	text-align: center;
	padding-bottom: 10%;
	position: static;
}

h3{
	font-size: 150%;
}

/*--------------------------------------------------------アクセス--------------------------------------------------------*/


/*--------------------------------------------------------フッター--------------------------------------------------------*/
footer{
	color: #888888;
	margin-top: 90%;
	padding: 7% 10%;
	background-color: #2C2C2C;
	height: 50%;
	position: relative;
}

footer a{
	color: #c2c2c2;
}

footer a:hover{
	color: #888;
	transition: 1s all;
}

footer h3{
	font-weight: lighter;
	font-size: 150%;
}

footer li{
	list-style-type: none;
	line-height: 30px;
}


.up{
	position: fixed;
	z-index: 1000;
	right: 5%;
	bottom: 5%;
	width: 5%;
	opacity: 0;
	transition: 1s all;
}








/*以下スマホ*/
@media screen and (max-width: 640px) {
	
	
	.up{
		width: 10%;
		right: 10%;
	}
	
	h2{
		padding-bottom: 20px;
		font-size: 150%;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
		font-weight: lighter;
		line-height: 250%;
	}
	
	
	/*---------ヘッダ-----------*/
	
	.menu_btn{
		display: block;
		width: 15%;
		position: fixed;
		right:5%;
		top: 2%;
		z-index: 1000;
	}
	
	nav{
		display: none;
		height: 0;
		position:fixed;
		transition: 1s all;
		background-color: rgba(225,225,225,0.82);
		padding: 20% 10%;
		opacity: 0;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	}
	
	nav li{
		clear: both;
		width: 100%;
		height: 100px;
	}
	
	nav li a{
		font-size: 200%;
		color: #000;
	}
	
	nav li a:hover{
		color: #676767;
	}
	
	h1{
		text-align: center;
		width: 80%;
	}
	
	h1 img{
		width: 90%;
		margin-top: 10%;
	}
	
	.snsTop{
		display: none;
	}
	
	.snsTop_sp{
		width: 100%;
		opacity: 0;
		transition: 1s all;
		position: fixed;
		bottom: 20%;
		left: 60%;
		z-index: 1000;
	}
	
	.snsTop_sp li{
		width: 7%;
		margin-right: 5%;
		float: left;
		list-style: none;
	}
	/*---------ヘッダ-----------*/
	
	
	
	
	
	/*---------出展作家-----------*/
	.left, .right{
		display: none;
	}
	
	.artist_sp{
		display: block;
		padding: 20%;
	}
	
	.artist_sp li{
		list-style: none;
		margin-bottom: 30px;
	}
	/*---------出展作家-----------*/
	
	
	
	
	
	
	/*---------展示会説明-----------*/
	.aboutText{
		display: none;
	}
	
	.aboutText_sp{
		display: block;
		margin-top: 0;
		padding: 5%;
		line-height: 200%;
	}
	
	.aboutText_sp h2{
		font-size: 150%;
		letter-spacing: 10px;
	}
	/*---------展示会説明-----------*/
	
	
	
	
	
	/*---------アクセス-----------*/
	.box{
		display: none;
	}
	
	.box_sp{
		display: block;
		background-color: #fff;
		padding: 10%;
	}
	
	.map_sp{
		width: 100%;
	}
	
	.massage_sp{
		margin-top: 50px;
	}
	/*---------アクセス-----------*/
	
	
	
	
	
	
	/*---------ふった-----------*/
	footer{
		font-size: 80%;
		margin-top: 0;
		padding: 10%;
		padding-bottom: 40%;
	}
	
}