@charset "utf-8";
/* CSS Document */

header {
  display: flex; /*横並びに*/
  width: center;
  height: 80px;
  background-color: skyblue;
	border: lightblue ridge 6px;
  align-items: center;
	padding-left: 10%;
}

header h1{
	
	border: #81FFE3 double 6px; 
	border-radius: 15px; 
	padding: 10px;
	
}
 
.title {
  margin-right: auto;
}
 
.menu-item {
    list-style: none;
    display: inline-block;
    margin: 10px;
}

.menu-item a {
    display: block; /* ブロック要素にすることで、全体がクリック可能になる */
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #006E9F;
    text-decoration: none;
    border-radius: 5px;
	border: solid #0095A7;
    text-align: center;
    width: 200px;  /* ボタンの幅を指定 */
    height: 50px;  /* ボタンの高さを指定 */
    line-height: 50px; /* テキストをボタンの中央に揃える */
	transition: transform 0.3s ease; /* アニメーションの追加 */
}

.menu-item a:hover {
	transform: scale(1.05); /* ホバー時に拡大 */
}

.menu-item a:active {
	transition: transform 0.3s ease; /* アニメーションの追加 */
    background-color: #005070; /* クリック時に変わる色 */
}
div{
	width: 100%;
    text-align: center;
}

main gametitle{
	text-align: center;
}

main gametitle h1{
	margin-right: 10%;
	margin-left: 10%;
	background-color: #FFFFFF;
	border: #D3D3D3 outset 6px; 
}

.gameimage {
	display: flex;
	justify-content: center;
  align-items: center;
}

.gameimage img{
	width: 45vw;
	height: 100%;
}

.production-environment img {
	margin: auto;
	width: 30vw;
}

.production-environment h2 {
	margin-right: 10%;
	margin-left: 10%;
	background-color: #FFFFFF;
	border: #D3D3D3 dotted 6px;
}

.production-environment p {
	
	margin: auto;
    margin-bottom: 20px;
	text-align: center;
	background: #EBEBEB; 
	border: #E0E0E0 solid 2px; 
	padding: 20px;
	width: 80%;
}

video {
	 display: flex;
	width: 50vw;
	margin: auto;
  justify-content: center;
  align-items: center;
}