body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	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;
}



@media (min-width:767px){
	body{
		background-color: #F8CCCD;
		background-image: url(../img/bgHARD.webp);
		background-size: 100% auto;
		background-repeat: no-repeat;
		animation: bgMove 4s ease-in-out infinite;
	}

	img.imagePC{
		display: block;
		width: 100%;
		max-width: 1600px;
		height: auto;
		margin: 0 auto;
		
	}

	img.imageSMART{
		display: none;
	}

	.softbox{
		position:absolute;
		width: 100%;
		top :0;
		left: 0;
	}

	.bg-anim {
		animation: bgMove 8s ease-in-out infinite;
	}

	.img-anim {
		animation: imgShow 8s ease-in-out infinite;
	}


}

@keyframes bgMove {
	0%   { background-image: url(../img/bgHARD.webp); background-color: #F8CCCD; }
	50%  { background-image: url(../img/bgSOFT.webp); background-color: #C2CCD8; }
	100% { background-image: url(../img/bgHARD.webp); background-color: #F8CCCD; }
}

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


@media (max-width:766px){
	body{
		background-color: #F8CCCD;
		background-image: url(../img/bgHARD_SMART.webp);
		background-size: 100% auto;
		background-repeat: no-repeat;
		animation: bgMove 4s ease-in-out infinite;
	}

	img.imagePC{
		display: none;
	}

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

	.softbox{
		position:absolute;
		width: 100%;
		top :0;
		left: 0;
	}

	.bg-anim {
		animation: bgMoveSMART 8s ease-in-out infinite;
	}

	.img-anim {
		animation: imgShow 8s ease-in-out infinite;
	}



}

@keyframes bgMoveSMART {
	0%   { background-image: url(../img/bgHARD_SMART.webp); background-color: #F8CCCD; }
	50%  { background-image: url(../img/bgSOFT_SMART.webp); background-color: #C2CCD8; }
	100% { background-image: url(../img/bgHARD_SMART.webp); background-color: #F8CCCD; }
}