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


/* ----------------------
   common
---------------------- */

.cont1k {
	margin: 0;
	width: 100%;
	max-width: inherit;
}
@media screen and (max-width: 850px) {
	.cont1k {
		padding: 0;
	}
}

#zero_dinosaurs {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
	line-height: 1.6;
	padding: 20px 0 0;
	background: url(/static/files/zeroemissiondinosaurs/bg_paper_top.jpg) 0 0 no-repeat,
						url(/static/files/zeroemissiondinosaurs/bg_paper_bottom.jpg) 0 bottom no-repeat,
						url(/static/files/zeroemissiondinosaurs/bg_paper_middle.jpg) 0 0 repeat-y;
	background-size: 100%, 100%, 100%;
}

#zero_dinosaurs img {
	max-width: none;
	-webkit-backface-visibility: hidden;
}

.frame {
	position: relative;
	width: 96%;
	max-width: 1120px;
	margin: 0 auto 40px;
	overflow: hidden;
	border-radius: 20px;
	z-index: 1;
}

.pc_frame {
	position: relative;
	width: 1120px;
	margin-left: calc((100% - 1120px) / 2);
	overflow: hidden;
}

#title .pc_frame {
	padding-bottom: 722px;
}

#d_firedon .pc_frame,
#d_windon .pc_frame {
	padding-bottom: 690px;
}

#end .pc_frame {
	padding-bottom: 500px;
}

#icon_scroll {
	position: absolute;
	left: 50%;
	width: 52px;
	padding-top: 0px;
	margin-left: -26px;
	z-index: 10;
}

@media screen and (max-width: 850px) {
	#zero_dinosaurs {
		padding-top: 16%;
	}

	.frame {
		margin-bottom: 6%;
	}

	.pc_frame {
		width: 132%;
		margin-left: -16%;
	}

	#title .pc_frame {
		padding-bottom: 87.9%;
	}

	#d_firedon .pc_frame,
	#d_windon .pc_frame {
		padding-bottom: 140%;
	}

	#end .pc_frame {
		padding-bottom: 85%;
	}

	#icon_scroll {
		position: fixed;
		bottom: 3%;
		width: 8%;
		margin-left: -4%;
	}
}

footer {
	margin-top: 0;
}

footer .btn-wrap {
	z-index: 100;
}


/* ---- title ----*/

#title .pc_frame {
	background: url(/static/files/zeroemissiondinosaurs/title/bg-base.png) center 0 no-repeat;
	background-size: 66.1%;
}

#title .shadow_txt {
	position: absolute;
	top: 0;
	left: 30.7%;
	padding-top: 16.8%;
	width: 44.7%;
}

#title .shadow_firedon_01 {
	position: absolute;
	top: 0;
	left: 20.8%;
	margin-top: 3.3%;
	width: 34.7%;
	transform-origin: bottom;
}

#title .shadow_firedon_02 {
	position: absolute;
	top: 0;
	left: 42.1%;
	margin-top: 23.1%;
	width: 36.3%;
	transform-origin: bottom;
}

#title .shadow_windon {
	position: absolute;
	top: 0;
	left: 55.4%;
	margin-top: 3.2%;
	width: 21.7%;
}

#title .title_dinosaurs {
	position: absolute;
	top: 0;
	left: 59.9%;
	margin-top: 37.4%;
	width: 19.9%;
}

#title .shadow_title {
	position: absolute;
	top: 0;
	left: 25.4%;
	margin-top: 7.3%;
	width: 47.9%;
}

#title .title_txt {
	position: absolute;
	top: 0;
	left: 26.1%;
	margin-top: 7.9%;
	width: 45.3%;
}

#title .title_txt img {
	width: 100%;
}

#title .title_en {
	position: absolute;
	bottom: 0;
	left: 25.5%;
	width: 48.5%;
}


@media screen and (max-width: 850px) {
	#title {
		width: 100%;
	}

	#title .title_en {
		position: absolute;
		bottom: 0;
		left: 20.5%;
		width: 58.5%;
	}

}



/* ---- select ----*/

#select {
	margin-top: 110px;
	margin-bottom: 60px;
	border-radius: 0;
	overflow: visible;
}

#select .copy_01 {
	margin-left: 24.8%;
	margin-bottom: 1%;
	width: 49.2%;
	transform-origin: bottom;
}

#select .copy_02 {
	margin-left: 12.9%;
	margin-bottom: 1%;
	width: 74.4%;
	transform-origin: bottom;
}

#select .copy_03 {
	margin-left: 22.4%;
	margin-bottom: 2.1%;
	width: 54.9%;
	transform-origin: bottom;
}

#select .copy_04 {
	margin-left: 21.2%;
	width: 58%;
	transform-origin: bottom;
}

#select .copy_05 {
	display: none;
}

#select .dina_ena {
	margin-left: 7.8%;
	margin-top: -0.5%;
	width: 23.7%;
	transform-origin: bottom;
	vertical-align: bottom;
}

#select #select_dinosaurs {
	position: relative;
	width: 93.67%;
	padding-bottom: 47.5%;
	margin-left: 3.2%;
	background: url(/static/files/zeroemissiondinosaurs/select/bg.png) center 0;
	background-size: 21px;
	border: 6px solid #1e9850;
	transform-origin: top;
}

#select .firedon_set {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	margin-top: 4.6%;
	padding-bottom: 40%;
}

#select .firedon_set .copy {
	position: absolute;
	top: 0;
	left: 28.4%;
	width: 59.4%;
	transform-origin: bottom;
}

#select .firedon_img {
	position: absolute;
	top: 0;
	margin-top: 17.2%;
	margin-left: 13.9%;
	width: 89.5%;
	transform-origin: bottom;
}

#select .firedon {
	width: 100%;
}

#select .firedon_name_set {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform-origin: bottom;
}

#select .firedon_name {
	margin-left: 30%;
	width: 50%;
}

#select .firedon_set .dot_circle {
	position: absolute;
	top: 0;
	left: 33.6%;
	margin-top: 22.7%;
	width: 47.6%;
}

#select .windon_set {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	margin-top: 4.6%;
	padding-bottom: 40%;
}

#select .windon_set .copy {
	position: absolute;
	top: 0;
	left: 10.9%;
	width: 67.8%;
	transform-origin: bottom;
}

#select .windon_img {
	position: absolute;
	top: 0;
	margin-top: 22.4%;
	margin-left: 9.1%;
	width: 72.3%;
	transform-origin: bottom;
}

#select .windon {
	width: 100%;
	transform-origin: 35% 50%;
}

#select .windon_name_set {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform-origin: bottom;
}

#select .windon_name {
	margin-left: 30.5%;
	width: 24.3%;
}

#select .windon_set .dot_circle {
	position: absolute;
	top: 0;
	right: 31.2%;
	margin-top: 22.7%;
	width: 47.6%;
}

#select .icon_arrow {
	display: inline-block;
	position: relative;
	width: 5.2%;
	height: 0;
	padding-bottom: 5.2%;
	margin-left: 2px;
	background: url(/static/files/zeroemissiondinosaurs/select/ico-circle.png) 0 0 no-repeat;
	background-size: 100%;
	transform-origin: bottom;
}

#select .icon_arrow .arrow {
	position: absolute;
	top: 25%;
	left: 22.4%;
	width: 55.2%;
}

#select a .btn {
	transition: all 0.4s;
	backface-visibility: hidden;
}

#select a:hover .btn {
	transform: scale(1.15);
}

@media screen and (max-width: 1120px) {
	#select #select_dinosaurs {
		width: 100%;
		margin-left: 0;
	}

	#select .copy_01 {
		margin-left: 20.5%;
		margin-bottom: 1.5%;
		width: 59%;
	}

	#select .copy_02 {
		margin-left: 5.4%;
		margin-bottom: 1.5%;
		width: 89.3%;
	}

	#select .copy_03 {
		margin-left: 17.5%;
		margin-bottom: 2.8%;
		width: 65.9%;
	}

	#select .copy_04 {
		margin-left: 15.2%;
		width: 69.6%;
	}

	#select .dina_ena {
		margin-left: 3.8%;
		width: 28.4%;
	}

}

@media screen and (max-width: 850px) {
	#select {
		width: 100%;
		margin-top: 20%;
		margin-bottom: 10%;
	}

	#select .pc_frame {
		width: 148%;
		margin-left: -24%;
	}

	#select .copy_01 {
		margin-left: 11.6%;
		width: 76.7%;
	}

	#select .copy_02 {
		margin-left: 18%;
		width: 65%;
	}

	#select .copy_03 {
		margin-left: 27.2%;
		margin-bottom: 1.5%;
		width: 45.6%;
	}

	#select .copy_04 {
		margin-left: 7.6%;
		margin-bottom: 2.8%;
		width: 85.7%;
	}

	#select .copy_05 {
		display: block;
		margin-left: 4.8%;
		width: 90.5%;
		transform-origin: bottom;
	}

	#select .dina_ena {
		margin-top: 4%;
		margin-left: 6%;
		width: 43.4%;
	}

	#select #select_dinosaurs {
		width: 90%;
		margin-left: 5%;
		padding-bottom: 10%;
		background-size: 14px;
		border-width: 4px;
	}

	#select .firedon_set {
		position: relative;
		width: 100%;
		margin-top: 10.6%;
		margin-left: -8%;
		padding-bottom: 81%;
	}

	#select .windon_set {
		position: relative;
		width: 100%;
		margin-top: 13.6%;
		margin-left: 5.1%;
		padding-bottom: 81%;
	}

}



/* ---- d_firedon ----*/

#d_firedon {
	margin-bottom: 30px;
}

#d_firedon .pc_frame {
	background: #007ea3 url(/static/files/zeroemissiondinosaurs/firedon/bg-field.jpg) center bottom no-repeat;
	background-size: 100%;
}

#d_firedon .sea {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_firedon .firedon_nh3_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 7.2%;
	width: 100%;
	transform-origin: bottom;
}

#d_firedon .firedon_nh3 {
	position: relative;
	margin-left: 2%;
	width: 39.7%;
}

#d_firedon .firedon_nh3_eyelid {
	position: absolute;
	top: 0;
	left: 26.6%;
	margin-top: 16.75%;
	width: 3.5%;
	opacity: 0;
}

#d_firedon .firedon_nh3_water_01 {
	position: absolute;
	top: 0;
	left: -0.1%;
	margin-top: 14.3%;
	width: 14.8%;
}

#d_firedon .firedon_nh3_water_02 {
	position: absolute;
	top: 0;
	left: -0.5%;
	margin-top: -3.5%;
	width: 16.4%;
	transform-origin: bottom left;
}

#d_firedon .firedon_nh3_spark {
	position: absolute;
	top: 0;
	left: 17.85%;
	margin-top: 2%;
	width: 22.3%;
}

#d_firedon .firedon_nh3_ammony_01 {
	position: absolute;
	top: 0;
	left: 18.8%;
	margin-top: -0.5%;
	width: 6.3%;
}

#d_firedon .firedon_nh3_ammony_02 {
	position: absolute;
	top: 0;
	left: 42.4%;
	margin-top: 16%;
	width: 6.1%;
}

#d_firedon .firedon_nh3_ammony_03 {
	position: absolute;
	top: 0;
	left: 10.3%;
	margin-top: 23.9%;
	width: 6.4%;
}


#d_firedon .firedon_h_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 5.7%;
	width: 100%;
	transform-origin: bottom;
}

#d_firedon .firedon_h {
	position: relative;
	margin-left: 53.3%;
	width: 41.1%;
}

#d_firedon .firedon_h_eyelid {
	position: absolute;
	top: 0;
	left: 63.5%;
	margin-top: 11.3%;
	width: 2.95%;
	opacity: 0;
}

#d_firedon .firedon_h_water_01 {
	position: absolute;
	top: 0;
	left: 73.5%;
	margin-top: 8.65%;
	width: 21.25%;
}

#d_firedon .firedon_h_water_02 {
	position: absolute;
	top: 0;
	left: 83.9%;
	margin-top: 16.2%;
	width: 5%;
}

#d_firedon .firedon_h_water_03 {
	position: absolute;
	top: 0;
	left: 64%;
	margin-top: -7.5%;
	width: 16.7%;
}

#d_firedon .firedon_h_spark_01 {
	position: absolute;
	top: 0;
	left: 52%;
	margin-top: 5.25%;
	width: 34.8%;
}

#d_firedon .firedon_h_spark_02 {
	position: absolute;
	top: 0;
	left: 86.1%;
	margin-top: -2.6%;
	width: 13.2%;
}

#d_firedon .firedon_h_suisso_01 {
	position: absolute;
	top: 0;
	left: 56.1%;
	margin-top: -5.5%;
	width: 7.4%;
}

#d_firedon .firedon_h_suisso_02 {
	position: absolute;
	top: 0;
	left: 92.9%;
	margin-top: 6.5%;
	width: 6.6%;
}

#d_firedon .firedon_h_suisso_03 {
	position: absolute;
	top: 0;
	left: 76.3%;
	margin-top: 16.8%;
	width: 6.8%;
}

#d_firedon .jerabo {
	position: absolute;
	bottom: 0;
	left: 52.4%;
	margin-bottom: 33.8%;
	width: 5.3%;
}

#d_firedon .dina {
	position: absolute;
	bottom: 0;
	left: 86.3%;
	margin-bottom: 8.6%;
	width: 7.9%;
}

#d_firedon .ena {
	position: absolute;
	bottom: 0;
	left: 91.3%;
	margin-bottom: 6.6%;
	width: 9.2%;
}

#d_firedon .grass {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 4.7%;
	width: 100.2%;
}

#d_firedon .grade {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 22px;
	mix-blend-mode: multiply;
	opacity: 0.8;
}

#d_firedon .name {
	position: absolute;
	top: 0;
	right: 49.8%;
	margin-top: 7.1%;
	width: 46.1%;
}

#d_firedon .desc {
	position: absolute;
	top: 0;
	left: 52.85%;
	margin-top: 3.2%;
	width: 40.1%;
}

@media screen and (max-width: 1120px) {
	#d_firedon .pc_frame {
		width: 110%;
		margin-left: calc((100% - 110%) / 2);
	}

	#d_firedon .firedon_nh3_set {
		left: 2%;
	}

	#d_firedon .firedon_h_set {
		left: -2%;
	}

	#d_firedon .jerabo {
		left: 49.4%;
	}

	#d_firedon .dina {
		left: 84.3%;
		margin-bottom: 7.6%;
		width: 7.9%;
	}

	#d_firedon .ena {
		left: 88.3%;
		margin-bottom: 4.6%;
		width: 9.2%;
	}

	#d_firedon .grade {
		display: none;
	}

	#d_firedon .name {
		width: 46.1vw;
	}

}

@media screen and (max-width: 850px) {
	#d_firedon {
		margin-bottom: 8%;
	}

	#d_firedon .pc_frame {
		width: 132%;
    margin-left: -16%;
	}

	#d_firedon .firedon_nh3_set {
		width: 110%;
		margin-bottom: 6.2%;
	}

	#d_firedon .firedon_nh3_ammony_02 {
		left: 34.4%;
		margin-top: -4%;
	}

	#d_firedon .firedon_h_set {
		width: 112%;
		left: -7%;
		margin-bottom: 5.4%;
	}

	#d_firedon .firedon_h_suisso_01 {
		margin-top: -10.5%;
	}

	#d_firedon .firedon_h_suisso_03 {
		left: 76.3%;
		margin-top: 6.8%;
	}

	#d_firedon .dina {
		left: 82.3%;
		margin-bottom: 1.2%;
		width: 10.9%;
		z-index: 1;
	}

	#d_firedon .ena {
		left: 79.3%;
		margin-bottom: -7.6%;
		width: 12.2%;
		z-index: 2;
	}

	#d_firedon .jerabo {
		margin-bottom: 38.8%;
	}

	#d_firedon .name {
		right: auto;
		left: 16%;
		margin-top: 4.1%;
		width: 62%;
	}

	#d_firedon .desc {
		left: 15%;
		margin-top: 14.5%;
		width: 70%;
	}

}


/* ---- d_firedon_desc ----*/

#d_firedon_desc .title {
	position: relative;
	margin-bottom: 45px;
	text-align: center;
}

#d_firedon_desc .title .bg {
	width: 95.7%;
	vertical-align: bottom;
}

#d_firedon_desc .title .txt {
	position: absolute;
	top: 0;
	left: 13.1%;
	margin-top: 4.65%;
	width: 58.5%;
	opacity: 0;
}

#d_firedon_desc .firedon_nh3_box {
	position: relative;
	width: 767px;
	padding-bottom: 48%;
	margin-left: 15.9%;
	margin-bottom: 40px;
	background: url(/static/files/zeroemissiondinosaurs/firedon/bg-desc.png) center 0;
	background-size: 16px;
	border: 4px solid #97c040;
}

#d_firedon_desc .firedon_nh3_box::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 11.6%;
	background-color: #97c040;
}

#d_firedon_desc .firedon_nh3_box .txt {
	position: absolute;
	top: 0;
	left: 4.7%;
	margin-top: 3.9%;
	width: 74.7%;
}

#d_firedon_desc .firedon_nh3_box .fukidashi {
	position: absolute;
	top: 0;
	right: -5%;
	margin-top: 1.2%;
	width: 27.2%;
	transform-origin: left;
}

#d_firedon_desc .firedon_nh3_box .before {
	position: absolute;
	bottom: 0;
	left: 2.2%;
	margin-bottom: 19.1%;
	width: 45.6%;
}

#d_firedon_desc .firedon_nh3_box .evo_ammony {
	position: absolute;
	bottom: 0;
	left: 70%;
	margin-bottom: 24.7%;
	width: 11.1%;
	opacity: 0;
}

#d_firedon_desc .firedon_nh3_box .evo_firedon {
	position: absolute;
	bottom: 0;
	left: 65%;
	margin-bottom: 23.7%;
	width: 18%;
	opacity: 0;
}

#d_firedon_desc .firedon_nh3_box .evo_flash {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-bottom: 4.7%;
	width: 50%;
}

#d_firedon_desc .firedon_nh3_box .firedon {
	position: absolute;
	bottom: 0;
	right: -5%;
	margin-bottom: 3.3%;
	width: 56.1%;
}

#d_firedon_desc .firedon_nh3_box .firedon_white {
	position: absolute;
	bottom: 0;
	right: -5%;
	margin-bottom: 3.3%;
	width: 56.1%;
	opacity: 0;
}

#d_firedon_desc .firedon_nh3_box .name {
	position: absolute;
	bottom: 0;
	left: 5%;
	margin-bottom: 2.8%;
	width: 89.1%;
}

#d_firedon_desc .firedon_h_box {
	position: relative;
	width: 767px;
	padding-bottom: 48%;
	margin-left: 15.9%;
	margin-bottom: 20px;
	background: url(/static/files/zeroemissiondinosaurs/firedon/bg-desc.png) center 0;
	background-size: 16px;
	border: 4px solid #46b095;
}

#d_firedon_desc .firedon_h_box::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 11.6%;
	background-color: #46b095;
}

#d_firedon_desc .firedon_h_box .txt {
	position: absolute;
	top: 0;
	left: 4.6%;
	margin-top: 3.8%;
	width: 74.2%;
}

#d_firedon_desc .firedon_h_box .fukidashi {
	position: absolute;
	top: 0;
	right: -5%;
	margin-top: 1.2%;
	width: 27.2%;
}

#d_firedon_desc .firedon_h_box .before {
	position: absolute;
	bottom: 0;
	left: 2.2%;
	margin-bottom: 20.4%;
	width: 45.6%;
}

#d_firedon_desc .firedon_h_box .evo_suisso {
	position: absolute;
	bottom: 0;
	left: 70%;
	margin-bottom: 24.7%;
	width: 11.1%;
	opacity: 0;
}

#d_firedon_desc .firedon_h_box .evo_firedon {
	position: absolute;
	bottom: 0;
	left: 65%;
	margin-bottom: 23.7%;
	width: 18%;
	opacity: 0;
}

#d_firedon_desc .firedon_h_box .evo_flash {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-bottom: 4.7%;
	width: 50%;
}

#d_firedon_desc .firedon_h_box .firedon {
	position: absolute;
	bottom: 0;
	right: -13.5%;
	margin-bottom: 2.5%;
	width: 63.7%;
}

#d_firedon_desc .firedon_h_box .firedon_white {
	position: absolute;
	bottom: 0;
	right: -13.5%;
	margin-bottom: 2.5%;
	width: 63.7%;
	opacity: 0;
}

#d_firedon_desc .firedon_h_box .name {
	position: absolute;
	bottom: 0;
	left: 13.2%;
	margin-bottom: 2.8%;
	width: 75.5%;
}

@media screen and (max-width: 1120px) {
	#d_firedon_desc {
		width: 100%;
	}

	#d_firedon_desc .title .bg {
		width: 94vw;
	}

	#d_firedon_desc .title .txt {
		left: 17.1%;
		margin-top: 4.65vw;
		width: 50.5%;
	}

	#d_firedon_desc .firedon_nh3_box {
		width: 750px;
		margin-left: 18.4%;
	}

	#d_firedon_desc .firedon_h_box {
		width: 750px;
		margin-left: 18.4%;
	}
}

@media screen and (max-width: 850px) {
	#d_firedon_desc .pc_frame {
		width: 100%;
		margin-left: 0;
	}

	#d_firedon_desc .title {
		margin-bottom: 6%;
	}

	#d_firedon_desc .title .bg {
		width: 97.6%;
		margin-left: 2.4%;
	}

	#d_firedon_desc .title .txt {
		left: 6.7%;
		margin-top: 2.2%;
		width: 57.2%;
	}

	#d_firedon_desc .firedon_nh3_box {
		width: 95%;
		padding-bottom: 97.6%;
		margin-left: 2.5%;
		margin-bottom: 6%;
		background-size: 8px;
		border-width: 3px;
	}

	#d_firedon_desc .firedon_nh3_box::before {
		padding-bottom: 12.6%;
	}

	#d_firedon_desc .firedon_nh3_box .txt {
		left: 5%;
		margin-top: 6.2%;
		width: 76.9%;
	}

	#d_firedon_desc .firedon_nh3_box .fukidashi {
		right: -3%;
		margin-top: 4.1%;
		width: 30.2%;
	}

	#d_firedon_desc .firedon_nh3_box .before {
		left: 1.8%;
		width: 43.8%;
	}

	#d_firedon_desc .firedon_nh3_box .firedon,
	#d_firedon_desc .firedon_nh3_box .firedon_white {
		right: -2%;
	}

	#d_firedon_desc .firedon_nh3_box .name {
		left: 2.4%;
		width: 94.9%;
	}

	#d_firedon_desc .firedon_h_box {
		width: 95%;
		padding-bottom: 92.8%;
		margin-left: 2.5%;
		margin-bottom: 4%;
		background-size: 8px;
		border-width: 3px;
	}

	#d_firedon_desc .firedon_h_box::before {
		padding-bottom: 12.6%;
	}

	#d_firedon_desc .firedon_h_box .txt {
		left: 5%;
		margin-top: 6.2%;
		width: 77.3%;
	}

	#d_firedon_desc .firedon_h_box .fukidashi {
		right: -3%;
		margin-top: 4.1%;
		width: 30.2%;
	}

	#d_firedon_desc .firedon_h_box .before {
		left: 1.8%;
		margin-bottom: 20.4%;
		width: 43.8%;
	}

	#d_firedon_desc .firedon_h_box .firedon,
	#d_firedon_desc .firedon_h_box .firedon_white {
		right: -13.5%;
		margin-bottom: 4.5%;
		width: 65.7%;
	}

	#d_firedon_desc .firedon_h_box .name {
		left: 7.2%;
		width: 84%;
	}
}


/* ---- d_windon ----*/

#d_windon .pc_frame {
	background: #00649d url(/static/files/zeroemissiondinosaurs/windon/bg-sky.png) center bottom no-repeat;
	background-size: 100%;
}

#d_windon .sea {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_windon .sea_set {
	position: absolute;
	bottom: 8%;
	left: -112%;
	width: 212%;
	overflow: hidden;
}

#d_windon .sea_set img {
	width: 50%;
	float: left;
}

#d_windon .windon_set {
	position: absolute;
	bottom: 0;
	margin-bottom: 32.7%;
	width: 100%;
	transform-origin: bottom;
}

#d_windon .windon_1 {
	width: 41.6%;
	margin-left: 8.9%;
}

#d_windon .windon_1_eyelid {
	position: absolute;
	top: 0;
	left: 33.4%;
	margin-top: 6.7%;
	width: 2.75%;
	opacity: 0;
}

#d_windon .windon_2_1 {
	position: absolute;
	bottom: 0;
	left: 2%;
	margin-bottom: 21.8%;
	width: 22.9%;
}

#d_windon .windon_2_2 {
	position: absolute;
	bottom: 0;
	left: 23.6%;
	margin-bottom: 24.4%;
	width: 13.7%;
}

#d_windon .windon_2_3 {
	position: absolute;
	bottom: 0;
	left: 35.4%;
	margin-bottom: 23%;
	width: 16.5%;
}

#d_windon .windon_3_1 {
	position: absolute;
	bottom: 0;
	left: -2.1%;
	margin-bottom: 18.1%;
	width: 10.5%;
}

#d_windon .windon_3_2 {
	position: absolute;
	bottom: 0;
	left: 10.9%;
	margin-bottom: 19.1%;
	width: 13.4%;
}

#d_windon .windon_3_3 {
	position: absolute;
	bottom: 0;
	left: 24.8%;
	margin-bottom: 19%;
	width: 10.8%;
}

#d_windon .windon_3_4 {
	position: absolute;
	bottom: 0;
	left: 35.4%;
	margin-bottom: 18%;
	width: 9%;
}

#d_windon .windon_3_5 {
	position: absolute;
	bottom: 0;
	left: 46.2%;
	margin-bottom: 18.7%;
	width: 7.5%;
}

#d_windon .windon_4_1 {
	position: absolute;
	bottom: 0;
	left: -3.4%;
	margin-bottom: 13.7%;
	width: 6.4%;
}

#d_windon .windon_4_2 {
	position: absolute;
	bottom: 0;
	left: 6.25%;
	margin-bottom: 14.6%;
	width: 7.95%;
}

#d_windon .windon_4_3 {
	position: absolute;
	bottom: 0;
	left: 17.8%;
	margin-bottom: 13.9%;
	width: 6.4%;
}

#d_windon .windon_4_4 {
	position: absolute;
	bottom: 0;
	left: 27.7%;
	margin-bottom: 14.5%;
	width: 5.1%;
}

#d_windon .windon_4_5 {
	position: absolute;
	bottom: 0;
	left: 36.4%;
	margin-bottom: 14.1%;
	width: 6.1%;
}

#d_windon .windon_4_6 {
	position: absolute;
	bottom: 0;
	left: 45.1%;
	margin-bottom: 14.3%;
	width: 6.1%;
}

#d_windon .jerabo {
	position: absolute;
	bottom: 0;
	margin-bottom: 16.3%;
	left: 77%;
	width: 4.2%;
}

#d_windon .yacht_set {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

#d_windon .dina_ena {
	margin-left: 70.8%;
	width: 29.2%;
	vertical-align: bottom;
}

#d_windon .splash_01 {
	position: absolute;
	bottom: 0;
	left: 76.1%;
	margin-bottom: 3.2%;
	width: 21.5%;
	opacity: 0;
	transform: scaleY(0.9);
	transform-origin: bottom;
}

#d_windon .splash_02 {
	position: absolute;
	bottom: 0;
	left: 76.1%;
	margin-bottom: 3.2%;
	width: 21.5%;
	transform-origin: bottom;
}

#d_windon .grade {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	mix-blend-mode: multiply;
	opacity: 0.8;
}

#d_windon .name {
	position: absolute;
	top: 0;
	left: 52.5%;
	margin-top: 4.9%;
	width: 26.2%;
}

#d_windon .txt {
	position: absolute;
	top: 0;
	left: 52.5%;
	margin-top: 12.2%;
	width: 44.9%;
}

@media screen and (max-width: 1120px) {

	#d_windon .name {
		left: 50.5%;
		width: 26.2vw;
	}

	#d_windon .txt {
		left: 50.5%;
		width: 44.9vw;
	}

	#d_windon .jerabo {
		left: 70%;
	}

	#d_windon .yacht_set {
		left: -7%;
	}
}

@media screen and (max-width: 850px) {
	#d_windon .sea {
		margin-bottom: -1%;
	}

	#d_windon .sea_set {
		bottom: 4%;
	}

	#d_windon .windon_set {
		margin-bottom: 26.7%;
		margin-left: 12.9%;
	}

	#d_windon .windon_2_1 {
		left: 19%;
		margin-bottom: 18.8%;
	}

	#d_windon .windon_2_2 {
		left: 40.6%;
		margin-bottom: 21.4%;
	}

	#d_windon .windon_2_3 {
		left: 52.4%;
		margin-bottom: 20%;
	}

	#d_windon .windon_3_1 {
		left: 15.1%;
		margin-bottom: 15.1%;
	}

	#d_windon .windon_3_2 {
		left: 27.9%;
		margin-bottom: 16.1%;
	}

	#d_windon .windon_3_3 {
		left: 41.8%;
		margin-bottom: 16%;
	}

	#d_windon .windon_3_4 {
		left: 52.4%;
		margin-bottom: 15%;
	}

	#d_windon .windon_3_5 {
		left: 63.2%;
		margin-bottom: 15.7%;
	}

	#d_windon .windon_4_1 {
		left: 14.4%;
		margin-bottom: 11.7%;
	}

	#d_windon .windon_4_2 {
		left: 23.25%;
		margin-bottom: 12.6%;
	}

	#d_windon .windon_4_3 {
		left: 34.8%;
		margin-bottom: 11.9%;
	}

	#d_windon .windon_4_4 {
		left: 44.7%;
		background: 12.5%;
	}

	#d_windon .windon_4_5 {
		left: 53.4%;
		margin-bottom: 12.1%;
	}

	#d_windon .windon_4_6 {
		left: 62.1%;
		margin-bottom: 12.3%;
	}

	#d_windon .jerabo {
		left: 70%;
	}

	#d_windon .yacht_set {
		left: -7%;
	}

	#d_windon .grade {
		display: none;
	}

	#d_windon .name {
		left: 16%;
		margin-top: 3.1%;
		width: 35.8%;
	}

	#d_windon .txt {
		left: 16%;
		margin-top: 13%;
		width: 68%;
	}
}


/* ---- end ----*/

#end .pc_frame {
	background: #007bad url(/static/files/zeroemissiondinosaurs/end/bg-field.jpg) center bottom no-repeat;
	background-size: 100%;
}

#end .dinosaurs {
	position: absolute;
	bottom: 0;
	left: -1%;
	width: 101.6%;
	transform-origin: top;
}

#end .dina_ena {
	position: absolute;
	bottom: 0;
	left: 0.5%;
	margin-bottom: 15%;
	width: 98.7%;
	transform-origin: bottom;
}

#end .firedon {
	position: absolute;
	bottom: 0;
	left: 13.4%;
	margin-bottom: 6.6%;
	width: 31.4%;
	transform-origin: 100% 30%;
}

#end .firedon_nh3 {
	position: absolute;
	bottom: 0;
	left: 25.1%;
	margin-bottom: 2.1%;
	width: 44.4%;
	transform-origin: 60% 30%;
}

#end .firedon_h {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-bottom: 2.8%;
	width: 50.1%;
	transform-origin: 0% 30%;
}

#end .windon {
	position: absolute;
	bottom: 0;
	left: 18.2%;
	margin-bottom: 25.3%;
	width: 28.7%;
	transform-origin: bottom;
}

#end .txt_01 {
	position: absolute;
	top: 0;
	left: 20.6%;
	margin-top: 4.6%;
	width: 57.5%;
}

#end .txt_02 {
	position: absolute;
	top: 0;
	left: 33.2%;
	margin-top: 8.2%;
	width: 31%;
}

@media screen and (max-width: 1120px) {
	#end .pc_frame {
		width: 105%;
		margin-left: calc((100% - 105%) / 2);
	}

	#end .txt_01 {
		position: absolute;
		top: 0;
		left: 16.6%;
		margin-top: 4.6%;
		width: 69%;
	}

	#end .txt_02 {
		position: absolute;
		top: 0;
		left: 31.8%;
		margin-top: 9.2%;
		width: 37.2%;
	}

	#end .dinosaurs {
		left: -2%;
	}

	#end .firedon {
		margin-bottom: 7.6%;
	}

	#end .firedon_nh3 {
		position: absolute;
		margin-bottom: 3.1%;
	}

	#end .firedon_h {
		margin-bottom: 3.8%;
	}

	#end .windon {
		margin-bottom: 27.3%;
	}
}

@media screen and (max-width: 850px) {
	#end .dinosaurs {
		left: -1%;
		bottom: -2%;
		width: 99.6%;
	}

	#end .dina_ena {
		left: -4.5%;
		margin-bottom: 30%;
		width: 108.7%;
	}

	#end .firedon {
		left: 5.4%;
		margin-bottom: 11.6%;
		width: 40.8%;
	}

	#end .firedon_nh3 {
		left: 21.1%;
		margin-bottom: 4.1%;
		width: 57.7%;
	}

	#end .firedon_h {
		left: 53%;
		margin-bottom: 5.8%;
		width: 65.1%;
	}

	#end .windon {
		left: 14.2%;
		margin-bottom: 38.3%;
	}

	#end .txt_01 {
		left: 6.6%;
		margin-top: 5.6%;
		width: 87.7%;
	}

	#end .txt_02 {
		left: 27.2%;
		margin-top: 12.2%;
		width: 42.3%;
	}
}


/* ---- handbook ----*/

#handbook {
	padding: 20px 0 90px;
}

#handbook .inner {
	max-width: 1120px;
	margin: 0 auto;
}

#handbook .btn_handbook_dl {
	position: relative;
	width: 55.1%;
	margin-left: 22.8%;
	transition: transform 0.3s;
}

#handbook .btn_off {
	width: 100%;
}

#handbook .btn_on {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: all 0.3s;
	backface-visibility: hidden;
}

#handbook .btn_arrow {
	position: absolute;
	top: 0;
	left: 90.1%;
	width: 2.6%;
	margin-top: 9.8%;
}

#handbook .btn_handbook_dl:hover {
	transform: scale(1.1);
}

#handbook a:hover .btn_on {
	opacity: 1;
}

@media screen and (max-width: 850px) {
	#handbook {
		padding: 2% 0 12%;
	}

	#handbook .btn_handbook_dl {
		width: 90%;
		margin-left: 5%;
	}

}


/* ---- banner_footer ----*/

#banner_footer {
	padding-top: 10px;
	background: url(/static/files/zeroemissiondinosaurs/footer/bg-green.png) 0 0 repeat-X;
	background-size: auto 271px;
}

#banner_footer .bg {
	background-color: #2b544a;
}

#banner_footer .inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 55px 0 60px;
}

#banner_footer .banner_list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
}

#banner_footer .banner_list li {
	width: 40.6%;
	margin: 0 30px;
}

#banner_footer .banner_list li a {
	transition: opacity 0.3s;
	backface-visibility: hidden;
}

#banner_footer .banner_list li a:hover {
	opacity: 0.6;
}

#banner_footer .banner_list li img {
	width: 100%;
}

@media screen and (max-width: 850px) {
	#banner_footer .inner {
		margin: 0 auto;
		padding: 7% 0 3%;
	}

	#banner_footer .banner_list {
		width: 70%;
		margin: 0 auto;
	}

	#banner_footer .banner_list li {
		width: 100%;
		margin: 0 0 6%;
	}
}