@charset "utf-8";
/*PC*/
#cont section{
	position:relative;
	width:620px;
	margin:0 auto;
	padding:20px 0 0;
	}
	
#base{
	position:relative;
	width:487px;
	border-radius:14px;
	padding:30px 10px;
	overflow:visible;
	}
#base #parts{
	position:absolute;
	top:75px;
	right:-21px;
	width:21px;
	height:21px;
}
#base #parts img{
	width:100%;
	height:auto;
}
#cont #base h2{
	position:relative;
	font-size:2.0rem;
	line-height:1.5;
	font-weight:400;
	letter-spacing:0.03em;
	text-align:center;
	}
	#cont #base h2 strong{
	font-weight:700;
	}
#cont #base p{
	font-size:1.1rem;
	position:relative;
	line-height:1.5;
	font-weight:400;
	letter-spacing:0.03em;
	text-align:center;
}
	
#cont #base dl{
	position:relative;
	margin:25px auto 0;
	width:100%;
	display:table;
	border-collapse:collapse;
}	
#cont #base dl dt,
#cont #base dl dd{
	position:relative;
	display:table-cell;
	vertical-align:top;
	text-align:center;
	width:50%;
	padding:10px;
}
#cont #base dl dt h3,
#cont #base dl dd h3{
	font-size:1.3rem;
	line-height:1.1;
	font-weight:700;
	letter-spacing:0.03em;
}
#cont #base dl dt div,
#cont #base dl dd div{
	position:relative;
	text-align:center;
	padding:13px 0 0;
}
#cont #base dl dt div span,
#cont #base dl dd div span{
	position:relative;
	display:inline-block;
	font-size:1.5rem;
	line-height:1;
	font-weight:400;
	letter-spacing:0em;
}
#cont #base dl dt div p,
#cont #base dl dd div p{
	position:relative;
	display:inline-block;
	font-size:7.0rem;
	line-height:1;
	font-weight:500;
	letter-spacing:0em;
	font-family: 'Barlow', sans-serif;
	padding:0 2px;
}
#cont #base dl div .number-scroll {
	display: inline-block;
	padding: 0;
}
#cont #base dl div .number-scroll > div {
	display: inline-grid;
	height: 7.0rem;
	padding: 0;
	overflow: hidden;
}
#cont #base dl div .number-scroll > div > p {
	bottom: 7rem;
	padding: 0;
}
@keyframes newTextSlide {
  0% {
		bottom: 7rem;
  }
  50% {
		bottom: 0;
  }
  100% {
		bottom: -7rem;
  }
}
@keyframes oldTextSlide {
  0% {
		bottom: 14rem;
  }
  50% {
		bottom: 7rem;
  }
  100% {
		bottom: 0;
  }
}
@keyframes textFadeIn {
  0%, 100% {
		visibility: visible;
  }
}
@keyframes textFadeOut {
  0%, 100% {
		visibility: hidden;
  }
}
@keyframes textSlideOut {
  0% {
		bottom: 7rem;
  }
  100% {
		bottom: 0;
  }
}
@keyframes randomNumberAnimation1 {
	0% {
		content: "1";
	}
	25% {
		content: "5";
	}
	50% {
		content: "3";
	}
	75% {
		content: "8";
	}
	100% {
		content: "2";
	}
}
@keyframes randomNumberAnimation2 {
	0% {
		content: "2";
	}
	25% {
		content: "1";
	}
	50% {
		content: "3";
	}
	75% {
		content: "1";
	}
	100% {
		content: "2";
	}
}
@keyframes randomNumberAnimation3 {
	0% {
		content: "0";
	}
	25% {
		content: "5";
	}
	50% {
		content: "4";
	}
	75% {
		content: "2";
	}
	100% {
		content: "1";
	}
}
@keyframes mynumberColorAnimation {
	0% {
		color: #009330;
		opacity: 0.2;
	}
	100% {
		color: #009330;
		opacity: 1;
	}
}
#cont #base dl div .number-scroll > div > p.animate-slide:nth-child(1) {
	animation: newTextSlide 0.2s 4 linear 0s forwards,
	textSlideOut 0.6s 1 ease-out 0.8s forwards,
	textFadeIn 0.6s 1 linear 0.8s forwards,
	mynumberColorAnimation 1.0s 1 ease-out 1.4s forwards;
	visibility: hidden;
}
#cont #base dl div .number-scroll > div > p.animate-slide:nth-child(2) {
	animation: oldTextSlide 0.2s 4.5 linear -0.1s forwards, textSlideOut 0.6s 1 ease-out 0.8s forwards, textFadeOut 0.1s 1 linear 0.1s forwards;
	visibility: visible;
}
#cont #base dl div .number-scroll > div > p.animate-slide.zero-hidden {
	visibility: hidden !important;
}
#cont #base dl div .number-scroll > div > p.animate-slide::before {
	visibility: visible;
	position: absolute;
	opacity: 1;
}
#cont #base dl div .number-scroll > div > p.animate-slide:nth-child(1)::before {
	content: "1";
	animation: randomNumberAnimation1 0.8s 1 linear 0.1s forwards, textFadeOut 0.8s 1 linear 0.8s forwards;
}
#cont #base dl div .number-scroll > div > p.animate-slide:nth-child(2)::before {
	content: "2";
	animation: randomNumberAnimation2 0.8s 1 linear 0s forwards, textFadeIn 0.1s 1 linear 0.1s forwards;
	visibility: hidden;
}
#cont #base dl div .number-scroll > div:nth-child(2) > p.animate-slide:nth-child(2)::before {
	content: "0";
	animation: randomNumberAnimation3 0.8s 1 linear 0s forwards, textFadeIn 0.1s 1 linear 0.1s forwards;
	visibility: hidden;
}
#cont #base dl div .number-scroll > div:first-child > p {
	padding-left: 2px;
}
#cont #base dl div .number-scroll > div:last-child > p {
	padding-right: 2px;
}

#btn_content_end{
	position:relative;
	padding:50px 0 0;
}
#btn_content_end a{
	position:relative;
	display:block;
	width:100%;
	border-radius:14px;
	padding:18px;
	text-align:center;
	font-size:1.8rem;
	line-height:1;
	font-weight:400;
	letter-spacing:0.03em;
	box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .06);
	transition: all 300ms cubic-bezier(0.030, 0.575, 0.175, 1.000);
	transition-timing-function: cubic-bezier(0.030, 0.575, 0.175, 1.000); 
	transform-origin:center center;
}
#btn_content_end a#skip_mynumber_btn {
	margin-top: 32px;
}
#btn_content_end a:hover {
	transform:scale(1.05);
}
#btn_content_end a:active{
	transition: all 100ms cubic-bezier(0.030, 0.575, 0.175, 1.000);
	transition-timing-function: cubic-bezier(0.030, 0.575, 0.175, 1.000);
	transform:scale(0.9) !important;
	}
#btn_content_end a span {
	position:absolute;
	display:block;
	left:auto;
	right:20px;
	top:50%;
	margin-top:-7px;
	text-decoration:  none;
	height: 15px;
	width: 15px;
}
#btn_content_end a span::before {
	content:  '';
	width: 12px;
	height: 12px;
	display:  block;
	transform: rotate(45deg);
	position:  absolute;
	top: 0;
	right:  0;
}
#mynumber_message {
	position: relative;
  display: flex;
	padding-bottom: 24px;
}
#mynumber_message > div {
	width: 2rem;
  height: 2rem;
	border-radius: 50%;
	margin: auto 4px auto auto;
}
#mynumber_message > div > div {
	width: 60%;
	height: 30%;
	position: relative;
	transform: rotate(-45deg);
	top: 26%;
	left: 18%;
}
#mynumber_message p {
	display: inline-block;
	line-height: 1;
	font-size: 1.6rem;
	margin: auto auto auto 0;
}

/*tab～PC（小）*/
@media screen and (max-width:979px) {
}
/*SP*/
@media screen and (max-width:767px) {
#cont section{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:0 0 0;
	}	
#base{
	position:relative;
	width:71.6%;
	border-radius:14px;
	padding:6vw 1vw;
	overflow:visible;
	}
#base #parts{
	position:absolute;
	top:75px;
	right:-21px;
	width:21px;
	height:21px;
}

#btn_content_end{
	position:relative;
	padding:30px 0 0;
}
#btn_content_end a{
	position:relative;
	display:block;
	width:100%;
	border-radius:14px;
	padding:4vw 10vw;
	text-align:center;
	font-size:1.8rem;
	line-height:1;
	font-weight:400;
	letter-spacing:0.03em;
	transition: all 300ms cubic-bezier(0.030, 0.575, 0.175, 1.000);
	transition-timing-function: cubic-bezier(0.030, 0.575, 0.175, 1.000); 
	transform-origin:center center;
}
#btn_content_end a:hover {
	transform:scale(.9) !important;
}
#btn_content_end a:active{
	transform:scale(.9) !important;
	}
}
/*SP 旧端末 調整*/
@media screen and (max-width:380px) {
#cont #base h2{
	font-size:1.6rem;
}
#cont #base dl dt h3,
#cont #base dl dd h3{
	font-size:1.2rem;
}
#cont #base dl dt div span,
#cont #base dl dd div span{
	font-size:1.2rem;
	line-height:1;
	font-weight:400;
	letter-spacing:0em;
}
#cont #base dl dt div p,
#cont #base dl dd div p{
	position:relative;
	display:inline-block;
	font-size:4.0rem;
	line-height:1;
	font-weight:400;
	letter-spacing:0em;
	font-family: 'Barlow', sans-serif;
	padding:0 2px;
}
#cont #base dl div .number-scroll > div > p {
	bottom: 4.0rem;
	padding: 0;
}
#cont #base dl div .number-scroll > div {
	height: 4.0rem;
}
}