@media screen and (min-width:320px) and ( max-width:479px){
	nav#gnav{display:none;}
	#contents{margin-top:50px}
	footer{height:clamp(100px , 15vw , 300px);
		background-size:cover;
}
.news{
		position:relative;
		top:-10vw;
	}

	.second_column_home{
		position:relative;
		top:-150px;
/*		outline:red solid 10px;*/
		height:auto !important;
	}

	.banner{
		z-index:800;
		position:relative;
		height:auto;
		margin:0 auto;
		padding:0;
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		width:200px;
		overflow:hidden;
		flex-wrap:wrap; 
		align-items:space-between;
		gap: clamp(10px , 5vw , 20px);
/*	outline:yellow solid 10px;*/
}


	.banner div{
		position:relative;
		left:0;
		min-width:110px;
		border-radius:5px;
		background:white;
		padding:0;
		height:auto;
		font-size:clamp(12px , 1vw , 14px);
		gap: clamp(8px , 5vw , 10px);
/*		max-width:4em;*/
		display: grid;
		place-items: center;
		flex:1;
		border-radius:10px;
		background:white;
		padding:1em;
		padding-top:1em;
		line-height:1.3em;
		inline-size: max-content;
		margin:0;
		margin-inline: auto;
		text-align:right; 
		height:auto;
		font-size:clamp(11px , 1.5vw , 12px);
	}
	.banner h4{
		font-size:11px;
		position:relative;
		width:8em;
		border-radius:1em;
		padding:0 0.5em;
		line-height:2em;
		margin:0 auto;
}

	.banner div ul{
		position:relative;
		margin-top:-2em;
		margin-left:-0.5em;
		align-content:flex-start;
		list-style-type:none;
		padding:0;
		width:calc(10em , 10vw , 20em)
}

	.banner div li{
			display:block;
			text-align:left;
			background:white;
			margin:0.5em 0;
			border-radius:10px;
			width:fit-content;
}

	.banner div li a{
			display:block;
			text-align:left;
			background:white;
			border-radius:10px;
			padding:0 0.5em;
			width:fit-content;
	}
	.aile li{
		padding:clamp(5px , 3vw , 10px);
		line-height:1.2em;
				width:clamp(120px , 30vw , 400px) !important;
}

	.aile img{
				width:clamp(110px , 30vw , 400px) !important;


}

	.aile h5{
		font-size:12px !important;
	}	
}


@media screen and (max-width:690px) {

  .tb02 .head{
    display:none;
  }

  .tb02 {
    width: 90%;
		margin:0 auto;
  }
  table.tb02 td {
    display: block;
    width: 100%;
    border-bottom:none;
background:white
  }
  table.tb02 td:first-child{
 background:var(--base_bgcolor);
    color:#fff;
    font-weight:bold;
  }

  .tb02 tr:last-child{
    border-bottom: solid 1px #ccc;
	}
.news{
		position:relative;
		top:-12vw;
	}
}


@media screen and (max-width:767px) {
	#contents{margin-top:50px;}
	.hamburger{display:flex !important}
	nav#gnav{display:none;}
	.banner{
		width:90%;
		display:flex;
		flex-wrap:wrap; 
		align-items:space-between;
		gap: clamp(10px ,0.5vw , 20px);
/*		border:pink solid 1px;*/
	}


  .main_imgBox {
		position:relative;
		top:-100px;
		left:0;
		width:auto;
		height:clamp(200px , 50vw , 300px);
	overflow: hidden;
	position: relative;
		object-fit:cover;
}


	.second_column_home{
		height:clamp(300px , 3vw , 400px)
	}

	.aile li{

		line-height:1.2em;
		min-width:30%;
}
	.aile li h5{
		font-size:clamp(15px , 2vw , 17px);
}
 table.tb03 th{text-align:center}
 table.tb03 th , table.tb03 td{
	display:block;
	width:80vw;
	height:3em;
	line-height:3em;
	padding:0;
display:none
	}
}


@media screen and (max-width:999px) {
.news{
		position:relative;
		top:-60px;
}
	.main_imgBox , .main_img{
		height:clamp(350px , 50vw ,500px);

	}

	.top_bg_img img{
		height:clamp(350px , 50vw ,500px);
}	
 table.tb03 th{text-align:center}
 table.tb03 th , table.tb03 td{
	display:block;
	width:80vw;
	height:3em;
	line-height:3em;
	padding:0
	}

	footer{
  background-size: contain;
  background-repeat: no-repeat;
/*  margin: 100px auto 0;*/
  max-width: 1280px;
  height:auto;
	}

.footer_top{
	position:relative;
	margin-top:-3vw;
	background-size:contain;
	}
}

@media screen and (max-width:1279px) {
	.main_imgBox , .main_img{
		height:clamp(400px , 50vw ,600px);
	}
	.top_bg_img img{
		height:clamp(400px , 50vw ,600px);
	}

}