@import url("tables.css");
@import url("commonstyles.css");

* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
}

  button {
	width: 100px;
	height:100px;
  }

  #sound_area {
	width: 100%;
	background-color: black;
	color:white;
	text-align: center;
	padding-bottom: 30px;
  }
	.sound_button {

	}
	.sound_button_area {
		display: inline-block;
	}
	.sound_button_title {
	}
  #downter_area {
	width: calc(100%-200px);
	height: 100px;
	text-align: center;
  }

  #downter_area label {
	width: 200px;
	height:50px;
  }

  #downter_area button {
	width: calc(80%-200px);
	height:50px;
  }

  #setting_minus_area {
	width: calc(100%-200px);
	height: 100px;
	text-align: center;
	margin-right: 100px;
  }

  #setting_minus_area button {
	width: calc(80%-200px);
	height:50px;
  }

  #setting_minus_area label {
	width: 200px;
	height:50px;
  }

  #setting_sound_area {
	width: calc(100%-200px);
	height: 100px;
	text-align: center;
  }

  #setting_sound_area button {
	width: calc(80%-200px);
	height:50px;
	background-color: #89c7de;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-left: 20px;
  }

  #setting_sound_area label {
	width: 200px;
	height:50px;
	margin-right: 20px;
  }

  #counter {
	padding: 200px 0;
  }
  .wrapper {
	min-height: 100vh;
	height: 300px;
  }

	/* 停止ボタンの色 */
	.sound_stop_button {
		height:40px;
		color:white;
		background-color: rgba(255,0,0,1.0);
		opacity: 0.3;
		border-radius: 20px;
	}

#sitemap {
	width: 100%;
	text-align: left;
}

/*未訪問のリンクの色*/
#sitemap a {
	text-decoration: none;
	color:#ffffff; background:#ffffff;
}

/*訪問済みのリンクの色*/
#sitemap a:visited {
	color:#00ccff;
	color:#0000cc; background:#ffffff;
}
/*カーソルが乗っているリンクの色*/
#sitemap a:hover {
	color:#ffffff; background:#0000cc;
}
/*クリック中のリンクの色*/
#sitemap a:active {
	color:#ffff00;
}
#sitemap h4 {
	padding-left: 10px;
}
#sitemap h5 {
	color:#0000cc; background:#ffffff;
	padding-left: 10px;
}
#sitemap h5:hover {
	color:#ffffff; background:#0000cc;
}

#setting_sound_area {
	/* 装飾 */
	width: 100%;
	background-color: white;
	color: #89c7de;
	text-align: center;
	padding: 30px 0;
}

#nav {
	/* 装飾 */
	width: 100%;
	background-color: white;
	color: #89c7de;
	text-align: center;
	padding: 30px 0;
}

#nav a {
	/* ナビゲーションリンクの装飾 */
	color: #89c7de;
	text-decoration: none;
	padding: 10px 20px;
}

#nav a:hover {
	/* ナビゲーションリンクのホバー効果 */
	background-color: #89c7de;
	color: white;
}

#howto {
	/* 装飾 */
	width: 100%;
	background-color: #89c7de;
	color: #fff;
	text-align: center;
	padding: 30px 0;
}

#howto h3 {
  font-size: 1.5em;
  margin-bottom: 0.8em;
  color: #2a4d8f;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

#howto ul {
  padding-left: 1.2em;
  list-style-type: none;
  line-height: 1.8;
  color: #333;
}

#howto p {
  margin-bottom: 1em;
  font-size: 1.05em;
  color: #444;
}

#article-views {
	/* 装飾 */
	width: 100%;
	background-color: white;
	color: #89c7de;
	text-align: center;
	padding: 30px 0;
}

footer {
	/*footerの装飾*/
	width: 100%;
	background-color: #89c7de;
	color: #fff;
	text-align: center;
	padding: 30px 0;
}