body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #9ed4c7;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,"Noto Sans CJK", sans-serif;
	line-height: 200%;
}

.clr{
	clear: both;
}

*{
    margin: 0px;
    padding: 0px;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease 0.3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.delay1{
	transition-delay: .05s; 
}

.delay2{
	transition-delay: 2s; 
}

.img-anim {
	opacity: 0;
	animation: imgShow 2s ease-in-out  forwards;
}

.img-anim2 {
	opacity: 0;
	animation: imgShow2 3s ease-in-out  forwards;
}

@keyframes imgShow {
	0%   { opacity: 0; }
	20%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes imgShow2 {
	0%   { opacity: 0; }
	66%   { opacity: 0; }
	100% { opacity: 1; }
}

@media (min-width:767px){

	.imgbox{
		position: relative;
		width: 100%;
		max-width: 1540px;
		margin-left: auto;
		margin-right: auto;
		background-image: url(../img/image_pc.webp);
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}

	.imgboxin{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 1540px;
		margin-left: auto;
		margin-right: auto;
	}

	img.imagePC{
		width: 100%;
		height: auto;
	}

	img.imageSMART{
		display: none;
	}

}


@media (max-width:766px){

	.imgbox{
		position: relative;
		width: 100%;
		background-image: url(../img/image_smart.webp);
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}

	.imgboxin{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}


	img.imagePC{
		display: none;
	}

	img.imageSMART{
		width: 100%;
		height: auto;
	}


}