/* CSS Document */
.body{
	background:#233858;
	margin: 0px;
}

.header{
	background:#D8D4A3;
	color:#A3A3A3;
	font-size: 30px;
	padding: 30px;
	text-align: center;
}

.menu{
	background:#5A7194;
}


.menu-in {
	width: 640px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
}




/* リセットCSS */
h1,h2,h3,h4,
div{
	box-sizing: border-box;					/* paddingを加えてもサイズは固定 */
	margin: 0px;
	padding: 0px;
}



.menu-item {
  flex: 1;  /* 横幅を均等に広げる */
  background-color:#A6AFC1;
  color: white;
  text-align: center;
  padding: 8px;
  text-decoration: none;  /* アンダーラインを消す */
  transition: background-color 0.3s ease;
}

.menu-item:hover {
  background-color:#5A7194;
}

.bt01{
	background:#2D2B3D;
	color: #fff;							/* ff ff ff */
	padding: 8px;							/* スペース */
	width: 110px;							/* 横幅 */
	text-align: center;						/* テキスト位置 */
	border-radius: 5px;						/* 丸角 */
	transition-duration: 0.3s;
	white-space: nowrap;
	
}
.bt01:hover{								/* hover = 擬似セレクタ */
	background:#000000;
	cursor: pointer;						/*ボタン上でカーソルが変化*/
	transform: rotate(-90deg);				/*指定した角度に応じて回転*/
	transform: scale(1.2);					/*拡大*/
}


.contents {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background:#223A70;
  padding: 10px;
  color:#FFFFFF;
}


.img {
  display: block;
  width: calc(100% - 20px);
  margin: 10px auto;
}
.image-container {
  display: flex;
  flex-wrap: nowrap;           /* 折り返さない → 横並び固定 */
  overflow-x: auto;            /* 狭いときはスクロール */
  gap: 10px;
  justify-content: center;
  padding: 10px;
}

.image {
  height: auto;
  width: 100%;                 /* 親要素の幅に応じて縮小 */
  max-width: 40vw;             /* ビューポートの40%以内に制限 */
  flex: 0 0 auto;              /* 伸縮せず固定サイズ（scroll向け） */
  object-fit: contain;         /* 比率を維持して収まるように */
}

.title{
	text-align: center;
	font-size:20px;
		}

.title2{
	font-size:20px;
		}