@charset "UTF-8";

/* ------------------------------------------------------------
	offerAnimation
------------------------------------------------------------ */
.offerAnimationBox {
	font-size:4.375vw !important;
	font-size:14px;
}

@media screen
	and (min-device-width:320px)
	and (max-device-width:414px) 
	and (orientation:portrait){ 
.offerAnimationBox {
	font-size:4.375vw !important;
	font-size:14px;
}
}
@media screen
	and (min-device-width:415px) 
	and (max-device-width:640px) 
	and (orientation:landscape) {
.offerAnimationBox {
	font-size:4.375vw !important;
	font-size:24px;
}
}
.offerAnimation {
	margin:3% auto;
}
.offerAnimation .maintitle img {
	margin:0 auto 3%;
	width:77.8%;
	display:block;
}
.offerAnimationArea {
	padding-top:2.6%;
	padding-bottom:40%;
	position:relative;
	background:#3D923F;
}
.ohikkoshiStep .offerAnimationArea {
	background:#06C;
}
.offerAnimationArea .subtitle img {
	margin:0 auto 3%;
	width:90%;
	display:block;
}
.offerAnimationArea .image img {
	width:31%;
	display:block;
	position:absolute;
	left:0;
	bottom:0;
}
.offerAnimationArea .image img.image02 {
	z-index:100;
}
.offerAnimationBox {
	margin-top:-12%;
	margin-right:2.6%;
	width:64%;
	position:absolute;
	top:50%;
	right:0;
	line-height:1.4;
}
.offerAnimationBox .detailTypeA,
.offerAnimationBox .detailTypeB {
	position:absolute;
	top:0;
	left:0;
	color:#FFF;
	font-size:82%;
}
.offerAnimationBox .beforeChangeTypeA,
.offerAnimationBox .beforeChangeTypeB,
.offerAnimationBox .afterChangeTypeA,
.offerAnimationBox .afterChangeTypeB {
	padding:1px;
	position:absolute;
	top:2.5em;
	right:0;
	width:100%;
	background:#FFF;
	box-sizing:border-box;
}
.offerAnimationBox .beforeChangeTypeA .title,
.offerAnimationBox .beforeChangeTypeB .title {
	padding:5px 0;
	width:100%;
	color:#FFF;
	background:#3D923F;
	font-weight:bold;
	font-size:82%;
	text-align:center;
}
.ohikkoshiStep .offerAnimationBox .beforeChangeTypeA .title,
.ohikkoshiStep .offerAnimationBox .beforeChangeTypeB .title {
	background:#06C;
}
.offerAnimationBox .afterChangeTypeA .title,
.offerAnimationBox .afterChangeTypeB .title {
	padding:2% 0;
	width:100%;
	color:#FFF;
	background:#FF5B26;
	font-weight:bold;
	font-size:82%;
	text-align:center;
}
.ohikkoshiStep .offerAnimationBox .afterChangeTypeA .title,
.ohikkoshiStep .offerAnimationBox .afterChangeTypeB .title {
	background:#FF5277;
}
.offerAnimationBox .price,
.offerAnimationBox .price {
	padding:3% 0;
	color:#333;
	font-weight:bold;
	font-size:256%;
	text-align:right;
}
.offerAnimationBox .afterChangeTypeA .price,
.offerAnimationBox .afterChangeTypeB .price {
	color:#FF5B26;
}
.ohikkoshiStep .offerAnimationBox .beforeChangeTypeA .price,
.ohikkoshiStep .offerAnimationBox .beforeChangeTypeB .price,
.ohikkoshiStep .offerAnimationBox .afterChangeTypeA .price,
.ohikkoshiStep .offerAnimationBox .afterChangeTypeB .price {
	color:#333;
}
.offerAnimationBox .price img {
	margin:0 15px;
	width:6%;
	vertical-align:baseline;
}
.offerAnimationFront {
	background:rgba(61,146,63,0.60);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
}
.ohikkoshiStep .offerAnimationFront {
	background:rgba(0,102,203,0.60);
}
.offerAnimationFront img {
	margin-top:-91px;
	position:absolute;
	right:2.6%;
	bottom:10%;
	width:68%;
}
.offerAnimation .note {
	margin:5px 2.6% 15px 0;
	text-align:right;
	clear:both;
}

/*animation*/
.offerAnimationBox .detailTypeA {
	animation-name: detailTypeA;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: detailTypeA;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: detailTypeA;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes detailTypeA {
	0% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes detailTypeA {
	0% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@-webkit-keyframes detailTypeA {
	0% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
.offerAnimationBox .beforeChangeTypeA {
	animation-name: beforeChangeTypeA;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	backface-visibility: hidden;

	-moz-animation-name: beforeChangeTypeA;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-backface-visibility: hidden;

	-webkit-animation-name: beforeChangeTypeA;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-backface-visibility: hidden;
}
@keyframes beforeChangeTypeA {
	0% {opacity:1;transform:rotateY(0deg);}
	14% {opacity:1;transform:rotateY(0deg);}
	15% {opacity:1;transform:rotateY(180deg);}
	50% {opacity:0;transform:rotateY(180deg);}
	100% {opacity:0;transform:rotateY(0deg);}
}
@-moz-keyframes beforeChangeTypeA {
	0% {opacity:1;transform:rotateY(0deg);}
	14% {opacity:1;transform:rotateY(0deg);}
	15% {opacity:1;transform:rotateY(180deg);}
	50% {opacity:0;transform:rotateY(180deg);}
	100% {opacity:0;transform:rotateY(0deg);}
}
@-webkit-keyframes beforeChangeTypeA {
	0% {opacity:1;-webkit-transform:rotateY(0deg);}
	14% {opacity:1;-webkit-transform:rotateY(0deg);}
	15% {opacity:1;-webkit-transform:rotateY(180deg);}
	50% {opacity:0;-webkit-transform:rotateY(180deg);}
	100% {opacity:0;-webkit-transform:rotateY(0deg);}
}
.offerAnimationBox .afterChangeTypeA {
	animation-name: afterChangeTypeA;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	backface-visibility: hidden;

	-moz-animation-name: afterChangeTypeA;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-backface-visibility: hidden;

	-webkit-animation-name: afterChangeTypeA;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-backface-visibility: hidden;
}
@keyframes afterChangeTypeA {
	0% {opacity:0;transform:rotateY(180deg);}
	14% {opacity:1;transform:rotateY(180deg);}
	15% {opacity:1;transform:rotateY(360deg);}
	49% {opacity:1;transform:rotateY(360deg);}
	50% {opacity:0;transform:rotateY(360deg);}
	100% {opacity:0;transform:rotateY(180deg);}
}
@-moz-keyframes afterChangeTypeA {
	0% {opacity:0;transform:rotateY(180deg);}
	14% {opacity:1;transform:rotateY(180deg);}
	15% {opacity:1;transform:rotateY(360deg);}
	49% {opacity:1;transform:rotateY(360deg);}
	50% {opacity:0;transform:rotateY(360deg);}
	100% {opacity:0;transform:rotateY(180deg);}
}
@-webkit-keyframes afterChangeTypeA {
	0% {opacity:0;-webkit-transform:rotateY(180deg);}
	14% {opacity:1;-webkit-transform:rotateY(180deg);}
	15% {opacity:1;-webkit-transform:rotateY(360deg);}
	49% {opacity:1;-webkit-transform:rotateY(360deg);}
	50% {opacity:0;-webkit-transform:rotateY(360deg);}
	100% {opacity:0;-webkit-transform:rotateY(180deg);}
}
.offerAnimationBox .detailTypeB {
	animation-name: detailTypeB;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: detailTypeB;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: detailTypeB;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes detailTypeB {
	0% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@-moz-keyframes detailTypeB {
	0% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@-webkit-keyframes detailTypeB {
	0% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
.offerAnimationBox .beforeChangeTypeB {
	animation-name: beforeChangeTypeB;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	backface-visibility: hidden;

	-moz-animation-name: beforeChangeTypeB;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-backface-visibility: hidden;

	-webkit-animation-name: beforeChangeTypeB;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-backface-visibility: hidden;
}
@keyframes beforeChangeTypeB {
	0% {opacity:0;transform:rotateY(0deg);}
	49% {opacity:0;transform:rotateY(0deg);}
	50% {opacity:1;transform:rotateY(0deg);}
	64% {opacity:1;transform:rotateY(0deg);}
	65% {opacity:0;transform:rotateY(180deg);}
	100% {opacity:0;transform:rotateY(0deg);}
}
@-moz-keyframes beforeChangeTypeB {
	0% {opacity:0;transform:rotateY(0deg);}
	49% {opacity:0;transform:rotateY(0deg);}
	50% {opacity:1;transform:rotateY(0deg);}
	64% {opacity:1;transform:rotateY(0deg);}
	65% {opacity:0;transform:rotateY(180deg);}
	100% {opacity:0;transform:rotateY(0deg);}
}
@-webkit-keyframes beforeChangeTypeB {
	0% {opacity:0;-webkit-transform:rotateY(0deg);}
	49% {opacity:0;-webkit-transform:rotateY(0deg);}
	50% {opacity:1;-webkit-transform:rotateY(0deg);}
	64% {opacity:1;-webkit-transform:rotateY(0deg);}
	65% {opacity:0;-webkit-transform:rotateY(180deg);}
	100% {opacity:0;-webkit-transform:rotateY(0deg);}
}
.offerAnimationBox .afterChangeTypeB {
	animation-name: afterChangeTypeB;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	backface-visibility: hidden;

	-moz-animation-name: afterChangeTypeB;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-backface-visibility: hidden;

	-webkit-animation-name: afterChangeTypeB;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-backface-visibility: hidden;
}
@keyframes afterChangeTypeB {
	0% {opacity:0;transform:rotateY(180deg);}
	64% {opacity:0;transform:rotateY(180deg);}
	65% {opacity:1;transform:rotateY(360deg);}
	100% {opacity:1;transform:rotateY(360deg);}
}
@-moz-keyframes afterChangeTypeB {
	0% {opacity:0;transform:rotateY(180deg);}
	64% {opacity:0;transform:rotateY(180deg);}
	65% {opacity:1;transform:rotateY(360deg);}
	100% {opacity:1;transform:rotateY(360deg);}
}
@-webkit-keyframes afterChangeTypeB {
	0% {opacity:0;-webkit-transform:rotateY(180deg);}
	64% {opacity:0;-webkit-transform:rotateY(180deg);}
	65% {opacity:1;-webkit-transform:rotateY(360deg);}
	100% {opacity:1;-webkit-transform:rotateY(360deg);}
}
.offerAnimationArea .image .image01 {
	animation-name: offerImage01;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: offerImage01;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: offerImage01;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes offerImage01 {
	0% {opacity:1;}
	29% {opacity:1;}
	30% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	79% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes offerImage01 {
	0% {opacity:1;}
	29% {opacity:1;}
	30% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	79% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}
@-webkit-keyframes offerImage01 {
	0% {opacity:1;}
	29% {opacity:1;}
	30% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	79% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}
.offerAnimationArea .image .image02 {
	animation-name: offerImage02;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: offerImage02;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: offerImage02;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes offerImage02 {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
@-moz-keyframes offerImage02 {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
@-webkit-keyframes offerImage02 {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
.offerAnimationFront {
	animation-name: offerFront;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: offerFront;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: offerFront;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes offerFront {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
@-moz-keyframes offerFront {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
@-webkit-keyframes offerFront {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	79% {opacity:0;}
	80% {opacity:1;}
	100% {opacity:1;}
}
.offerAnimationFront img.offImageA {
	animation-name: offerFrontImageA;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: offerFrontImageA;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: offerFrontImageA;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes offerFrontImageA {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;transform:scale(1.0);}
	31% {transform:scale(0.8);}
	32% {transform:scale(1.0);}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes offerFrontImageA {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;transform:scale(1.0);}
	31% {transform:scale(0.8);}
	32% {transform:scale(1.0);}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@-webkit-keyframes offerFrontImageA {
	0% {opacity:0;}
	29% {opacity:0;}
	30% {opacity:1;-webkit-transform:scale(1.0);}
	31% {-webkit-transform:scale(0.8);}
	32% {-webkit-transform:scale(1.0);}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
.offerAnimationFront img.offImageB {
	animation-name: offerFrontImageB;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	-moz-animation-name: offerFrontImageB;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: offerFrontImageB;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
}
@keyframes offerFrontImageB {
	0% {opacity:0;}
	79% {opacity:0;}
	80% {transform:scale(1.0);opacity:1;}
	81% {transform:scale(0.8);}
	82% {transform:scale(1.0);}
	99% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes offerFrontImageB {
	0% {opacity:0;}
	79% {opacity:0;}
	80% {transform:scale(1.0);opacity:1;}
	81% {transform:scale(0.8);}
	82% {transform:scale(1.0);}
	99% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes offerFrontImageB {
	0% {opacity:0;}
	79% {opacity:0;}
	80% {-webkit-transform:scale(1.0);opacity:1;}
	81% {-webkit-transform:scale(0.8);}
	82% {-webkit-transform:scale(1.0);}
	99% {opacity:1;}
	100% {opacity:0;}
}