@charset "utf-8";

body{
	background-image: url("img/background.jpg");
	background-size:100% auto;
	height:800px;
}

/*h1編集*/
h1{
	text-align: center;
	margin:90px 650px 0 0px;
	padding:0 auto;
	font-family: 'Noto Serif', serif;
	/*
	背景画像
	フォントサイズ
	フォンと
	*/
}
p{
	margin:80px 0px 20px 130px;
	font-family: 'Noto Sans JP', sans-serif;
}

/*モーダルウィンドウ*/
#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);/* 背景を半透明にする */
  display: none;/* HTML要素を非表示にする */
  z-index: 1	/* 「メインのHTML要素」よりも高くしたいのでz-indexで調整 */
 }

#modalWindow {
  width: 600px;
  height: 350px;
  position: fixed;/* viewpointを相対位置にする */
  border: 2px solid #D04255;
  background-color: #FFF;
  display: none;
  z-index: 2	/* 「オーバーレのHTML要素」よりも高くしたいのでz-indexで調整 */
}

button {
  margin:0 0 0 100px;
  width: 400px;
  height: 50px;
  font-size: 1.2em;
  color: #D04255;
  background-color: #FFF;
  border: solid 2px #D04255;
  border-radius: 3px;
  transition: .5s;
}

button:hover {
  background: #D04255;
  color: #FFF;
}


/*基本的に生成したliタグの並びを整える*/
#card{
	margin:10px 60px 0 45px;
	width:80%;
	height:200px;
	list-style-type: none;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;/*改行あり*/

}

#card li{
	margin:10px 0px;
	width:170px;
	height:200px;
	position:relative;
	border-radius: 3px;
}

/* カードが回転するような動きをつけるのでimgタグに
position:absoluteを設定 */

#card li img{
	position:absolute;
}

/* .offと.lockは、選択中のカードと2枚見つかったカードの
クリックイベントを無効にするためのクラス */

#card li.off, #card li.lock{
	pointer-events:none;
}

#exp{
	/*説明文
	横幅
	外余白
	内余白
	-背景#006400カード後ろ
	背景画像
	（非表示設定）
	*/
}