#contents{
	position:relative;
	background-color:#33a8f1;
	height:670px;
	color:#ffffff;
	font-size:1.3rem;
}

#contents .mark{
	position:absolute;
	display:block;
	background-color:#ffffff;
	width:10px;
	height:10px;
	border-radius:6px;
}
#contents .left{
	position:absolute;
	left:0;
	top:0;
	width:50vw;
	text-align:right;
}
#contents .left ul{
	padding-top:60px;
	padding-right:45px;
	/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繝舌�縺ｮ蛻�レ譎ｯ縺悟承縺ｫ縺壹ｌ縺ｦ縺�ｋ轤ｺ */
	padding-left:40px;
}
#contents .left .mark{
	right:-32px;
	top:0.8rem;
}
#contents ul li{
	position:relative;
	line-height:2.3rem
}
#contents .right{
	position:absolute;
	right:0;
	top:0;
	width:50vw;
}
#contents .right ul{
	padding-top:60px;
	padding-left:60px;
	padding-right:40px;
}
#contents .right .mark{
	left:-43px;
	top:0.8rem;
}
#contents .about{
	position:absolute;
	top:-265px;
	left:calc(50vw - 28px);
	z-index:500;
}
#contents .about img{
	width:60px;
	height:auto;
    animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat{
    from{
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10%{
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    17%{
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    33%{
        transform: scale(0.87);
        animation-timing-function: ease-in;

    }
    45%{
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

#contents .bg{
	position:absolute;
	width:100vw;
	top:-250px;
	height:920px;
	background-image:url("../img/contents_bg.png");
	background-position:center top;
	background-size:1920px auto;
}

@media screen and (max-width: 1300px) {
	h1{
		font-size:2rem;
	}
	h3{
		font-size:1rem;
	}
	h4{
		font-size:1rem;
	}
	#contents{
		font-size:0.7rem;
	}
	#contents .right{
		width:50vw;
	}
	#contents .left{
		width:50vw;
	}
	#contents ul li{
		line-height:1.3rem;
	}
	#contents .left ul{
		padding-left: 25px;
	}
	#contents .left .mark{
		top:1.2vw;
	}
	#contents .right ul{
		padding-left:40px;
		padding-right: 25px;
	}
	#contents .right .mark{
		left:-23px;
		top:1.2vw;
	}
}
@media screen and (max-width: 1300px) and (orientation: landscape){
	#contents .about{
		top:-65px;
	}
	#contents{
		height:400px;
	}
	#contents .bg{
		height:450px;
		top:-50px;
	}
}


#content-1{
	height: 3000px;
}