@charset "utf-8";
/* CSS Document */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body{
	margin: 0 auto;
	text-align: center;
	    width: 100%;
    max-width: 700px;
}
img {
	width: 100%;
	max-width: 700px;
}
img.top{
	margin: 0 0 20px 0;
}
.red {
    color: #F00;
}
.line img{
	animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.point {
	box-sizing: border-box;
	background: linear-gradient(
71deg
, #F44336 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(
137deg
, #fff701 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(
126deg
, #db3a0a 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(
152deg
, #ff7ea6 100%, rgba(9, 245, 5, 0) 70%);
	color:#FFF;
	padding: 20px 0;
	}	
	

.point ol{
	list-style:none;
	padding:0 0;
	display:flex;
	flex-direction: column;
	text-align:center;
	margin-top:30px;
	}
.point li h3{
	position:absolute;
	top:-25px;
	left: 0;
	right: 0;
	margin: auto;
	background-color:#FFF;
	padding:5px 10px;
	font-size:35px;
	width: 200px;
	height: 40px;
	border-radius:15px;
	text-shadow:none;
	color: #fe8695;
	text-align: center;
}
.point li {
	width:80%;
	position:relative;
	font-weight:bold;
	font-size: 40px;
	background-color:#FFF;
	margin:30px  auto 20px;
	padding:0px 0;
	border-radius:15px;
	color:#000;
	text-align:center;
	}
.point li span {
	color:#ff6601;
	}	


















footer{
	
padding: 20px 0;
	
background: #ff6767;
}






@media screen and (max-width: 670px){
.point {
    padding: 20px 0;
}
.point li {
    width:100%;
    font-size: 23px;
    text-align:center;
}
.point li h3{
	width: 150px;
	font-size: 20px;
	}
ol{
	list-style:none;
	padding:0 0;
	width:96%;
	margin: 20px auto 0px;
	}		
	
.point ol {
    margin-top: 10px;
}	

.js-marker-block {
    display: none;
}

	
	
}