.chuui {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 1000; /* 他の要素の上に表示 */
	display: block;

	text-align: center;
	color: #356e87;
	font-size: 16px;
	margin-top: 20px;
	padding: 10px;
	font-weight: bold;
	background-color: #f0f8ff; /* 明るい背景色 */
	border-radius: 5px; /* 角を丸くする */
}

/* CSS Document */
a{text-decoration: none;
}

.body{
	background: #aedc;
	margin: 0;
	display: flex; /* Flexコンテナに設定 */
    flex-direction: column; /* 子要素を縦並びに */
    min-height: 100vh; /* 画面の高さいっぱいに広げる */
	overflow-x: hidden;
}

h2{
	color: #356e87;
	text-align: center;
}
h5{
	text-align: left;
}

h6{
	font-size: 15px;
	color: dimgrey;
}

.menu2 {
    background-color: #aedce6;
    color: #356e87;
    flex-shrink: 0;
	display:flex;
	text-align: center;
	flex-direction: row;
	gap:0px;
	flex-grow: 1;
	align-items: center;
	justify-content: space-around;
	border: none;
	text-decoration: none;
}

.menu-item4{
	color: #356e87;
    text-decoration: none;
    display: block;
	padding:20px;
	text-align: center;
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 80px;
	background-color: #356e87;
	color: white;
}

.container{
	color: #356e87;
	font-size: 30px;
	padding: 30px;
	text-align: center;
	flex-grow: 1;
}
	
.container2{
	font-size: 30px;
	padding: 30px;
	text-align: center;
	display:flex;
	align-items: flex-start;
	gap:20px;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
}

.container3{
	color: #356e87;
	font-size: 30px;
	padding: 30px;
	text-align: center;
	display:flex;
	gap:20px;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
  justify-content: flex-start;
}

.container-item{
	flex: 1;
    border: 1px solid #aedce6;
	padding: 0;
	box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
}

.container-item2{
	flex: 1;
    border: 1px solid #aedce6;
	padding: 0;
	box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
}

.container-item3{
	flex: 1;
    border: 1px solid #aedce6;
	padding: 0;
	box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
	font-size: 25px;
}

.container3 img.container-item {
	max-width: 600px;
	height: auto; /* 高さの比率を維持する */
	object-fit: contain; /* 画像全体が要素内に収まるように調整する */
	padding:0;
	border: none;

}

.container4 {
	flex: 1;
	padding: 0;
	color:#265062;
	font-size:25px;

}

.container-item4{
	flex: 1;
    border: 1px solid #aedce6;
	padding: 0;
	box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
	font-size: 25px;
	max-width: 600px;
}

.container-item5{
	flex: 1;
    border: 1px solid #aedce6;
	padding: 0;
	box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
	font-size: 25px;
	max-width: 600px;
}

.img{height: 100vh;
}

.rogo{height:9vh;
	padding:0px;
}

/* ------------------------------------------- */
/* 共通スタイル / 縦画面（モバイルファースト）のデフォルト */
/* ------------------------------------------- */
.container {
    padding: 20px;
    text-align: center;
}

.container2 {
    padding: 20px;
    text-align: center;
}

.menu {
    background-color: #aedce6;
    color: #356e87;
    padding: 8px;
	overflow-x: auto;
	flex-shrink: 0;
}

.menu-in {
    display: flex; /* メニュー項目を横並びに */
    justify-content: space-around;
	flex-wrap: nowrap;
	min-width: 100%;
}
.menu-item{
    color: #356e87;
    display: block;
	padding: 20px;
	text-align: center;
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 80px;
}

.menu-item:hover {
    background-color: #356e87;
	color: white;
}

.menu-item2{
    color: #356e87;
    display: block;
	padding: 20px;
	text-align: center;
	flex-shrink: 0;
}

.menu-item2:hover {
    background-color: #356e87;
	color: white;
}

.menu-item3{
	color: #356e87;
    text-decoration: none;
    display: block;
	padding-top: 20px;
	padding-bottom: 30px;
	text-align: center;
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 80px;
	background-color: #356e87;
	color: white;
}

.img2{
	height:200px;
	width: 900px;
	background-image: url("../img/main.png");
	backgroung-size: cover;
}
/* ------------------------------------------- */
/* メディアクエリ: 横画面（Landscape）の場合 */
/* 画面の向きが横向きで、かつ最小幅が900px以上の場合に適用 */
/* ------------------------------------------- */
@media screen and (min-width:900px) {
.body {
	flex-direction: row; /* 横並びに変更 */
	align-items: stretch; /* 子要素の高さを揃える */
}
.container2{
	overflow-y: auto;
}


.container3{
	justify-content: space-around;
	align-items: flex-start;
	flex-direction: row;
	min-width:20%;
}
	
.container-item{
	width: 200px;
	}

.menu {
	width: 20%; /* 横画面時のメニュー幅 */
    flex-shrink: 0; /* 縮まないようにする */
	text-align: center;
	overflow-y: hidden;
	}

.menu-in {
        flex-direction: column; /* メニュー項目を縦並びに */
        justify-content: flex-start; /* 上から順に配置 */
        height: 100%; /* 親要素の高さに合わせる */
}

.container{
	overflow-y: auto;
}

.img2{
	height:100%;
	background-image: url("../img/main.png");
	backgroung-size: cover;
}
	
.container-item4{
	max-width: 300px;
}
	
.container-item5{
	max-width: 400px;
}