/*====================================== 
INDEX—pCSS
=======================================*/ 


@media screen and (min-width:980px) {
	#index_header h1 {
		margin: 0;
		position: absolute;
		top: calc(50% - 10.5em);
		width: 100%;
	}
	#index_header h1 img {
		width: 600px;
		height:auto;
		text-align: left;
		margin-left:10%;
	}
}

@media screen and (min-width:671px) {
	#index_header {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background:url("../img/bg.png"), 
		url("../../img/mainimg.jpg?date=20230602")center / cover;
	}
	#index_header::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150px;
		background: linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
		content: "";
		z-index: 1;
	}
	#index_header h1 {
		margin: 0;
		position: absolute;
		top: calc(50% - 5.5em);
		width: 100%;
		
		animation-name:fadeLeftAnime;
		animation-delay: 1s;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	#index_header h1 img {
		max-width: 60%;
		height:auto;
		margin-left:5%;
	}
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

#maincont .indexBox h2 {
	font-size:4.0em;
	line-height: 1.8em;
	text-align:center;
}
#maincont .indexBox p {
	font-size:2.0em;
	line-height: 1.8em;
	text-align:center;
}
#main_contents .indexNews {
	background: -moz-linear-gradient(top left, #00b0ed, #00deff);
	background: -webkit-linear-gradient(top left, #00b0ed, #00deff);
	background: linear-gradient(to bottom right, #00b0ed, #00deff);
	padding:30px;
	margin-bottom:30px;
}
#main_contents .indexNews h3 {
	font-size:4.5em;
	color:#fff;
	font-weight: 700;
	text-align:center;
	font-family: 'Arial Black', Impact, Gadget, sans-serif;
}
#main_contents .indexNews  ul{
	padding:0;
	margin:0;
	list-style:none;
}
#main_contents .indexNews li{
	width:100%;
	font-size:1.6em;
	line-height: 1.8em;
	color:#fff;
	font-weight: 700;
}
#main_contents .indexNews li strong{
	font-size:1.2em;
}
#main_contents .indexNews li p{
	padding-left:1em;
	text-indent:-1em;
}
#main_contents .indexNews li p{
	padding-left:1em;
	text-indent:-1em;
}
#main_contents .indexNews li a {
	color:#fffb0e;
}

#main_contents .indexNews li{
	background:url(../img/dot.png) repeat-x 0px 3px;
	padding-top:30px;
	margin-top:30px;
}

#main_contents .indexNews li strong{
	font-size:1.2em;
}


#main_contents .indexBanner ul{
	padding:0;
	margin:30px 0 0 0;
	list-style:none;
}
#main_contents .indexBanner li{
	width:300px;
	float:left;
	margin:0;
	padding:0 30px 0 0;
}
#main_contents .indexBanner li h3,
#main_contents .indexBanner li.noR{
	padding:0;
}
#main_contents .indexBanner li img {
	width: 100%;
	padding:0;
}

#maincont .cautionBox {
	border:2px solid #ff0000;
	padding:20px;
	margin-bottom:70px;
}
#maincont .cautionBox h3 {
	font-size:2.0em;
	line-height: 1.8em;
	font-weight: 700;
}
#maincont .cautionBox p {
	font-size:1.6em;
	line-height: 1.8em;
	font-weight: 700;
}


	
@media screen and (max-width:670px) {
	#index_header{
		background:none;
		width: 100%;
		height:auto;
	}
	#index_header h1 img,
	.indexBanner img {
		width: 100%;
		padding:0;
	}

	#maincont .indexBox {
	}
	#maincont .indexBox h2 {
		font-size:2.8em;
		line-height: 1.4em;
		margin-bottom:10px;
	}
	#maincont .indexBox p {
		font-size:1.5em;
		line-height: 1.6em;
	}
	#main_contents .indexNews {
	padding:5%;
	margin-bottom:5%;
	}

	#main_contents .indexNews h3 {
		font-size:2.6em;
		line-height: 1.5em;
	}

	#maincont .indexBanner ul{
		padding:0;
		margin:0;
		width:100%;
	}
	#maincont .indexBanner li{
		width:100%;
		padding:4% 0 0 0;
		float:none;
	}
	#maincont .indexBanner li img{
		max-width:100%;
	}

}