@charset "utf-8";
/* CSS Document */
.container{ width: 100%; height: 100%; margin-top: 0; text-align: left; background: url(/images/2nd_bg.png) repeat-y 50% 0%;}

#purbdng h1{margin-bottom: 40px; text-align: center;}
#purbdng h2{text-align: center;}
#purbdng .purlst{margin-bottom: 20px;}
#purbdng .purlst li{width: 250px; font-size: 2rem; font-weight: bold; text-align: center; color: #e70012;}
#purbdng .purlst li img{display: block; margin: 0 auto;}
#purbdng .purlst + p{margin-bottom: 20px; font-size: 1.6rem;}
#purbdng .cmprbox{margin-bottom: 50px;}
#purbdng .cmprbox .cmprtxt{width: 47%; font-size: 1.4rem;}
#purbdng .cmprbox .cmprtxt h3{font-size: 2.4rem; font-weight: bold; text-align: center;}
#purbdng .cmprbox .cmprtxt p img{display: block; margin: 0 auto 10px;}
#purbdng .pntbox{margin-bottom: 50px;}
#purbdng .pntbox div{width: 50%;}
#purbdng .pntbox .txtbox{padding: 0 1em; font-size: 1.6rem;}
#purbdng .pntbox:nth-of-type(1) .txtbox{width: 35%;}
#purbdng .pntbox:nth-of-type(1) .pctbox{width: 65%;}
#purbdng .pntbox:last-of-type{margin-bottom: 20px;}
#purbdng .pntbox h3{display: table-cell; padding: 0; font-size: 2.4rem; font-weight: bold; vertical-align: middle; text-align: left; color: #ffffff; border-radius: 20px 5px; border: 0;}
#purbdng .pntbox h3::before, #purbdng .pntbox h3::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	padding: .0em 1em;
	z-index: 10;
}
#purbdng .pntbox h3 + p{margin-top: 30px;}
#purbdng .fprnt{font-size: 1.6rem; font-weight: bold;text-align: center;}

/* animation */
.anmt, .anmtslw, .at-anmt, .at-anmtslw, .txt-anmt{
	position: relative;
	display: inline-block;
	height: 100%;
}
.anmt span, .anmtslw span, .at-anmt span, .at-anmtslw span, .txt-anmt span{
	opacity: 0;
	display: block;
}
.txt-anmt span{
	padding: .7em 1em;
	border-radius: 20px 5px;
	background: #f49e00;
}
.anmt.animated span, .at-anmt.animated span{
	animation: boxshow 1s ease-in-out 0s forwards;
}
.at-anmtslw.animated span{
	animation: boxshow 1s ease-in-out 0.5s forwards;
}
.anmtslw.animated span{
	animation: slideshow 1s ease-in-out 0.5s forwards;
}
.txt-anmt.animated span{
	animation: slideshow 1s ease-in-out 0.3s forwards;
}
.txt-anmt.animated::before{
	opacity: 0;
	border-radius: 20px 5px; background: #e70012;
	animation: txtshow .7s ease .1s forwards;
}
.txt-anmt.animated::after{
	border-radius: 20px 5px; background: #ffffff;
	animation: txtshow0 .3s ease 0s forwards;
}
@keyframes boxshow {
  0% {
		opacity: 0;
		transform: translateY(70px);
	}
  100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes slideshow {
  0% {
		opacity: 0;
		transform: translateX(-70px);
	}
  100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@keyframes txtshow {
  0% {
		opacity: 0;
		width: 0;
		left: 0;
	}
	70% {
		width: 100%;
		left: 0;
		background: #e70012;
	}
  100% {
		opacity: 1;
		width: 0;
		left: 100%;
		padding: .0em .5em;
		background: #cccccc;
	}
}
@keyframes txtshow0 {
  0% {
		opacity: 1;
		width: 100%;
		left: 0;
	}
	70% {
		opacity: 1;
		width: 100%;
		left: 0;
	}
  100% {
		opacity: 0;
		width: 0;
		left: 0;
	}
}

.addbox{
	margin: 70px auto 30px;
	padding: 70px 0 0;
	border-top: 1px solid #cccccc;
}
.addbox h2 span{
	display: block;
	font-size: 1.4rem;
}
.addbox h3{
	margin: 30px auto 25px !important;
	text-align: center;
	border: 0;
}
.addbox .addcnt p{
	width: 48%;
	font-size: 1.6rem;
}
.addbox .addcnt .imgbox img{
	width: 100%;
}

@media screen and (max-width: 767px) {
	#purbdng .purlst li{width: 30%; margin: 0 1%; font-size: 1.8rem; line-height: 1.4em;}
	#purbdng .cmprbox .cmprtxt h3{font-size: 1.8rem;}
	#purbdng .pntbox .txtbox{padding: 0 1em; font-size: 1.6rem;}
	#purbdng .pntbox .txtbox{width: 100% !important;}
	#purbdng .pntbox .pctbox{width: 100% !important;}
	.addbox{
		margin: 40px auto 40px;
		padding: 40px 0 0;
	}
	.addbox h2{
		font-size: 1.8rem;
	}
	.addbox h2 span{
		font-size: 1.2rem;
	}
	.addbox h3{
		margin: 30px auto 15px !important;
	}
	.addbox .addcnt p{
		width: 100%;
		margin: 0 auto;
	}
	.addbox .addcnt .imgbox img{
		width: 100%;
	}
}