@charset "UTF-8";
@media screen and (min-width: 801px) {}
@media screen and (max-width: 800px) {}
/* =====================================
	全体設定
===================================== */
figure {
	margin: 0;
}
.bold {
	font-weight: bold;
	
}

.l-container {
	overflow: visible!important;
}
.mb0 {
	margin-bottom: 0!important;
	
}
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

@media screen and  (min-width: 801px) and (max-width:1200px) {

}
@media screen and (max-height:750px) {

}
@media screen and (max-height:700px) {

}

@media screen and (min-width: 801px) {
.dsp_pc {
	display: block;
}
.inl_pc {
	display: inline;
}
.dsp_sp {
	display: none;
}
.inl_sp {
	display: none;
}

.rewind_bg {
	z-index: 1;
	position: relative;
	background: #56c4f1;
}

.rewind_container {
	display: flex;
	width: 100%;
	/*min-width: 1400px;*/
}

.pc_area_l {
	position: relative;
	width: calc( 50% - 250px);
	
}
.pc_area_l .pc_bg {
	position: sticky;
	top: 179px;
	left: 0;
	width: 100%;
	height: calc( 100vh - 179px);
	background: url( "../../../../img/campaign/wesmodlcp/202603/pc_bg_l.png") center center no-repeat;
	background-size: cover;
}
.pc_area_l .pc_bg img {
	width: auto;
}

.pc_area_l .box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 294px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 8px 8px 0px 0px #00beeb;
	}
.pc_area_l .ttl01  {
	position: absolute;
	left: -59px;
	top: -101px;
	width: 411px;
}
.pc_area_l .ttl02  {
	position: absolute;
	left: -6px;
	top: -18px;
	width: 305px;
}
.pc_area_l .lnav  {
	position: relative;
	padding: 47px 20px 24px;
}
.pc_area_l .lnav ul  {
}
.pc_area_l .lnav ul li  {
	position: relative;
	margin-bottom: 7px;
}
.pc_area_l .lnav ul li a  {
	display: block;
	width: 244px;
	height: 33px;

}
.pc_area_l .lnav ul li.lnav01 a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav01.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav02 a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav02.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav03 a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav03.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav04 a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav04.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav01.on a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav01_on.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav02.on a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav02_on.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav03.on a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav03_on.png") left top no-repeat;
}
.pc_area_l .lnav ul li.lnav04.on a  {
	background: url("../../../../img/campaign/wesmodlcp/202603/lnav04_on.png") left top no-repeat;
}

	/*
.pc_area_l .lnav ul li.on  {
	background: #fff33f;
}
	*/
.pc_area_l .lnav .ico  {
	position: absolute;
	right: -26px;
	bottom: -63px;
	
}

.pc_area_r {
	position: relative;
	box-sizing: border-box;
	width: calc( 50% - 250px);
}
.pc_area_r .container {
	position: sticky;
	top: 179px;
	left: 0;
	width: 100%;
	height: calc( 100vh - 179px);
	background: url( "../../../../img/campaign/wesmodlcp/202603/pc_bg_r.png") center center no-repeat;
	background-size: cover;
}
.pc_area_r .r_cont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 360px;
}
.pc_area_r .r_cont img {
	width: inherit;
}
.pc_area_r .r_cont .ttl {
	margin-bottom: 15px;
	text-align: center;
	}
.pc_area_r .r_cont .box {
	box-sizing: border-box;
	width: 304px;
	height: 187px;
	margin: 0 auto;
	padding: 34px 0;
	background: url( "../../../../img/campaign/wesmodlcp/202603/r_box.png") center center no-repeat;
}
.pc_area_r .r_cont .box01 {
	position: relative;
	margin-bottom: 20px;
}
.pc_area_r .r_cont .box01 .wesmo {
	position: absolute;
	top: 57px;
	left: 16px;
}
.pc_area_r .r_cont .box01 #my_qr_code_div_id {
	width: 110px;
	height: 110px;
	margin: 0 auto 0;
}
.pc_area_r .r_cont .box01 #my_qr_code_div_id canvas {
	width: 110px;
	height: 110px;
}
.pc_area_r .r_cont .box02 {

}
.pc_area_r .r_cont .box02 .qr {
	width: 110px;
	height: 110px;
	margin: 0 auto 0;
}



main {
	z-index: 1;
}

#rewind {
	z-index: 6000;
	position: relative;
	font-size: calc(25 * calc(500 / 750)*1px);
	/*font-feature-settings: "palt";*/
	line-height: 1.5;
	color: #000000;
	width: 500px;
	overflow: visible;
	background: #c2e9fa;
	margin: 0 auto;
	font-family: "Noto Sans JP", serif;
}

.cp {
	border-bottom: 2px solid #ddd;
	font-weight: 500;
	color: #000;
}

.navarea {
	padding-top: 180px;
	margin-top: -180px;
}
.navarea02 {
	padding-top: 240px;
	margin-top: -240px;
}

}


@media screen and (max-width: 800px) {
	.dsp_pc {
		display: none;
	}
	.inl_pc {
		display: none;
	}
	.dsp_sp {
		display: block;
	}
	.inl_sp {
		display: inline;
	}

	.pc_area_l {
		display: none;
		
	}
	.pc_area_r {
		display: none;
		
	}

	.rewind_bg {
		z-index: 1;
		position: relative;
		width: 100%;
		background: #ffebf5;
		padding: 0;
	}
	#rewind {
		position: relative;
		width: 100%;
		font-size: calc(25/750*100vw);
		/*font-feature-settings: "palt";*/
		line-height: 1.5;
		color: #000000;
		overflow: visible;
		background: #c2e9fa;
		font-family: "Noto Sans JP", serif;
	}
	
	.navarea {
		padding-top: calc(220/750*100%);
		margin-top: calc(-220/750*100%);
	}
	.navarea02 {
		padding-top: calc(250/670*100%);
		margin-top: calc(-250/670*100%);
	}
	.cont01 .pc_qr {
		display: none;
	}

}
/* =====================================
	header
===================================== */

	
	.l-container.-wester-portal .c-topic-path {
	  margin: 0 auto 0;
	}
	.l-container.-wester-portal .c-topic-path p {
		margin-bottom: 16px;
	}
	.cp {
		border-bottom: 1px solid #ddd;
		font-weight: 500;
		color: #000;
	}
	.cp img {
		width: 100%;
		
	}
	.mv {
		position: relative;
		width: 100%;
	}
	.mv .ttl {
		position: absolute;
		top: 0;
		left: calc(35/750*100%);
		width: calc(658/750*100%);
		margin-top: calc(17/750*100%);
	}
	.mv .cin {
		position: absolute;
		top: 0;
		left: calc(12/750*100%);
		width: calc(717/750*100%);
		margin-top: calc(285/750*100%);
	}
	.mv .term {
		position: absolute;
		top: 0;
		left: calc(55/750*100%);
		width: calc(640/750*100%);
		margin-top: calc(691/750*100%);
	}

	#following_area {
		position: relative;
	}

	.entry {
		opacity: 0;
		/*display: none;*/
		z-index: 75;
		position: sticky;
		left: 0;
		bottom: 0;
		transition: 1s all ease 0s;
		pointer-events: none;
		
		width: calc(445/750*100%);
		margin: 0 auto;
	}	
	.entry.active {
		opacity: 1;
		/*display: block;*/
		pointer-events: auto;
	}	
	.entry ul {
		display: flex;
	}	
	
	.entry_start {
		opacity: 0;
		/*display: none;*/
		z-index: 75;
		position: sticky;
		left: 0;
		bottom: 0;
		transition: 1s all ease 0s;
		pointer-events: none;
	}
	.entry_start.active {
		opacity: 1;
		/*display: block;*/
		pointer-events: auto;
	}
	.entry_start.none {
		display: none;
	}
		
	#rewind a {
		color: #004a9e;
		text-decoration: underline;
	}
	.red {
		color: #fa3232;
		font-weight: 500;
		
	}
	

/* =====================================
	content
===================================== */
	.story {
		padding: calc(65/750*100%) 0 0;
		margin-bottom: calc(50/750*100%);
		background: #ffffff;
	}
	/*
	.story .inner{
		padding: calc(65/750*100%) 0 calc(50/750*100%);
		background: #ffffff;
	}*/
	.story .ttl {
		position: relative;
		margin-bottom: calc(70/750*100%);
	}
	.story .ttl .cin {
		position: absolute;
		bottom: 0;
		left: calc(126/750*100%);
		width: calc(498/750*100%);
	}
	.prize_a {
		padding-bottom: calc(60/750*100%);
		text-align: center;
		background: #ffffff;
	}
	.prize_a .ttl {
		position: relative;
		margin-bottom: calc(10/750*100%);
	}
	.prize_a .ttl .cin {
		position: absolute;
		bottom: 0;
		left: calc(72/750*100%);
		width: calc(464/750*100%);
	}
	.prize_a .txt01 {
		margin-bottom: calc(45/750*100%);
	}
	.prize_a .img01 {
		margin-bottom: calc(15/750*100%);
	}
	.prize_a .txt {
		margin-bottom: calc(65/750*100%);
		font-size: calc(41 / 25 * 1em);
		color: #0074c1;
		line-height: calc(67 / 41);
		font-weight: 600;
	}
	.prize_a .txt02 {
		margin-bottom: calc(15/750*100%);
	}
	.prize_a .txt03 {
	}
	.prize_a .place01 {
		margin-bottom: calc(30/750*100%);
		font-size: calc(41 / 25 * 1em);
		color: #00499f;
		line-height: calc(67 / 41);
		font-weight: 600;
	}
	.prize_a .place02 {
	}
	.prize_a .place03 {
		margin-bottom: calc(50/750*100%);
	}
	.prize_a .place03 a {
		font-size: calc(33 / 25 * 1em);
		color: #00499f;
		font-weight: 600;
	}
	.prize_a .txt04 {
		margin-bottom: calc(15/750*100%);
	}
	.prize_a .txt05 {
		margin-bottom: calc(50/750*100%);
		font-size: calc(41 / 25 * 1em);
		color: #0074c1;
		line-height: calc(67 / 41);
		font-weight: 600;
	}

	.prize_b {
		background: #ffffff;
	}
	.prize_b .ttl {
		position: relative;
		padding-bottom: calc(45/750*100%);
		background: #fce7ed;
	}
	.prize_b .ttl .cin {
		position: absolute;
		bottom: 0;
		left: calc(203/750*100%);
		width: calc(523/750*100%);
		margin-bottom: calc(45/750*100%);
	}
	.method {
		padding-bottom: calc(60/750*100%);
		background: #ffffff;
	}
	.method .ttl {
		margin-bottom: calc(55/750*100%);
	}
	.method .txt {
		margin-bottom: calc(60/750*100%);
	}
	.method ul {
		width: calc(634/750*100%);
		margin: 0 auto;
	}
	.method ul li{
		margin-bottom: calc(45/634*100%);
	}
	.method .step {
		width: calc(158/634*100%);
		margin-bottom: calc(10/634*100%);
	}
	.method .txt01 {
		margin-bottom: calc(25/634*100%);
		font-size: calc(40 / 25 * 1em);
		font-weight: 600;
		line-height: calc(57 / 40);
	}
	.method .note {
		margin-bottom: calc(30/634*100%);
		font-size: calc(34 / 25 * 1em);
		font-weight: 600;
		line-height: calc(56 / 34);
	}
	.method .btn02 {
		width: calc(529/634*100%);
		margin: 0 auto;
	}
	.method .img01 {
		position: relative;
		margin-bottom: calc(40/750*100%);
	}
	.method .img01 .star {
		position: absolute;
		left: calc(179/750*100%);
		width: calc(39/750*100%);
		margin-top: calc(47/750*100%);
	}
	.method .img01 .cin01 {
		width: calc(271/750*100%);
		margin-left: calc(407/750*100%);
	}

	.kiyaku {
		padding: 0 0 calc(120/750*100%);
		background: #ffffff;
	}
	.kiyaku h3 {
		margin-bottom: calc(45/750*100%);
		text-align: center;
		font-size: calc(60 / 25 * 1em);
	}
	.kiyaku .box {
		box-sizing: border-box;
		width: calc(680/750*100%);
		margin: 0 auto;
		padding: calc(35/750*100%) calc(20/750*100%);
		border-radius: calc(30/750*100vw);
		background: #fff;
		border: calc(6/750*100vw) solid #00beeb;
	}
	.kiyaku .box .inner {
		/*height: calc(620/750*100vw);*/
		height: calc(460/750*100vw);
		padding: 0 calc(10/630*100%) ;
		overflow-y:scroll;
	}
	.kiyaku h4 {
		margin-bottom: calc(45/620*100%);
		font-size: calc(34 / 25 * 1em);
		font-weight: bold;
	}
	.kiyaku h5 {
		font-weight: bold;
		font-size: calc(28 / 25 * 1em);
	}
	.kiyaku p {
		margin-bottom: calc(60/620*100%);
		font-size: calc(28 / 25 * 1em);
	}
	/*
	.kiyaku ul li {
		padding-left: 1em;
		text-indent: -1em;
	}
	*/

	.qa {
		position: relative;
		padding: 0 calc(35/750*100%) 0;
		background: url("../../../../img/campaign/wesmodlcp/202603/qa_bg.png") left top no-repeat #c2e9fa;
		background-size: 100% auto;
	}
	.qa .ttl img {
		width: calc(644/680*100%);
		margin: calc(-55/680*100%) 0 calc(30/680*100%) calc(38/680*100%);
	}
	.qa h4 {
		margin-bottom: calc(15/680*100%);
	}
	.qa .cont01 {
		position: relative;
		margin-bottom: calc(60/680*100%);
	}
	.qa .cont01 .cin01 {
		position: absolute;
		left: calc(68/680*100%);
		top: 0;
		width: calc(141/680*100%);
		margin: calc(562/680*100%) 0 0 0;
	}
	.qa .cont02 {
		position: relative;
		margin-bottom: calc(60/680*100%);
		padding: calc(55/680*100%) 0;
		text-align: center;
		background: #ffffff;
		border-radius: calc(30/750*100vw);
	}
	.qa .cont02 img {
		margin-bottom: calc(35/680*100%);
	}
	.qa .cont02 a {
		margin-top: calc(35/680*100%);
		font-size: calc(41 / 25 * 1em);
		font-weight: bold;
		color: #0074c1!important;
	}
	.qa .cont02 .cin02 {
		position: absolute;
		left: calc(-26/680*100%);
		top: 0;
		width: calc(168/680*100%);
		margin: calc(212/680*100%) 0 0 0;
	}
	.qa .cont03 {
		margin-bottom: calc(25/680*100%);
	}
	.qa .notes {
		margin-bottom: calc(25/680*100%);
		font-size: calc(18 / 25 * 1em);
		color: #00499f;
	}
	.qa .notes span {
		font-weight: bold;
	}
	.howto {
		margin-bottom: calc(60/750*100%);
	}
	.howto .inner {
		position: relative;
		width: calc(680/750*100%);
		margin: 0 auto calc(60/750*100%);
		padding: calc(155/750*100%) 0 calc(90/750*100%);
		text-align: center;
		background: #ffffff;
		border-radius: calc(30/750*100vw);
	}
	.howto .ttl {
		margin-bottom: calc(55/680*100%);
	}
	.howto .cont01 {
		margin-bottom: calc(45/680*100%);
	}
	.howto .cont01 a  {
		font-size: calc(28 / 25 * 1em);
		font-weight: 600;
		color: #00499f;
	}
	.howto .cont01 .txt01 {
		margin-bottom: calc(50/680*100%);
	}
	.howto .cont01 .btn {
		width: calc(641/680*100%);
		margin: calc(30/680*100%) auto;
	}
	.howto .cont02 {
		margin-bottom: calc(40/680*100%);
	}
	.howto .img01 {
		position: absolute;
		right: calc(56/680*100%);
		top: 0;
		width: calc(174/680*100%);
		margin: calc(46/680*100%) 0 0 0;
	}
	.howto .last {
		margin-bottom: calc(70/750*100%);
	}
	.howto .btn02 {
		width: calc(529/680*100%);
		margin: 0 auto;
	}

	.bnr {
		width: calc(680/750*100%);
		margin: 0 auto 0;
		padding-bottom: calc(105/750*100%);
	}
	.bnr dt {
		margin-bottom: calc(20/680*100%);
		text-align: center;
		font-size: calc(41 / 25 * 1em);
		font-weight: 600;
		color: #00499f;
	}
	.bnr dd {
		margin-bottom: calc(70/680*100%);
	}
	.bnr dd.last {
		margin-bottom: 0;
	}
	
	
	

@media screen and (min-width: 801px) {
	
.kiyaku .box {
	border-radius: calc(450/750*35px);
	border: calc(450/750*6px) solid #00beeb;
}
.kiyaku .box .inner {
	height: calc(450/750*460px);
}
.qa .cont02 {
	border-radius: calc(450/750*30px);
}
.howto .inner {
	border-radius: calc(450/750*30px);
}
	
}



	/*モーダルを開くボタン*/
	.modal-open01,
	.modal-open02{
		cursor: pointer;
	}
	/*モーダル本体の指定 + モーダル外側の背景の指定*/
	.modal-container{
		z-index: 1200;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(100,100,100,50%);
		/*padding: 40px 20px;*/
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		box-sizing: border-box;
	}
	/*モーダル本体の擬似要素の指定*/
	.modal-container:before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	/*モーダル本体に「active」クラス付与した時のスタイル*/
	.modal-container.active{
		opacity: 1;
		visibility: visible;
	}
	/*モーダル枠の指定*/
	.modal-container .modal-body{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		/*max-width: 620px;*/
		width: calc(670 / 750 * 100%);
	}
	/*モーダルを閉じるボタンの指定*/
	.modal-container .modal-close{
		position: absolute;
		top: 0;
		right: calc(20 / 670 * 100%);
		width: calc(70 / 670 * 100%);
		margin: calc(20 / 670 * 100%) 0 0 0;
		height: auto;
		cursor: pointer;
	}
	/*モーダル内のコンテンツの指定*/
	.modal-container .modal-content{
		/*background: #000000;*/
		/*border-radius: calc(40 / 750 * 100vw);*/
		box-sizing: border-box;
		text-align: center;
		padding: calc(55 / 670 * 100%) calc(50 / 670 * 100%);
		background: #fff;
		border-radius: calc(25 / 750 * 100vw);
	}
	.mm {
		background: #ffffff;
	}
	.mm a {
		color: #00499f;
		text-decoration: underline;
	}
	.mm .ttl {
		width: calc(394/570*100%);
		margin: 0 auto;
	}
	.mm .txt {
		margin-bottom: calc(20/570*100%);
		color: #00499f;
		font-weight: 600;
	}
	.mm dl {
		display: flex;
		margin-bottom: calc(20/570*100%);
	}
	.mm .step {
		width: calc(101/570*100%);
		margin: 0 calc(12/570*100%) 0 0;
	}
	.mm .txt01 {
		font-size: calc(24 / 25 * 1em);
		font-weight: 600;
		line-height: calc(32 / 24);
		text-align: left;
	}
	.mm .txt02 {
		font-size: calc(24 / 25 * 1em);
		font-weight: 600;
		line-height: calc(32 / 24);
	}
	.mm .btn01 {
		width: calc(430/570*100%);
		margin: 0 auto calc(25/570*100%);
	}
	.mm .note {
		margin: calc(25/570*100%) 0 calc(25/570*100%);
		font-size: calc(20 / 25 * 1em);
		font-weight: 600;
		line-height: calc(32 / 20);
		text-align: center;
	}
	.mm .btn02 {
		width: calc(354/570*100%);
		margin: 0 auto calc(25/570*100%);
	}
	
@media screen and (min-width: 801px) {

.modal-container .modal-body{
	width: calc(450/750*670px);
	font-size: calc(25 * calc(450 / 750)*1px);
}
.modal-container .modal-content{
	border-radius: calc(450/750*25px);
}

}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated02 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated03 {
	opacity: 0;
	visibility: hidden;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.bounceInUp {
	opacity: 1;
	visibility: visible;
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
.bounceInDown {
 	opacity: 1;
	visibility: visible;
 -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}