@charset "UTF-8";
/* CSS Document */

#single #secDesc {
	background-color: #F2F2F2;
	border-radius: 15px;
	padding: 30px 40px;
}
#single #secDesc h3 {
	font-size: 24px;
	text-align: center;
	padding: 0.3em 0;
	color: #E61E73;
	border: none;
	border-top: #E61E73 solid 2px;
	border-bottom: #E61E73 solid 2px;
}
#single #secDesc p {
	font-size: 18px;
}
#single #secDesc h4 {
	font-size: 18px;
	color: #E61E73;
	padding: 1em 0 0.3em;
}
#single #secDesc ul {}
#single #secDesc ul.ul01 {
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: #B5B5B6 solid 1px;
}
#single #secDesc li {
	font-size: 18px;
	padding: 0.2em 0;
}
#single #secDesc li.li02 {
	text-indent: -5.8em;
	padding-left: 5.8em;
}
#single #secDesc li.li03 {
	text-indent: -4.8em;
	padding-left: 4.8em;
}
#single #secDesc li::before {
	content: '●';
	color: #E61E73;
	margin-right: 0.3em;
}

.hatudenou .flexImg {}
.hatudenou .flexImg .imgBox {
	width: 49.2%;
	max-width: 394px;
}

.hatudenou .imgBox p {
	color: #888;
	padding: 0.3em 0;
	font-size: 18px;
}
.hatudenou .imgBox.noName {
	margin-bottom: 1em;
}
.hatudenou #sec02 .points {
	background-color: #FCE4DF;
	padding: 20px 40px;
	border-radius: 15px;
}
.hatudenou #sec02 .points h3 {
	font-size: 28px;
	text-align: center;
	color: #E61E73;
	padding: 0;
}
.hatudenou #sec02 .points p {
	font-size: 18px;
}
.hatudenou #sec02 .points a,
.hatudenou .desc a{
	color: #278ED7;
	text-decoration: underline;
}
.hatudenou #sec02 .points a:hover,
.hatudenou .desc a:hover {
	opacity: 0.6;
}
.hatudenou .btmbtBox {
	padding: 1% 0 3% 0;
}
#single a.linkGrn {
	width: 100%;
	border-radius: 999px;
	background: linear-gradient(to right, #52a0fd 0%, #00e2fa 25%, #52a0fd 50%, #00e2fa 75%,#52a0fd 100%);
	position: relative;
	display: block;
	background-repeat: repeat-x;
	background-size: 200%; /* image size */
  animation: bg 5s infinite linear;
}
#single a.linkGrn span {
		font-size: 130%;
		font-weight: 500;
	}
#single a.linkGrn:before {
content: "";
display: inline-block;
height: 40px;
position: absolute;
bottom: -5px;
left: 30px;
right: 30px;
z-index: -1;
border-radius: 30em;
filter: blur(20px) brightness(0.95);
transform-style: preserve-3d;
transition: all 0.3s ease-out;
	background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
}
#single a.linkGrn:after {
	content: "";
	position: absolute;
	left: 3%;
	top: 0%;
	width: 6%;
	height: 100%;
	background-image: url("../img/yubi.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	animation: yubi 1s infinite linear;
}
@keyframes bg {
  0% {
    background-position: 0 0;
		transform: translateY(0);
  }
  50% {
    background-position: -100% 0;
		transform: translateY(20%);
  }
	100% {
    background-position: -200% 0;
		transform: translateY(0);
  }
}
@keyframes yubi {
  0% {
		transform: translateX(0);
		opacity: 1;
  }
	50% {

		opacity: 1;
  }
  100% {
		transform: translateX(80%);
		opacity: 0;
  }

}


@media screen and (max-width : 959px ){
	#single a.linkGrn:after {
		display: none;
		}
}

@media screen and (max-width : 599px ){
	#single #secDesc {
		padding: 30px 20px;
	}
	.hatudenou .flexImg .imgBox {
		width: 100%;
		max-width: 100%;
		margin: 0 auto 1em;
	}
	.hatudenou .imgBox p,.hatudenou #sec02 .points p {
		font-size: 4.3vw;
		font-size: clamp(15px, 4.3vw, 17px);
	}
	.hatudenou #sec02 .points {
		padding: 20px 20px;
	}
	.hatudenou #sec02 .points h3 {
		font-size: clamp(19px, 5.3vw, 21px);
		padding-bottom: 0.5em;
	}
	#single a.linkGrn {
		width: 100%;
		border-radius: 10px;
		font-size: clamp(17px, 4.8vw, 19px);
		padding: 5% 0;
		padding-bottom: 4em;
	}
	
	#single a.linkGrn:after {
		display: block;
		height: 3em;
		width: 3em;
		left: 40%;
		top: inherit;
		bottom: 1em;
		background-position: center bottom;
		}

}